/* 맛보기 설명 애니메이션 (D-73) — 실제 과제 화면을 단순화한 목업. 마크업·순서는 tutorial.js
   앱 공용 클래스와 겹치지 않게 전부 tt- 접두사. 색·글꼴은 tokens.css 변수만. */
.tt{position:relative;display:grid;gap:14px;color:var(--ink);font-family:var(--font-body)}
.tt-top{display:flex;align-items:center;gap:12px}
.tt-top h3{margin:0;font-size:var(--fs-h3,15px);font-weight:var(--fw-head,600)}
.tt-top .tt-sub{font-size:var(--fs-sm,12.5px);color:var(--mute)}
.tt-skip{margin-left:auto;font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:var(--surface);border:0;border-radius:var(--r-btn,6px);box-shadow:var(--shadow-card);padding:6px 12px;cursor:pointer}
.tt-skip:focus-visible,.tt-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 무대 — 960×540 고정 화면을 폭에 맞춰 줄인다 */
.tt-stage{position:relative;width:100%;aspect-ratio:960/540;max-width:100%}
.tt-screen{position:absolute;left:0;top:0;width:960px;height:540px;transform-origin:0 0;background:var(--paper);border-radius:12px;box-shadow:var(--shadow-pop);overflow:hidden;display:flex;flex-direction:column;font-size:13px}
.tt-head{height:42px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.tt-mark{font-weight:600;font-size:15px;position:relative;isolation:isolate}
.tt-mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:2px;height:6px;background:var(--hl);z-index:-1}
.tt-meta{font-size:12px;color:var(--mute)}
.tt-sp{flex:1}
.tt-timer{font-family:var(--font-num);font-size:17px;font-weight:600}
.tt-submit{font-size:12px;font-weight:600;background:var(--ink);color:var(--on-ink);border-radius:6px;padding:5px 11px;transition:transform .15s,box-shadow .15s}
.tt-submit.tt-press{transform:scale(.94);box-shadow:0 0 0 4px color-mix(in srgb,var(--hl) 80%,transparent)}
.tt-cols{flex:1;display:grid;grid-template-columns:280px 1fr 320px;gap:10px;padding:10px;min-height:0}
.tt-col{background:var(--surface);border-radius:10px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative;transition:opacity .35s,box-shadow .35s}
.tt-dim .tt-col{opacity:.38}
.tt-dim .tt-col.tt-act{opacity:1;box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.tt-ch{height:36px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);font-size:12px}
.tt-ch b{font-size:12.5px;font-weight:600}
.tt-ch .tt-m{color:var(--mute)}

