/* 체험 화면 — 랩 콘솔과 다른 얼굴. 큰 글자, 한 화면에 한 가지, 카드 하나. */
:root{
  --bg:#0b0b12; --fg:#f4f2ff; --dim:#9b97b3; --line:rgba(255,255,255,.09);
  --glass:rgba(255,255,255,.055); --acc:#c7b6ff; --acc2:#ff9ecb; --acc3:#7ee8d8;
  --ok:#7ee8a8; --warn:#ffd27e; --no:#ff8a8a;
}
@media (prefers-color-scheme:light){
  :root{--bg:#f6f4ff;--fg:#17142b;--dim:#6b6786;--line:rgba(20,10,60,.09);
    --glass:rgba(255,255,255,.66);--acc:#6c4cf0;--acc2:#e0407f;--acc3:#0f9d8a;--ok:#0f9d58;--warn:#b7791f;--no:#d23c3c}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 "Noto Sans KR",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
b{font-weight:700}

/* 배경 — 흐릿한 색 덩어리 셋 */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.o1{width:52vw;height:52vw;left:-12vw;top:-14vw;background:#6c4cf0}
.o2{width:44vw;height:44vw;right:-10vw;top:12vh;background:#e0407f;animation-delay:-8s}
.o3{width:40vw;height:40vw;left:22vw;bottom:-18vw;background:#0f9d8a;animation-delay:-15s}
@media (prefers-color-scheme:light){.bg i{opacity:.28}}
@keyframes drift{to{transform:translate(6vw,4vh) scale(1.08)}}

.nav{max-width:920px;margin:0 auto;padding:22px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font:800 18px/1 "Fraunces",serif;color:var(--fg);letter-spacing:-.4px}
.brand span{color:var(--dim);font-weight:600}
.tabs{display:flex;gap:4px;padding:4px;border-radius:99px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px)}
.tab{font:inherit;font-size:14px;font-weight:600;color:var(--dim);background:none;border:0;border-radius:99px;padding:8px 16px;cursor:pointer;transition:.2s}
.tab.on{color:var(--fg);background:var(--bg);box-shadow:0 2px 12px rgba(0,0,0,.18)}

.hero{max-width:920px;margin:0 auto;padding:56px 24px 28px;text-align:center}
.kicker{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.24em;color:var(--acc)}
h1{margin:0;font:800 clamp(30px,5.2vw,54px)/1.15 "Fraunces","Noto Sans KR",serif;letter-spacing:-.02em}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:18px auto 0;max-width:56ch;color:var(--dim);font-size:15.5px}

main{max-width:920px;margin:0 auto;padding:12px 24px 80px}
.pane{display:none}.pane.on{display:block}
.stage{padding:34px 28px 26px;border-radius:28px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(18px);box-shadow:0 30px 80px -40px rgba(0,0,0,.6);text-align:center}
.hint{margin:22px 0 0;color:var(--dim);font-size:14.5px}
.hint b{color:var(--fg)}
.alt{margin:16px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.file{font-size:13px;color:var(--dim);cursor:pointer;border-bottom:1px dashed var(--line);padding-bottom:1px}
.file:hover{color:var(--fg)}
.file input{display:none}
.file:has(:disabled){opacity:.4;pointer-events:none}
#play{width:100%;max-width:420px;height:36px;filter:invert(.9) hue-rotate(180deg) saturate(.6)}
@media (prefers-color-scheme:light){#play{filter:none}}

/* 마이크 버튼 — 진행 링 + 레벨 후광 */
.mic{position:relative;width:168px;height:168px;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff3 0,transparent 55%),linear-gradient(140deg,var(--acc),var(--acc2));
  box-shadow:0 18px 50px -14px color-mix(in srgb,var(--acc2) 70%,transparent);transition:transform .15s}
.mic:hover{transform:translateY(-2px) scale(1.02)}
.mic[disabled]{cursor:default}
.mic .ic{position:relative;font-size:58px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.mic .lv{position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--acc2) 60%,transparent);
  transform:scale(var(--lv,0));opacity:.45;transition:transform .08s;pointer-events:none}
.ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--line);stroke-width:3}
.ring #prog{stroke:var(--fg);stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;transition:stroke-dashoffset .25s linear}
.mic.on{animation:beat 1.1s ease-in-out infinite}
@keyframes beat{50%{box-shadow:0 18px 70px -8px color-mix(in srgb,var(--acc2) 90%,transparent)}}

/* 결과 카드 — interpret.card() 의 클래스들을 여기서 다시 입힌다 */
.out{margin-top:18px;display:grid;gap:14px}
.out:empty{display:none}
.itp{position:relative;padding:26px 28px 22px;border-radius:24px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(18px);overflow:hidden;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.itp::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc3))}
.itp:nth-child(2){animation-delay:.08s}.itp:nth-child(3){animation-delay:.16s}.itp:nth-child(n+4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.itp-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.itp-i{font-size:16px}
.itp-a{margin:10px 0 6px;font:800 clamp(30px,5vw,44px)/1.1 "Fraunces","Noto Sans KR",serif;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--fg),color-mix(in srgb,var(--fg) 70%,var(--acc)));-webkit-background-clip:text;background-clip:text;color:transparent}
.itp-l{margin:0 0 14px;font-size:17px}
.itp-l b{color:var(--acc)}
.itp-p{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.itp-p li{position:relative;padding:11px 14px 11px 40px;border-radius:14px;background:color-mix(in srgb,var(--fg) 4%,transparent);font-size:15px}
.itp-p li::before{content:"";position:absolute;left:16px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:linear-gradient(140deg,var(--acc),var(--acc2))}
.itp-tip{margin:16px 0 0;padding:14px 16px;border-radius:16px;font-size:15px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 18%,transparent),color-mix(in srgb,var(--acc2) 12%,transparent));border:1px solid var(--line)}
.itp-tip span{display:block;margin:0 0 3px;font-size:11.5px;font-weight:800;letter-spacing:.18em;color:var(--acc)}

