:root{--color-mint:#a8e6cf;--color-pink:#ff8b94;--color-cream:#fff9e6;--color-bg:#fcfcfc;--color-text:#333;--color-primary:#ff8b94;--color-secondary:#a8e6cf;--border-radius-lg:24px;--border-radius-md:16px;--box-shadow:0 8px 24px #0000000d}*{box-sizing:border-box;margin:0;padding:0;font-family:Pretendard,Inter,-apple-system,sans-serif}body{background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}button{cursor:pointer;background:0 0;border:none;font-family:inherit;transition:all .2s}#root{background-color:#f0f0f0;justify-content:center;min-height:100vh;display:flex}.mobile-container{background-color:var(--color-cream);flex-direction:column;width:100%;max-width:480px;min-height:100vh;display:flex;position:relative;overflow:hidden;box-shadow:0 0 20px #0000001a}.fade-in{animation:.5s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@font-face{font-family:Juache;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff)format("woff");font-weight:400;font-display:swap}@font-face{font-family:NanumSquareRound;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff)format("woff");font-weight:400;font-style:normal}@font-face{font-family:SchoolSafetyPictureDiary;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimGeurimilgiTTF-R.woff2)format("woff2");font-weight:400;font-display:swap}:root{--color-mint:#a8e6cf;--color-pink:#ffd3b6;--color-peach:#ffaaa5;--color-soft-pink:#ff8b94;--color-cream:#fff9e6;--color-bg-light:#fdfdfd;--color-card-bg:#ffffffe6;--color-text-main:#2c3e50;--color-text-sub:#7f8c8d}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--color-text-main);-webkit-font-smoothing:antialiased;background-color:#f5f5f5}.mobile-container{letter-spacing:-.5px;background:linear-gradient(135deg,#fffcf0 0%,#fff0f5 100%);flex-direction:column;max-width:480px;min-height:100vh;margin:0 auto;font-family:Juache,sans-serif;display:flex;position:relative;box-shadow:0 0 40px #0000000d}h1,h2,h3,h4,.result-type,.question-text,.hero-badge,.trigger-main,.section-title,.modal-name,.quote-box p,.choice-button,.food-name,.primary-button,.hero-subtext,.empathy-card h3,.cta-brand-name,.cta-invite,.nav-name,.share-title,.share-btn,.cta-brand-desc,.final-action-button,.retry-button,.explorer-toggle span,.share-sub,.empathy-p,.highlight{font-family:Juache,sans-serif!important;font-weight:400!important}button{cursor:pointer;background:0 0;border:none;outline:none;transition:all .2s}.landing-view{flex-direction:column;gap:32px;padding:40px 20px;display:flex}.hero-section{text-align:center;background:#fff;border-radius:36px;padding:40px 24px;box-shadow:0 15px 35px #0000000a}.hero-badge{color:#ff8b94;background:#fff3f4;border-radius:20px;margin-bottom:16px;padding:6px 16px;font-size:.9rem;display:inline-block}.hero-section h1{color:#333;margin-bottom:12px;font-size:2.2rem;line-height:1.25}.hero-section h1 span.highlight-text{color:#ff8b94;font-family:Juache,sans-serif!important}.hero-subtext{color:#777;margin-bottom:30px;font-size:1.05rem;line-height:1.5}.hero-image-wrapper{border-radius:24px;width:100%;margin-bottom:30px;overflow:hidden;box-shadow:0 15px 35px #0000000a}.hero-image{width:100%;display:block}.primary-button{color:#fff;background:#ff8b94;border-radius:50px;justify-content:center;align-items:center;gap:10px;width:100%;padding:22px;font-size:1.25rem;transition:all .3s cubic-bezier(.175,.885,.32,1.275);animation:2s infinite primary-pulse;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 25px #ff8b9466}.primary-button:hover{background:#ff7681;transform:scale(1.06)translateY(-5px);box-shadow:0 15px 35px #ff8b9499}.primary-button:after{content:"";background:linear-gradient(45deg,#fff0 0%,#ffffff4d 50%,#fff0 100%);width:200%;height:200%;transition:all .6s;position:absolute;top:-50%;left:-150%;transform:rotate(45deg)}.primary-button:hover:after{left:150%}@keyframes primary-pulse{0%{box-shadow:0 10px 25px #ff8b9466,0 0 #ff8b9466}70%{box-shadow:0 10px 25px #ff8b9466,0 0 0 15px #ff8b9400}to{box-shadow:0 10px 25px #ff8b9466,0 0 #ff8b9400}}.hero-meta{color:#bbb;margin-top:16px;font-size:.85rem;display:block;font-family:NanumSquareRound,sans-serif!important}.empathy-card{text-align:center;background:#fff;border-radius:36px;padding:32px 24px;box-shadow:0 10px 30px #00000008}.icon-heart{margin-bottom:16px}.empathy-card h3{margin-bottom:12px;font-size:1.5rem}.empathy-p{color:#555;text-align:center;margin-bottom:20px;font-size:1rem;line-height:1.6}.highlight{color:#ff8b94;text-align:center;font-size:1.1rem;font-weight:800}.test-view{padding:40px 24px}.progress-container{margin-bottom:40px}.progress-header{color:#ff8b94;margin-bottom:10px;font-family:NanumSquareRound,sans-serif;font-size:1rem;font-weight:800}.progress-bar{background:#eee;border-radius:5px;width:100%;height:10px;overflow:hidden}.progress-fill{background:#ff8b94;height:100%;transition:width .3s}.test-top-nav{align-items:center;height:40px;margin-bottom:10px;display:flex}.back-btn{color:#ff8b94;background:#fff;border-radius:50%;justify-content:center;align-items:center;padding:8px;display:flex;box-shadow:0 4px 10px #0000000d}.back-btn:active{transform:scale(.9)}.loading-view{background:#fff;flex:1;justify-content:center;align-items:center;padding:40px;display:flex}.loader-content{text-align:center;width:100%}.loading-emoji{margin-bottom:24px;font-size:4rem}.loading-title{color:#333;margin-bottom:16px;font-size:1.8rem}.loading-msg{color:#ff8b94;word-break:keep-all;min-height:1.6em;margin-bottom:40px;font-family:NanumSquareRound,sans-serif;font-size:1.1rem}.loading-bar-wrap{background:#f0f0f0;border-radius:10px;width:100%;height:8px;overflow:hidden}.loading-bar-fill{background:linear-gradient(90deg,#ff8b94,#ffaaa5);height:100%}.question-text{text-align:center;word-break:keep-all;margin-bottom:40px;font-size:1.5rem;line-height:1.4}.choice-list{flex-direction:column;gap:12px;display:flex}.choice-button{text-align:center;color:#444;background:#fff;border-radius:20px;padding:22px 24px;font-size:1.1rem;box-shadow:0 4px 15px #00000008}.choice-button:active{background:#fff3f4;transform:scale(.98)}.result-view{flex-direction:column;gap:24px;padding:24px 20px 60px;display:flex}.result-card{border-radius:40px;padding:40px 24px;position:relative}.result-type{color:#333;margin-bottom:12px;font-size:2rem}.quote-box{background:#ffffffb3;border-radius:20px;margin-bottom:8px;padding:16px 20px}.quote-box p{font-size:1rem;text-align:center!important}.result-image-container{width:100%;max-width:260px;margin:4px auto 12px}.result-main-image{width:100%;display:block}.result-description{color:#444;white-space:pre-wrap;text-align:left;margin-bottom:24px;padding:0 8px;font-family:NanumSquareRound,sans-serif;font-size:.95rem;line-height:1.7}.food-recommendations h3{margin-bottom:16px;font-size:1.2rem}.food-grid{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px;display:flex}.food-item{background:#fff;border-radius:50px;align-items:center;gap:6px;padding:8px 16px;display:flex;box-shadow:0 4px 10px #0000000d}.card-compat{flex-direction:column;gap:20px;margin-top:24px;display:flex}.compat-block{text-align:left;background:#ffffff80;border-radius:28px;padding:20px 16px}.card-compat-label{color:#444;margin-bottom:12px;font-size:1rem;font-weight:800}.card-compat-list{flex-direction:column;gap:8px;display:flex}.card-compat-item{text-align:left;background:#fff;border-radius:20px;flex-direction:row;align-items:flex-start;gap:16px;width:100%;padding:16px;display:flex;box-shadow:0 4px 12px #00000005}.card-compat-thumb{background:#f8f9fa;border:1px solid #eee;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;display:flex;overflow:hidden}.card-compat-thumb img{object-fit:cover;width:100%;height:100%}.card-compat-content{flex-direction:column;flex:1;gap:4px;display:flex}.card-compat-main{justify-content:space-between;align-items:center;width:100%;margin-bottom:2px;display:flex}.card-compat-name{color:#333;align-items:center;gap:6px;font-size:1.05rem;display:flex}.card-compat-score{font-size:1.15rem;font-weight:900}.card-compat-score.best{color:#ff8b94}.card-compat-score.realistic{color:#f39c12}.card-compat-score.worst{color:#b21f1f}.card-compat-reason{color:#666;word-break:keep-all;width:100%;font-family:NanumSquareRound,sans-serif;font-size:.88rem;line-height:1.5}.share-section{text-align:center;margin-top:20px}.share-title{color:#444;margin-bottom:4px;font-size:1.2rem}.share-sub{color:#ff8b94;margin-bottom:24px;font-size:1rem}.share-buttons{gap:12px;padding:0 10px;display:flex}.share-btn{border-radius:18px;flex:1;justify-content:center;align-items:center;gap:8px;padding:18px;font-size:1.1rem;font-weight:800;display:flex}.share-btn.kakao{color:#3c1e1e;background:#fee500}.share-btn.link{color:#666;background:#f0f0f0}.cta-card{color:#fff;text-align:center;background:linear-gradient(135deg,#1a2a6c,#b21f1f,#fdbb2d) 0 0/200% 200%;border-radius:36px;flex-direction:column;align-items:center;gap:16px;margin-top:20px;padding:36px 24px;animation:15s infinite gradientBG;display:flex;box-shadow:0 12px 25px #0000001a}@keyframes gradientBG{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.cta-brand-name{margin-bottom:8px;font-size:3rem;color:#fff!important}.cta-brand-desc{color:#fffffff2;font-size:1.05rem;line-height:1.6}.cta-action-area{flex-direction:column;align-items:center;width:100%;padding-bottom:50px;display:flex;position:relative}.final-action-button{color:#b21f1f;z-index:2;background:#fff;border-radius:24px;width:100%;max-width:280px;padding:22px;font-size:1.3rem;font-weight:900;transition:all .3s cubic-bezier(.175,.885,.32,1.275);animation:2s infinite cta-pulse;position:relative;overflow:hidden;box-shadow:0 10px 25px #0003,0 0 20px #ffffff4d}.final-action-button:hover{color:#d32f2f;background:#fff3f3;transform:scale(1.08)translateY(-5px);box-shadow:0 20px 40px #0000004d,0 0 30px #ffffff80}.final-action-button:after{content:"";z-index:3;background:linear-gradient(45deg,#fff0 0%,#fff9 50%,#fff0 100%);width:200%;height:200%;transition:all .6s;position:absolute;top:-50%;left:-150%;transform:rotate(45deg)}.final-action-button:hover:after{left:150%}@keyframes cta-pulse{0%{transform:scale(1);box-shadow:0 10px 25px #0003,0 0 #ffffff80}70%{transform:scale(1.02);box-shadow:0 10px 25px #0003,0 0 0 20px #fff0}to{transform:scale(1);box-shadow:0 10px 25px #0003,0 0 #fff0}}@keyframes pulse-float{0%{opacity:1;transform:translate(-50%)scale(1)}50%{opacity:.9;transform:translate(-50%)scale(1.05)}to{opacity:1;transform:translate(-50%)scale(1)}}.cta-pre-trial{color:#3e2723;white-space:nowrap;z-index:10;background:#ffec3d;border-radius:12px;padding:10px 22px;font-size:1rem;font-weight:900;animation:1.5s ease-in-out infinite pulse-float;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 6px 15px #0003}.cta-pre-trial:after{content:"";border-bottom:6px solid #ffec3d;border-left:6px solid #0000;border-right:6px solid #0000;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.bubble-area{flex-direction:column;gap:12px;width:100%;margin-top:24px;display:flex}.speech-bubble{color:#333;background:#fff;border-radius:16px 16px 16px 2px;align-self:flex-start;padding:10px 16px;font-size:.9rem;box-shadow:0 4px 10px #00000014;font-family:SchoolSafetyPictureDiary,sans-serif!important}.thought-bubble{color:#fff;background:#fff3;border:1px dashed #ffffff80;border-radius:16px 16px 2px;align-self:flex-end;padding:10px 16px;font-size:.95rem;font-family:SchoolSafetyPictureDiary,sans-serif!important}.retry-button{color:#aaa;align-self:center;margin-top:30px;font-size:.95rem;text-decoration:underline}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{background:#fff;border-radius:36px;width:100%;max-width:420px;max-height:85vh;padding:40px 24px;position:relative;overflow-y:auto}.modal-close{color:#ccc;position:absolute;top:20px;right:20px}.modal-scroll-content{flex-direction:column;align-items:center;gap:12px;display:flex}.modal-name{text-align:center;color:#333;font-size:2rem}.modal-quote{background:#f8f9fa;border-radius:16px;justify-content:center;align-items:center;width:100%;margin:4px 0;padding:12px 20px;display:flex}.modal-quote p{color:#555;font-size:1.1rem;font-weight:700;text-align:center!important}.modal-img-wrap{border-radius:50%;justify-content:center;align-items:center;width:160px;height:160px;margin:8px 0;display:flex}.modal-img{width:100%}.modal-desc{color:#666;text-align:center;padding:0 12px;font-family:NanumSquareRound,sans-serif;font-size:.95rem;line-height:1.7}.modal-foods{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.modal-food-tag{color:#888;background:#f0f0f0;border-radius:50px;padding:8px 16px;font-size:.9rem;font-weight:800}.modal-my-compat{text-align:left;border:2px solid #eee;border-radius:24px;width:100%;margin-top:24px;padding:24px}.modal-my-compat.best{background:#fff5f6;border-color:#ff8b94}.modal-my-compat.realistic{background:#fffdf0;border-color:#fc0}.modal-my-compat.worst{background:#fff5f5;border-color:#b21f1f}.modal-my-compat.me{background:#f8f9fa;border-color:#eee}.modal-my-compat-title{color:#333;margin-bottom:12px;font-size:1.1rem;font-weight:800}.modal-my-compat-box{align-items:center;gap:16px;display:flex}.modal-my-score{color:#2c3e50;min-width:65px;font-size:2rem;font-weight:900}.modal-my-reason{color:#555;word-break:keep-all;font-family:NanumSquareRound,sans-serif;font-size:.95rem;line-height:1.6}.type-explorer{width:100%;margin-top:40px}.explorer-toggle{color:#555;background:#fff;border:1px solid #eee;border-radius:18px;justify-content:space-between;align-items:center;width:100%;padding:18px 24px;font-size:1.1rem;display:flex}.explorer-grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:20px 0;display:grid}.type-mini-card{text-align:center;cursor:pointer;background:#fff;border-radius:24px;padding:16px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #00000008}.type-mini-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #0000000d}.mini-type-img{border-radius:50%;width:70px;height:70px;margin-bottom:10px}.mini-name{font-size:.95rem;display:block}.feedback-section{text-align:center;background:#fff;border-radius:36px;margin-top:20px;padding:30px 24px;box-shadow:0 10px 30px #00000008}.feedback-title{color:#333;margin-bottom:20px;font-size:1.25rem}.feedback-buttons{justify-content:center;gap:10px;display:flex}.feedback-btn{color:#666;background:#f8f9fa;border:1px solid #eee;border-radius:16px;flex:1;padding:14px 10px;font-size:.95rem;font-weight:800}.feedback-btn:active{transform:scale(.95)}.feedback-btn.active{color:#fff;background:#ff8b94;border-color:#ff8b94}.feedback-regret-box{text-align:left;flex-direction:column;gap:16px;margin-top:24px;display:flex}.feedback-regret-msg{color:#555;word-break:keep-all;font-family:NanumSquareRound,sans-serif;font-size:.95rem;line-height:1.6}.feedback-select-wrapper{position:relative}.feedback-select{color:#333;appearance:none;cursor:pointer;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff8b94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:20px;border-radius:14px;width:100%;padding:14px 40px 14px 16px;font-size:1rem;border:2px solid #eee!important;font-family:Juache,sans-serif!important}.feedback-select:focus{border-color:#ff8b94;outline:none}.feedback-quote-preview{background:#fff9f9;border:1px dashed #ff8b94;border-radius:16px;padding:16px}.feedback-quote-preview p{color:#ff8b94!important;text-align:center!important;margin:0!important;font-size:.95rem!important}.feedback-submit-btn{color:#fff;background:#ff8b94;border-radius:16px;width:100%;margin-top:8px;padding:16px;font-size:1.05rem;font-weight:800;box-shadow:0 4px 12px #ff8b9433}.feedback-success-msg{color:#444;word-break:keep-all;padding:10px 0;font-family:NanumSquareRound,sans-serif;font-size:1rem;line-height:1.6}