/* ① 자료 — 통째 켜기/끄기 + 토큰 막대 */
.tt-gauge{padding:10px 12px 9px;border-bottom:1px solid var(--line)}
.tt-gauge .tt-r{display:flex;justify-content:space-between;font-size:11px;color:var(--mute)}
.tt-gauge .tt-r b{color:var(--ink);font-weight:600;font-family:var(--font-num)}
.tt-gbar{height:6px;border-radius:3px;background:var(--line);margin:7px 0 6px;overflow:hidden}
.tt-gbar i{display:block;height:100%;width:var(--g,0%);background:var(--ink);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.tt-docs{list-style:none;margin:0;padding:0}
.tt-docs li{display:grid;grid-template-columns:14px 30px minmax(0,1fr) auto;gap:8px;align-items:center;height:36px;padding:0 12px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--ink-2);transition:background .2s}
.tt-docs .tt-no,.tt-docs .tt-tk{font-family:var(--font-num);font-size:10.5px;color:var(--mute)}
.tt-docs .tt-nm{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tt-cb{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--line-strong);position:relative;transition:background .15s,border-color .15s}
.tt-docs li.tt-on .tt-cb{background:var(--ink);border-color:var(--ink)}
.tt-docs li.tt-on .tt-cb::after{content:"";position:absolute;left:3px;top:0;width:4px;height:7px;border:solid var(--on-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.tt-docs li.tt-on .tt-nm{color:var(--ink);font-weight:600}
.tt-docs li.tt-hover{background:var(--surface-2)}

/* ② 채팅 — 질문 → 표·목록 답 */
.tt-chat{flex:1;padding:12px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.tt-msg{font-size:12px;line-height:1.6;max-width:94%;animation:ttIn .3s cubic-bezier(.2,.7,.2,1) both}
.tt-msg .tt-who{font-size:10.5px;color:var(--mute);margin-bottom:2px}
.tt-msg.tt-me{align-self:flex-end;max-width:86%}
.tt-msg.tt-me .tt-b{background:var(--surface-2);padding:7px 10px;border-radius:12px 12px 4px 12px}
.tt-think{display:inline-flex;align-items:center;gap:8px;color:var(--mute)}
.tt-mini{position:relative;display:inline-grid;gap:3px;width:36px;padding:2px 0;overflow:hidden}
.tt-mini i{display:block;height:2px;background:var(--line);border-radius:1px}
.tt-mini i:nth-child(2){width:80%} .tt-mini i:nth-child(3){width:56%}
.tt-scan{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--ink);animation:ttSweep 1.1s cubic-bezier(.45,.05,.3,1) infinite}
.tt-scan::before{content:"";position:absolute;top:0;bottom:0;right:1px;width:22px;background:linear-gradient(90deg,transparent,var(--hl));opacity:.75}
.tt-tbl{border-collapse:collapse;margin:6px 0 4px;font-size:11.5px;width:100%}
.tt-tbl th,.tt-tbl td{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}
.tt-tbl th{color:var(--mute);font-weight:600;background:var(--surface-2)}
.tt-tbl td.tt-n{font-family:var(--font-num);text-align:right}
.tt-tbl tr.tt-low td{font-weight:600}
.tt-ul{margin:4px 0 0;padding-left:16px}
.tt-cite{font-family:var(--font-num);font-size:10px;padding:0 4px;border:1px solid var(--line-strong);border-radius:3px;white-space:nowrap;color:var(--ink-2)}
.tt-input{margin:0 12px 12px;height:42px;border-radius:10px;box-shadow:var(--shadow-card);padding:8px 10px;color:var(--faint);font-size:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tt-input.tt-typing{color:var(--ink)}
.tt-send{flex:none;font-size:11px;font-weight:600;background:var(--ink);color:var(--on-ink);border-radius:5px;padding:2px 8px;align-self:flex-end}

/* ③ 답안 */
.tt-sheet{flex:1;padding:14px 16px;font-size:12.5px;line-height:1.75;white-space:pre-wrap;overflow:hidden}
.tt-sheet .tt-ph{color:var(--faint)}
.tt-caret{display:inline-block;width:1.5px;height:1.1em;background:var(--ink);vertical-align:-2px;animation:ttBlink 1s steps(2) infinite}
.tt-sheet b{font-weight:600}

/* ④ 채점 → 점수 카드 */
.tt-over{position:absolute;inset:42px 0 0;background:color-mix(in srgb,var(--paper) 97%,transparent);display:flex;align-items:center;justify-content:center;animation:ttIn .3s both}
.tt-over[hidden]{display:none}
.tt-grade{width:420px;display:grid;gap:12px}
.tt-grade h4{margin:0;font-size:17px;font-weight:600}
.tt-doc{position:relative;display:grid;gap:8px;padding:14px 16px;background:var(--surface);border-radius:10px;box-shadow:var(--shadow-card);overflow:hidden}
.tt-doc i{display:block;height:4px;border-radius:2px;background:var(--line);position:relative}
.tt-doc i.tt-t{height:7px;width:44%}
.tt-doc i b{position:absolute;top:-3px;bottom:-3px;background:var(--hl);opacity:0;animation:ttMark 2s infinite}
.tt-doc .tt-hs{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);animation:ttDown 2s cubic-bezier(.45,.05,.3,1) infinite}
.tt-doc .tt-hs::before{content:"";position:absolute;left:0;right:0;bottom:1px;height:18px;background:linear-gradient(180deg,transparent,var(--hl));opacity:.55}
.tt-now{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600}
.tt-now span:last-child{font-weight:400;color:var(--mute);font-family:var(--font-num)}
.tt-score{width:440px;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-pop);padding:18px 20px;animation:ttUp .45s cubic-bezier(.2,.7,.2,1) both}
.tt-score .tt-ex{display:inline-block;font-size:11px;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-bottom:8px}
.tt-score .tt-tp{display:flex;align-items:flex-end;gap:12px}
.tt-big{font-family:var(--font-num);font-size:48px;font-weight:600;line-height:1;letter-spacing:-.02em}
.tt-big small{font-size:13px;color:var(--mute)}
.tt-line{font-size:12.5px;font-weight:600;line-height:1.45}
.tt-axes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.tt-ax{font-size:10.5px;color:var(--mute)}
.tt-ax b{display:block;font-family:var(--font-num);font-size:15px;color:var(--ink);font-weight:600}
.tt-ax.tt-key{color:var(--ink)}
.tt-abar{height:3px;background:var(--line);margin-top:4px;border-radius:2px;overflow:hidden}
.tt-abar i{display:block;height:100%;width:var(--w,0%);background:var(--faint);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.tt-ax.tt-key .tt-abar i{background:var(--ink)}

/* 아래 띠 — 장면 진행 4칸 + 한 줄 자막 + 끝난 뒤 버튼 */
.tt-foot{display:grid;gap:10px}
.tt-prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tt-prog i{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
.tt-prog i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--d,0ms) linear}
.tt-cap{margin:0;min-height:1.6em;font-size:15px;font-weight:600;letter-spacing:-.01em}
.tt-cap .tt-k{font-family:var(--font-num);font-weight:600;margin-right:6px}
.tt-cap .tt-s{font-weight:400;color:var(--mute)}
.tt-end{display:flex;gap:8px;flex-wrap:wrap}
.tt-end[hidden]{display:none}
.tt-btn{font:inherit;font-size:14px;font-weight:600;height:38px;padding:0 16px;border-radius:var(--r-btn,6px);border:0;cursor:pointer;background:var(--ink);color:var(--on-ink)}
.tt-btn.tt-line2{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}

/* 동작 줄이기 — 정지 4컷(장면마다 끝난 모습 + 자막) */
.tt-cuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tt-cut{display:grid;gap:6px;margin:0}
.tt-cut .tt-stage{border-radius:10px}
.tt-cut figcaption{font-size:13px;font-weight:600}
.tt-cut figcaption .tt-s{display:block;font-weight:400;color:var(--mute);font-size:12.5px}
@media (max-width:640px){.tt-cuts{grid-template-columns:minmax(0,1fr)}.tt-cap{font-size:14px}}

@keyframes ttSweep{0%{left:0;opacity:0}8%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes ttDown{0%{top:0;opacity:0}6%{opacity:1}80%{opacity:1}92%,100%{top:100%;opacity:0}}
@keyframes ttMark{0%{opacity:0}10%{opacity:.8}70%{opacity:.8}85%,100%{opacity:0}}
@keyframes ttBlink{50%{opacity:0}}
@keyframes ttIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ttUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .tt *{animation:none!important;transition:none!important}
  .tt-scan,.tt-doc .tt-hs{display:none}
}