/* 보조 — 감정 스펙트럼 · 나이 눈금 */
.spec{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:0 0 4px}
.spec div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.spec i{display:block;width:100%;height:56px;border-radius:8px;background:color-mix(in srgb,var(--fg) 6%,transparent);position:relative;overflow:hidden}
.spec i u{position:absolute;left:0;right:0;bottom:0;border-radius:8px;background:linear-gradient(180deg,var(--acc),var(--acc2))}
.spec .top{color:var(--fg);font-weight:700}
.rail{position:relative;height:10px;border-radius:99px;margin:10px 0 26px;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.rail .band{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));opacity:.35}
.rail .pt{position:absolute;top:-7px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--fg);
  box-shadow:0 4px 16px rgba(0,0,0,.35);border:3px solid var(--acc2)}
.rail .real{position:absolute;top:-5px;width:4px;height:20px;margin-left:-2px;border-radius:2px;background:var(--ok)}
.rail .t{position:absolute;top:16px;font-size:11px;color:var(--dim);transform:translateX(-50%)}
.aux{padding:20px 24px;border-radius:20px;background:var(--glass);border:1px solid var(--line)}
.aux h4{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.busy{color:var(--dim);text-align:center;padding:16px}
.err{color:var(--no)}

/* 피부 */
.cam{position:relative;width:min(100%,420px);margin:0 auto 18px;border-radius:22px;overflow:hidden;background:#000;aspect-ratio:1}
.cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.guide{position:absolute;inset:12%;border-radius:50%;border:2px dashed rgba(255,255,255,.6);pointer-events:none}
.row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px}
.cta{font:inherit;font-size:15px;font-weight:700;color:var(--fg);background:var(--glass);border:1px solid var(--line);
  border-radius:99px;padding:12px 22px;cursor:pointer;transition:.15s}
.cta:hover{border-color:var(--acc)}
.cta.go{color:#fff;background:linear-gradient(140deg,var(--acc),var(--acc2));border:0}
.agein{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:6px}
.agein input{font:inherit;width:4.5em;color:var(--fg);background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:6px 8px}

/* 표정 온도 — 영상 위 온도계 */
.therm{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:16px;background:rgba(10,8,20,.58);backdrop-filter:blur(8px);color:#fff}
.therm b{font:800 24px/1 "Fraunces","Noto Sans KR",serif;min-width:3.4em;text-align:left;white-space:nowrap}
.therm i{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.therm u{display:block;height:100%;width:0;border-radius:99px;transition:width .15s,background .3s}
.therm em{font-style:normal;font-size:14px;white-space:nowrap}
.moment{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:14px;color:var(--dim)}
.moment img{width:84px;height:84px;object-fit:cover;border-radius:50%;border:3px solid var(--acc2)}
.moment b{color:var(--fg)}

/* 그래프 */
.spark{display:block;width:100%;height:84px;overflow:visible}
.spark polyline,.spark line{vector-effect:non-scaling-stroke}
.spark polyline{fill:none;stroke:var(--acc2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.spark .dot{stroke:var(--acc);stroke-width:8;stroke-linecap:round}
.spark .mid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.sparkx{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.sparkx span{flex:1;text-align:center;min-width:0}
.sparkx span:first-child{text-align:left}.sparkx span:last-child{text-align:right}
.stack{display:block;width:100%;height:64px;border-radius:10px}
.stackl{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11.5px;color:var(--dim)}
.stackl span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--c)}

/* 히트맵 · 팔레트 · 목소리 컬러 */
.heat{display:block;width:100%;max-width:560px;margin:0 auto;border-radius:16px}
.legend{display:flex;gap:16px;justify-content:center;margin-top:12px;font-size:12.5px;color:var(--dim)}
.legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.legend .g::before{background:rgb(72,214,170)}.legend .y::before{background:rgb(255,211,92)}.legend .r::before{background:rgb(255,96,96)}
.pal{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pal span{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--dim);text-align:center;line-height:1.3}
.pal i{display:block;width:100%;max-width:64px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.pal.off{grid-template-columns:repeat(5,1fr)}
.pal.off i{position:relative;max-width:44px;opacity:.75}
.pal.off i::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--no);transform:rotate(45deg)}
.aux h4.gap{margin-top:18px}
.vcol{display:flex;align-items:center;gap:22px}
.vcol .orb{flex:none;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--c) 40%,#fff),var(--c) 58%,color-mix(in srgb,var(--c) 70%,#000));
  box-shadow:0 18px 44px -14px var(--c)}
.vcol h4{margin-bottom:6px}
.vcol b{display:block;font:800 24px/1.2 "Fraunces","Noto Sans KR",serif}
.vcol code{font-size:13px;color:var(--dim)}

/* 기록 */
.dgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.dv{display:flex;align-items:baseline;gap:10px;margin:-2px 0 10px}
.dv b{font:800 30px/1 "Fraunces","Noto Sans KR",serif}
.dv span{font-size:12.5px;color:var(--dim)}
.streak{display:flex;align-items:center;gap:16px;font-size:15px}
.streak .n{font:800 52px/1 "Fraunces",serif;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.streak span{color:var(--dim);font-size:13.5px}
.recent{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.recent li{display:flex;gap:12px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.recent time{flex:none;width:7.2em;color:var(--dim);font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--dim)}
.empty .big{font-size:40px;margin:0}

footer{max-width:920px;margin:0 auto;padding:0 24px 40px;font-size:13px;color:var(--dim);text-align:center}
@media (max-width:560px){.stage{padding:26px 18px 22px}.itp{padding:22px 20px 18px}.spec div{font-size:10.5px}
  .nav{flex-wrap:wrap;padding:16px 16px 0}.tabs{width:100%;justify-content:space-between}.tab{padding:8px 9px;font-size:13px}
  .hero{padding:36px 16px 20px}main{padding:8px 16px 60px}.pal{gap:6px}.vcol .orb{width:72px;height:72px}}