/* ============================================================
   Ye — AI 영어회화
   디자인 컨셉: 귀엽고 활기찬 (rounded · warm cream · violet + sunny + pink + mint)
   모바일 전용 (390~430px) · 라이트/다크 자동
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

:root{
  --app-w:430px;

  /* 바탕 */
  --bg:#fff7f1;            /* 따뜻한 크림 */
  --surface:#ffffff;
  --surface-2:#fdeee4;     /* 살구빛 톤 */
  --surface-3:#f6efff;     /* 연보라 톤 */
  --border:#f0dfd2;

  /* 글자 */
  --text:#2b1c2e;
  --text-dim:#6b5a6e;
  --text-mute:#6b5a6e;

  /* 포인트 */
  --brand:#6c4cf0;         /* 보라 — 주 액션 */
  --brand-strong:#5a3ada;
  --brand-soft:#ece5ff;
  --sunny:#ffb01f;         /* 노랑 — 보상·스트릭 */
  --sunny-soft:#fff2d6;
  --sunny-ink:#8a5a00;     /* 노랑 위 글자 대신 쓰는 진한 색 */
  --pink:#ff5c9e;          /* 분홍 — 귀여운 강조 */
  --pink-soft:#ffe6f0;
  --mint:#12b886;          /* 민트 — 성공 */
  --mint-soft:#dbf8ee;

  --good:#0f9b6c; --good-soft:#dbf8ee;
  --warn:#b96b00; --warn-soft:#fff2d6;
  --bad:#e03131;  --bad-soft:#ffe8e6;
  --gold:#8a5a00;

  --radius:18px; --radius-lg:26px; --radius-xl:32px;
  --shadow:0 2px 0 rgba(43,28,46,.05), 0 10px 24px rgba(108,76,240,.09);
  --shadow-pop:0 4px 0 rgba(43,28,46,.07), 0 14px 30px rgba(108,76,240,.14);
  --pop:cubic-bezier(.34,1.56,.64,1);

  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
         "Malgun Gothic",system-ui,sans-serif;
  --font-display:"Jua",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#191324; --surface:#221a31; --surface-2:#2c2140; --surface-3:#2a2142;
    --border:#3a2d52;
    --text:#f6effa; --text-dim:#c0b2cf; --text-mute:#a79ab6;
    --brand:#9c85ff; --brand-strong:#8a6dff; --brand-soft:#2e2350;
    --sunny:#ffc44d; --sunny-soft:#3a2c14; --sunny-ink:#ffc44d;
    --pink:#ff86ba; --pink-soft:#3d1f30;
    --mint:#3ddca4; --mint-soft:#15332a;
    --good:#3ddca4; --good-soft:#15332a;
    --warn:#ffc44d; --warn-soft:#3a2c14;
    --bad:#ff8080;  --bad-soft:#3a1d1d;
    --gold:#ffc44d;
    --shadow:0 2px 0 rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.35);
    --shadow-pop:0 4px 0 rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#191324; --surface:#221a31; --surface-2:#2c2140; --surface-3:#2a2142;
  --border:#3a2d52;
  --text:#f6effa; --text-dim:#c0b2cf; --text-mute:#a79ab6;
  --brand:#9c85ff; --brand-strong:#8a6dff; --brand-soft:#2e2350;
  --sunny:#ffc44d; --sunny-soft:#3a2c14; --sunny-ink:#ffc44d;
  --pink:#ff86ba; --pink-soft:#3d1f30;
  --mint:#3ddca4; --mint-soft:#15332a;
  --good:#3ddca4; --good-soft:#15332a;
  --warn:#ffc44d; --warn-soft:#3a2c14;
  --bad:#ff8080;  --bad-soft:#3a1d1d;
  --gold:#ffc44d;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  padding-bottom:88px;
}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-strong)}
h1,h2,h3{margin:0 0 .4em; line-height:1.3; letter-spacing:-.01em; font-family:var(--font-display); font-weight:400}
h1{font-size:1.55rem} h2{font-size:1.2rem} h3{font-size:1.02rem}

