@font-face{font-family:"Pretendard";src:url(../fonts/pretendard-subset.woff2) format("woff2-variations"),url(../fonts/pretendard-subset.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#22184a;--ink2:#3b3265;--sub:#6b6290;--vio:#6c4dff;--pink:#ff5fa2;--mint:#2fcfa6;--lem:#ffd84d;
--grad:linear-gradient(90deg,#6c4dff,#ff5fa2);--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;-webkit-text-size-adjust:100%}
body{min-height:100%;font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;
 background:#e9e3ff;background:radial-gradient(60% 50% at 0% 0%,#d9ceff,transparent 70%),radial-gradient(60% 50% at 100% 100%,#c9f5e8,transparent 70%),radial-gradient(50% 40% at 100% 0%,#ffd5e6,transparent 70%),#f1ecff}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit}
:focus:not(:focus-visible){outline:none}
h1[tabindex]:focus{outline:none}
:focus-visible{outline:3px solid var(--vio);outline-offset:2px;border-radius:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app{position:relative;width:100%;max-width:440px;margin:0 auto;height:100vh;height:100dvh;overflow:hidden;
 background:radial-gradient(70% 40% at 100% 0%,rgba(255,170,205,.75),transparent 70%),radial-gradient(80% 40% at 0% 35%,rgba(190,175,255,.8),transparent 70%),radial-gradient(90% 40% at 100% 80%,rgba(160,240,220,.6),transparent 70%),linear-gradient(180deg,#efeaff,#fff1f6 60%,#fff8ec)}
@media (min-width:520px){.app{height:min(100dvh - 48px,920px);margin-top:24px;border-radius:36px;box-shadow:0 30px 80px rgba(60,40,140,.22),0 0 0 1px rgba(34,24,74,.06)}
 body{padding-bottom:24px}}
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:0}
.view{position:absolute;inset:0;display:none;flex-direction:column;z-index:1}
.view.on{display:flex;animation:viewIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pad{padding-left:22px;padding-right:22px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.78);border:1.5px solid rgba(34,24,74,.08);font-size:13px;font-weight:600;white-space:nowrap}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;border-radius:20px;font-weight:800;font-size:17.5px;letter-spacing:-.02em;width:100%;transition:transform .12s, box-shadow .12s}
.btn:active{transform:translateY(3px)}
.btn.pri{background:var(--ink);color:#fff;box-shadow:0 6px 0 var(--vio),0 16px 30px rgba(108,77,255,.32)}
.btn.pri:active{box-shadow:0 3px 0 var(--vio),0 8px 18px rgba(108,77,255,.3)}
.btn.ig{color:#fff;background:linear-gradient(45deg,#feda75,#fa7e1e 25%,#d62976 55%,#962fbf 80%,#4f5bd5);box-shadow:0 10px 24px rgba(214,41,118,.28)}
.btn.ghost{background:#fff;border:2px solid rgba(34,24,74,.12);font-size:15.5px;min-height:52px}
.sticker{position:absolute;font-weight:900;padding:6px 12px;border-radius:14px;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:15px;background:#fff;white-space:nowrap}
.mascot{display:block}

/* ── landing ── */
#landing{overflow-y:auto;overflow-x:hidden;padding-top:calc(var(--safe-t) + 14px);padding-bottom:calc(var(--safe-b) + 22px)}
.notif{display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:22px;background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(80,50,160,.12);animation:drop .6s .2s both cubic-bezier(.2,1.4,.4,1)}
@keyframes drop{from{opacity:0;transform:translateY(-24px) scale(.96)}to{opacity:1;transform:none}}
.av{width:38px;height:38px;border-radius:11px;flex:none;background:linear-gradient(135deg,#8b6cff,#ff7fb5);display:flex;align-items:center;justify-content:center}
.hero{position:relative;height:clamp(190px,30dvh,250px);margin-top:6px}
.hero .mascot{position:absolute;left:50%;top:50%;width:min(220px,56vw);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 24px rgba(108,77,255,.3));animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-56%) rotate(2deg)}}
.hero .sticker{animation:wig 3.2s ease-in-out infinite}
@keyframes wig{0%,100%{rotate:0deg}50%{rotate:5deg}}
.kicker{font-size:13px;font-weight:800;color:var(--vio);letter-spacing:.08em}
h1.title{font-size:clamp(44px,13vw,54px);line-height:1.08;font-weight:900;letter-spacing:-.045em;margin-top:8px}
.lead{font-size:16px;line-height:1.6;color:var(--sub);margin-top:12px;font-weight:500}
.chips{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap}
.figrow{display:flex;align-items:center;gap:10px;margin-top:18px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.62)}
.figrow .dots{display:flex;flex:none}
.figrow .dots span{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff}
.figrow .dots span:first-child{margin-left:0}
.figrow p{font-size:13px;font-weight:600;color:var(--ink2);line-height:1.4}
.land-cta{margin-top:auto;padding-top:20px}
.fine{text-align:center;font-size:12px;color:var(--sub);margin-top:14px;font-weight:500;line-height:1.5}
.site-qr{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 12px 10px 10px;border-radius:18px;background:rgba(255,255,255,.88);border:1.5px solid rgba(34,24,74,.08);text-decoration:none}
.site-qr img{width:112px;height:112px;flex:none;border-radius:10px;background:#fff}
.site-qr > span{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--ink2);line-height:1.4}
.site-qr > span span{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:-.02em}

/* ── chat ── */
.hdr{padding-top:calc(var(--safe-t) + 6px);background:rgba(255,255,255,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(34,24,74,.06);padding-bottom:12px;position:relative;z-index:3}
.hdr-row{display:flex;align-items:center;gap:10px;height:52px}
.back{width:36px;height:36px;margin-left:-8px;border-radius:50%;font-size:26px;font-weight:300;display:flex;align-items:center;justify-content:center}
.hdr .av{width:38px;height:38px;border-radius:50%}
.who{flex:1;min-width:0}.who b{font-size:16px;display:block}.who small{font-size:12px;color:#17a884;font-weight:700}
.who small.typing{color:var(--vio)}
.count{font-weight:900;font-size:15px;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-variant-numeric:tabular-nums}
.count i{font-style:normal;opacity:.55}
.prog{height:8px;border-radius:4px;background:rgba(34,24,74,.08);overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:4px;background:var(--grad);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.log{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 22px 18px;scroll-behavior:smooth;position:relative;z-index:1;overscroll-behavior:contain}
.row{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.row .mini{width:30px;height:30px;flex:none}
.row .mini.ghost{visibility:hidden}
.b{max-width:min(290px,78%);padding:12px 15px;font-size:15.5px;line-height:1.5;letter-spacing:-.015em;border-radius:20px;animation:pop .32s cubic-bezier(.2,1.3,.4,1) both;transform-origin:left bottom}
.b.u{background:#fff;border-bottom-left-radius:6px;box-shadow:0 2px 10px rgba(60,40,140,.07)}
.b.q{font-weight:700;font-size:16.5px}
.b.react{background:#fff7d6;border:2px solid #ffd84d}
.b.me{background:var(--vio);color:#fff;margin-left:auto;border-bottom-right-radius:6px;transform-origin:right bottom;margin-top:10px}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:none}}
.old{opacity:.55;transition:opacity .4s}
.divider{text-align:center;margin:18px 0 6px}
.divider span{font-size:12px;font-weight:800;color:var(--sub);background:rgba(255,255,255,.75);padding:5px 12px;border-radius:999px}
.typing-b{display:inline-flex;gap:4px;padding:15px 16px}
.typing-b i{width:7px;height:7px;border-radius:50%;background:#b8aee0;animation:dot 1s infinite}
.typing-b i:nth-child(2){animation-delay:.15s}.typing-b i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.replies{position:relative;z-index:2;padding:10px 22px calc(var(--safe-b) + 16px);background:linear-gradient(180deg,rgba(255,248,240,0),rgba(255,248,240,.9) 22px)}
.replies .lbl{font-size:12px;font-weight:700;color:var(--sub);margin-bottom:2px;padding-left:4px}
.qr{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px;border-radius:18px;background:#fff;border:2px solid rgba(34,24,74,.1);font-size:15.5px;font-weight:600;margin-top:8px;letter-spacing:-.02em;line-height:1.35;animation:up .35s cubic-bezier(.2,1.2,.4,1) both;transition:border-color .15s, transform .12s, box-shadow .15s}
.qr:hover{border-color:rgba(108,77,255,.5)}
.qr:active,.qr.pick{border-color:var(--vio);box-shadow:0 0 0 4px rgba(108,77,255,.14);transform:scale(.98)}
.qr .e{font-size:20px;width:26px;text-align:center;flex:none}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.replies[hidden]{display:none}

/* ── result ── */
#result{overflow-y:auto;overflow-x:hidden;padding-top:calc(var(--safe-t) + 16px);padding-bottom:calc(var(--safe-b) + 24px)}
.res-top{text-align:center}
.res-q{font-size:17px;font-weight:700;color:var(--sub);margin-top:16px}
h1.tname{font-size:clamp(34px,10.5vw,42px);font-weight:900;letter-spacing:-.045em;line-height:1.15;margin-top:6px}
.tsub{font-size:14.5px;color:var(--sub);margin-top:8px;font-weight:600}
.fig{margin:18px 22px 0;padding:16px;border-radius:24px;background:#fff;box-shadow:0 12px 30px rgba(80,50,160,.12);border:2.5px solid var(--ink)}
.fig-h{display:flex;gap:14px;align-items:center}
.fig-h svg{flex:none;border-radius:16px}
.fig-k{font-size:12px;font-weight:800;color:var(--pink)}
.fig-n{font-size:21px;font-weight:900;letter-spacing:-.03em;margin-top:2px}
.fig-y{font-size:12.5px;color:var(--sub);margin-top:2px;font-weight:500}
.fig-f{font-size:13.5px;line-height:1.55;margin-top:12px;color:var(--ink2);background:#f7f4ff;padding:10px 12px;border-radius:12px}
.desc{font-size:15px;line-height:1.7;color:var(--ink2);font-weight:500;margin-top:16px}
.stats{display:flex;gap:5px;margin-top:12px;flex-wrap:wrap}
.tag{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.match{display:flex;gap:8px;margin-top:10px}
.match a{flex:1;min-width:0;padding:10px 12px;border-radius:14px;text-decoration:none;display:block}
.match a p:first-child{font-size:11.5px;font-weight:800}
.match a p:last-child{font-size:14px;font-weight:800;margin-top:2px}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.actions .two{display:flex;gap:8px}
.actions .two .btn{flex:1}
.shared-banner{display:block;margin:0 22px 4px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.8);font-size:13.5px;font-weight:700;text-align:center;text-decoration:none}
.shared-banner b{color:var(--vio)}
.foot{text-align:center;font-size:11.5px;color:var(--sub);margin-top:22px;line-height:1.6;padding:0 22px}

/* ── modal ── */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(20,12,50,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
.modal.on{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:400px;max-height:100%;overflow:auto;background:#fff;border-radius:28px;padding:18px;text-align:center;animation:pop .35s cubic-bezier(.2,1.2,.4,1)}
.sheet h2{font-size:18px;font-weight:900}
.sheet .pv{display:block;margin:12px auto;width:auto;height:min(52dvh,440px);aspect-ratio:9/16;border-radius:16px;box-shadow:0 10px 30px rgba(60,40,140,.2);background:#f1ecff;object-fit:cover}
.sheet .hint{font-size:12.5px;color:var(--sub);line-height:1.5;margin:4px 0 12px}
.sheet .btn{margin-top:8px}
.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 28px);transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:60;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (max-width:380px){.tag{font-size:12px;padding:6px 8px}.stats{gap:4px}}
@media (max-height:700px){.hero{height:170px}.hero .mascot{width:160px}h1.title{font-size:42px}.lead{font-size:15px}}