/* Claude Code 교안 — 검정 미니멀 테마
   색은 단색만 씁니다(그라데이션·유리 효과 없음). 강조색 하나(라임), 파란 페이지는 PART와 실습 시작에만. */
:root{
  --bg:#0b0b0c; --panel:#121214; --line:#26262a; --ink:#f4f4f5; --sub:#a1a1aa; --dim:#71717a;
  --lime:#d9ff4b; --blue:#2d5bff; --red:#ff5a4e; --green:#4ade80; --yellow:#ffd166;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Pretendard,"Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block}
a{color:inherit}

/* ---------- 상단 바 ---------- */
.top{position:sticky;top:0;z-index:20;height:52px;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.icon{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 10px}
.brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;white-space:nowrap}
.brand img{width:26px;height:26px;border-radius:6px;object-fit:cover}
.brand .x{color:var(--dim);font-weight:400}
.brand .jj{font-weight:900;letter-spacing:-.02em}
.rail{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.rail button{flex:1;min-width:76px;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:4px 8px;text-align:left;font-size:11px;line-height:1.25;color:var(--dim);position:relative;overflow:hidden}
.rail button b{display:block;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:keep-all}
.rail button.on{border-color:var(--lime)}.rail button.on b{color:var(--ink)}
.rail .pr{position:absolute;left:0;bottom:0;height:2px;background:var(--lime)}
.tabs{display:flex;gap:4px}
.tabs button{border:0;background:transparent;padding:7px 11px;border-radius:8px;color:var(--sub);font-weight:600;font-size:13px;white-space:nowrap}
.tabs button.on{background:var(--panel);color:var(--ink)}
.view{display:none}.view.on{display:block}

/* ---------- 강의 화면: flex라서 패널을 접어도 슬라이드는 항상 남습니다 ---------- */
.lec{display:flex;height:calc(100vh - 52px);min-height:0}
.toc{flex:0 0 260px;overflow:auto;border-right:1px solid var(--line);background:var(--bg);padding:8px 8px 40px}
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.notes{flex:0 0 340px;overflow:auto;border-left:1px solid var(--line);background:var(--panel);padding:16px 18px 40px;font-size:15px;line-height:1.75}
.lec.notoc .toc{display:none}
.lec.nonotes .notes{display:none}
.stagewrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden}
.stage{flex:none;position:relative;overflow:hidden;border-radius:12px;background:#000;color:#f4f4f5;container-type:inline-size;border:1px solid #1c1c1f}
.ctrl{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--line);background:var(--bg);flex-wrap:wrap}
.ctrl button{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 12px;font-weight:600;font-size:13px}
.ctrl .pri{background:var(--ink);color:#000;border-color:var(--ink)}
.ctrl .info{font-size:12px;color:var(--dim)}
.ctrl .sp{flex:1}
@media (max-width:1100px){
  .toc{position:fixed;top:52px;left:0;bottom:0;width:min(300px,86vw);z-index:40;display:none;box-shadow:8px 0 30px rgba(0,0,0,.5)}
  .lec.showtoc .toc{display:block}
  .notes{flex-basis:300px}
}
@media (max-width:900px){
  .brand .tx,.rail{display:none}
  .notes{position:fixed;right:0;top:52px;bottom:0;width:min(360px,90vw);z-index:40;display:none}
  .lec.shownotes .notes{display:block}
}

/* 목차 사이드바 */
.toc .ch{display:flex;gap:8px;align-items:center;margin:14px 6px 4px;font-size:12px;font-weight:800;color:var(--ink);word-break:keep-all}
.toc .ch i{font-style:normal;flex:none;width:22px;height:22px;border-radius:6px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;font-size:11px}
.toc .ch small{margin-left:auto;font-weight:500;color:var(--dim)}
.toc button{display:flex;gap:7px;align-items:flex-start;width:100%;text-align:left;border:0;background:transparent;padding:5px 8px;border-radius:7px;font-size:12.5px;line-height:1.35;color:var(--sub);word-break:keep-all}
.toc button:hover{background:var(--panel)}
.toc button.on{background:var(--panel);color:var(--ink);outline:1px solid var(--lime)}
.toc .pgno{flex:none;width:22px;font-size:10px;color:var(--dim);text-align:right;margin-top:2px}
.tg{flex:none;font-size:10px;font-weight:700;padding:2px 5px;border-radius:4px;background:var(--panel);color:var(--sub);border:1px solid var(--line)}
.tg.part,.tg.labin{background:var(--blue);border-color:var(--blue);color:#fff}
.tg.lab{color:var(--lime);border-color:#3a4a14}.tg.mg{color:#9cdceb;border-color:#1f3e48}.tg.sum{color:var(--green);border-color:#1e3a29}

/* 대본 */
.notes h4{margin:0 0 6px;font-size:12px;color:var(--dim)}
.notes .say p{margin:0 0 10px;word-break:keep-all}
.notes .meta{margin-top:10px;font-size:12px;color:var(--dim)}
.notes .flag{border-radius:6px;padding:7px 10px;margin-top:8px;font-size:12.5px;line-height:1.6}
.notes .flag.add{background:#2a2410;color:#ffe08a}
.notes .flag.chk{background:#2a1414;color:#ffb4ae}

/* 검색 */
.qbox{position:relative}
.qbox input{width:220px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px}
.qres{display:none;position:absolute;bottom:38px;right:0;width:380px;max-height:50vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);padding:6px;z-index:30}
.qres.on{display:block}
.qres button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:6px;font-size:13px;word-break:keep-all}
.qres button:hover{background:#1c1c20}
.qres .pgno{width:24px;color:var(--dim);font-size:11px;text-align:right}
.qres .none{padding:8px;color:var(--dim);font-size:13px}

/* 발표 모드 */
body.present .top,body.present .toc,body.present .notes,body.present .ctrl{display:none !important}
body.present .lec{height:100vh}
body.present .stagewrap{padding:0;background:#000}
body.present .stage{border-radius:0;border:0}
.presbar{display:none}
body.present .presbar{display:flex;position:fixed;right:14px;bottom:14px;gap:6px;align-items:center;background:rgba(20,20,22,.8);color:#fff;border-radius:99px;padding:5px 8px;font-size:12px;opacity:.15;transition:opacity .2s;z-index:50}
body.present .presbar:hover{opacity:1}
.presbar button{border:0;background:#2a2a2e;color:#fff;border-radius:99px;padding:5px 10px}

/* =================== 슬라이드 =================== */
.sl{position:absolute;inset:0;display:flex;flex-direction:column;padding:3.4cqw 4.6cqw 3.2cqw;font-size:1.7cqw;line-height:1.5;background:#000;color:#f4f4f5;word-break:keep-all;overflow-wrap:break-word}
.sl h1{font-size:3.4cqw;line-height:1.2;margin:1.1cqw 0 0;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.sl h1 em,.sl .quote em{font-style:normal;color:var(--lime)}
.sl .hd{display:flex;align-items:center;gap:1cqw;font-size:1.15cqw;font-weight:700;color:#8b8b93}
.sl .hd .cp{color:#f4f4f5}
.sl .hd .kind{color:#000;background:var(--lime);border-radius:99px;padding:.2cqw .9cqw;font-size:1.05cqw}
.sl .hd .kk{color:#c9c9cf}
.sl .hd .tm{margin-left:auto}
.sl .bd{flex:1;min-height:0;margin-top:2cqw;display:flex;gap:2.4cqw}
.sl .ft{position:absolute;left:4.6cqw;right:4.6cqw;bottom:1.4cqw;display:flex;align-items:center;gap:.8cqw;font-size:1cqw;color:#5b5b63}
.sl .ft img{width:1.6cqw;height:1.6cqw;border-radius:.3cqw}
.sl .ft span:last-child{margin-left:auto}
.badge{display:inline-flex;align-items:center;gap:.4cqw;border:1px solid #3a4a14;color:var(--lime);border-radius:99px;padding:.2cqw .9cqw;font-weight:800;font-size:1.05cqw}

.col{display:flex;flex-direction:column;gap:1.1cqw;min-width:0;flex:1}
.pic{border-radius:1.2cqw;overflow:hidden;background:#0d0d0f;flex:1.15;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
.pic img{width:100%;height:100%;object-fit:contain}
.pic .cap{position:absolute;left:1cqw;bottom:1cqw;background:rgba(0,0,0,.75);color:#fff;font-size:1.15cqw;padding:.35cqw .9cqw;border-radius:99px}
.card{background:#121214;border:1px solid #232327;border-radius:1.1cqw;padding:1.3cqw 1.5cqw;font-size:1.5cqw;line-height:1.45;color:#d4d4d8}
.card h3{margin:0 0 .4cqw;font-size:1.9cqw;color:#f4f4f5;letter-spacing:-.01em}
.card h3 img{width:1.9cqw;height:1.9cqw;display:inline-block;vertical-align:-.3cqw;margin-right:.5cqw;filter:invert(1)}
.card.c{border-color:#55661a}.card.c h3{color:var(--lime)}
.card small{color:#a1a1aa}
.cards{display:grid;gap:1.1cqw;width:100%}
.num{display:inline-grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--lime);color:#000;font-weight:900;font-size:1.3cqw;margin-right:.8cqw;flex:none}
.steps{display:flex;flex-direction:column;gap:.8cqw}
.steps .it{display:flex;align-items:center;background:#121214;border:1px solid #232327;border-radius:1cqw;padding:1cqw 1.3cqw;font-size:1.65cqw}
.steps .it small{display:block;color:#a1a1aa;font-size:1.25cqw}
.prompt{position:relative;font-family:ui-monospace,Consolas,"D2Coding",monospace;background:#0f1a05;border:1px solid #2f3d10;color:#ecfccb;border-radius:1cqw;padding:1.4cqw 1.7cqw;font-size:1.45cqw;line-height:1.65;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.prompt .lb{display:block;color:var(--lime);font-family:Pretendard,sans-serif;font-size:1.05cqw;font-weight:800;margin-bottom:.5cqw}
.cp-btn{position:absolute;top:.8cqw;right:.8cqw;border:0;border-radius:.5cqw;background:var(--lime);color:#000;font-weight:800;font-size:1cqw;padding:.3cqw .9cqw}
.check{border:1px solid #1e3a29;background:#0c1a12;border-radius:1cqw;padding:1cqw 1.4cqw;font-size:1.45cqw;color:#bbf7d0}
.check b{display:block;margin-bottom:.2cqw;color:var(--green)}
.warn{border:1px solid #4a2a12;background:#1a0f06;border-radius:1cqw;padding:1cqw 1.4cqw;font-size:1.45cqw;color:#fed7aa}
.warn b{color:#fdba74}
.logos{display:flex;gap:1.1cqw;flex-wrap:wrap;align-items:center}
.logo{display:flex;align-items:center;gap:.6cqw;background:#121214;border:1px solid #232327;border-radius:.9cqw;padding:.7cqw 1.1cqw;font-size:1.35cqw;font-weight:700}
.logo img{width:2cqw;height:2cqw;filter:invert(1)}
.flow{display:flex;align-items:stretch;gap:.8cqw;width:100%}
.flow .nd{flex:1;background:#121214;border:1px solid #232327;border-radius:1cqw;padding:1.4cqw;text-align:center;font-weight:800;font-size:1.7cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4cqw}
.flow .nd small{font-weight:500;color:#a1a1aa;font-size:1.3cqw;line-height:1.35}
.flow .nd img{width:2.8cqw;height:2.8cqw;filter:invert(1)}
.flow .nd.c{border-color:var(--lime);color:var(--lime)}
.flow .ar{align-self:center;color:var(--lime);font-weight:900;font-size:2cqw}
.quote{font-size:2.6cqw;font-weight:800;line-height:1.45;letter-spacing:-.02em;text-wrap:balance}
.note{font-size:1.4cqw;color:#a1a1aa;font-weight:600}
.tbl{width:100%;border-collapse:collapse;font-size:1.55cqw}
.tbl th,.tbl td{padding:1cqw 1.2cqw;border-bottom:1px solid #26262a;text-align:left;vertical-align:middle}
.tbl th{font-size:1.15cqw;color:#8b8b93}
.tbl td img{width:1.9cqw;height:1.9cqw;display:inline-block;vertical-align:middle;margin-right:.5cqw;filter:invert(1)}
.tbl b{color:var(--lime)}
.st{transition:opacity .4s, transform .4s}.st.off{opacity:0;transform:translateY(1cqw)}

/* 표지 */
.sl.title{justify-content:center;padding:5cqw 6cqw}
.title .brandrow{display:flex;align-items:center;gap:1.4cqw;margin-bottom:3cqw}
.title .brandrow img{width:5cqw;height:5cqw;border-radius:1cqw;object-fit:cover}
.title .brandrow .x{color:#5b5b63;font-size:2cqw}
.title .brandrow .jj{font-size:2.6cqw;font-weight:900;letter-spacing:-.03em}
.title h1{font-size:6cqw;margin:0;letter-spacing:-.04em}
.title .sub{font-size:2.2cqw;color:#a1a1aa;margin-top:1cqw}
.title .meta2{margin-top:3cqw;font-size:1.5cqw;color:#71717a}
.title .logos{margin-top:2.2cqw}

/* 목차 */
.tocpg{padding:3.4cqw 6cqw 2.6cqw}
.tocpg .tk{font-size:1.2cqw;font-weight:800;letter-spacing:.2em;color:var(--lime)}
.tocpg h1{font-size:3.2cqw;margin:.3cqw 0 1.4cqw}
.tocpg .tl{display:flex;flex-direction:column;border-top:1px solid #3a3a40}
.tocpg .tr{display:grid;grid-template-columns:5cqw 1fr 13cqw 4cqw;align-items:center;padding:.62cqw .4cqw;border-bottom:1px solid #1f1f23}
.tocpg .n{font-size:1.9cqw;font-weight:900;color:var(--lime)}
.tocpg .t b{display:block;font-size:1.6cqw}
.tocpg .t small{font-size:1.1cqw;color:#8b8b93}
.tocpg .tm{font-size:1.2cqw;color:#8b8b93;font-weight:600}
.tocpg .pg{font-size:1.3cqw;font-weight:800;text-align:right}

/* PART 시작, 실습 시작: 단색 파랑 */
.sl.blue{background:var(--blue);color:#fff;padding:4.6cqw 6cqw}
.sl.blue .pn{font-size:1.8cqw;font-weight:900;letter-spacing:.16em;color:#dbe4ff}
.sl.blue .pt{font-size:5.2cqw;font-weight:900;letter-spacing:-.035em;line-height:1.15;margin-top:.6cqw;text-wrap:balance}
.sl.blue .ptm{display:inline-block;margin-top:1.2cqw;border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:.35cqw 1.2cqw;font-size:1.4cqw;font-weight:700;align-self:flex-start}
.sl.blue .pcols{display:grid;grid-template-columns:1.3fr 1fr;gap:3cqw;margin-top:auto}
.sl.blue .pcols b{display:block;font-size:1.2cqw;letter-spacing:.06em;color:#dbe4ff;margin-bottom:.8cqw}
.sl.blue ol{margin:0;padding-left:2cqw;font-size:1.75cqw;line-height:1.75}
.sl.blue p{margin:0;font-size:2.1cqw;font-weight:800;line-height:1.45}
.road{display:flex;gap:.6cqw;margin-top:2.4cqw}
.road i{font-style:normal;width:2.2cqw;height:2.2cqw;border-radius:50%;display:grid;place-items:center;font-size:1cqw;font-weight:800;background:rgba(255,255,255,.18);color:#dbe4ff}
.road .done i{background:#fff;color:var(--blue);opacity:.6}
.road .now i{background:#fff;color:var(--blue);width:2.8cqw;height:2.8cqw}
.sl.labin .go{margin-top:2cqw;align-self:flex-start;background:#fff;color:var(--blue);font-weight:900;border-radius:99px;padding:.7cqw 1.8cqw;font-size:1.5cqw}

/* 이론: 왼쪽 글, 오른쪽 설명 그림 */
.sl.theory .tw{flex:1;min-height:0;display:flex;gap:2.6cqw;margin-top:1.6cqw}
.sl.theory .tl2{flex:1;display:flex;flex-direction:column;gap:1.4cqw;min-width:0}
.sl.theory .th-term{font-size:4.4cqw;font-weight:900;letter-spacing:-.035em;line-height:1.05}
.sl.theory .th-term small{display:block;font-size:1.5cqw;font-weight:600;color:#8b8b93;margin-top:.5cqw;letter-spacing:0}
.sl.theory .th-def{font-size:2.3cqw;line-height:1.5;font-weight:600;color:#e4e4e7;text-wrap:pretty}
.sl.theory .th-def b{color:var(--lime)}
.sl.theory .tl2 .extra{margin-top:auto;display:flex;flex-direction:column;gap:1cqw}
.sl.theory .tr2{flex:1.25;min-width:0;display:flex}
.sl.theory.noimg .th-def{font-size:2.6cqw;max-width:92%}

/* 비유: 그림 전체가 보이게(자르지 않음) + 한 문장 */
.sl.ana{padding:0;display:grid;grid-template-rows:1fr auto}
.sl.ana .anaimg{min-height:0;display:flex;align-items:center;justify-content:center;background:#000}
.sl.ana .anaimg img{width:100%;height:100%;object-fit:contain}
.sl.ana .ana-cap{padding:1.6cqw 4.6cqw 2.2cqw;border-top:1px solid #1f1f23}
.sl.ana .kind{display:inline-block;background:var(--lime);color:#000;font-weight:900;font-size:1.1cqw;border-radius:99px;padding:.2cqw 1cqw}
.sl.ana .ana-t{font-size:2.4cqw;font-weight:800;line-height:1.4;margin-top:.6cqw;text-wrap:balance}
.sl.ana .ana-s{font-size:1.6cqw;color:#a1a1aa;margin-top:.3cqw}

/* 개념 모션 (llm-motion-graphic 엔진) */
.sl.mg{padding:0}
.sl.mg iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.sl.mg .mgtag{position:absolute;right:2cqw;top:1.6cqw;z-index:2;background:var(--lime);color:#000;font-weight:900;font-size:1.05cqw;border-radius:99px;padding:.2cqw .9cqw}

/* 정리 */
.sumlist{display:flex;flex-direction:column;gap:1cqw;width:100%}
.sumlist .si{display:flex;align-items:center;gap:1.2cqw;font-size:2cqw;font-weight:700;border-bottom:1px solid #1f1f23;padding:.9cqw .4cqw}
.sumlist .si i{font-style:normal;flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--lime);color:#000;display:grid;place-items:center;font-size:1.3cqw}

/* 실습 단계 */
.sl.lab .band{display:flex;align-items:center;gap:1cqw;font-size:1.15cqw;font-weight:700;color:#8b8b93}
.sl.lab .band .lt{background:var(--lime);color:#000;border-radius:.6cqw;padding:.4cqw 1.1cqw;font-size:1.35cqw;font-weight:900}
.sl.lab .band .kk{color:#e4e4e7}
.sl.lab .band .tm{margin-left:auto}
.pts{display:flex;flex-wrap:wrap;align-items:center;gap:.8cqw;margin-top:1.2cqw;padding:.7cqw 1.1cqw;border:1px dashed #3a3a40;border-radius:.8cqw;font-size:1.2cqw;color:#c9c9cf}
.pts b{color:#f4f4f5;margin-right:.3cqw}
.pts span{display:inline-flex;align-items:center;gap:.4cqw}
.pts i{font-style:normal;width:1.7cqw;height:1.7cqw;border-radius:50%;background:#2a2a2e;color:var(--lime);display:grid;place-items:center;font-size:.9cqw;font-weight:800}

/* 휴식 */
.sl.brk{align-items:center;justify-content:center;text-align:center}
.brk .t{font-size:3.6cqw;font-weight:900}
.brk .d{font-size:1.8cqw;color:#a1a1aa;margin-top:1cqw;line-height:1.6}
.brk .nx{margin-top:2cqw;font-size:1.5cqw;border:1px solid #3a3a40;border-radius:99px;padding:.5cqw 1.6cqw}

/* 실제 서비스 카드 */
.live{display:flex;flex-direction:column;gap:.5cqw;background:#121214;border:1px solid #232327;border-radius:1.2cqw;padding:1cqw;text-decoration:none;min-height:0}
.live:hover{border-color:var(--lime)}
.live .pic{border-radius:.8cqw;min-height:12cqw}
.live .pic img{object-fit:cover}
.live b{font-size:1.65cqw;color:#f4f4f5}
.live small{font-size:1.2cqw;color:#a1a1aa}
.live .go{font-size:1.1cqw;color:var(--lime);font-weight:800}

/* ---------- 매뉴얼, 원문 대조 ---------- */
.man,.src{max-width:960px;margin:0 auto;padding:34px 24px 120px;word-break:keep-all}
.man h2,.src h2{font-size:28px;margin:0 0 6px}
.man .desc{color:var(--sub);margin-bottom:20px;line-height:1.6}
.mgroup{margin-top:22px}.mgroup h3{font-size:13px;color:var(--sub);margin:0 0 6px}
.mrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:var(--panel);border:1px solid var(--line);margin-bottom:6px;cursor:pointer}
.mrow:hover{border-color:var(--lime)}.mrow .t{font-weight:600;flex:1}.mrow .m{font-size:12px;color:var(--dim)}
.peek{position:fixed;top:0;right:0;bottom:0;width:min(680px,100%);background:var(--panel);border-left:1px solid var(--line);transform:translateX(102%);transition:transform .25s;z-index:60;display:flex;flex-direction:column}
.peek.on{transform:none}
.peek .ph2{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--sub)}
.peek .ph2 button{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:6px 10px}
.peek .pc{overflow:auto;padding:24px 30px 80px;line-height:1.75;font-size:15px}
.peek .pc h1{font-size:24px;margin:0 0 4px}
.peek .pc img{max-width:100%;border-radius:10px;margin:8px 0}
.mini{background:#000;border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:10px}
.mini .bd{display:flex;flex-direction:column;gap:12px}
.mini .col{display:flex;flex-direction:column;gap:10px}
.mini *{font-size:14px !important;line-height:1.55 !important}
.mini .num{width:22px;height:22px;font-size:12px !important}
.mini .steps .it,.mini .card,.mini .prompt,.mini .check,.mini .warn{padding:10px 12px;border-radius:8px}
.mini .pic{max-height:220px;flex:none !important}
.mini .cards{grid-template-columns:1fr 1fr !important;gap:8px}
.mini .cp-btn{font-size:12px !important;padding:3px 8px;top:8px;right:8px}
.mini img{width:auto}.mini .logo img,.mini .card h3 img,.mini .tbl td img{width:16px;height:16px;display:inline-block}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:55}
.scrim.on{opacity:1;pointer-events:auto}
.src table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:10px;overflow:hidden;font-size:13.5px}
.src th,.src td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.55}
.src th{color:var(--dim);font-size:12px}
.ok{color:var(--green);font-weight:700}.q{color:var(--yellow);font-weight:700}.x{color:var(--red);font-weight:700}
body.allmode{background:#222}
.allwrap{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px}
.allwrap .stage{width:1280px;height:720px}
.sl.mg iframe{pointer-events:none}
.tocpg .tr{padding:.5cqw .4cqw}.tocpg .t small{font-size:1cqw}.tocpg h1{margin:.2cqw 0 1cqw}
.sl.theory:not(.noimg) .th-term{font-size:3.8cqw}
.sl.theory:not(.noimg) .th-def{font-size:2cqw}
.sl.theory .extra .prompt{font-size:1.2cqw;padding:1cqw 1.2cqw}
.sl.theory .extra .tbl{font-size:1.25cqw}.sl.theory .extra .tbl td,.sl.theory .extra .tbl th{padding:.55cqw .8cqw}
.sl.theory .extra .note{font-size:1.2cqw}
.sl.lab .live .pic{min-height:8cqw}
.tocpg{padding:2.8cqw 6cqw 2cqw}.tocpg .tr{padding:.42cqw .4cqw}.tocpg .n{font-size:1.7cqw}.tocpg .t b{font-size:1.5cqw}
.sl.lab .live{gap:.3cqw;padding:.7cqw}.sl.lab .live .pic{min-height:6cqw;max-height:12cqw}
.sl.blue p,.sl.blue ol li{text-wrap:balance}

/* 서비스 기획서 토글 (plan.js) */
.planbox{display:flex;flex-direction:column;gap:.6cqw;overflow:auto;min-height:0;flex:1}
.planbox .pl{border:1px solid var(--line);border-radius:.8cqw;background:var(--panel)}
.planbox .pl[open]{border-color:var(--lime)}
.planbox summary{display:flex;align-items:center;gap:1cqw;padding:.7cqw 1.2cqw;cursor:pointer;font-weight:800;font-size:1.35cqw;list-style:none}
.planbox summary::-webkit-details-marker{display:none}
.planbox summary::before{content:'▸';color:var(--lime);transition:transform .15s}
.planbox .pl[open] summary::before{transform:rotate(90deg)}
.planbox .pst{margin-left:auto;color:var(--sub);font-weight:600;font-size:1.05cqw}
.planbox .pf{display:flex;flex-direction:column;gap:.45cqw;padding:0 1.2cqw 1cqw}
.planbox .row{display:grid;grid-template-columns:13cqw 1fr;gap:1cqw;align-items:start}
.planbox .row span{font-size:1.1cqw;font-weight:700;color:var(--sub);padding-top:.45cqw}
.planbox input,.planbox textarea{width:100%;font:inherit;font-size:1.15cqw;color:var(--ink);background:#0b0b0c;border:1px solid var(--line);border-radius:.5cqw;padding:.4cqw .7cqw;resize:none}
.planbox input:focus,.planbox textarea:focus{outline:none;border-color:var(--lime)}
.planbox .pact{display:flex;align-items:center;gap:1cqw;justify-content:flex-end}
.planbox .saved{color:var(--green);font-size:1cqw}
.planbox .pcopy{border:0;border-radius:99px;background:var(--lime);color:#000;font-weight:800;font-size:1.1cqw;padding:.45cqw 1.3cqw}
.peek .planbox{font-size:14px}
.peek .planbox summary{font-size:16px;padding:10px 14px}.peek .planbox .pst,.peek .planbox .saved{font-size:12px}
.peek .planbox .row{grid-template-columns:130px 1fr}.peek .planbox .row span{font-size:13px;padding-top:6px}
.peek .planbox input,.peek .planbox textarea{font-size:14px;padding:6px 9px}.peek .planbox .pcopy{font-size:13px;padding:7px 14px}
.peek .planbox .pf{padding:0 14px 12px;gap:6px}
.sl .planbox{gap:.4cqw}
.sl .planbox summary{padding:.45cqw 1.1cqw;font-size:1.25cqw}
.sl .planbox .pf{gap:.3cqw;padding:0 1.1cqw .7cqw}
.sl .planbox input,.sl .planbox textarea{padding:.25cqw .6cqw;font-size:1.1cqw;line-height:1.35}
.sl .planbox .row span{padding-top:.3cqw}
.sl .planbox .pcopy{padding:.35cqw 1.2cqw}

/* 기획서 모아 보기 (plan.js .planall) */
.planall{display:flex;flex-direction:column;gap:.6cqw;flex:1;min-height:0}
.planall .pa-state{font-size:1cqw;color:var(--sub)}
.planall .pa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8cqw;flex:1;min-height:0}
.planall .pa{border:1px solid var(--line);border-radius:.8cqw;background:var(--panel);padding:.8cqw 1cqw;display:flex;flex-direction:column;gap:.45cqw;overflow:hidden}
.planall .pa.empty{opacity:.55}
.planall .pa-h{display:flex;align-items:baseline;gap:.6cqw;border-bottom:1px solid var(--line);padding-bottom:.4cqw}
.planall .pa-h b{font-size:1.4cqw}.planall .pa-h span{margin-left:auto;color:var(--lime);font-weight:800;font-size:1cqw}
.planall .pa-r span{display:block;font-size:.9cqw;color:var(--sub);font-weight:700}
.planall .pa-r p{margin:.1cqw 0 0;font-size:1.05cqw;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.planall .pa-r i{color:var(--dim);font-style:normal}
.peek .planall .pa-grid{grid-template-columns:1fr 1fr}
.peek .planall .pa-h b{font-size:16px}.peek .planall .pa-h span,.peek .planall .pa-state{font-size:12px}
.peek .planall .pa-r span{font-size:12px}.peek .planall .pa-r p{font-size:14px}.peek .planall .pa{padding:10px 12px;gap:6px}

/* 목업: 받은편지함, 드라이브 */
.mock-mail{border:1px solid var(--line);border-radius:.8cqw;background:#fff;color:#1f1f1f;overflow:hidden;font-size:1.05cqw}
.mock-mail .mm-top{display:flex;align-items:center;gap:.6cqw;padding:.6cqw .9cqw;border-bottom:1px solid #e5e5e5}
.mock-mail .mm-top img{width:1.6cqw;height:1.6cqw}.mock-mail .mm-top span{margin-left:auto;color:#666;font-size:.9cqw}
.mock-mail .mm-row{display:grid;grid-template-columns:.6cqw 7cqw 1fr auto;gap:.6cqw;align-items:center;padding:.45cqw .9cqw;border-bottom:1px solid #f0f0f0;color:#555}
.mock-mail .mm-row i{width:.5cqw;height:.5cqw;border-radius:50%}
.mock-mail .mm-row.new{color:#111;font-weight:700}.mock-mail .mm-row.new i{background:#1a73e8}
.mock-mail .mm-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-mail .mm-row small{color:#888;font-size:.85cqw}
.mock-mail .mm-body{padding:.6cqw .9cqw;background:#f7f8fa;line-height:1.45}.mock-mail .mm-body b{display:block;color:#888;font-size:.85cqw}
.mock-drive{display:flex;flex-direction:column;gap:.6cqw}
.mock-drive .md-files{display:flex;flex-wrap:wrap;gap:.5cqw}
.mock-drive .md-files span{display:inline-flex;align-items:center;gap:.4cqw;border:1px solid var(--line);background:var(--panel);border-radius:.5cqw;padding:.35cqw .7cqw;font-size:1cqw}
.mock-drive .md-files img{width:1.3cqw;height:1.3cqw}
.mock-drive .md-ar{color:var(--lime);font-weight:800;font-size:1.1cqw}

/* 가로로 긴 설명 그림(1986 잘라 낸 것)은 그림 칸을 넓게 */
.sl.theory.wide .tw{gap:2cqw}
.sl.theory.wide .tl2{flex:.95}
.sl.theory.wide .tr2{flex:2.05}
.sl.theory.wide .th-term{font-size:3.4cqw}
.sl.theory.wide .th-def{font-size:1.75cqw}
.sl.theory.wide .pic{background:transparent}
.sl.theory.wide .extra .quote,.sl.theory.wide .extra{font-size:1.2cqw}

/* LLM 다음 말 맞히기 */
.llm-box{display:flex;flex-direction:column;gap:1.2cqw;border:1px solid var(--line);border-radius:1cqw;background:var(--panel);padding:1.6cqw}
.llm-in{font-size:2cqw;font-weight:800}
.llm-in::after{content:'▍';color:var(--lime);margin-left:.3cqw}
.llm-bars{display:flex;flex-direction:column;gap:.6cqw}
.llm-bars div{display:grid;grid-template-columns:8cqw 1fr 4cqw;align-items:center;gap:.8cqw;font-size:1.4cqw}
.llm-bars i{height:1.4cqw;border-radius:99px;background:var(--lime)}
.llm-bars div+div i{background:#5b5b63}
.llm-bars b{color:var(--sub);text-align:right}
.llm-out{font-size:1.6cqw;line-height:1.5;color:#e4e4e7}.llm-out em{font-style:normal;color:var(--lime)}

/* ===== 2026-10-31 피드백 3 ===== */
.tbl th img{width:1.4cqw;height:1.4cqw;display:inline-block;vertical-align:-.25cqw;margin-right:.4cqw;filter:invert(1)}
.flow>.st{flex:1;display:flex;align-items:stretch;gap:.8cqw;min-width:0}
.flow>.st .nd{flex:1}
.sl.theory.lift .tl2 .extra{margin-top:.4cqw}

/* Git: 한글 파일 최종 시리즈 */
.hwp{display:flex;flex-direction:column;gap:.5cqw}
.hwp-files{display:flex;flex-wrap:wrap;gap:.4cqw}
.hwp-files span{font-size:1.05cqw;border:1px solid var(--line);background:var(--panel);border-radius:.4cqw;padding:.25cqw .6cqw;color:#c9c9cf}
.hwp-files span:last-child{border-color:var(--red);color:#ffb3ad}
.hwp-ar{font-size:1.15cqw;font-weight:800;color:var(--lime)}
.hwp-log{display:flex;gap:.3cqw;align-items:center}
.hwp-log span{font-size:1.05cqw;background:#1b2a07;border:1px solid #3a4a14;border-radius:99px;padding:.2cqw .7cqw}

/* 예전 개발자 화면 (터미널) */
.term{background:#0c0c0c;border:1px solid #2a2a2e;border-radius:.8cqw;overflow:hidden;font-family:Consolas,"Cascadia Mono",monospace;font-size:1.1cqw;line-height:1.5;display:flex;flex-direction:column}
.term .tbar{display:flex;align-items:center;gap:.4cqw;padding:.45cqw .8cqw;background:#1c1c1f;color:#8b8b93;font-family:Pretendard,sans-serif;font-size:.95cqw}
.term .tbar i{width:.7cqw;height:.7cqw;border-radius:50%;background:#3a3a3f}.term .tbar span{margin-left:.6cqw}
.term .st{padding:.2cqw .9cqw}
.term .ty{color:#e8e8e8;white-space:nowrap;overflow:hidden}
.term .ty b{color:var(--lime);font-weight:700;margin-right:.5cqw}
.term .st:not(.off) .ty{animation:ty 1.1s steps(28) both}
.term .st:not(.off) .ty+.ty{animation-delay:1.1s}
.term .out{color:#9a9aa3;white-space:pre-wrap;word-break:break-all;animation:fadein .3s 1.2s both}
.term .st:not(.off) .ty+.ty~.out{animation-delay:2.3s}
.term .out.err{color:#ff7b72}.term .out.ok{color:#7ee787}
@keyframes ty{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* 매장으로 보는 웹 */
.shop{display:grid;grid-template-columns:1.5fr .35fr 1fr;gap:.6cqw;height:100%;min-height:0}
.sh-hall{position:relative;border:2px dashed #3a3a40;border-radius:1cqw;min-height:0}
.sh-hall>.st{position:absolute;inset:0}
.sh-frame{position:absolute;inset:.8cqw .8cqw 2.6cqw;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:.8cqw;padding:2.4cqw .8cqw .8cqw}
.sh-shelf{border:2px solid #5b5b63;border-radius:.4cqw}
.sh-counter{grid-column:1/4;border:2px solid #5b5b63;border-radius:.4cqw}
.sh-paint{position:absolute;inset:0;border-radius:1cqw;background:linear-gradient(transparent 0 0),rgba(217,255,75,.08);box-shadow:inset 0 0 0 3px rgba(217,255,75,.45)}
.sh-door{position:absolute;right:-.2cqw;bottom:2cqw;width:1.2cqw;height:5cqw;background:var(--lime);border-radius:.3cqw;animation:door 1.6s ease-in-out infinite alternate}
.sh-door .sh-tag{right:1.8cqw;left:auto;top:auto;bottom:0;white-space:nowrap}
@keyframes door{from{transform:scaleY(1)}to{transform:scaleY(.25)}}
.sh-tag{position:absolute;left:1cqw;top:.7cqw;font-size:1cqw;font-weight:800;background:#000;border:1px solid var(--line);border-radius:99px;padding:.15cqw .7cqw}
.sh-paint .sh-tag{left:auto;right:1cqw;color:var(--lime)}
.sh-front{position:absolute;left:50%;bottom:.6cqw;transform:translateX(-50%);background:var(--blue);color:#fff;font-weight:800;font-size:1.1cqw;border-radius:99px;padding:.3cqw 1cqw;white-space:nowrap}
.sh-window{display:flex;align-items:center;justify-content:center;border:2px solid var(--lime);border-radius:.8cqw;text-align:center;font-weight:800;font-size:1.1cqw;color:var(--lime);height:100%}
.sh-back{display:flex;flex-direction:column;gap:.6cqw}
.sh-back>.st{flex:1;display:flex}
.sh-kitchen,.sh-store{flex:1;border:1px solid var(--line);background:var(--panel);border-radius:.8cqw;padding:.8cqw;display:flex;flex-direction:column;gap:.3cqw}
.sh-kitchen b,.sh-store b{font-size:1.4cqw}.sh-kitchen small,.sh-store small{color:var(--sub);font-size:1cqw;line-height:1.4}
.sh-store{border-color:#2a6b45}
.sh-list{display:flex;flex-direction:column;gap:.35cqw}
.sh-list .st>div{display:grid;grid-template-columns:9cqw 1fr;gap:.6cqw;font-size:1.15cqw;border-bottom:1px solid var(--line);padding:.3cqw 0}
.sh-list b{color:var(--lime)}

/* 배포 필요, 불필요 목업 */
.dp{border:1px solid var(--line);border-radius:1cqw;background:var(--panel);padding:1cqw;display:flex;flex-direction:column;gap:.8cqw;height:100%}
.dp.need{border-color:#55661a}
.dp-h{font-size:1.7cqw;font-weight:900}.dp.need .dp-h{color:var(--lime)}
.dp-h small{display:block;font-size:1.05cqw;font-weight:600;color:var(--sub);margin-top:.2cqw}.dp-h small b{color:var(--ink)}
.dp-mock{display:flex;gap:1cqw;align-items:center}
.dp-ex{font-size:1.1cqw;line-height:1.6;color:#d4d4d8}.dp-ex b{color:var(--lime)}
.mk-phone{width:13cqw;flex:none;border:2px solid #3a3a40;border-radius:1.4cqw;padding:.8cqw .7cqw;background:#fff;color:#111;display:flex;flex-direction:column;gap:.35cqw}
.mk-url{font-size:.75cqw;background:#eef0f3;border-radius:99px;padding:.15cqw .5cqw;color:#555;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mk-t{font-weight:900;font-size:1.05cqw}
.mk-r{display:flex;justify-content:space-between;font-size:.85cqw;border-bottom:1px solid #eee;padding:.15cqw 0}.mk-r b{color:#1a73e8}
.mk-xl{width:16cqw;flex:none;border:1px solid #3a3a40;border-radius:.5cqw;overflow:hidden;background:#fff;color:#111}
.mk-xbar{background:#1d6f42;color:#fff;font-size:.8cqw;padding:.25cqw .5cqw}
.mk-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr;font-size:.82cqw}
.mk-grid span{border:1px solid #e3e3e3;padding:.15cqw .35cqw}
.mk-grid span:nth-child(-n+3){background:#f1f3f4;font-weight:700}

/* SNS 허브 구조 */
.hub{display:flex;flex-direction:column;gap:.8cqw}
.hub-in{font-size:1.15cqw;color:var(--sub);border:1px dashed var(--line);border-radius:.6cqw;padding:.5cqw .8cqw}
.hub-top{border:2px solid var(--lime);border-radius:.8cqw;padding:.7cqw 1cqw;display:flex;align-items:baseline;gap:1cqw}
.hub-top b{font-size:1.6cqw;color:var(--lime);font-family:Consolas,monospace}.hub-top span{font-size:1.15cqw;color:#d4d4d8}
.hub-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:.6cqw}
.hub-groups>.st{display:flex}
.hg{flex:1;border:1px solid var(--line);background:var(--panel);border-radius:.8cqw;padding:.7cqw;display:flex;flex-direction:column;gap:.3cqw}
.hg b{font-size:1.35cqw}.hg span{font-family:Consolas,monospace;font-size:.95cqw;color:#9ec1ff}.hg small{color:var(--sub);font-size:.95cqw;margin-top:auto}

/* 역질문 대화 예시 */
.rq{display:grid;grid-template-columns:1.15fr 1fr;gap:1.4cqw;align-items:start}
.chat{display:flex;flex-direction:column;gap:.4cqw;font-size:1.1cqw}
.chat div{max-width:88%;padding:.45cqw .8cqw;border-radius:.8cqw;line-height:1.4}
.chat .me{align-self:flex-end;background:#26262a}
.chat .ai{align-self:flex-start;background:#1b2a07;border:1px solid #3a4a14;color:#e8ffb0}

/* 디자인 레퍼런스 */
.refs{display:grid;grid-template-columns:1fr 1fr;gap:.45cqw}
.refs a{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel);border-radius:.6cqw;padding:.45cqw .7cqw;text-decoration:none}
.refs b{font-size:1.15cqw}.refs span{font-size:.95cqw;color:var(--sub)}
.refs .tip{display:flex;flex-direction:column;border:1px solid #55661a;background:#141a06;border-radius:.6cqw;padding:.45cqw .7cqw}
.refs .tip b{font-size:1.1cqw;color:var(--lime)}.refs .tip span{font-size:.95cqw;color:#e4e4e7}
.sl.theory.lift.noimg .th-term{font-size:3.6cqw}
.sl.theory.lift.noimg .th-def{font-size:2cqw}
.sl.theory.lift .chat{font-size:1cqw}
.sl.theory.lift .extra .tbl{font-size:1.1cqw}
/* 빈 공간 줄이기 */
.col>.st:has(>.dp){flex:1;display:flex}.col>.st>.dp{flex:1}
.dp{gap:1.2cqw;padding:1.4cqw}
.dp-h{font-size:2.1cqw}.dp-h small{font-size:1.3cqw}
.dp-mock{flex:1;align-items:center}
.dp-ex{font-size:1.45cqw;line-height:1.7}
.mk-phone{width:18cqw;padding:1.1cqw 1cqw;gap:.55cqw}
.mk-url{font-size:1cqw}.mk-t{font-size:1.5cqw}.mk-r{font-size:1.2cqw;padding:.3cqw 0}
.mk-xl{width:21cqw}.mk-xbar{font-size:1.05cqw;padding:.4cqw .6cqw}.mk-grid{font-size:1.15cqw}.mk-grid span{padding:.3cqw .5cqw}
.sl.theory.lift .extra .tbl{font-size:1.45cqw}
.sl.theory.lift .chat{font-size:1.35cqw;gap:.6cqw}
.sl.theory.lift .rq{gap:2cqw;margin-top:1.2cqw}
.big3 .card h3{font-size:2.1cqw}.big3 .card{padding:1.8cqw 1.8cqw}.big3 .card p,.big3 .card{font-size:1.55cqw;line-height:1.6}
.big3 .card small{font-size:1.25cqw}.big3 .note{font-size:1.4cqw}.big3{justify-content:center;gap:1.6cqw}
.sl.theory.lift .extra .tbl{font-size:1.7cqw}
.sl.theory.lift .chat{font-size:1.6cqw}
.hub{gap:1.1cqw}.hub-in{font-size:1.45cqw;padding:.7cqw 1cqw}
.hub-top{padding:1cqw 1.2cqw}.hub-top b{font-size:2.1cqw}.hub-top span{font-size:1.45cqw}
.hub-groups{gap:.9cqw}.hg{padding:1.1cqw;gap:.45cqw;min-height:13cqw}.hg b{font-size:1.8cqw}.hg span{font-size:1.2cqw}.hg small{font-size:1.2cqw}
/* 누르면 해당 장면으로 가는 카드 */
button.card.jump{font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;transition:border-color .15s,transform .15s}
button.card.jump:hover{border-color:var(--lime);transform:translateY(-.2cqw)}
button.card.jump .go{margin-top:auto;padding-top:.8cqw;color:var(--lime);font-weight:800;font-size:1.15cqw}
.tight .prompt{font-size:1.15cqw;line-height:1.55}
button.card.jump .cj{font-size:inherit;line-height:1.55}
/* 10분 타이머, 바로가기 */
.timer{display:flex;flex-direction:column;align-items:center;gap:.6cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1.2cqw}
.timer b{font-size:4.2cqw;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer.run b{color:var(--lime)}.timer.done b{color:var(--red)}
.timer button{border:0;border-radius:99px;background:var(--lime);color:#000;font-weight:800;font-size:1.15cqw;padding:.4cqw 1.2cqw}
.timer.run button{background:#26262a;color:var(--ink)}
.timer.sm{flex-direction:row;padding:.5cqw 1cqw;gap:1cqw}.timer.sm b{font-size:2cqw}
.qlinks{display:flex;flex-direction:column;gap:.45cqw}
.qlinks span{font-size:1.05cqw;color:var(--sub);font-weight:700}
.qlinks button,.jump.back{text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:.6cqw;padding:.55cqw .8cqw;font-weight:800;font-size:1.15cqw;cursor:pointer}
.qlinks button:hover,.jump.back:hover{border-color:var(--lime)}
.jump.back{align-self:flex-start;color:var(--lime)}

/* 실습 시작 전환 화면: 지금 화면을 떠나 어디로 가야 하는지 */
.sl.gopg{background:#d97757;color:#141413;padding:4.2cqw 6cqw;display:flex;flex-direction:column;gap:2.2cqw}
.go-top{display:flex;align-items:center;gap:1.2cqw}
.go-k{background:#141413;color:#fff;font-weight:900;font-size:1.3cqw;border-radius:99px;padding:.45cqw 1.3cqw;letter-spacing:.02em}
.go-pt{margin-left:auto;font-weight:800;font-size:1.2cqw;opacity:.75}
.go-main{display:flex;align-items:center;gap:2.4cqw;margin-top:1cqw}
.go-ic{width:9cqw;height:9cqw;flex:none;border-radius:2cqw;background:#fff;display:grid;place-items:center;box-shadow:0 .4cqw 0 rgba(0,0,0,.15)}
.go-ic img{width:5.4cqw;height:5.4cqw;object-fit:contain;border-radius:.6cqw}
.go-t{font-size:5cqw;font-weight:900;letter-spacing:-.035em;line-height:1.1}
.go-w{font-size:1.9cqw;font-weight:700;margin-top:.8cqw;opacity:.85}
.go-steps{margin:0;padding:0;list-style:none;counter-reset:g;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
.go-steps li{counter-increment:g;background:rgba(255,255,255,.88);border-radius:1.2cqw;padding:1.4cqw;font-size:1.65cqw;font-weight:800;line-height:1.4;display:flex;flex-direction:column;gap:.8cqw}
.go-steps li::before{content:counter(g);width:2.6cqw;height:2.6cqw;border-radius:50%;background:#141413;color:#fff;display:grid;place-items:center;font-size:1.3cqw}
.go-back{margin-top:auto;font-size:1.4cqw;font-weight:800}
.go-back::before{content:'→ ';}
.go-back:empty{display:none}
.tg.go{background:#d97757;border-color:#d97757;color:#141413}
.sl.gopg{justify-content:space-between}
.go-main{margin-top:2cqw}
.go-steps li{font-size:2.05cqw;padding:2cqw 1.8cqw;min-height:13cqw;gap:1.2cqw}
.go-steps li::before{width:3.2cqw;height:3.2cqw;font-size:1.6cqw}
.go-back{margin-top:0;font-size:1.6cqw}
.go-steps li{text-wrap:balance}

/* 시작 전 계정 점검 */
.acct{display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw;flex:1}
.ac{display:flex;flex-direction:column;gap:.7cqw;border:1px solid var(--line);background:var(--panel);border-radius:1.2cqw;padding:1.6cqw 1.3cqw;text-decoration:none;transition:border-color .15s,transform .15s}
.ac:hover{border-color:var(--lime);transform:translateY(-.3cqw)}
.ac .n{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--lime);color:#000;font-weight:900;font-size:1.1cqw;display:grid;place-items:center}
.ac .ic{width:5.6cqw;height:5.6cqw;border-radius:1.2cqw;background:#fff;display:grid;place-items:center;margin:.6cqw 0}
.ac .ic img{width:3.2cqw;height:3.2cqw}
.ac b{font-size:1.75cqw;line-height:1.25}.ac small{font-size:1.25cqw;color:var(--sub)}
.ac .go{margin-top:auto;color:var(--lime);font-weight:800;font-size:1.2cqw}

/* 선 그림 아이콘 */
.ico{display:inline-grid;place-items:center}
.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 패킷 흐름 */
.pkt{position:relative}
.pkt-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw}
.pn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4cqw;color:#e4e4e7}
.pn .ico{width:7cqw;height:7cqw;border:1px solid var(--line);background:var(--panel);border-radius:1.4cqw;padding:1.3cqw;color:var(--lime)}
.pn:nth-child(4) .ico{border-color:var(--lime);box-shadow:0 0 0 .3cqw rgba(217,255,75,.12)}
.pn b{font-size:1.45cqw}.pn small{font-size:1.05cqw;color:var(--sub)}
.pkt-track{position:relative;height:2.4cqw;margin-top:1cqw;border-top:2px dashed #3a3a40}
.pkt-track .st{position:absolute;inset:0}
.pk{position:absolute;top:-.95cqw;width:1.7cqw;height:1.7cqw;border-radius:50%;background:var(--lime);box-shadow:0 0 1.2cqw var(--lime);transform:translateX(-50%);animation:pk 1.4s ease-in-out infinite}
.pk.loop{animation:pk 1s ease-in-out infinite alternate}
.pk.back{background:#ff9f6e;box-shadow:0 0 1.2cqw #ff9f6e;animation-duration:2s}
.st.off .pk{animation:none}
@keyframes pk{from{left:var(--a)}to{left:var(--b)}}
.pkt-cap{position:relative;min-height:5.6cqw}
.pkt-cap .st{position:absolute;inset:0}
.pkt-cap .st>div{height:100%;display:flex;flex-direction:column;justify-content:center;gap:.3cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1cqw 1.4cqw}
.pkt-cap b{font-size:1.6cqw;color:var(--lime)}.pkt-cap span{font-size:1.4cqw;color:#e4e4e7}

/* Git: 한글 파일 그림 */
.hwp-files{display:grid;grid-template-columns:repeat(4,1fr);gap:.6cqw}
.hf{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3cqw;border:0;background:none;padding:0}
.hf .ico{width:4.4cqw;height:5.4cqw;color:#9ec1ff}
.hf em{position:absolute;top:2.5cqw;font-style:normal;font-weight:900;font-size:.85cqw;background:#2f6fec;color:#fff;border-radius:.25cqw;padding:0 .3cqw}
.hf span{font-size:.85cqw;color:#c9c9cf;text-align:center;word-break:keep-all;line-height:1.25}
.hf.last .ico{color:#ff8a80}.hf.last em{background:var(--red)}.hf.last span{color:#ffb3ad}

/* 배포: 세로 흐름 */
.vflow{display:flex;flex-direction:column;align-items:stretch;gap:.2cqw;max-width:20cqw}
.vflow div{display:flex;align-items:center;gap:.7cqw;border:1px solid var(--line);background:var(--panel);border-radius:.7cqw;padding:.45cqw .8cqw}
.vflow div.c{border-color:var(--lime)}
.vflow img{width:1.4cqw;height:1.4cqw;filter:invert(1)}
.vflow b{font-size:1.2cqw}.vflow small{margin-left:auto;font-size:1cqw;color:var(--sub)}
.vflow i{font-style:normal;color:var(--lime);text-align:center;font-size:1cqw;line-height:1}

/* 매장 이야기 그림 (1986) */
.story{position:relative;flex:1;min-height:0;border-radius:1.2cqw;overflow:hidden;background:#0d0d0f}
.story>img,.story>.st{position:absolute;inset:0}
.story img{width:100%;height:100%;object-fit:contain}
.story>.st{transition:opacity .5s}

/* 브랜드 링크, 비서형 에이전트 */
.brandlink{display:flex;flex-direction:column;align-items:flex-start;gap:.4cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1.2cqw;text-decoration:none}
.brandlink img{width:4.4cqw;height:4.4cqw;border-radius:1cqw}
.brandlink b{font-size:1.5cqw}.brandlink small{color:var(--lime);font-size:1.1cqw}
.bots{display:grid;grid-template-columns:1fr 1fr;gap:1cqw}
.bot{display:flex;flex-direction:column;gap:.4cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1.2cqw}
.bot.c{border-color:#55661a}
.bot .bi{width:4cqw;height:4cqw;border-radius:1cqw;background:#fff;display:grid;place-items:center}
.bot .bi img{width:2.4cqw;height:2.4cqw;object-fit:contain}
.bot b{font-size:1.6cqw}.bot small{font-size:1.15cqw;color:var(--sub)}
.bot.c b{color:var(--lime)}

/* ===== 7차 ===== */
/* 이동 장면: 바로가기 버튼 */
.go-foot{display:flex;align-items:center;gap:1.4cqw}
.gobtn{margin-left:auto;border:0;border-radius:99px;background:#141413;color:#fff;font-weight:900;font-size:1.5cqw;padding:.8cqw 1.8cqw;cursor:pointer}

/* 파트 정리: 단계별 도식 */
.sumpath{flex:1.6;display:flex;flex-direction:column;gap:.7cqw;position:relative}
.sumpath::before{content:"";position:absolute;left:1.9cqw;top:1.4cqw;bottom:1.4cqw;width:2px;background:#2a2a2e}
.sp{position:relative;display:flex;align-items:center;gap:1.2cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:.9cqw 1.3cqw .9cqw .6cqw}
.sp i{flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--lime);color:#000;font-style:normal;font-weight:900;font-size:1.3cqw;display:grid;place-items:center;position:relative;z-index:1}
.sp span{font-size:1.6cqw;font-weight:700;line-height:1.4}
.sumroad{flex:.7;display:flex;flex-direction:column;gap:.45cqw;border-left:1px solid var(--line);padding-left:1.6cqw;justify-content:center}
.sumroad div{display:flex;align-items:center;gap:.7cqw;font-size:1.1cqw;color:var(--dim)}
.sumroad i{flex:none;width:1.8cqw;height:1.8cqw;border-radius:50%;border:1px solid #3a3a40;display:grid;place-items:center;font-style:normal;font-size:.9cqw}
.sumroad .done{color:var(--sub)}.sumroad .done i{background:#26262a}
.sumroad .now{color:var(--ink);font-weight:800}.sumroad .now i{background:var(--lime);color:#000;border-color:var(--lime)}

/* 오늘 하루 정리 */
.daymap{display:grid;grid-template-columns:repeat(4,1fr);gap:.8cqw}
.daymap>.st{display:flex}
.dm{flex:1;display:flex;flex-direction:column;gap:.35cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1cqw}
.dm .n{font-size:.95cqw;font-weight:900;color:var(--lime);letter-spacing:.06em}
.dm b{font-size:1.45cqw}.dm small{font-size:1.02cqw;color:#c9c9cf;line-height:1.4}.dm em{font-style:normal;font-size:1.02cqw;color:var(--sub);line-height:1.4;margin-top:auto}
.dm-end{display:flex;align-items:center;gap:1cqw;justify-content:center;margin-top:1cqw;font-size:1.6cqw}
.dm-end b{border:1px solid var(--line);border-radius:99px;padding:.4cqw 1.2cqw}.dm-end b.c{background:var(--lime);color:#000;border-color:var(--lime)}
.dm-end i{font-style:normal;color:var(--lime);font-weight:900}

/* 배포 필요: 사이트 목업 */
.mk-site{border:1px solid #3a3a40;border-radius:1cqw;overflow:hidden;background:#fff;color:#111;display:flex;flex-direction:column}
.ms-bar{display:flex;align-items:center;gap:.4cqw;background:#eef0f3;padding:.6cqw .9cqw}.ms-bar i{width:.7cqw;height:.7cqw;border-radius:50%;background:#c9ccd2}
.ms-bar span{margin-left:.8cqw;background:#fff;border-radius:99px;padding:.2cqw .9cqw;font-size:1cqw;color:#555}
.ms-hd{display:flex;align-items:center;gap:1cqw;padding:1.2cqw 1.4cqw .6cqw}.ms-hd b{font-size:1.8cqw}
.ms-new{background:#1a73e8;color:#fff;border-radius:99px;padding:.2cqw .8cqw;font-size:1cqw;font-weight:800}
.ms-rows{padding:0 1.4cqw 1.2cqw}
.ms-r{display:grid;grid-template-columns:1fr 6cqw 6cqw 7cqw;align-items:center;gap:.6cqw;border-bottom:1px solid #eee;padding:.7cqw 0;font-size:1.3cqw}
.ms-r small{color:#777;font-size:1.05cqw}.ms-r b{text-align:right}.ms-r em{font-style:normal;font-size:1.05cqw;color:#888;text-align:right}.ms-r em.dn{color:#1a73e8;font-weight:800}
.viewers{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}
.vw{display:flex;flex-direction:column;align-items:center;gap:.3cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1cqw}
.vw .ico{width:4cqw;height:4cqw;color:var(--lime)}.vw b{font-size:1.3cqw}.vw small{font-size:1cqw;color:var(--sub)}

/* 배포 안 해도: 자동화 도구 */
.auto{display:flex;align-items:center;gap:.6cqw;height:100%}
.auto>.st{display:flex;align-items:center;gap:.6cqw}
.au-step{display:flex;flex-direction:column;align-items:center;gap:.5cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1.4cqw;text-align:center}
.au-step.c{border-color:var(--lime)}
.au-step .ico{width:4.4cqw;height:5.4cqw;color:#7ee787}
.au-step b{font-size:1.4cqw}.au-step small{font-size:1.05cqw;color:var(--sub)}
.au-ar span{color:var(--lime);font-size:2.4cqw;font-weight:900}
.au-spin{width:3.6cqw;height:3.6cqw;border-radius:50%;border:.4cqw solid #2a2a2e;border-top-color:var(--lime);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 신입사원 시나리오 */
.nb{display:flex;flex-direction:column;gap:1.2cqw}
.nb-p{display:flex;align-items:center;gap:1cqw}
.nb-p.new{flex-direction:row-reverse}
.av{flex:none;width:4.4cqw;height:4.4cqw;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.2cqw;background:#26262a;border:1px solid #3a3a40}
.nb-p.boss .av{background:var(--blue);color:#fff;border-color:var(--blue)}
.bub{border-radius:1.2cqw;padding:1cqw 1.4cqw;font-size:1.6cqw;font-weight:700;background:var(--panel);border:1px solid var(--line)}
.nb-p.new .bub{color:var(--sub);font-weight:600}
.nb-res{display:flex;align-items:center;gap:1.2cqw}
.nb-res .bad{width:12cqw;height:8cqw;border-radius:1cqw;border:2px dashed var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center}
.nb-res .bad b{font-size:3cqw;color:var(--red)}.nb-res .bad small{font-size:1cqw;color:#ffb3ad}
.nb-res>span{font-size:1.4cqw;color:var(--sub)}
.why{display:flex;flex-direction:column;gap:.6cqw}
.why>b{font-size:1.9cqw}
.why div{display:flex;align-items:center;gap:1cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:.8cqw 1.1cqw}
.why i{flex:none;width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-weight:900;display:grid;place-items:center;font-size:1.2cqw}
.why span b{display:block;font-size:1.45cqw}.why span small{font-size:1.1cqw;color:var(--sub)}
.chat .ai.ok{background:var(--lime);color:#000;font-weight:800}
.chat>.st{display:flex;flex-direction:column}
.chat>.st .me{align-self:flex-end}.chat>.st .ai{align-self:flex-start}
.sh-list>div:not(.st){display:grid;grid-template-columns:9cqw 1fr;gap:.6cqw;font-size:1.15cqw;border-bottom:1px solid var(--line);padding:.3cqw 0}
.sh-list>div:not(.st) b{color:var(--lime)}
.sl .bd>.st{display:flex;flex:.8;min-width:0}.sl .bd>.st>.col{flex:1}
.hf .ico{width:5.4cqw;height:6.6cqw}.hf em{top:3.1cqw;font-size:1cqw}.hf span{font-size:1cqw}
.daymap{flex:1;grid-auto-rows:1fr;gap:1cqw}
.dm{padding:1.4cqw;gap:.6cqw}.dm .n{font-size:1.1cqw}.dm b{font-size:1.8cqw}.dm small{font-size:1.25cqw}.dm em{font-size:1.2cqw}
.dm-end{font-size:1.8cqw}

/* 리모트 컨트롤 */
.rc{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;gap:1cqw}
.rc-dev{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4cqw;border:1px solid var(--line);background:var(--panel);border-radius:1.2cqw;padding:1.4cqw}
.rc-dev .ico{width:6cqw;height:6cqw;color:var(--lime)}
.rc-dev.phone .ico{color:#ff9f6e}
.rc-dev b{font-size:1.6cqw}.rc-dev small{font-size:1.1cqw;color:var(--sub);line-height:1.45}
.rc-mid .st{display:flex;flex-direction:column;align-items:center;gap:.4cqw;text-align:center}
.rc-mid b{font-size:1.5cqw;color:var(--lime)}.rc-mid small{font-size:1.05cqw;color:var(--sub)}
.rc-ln{position:relative;width:100%;height:1.6cqw;border-top:2px dashed #3a3a40;margin-top:.8cqw}
.rc-ln .pk{animation:pk 1.6s ease-in-out infinite alternate}
.rc-use{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw;margin-top:1.2cqw}
.rc-use div{border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1cqw;display:flex;flex-direction:column;gap:.3cqw}
.rc-use b{font-size:1.3cqw;color:var(--lime)}.rc-use span{font-size:1.15cqw}
.rc-use{margin-top:1.6cqw;gap:1cqw}.rc-use div{padding:1.4cqw;gap:.5cqw}.rc-use b{font-size:1.5cqw}.rc-use span{font-size:1.3cqw}
.rc-dev{padding:1.8cqw}

/* 세 가지 비교 (리모트 컨트롤, 루틴, 클라우드) */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}
.three>.st{display:flex}
.th3{flex:1;display:flex;flex-direction:column;gap:.6cqw;border:1px solid var(--line);background:var(--panel);border-radius:1.2cqw;padding:1.6cqw}
.th3.c{border-color:var(--lime)}
.th3 .ico{width:5cqw;height:5cqw;color:var(--lime)}
.th3>b{font-size:2cqw}.th3 span{font-size:1.4cqw;line-height:1.45}.th3 span b{color:var(--lime)}
.th3 small{font-size:1.15cqw;color:var(--sub)}
.th3 em{margin-top:auto;font-style:normal;font-size:1.1cqw;font-weight:800;border:1px solid var(--line);border-radius:99px;padding:.25cqw .8cqw;align-self:flex-start}
.th3.c em{background:var(--lime);color:#000;border-color:var(--lime)}

/* 전체 화면: 아래 가운데 쪽 이동 바 */
body.present .presbar{left:50%;right:auto;transform:translateX(-50%);opacity:.55;font-size:13px;padding:6px 10px}
#pGo{width:150px;border:1px solid #3a3a40;background:#111;color:#fff;border-radius:99px;padding:5px 10px;font:inherit}
#pGo:focus{outline:none;border-color:var(--lime);width:170px}
body.present .presbar:focus-within{opacity:1}
/* 수강생 화면: 대본, 원문 대조 숨김 (매뉴얼, 왼쪽 목차는 보임) */
body.student #noteBtn,body.student .tabs button[data-v=src],body.student #v-src,body.student .notes{display:none !important}
.th3{min-height:24cqw;padding:2cqw;gap:.9cqw}.th3 .ico{width:6cqw;height:6cqw}.th3>b{font-size:2.3cqw}.th3 span{font-size:1.55cqw}.th3 small{font-size:1.3cqw}

/* 클라우드 환경: 커밋, 푸시 흐름 */
.cflow{display:flex;align-items:stretch;gap:.6cqw}
.cflow>.st{display:flex;align-items:stretch}
.cf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4cqw;border:1px solid var(--line);background:var(--panel);border-radius:1.2cqw;padding:1.3cqw 1cqw;min-width:12cqw}
.cf.c{border-color:var(--lime)}
.cf .ico{width:5cqw;height:5cqw;color:var(--lime)}
.cf b{font-size:1.5cqw}.cf small{font-size:1.05cqw;color:var(--sub)}
.cf-ar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2cqw;padding:0 .3cqw}
.cf-ar b{font-size:1.05cqw;color:var(--lime);white-space:nowrap}.cf-ar i{font-style:normal;color:var(--lime);font-size:2.2cqw;font-weight:900;line-height:1}
.cf-back{display:flex;align-items:center;gap:.8cqw;margin-top:1.2cqw;border:1px dashed #55661a;border-radius:1cqw;padding:.8cqw 1.2cqw}
.cf-back i{font-style:normal;color:var(--lime);font-size:2cqw;font-weight:900}.cf-back b{font-size:1.4cqw}.cf-back span{font-size:1.2cqw;color:var(--sub)}
.adv{display:flex;flex-direction:column;gap:.6cqw}
.adv>b{font-size:1.8cqw}
.adv div{display:flex;flex-direction:column;gap:.15cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:.8cqw 1.1cqw}
.adv div b{font-size:1.4cqw;color:var(--lime)}.adv div span{font-size:1.15cqw;color:var(--sub)}

/* 사전 기획서 세 개 */
.pre3{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}
.pre3>.st{display:flex}
.pc3{flex:1;display:flex;flex-direction:column;gap:.55cqw;border:1px solid var(--line);background:var(--panel);border-radius:1.2cqw;padding:1.3cqw}
.pc-h{display:flex;align-items:baseline;gap:.8cqw;border-bottom:1px solid var(--line);padding-bottom:.6cqw}
.pc-h b{font-size:1.75cqw}.pc-h span{margin-left:auto;font-size:1.15cqw;color:var(--sub);font-weight:700}
.pc-r em{display:block;font-style:normal;font-size:.95cqw;font-weight:800;color:var(--sub)}
.pc-r p{margin:.15cqw 0 0;font-size:1.2cqw;line-height:1.45}
.pc-r.c em{color:var(--lime)}.pc-r.c p{font-weight:700}
.planall .pa-grid{grid-template-columns:repeat(5,1fr)}
.pc3{padding:1.7cqw;gap:.9cqw}.pc-h b{font-size:2.1cqw}.pc-h span{font-size:1.35cqw}.pc-r em{font-size:1.15cqw}.pc-r p{font-size:1.5cqw}.pre3+.st .note,.pre3~.st .note{font-size:1.4cqw;margin-top:.6cqw}

/* 화면에 표시해서 고치기 */
.annot{display:grid;grid-template-columns:1fr 1fr;gap:.7cqw}
.annot>.st{display:flex}
.annot figure{margin:0;flex:1;display:flex;flex-direction:column;gap:.3cqw}
.annot img{width:100%;aspect-ratio:1557/1012;object-fit:contain;border-radius:.6cqw;border:1px solid var(--line);background:#fff}
.annot figcaption{font-size:1.15cqw;font-weight:800;color:var(--lime)}

/* 자판기 vs Claude */
.vs2{display:flex;flex-direction:column;gap:.6cqw}
.vs2>div{display:flex;flex-direction:column;gap:.3cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:.8cqw 1cqw}
.vs2>div.c{border-color:var(--lime)}
.vs2 b{font-size:1.3cqw}.vs2 .c>b{color:var(--lime)}
.vs2 span{font-size:1.1cqw;line-height:1.45;color:#e4e4e7}
.vs2 small{font-size:1cqw;color:var(--sub)}.vs2 small b{font-size:inherit;color:var(--ink)}
.vs2{display:grid;grid-template-columns:1fr 1fr;gap:.5cqw}
.vs2>div{padding:.7cqw .8cqw;gap:.25cqw}
.vs2 b{font-size:1.15cqw}.vs2 span{font-size:1cqw;line-height:1.4}.vs2 small{font-size:.9cqw}

/* LLM 흐름 모션 */
.llm-lead{font-size:1.45cqw;color:#e4e4e7;line-height:1.5}.llm-lead b{color:var(--lime)}
.lf{display:flex;align-items:stretch;gap:.4cqw}
.lf>.st{display:flex;align-items:center;gap:.4cqw;flex:1}
.lf>.st>i{font-style:normal;color:var(--lime);font-weight:900;font-size:1.4cqw}
.lf>.st>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15cqw;border:1px solid var(--line);background:var(--panel);border-radius:.8cqw;padding:.55cqw .4cqw;text-align:center}
.lf em{font-style:normal;color:var(--lime);font-weight:900;font-size:1.1cqw}.lf b{font-size:1.15cqw}
.lp{position:relative;flex:1;min-height:12cqw}
.lp>.st{position:absolute;inset:0}
.lp-in{height:100%;border:1px solid var(--line);background:#0e0e10;border-radius:1cqw;padding:1.1cqw 1.4cqw;display:flex;flex-direction:column;justify-content:center;gap:.8cqw}
.lp .cap{font-size:1.05cqw;font-weight:800;color:var(--sub)}
.lp .txt{font-size:2cqw;font-weight:800}.lp .txt em{font-style:normal;color:var(--lime)}
.lp .cur{display:inline-block;width:.2cqw;height:1.9cqw;background:var(--lime);margin-left:.3cqw;vertical-align:-.3cqw;animation:llmblink 1s steps(1) infinite}
@keyframes llmblink{50%{opacity:0}}
.tks{display:flex;flex-wrap:wrap;gap:.4cqw}
.tks span{font-size:1.6cqw;font-weight:700;background:#1b2a07;border:1px solid #3a4a14;border-radius:.4cqw;padding:.25cqw .6cqw;white-space:pre}
.st:not(.off) .tks span{animation:llmpop .4s both}.tks span:nth-child(2){animation-delay:.08s}.tks span:nth-child(3){animation-delay:.16s}.tks span:nth-child(4){animation-delay:.24s}.tks span:nth-child(5){animation-delay:.32s}.tks span:nth-child(6){animation-delay:.4s}.tks span:nth-child(7){animation-delay:.48s}.tks span:nth-child(8){animation-delay:.56s}
@keyframes llmpop{from{opacity:0;transform:translateY(.6cqw)}to{opacity:1;transform:none}}
.nums{display:flex;flex-wrap:wrap;gap:.4cqw}
.nums span{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:.4cqw;padding:.2cqw .5cqw}
.nums small{font-size:.85cqw;color:var(--sub);white-space:pre}.nums b{font-family:Consolas,monospace;font-size:1.4cqw;color:#9ec1ff}
.bin{font-family:Consolas,monospace;font-size:1.4cqw;color:var(--lime)}.bin small{font-family:Pretendard,sans-serif;color:var(--sub);font-size:1cqw}
.nn{display:flex;gap:1.6cqw;align-items:center}
.col-n{display:flex;flex-direction:column;gap:.35cqw}
.col-n i{width:1cqw;height:1cqw;border-radius:50%;background:#2a2a2e;animation:llmfire 1.4s ease-in-out infinite}
@keyframes llmfire{0%,100%{background:#2a2a2e}50%{background:var(--lime);box-shadow:0 0 .6cqw var(--lime)}}
.lp .llm-bars div{grid-template-columns:7cqw 1fr 3.5cqw;font-size:1.2cqw}
.lp-in:has(.nn){flex-direction:row;align-items:center;flex-wrap:wrap}.lp-in:has(.nn) .cap{width:100%}.lp-in:has(.nn) .llm-bars{flex:1}
.pick{display:flex;align-items:center;gap:1cqw;font-size:2.2cqw}
.pick b{font-family:Consolas,monospace;color:#9ec1ff}.pick i{font-style:normal;color:var(--lime);font-weight:900}.pick span{font-weight:900;color:var(--lime)}
.loop{font-size:1.25cqw;color:var(--sub)}
.llm-sum{border:1px solid #55661a;background:#141a06;border-radius:1cqw;padding:.8cqw 1.2cqw;font-size:1.3cqw;line-height:1.55}
.llm-sum b{color:var(--lime);margin-right:.5cqw}.llm-sum em{font-style:normal;color:var(--lime);font-weight:800}
.col-n i{width:1.7cqw;height:1.7cqw}.col-n{gap:.5cqw}.nn{gap:2.2cqw;padding:0 1cqw}
.brandlink img[src$='google.svg']{background:#fff;padding:.6cqw}

/* 강사 포트폴리오 링크 (새 탭) */
.pf-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:.4cqw;background:var(--lime);color:#000;font-weight:900;font-size:1.25cqw;border-radius:99px;padding:.55cqw 1.4cqw;text-decoration:none}
.pf-btn:hover{filter:brightness(1.08)}
.pf-row{display:flex;align-items:center;gap:1.2cqw;margin-top:1cqw}.pf-row span{font-size:1.1cqw;color:var(--sub)}
.pf-top{margin-left:auto;margin-right:10px;font-size:13px;font-weight:700;color:var(--sub);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:5px 12px;white-space:nowrap}
.pf-top:hover{color:var(--ink);border-color:var(--lime)}

/* REA 사례 카드 */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}
.case{display:flex;flex-direction:column;gap:.4cqw;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1.1cqw;text-decoration:none;transition:border-color .15s}
.case:hover{border-color:var(--lime)}
.case b{font-size:1.4cqw;line-height:1.35}
.case span{font-size:1.1cqw;color:#d4d4d8;line-height:1.45}
.case small{margin-top:auto;font-size:1cqw;color:var(--lime);font-weight:700}
.cases{flex:1;grid-auto-rows:1fr;gap:1cqw}.case{padding:1.5cqw;gap:.6cqw}.case b{font-size:1.75cqw}.case span{font-size:1.35cqw}.case small{font-size:1.15cqw}

/* 스킬 비유 모션 */
.skv{flex:1;display:grid;grid-template-columns:1.25fr 1fr;gap:1.2cqw;min-height:0}
.skv-p{border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1.2cqw 1.4cqw;display:flex;flex-direction:column;gap:1cqw;min-height:0}
.skv-h{font-weight:700;color:var(--lime);font-size:1.15cqw}
.skv-row{flex:1;display:flex;align-items:center;gap:1.2cqw;min-height:0}
.skv-box{position:relative;flex:1.3;height:100%;min-height:14cqw}
.skv-box>.st{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.skv-crate{width:92%;height:46%;border:.2cqw solid var(--sub);border-top-style:dashed;border-radius:.4cqw .4cqw .8cqw .8cqw;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.6cqw;background:linear-gradient(#ffffff08,#ffffff12)}
.skv-crate b{font-size:1cqw;color:var(--sub)}
.skv-box>.st:nth-child(2){align-items:flex-end;justify-content:flex-start;padding:0 0 2.2cqw 9%}
.skv-doc{width:38%;padding:.7cqw;border-radius:.4cqw;background:#f4f4f5;color:#111;display:flex;flex-direction:column;gap:.3cqw}
.skv-doc i{height:.35cqw;border-radius:1cqw;background:#bbb}.skv-doc i:nth-child(2){width:70%}.skv-doc i:nth-child(3){width:85%}
.skv-doc b{font-size:1cqw}.skv-doc small{font-size:.8cqw;color:#555}
.st:not(.off) .skv-doc{animation:skvdrop 1.1s .1s both}
@keyframes skvdrop{0%{opacity:0;transform:translateY(-9cqw) rotate(-8deg)}70%{opacity:1;transform:translateY(.4cqw) rotate(0)}100%{opacity:1;transform:none}}
.skv-box>.st:nth-child(3){align-items:flex-end;justify-content:flex-end;padding:0 7% 2.6cqw 0}
.skv-parts{width:44%;display:flex;flex-wrap:wrap;gap:.35cqw;justify-content:center}
.skv-parts span{padding:.3cqw .6cqw;border-radius:.4cqw;background:var(--blue);font-size:.85cqw;font-weight:700}
.skv-parts small{width:100%;text-align:center;font-size:.8cqw;color:var(--sub)}
.st:not(.off) .skv-parts{animation:skvdrop 1.1s .1s both}
.st:not(.off) .skv-parts span{animation:llmpop .4s both}.skv-parts span:nth-child(2){animation-delay:.12s!important}.skv-parts span:nth-child(3){animation-delay:.24s!important}
.skv-out{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5cqw;position:relative}
.skv-arr{position:absolute;left:-1.1cqw;top:35%;font-style:normal;color:var(--lime);font-size:1.6cqw}
.skv-chair{width:6.5cqw;fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round}
.skv-chair rect{fill:#d9ff4b22}
.st:not(.off) .skv-chair{animation:skvchair .8s .15s both}
@keyframes skvchair{from{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:none}}
.skv-out small,.skv-key small,.skv-lv small{font-size:.95cqw;color:var(--sub);text-align:center}.skv-out b,.skv-key small b{color:var(--ink)}
.skv-lv{display:flex;flex-direction:column;gap:.4cqw}
.skv-bar{height:1cqw;border-radius:1cqw;background:#ffffff14;overflow:hidden}
.skv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--lime))}
.st:not(.off) .skv-bar i{animation:skvfill 1.2s .1s both}
@keyframes skvfill{to{width:100%}}
.skv-lv b{font-size:1.5cqw;color:var(--lime)}
.st:not(.off) .skv-lv b{animation:skvchair .5s 1.2s both}
.skv-key{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7cqw;padding-top:.6cqw}
.skv-btn{position:relative;z-index:1;padding:1cqw 2cqw;border-radius:.8cqw;background:var(--lime);color:#111;font-weight:800;font-size:1.4cqw;box-shadow:0 .4cqw 0 #8aa62a}
.st:not(.off) .skv-btn{animation:skvpress .5s .3s both}
@keyframes skvpress{50%{transform:translateY(.35cqw);box-shadow:0 .05cqw 0 #8aa62a}}
.skv-ring{position:absolute;top:0;left:50%;width:6cqw;height:6cqw;margin-left:-3cqw;border-radius:50%;border:.2cqw solid var(--lime);opacity:0}
.st:not(.off) .skv-ring{animation:skvring .9s .55s both}
@keyframes skvring{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.8)}}

/* 왜 마크다운 */
.mdv{display:grid;grid-template-columns:.75fr repeat(4,1fr);gap:.8cqw;align-items:start}
.mdv>div{display:grid;grid-template-rows:2.6cqw 10cqw 4cqw 5cqw;gap:.6cqw}.mdv>div>.st{min-height:0;display:flex;flex-direction:column;justify-content:center}.mdv>div>.st>*{flex:1}
.mdv-lb .st{display:flex;align-items:center;color:var(--sub);font-size:.95cqw;font-weight:700}
.mdv-c{border:1px solid var(--line);border-radius:.8cqw;padding:.7cqw;background:var(--panel)}
.mdv-hi{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime) inset}
.mdv-f{display:flex;justify-content:space-between;align-items:baseline}.mdv-f b{font-size:1.1cqw}.mdv-f small{font-size:.85cqw;color:var(--sub)}
.mdv-in{height:100%;border-radius:.5cqw;padding:.6cqw;font-size:1cqw;line-height:1.5;font-family:ui-monospace,Consolas,monospace;background:#0e0e10;border:1px solid var(--line);word-break:break-all;overflow:hidden}
.mdv-in.bin{color:#6b6b74;letter-spacing:.05em}.mdv-in.md b{color:var(--lime)}
.st:not(.off) .mdv-in.bin{animation:mdvglitch 1.2s steps(6) both}
@keyframes mdvglitch{0%{opacity:0;filter:blur(2px)}50%{opacity:1;filter:blur(1px)}100%{opacity:1;filter:none}}
.st:not(.off) .mdv-in.md{animation:llmpop .5s both}
.mdv-t{display:flex;align-items:center;font-size:1cqw;padding:.45cqw .6cqw;border-radius:.5cqw;line-height:1.4}
.mdv-t.ok{background:#d9ff4b1c;color:var(--lime)}.mdv-t.bad{background:#ff5a4e1c;color:var(--red)}.mdv-t.mid{background:#ffffff0d;color:var(--sub)}
.mdv-git s{color:var(--red)}.mdv-git u{text-decoration:none;color:var(--green)}
/* API와 환경 변수 */
.apv{display:flex;align-items:stretch;gap:.6cqw}
.apv>.st:nth-child(odd){flex:1}.apv>.st:nth-child(even){flex:.55;display:flex}
.apv-n{height:100%;border:1px solid var(--line);background:var(--panel);border-radius:.9cqw;padding:.9cqw 1cqw;display:flex;flex-direction:column;gap:.35cqw}
.apv-n b{font-size:1.3cqw}.apv-n small{font-size:.9cqw;color:var(--sub)}
.apv-k{font-size:.8cqw;color:var(--dim);font-weight:700}
.apv-srv{border-color:var(--lime)}.apv-ai{border-color:var(--blue)}
.apv-safe{margin-top:.2cqw;padding:.5cqw .7cqw;border-radius:.5cqw;background:#d9ff4b1c;color:var(--lime);font-size:.85cqw;font-weight:700;line-height:1.5}
.apv-safe code{color:var(--ink);font-size:.85cqw}
.apv-w{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4cqw;position:relative}
.apv-w i{display:block;width:100%;height:.2cqw;background:var(--line);position:relative}
.apv-w i::after{content:'';position:absolute;top:-.35cqw;left:0;width:.9cqw;height:.9cqw;border-radius:50%;background:var(--lime);box-shadow:0 0 1cqw var(--lime)}
.st:not(.off) .apv-w i::after{animation:apvgo 1.4s .2s infinite}
@keyframes apvgo{from{left:0}to{left:calc(100% - .9cqw)}}
.apv-w small{font-size:.8cqw;color:var(--sub);text-align:center}
.apv-back{margin-top:.6cqw;text-align:center;font-size:.95cqw;color:var(--sub)}
.apv-bot{display:grid;grid-template-columns:1fr 1.3fr;gap:.9cqw;margin-top:.8cqw}
.apv-no,.apv-yes{height:100%;border-radius:.9cqw;padding:.9cqw 1cqw;display:flex;flex-wrap:wrap;gap:.5cqw;align-items:center}
.apv-no{background:#ff5a4e14;border:1px solid #ff5a4e55}.apv-no b{width:100%;color:var(--red);font-size:1.1cqw}
.apv-no span{padding:.3cqw .6cqw;border-radius:.4cqw;background:#ff5a4e26;font-size:.9cqw;text-decoration:line-through}
.apv-no small{width:100%;font-size:.85cqw;color:var(--sub)}
.apv-yes{background:#d9ff4b10;border:1px solid #d9ff4b55}.apv-yes b{width:100%;color:var(--lime);font-size:1.1cqw}
.apv-yes>div{flex:1;display:flex;flex-direction:column;gap:.2cqw;padding:.5cqw .7cqw;border-radius:.5cqw;background:#0e0e10}
.apv-yes span{font-size:.8cqw;color:var(--sub)}.apv-yes code{font-size:1cqw;color:var(--ink)}.apv-yes small{font-size:.8cqw;color:var(--dim)}
/* 메모장 뜯어보기 */
.mmv{flex:1;display:grid;grid-template-columns:1.25fr 1fr;gap:2cqw;align-items:center;min-height:0}
.mmv-win{position:relative;border:1px solid var(--line);border-radius:1cqw;background:#f4f4f5;color:#111}
.mmv-bar{display:flex;align-items:center;gap:.4cqw;padding:.6cqw .8cqw;border-bottom:1px solid #ddd}
.mmv-bar i{width:.7cqw;height:.7cqw;border-radius:50%;background:#ccc}
.mmv-bar span{flex:1;margin-left:.6cqw;padding:.25cqw .7cqw;border-radius:.4cqw;background:#e4e4e7;font-size:.85cqw;color:#555}
.mmv-bar em{font-style:normal;font-size:.8cqw;padding:.2cqw .6cqw;border-radius:1cqw;background:#111;color:#fff}
.mmv-body{display:grid;grid-template-columns:.8fr 2fr;min-height:15cqw}
.mmv-side{border-right:1px solid #ddd;padding:.8cqw;display:flex;flex-direction:column;gap:.4cqw;font-size:.9cqw}
.mmv-side div{padding:.35cqw .5cqw;border-radius:.4cqw}.mmv-side .on{background:#e4e4e7;font-weight:700}
.mmv-q{border:1px solid #ddd;color:#999}
.mmv-ed{padding:1cqw 1.2cqw;display:flex;flex-direction:column;gap:.5cqw}.mmv-ed b{font-size:1.4cqw}
.mmv-ed p{height:.6cqw;border-radius:1cqw;background:#d4d4d8;margin:0}
.mmv-btns{margin-top:auto;display:flex;gap:.4cqw}.mmv-btns span{padding:.35cqw .7cqw;border-radius:.4cqw;background:#e4e4e7;font-size:.85cqw;font-weight:700}
.mmv-btns .ai{background:#111;color:var(--lime)}
.mmv-b{position:absolute;width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--lime);color:#111;font-style:normal;font-weight:800;font-size:1.1cqw;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .3cqw #d9ff4b44}
.st:not(.off) .mmv-b{animation:skvchair .45s both}
.mmv-list{display:flex;flex-direction:column;gap:.5cqw}
.mmv-it{display:grid;grid-template-columns:2cqw 8.5cqw 1fr;align-items:center;gap:.6cqw;padding:.45cqw .7cqw;border-radius:.6cqw;background:var(--panel);border:1px solid var(--line)}
.mmv-it i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--lime);color:#111;font-style:normal;font-weight:800;font-size:.95cqw;display:flex;align-items:center;justify-content:center}
.mmv-it b{font-size:1.05cqw}.mmv-it span{font-size:.9cqw;color:var(--sub)}
/* REA */
.rev{display:flex;align-items:stretch;gap:.5cqw}
.rev>.st{flex:1;display:flex;align-items:center;gap:.5cqw}
.rev-a{color:var(--lime);font-size:1.5cqw}
.rev-n{flex:1;height:100%;border:1px solid var(--line);background:var(--panel);border-radius:.9cqw;padding:.8cqw;display:flex;flex-direction:column;align-items:center;gap:.35cqw;text-align:center}
.rev-n b{font-size:1.05cqw}.rev-n small{font-size:.8cqw;color:var(--sub)}
.rev-scr{width:5cqw;height:3.4cqw;border-radius:.4cqw;border:.15cqw solid var(--sub);padding:.35cqw;display:flex;flex-direction:column;gap:.25cqw}
.rev-scr i{height:.5cqw;border-radius:1cqw;background:var(--sub)}.rev-scr i:nth-child(2){width:70%}.rev-scr i:nth-child(3){width:45%;background:var(--blue)}
.st:not(.off) .rev-split .rev-scr i{animation:revsplit 1s .2s both}
.rev-split .rev-scr i:nth-child(1){--x:-.8cqw}.rev-split .rev-scr i:nth-child(2){--x:.8cqw}.rev-split .rev-scr i:nth-child(3){--x:-.4cqw}
@keyframes revsplit{50%{transform:translateX(var(--x)) rotate(6deg)}100%{transform:translateX(var(--x))}}
.rev-ev{min-height:3.4cqw;display:flex;align-items:center;font-family:ui-monospace,Consolas,monospace;font-size:.8cqw;color:var(--lime);line-height:1.4}
.rev-mine{border-color:var(--lime)}.rev-mine .rev-scr{border-color:var(--lime)}.rev-mine .rev-scr i{background:var(--lime)}.rev-mine .rev-scr i:nth-child(3){background:var(--ink)}

/* 장면별 시간 (강사 화면) */
#notes h4 .tg{margin-left:.6em;padding:.1em .5em;border-radius:.4em;background:#d9ff4b22;color:var(--lime);font-weight:700}
#notes h4 .opt{margin-left:.4em;padding:.1em .5em;border-radius:.4em;background:#ffd16633;color:var(--yellow);font-weight:700}
/* 방금 깐 것들 */
.kit{display:flex;flex-direction:column;gap:.8cqw}
.kit-h,.kit-r{display:grid;grid-template-columns:12cqw 1fr 14cqw;gap:1cqw;align-items:center}
.kit-h span{font-size:.9cqw;color:var(--dim);font-weight:700}
.kit-r{padding:1.2cqw 1.2cqw;border:1px solid var(--line);border-radius:.8cqw;background:var(--panel)}
.kit-r b{font-size:1.45cqw;display:flex;align-items:center;gap:.5cqw}.kit-r b img{width:1.6cqw;height:1.6cqw}
.kit-r span{font-size:1.25cqw;line-height:1.45}.kit-r em{font-style:normal;color:var(--lime);font-weight:700;font-size:1.1cqw}
.kit-lts{border-color:#d9ff4b66}
/* 데이터베이스 */
.dbv{flex:1;display:grid;grid-template-columns:1fr 1.2fr;gap:1.2cqw;min-height:0}
.dbv>.st{display:flex}
.dbv-x{flex:1;border:1px solid #ff5a4e55;background:#ff5a4e10;border-radius:1cqw;padding:1.2cqw;display:flex;flex-direction:column;gap:.7cqw}
.dbv-x b{font-size:1.3cqw}.dbv-x span{font-size:1.1cqw;color:var(--red)}
.dbv-file{align-self:flex-start;padding:.6cqw 1cqw;border-radius:.5cqw;background:#1f7a3f;font-weight:700;font-size:1cqw}
.dbv-hub{flex:1;position:relative;border:1px solid var(--line);background:var(--panel);border-radius:1cqw;min-height:15cqw}
.dbv-db{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:7cqw;height:7cqw;border-radius:50%/22%;background:linear-gradient(#3ecf8e,#1f9e68);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.6cqw;color:#04110a;box-shadow:0 0 2cqw #3ecf8e55}
.dbv-n{position:absolute;padding:.5cqw 1cqw;border-radius:.6cqw;background:#0e0e10;border:1px solid var(--line);font-weight:700;font-size:1cqw}
.dbv-l{position:absolute;left:50%;top:44%;height:.15cqw;background:linear-gradient(90deg,#3ecf8e,transparent);transform-origin:0 50%}
.dbv-l.a{width:16cqw;transform:rotate(-152deg)}.dbv-l.b{width:16cqw;transform:rotate(-28deg)}.dbv-l.c{width:7cqw;transform:rotate(90deg)}
.st:not(.off) .dbv-l{animation:dbvp 1.6s infinite}
@keyframes dbvp{50%{opacity:.3}}
.dbv-hub small{position:absolute;left:0;right:0;bottom:-2.2cqw;text-align:center;font-size:1cqw;color:var(--sub)}
.dbv-bot{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw;margin-top:1.4cqw}
/* 스킬 비유 v2 */
.ska{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:1.2cqw;min-height:0}
.ska-p{border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1.2cqw 1.4cqw;display:flex;flex-direction:column;justify-content:space-around;gap:1cqw}
.ska-h{font-weight:700;color:var(--lime);font-size:1.2cqw}
.ska-kit{display:flex;gap:1cqw;align-items:stretch}
.ska-man{width:11cqw;padding:.8cqw;border-radius:.5cqw;background:#f4f4f5;color:#111;display:flex;flex-direction:column;gap:.35cqw}
.ska-man b{font-size:1.1cqw}.ska-man i{height:.4cqw;border-radius:1cqw;background:#bbb}.ska-man i:nth-child(3){width:70%}.ska-man small{font-size:.8cqw;color:#444;line-height:1.4}
.ska-parts{flex:1;display:flex;flex-wrap:wrap;gap:.45cqw;align-content:center}
.ska-parts span{padding:.45cqw .8cqw;border-radius:.5cqw;background:#2d5bff33;border:1px solid #2d5bff88;font-size:1cqw;font-weight:700}
.st:not(.off) .ska-parts span{animation:llmpop .4s both}
.ska-parts span:nth-child(2){animation-delay:.08s!important}.ska-parts span:nth-child(3){animation-delay:.16s!important}.ska-parts span:nth-child(4){animation-delay:.24s!important}.ska-parts span:nth-child(5){animation-delay:.32s!important}.ska-parts span:nth-child(6){animation-delay:.4s!important}.ska-parts span:nth-child(7){animation-delay:.48s!important}
.ska-done{display:flex;align-items:center;gap:1.2cqw}.ska-done i{font-style:normal;color:var(--lime);font-size:1.1cqw;font-weight:700}
.ska-chair{width:7cqw;fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round}.ska-chair rect{fill:#d9ff4b18}.ska-chair .cu{fill:#ff5a4e88;stroke:#ff8a80}
.st:not(.off) .ska-chair{animation:skvchair .8s .1s both}
.ska-done small{font-size:1.05cqw;color:var(--sub)}.ska-done small b{color:var(--ink)}
.ska-lv{display:flex;flex-direction:column;gap:.5cqw}
.ska-bar{height:1.1cqw;border-radius:1cqw;background:#ffffff14;overflow:hidden}.ska-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--lime))}
.st:not(.off) .ska-bar i{animation:skvfill 1.1s .1s both}
.ska-lv b{font-size:1.6cqw;color:var(--lime)}
.ska-new{display:flex;align-items:center;gap:1cqw;padding:.8cqw 1cqw;border-radius:.8cqw;background:#0e0e10;border:1px solid var(--line)}
.ska-new small{display:block;font-size:.85cqw;color:var(--sub)}.ska-new b{font-size:1.4cqw}
.ska-fire{width:3.6cqw;height:3.6cqw;border-radius:50%;background:radial-gradient(circle at 50% 60%,#fff3b0,#ffb347 35%,#ff5a4e 65%,transparent 72%)}
.st:not(.off) .ska-fire{animation:skvchair .6s both}
.ska-new kbd,.ska-use kbd{margin-left:auto;padding:.4cqw .9cqw;border-radius:.4cqw;background:#f4f4f5;color:#111;font-weight:800;font-size:1.2cqw;box-shadow:0 .3cqw 0 #999;font-family:inherit}
.ska-use{position:relative;display:flex;align-items:center;gap:1cqw}.ska-use kbd{margin-left:0}
.st:not(.off) .ska-use kbd{animation:skvpress .5s .3s both}
.ska-ring{position:absolute;left:-1cqw;top:50%;width:4.5cqw;height:4.5cqw;margin-top:-2.25cqw;border-radius:50%;border:.2cqw solid #ffb347;opacity:0}
.st:not(.off) .ska-ring{animation:skvring .9s .5s both}
.ska-use span{font-size:1.1cqw;color:var(--sub)}.ska-use b{color:var(--ink)}
.ska-map{display:flex;gap:.8cqw}.ska-map span{flex:1;padding:.7cqw 1cqw;border-radius:.7cqw;background:#d9ff4b14;border:1px solid #d9ff4b55;font-size:1.05cqw}.ska-map b{color:var(--lime)}
/* 스킬 구조 */
.sst{flex:1;display:grid;grid-template-columns:1fr 1.15fr;gap:1.4cqw;align-items:center;min-height:0}
.sst-tree{display:flex;flex-direction:column;gap:.7cqw}.sst-tree .st{display:flex;flex-direction:column;gap:.7cqw}
.sst-f{padding:.8cqw 1cqw;border-radius:.7cqw;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:.2cqw}
.sst-f b{font-family:ui-monospace,Consolas,monospace;font-size:1.25cqw;color:#9ec1ff}.sst-f small{font-size:.95cqw;color:var(--sub)}
.sst-md{border-color:#ffd27a}.sst-md b{color:#ffd27a}
.sst-doc{padding:1.2cqw 1.4cqw;border-radius:.8cqw;background:#f4f4f5;color:#111}
.sst-yaml{display:flex;flex-direction:column;font-family:ui-monospace,Consolas,monospace;font-size:1cqw;color:#666;margin-bottom:.6cqw}
.sst-yaml span:nth-child(2),.sst-yaml span:nth-child(3){color:#111;font-weight:700}
.sst-doc ol{margin:0;padding-left:1.4cqw;font-size:1.1cqw;line-height:1.7}
.st:not(.off) .sst-doc li{animation:llmpop .4s both}.sst-doc li:nth-child(2){animation-delay:.15s!important}.sst-doc li:nth-child(3){animation-delay:.3s!important}
.sst-run{display:flex;align-items:center;gap:.6cqw}.sst-run span{flex:1;text-align:center;padding:.7cqw;border-radius:.6cqw;background:var(--panel);border:1px solid var(--line);font-size:1.05cqw}.sst-run span:first-child{border-color:var(--lime)}.sst-run span:first-child b{color:var(--lime)}.sst-run span:last-child{background:#d9ff4b1c;border-color:var(--lime)}
.sst-run i{font-style:normal;color:var(--lime)}
/* 스킬이 필요한 이유 */
.rpt{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:1.4cqw;min-height:0}
.rpt-chat,.rpt-skill{border:1px solid var(--line);background:var(--panel);border-radius:1cqw;padding:1.2cqw 1.4cqw;display:flex;flex-direction:column;gap:.6cqw}
.rpt-skill{justify-content:center}.rpt-skill .st{display:flex;flex-direction:column;gap:.9cqw;align-items:flex-start}
.rpt-h{font-weight:700;color:var(--lime);font-size:1.15cqw}
.rpt-b{align-self:flex-end;max-width:85%;margin-left:auto;padding:.6cqw 1cqw;border-radius:1cqw 1cqw .2cqw 1cqw;background:#2d5bff;font-size:1.1cqw}
.rpt-chat>.st{display:flex}
.rpt-q{width:100%;padding:.8cqw 1cqw;border-radius:.7cqw;background:#ff5a4e1c;color:var(--sub);font-size:1.15cqw}.rpt-q b{color:var(--red)}
.rpt-one{padding:1cqw 2cqw;border-radius:.8cqw;background:var(--lime);color:#111;font-weight:800;font-size:1.8cqw}
.st:not(.off) .rpt-one{animation:skvpress .5s .2s both}
.rpt-ok{font-size:1.3cqw;color:var(--lime);font-weight:700}.rpt-skill small{font-size:1cqw;color:var(--sub);line-height:1.5}

/* 장면별 시간: 강사 화면에서만, 슬라이드 아래 오른쪽 */
.sl .ft .ft-tm{margin-left:auto;padding:.2cqw .7cqw;border-radius:.5cqw;background:#d9ff4b18;color:#b9d94a;font-size:1cqw}
.sl .ft .ft-tm:empty{display:none}.sl .ft .ft-tm b{color:var(--lime)}
.sl .ft .ft-tm+span{margin-left:1cqw}
body.student .sl .ft .ft-tm{display:none}

/* 시간 남으면: 잠금 */
.sl .lock{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(11,11,12,.86);backdrop-filter:blur(6px)}
.sl .lock>div{display:flex;flex-direction:column;align-items:center;gap:1cqw;text-align:center;max-width:60%}
.sl .lock span{font-size:1.3cqw;font-weight:700;color:var(--yellow)}
.sl .lock b{font-size:2.2cqw;line-height:1.35}
.sl .lock button{margin-top:.6cqw;padding:.9cqw 2.4cqw;border:0;border-radius:.8cqw;background:var(--yellow);color:#111;font-weight:800;font-size:1.3cqw;cursor:pointer}
.sl .lock small{font-size:1cqw;color:var(--sub)}

body.student .kk-end{display:none}

.mstep{display:flex;align-items:center;gap:1cqw}.mstep>.st{display:flex;align-items:center;gap:1cqw}
.mstep .st>div{display:flex;flex-direction:column;gap:.5cqw;padding:1.2cqw;border:1px solid var(--line);border-radius:.9cqw;background:var(--panel)}
.mstep b{font-size:1.1cqw;color:var(--sub)}.mstep span{padding:.5cqw .9cqw;border-radius:.5cqw;background:#2d5bff33;font-size:1.1cqw;font-weight:700}
.mstep small{font-size:.95cqw;color:var(--dim)}.mstep i{font-style:normal;color:var(--lime);font-size:2cqw}
.mstep .mstep-one{border-color:var(--lime)!important}.mstep .mstep-one span{background:var(--lime);color:#111;font-size:1.4cqw}

/* 장 잠금 버튼, 목차 표시 (강사 화면만) */
.lock-btn{padding:.35em .8em;border:1px solid #ffd16666;border-radius:.5em;background:#ffd1661a;color:var(--yellow);font:inherit;font-size:.85em;font-weight:700;cursor:pointer;white-space:nowrap}
body.student .lock-btn{display:none}
#toc button.locked>span:last-child::after{content:' 🔒';color:var(--yellow)}