/* ============================================================
   모바일 전용 레이아웃 — 넓은 화면에서도 휴대폰 폭 그대로
   ============================================================ */
.wrap{max-width:var(--app-w); margin:0 auto; padding:16px}
.topbar,.dock,.tabbar{max-width:var(--app-w); margin-left:auto; margin-right:auto}
@media (min-width:600px){
  body{background:var(--surface-2)}
  .wrap{background:var(--bg); min-height:100vh}
  .topbar,.wrap,.dock,.tabbar{
    border-left:1px solid var(--border); border-right:1px solid var(--border);
  }
}

/* ---------- 상단바 ---------- */
.topbar{
  position:sticky; top:0; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--border); display:flex; align-items:center;
  gap:8px; padding:9px 14px;
}
.topbar .logo{
  font-family:var(--font-display); font-size:1.32rem; line-height:1;
  color:var(--brand); letter-spacing:.01em; display:flex; align-items:center; gap:6px;
}
.topbar .logo .dot{
  width:9px; height:9px; border-radius:50%; background:var(--pink);
  display:inline-block; margin-bottom:10px;
}
.topbar .sp{flex:1}

/* ---------- 칩 ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:999px; background:var(--surface-2); border:0;
  font-size:.78rem; font-weight:700; color:var(--text-dim); white-space:nowrap;
}
.chip.brand{background:var(--brand-soft); color:var(--brand)}
.chip.gold{background:var(--sunny-soft); color:var(--sunny-ink)}
.chip.pink{background:var(--pink-soft); color:#b3216b}
.chip.mint{background:var(--mint-soft); color:var(--good)}
.chip.tiny{font-size:.7rem; padding:3px 8px}

/* ---------- 카드 ---------- */
.card{
  background:var(--surface); border:2px solid var(--border);
  border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow);
  margin-bottom:14px;
}
.card.tight{padding:13px}
.card.picked{border-color:var(--brand); box-shadow:var(--shadow-pop)}
.card.sunny{border-color:#f3d79a; background:linear-gradient(180deg,var(--sunny-soft),var(--surface) 60%)}
.card-head{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.card-head h2,.card-head h3{margin:0}
.card-head .sp{flex:1}
.muted{color:var(--text-dim)} .mute2{color:var(--text-dim)}
.small{font-size:.86rem} .tiny{font-size:.76rem}
.grid{display:grid; gap:11px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}

/* ---------- 버튼 (통통한 3D 느낌) ---------- */
.btn{
  appearance:none; border:2px solid var(--border); background:var(--surface);
  color:var(--text); border-radius:16px; padding:10px 16px; font-size:.95rem;
  font-weight:800; font-family:inherit; cursor:pointer;
  transition:transform .12s var(--pop), background .15s, box-shadow .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; box-shadow:0 2px 0 rgba(43,28,46,.06);
}
.btn:hover{background:var(--surface-2); transform:translateY(-1px)}
.btn:active{transform:translateY(1px); box-shadow:none}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn.primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 3px 0 var(--brand-strong);
}
.btn.primary:hover{background:var(--brand-strong); border-color:var(--brand-strong)}
.btn.primary:active{box-shadow:0 1px 0 var(--brand-strong)}
.btn.sunny{background:var(--sunny); border-color:var(--sunny); color:#3d2600; box-shadow:0 3px 0 #d98f00}
.btn.pinky{background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 3px 0 #d93b7d}
.btn.ghost{background:transparent; border-color:transparent; color:var(--text-dim); box-shadow:none}
.btn.ghost:hover{background:var(--surface-2)}
.btn.block{width:100%}
.btn.lg{padding:15px 20px; font-size:1.05rem; border-radius:20px; min-height:54px}
.btn.sm{padding:6px 11px; font-size:.82rem; border-radius:12px; min-height:36px}
.btn.danger{color:var(--bad); border-color:var(--bad)}

/* ---------- 입력 ---------- */
input,select,textarea{
  font-family:inherit; font-size:.95rem; color:var(--text);
  background:var(--surface-2); border:2px solid transparent;
  border-radius:15px; padding:11px 13px; width:100%; min-height:46px;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); background:var(--surface);
}
label{display:block; font-size:.82rem; font-weight:700; color:var(--text-dim); margin:0 0 5px}
.field{margin-bottom:12px}

/* ---------- 진행 바 ---------- */
.bar{height:12px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.bar > i{
  display:block; height:100%; border-radius:99px; transition:width .6s var(--pop);
  background:linear-gradient(90deg,var(--brand),var(--pink));
}
.bar.gold > i{background:linear-gradient(90deg,#ffb01f,#ff8a3d)}
.bar.mint > i{background:linear-gradient(90deg,var(--mint),#7ae3c3)}
.bar.thin{height:8px}

/* ---------- 단계 ---------- */
.stage-row{display:flex; gap:7px; overflow-x:auto; padding:6px 0 20px; scrollbar-width:none}
.stage-row::-webkit-scrollbar{display:none}
.stage-dot{
  flex:0 0 auto; width:44px; height:44px; border-radius:16px; display:grid;
  place-items:center; font-size:1rem; font-weight:800; background:var(--surface-2);
  border:2px solid var(--border); color:var(--text-dim); position:relative;
  transform:rotate(-3deg);
}
.stage-dot:nth-child(even){transform:rotate(3deg)}
.stage-dot.done{background:var(--brand-soft); border-color:var(--brand); color:var(--brand)}
.stage-dot.now{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 0 0 5px var(--brand-soft); transform:rotate(0) scale(1.08);
}
.stage-dot.final{border-color:var(--sunny); background:var(--sunny-soft); color:var(--sunny-ink)}
.stage-dot b{position:absolute; bottom:-17px; font-size:.62rem; color:var(--text-dim); font-weight:800}

/* ---------- 보상 ---------- */
.reward-box{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--surface-2); min-height:150px; display:grid; place-items:center;
}
.reward-box img{width:100%; height:100%; object-fit:cover; display:block; max-height:230px}
.reward-box.locked img{filter:blur(15px) saturate(.5); transform:scale(1.1)}
.reward-lock{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  background:rgba(43,28,46,.5); color:#fff; padding:16px; gap:6px;
}
.reward-lock .big{font-size:2rem}
.reward-empty{color:var(--text-dim); text-align:center; padding:24px 14px}

/* ---------- 시나리오 카드 ---------- */
.sc-list{display:grid; gap:10px}
.sc{
  display:flex; gap:12px; align-items:flex-start; padding:13px;
  background:var(--surface); border:2px solid var(--border);
  border-radius:var(--radius); cursor:pointer; text-align:left; width:100%;
  font-family:inherit; color:inherit; box-shadow:0 2px 0 rgba(43,28,46,.05);
  transition:transform .12s var(--pop), border-color .15s;
}
.sc:hover{border-color:var(--brand); transform:translateY(-2px)}
.sc .ic{
  flex:0 0 44px; height:44px; border-radius:15px; background:var(--brand-soft);
  color:var(--brand); display:grid; place-items:center; font-size:1.2rem;
}
.sc:nth-child(3n+2) .ic{background:var(--pink-soft); color:#b3216b}
.sc:nth-child(3n) .ic{background:var(--mint-soft); color:var(--good)}
.sc .body{flex:1; min-width:0}
.sc .t{font-weight:800; font-size:.96rem}
.sc .s{font-size:.8rem; color:var(--text-dim); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.sc .meta{display:flex; gap:5px; margin-top:7px; flex-wrap:wrap}
.sc.locked{opacity:.55; cursor:not-allowed}
.sc.locked:hover{border-color:var(--border); transform:none}
.sc.locked .ic{background:var(--surface-2); color:var(--text-dim)}
.cats{display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats .chip{cursor:pointer; padding:8px 13px; font-size:.82rem}
.cats .chip[aria-pressed="true"]{background:var(--brand); color:#fff}

/* ---------- 대화 ---------- */
.chat{display:flex; flex-direction:column; gap:12px; padding:6px 0 12px}
.msg{max-width:88%; display:flex; flex-direction:column; gap:5px;
  animation:pop-in .3s var(--pop) both}
@keyframes pop-in{from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none}}
.msg.ai{align-self:flex-start}
.msg.me{align-self:flex-end; align-items:flex-end}
.bub{padding:12px 15px; border-radius:22px; font-size:.97rem; white-space:pre-wrap;
  word-break:break-word; line-height:1.5}
.msg.ai .bub{background:var(--surface); border:2px solid var(--border);
  border-bottom-left-radius:8px; box-shadow:0 2px 0 rgba(43,28,46,.04)}
.msg.me .bub{background:var(--brand); color:#fff; border-bottom-right-radius:8px;
  box-shadow:0 2px 0 var(--brand-strong)}
.msg .ko{font-size:.83rem; color:var(--text-dim); padding:0 6px}
.msg .tools{display:flex; gap:4px; padding:0 2px; flex-wrap:wrap}
.fb{border:2px solid var(--border); border-radius:18px; padding:11px 13px;
  background:var(--surface); font-size:.87rem; margin-top:2px}
.fb.ok{background:var(--mint-soft); border-color:transparent}
.fb .line{display:flex; gap:7px; align-items:flex-start; margin:4px 0}
.fb .tag{flex:0 0 auto; font-size:.68rem; font-weight:800; padding:3px 8px;
  border-radius:9px; background:var(--sunny-soft); color:var(--sunny-ink); margin-top:2px}
.fb del{color:var(--bad); text-decoration-thickness:1px}
.fb ins{color:var(--good); text-decoration:none; font-weight:700}
.typing{display:inline-flex; gap:5px; padding:4px 0}
.typing i{width:8px; height:8px; border-radius:50%; background:var(--pink);
  animation:bounce 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s; background:var(--brand)}
.typing i:nth-child(3){animation-delay:.3s; background:var(--sunny)}
@keyframes bounce{0%,60%,100%{transform:translateY(0); opacity:.5}
  30%{transform:translateY(-6px); opacity:1}}

/* 발음 단어별 색 (초록/주황/빨강) */
.wd{padding:1px 3px; border-radius:6px; font-weight:700}
.wd.ok{background:var(--mint-soft); color:var(--good)}
.wd.mid{background:var(--sunny-soft); color:var(--sunny-ink)}
.wd.no{background:var(--bad-soft); color:var(--bad)}

/* ---------- 마이크 바 ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--surface);
  border-top:2px solid var(--border); padding:11px 14px 16px;
  display:flex; align-items:center; gap:9px;
}
.dock .grow{flex:1; min-width:0}
.dock input{border-radius:18px}
.mic{
  width:62px; height:62px; border-radius:22px; border:0; cursor:pointer;
  background:var(--brand); color:#fff; font-size:1.4rem; display:grid;
  place-items:center; flex:0 0 auto; box-shadow:0 4px 0 var(--brand-strong);
  transition:transform .12s var(--pop);
}
.mic:active{transform:translateY(2px); box-shadow:0 2px 0 var(--brand-strong)}
.mic.rec{background:var(--pink); box-shadow:0 4px 0 #d93b7d; animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 4px 0 #d93b7d, 0 0 0 0 rgba(255,92,158,.5)}
  70%{box-shadow:0 4px 0 #d93b7d, 0 0 0 16px rgba(255,92,158,0)}
  100%{box-shadow:0 4px 0 #d93b7d, 0 0 0 0 rgba(255,92,158,0)}}

/* ---------- 하단 탭 ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:35; background:var(--surface);
  border-top:2px solid var(--border); display:grid; grid-template-columns:repeat(5,1fr);
  padding:7px 4px 10px;
}
.tabbar a{display:grid; place-items:center; gap:2px; color:var(--text-dim);
  font-size:.68rem; font-weight:800; padding:4px 0; min-height:48px; position:relative}
.tabbar a em{font-size:1.2rem; font-style:normal; transition:transform .2s var(--pop)}
.tabbar a.on{color:var(--brand)}
.tabbar a.on em{transform:translateY(-2px) scale(1.15)}
.tabbar a .badge{position:absolute; top:2px; left:58%; background:var(--pink);
  color:#fff; font-size:.6rem; font-weight:800; padding:1px 6px; border-radius:99px}

/* ---------- 마스코트 ---------- */
.mascot{display:block}
.mascot.bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-7px) rotate(2deg)}}

/* ---------- 기타 ---------- */
.stat{text-align:center; padding:12px 6px; background:var(--surface-2); border-radius:18px}
.stat b{display:block; font-size:1.45rem; letter-spacing:-.02em; font-family:var(--font-display)}
.stat span{font-size:.72rem; color:var(--text-dim); font-weight:700}
.center{text-align:center}
.hide{display:none !important}
.toast{
  position:fixed; left:50%; bottom:100px; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:12px 20px; border-radius:18px;
  font-size:.9rem; font-weight:700; z-index:100; box-shadow:var(--shadow-pop); max-width:90vw;
  animation:pop-in .25s var(--pop) both;
}
.sheet{position:fixed; inset:0; z-index:90; background:rgba(43,28,46,.45);
  display:grid; place-items:end center; padding:0}
.sheet > div{background:var(--surface); width:100%; max-width:var(--app-w);
  border-radius:30px 30px 0 0; padding:20px 18px 28px; max-height:88vh; overflow:auto;
  animation:slide-up .3s var(--pop) both}
@keyframes slide-up{from{transform:translateY(40px)} to{transform:none}}
.pop{position:fixed; inset:0; z-index:95; background:rgba(43,28,46,.55);
  display:grid; place-items:center; padding:18px}
.pop > div{background:var(--surface); border-radius:var(--radius-xl); padding:26px;
  max-width:420px; width:100%; text-align:center; box-shadow:var(--shadow-pop);
  animation:pop-in .3s var(--pop) both}
.confetti{font-size:2.8rem; line-height:1; animation:bob 1.6s ease-in-out infinite}
.spin{width:24px;height:24px;border:3px solid var(--surface-2);border-top-color:var(--brand);
  border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- 차트 (단일 계열 + 라벨로 식별) ---------- */
.chart{display:flex; align-items:flex-end; gap:3px; height:120px}
.chart .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:4px; min-width:0; height:100%}
.chart .col > i{display:block; width:100%; max-width:30px; background:var(--brand);
  border-radius:7px 7px 3px 3px; min-height:3px; transition:height .5s var(--pop)}
.chart .col.dim > i{background:var(--surface-2)}
.chart .col > span{font-size:.62rem; color:var(--text-dim); font-weight:700}
.chart .col > b{font-size:.68rem; color:var(--brand); font-weight:800}
.chart-wrap{position:relative; padding-top:6px}
.chart-grid{position:absolute; left:0; right:0; top:6px; bottom:22px; pointer-events:none}
.chart-grid > span{position:absolute; left:0; right:0; border-top:2px dashed var(--border)}
.spark{width:100%; height:64px; display:block; overflow:visible}
.spark path{fill:none; stroke:var(--brand); stroke-width:3; stroke-linecap:round}
.spark circle{fill:var(--pink); stroke:var(--surface); stroke-width:3}
.hbar{display:grid; gap:8px}
.hbar .row{display:grid; grid-template-columns:72px 1fr 34px; gap:8px; align-items:center;
  font-size:.84rem; font-weight:700}
.hbar .track{height:16px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.hbar .track > i{display:block; height:100%; background:var(--brand); border-radius:99px}
.hbar .n{text-align:right; color:var(--text-dim); font-variant-numeric:tabular-nums}
table.data{width:100%; border-collapse:collapse; font-size:.84rem}
table.data th,table.data td{padding:7px 8px; border-bottom:1px solid var(--border); text-align:right}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data th{color:var(--text-dim); font-weight:800}

/* ============================================================
   영상통화 화면 (대화 상대가 실제로 앞에 있는 느낌)
   ============================================================ */
.stage{
  position:relative; width:100%; max-width:var(--app-w); margin:0 auto;
  aspect-ratio:1/1; max-height:44vh; background:var(--surface-3);
  overflow:hidden; border-bottom:2px solid var(--border);
}
.stage-video{position:absolute; inset:0}
.stage-video svg,.stage-video video{width:100%; height:100%; object-fit:cover; display:block}
.stage-top{
  position:absolute; top:10px; left:12px; right:12px; display:flex;
  align-items:center; gap:6px; pointer-events:none;
}
.stage-name{
  background:rgba(43,28,46,.55); color:#fff; padding:5px 11px; border-radius:99px;
  font-size:.8rem; font-weight:800; backdrop-filter:blur(6px);
}
.stage-name small{display:block; font-weight:600; opacity:.85; font-size:.68rem}
.stage-timer{
  margin-left:auto; background:rgba(43,28,46,.55); color:#fff; padding:5px 10px;
  border-radius:99px; font-size:.76rem; font-weight:700; font-variant-numeric:tabular-nums;
  backdrop-filter:blur(6px); display:flex; align-items:center; gap:5px;
}
.stage-timer i{width:7px; height:7px; border-radius:50%; background:#ff5c5c; display:block;
  animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1} 50%{opacity:.25}}
.stage-status{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  background:rgba(43,28,46,.6); color:#fff; padding:6px 13px; border-radius:99px;
  font-size:.78rem; font-weight:700; backdrop-filter:blur(6px); white-space:nowrap;
  display:flex; align-items:center; gap:7px;
}
.stage-status .wave{display:inline-flex; gap:2px; align-items:flex-end; height:12px}
.stage-status .wave i{width:3px; background:#fff; border-radius:2px; height:4px;
  animation:wv .9s infinite ease-in-out}
.stage-status .wave i:nth-child(2){animation-delay:.15s}
.stage-status .wave i:nth-child(3){animation-delay:.3s}
.stage-status .wave i:nth-child(4){animation-delay:.45s}
@keyframes wv{0%,100%{height:4px} 50%{height:12px}}
.stage-cc{
  position:absolute; left:12px; right:12px; bottom:46px;
  background:rgba(43,28,46,.62); color:#fff; padding:8px 12px; border-radius:14px;
  font-size:.86rem; line-height:1.45; backdrop-filter:blur(6px);
  max-height:5.2em; overflow:hidden;
}
.stage-cc.hide{display:none}
.selfie{
  position:absolute; right:12px; bottom:46px; width:64px; height:84px;
  border-radius:14px; background:var(--surface-2); border:2px solid rgba(255,255,255,.5);
  overflow:hidden; display:grid; place-items:center; font-size:1.4rem;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.selfie.on{border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,92,158,.35)}
.selfie .lvl{position:absolute; left:0; right:0; bottom:0; background:var(--pink); opacity:.45;
  height:0%; transition:height .08s linear}

/* 미션 체크리스트 */
.mission{display:grid; gap:5px; font-size:.8rem}
.mission div{display:flex; gap:6px; align-items:flex-start; color:var(--text-dim)}
.mission div.done{color:var(--good); font-weight:700}
.mission .mark{flex:0 0 auto}
.itemchips{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.itemchip{
  display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:99px;
  background:var(--surface-2); font-size:.72rem; font-weight:700; color:var(--text-dim);
}
.itemchip.hit{background:var(--mint-soft); color:var(--good)}

/* AI 생성 고지 배지 (인공지능기본법 제31조 — 결과물 표시) */
.stage-ai{
  background:rgba(43,28,46,.55); color:#fff; padding:4px 9px; border-radius:99px;
  font-size:.66rem; font-weight:800; backdrop-filter:blur(6px); white-space:nowrap;
  letter-spacing:.01em;
}

/* 말하는 중 안내 줄 (마이크 바 바로 위) */
.micbar{
  position:fixed; left:0; right:0; bottom:88px; z-index:39;
  max-width:var(--app-w); margin:0 auto; padding:7px 16px;
  background:var(--pink-soft); color:#b3216b; font-size:.8rem; font-weight:800;
  display:flex; align-items:center; gap:8px; overflow:hidden;
  border-top:2px solid var(--border);
}
:root[data-theme="dark"] .micbar{color:var(--pink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .micbar{color:var(--pink)}}
.micbar > i{
  position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--pink); display:block;
}
.micbar > i.run{animation:micfill linear forwards}
@keyframes micfill{from{width:0} to{width:100%}}