:root{--coral:#FF8FA3;--coral-soft:#FFB7C5;--peach:#FFD6A5;--mint:#B5EAD7;--sky:#A0E7E5;--lemon:#FFF3B0;--lilac:#C8B6FF;--ink:#41434b;--ink-soft:#8b8d96;--cream:#FFFDF8;--white:#ffffff;--shadow:0 10px 30px rgba(255, 143, 163, 0.18);--shadow-sm:0 6px 16px rgba(120, 120, 140, 0.12)}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{font-family:Jua,'Noto Sans KR',sans-serif;color:var(--ink);background:radial-gradient(circle at 12% 8%,#fff1f4 0,transparent 38%),radial-gradient(circle at 88% 14%,#e9fbf5 0,transparent 36%),radial-gradient(circle at 50% 100%,#fff8e8 0,transparent 45%),var(--cream);position:relative;overflow-x:hidden;line-height:1.6}.doodles{position:fixed;inset:0;pointer-events:none;z-index:0}.doodle{position:absolute;font-size:38px;opacity:.4;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.05))}.d1{top:12%;left:4%;animation-delay:0s}.d2{top:22%;right:5%;animation-delay:1.2s}.d3{top:62%;left:3%;animation-delay:2.1s}.d4{top:72%;right:4%;animation-delay:.6s}.d5{top:88%;left:7%;animation-delay:1.8s}.d6{top:44%;right:6%;animation-delay:2.7s}@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}.app-shell{position:relative;z-index:2;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:18px}.phone{width:100%;max-width:420px;height:min(760px,94dvh);background:var(--white);border-radius:36px;padding:12px;box-shadow:var(--shadow),0 0 0 7px #fff,0 0 0 9px #f2ece0;display:flex}#app{flex:1;display:flex;min-width:0}.screen{flex:1;width:100%;background:var(--white);border-radius:26px;padding:26px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto;position:relative}.screen--fwd{animation:slideInRight .32s cubic-bezier(.22,.61,.36,1) both}.screen--back{animation:slideInLeft .32s cubic-bezier(.22,.61,.36,1) both}@keyframes slideInRight{from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:none}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-7%)}to{opacity:1;transform:none}}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.result-kicker,.result-type,.screen--back,.screen--fwd{animation:none!important}}.title-hand{font-family:Gaegu,cursive;font-size:32px;font-weight:700;line-height:1.25;margin:6px 0 14px}.q-title{font-family:Jua,sans-serif;font-size:21px;line-height:1.4;margin:6px 0 20px}.body-txt{color:var(--ink-soft);font-size:14px;margin-bottom:16px}.micro{color:var(--ink-soft);font-size:12px;margin-top:14px}.cross-link{display:inline-block;margin-top:16px;font-family:Jua,sans-serif;font-size:13px;color:var(--coral);text-decoration:none;border-bottom:1.5px dotted var(--coral-soft);padding-bottom:1px;transition:color .15s ease,border-color .15s ease}.cross-link:hover{color:#e0607a;border-color:var(--coral)}.sub-label{align-self:flex-start;font-family:Gaegu,cursive;font-weight:700;color:var(--coral);font-size:16px;margin:14px 0 8px}.btn{border:none;cursor:pointer;font-family:Jua,sans-serif;font-size:17px;border-radius:999px;padding:15px 26px;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}.btn-primary{background:linear-gradient(135deg,var(--coral),var(--coral-soft));color:#fff;box-shadow:0 8px 18px rgba(255,143,163,.45);width:100%}.btn-ghost{background:#fff;color:var(--ink-soft);border:2px solid #eee5d8}.btn-back{background:#fff;color:var(--ink-soft);border:2px solid #eee5d8}.btn-sm{font-size:15px;padding:12px 20px}.btn-disabled{opacity:.45;pointer-events:none;box-shadow:none}.screen--landing{justify-content:center;gap:4px}.brand-name{font-family:Gaegu,cursive;font-weight:700;font-size:22px;color:var(--coral);letter-spacing:1px}.brand-name span{font-size:14px;color:var(--ink-soft)}.sun{position:absolute;top:18px;right:22px;font-size:34px;animation:float 5s ease-in-out infinite}.landing-emoji{font-size:76px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.08))}.tags{display:flex;gap:7px;margin:8px 0 22px;flex-wrap:wrap;justify-content:center}.tag{font-family:Gaegu,cursive;font-weight:700;font-size:14px;padding:5px 14px;border-radius:999px}.tag-pink{background:#ffe3e8;color:#e0607a}.tag-mint{background:#ddf6ec;color:#3fa983}.tag-sky{background:#dbf6f5;color:#2e9f9c}.nav-bar{display:flex;gap:10px;width:100%;margin-top:auto;padding-top:16px}.nav-bar .btn{flex:1}.nav-bar--back-only{justify-content:flex-start}.nav-bar--back-only .btn-back{flex:0 0 auto;min-width:120px}.skip-link{background:0 0;border:none;cursor:pointer;font-family:Jua,sans-serif;font-size:13px;color:var(--ink-soft);text-decoration:underline;margin:14px 0 4px;-webkit-tap-highlight-color:transparent}.progress{width:100%;height:12px;background:#f3ede1;border-radius:999px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--coral-soft),var(--coral));border-radius:999px;transition:width .35s ease}.step-count{font-family:Gaegu,cursive;font-weight:700;color:var(--ink-soft);font-size:15px;margin:10px 0 4px}.q-emoji{font-size:56px;margin:8px 0 2px}.options{display:flex;flex-direction:column;gap:12px;width:100%}.opt{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #f0e9dc;border-radius:20px;padding:14px 16px;font-family:Jua,sans-serif;font-size:16px;color:var(--ink);cursor:pointer;text-align:left;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.opt--sel{border-color:var(--coral);background:#fff1f4;box-shadow:0 6px 14px rgba(255,143,163,.25)}.opt-emoji{font-size:26px}.chips{display:flex;gap:8px;flex-wrap:wrap;width:100%}.chip{flex:1;min-width:78px;background:#fff;border:2px solid #f0e9dc;border-radius:16px;padding:11px 8px;font-family:Jua,sans-serif;font-size:14px;color:var(--ink);cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.chip--sel{border-color:#3fa983;background:#ddf6ec;color:#2c8a68;box-shadow:0 5px 12px rgba(63,169,131,.22)}.type-cards{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:6px}.type-card{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid #f0e9dc;border-radius:20px;padding:16px 18px;cursor:pointer;text-align:left;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.type-card--sel{border-color:var(--coral);background:#fff1f4;box-shadow:0 6px 14px rgba(255,143,163,.25)}.type-emoji{font-size:34px}.type-card>span:nth-child(2){display:flex;flex-direction:column}.type-name{font-family:Jua,sans-serif;font-size:17px}.type-desc{font-size:12px;color:var(--ink-soft)}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;width:100%;margin:16px 0 8px}.sw{display:flex;flex-direction:column;align-items:center;gap:5px;background:0 0;border:none;cursor:pointer;padding:0;transition:transform .15s ease}.sw:hover{transform:translateY(-3px)}.sw-dot{width:40px;height:40px;border-radius:50%;background:var(--c);box-shadow:var(--shadow-sm);border:2px solid rgba(0,0,0,.06);position:relative;transition:box-shadow .15s ease}.sw-dot--white{border:2px solid #d9d2c4}.sw-name{font-family:Jua,sans-serif;font-size:12px;color:var(--ink-soft)}.sw[data-on] .sw-dot{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--coral)}.sw[data-on] .sw-dot::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.45)}.sw[data-on] .sw-dot--white::after{color:var(--ink);text-shadow:none}.sw[data-on] .sw-name{color:var(--coral);font-weight:700}.screen--result{justify-content:flex-start;gap:2px}.result-kicker{font-family:Gaegu,cursive;font-weight:700;color:var(--ink-soft);font-size:16px;margin-top:6px}.result-type{font-family:Gaegu,cursive;font-size:40px;font-weight:700;color:var(--coral);margin:2px 0 12px}.result-kicker.is-reveal{animation:kickerPulse 1.1s ease both}.result-type.is-reveal{animation:typeReveal .55s cubic-bezier(.18,1.5,.5,1) .5s both}@keyframes kickerPulse{0%,100%{opacity:.55}25%{opacity:1;transform:translateX(-2px)}50%{opacity:.7;transform:translateX(2px)}75%{opacity:1;transform:translateX(-1px)}}@keyframes typeReveal{0%{opacity:0;transform:scale(.4)}65%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}.result-card{background:linear-gradient(135deg,#fff1f4,#fff8e8);border-radius:22px;padding:16px;width:100%;border:2px dashed var(--coral-soft)}.result-desc{font-size:14px;line-height:1.55}.result-tabs{display:flex;gap:8px;width:100%;margin:18px 0 4px;background:#f6f0e6;padding:5px;border-radius:16px}.r-tab{flex:1;border:none;background:0 0;cursor:pointer;font-family:Jua,sans-serif;font-size:14px;color:var(--ink-soft);padding:9px 6px;border-radius:12px;transition:all .15s ease}.r-tab--sel{background:#fff;color:var(--coral);box-shadow:var(--shadow-sm)}.rec-head{font-family:Gaegu,cursive;font-weight:700;font-size:20px;align-self:flex-start;margin:18px 0 10px}.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 9px;width:100%}.rec-item{position:relative;background:#fff;border:2px solid #f0e9dc;border-radius:18px;padding:14px 6px 12px;box-shadow:var(--shadow-sm)}.rec-item:has(.rec-tag--mine){border-color:var(--coral-soft)}.rec-tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);color:#fff;font-family:Jua,sans-serif;font-size:10px;line-height:1;padding:4px 8px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-sm)}.rec-tag--mine{background:var(--coral)}.rec-tag--sub{background:var(--lilac)}.rec-tag--base{background:#fff;color:var(--ink-soft);border:1.5px solid #e7ddcc}.rec-emoji{font-size:30px;display:block}.rec-name{font-family:Jua,sans-serif;font-size:13px;margin-top:5px}.rec-why{font-size:11px;color:var(--ink-soft);line-height:1.3}.rec-tips{font-size:12px;color:var(--ink-soft);margin-top:12px;text-align:center;line-height:1.4}.outfit-card{width:100%;background:#fff;border:2px solid #f0e9dc;border-radius:20px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}.outfit-card--custom{border-color:var(--coral);background:#fff7f9}.outfit-title{font-family:Gaegu,cursive;font-weight:700;font-size:17px;text-align:left;margin-bottom:10px}.outfit-row{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;margin:0 -10px;border-radius:12px;text-decoration:none;color:inherit;transition:background .15s;-webkit-tap-highlight-color:transparent}.outfit-row+.outfit-row{border-top:1px dashed #f0e9dc}.outfit-shop{margin-left:auto;flex:0 0 auto;font-family:Jua,sans-serif;font-size:11px;color:var(--coral);background:#ffe3e8;border-radius:999px;padding:4px 10px;white-space:nowrap}.outfit-slot{flex:0 0 auto;font-family:Jua,sans-serif;font-size:11px;color:var(--coral);background:#ffe3e8;border-radius:999px;padding:3px 9px}.outfit-icon{width:48px;height:48px;object-fit:contain;flex:0 0 auto}.outfit-info{display:flex;flex-direction:column;min-width:0}.outfit-name{font-family:Jua,sans-serif;font-size:15px}.outfit-why{font-size:12px;color:var(--ink-soft);line-height:1.35}.outfit-reflect{font-size:12px;color:var(--coral);margin-top:8px;text-align:left;line-height:1.4}.result-ad{margin:16px 0;display:flex;justify-content:center;min-height:100px}.avoid{background:#fbf4ff;border-radius:18px;padding:14px;width:100%;margin:16px 0 10px;border:2px solid #ecddfb}.avoid-head{font-family:Gaegu,cursive;font-weight:700;color:#9b6fd6;font-size:16px}.avoid-txt{font-size:13px;color:var(--ink-soft);margin-top:3px}.color-note{background:#fff8e8;border:2px solid var(--peach);border-radius:18px;padding:12px 14px;width:100%;margin-bottom:10px}.color-note-head{font-family:Jua,sans-serif;font-size:13px}.color-note-txt{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.4}.dual-btn{display:flex;gap:10px;width:100%;margin-top:auto;padding-top:14px}.dual-btn .btn{flex:1}.overlay{position:fixed;inset:0;z-index:50;display:none}.overlay.on{display:block}.dim{position:absolute;inset:0;background:rgba(60,50,50,.4);animation:fadeIn .25s ease}.sheet{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:420px;background:#fff;border-radius:28px 28px 0 0;padding:14px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;animation:sheetUp .35s ease}@keyframes sheetUp{from{transform:translate(-50%,60px);opacity:0}to{transform:translate(-50%,0);opacity:1}}.sheet-handle{width:44px;height:5px;border-radius:999px;background:#e7e0d4;margin-bottom:14px}.sheet-title{font-family:Gaegu,cursive;font-weight:700;font-size:20px;margin-bottom:18px}.share-opts{display:flex;gap:14px;width:100%;justify-content:center;margin-bottom:18px}.share-opt{flex:1;background:0 0;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;transition:transform .15s ease}.share-opt:hover{transform:translateY(-3px)}.share-ic{width:60px;height:60px;border-radius:22px;display:grid;place-items:center;font-size:28px;box-shadow:var(--shadow-sm)}.share-label{font-family:Jua,sans-serif;font-size:13px;color:var(--ink);line-height:1.25;text-align:center}.soon-badge{position:absolute;top:-6px;right:6px;background:var(--lilac);color:#fff;font-family:Gaegu,cursive;font-weight:700;font-size:10px;padding:1px 7px;border-radius:999px}.sheet-close{width:100%}.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-family:Jua,sans-serif;font-size:14px;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .25s ease;z-index:60;white-space:nowrap}.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}@media (hover:hover){.opt:hover{border-color:var(--coral-soft);transform:translateX(3px)}.chip:hover{border-color:var(--mint)}.type-card:hover{border-color:var(--sky);transform:translateX(3px)}.btn:hover{transform:translateY(-2px)}.btn-back:hover{border-color:var(--coral-soft);color:var(--coral)}.skip-link:hover{color:var(--coral)}.outfit-row:hover{background:#fff1f4}.outfit-row:hover .outfit-shop{background:var(--coral);color:#fff}}.screen::-webkit-scrollbar{width:6px}.screen::-webkit-scrollbar-thumb{background:#eee2d2;border-radius:999px}@media (max-width:460px){.app-shell{padding:0}.phone{height:100dvh;max-width:100%;border-radius:0;padding:0;box-shadow:none}.screen{border-radius:0}.doodle{opacity:.25;font-size:28px}}