/* 내장 글꼴 */
@font-face{font-family:'Pretendard Variable';src:url('assets/fonts/PretendardVariable.woff2') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
@font-face{font-family:'Pretendard';src:url('assets/fonts/PretendardVariable.woff2') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
@font-face{font-family:Pretendard;src:url("assets/fonts/PretendardVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
#lessonTimer{width:min(440px,calc(100vw - 28px));padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--bg);color:var(--ink);font-family:inherit}#lessonTimer::backdrop{background:rgba(0,0,0,.45)}#lessonTimer h2{font-size:22px;margin:0 0 8px}#lessonTimer p{font-size:14px;color:var(--sub);line-height:1.6}.lt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lt-row input[type=number]{font:inherit;width:72px;padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}.lt-value{font-size:68px;font-weight:850;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums;margin:20px 0 8px}.lt-status{text-align:center;min-height:24px}.lt-progress{width:100%;height:10px;accent-color:#0573f0;margin:8px 0 22px}.lt-actions{display:flex;gap:8px;justify-content:center}.lt-actions button,.lt-close{border:1px solid var(--line);border-radius:8px;padding:9px 16px;background:var(--panel);color:var(--ink);font:inherit;font-weight:700}#ltStart{background:#0573f0;color:#fff;border-color:#0573f0}.lt-close{float:right;padding:4px 10px;font-size:13px}.lt-settings{display:flex;gap:16px;align-items:center;justify-content:center;font-size:14px}.lt-settings label{display:flex;gap:6px;align-items:center}.lt-running{color:#0573f0!important}.lt-done{color:#d63e43!important}
/* 교안 — 검정 미니멀 테마
   색은 단색만 씁니다(그라데이션·유리 효과 없음). 강조색 하나(라임), 파란 페이지는 PART와 실습 시작에만. */
:root{
  --bg:#ffffff; --panel:#f4f4f6; --line:#ececec; --ink:#1b1d1f; --sub:#5b5f63; --dim:#8c9196;
  --lime:#045fc7; --blue:#0573f0; --red:#e5484d; --green:#178a4a; --yellow:#f5a623;
}
*{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:#fff;color:#1b1d1f;container-type:inline-size;border:1px solid #ececec}
.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:#fff;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:#c8e0fc}.tg.mg{color:#045fc7;border-color:#c8e0fc}.tg.sum{color:var(--green);border-color:#c8e6d2}

/* 대본 */
.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:#dcebfd;color:#1b1d1f}
.notes .flag.chk{background:#ffeede;color:#1b1d1f}

/* 검색 */
.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:#ececec}
.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:#fff}
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:#fff;color:#1b1d1f;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:#5b5f63}
.sl .hd .cp{color:#1b1d1f}
.sl .hd .kind{color:#fff;background:var(--lime);border-radius:99px;padding:.2cqw .9cqw;font-size:1.05cqw}
.sl .hd .kk{color:#3a3d40}
.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:#8c9196}
.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 #c8e0fc;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:#f4f4f6;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:#f4f4f6;border:1px solid #ececec;border-radius:1.1cqw;padding:1.3cqw 1.5cqw;font-size:1.5cqw;line-height:1.45;color:#3a3d40}
.card h3{margin:0 0 .4cqw;font-size:1.9cqw;color:#1b1d1f;letter-spacing:-.01em}
.card h3 img{width:1.9cqw;height:1.9cqw;display:inline-block;vertical-align:-.3cqw;margin-right:.5cqw;filter:none}
.card.c{border-color:#c8e0fc}.card.c h3{color:var(--lime)}
.card small{color:#5b5f63}
.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:#fff;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:#f4f4f6;border:1px solid #ececec;border-radius:1cqw;padding:1cqw 1.3cqw;font-size:1.65cqw}
.steps .it small{display:block;color:#5b5f63;font-size:1.25cqw}
.prompt{position:relative;font-family:ui-monospace,Consolas,"D2Coding",monospace;background:#f0f7fe;border:1px solid #c8e0fc;color:#1b1d1f;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:#fff;font-weight:800;font-size:1cqw;padding:.3cqw .9cqw}
.check{border:1px solid #c8e6d2;background:#e9f5ee;border-radius:1cqw;padding:1cqw 1.4cqw;font-size:1.45cqw;color:#1b1d1f}
.check b{display:block;margin-bottom:.2cqw;color:var(--green)}
.warn{border:1px solid #ffd9b8;background:#ffeede;border-radius:1cqw;padding:1cqw 1.4cqw;font-size:1.45cqw;color:#1b1d1f}
.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:#f4f4f6;border:1px solid #ececec;border-radius:.9cqw;padding:.7cqw 1.1cqw;font-size:1.35cqw;font-weight:700}
.logo img{width:2cqw;height:2cqw;filter:none}
.flow{display:flex;align-items:stretch;gap:.8cqw;width:100%}
.flow .nd{flex:1;background:#f4f4f6;border:1px solid #ececec;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:#5b5f63;font-size:1.3cqw;line-height:1.35}
.flow .nd img{width:2.8cqw;height:2.8cqw;filter:none}
.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:#5b5f63;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 #ececec;text-align:left;vertical-align:middle}
.tbl th{font-size:1.15cqw;color:#5b5f63}
.tbl td img{width:1.9cqw;height:1.9cqw;display:inline-block;vertical-align:middle;margin-right:.5cqw;filter:none}
.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:#8c9196;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:#5b5f63;margin-top:1cqw}
.title .meta2{margin-top:3cqw;font-size:1.5cqw;color:#8c9196}
.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 #c1c5ca}
.tocpg .tr{display:grid;grid-template-columns:5cqw 1fr 13cqw 4cqw;align-items:center;padding:.62cqw .4cqw;border-bottom:1px solid #ececec}
.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:#5b5f63}
.tocpg .tm{font-size:1.2cqw;color:#5b5f63;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:#5b5f63;margin-top:.5cqw;letter-spacing:0}
.sl.theory .th-def{font-size:2.3cqw;line-height:1.5;font-weight:600;color:#3a3d40;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:#fff}
.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 #ececec}
.sl.ana .kind{display:inline-block;background:var(--lime);color:#fff;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:#5b5f63;margin-top:.3cqw}

/* 개념 모션 (llm-motion-graphic 엔진) */
.sl.mg{padding:0}
.sl.mg iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.sl.mg .mgtag{position:absolute;right:2cqw;top:1.6cqw;z-index:2;background:var(--lime);color:#fff;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 #ececec;padding:.9cqw .4cqw}
.sumlist .si i{font-style:normal;flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--lime);color:#fff;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:#5b5f63}
.sl.lab .band .lt{background:var(--lime);color:#fff;border-radius:.6cqw;padding:.4cqw 1.1cqw;font-size:1.35cqw;font-weight:900}
.sl.lab .band .kk{color:#3a3d40}
.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 #c1c5ca;border-radius:.8cqw;font-size:1.2cqw;color:#3a3d40}
.pts b{color:#1b1d1f;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:#ececec;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:#5b5f63;margin-top:1cqw;line-height:1.6}
.brk .nx{margin-top:2cqw;font-size:1.5cqw;border:1px solid #c1c5ca;border-radius:99px;padding:.5cqw 1.6cqw}

/* 실제 서비스 카드 */
.live{display:flex;flex-direction:column;gap:.5cqw;background:#f4f4f6;border:1px solid #ececec;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:#1b1d1f}
.live small{font-size:1.2cqw;color:#5b5f63}
.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:#fff;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:#f4f4f6}
.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:#fff;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:#fff;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:#3a3d40}.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:none}
.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:#3a3d40}
.hwp-files span:last-child{border-color:var(--red);color:#e5484d}
.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:#dcebfd;border:1px solid #c8e0fc;border-radius:99px;padding:.2cqw .7cqw}

/* 예전 개발자 화면 (터미널) */
.term{background:#0c0c0c;border:1px solid #ececec;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 #c1c5ca;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 #c1c5ca;border-radius:.4cqw}
.sh-counter{grid-column:1/4;border:2px solid #c1c5ca;border-radius:.4cqw}
.sh-paint{position:absolute;inset:0;border-radius:1cqw;background:linear-gradient(transparent 0 0),rgba(169,192,255,.08);box-shadow:inset 0 0 0 3px rgba(169,192,255,.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:#fff;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:#c8e6d2}
.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:#c8e0fc}
.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:#3a3d40}.dp-ex b{color:var(--lime)}
.mk-phone{width:13cqw;flex:none;border:2px solid #c1c5ca;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 #c1c5ca;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:#3a3d40}
.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:#045fc7}.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:#ececec}
.chat .ai{align-self:flex-start;background:#dcebfd;border:1px solid #c8e0fc;color:#1b1d1f}

/* 디자인 레퍼런스 */
.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 #c8e0fc;background:#dcebfd;border-radius:.6cqw;padding:.45cqw .7cqw}
.refs .tip b{font-size:1.1cqw;color:var(--lime)}.refs .tip span{font-size:.95cqw;color:#3a3d40}
.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:#fff;font-weight:800;font-size:1.15cqw;padding:.4cqw 1.2cqw}
.timer.run button{background:#ececec;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:#dcebfd;color:#1b1d1f;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:#1b1d1f;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:#1b1d1f;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:#dcebfd;border-color:#dcebfd;color:#1b1d1f}
.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:#fff;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:#3a3d40}
.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(169,192,255,.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 #c1c5ca}
.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:#3a3d40}

/* 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:#045fc7}
.hf em{position:absolute;top:2.5cqw;font-style:normal;font-weight:900;font-size:.85cqw;background:#0573f0;color:#fff;border-radius:.25cqw;padding:0 .3cqw}
.hf span{font-size:.85cqw;color:#3a3d40;text-align:center;word-break:keep-all;line-height:1.25}
.hf.last .ico{color:#e5484d}.hf.last em{background:var(--red)}.hf.last span{color:#e5484d}

/* 배포: 세로 흐름 */
.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:none}
.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:#f4f4f6}
.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:#c8e0fc}
.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:#1b1d1f;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:#ececec}
.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:#fff;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 #c1c5ca;display:grid;place-items:center;font-style:normal;font-size:.9cqw}
.sumroad .done{color:var(--sub)}.sumroad .done i{background:#ececec}
.sumroad .now{color:var(--ink);font-weight:800}.sumroad .now i{background:var(--lime);color:#fff;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:#3a3d40;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:#fff;border-color:var(--lime)}
.dm-end i{font-style:normal;color:var(--lime);font-weight:900}

/* 배포 필요: 사이트 목업 */
.mk-site{border:1px solid #c1c5ca;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:#2cae60}
.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 #ececec;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:#ececec;border:1px solid #c1c5ca}
.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:#e5484d}
.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:#fff;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 #c1c5ca;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:#fff;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 #c1c5ca;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 #c8e0fc;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:#3a3d40}
.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:#3a3d40;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:#fff;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:#dcebfd;border:1px solid #c8e0fc;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:#045fc7}
.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:#ececec;animation:llmfire 1.4s ease-in-out infinite}
@keyframes llmfire{0%,100%{background:#ececec}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:#045fc7}.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 #c8e0fc;background:#dcebfd;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:#fff;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:#3a3d40;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(#1b1d1f08,#1b1d1f12)}
.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:#f4f4f6;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:#a9c0ff22}
.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:#1b1d1f14;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:#fff;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:#fff;border:1px solid var(--line);word-break:break-all;overflow:hidden}
.mdv-in.bin{color:#8c9196;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:#a9c0ff1c;color:var(--lime)}.mdv-t.bad{background:#ff5a4e1c;color:var(--red)}.mdv-t.mid{background:#1b1d1f0d;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:#a9c0ff1c;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:#a9c0ff10;border:1px solid #a9c0ff55}.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:#fff}
.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:#f4f4f6;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:#fff;font-style:normal;font-weight:800;font-size:1.1cqw;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .3cqw #a9c0ff44}
.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:#fff;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:#a9c0ff22;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:#a9c0ff66}
/* 데이터베이스 */
.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:#fff;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:#f4f4f6;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:#a9c0ff18}.ska-chair .cu{fill:#ff5a4e88;stroke:#e5484d}
.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:#1b1d1f14;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:#fff;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:#f4f4f6;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:#a9c0ff14;border:1px solid #a9c0ff55;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:#045fc7}.sst-f small{font-size:.95cqw;color:var(--sub)}
.sst-md{border-color:#ffd27a}.sst-md b{color:#a8660a}
.sst-doc{padding:1.2cqw 1.4cqw;border-radius:.8cqw;background:#f4f4f6;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:#a9c0ff1c;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:#0573f0;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:#fff;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:#a9c0ff18;color:#a9c0ff;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(255,255,255,.88);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:#fff;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)}
.tbl.lg{font-size:1.85cqw}.tbl.lg th{font-size:1.3cqw}.tbl.lg th,.tbl.lg td{padding:1.5cqw 1.4cqw}
/* 다크에서도 파트와 실습 시작은 강조색 */
html[data-theme=dark] .sl.blue{background:var(--blue)!important}
html[data-theme=dark] .sl.blue .go{background:#fff!important;color:var(--blue)!important}
/* 길산 교안 움직임 */
.pm{display:flex;align-items:stretch;gap:.5cqw}.pm-n{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:1cqw;padding:1.2cqw .8cqw;text-align:center;font-weight:800;font-size:1.6cqw;display:flex;align-items:center;justify-content:center;gap:.6cqw}.pm-n.c{border-color:var(--blue);color:var(--lime)}
.pm-w{flex:.32;align-self:center;height:.35cqw;background:var(--line);position:relative;border-radius:9px;overflow:hidden}.pm-w i{position:absolute;top:0;left:-30%;width:30%;height:100%;background:var(--blue);border-radius:9px;animation:pmflow 1.3s linear infinite}
@keyframes pmflow{to{left:100%}}.pm-g{display:inline-block;color:var(--blue);font-size:2.1cqw;animation:pmspin 3s linear infinite}@keyframes pmspin{to{transform:rotate(360deg)}}
.gr{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:.8cqw;padding-top:1.6cqw}.gr-l{position:absolute;left:10%;right:10%;top:2.5cqw;height:.3cqw;background:var(--line)}.gr-l i{display:block;height:100%;background:var(--blue);transform-origin:left;animation:grfill 1.5s ease-out both}@keyframes grfill{from{transform:scaleX(0)}}
.gr-n{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5cqw;text-align:center;animation:grpop .5s var(--d) both}.gr-n u{width:1.9cqw;height:1.9cqw;border-radius:50%;background:var(--bg);border:.3cqw solid var(--blue);text-decoration:none}.gr-n b{font-size:2cqw;font-weight:900;margin-top:.4cqw}.gr-n span{font-size:1.45cqw;font-weight:700;color:var(--sub)}.gr-n.c u{background:var(--blue)}.gr-n.c b,.gr-n.c span{color:var(--lime)}@keyframes grpop{from{opacity:0;transform:translateY(1cqw)}}
.memo{display:flex;flex-direction:column;gap:.7cqw}.memo span{background:var(--panel);border:1px solid var(--line);border-radius:.6cqw;padding:.9cqw 1.1cqw;font-size:1.4cqw;font-weight:700;transform:rotate(var(--r));animation:memodrop .5s var(--d) both}@keyframes memodrop{from{opacity:0;transform:translateY(-1.5cqw) rotate(calc(var(--r)*3))}}
.dlm{position:relative;height:25cqw;width:100%}.dlm .f{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:.5cqw;padding:.5cqw .8cqw;font-size:1.15cqw;font-weight:700;white-space:nowrap;max-width:20cqw;overflow:hidden;text-overflow:ellipsis;transition:transform .9s var(--d) cubic-bezier(.5,0,.2,1),opacity .4s calc(var(--d) + .8s)}.dl-go{position:absolute}.dl-go:not(.off)~.dlm .f{transform:translate(var(--tx),var(--ty)) scale(.45);opacity:0}
.dlf{position:absolute;top:16cqw;width:20cqw;height:8cqw;background:var(--panel);border:.15cqw solid var(--line);border-radius:1cqw;display:flex;align-items:center;justify-content:center;transition:border-color .4s 1.4s,color .4s 1.4s}.dlf i{position:absolute;top:-.9cqw;left:1cqw;width:6cqw;height:1cqw;background:var(--line);border-radius:.4cqw .4cqw 0 0;transition:background .4s 1.4s}.dlf b{font-size:1.65cqw;font-weight:900}.dl-go:not(.off)~.dlm .dlf{border-color:var(--blue);color:var(--lime)}.dl-go:not(.off)~.dlm .dlf i{background:var(--blue)}
.tri{display:grid;grid-template-columns:.8fr 1.6fr;gap:2cqw;align-items:center}.tri-c{background:var(--blue);color:#fff;border-radius:1.2cqw;padding:2.4cqw 1cqw;text-align:center;display:flex;flex-direction:column;gap:.4cqw}.tri-c b{font-size:4.4cqw;font-weight:900;color:#fff}.tri-c small{font-size:1.3cqw;color:#fff}.tri-r{display:flex;flex-direction:column;gap:.8cqw}.tri-r .st>div{display:grid;grid-template-columns:7cqw 1fr;column-gap:1cqw;align-items:center;background:var(--panel);border-radius:1cqw;padding:1cqw 1.2cqw}.tri-r u{grid-row:span 2;text-decoration:none;font-weight:900;font-size:1.5cqw;color:var(--lime)}.tri-r b{font-size:1.7cqw;font-weight:900}.tri-r small{font-size:1.2cqw;color:var(--sub)}.tri-r .c{border:.15cqw solid var(--blue)}
.dbm{display:flex;flex-direction:column;gap:1.2cqw}.dbm-k{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}.dbm-k>div{background:var(--panel);border-radius:.9cqw;padding:.9cqw 1.2cqw;animation:grpop .5s both}.dbm-k>div:nth-child(2){animation-delay:.15s}.dbm-k>div:nth-child(3){animation-delay:.3s}.dbm-k small{display:block;font-size:1.15cqw;color:var(--sub);font-weight:700}.dbm-k b{font-size:2.5cqw;font-weight:900}.dbm-k u{text-decoration:none;font-size:1.2cqw;margin-left:.2cqw}
.dbm-b{display:flex;flex-direction:column;gap:.8cqw}.dbm-b .r{display:grid;grid-template-columns:5cqw 1fr;align-items:center}.dbm-b .r>b{font-size:1.4cqw;font-weight:900}.dbm-b .t{display:flex;flex-direction:column;gap:.25cqw}.dbm-b .t span{display:flex;justify-content:flex-end;align-items:center;height:1.75cqw;width:var(--w);background:var(--blue);border-radius:.3cqw;padding-right:.5cqw;animation:dbgrow 1.1s cubic-bezier(.2,.7,.2,1) both}.dbm-b .t span.n{background:#8fbdf5;animation-delay:.25s}.dbm-b .t span.lo{background:#d93a3f}.dbm-b .t em{font-style:normal;font-size:1.1cqw;font-weight:800;color:#fff}.dbm-b .t span.n em{color:#10233d}.dbm-b .t span.n.lo em{color:#fff}@keyframes dbgrow{from{width:0}}
tr.st{transition:opacity .4s}tr.st.off{transform:none}
@media (prefers-reduced-motion:reduce){.pm-w i,.pm-g{animation:none}}
.tocpg h1{margin-bottom:.5cqw}.tocpg .tr{padding:.3cqw .4cqw}.tocpg .t b{font-size:1.45cqw}.tocpg .t small{font-size:1cqw}.tocpg .n{font-size:1.6cqw}
.tocpg .t{display:flex;align-items:baseline;gap:1cqw}.tocpg .t b{display:inline;white-space:nowrap}.tocpg .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tocpg .tr{padding:.55cqw .4cqw}
.dl-msg{position:absolute;top:5.5cqw;left:0;right:0;text-align:center;font-size:2.7cqw;font-weight:900}.dl-msg em{font-style:normal;color:var(--lime)}
/* 마스터클래스 교안에서 차용: 전환 깜빡임 방지, 세 칸 비교, 권한 메뉴, 시간표 목차 */
.noanim,.noanim *{transition:none!important}
.mk-chat{background:var(--panel);border-radius:1.2cqw;padding:1.4cqw 1.6cqw}
.z3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1cqw;flex:1;min-height:0}
.z3>.st{display:flex;min-width:0}
.zc{flex:1;min-width:0;background:var(--panel);border-radius:1.2cqw;padding:1.2cqw;display:flex;flex-direction:column;gap:.6cqw}
.zc h3{margin:0;font-size:2.1cqw;font-weight:900}
.zc p{margin:0;font-size:1.6cqw}.zc small{font-size:1.25cqw;color:var(--sub)}
.zc.c{background:var(--blue);color:#fff}.zc.c small,.zc.c h3,.zc.c p{color:#fff}
.z3 .win{flex:1;min-height:11cqw;background:var(--bg);color:var(--ink);border-radius:.8cqw;padding:.9cqw;display:flex;flex-direction:column;gap:.55cqw;border:1px solid var(--line)}
.z3 .bb{align-self:flex-end;max-width:92%;background:var(--blue);color:#fff;border-radius:.8cqw;padding:.45cqw .75cqw;font-size:1.25cqw;line-height:1.4}
.z3 .bb.a{align-self:flex-start;background:var(--panel);color:var(--ink)}
.z3 .tree{display:flex;flex-direction:column;gap:.3cqw;font-size:1.25cqw;font-weight:700;margin-top:auto}
.z3 .tree em{font-style:normal;font-weight:700;color:var(--blue);font-size:1.15cqw;margin-left:.3cqw}
.z3 .files{display:flex;gap:.6cqw;margin-top:auto}
.z3 .files span{flex:1;background:var(--panel);border-radius:.6cqw;padding:.7cqw .4cqw;text-align:center;font-size:2.2cqw;display:flex;flex-direction:column;align-items:center;gap:.2cqw}
.z3 .files b{font-size:1.05cqw;font-weight:700}
.z3grow{height:3cqw;background:var(--blue);color:#fff;font-weight:800;font-size:1.25cqw;display:flex;align-items:center;justify-content:center;clip-path:polygon(0 25%,97% 25%,97% 0,100% 50%,97% 100%,97% 75%,0 75%)}
.perm{background:var(--panel);border-radius:1.2cqw;padding:1.3cqw;display:flex;flex-direction:column;gap:.8cqw}
.perm .pmbox{background:var(--bg);border:1px solid var(--line);border-radius:.8cqw;padding:.9cqw 1.1cqw;color:var(--sub);font-size:1.4cqw}
.perm .pmlist{background:var(--bg);border:1px solid var(--line);border-radius:.8cqw;padding:.5cqw;display:flex;flex-direction:column;gap:.3cqw}
.perm .pi{display:grid;grid-template-columns:9.5cqw 1fr;align-items:center;gap:.5cqw;padding:.85cqw .9cqw;border-radius:.6cqw;font-size:1.35cqw}
.perm .pi b{font-size:1.5cqw;font-weight:800}.perm .pi span{color:var(--sub)}
.perm .pi.on{background:var(--blue);color:#fff}.perm .pi.on span,.perm .pi.on b{color:#fff}
.tl1{display:flex;flex-direction:column}
.tl1 .tlr{display:flex;flex-direction:column;gap:.6cqw;flex:1;justify-content:center;margin-top:1cqw}
.tli{display:grid;grid-template-columns:6cqw 2.6cqw 1fr 17cqw 4.5cqw;align-items:center;gap:1cqw;background:var(--panel);border-radius:.9cqw;padding:.75cqw 1.3cqw;font-size:1.5cqw}
.tli .t0{font-weight:800;color:var(--sub)}
.tli i{font-style:normal;width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2cqw}
.tli b{font-weight:800}
.tli em{font-style:normal;font-weight:800;color:var(--blue)}
.tli .pg{color:var(--sub);font-size:1.15cqw;text-align:right}
.tln{margin-top:.8cqw;font-size:1.3cqw;color:var(--sub)}.tln b{color:var(--ink)}
/* 공동 로고, 개념 이미지 */
.cob{display:flex;align-items:center;gap:1cqw;margin-bottom:2.6cqw;position:relative;z-index:1}
.cob img{display:block;object-fit:contain;border-radius:0;margin:0}
.cob img.m{height:2.6cqw;width:auto}
.cob img.gl{height:2.1cqw;width:auto}
.cob .jj{font-size:2.2cqw;font-weight:900;letter-spacing:-.03em;margin-left:-.4cqw}
.cob .x{color:#8c9196;font-size:1.7cqw;font-weight:700}
.cob .eid{font-size:1.9cqw;font-weight:900;letter-spacing:-.02em}
.gl-d{display:none!important}
html[data-theme=dark] .gl-l{display:none!important}
html[data-theme=dark] .gl-d{display:block!important}
.sl.title{position:relative;overflow:hidden}
.title-hero{position:absolute;right:0;top:0;bottom:0;width:48%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
.title-hero img{width:100%;height:100%;object-fit:cover;display:block}
.sl.title h1,.sl.title .sub,.sl.title .meta2,.sl.title .logos{position:relative;z-index:1;max-width:50cqw}
.sl.title h1{font-size:4.9cqw}
.sl.title .sub{font-size:1.75cqw;line-height:1.45}
.pic.ph{background:transparent;min-height:0;flex:none!important;width:100%;aspect-ratio:3/2}
.pic.ph.fill{flex:1!important;aspect-ratio:auto}
.pic.ph img{object-fit:cover;display:block;border-radius:1.2cqw}
.col:has(>.pic.ph),.col:has(>.st>.pic.ph){justify-content:center}
.imrow{display:flex;gap:1.6cqw;align-items:center}
.imrow .pic.ph{flex:0 0 16.5cqw!important;width:16.5cqw}
.imrow .quote{flex:1;margin:0;display:block}
.imrow.big .pic.ph{flex:0 0 26cqw!important;width:26cqw}
.sl .ft .fg{width:2cqw;height:1.5cqw;object-fit:contain;border-radius:0}
.sl .ft .ftx{font-style:normal;margin:0 -.5cqw}
.sl.lab .ft .fg{filter:none}
/* 재구성 20261108: 목차 덩어리, 기준 덱 장면(강사 경험, 학습과 읽기) */
.tl1 .tlr{gap:.45cqw}
.tlg{font-size:1.35cqw;font-weight:900;color:var(--blue);margin:.5cqw 0 0 .3cqw}
.ph-s{display:flex;align-items:center;gap:1cqw;font-weight:900;font-size:3.2cqw;letter-spacing:-.02em}
.ph-s u{text-decoration:none;color:var(--sub);font-weight:300}
.ph-s b{font-weight:900}.ph-s b.c{color:var(--blue)}
.ph-sub{font-size:1.5cqw;font-weight:800}
.brq{margin-top:1.2cqw;text-align:center;font-size:2.3cqw;font-weight:900;line-height:1.4}
.brq em{font-style:normal;color:#0461cc}
html[data-theme=dark] .brq em{color:#8cc2ff}
.rm2{display:grid;grid-template-columns:1fr 1fr;gap:1.3cqw;width:100%}
.rm2>.st{display:flex;min-width:0}
.rmc{flex:1;background:#fff;color:#1b1d1f;border:1px solid #d9dce1;border-radius:1.2cqw;padding:1.4cqw;display:flex;flex-direction:column;gap:.7cqw}
html[data-theme=dark] .rmc{background:#0d0d0d;border-color:#33363b;color:#f4f4f5}
.rmc.c{border:.25cqw solid #0573f0}
.rmc h3{margin:0;font-size:1.9cqw;font-weight:900}
.rmc p{margin:0;font-size:1.4cqw;line-height:1.5}
.rmb{font-size:1.25cqw;font-weight:800;color:#0461cc}
html[data-theme=dark] .rmb{color:#8cc2ff}
/* 새 흐름 20261108b: 와우 표, 끝 체크, 기준 덱 부품 */
.wow{display:grid;grid-template-columns:auto 1fr auto 1.15fr;gap:.8cqw 1cqw;align-items:stretch;width:100%}
.wow>.st{display:flex;min-width:0}
.wh{font-size:1.3cqw;font-weight:900;color:var(--sub);padding:0 .4cqw}.wh.c{color:var(--blue)}
.wl{font-size:1.55cqw;font-weight:900;display:flex;align-items:center;padding-right:.6cqw;white-space:nowrap}
.wo,.wn{flex:1;border-radius:1cqw;padding:1cqw 1.2cqw;font-size:1.4cqw;line-height:1.4;display:flex;align-items:center}
.wo{background:var(--panel);color:var(--sub)}
.wn{background:#fff;border:.2cqw solid var(--blue);color:var(--ink)}.wn b{color:var(--blue)}
html[data-theme=dark] .wn{background:#0d0d0d}
.wa{font-size:2cqw;font-weight:900;color:var(--blue);display:flex;align-items:center}
.st:not(.off) .wo,.st:not(.off) .wn,.st:not(.off) .wa{animation:wowIn .5s both;animation-delay:var(--d,0s)}
@keyframes wowIn{from{opacity:0;transform:translateX(-1.2cqw)}to{opacity:1;transform:none}}
.wtake{display:flex;flex-wrap:wrap;align-items:center;gap:.7cqw;justify-content:center}
.wtake b{font-size:1.6cqw;font-weight:900;margin-right:.4cqw}
.wtake span{background:var(--blue);color:#fff;border-radius:99px;padding:.5cqw 1.2cqw;font-size:1.35cqw;font-weight:800}
.wend{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw}
.wend>.st{display:flex;min-width:0}
.we{flex:1;border:.2cqw solid var(--blue);border-radius:1.2cqw;padding:1.6cqw 1.3cqw;display:flex;flex-direction:column;gap:.6cqw;background:#fff}
html[data-theme=dark] .we{background:#0d0d0d}
.we .ok{width:3.2cqw;height:3.2cqw;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.8cqw;font-weight:900}
.st:not(.off) .we .ok{animation:okPop .45s both .1s}
@keyframes okPop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.we b{font-size:1.75cqw;font-weight:900;line-height:1.3}.we small{font-size:1.3cqw;color:var(--sub);line-height:1.4}
.wtb td,.wtb th{font-size:1.45cqw}
.md4{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw;width:100%}
.md4>div{background:#070b16;color:#fff;border-radius:1.2cqw;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.md4 img{width:100%;aspect-ratio:1/.8;object-fit:cover;display:block}
.md4 .tx{padding:.9cqw 1.1cqw 1.1cqw;display:flex;flex-direction:column;gap:.3cqw}
.md4 b{font-size:1.8cqw;font-weight:900}.md4 b small{font-size:1.2cqw;color:#9ccbff;font-weight:800;margin-left:.5cqw}
.md4 span{font-size:1.32cqw;line-height:1.4;color:#e5ebf7}
.md4 u{text-decoration:none;font-size:1.2cqw;color:#9ccbff;font-weight:800;margin-top:.25cqw}
.md-b{margin-top:1cqw;text-align:center;font-size:1.9cqw;font-weight:900}.md-b em{font-style:normal;color:var(--lime)}
.shot{border:1px solid var(--line,#d9dce1);border-radius:1cqw;overflow:hidden;background:#111;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.shot img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.shot-cap{font-size:1.2cqw;line-height:1.4;color:#5b5f63;margin-top:.4cqw;text-align:center}
html[data-theme=dark] .shot-cap{color:#c5c7ca}
.kit2{display:grid;grid-template-columns:1fr 1fr;gap:.6cqw}
.kit2>div{background:#fff;color:#1b1d1f;border:1px solid #d9dce1;border-radius:.8cqw;padding:.7cqw .9cqw;display:flex;flex-direction:column;gap:.15cqw}
.kit2 img{height:2cqw;width:2cqw;object-fit:contain}
.kit2 b{font-size:1.4cqw;font-weight:900}.kit2 span{font-size:1.1cqw;line-height:1.35}
.kit2 em{font-style:normal;font-size:1.05cqw;font-weight:800;color:#0461cc}
.cn{display:grid;grid-template-columns:.75fr 2.25fr;gap:1.4cqw;width:100%;align-items:center}
.cn-l{display:flex;flex-direction:column;gap:.8cqw}
.cn-cmd{background:var(--blue);color:#fff;border-radius:.9cqw;padding:1cqw;font-size:1.45cqw;font-weight:800;text-align:center}
.cn-r{display:flex;flex-wrap:wrap;gap:.45cqw}.cn-r span{background:var(--panel);border-radius:99px;padding:.3cqw .75cqw;font-size:1.15cqw;font-weight:700}.cn-r em{font-style:normal;color:var(--green)}
.cn-big{font-size:2cqw;font-weight:900;line-height:1.3}.cn-big em{font-style:normal;color:var(--lime)}
.cn-g{display:grid;grid-template-columns:repeat(5,1fr);gap:.6cqw}.cn-g>.st{min-width:0}
.cn-g img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:.6cqw;display:block}
.cn-n{font-size:1.05cqw;color:var(--sub);margin-top:.6cqw}
/* 3차 20261108c: 보고서 페인 포인트 모션 */
.pnm{position:relative;width:100%;height:30cqw}
.pn-w{position:absolute;background:#fff;border:1px solid #c9ccd1;border-radius:.8cqw;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.08);overflow:hidden;color:#1b1d1f}
.pn-bar{background:#1d6f42;color:#fff;font-size:1.05cqw;font-weight:800;padding:.4cqw .8cqw}
.pn-c .pn-bar{background:#5b5f63}
.pn-a{left:0;top:0;width:27cqw}.pn-b{left:17cqw;top:12cqw;width:27cqw}.pn-c{left:33cqw;top:1.5cqw;width:13cqw}
.pn-g{display:grid;grid-template-columns:repeat(4,1fr);font-size:1.1cqw}
.pn-g span{padding:.35cqw .5cqw;border-right:1px solid #eee;border-bottom:1px solid #eee;min-height:1.9cqw}
.pn-g span:nth-child(-n+4){background:#f1f3f5;font-weight:800}
.pn-a .hl{animation:pnHl 4.8s infinite}
.pn-b .fill{animation:pnFill 4.8s infinite}
.pn-calc{padding:.8cqw;font-size:1.15cqw;text-align:right;font-variant-numeric:tabular-nums}.pn-calc b{display:block;font-size:2cqw}
.pn-chip{position:absolute;left:8cqw;top:5cqw;background:#0573f0;color:#fff;border-radius:.6cqw;padding:.3cqw .7cqw;font-size:1.1cqw;font-weight:800;animation:pnMove 4.8s infinite}
.pn-chip2{animation-delay:.6s;background:#e5484d}
.pn-clock{position:absolute;right:1cqw;bottom:.5cqw;display:flex;align-items:center;gap:.6cqw;font-size:1.2cqw;font-weight:800;color:#5b5f63}
.pn-clock i{width:3cqw;height:3cqw;border-radius:50%;border:.25cqw solid #5b5f63;position:relative}
.pn-clock i:after{content:'';position:absolute;left:50%;top:50%;width:.2cqw;height:1.2cqw;background:#e5484d;transform-origin:50% 0;animation:pnSpin 2.4s linear infinite}
@keyframes pnHl{0%,15%{background:transparent}20%,45%{background:#cfe3ff}50%,100%{background:transparent}}
@keyframes pnFill{0%,45%{background:transparent}55%,85%{background:#fff4c2}100%{background:transparent}}
@keyframes pnMove{0%{transform:translate(0,0);opacity:0}15%{opacity:1}45%{transform:translate(12cqw,10cqw);opacity:1}60%{opacity:0}100%{opacity:0}}
@keyframes pnSpin{to{transform:rotate(360deg)}}
.pn-n{border-radius:1.1cqw;background:var(--panel);padding:1cqw 1.4cqw;display:flex;flex-direction:column;gap:.15cqw}
.pn-n small{font-size:1.2cqw;color:var(--sub);font-weight:700}.pn-n b{font-size:2.6cqw;font-weight:900;line-height:1.15}.pn-n u{text-decoration:none;font-size:1.25cqw;color:var(--sub)}
.pn-n.bad b{color:var(--red)}
.pn-n.ok{background:var(--blue)}.pn-n.ok small,.pn-n.ok b{color:#fff}
html[data-theme=dark] .pn-w{border-color:#33363b}
/* 4차 20261108d: 강사 대본 흐름의 모션 장면 */
.g4-sub{font-size:2cqw;font-weight:800;color:var(--sub)}.g4-sub em{font-style:normal;color:var(--blue)}
.g4-big{font-size:5.2cqw;font-weight:900;line-height:1.15;text-align:center}.g4-big em{font-style:normal;color:var(--red)}
@keyframes g4Up{from{opacity:0;transform:translateY(1.6cqw)}to{opacity:1;transform:none}}
@keyframes g4Pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes g4Blink{0%,100%{opacity:.25}50%{opacity:1}}

/* AI 대화 */
.g4-chat{width:62cqw;display:flex;flex-direction:column;gap:1.4cqw}
.g4-chat>.st{display:flex;flex-direction:column;gap:1cqw}
.g4-q{align-self:flex-end;background:var(--blue);color:#fff;border-radius:2cqw 2cqw .4cqw 2cqw;padding:1.3cqw 1.8cqw;font-size:2cqw;font-weight:700}
.g4-ai{display:flex;gap:.5cqw;padding:.4cqw 1cqw}
.g4-dot{width:.9cqw;height:.9cqw;border-radius:50%;background:var(--sub);animation:g4Blink 1s infinite}
.g4-dot:nth-child(2){animation-delay:.2s}.g4-dot:nth-child(3){animation-delay:.4s}
.g4-a{align-self:flex-start;background:var(--panel);border-radius:2cqw 2cqw 2cqw .4cqw;padding:1.3cqw 1.8cqw;font-size:1.9cqw;line-height:1.45;max-width:52cqw}
.st:not(.off) .g4-ai{animation:g4Up .3s both,g4Hide .1s 1.3s forwards}
.st:not(.off) .g4-a{animation:g4Up .5s both 1.4s}
@keyframes g4Hide{to{opacity:0;height:0;padding:0;overflow:hidden}}

/* 코덱스가 할 수 있는 것 */
.g4-can{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2cqw;width:100%;align-self:center}
.g4-can>.st{min-width:0}
.g4-can figure{margin:0;display:flex;flex-direction:column;gap:.7cqw}
.g4-can img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:1.1cqw;display:block;background:var(--panel)}
.g4-can figcaption{font-size:1.65cqw;font-weight:800;line-height:1.3}
.st:not(.off) .g4-can figure,.g4-can .st:not(.off) figure{animation:g4Pop .5s both}

/* 보고서 쌓기 */
.g4-stack{display:flex;flex-direction:column-reverse;gap:.5cqw;width:30cqw}
.g4-stack div{background:var(--panel);border:1px solid var(--line);border-radius:.8cqw;padding:1cqw 1.4cqw;font-size:1.9cqw;font-weight:800;text-align:center;animation:g4Drop .5s both;animation-delay:calc(var(--i)*.35s)}
.g4-stack div:nth-child(odd){transform:rotate(-1.2deg)}.g4-stack div:nth-child(even){transform:rotate(1deg)}
@keyframes g4Drop{from{opacity:0;translate:0 -6cqw}to{opacity:1;translate:0 0}}

/* 한 번에 */
.g4-solve{display:flex;align-items:center;justify-content:center;gap:2cqw;width:100%}
.g4-solve>.st{display:flex;align-items:center;gap:2cqw}
.g4-pile{position:relative;width:18cqw;height:18cqw}
.g4-pile span{position:absolute;left:50%;top:50%;background:var(--panel);border:1px solid var(--line);border-radius:.7cqw;padding:.6cqw 1cqw;font-size:1.5cqw;font-weight:800;white-space:nowrap;transform:translate(-50%,-50%) rotate(calc((var(--i) - 2.5)*9deg)) translateY(calc((var(--i) - 2.5)*1.9cqw))}
.g4-arrow{font-size:4cqw;font-weight:900;color:var(--blue)}
.g4-codex{width:12cqw;height:12cqw;border-radius:2.4cqw;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:2.4cqw;font-weight:900;box-shadow:0 0 0 0 rgba(5,115,240,.5);animation:g4Pulse 1.6s infinite}
@keyframes g4Pulse{0%{box-shadow:0 0 0 0 rgba(5,115,240,.45)}100%{box-shadow:0 0 0 2.4cqw rgba(5,115,240,0)}}
.g4-doc{width:15cqw;height:19cqw;border-radius:1cqw;background:#fff;border:.25cqw solid var(--blue);padding:1.4cqw;display:flex;flex-direction:column;gap:.8cqw;color:#1b1d1f}
html[data-theme=dark] .g4-doc{background:#0d0d0d;color:#f4f4f5}
.g4-doc b{font-size:1.7cqw}.g4-doc i{display:block;height:1cqw;border-radius:99px;background:var(--panel)}.g4-doc i.s{width:60%}
.g4-doc u{margin-top:auto;text-decoration:none;align-self:flex-start;background:var(--blue);color:#fff;border-radius:99px;padding:.3cqw 1cqw;font-size:1.3cqw;font-weight:800}
.st:not(.off) .g4-doc{animation:g4Pop .6s both}
.st:not(.off) .g4-codex{animation:g4Pop .5s both,g4Pulse 1.6s .5s infinite}

/* 손 */
.g4-hand{font-size:14cqw;line-height:1;animation:g4Wave 1.6s ease-in-out infinite;transform-origin:70% 90%}
@keyframes g4Wave{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}50%{transform:rotate(-8deg)}75%{transform:rotate(10deg)}}

/* 앱 확인 */
.g4-app{display:flex;align-items:center;justify-content:center;gap:4cqw;width:100%}
.g4-app>.st{display:flex}
.g4-web,.g4-win{position:relative;display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.g4-web small,.g4-win small{font-size:1.5cqw;font-weight:800;color:var(--sub);order:3}
.g4-web{width:26cqw;opacity:.55}
.g4-bar{width:100%;height:16cqw;border:1px solid var(--line);border-radius:1cqw;background:var(--panel);display:flex;gap:.4cqw;padding:.8cqw;align-items:flex-start}
.g4-bar i{width:.8cqw;height:.8cqw;border-radius:50%;background:#c9ccd1}.g4-bar span{margin-left:.8cqw;font-size:1.2cqw;background:#fff;border-radius:99px;padding:.1cqw 1cqw;color:#5b5f63}
.g4-x{position:absolute;top:5cqw;font-size:6cqw;font-weight:900;color:var(--red)}
.g4-win{width:36cqw}
.g4-win{flex-direction:row;flex-wrap:wrap;height:auto}
.g4-side{width:10cqw;height:20cqw;background:#171717;color:#e5e5e5;border-radius:1cqw 0 0 1cqw;padding:1cqw;display:flex;flex-direction:column;gap:.6cqw;font-size:1.25cqw}
.g4-side b{font-size:1.4cqw;color:#fff}.g4-side span{padding:.3cqw .5cqw;border-radius:.4cqw}
.g4-side span.on{background:var(--blue);color:#fff;font-weight:800;animation:g4Blink2 1.4s infinite}
@keyframes g4Blink2{0%,100%{box-shadow:0 0 0 0 rgba(5,115,240,.6)}50%{box-shadow:0 0 0 .5cqw rgba(5,115,240,0)}}
.g4-main{flex:1;height:20cqw;background:#212121;border-radius:0 1cqw 1cqw 0;display:grid;place-items:center}
.g4-in{background:#303030;color:#bbb;border-radius:99px;padding:.8cqw 2cqw;font-size:1.3cqw}
.g4-win small{width:100%;text-align:center}
.g4-ok{position:absolute;right:-1.5cqw;top:-1.5cqw;width:5cqw;height:5cqw;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:3cqw;font-weight:900}
.st:not(.off) .g4-win{animation:g4Pop .5s both}

/* 아이콘 */
.g4-ic{display:block;width:7cqw;height:7cqw;border-radius:1.6cqw;background:var(--blue) center/60% no-repeat}
.g4-ic-vm{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='3'%3E%3Crect x='10' y='4' width='28' height='40' rx='3'/%3E%3Crect x='15' y='9' width='18' height='16' rx='1'/%3E%3Cpath d='M15 33h18M20 39h8'/%3E%3C/svg%3E")}
.g4-ic-sl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M30 8L18 40'/%3E%3C/svg%3E")}
.g4-ic-web{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='3'%3E%3Crect x='5' y='8' width='38' height='30' rx='3'/%3E%3Cpath d='M5 15h38M12 32v-8M20 32V20M28 32v-6M36 32V18'/%3E%3C/svg%3E")}

/* 세 가지 */
.g4-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;width:100%;align-self:center}
.g4-three>.st{display:flex}
.g4-t3{flex:1;border:1px solid var(--line);border-radius:1.6cqw;padding:2.4cqw 2cqw;display:flex;flex-direction:column;align-items:flex-start;gap:.9cqw;background:var(--bg)}
.g4-t3 b{font-size:3.2cqw;font-weight:900}.g4-t3 span:not(.g4-ic){font-size:1.8cqw;font-weight:700;line-height:1.35}
.g4-t3 u{text-decoration:none;font-size:1.4cqw;color:var(--blue);font-weight:800}
.st:not(.off) .g4-t3{animation:g4Up .5s both}

/* 시연 */
.g4-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;width:100%;align-self:center}
.g4-demo>*{border:1px solid var(--line);border-radius:1.6cqw;padding:2.6cqw 2cqw;display:flex;flex-direction:column;align-items:center;gap:1cqw;text-decoration:none;color:inherit;text-align:center}
.g4-demo b{font-size:2.2cqw;font-weight:900}.g4-demo small{font-size:1.4cqw;color:var(--sub);font-weight:700}
.g4-demo a{border:.25cqw solid var(--blue)}.g4-demo a small{color:var(--blue)}

/* 자판기 */
.g4-vmwrap{display:flex;align-items:center;justify-content:center;gap:3cqw;width:100%;height:24cqw;position:relative}
.g4-vm{width:16cqw;height:24cqw;border-radius:1.4cqw;background:#1b1d1f;padding:1cqw;display:flex;flex-direction:column;gap:.8cqw;color:#fff;flex:none}
.g4-vm-top{font-size:1.15cqw;font-weight:800;text-align:center;word-break:keep-all}.g4-vm-top b{color:#8cc2ff}
.g4-vm-win{flex:1;background:#2b2f35;border-radius:.6cqw;display:grid;grid-template-columns:1fr 1fr;gap:.5cqw;padding:.6cqw}
.g4-vm-win i{background:#3c424a;border-radius:.3cqw}
.g4-vm-slot{height:2.4cqw;background:#000;border-radius:.4cqw}
.g4-xl,.g4-out{width:12cqw;padding:1.2cqw;border-radius:.9cqw;font-size:1.5cqw;font-weight:800;text-align:center;line-height:1.3;flex:none}
.g4-xl{background:#1d6f42;color:#fff;animation:g4In 3.2s infinite}
.g4-out{background:#fff;border:.25cqw solid var(--blue);color:#1b1d1f;animation:g4Out 3.2s infinite}
html[data-theme=dark] .g4-out{background:#0d0d0d;color:#f4f4f5}
@keyframes g4In{0%{opacity:0;transform:translateX(-4cqw)}20%{opacity:1;transform:none}45%{opacity:1;transform:translateX(9cqw) scale(.5)}55%,100%{opacity:0;transform:translateX(9cqw) scale(.3)}}
@keyframes g4Out{0%,50%{opacity:0;transform:translateX(-9cqw) scale(.4)}75%,100%{opacity:1;transform:none}}
.g4-vm-win i{animation:g4Blink 1.6s infinite}.g4-vm-win i:nth-child(2){animation-delay:.3s}.g4-vm-win i:nth-child(3){animation-delay:.6s}

/* 폴더 흐름 */
.g4-fold{display:flex;align-items:center;gap:.8cqw}
.g4-fold>i{font-style:normal;font-size:2.4cqw;font-weight:900;color:var(--blue)}
.g4-fold>div{flex:1;border:1px solid var(--line);border-radius:1.1cqw;padding:1.4cqw .8cqw;display:flex;flex-direction:column;align-items:center;gap:.4cqw;text-align:center;animation:g4Up .5s both;animation-delay:calc(var(--i)*.4s)}
.g4-fold>div.c{border:.25cqw solid var(--blue)}
.g4-fold span{font-size:3.2cqw}.g4-fold b{font-size:1.45cqw;font-weight:900;word-break:keep-all}.g4-fold small{font-size:1.2cqw;color:var(--sub)}

/* 자판기의 한계 */
.g4-limit{display:flex;align-items:center;justify-content:center;gap:3cqw;width:100%}
.g4-limit>.st{display:flex}
.g4-vm.sm{width:12cqw;height:18cqw}
.g4-ask{background:var(--panel);border-radius:1.6cqw;padding:1.6cqw 2cqw;font-size:2cqw;font-weight:800;line-height:1.45;position:relative}
.g4-ask:before{content:'?';position:absolute;right:-1.2cqw;top:-1.6cqw;width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:2.2cqw}
.g4-skillbox{border:.3cqw solid var(--blue);border-radius:1.6cqw;padding:1.6cqw 2cqw;display:flex;flex-direction:column;gap:.5cqw}
.g4-skillbox b{font-size:2.6cqw;color:var(--blue)}.g4-skillbox span{font-size:1.6cqw;font-weight:700}
.st:not(.off) .g4-ask,.st:not(.off) .g4-skillbox{animation:g4Pop .5s both}

/* 부르는 법 */
.g4-cmd{width:52cqw;border:.2cqw solid var(--line);border-radius:1.6cqw;padding:1.6cqw 2cqw;font-size:2.6cqw;font-weight:800;position:relative;background:var(--bg)}
.g4-type:before{content:'';animation:g4Type 6s steps(1) infinite}
.g4-type:after{content:'|';color:var(--blue);animation:g4Blink .8s infinite}
@keyframes g4Type{0%{content:''}6%{content:'/'}12%{content:'/보'}18%{content:'/보고'}24%{content:'/보고서작성'}50%{content:''}56%{content:'$'}62%{content:'$보'}68%{content:'$보고'}74%,100%{content:'$보고서작성'}}
.g4-pop{position:absolute;left:2cqw;top:100%;margin-top:.6cqw;width:24cqw;border:1px solid var(--line);border-radius:1cqw;background:var(--bg);box-shadow:0 1cqw 2cqw rgba(0,0,0,.1);overflow:hidden;animation:g4PopL 6s infinite}
.g4-pop div{font-size:1.5cqw;font-weight:700;padding:.7cqw 1.2cqw}.g4-pop div:first-child{background:var(--blue);color:#fff}
@keyframes g4PopL{0%,5%{opacity:0}8%,46%{opacity:1}50%,55%{opacity:0}58%,96%{opacity:1}100%{opacity:0}}

/* 인터넷 끄면 */
.g4-wifi{display:flex;flex-direction:column;align-items:center;gap:2cqw;width:100%}
.g4-wf{display:flex;align-items:center;gap:1.4cqw;font-size:2.4cqw}
.g4-wf span{width:6cqw;height:3.2cqw;border-radius:99px;background:var(--green);position:relative;transition:background .4s}
.g4-wf span:after{content:'';position:absolute;top:.4cqw;left:3.2cqw;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#fff;transition:left .4s}
.st:not(.off) .g4-wf span{animation:g4Off .6s .4s forwards}.st:not(.off) .g4-wf span:after{animation:g4OffK .6s .4s forwards}
@keyframes g4Off{to{background:#9aa0a6}}@keyframes g4OffK{to{left:.4cqw}}
.g4-vs{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;width:80%}
.g4-vs>.st{display:flex}
.g4-ok2,.g4-no{flex:1;border-radius:1.6cqw;padding:2cqw;display:flex;flex-direction:column;gap:.6cqw}
.g4-ok2{border:.3cqw solid var(--green)}.g4-no{border:.3cqw solid #9aa0a6;background:var(--panel)}
.g4-ok2 b,.g4-no b{font-size:2.8cqw;font-weight:900}.g4-ok2 span{font-size:2cqw;font-weight:800;color:var(--green)}.g4-no span{font-size:2cqw;font-weight:800;color:var(--red)}
.g4-ok2 small,.g4-no small{font-size:1.4cqw;color:var(--sub);font-weight:700}

/* 웹페이지 층 */
.g4-layers{display:flex;align-items:center;justify-content:center;gap:3cqw;width:100%}
.g4-pg{width:34cqw;height:24cqw;border:1px solid var(--line);border-radius:1.2cqw;padding:1.4cqw;display:flex;flex-direction:column;gap:1cqw}
.g4-pg-h{height:2.2cqw;width:40%;border-radius:.4cqw;background:var(--panel);animation:g4Css 6s infinite}
.g4-pg-k{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}.g4-pg-k i{height:4cqw;border-radius:.6cqw;background:var(--panel);animation:g4Css 6s infinite}
.g4-pg-b{flex:1;display:flex;align-items:flex-end;gap:1.2cqw;padding:0 1cqw;border-bottom:1px solid var(--line)}
.g4-pg-b i{flex:1;border-radius:.4cqw .4cqw 0 0;background:#d9dce1;height:var(--h);animation:g4Bar 6s infinite;transform-origin:bottom}
@keyframes g4Css{0%,30%{background:var(--panel);outline:1px dashed #b0b4ba}35%,100%{background:#cfe3ff;outline:0}}
@keyframes g4Bar{0%,30%{background:#d9dce1;transform:scaleY(1)}35%{background:var(--blue);transform:scaleY(1)}60%{transform:scaleY(.2)}75%,100%{background:var(--blue);transform:scaleY(1)}}
.g4-lab{display:flex;flex-direction:column;gap:1.2cqw}
.g4-lab div{display:flex;align-items:baseline;gap:1cqw}.g4-lab b{font-size:2.6cqw;font-weight:900;width:15cqw}.g4-lab span{font-size:2cqw;font-weight:800;color:var(--blue)}
.st:not(.off) .g4-lab div{animation:g4Up .4s both}

/* 캡처 두 장 */
.g4-shots{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;width:100%;align-self:center}
.g4-shots figure{margin:0;display:flex;flex-direction:column;gap:.6cqw}
.g4-shots img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:1cqw;border:1px solid var(--line);display:block}
.g4-shots figcaption{font-size:1.6cqw;font-weight:800}

/* 배포 구분 */
.g4-dp{display:flex;flex-direction:column;gap:1.6cqw;width:100%;align-self:center}
.g4-dp>.st{display:flex}
.g4-dp-y,.g4-dp-n{flex:1;display:flex;align-items:center;gap:1.4cqw;border-radius:1.6cqw;padding:1.6cqw 2cqw}
.g4-dp-y{border:.3cqw solid var(--blue)}.g4-dp-n{background:var(--panel)}
.g4-dp-y>i,.g4-dp-n>i{font-style:normal;font-size:2.4cqw;font-weight:900;color:var(--blue)}
.g4-dp-f{border:1px solid var(--line);background:var(--bg);border-radius:.8cqw;padding:.8cqw 1.2cqw;font-size:1.6cqw;font-weight:800}
.g4-dp-l{background:var(--blue);color:#fff;border-radius:99px;padding:.6cqw 1.4cqw;font-size:1.6cqw;font-weight:800}
.g4-dp-pc{font-size:1.8cqw;font-weight:800}
.g4-dp-d{display:flex;gap:.6cqw}.g4-dp-d span{border:1px solid var(--line);border-radius:.6cqw;padding:.5cqw .9cqw;font-size:1.35cqw;font-weight:700;animation:g4Up .4s both}
.g4-dp-d span:nth-child(2){animation-delay:.2s}.g4-dp-d span:nth-child(3){animation-delay:.4s}
.g4-dp-y b,.g4-dp-n b{margin-left:auto;font-size:2.2cqw;font-weight:900}.g4-dp-y b{color:var(--blue)}

/* 시간 */
.g4-hours{display:flex;align-items:center;gap:3cqw}
.g4-hours s{font-size:4cqw;font-weight:800;color:var(--sub)}
.g4-hours b{font-size:8cqw;font-weight:900;color:var(--blue);animation:g4Pop .6s both .4s}
.g4-cmd{margin-bottom:10cqw}
.g4-fold{background:#fff;color:#1b1d1f;padding:1.4cqw;border-radius:1.2cqw}
.g4-fold>div{border-color:#d9dce1}
.g4-fold small{color:#5b5f63}
html[data-theme=dark] .g4-fold{background:#0d0d0d;color:#f4f4f5}

/* 기준 덱에서 가져온 부품 */
/* 플러그인 상자 */
.pkbox{border:.2cqw solid var(--blue);border-radius:1.4cqw;padding:1.5cqw;display:flex;flex-direction:column;gap:1.2cqw;background:rgba(5,115,240,.06)}
/* 챗봇과 에이전트 */
.cv2{display:grid;grid-template-columns:1fr 1fr;gap:1.3cqw;flex:1;min-height:0;margin-top:1cqw}
.cv2>.st{display:flex;min-width:0}
.cvp{flex:1;background:var(--panel);border-radius:1.2cqw;padding:1.2cqw 1.4cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw;align-items:stretch}
.cvp.ag{outline:.18cqw solid var(--blue);outline-offset:-.18cqw}
.cvp h3{margin:0;font-size:1.9cqw;font-weight:900;grid-column:1/-1}
.cvp .win{min-height:0}
.cvp .txt{font-size:1.45cqw;line-height:1.45;align-self:center}
.cvp .bb{font-size:1.2cqw}
.ftr{display:flex;flex-direction:column;gap:.4cqw;font-size:1.2cqw;font-weight:700}
.ftr span{display:flex;justify-content:space-between;gap:.4cqw}
.ftr em{font-style:normal;color:var(--green);font-weight:800}
.ju{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#101323;z-index:3}
.ju-s{position:absolute;width:130cqw;height:130cqw;border-radius:50%;background:repeating-conic-gradient(#1c2350 0 15deg,#2e3a80 15deg 30deg);animation:juS 7s linear infinite;opacity:.75}
.ju-t{position:relative;text-align:center;color:#fff;display:flex;flex-direction:column;gap:.6cqw;text-shadow:0 .2cqw 1cqw rgba(0,0,0,.7)}
.ju-t p{margin:0;font-size:3.2cqw;font-weight:800}
.ju-t p.big{font-size:5cqw;font-weight:900;color:#ffe08a}
.ju-t p.snap{font-size:3.6cqw;font-weight:900;margin-top:1cqw}
@keyframes juS{to{transform:rotate(360deg)}}
/* 5차 20261108e: 파트별 색 (exe 파랑, 스킬 보라, 대시보드 주황) */
.stage[data-ch="4"]{--blue:#6d4aff;--lime:#5b3ce0}
.stage[data-ch="5"]{--blue:#e8590c;--lime:#d24d06}
html[data-theme=dark] .stage[data-ch="4"]{--blue:#8b6dff;--lime:#a48dff}
html[data-theme=dark] .stage[data-ch="5"]{--blue:#ff7a2e;--lime:#ff9a5c}
.stage[data-ch="4"] .steps .num{background:#6d4aff!important}
.stage[data-ch="5"] .steps .num{background:#e8590c!important}
.g5-b{--c:#0573f0}.g5-v{--c:#6d4aff}.g5-o{--c:#e8590c}

/* 혼자, AI, 코덱스 */
.g5-race{display:flex;flex-direction:column;gap:2.2cqw;width:100%;align-self:center}
.g5-race>.st{display:block}
.g5-lane{display:grid;grid-template-columns:13cqw 1fr 9cqw;align-items:center;gap:1.6cqw}
.g5-lane>b{font-size:2.2cqw;font-weight:900}
.g5-track{position:relative;height:5cqw;border-radius:1cqw;background:var(--panel);overflow:hidden}
.g5-track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:1cqw}
.st:not(.off) .g5-track i{animation:g5Grow 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes g5Grow{to{width:var(--w)}}
.g5-track small{position:absolute;left:1.4cqw;top:50%;transform:translateY(-50%);font-size:1.4cqw;font-weight:800;color:#1b1d1f;white-space:nowrap;z-index:1;mix-blend-mode:normal}
.g5-rr{background:#ffb3b3}.g5-yy{background:#ffe08a}.g5-bb{background:#9ccbff}
.g5-lane em{font-style:normal;font-size:3.4cqw;font-weight:900;text-align:right}
.g5-rrt{color:var(--red)}.g5-yyt{color:#9a6200}.g5-bbt{color:var(--blue)}
.st:not(.off) .g5-lane em{animation:g4Pop .5s both .9s}

/* 오늘 배울 것 */
.g5-road{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqw;position:relative}
.g5-road>.st{display:flex}
.g5-stop{flex:1;border:.3cqw solid var(--c);border-radius:1.6cqw;padding:2cqw 1.6cqw;display:flex;flex-direction:column;gap:.8cqw}
.g5-stop span{width:4cqw;height:4cqw;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:2cqw;font-weight:900}
.g5-stop b{font-size:2.4cqw;font-weight:900;color:var(--c)}.g5-stop small{font-size:1.5cqw;font-weight:700;color:var(--sub)}
.st:not(.off) .g5-stop{animation:g4Up .5s both}
.g5-hand{display:flex;align-items:center;justify-content:center;gap:1.4cqw;font-size:2.2cqw;font-weight:900}
.g5-hand i{font-style:normal;font-size:4.6cqw;animation:g4Wave 1.6s ease-in-out infinite;transform-origin:70% 90%}

/* 원데이터 표 */
.g5-xl{border:1px solid #c9ccd1;border-radius:1cqw;overflow:hidden;background:#fff;color:#1b1d1f;width:100%}
.g5-xlbar{background:#1d6f42;color:#fff;font-size:1.3cqw;font-weight:800;padding:.6cqw 1.2cqw}
.g5-xl table{width:100%;border-collapse:collapse;font-size:1.35cqw}
.g5-xl th{background:#f1f3f5;font-weight:800;text-align:left}
.g5-xl th,.g5-xl td{border:1px solid #e5e7ea;padding:.55cqw .8cqw;white-space:nowrap}
.g5-xl tr td:nth-child(n+4):nth-child(-n+7){text-align:right;font-variant-numeric:tabular-nums}
.g5-xl tr:nth-child(2) td,.g5-xl tr:nth-child(3) td{background:#eef5ff}
.g5-tags{display:flex;gap:1cqw;justify-content:center}.g5-tags span{background:var(--blue);color:#fff;border-radius:99px;padding:.5cqw 1.4cqw;font-size:1.5cqw;font-weight:800}

/* 보고서 양식 */
.g5-form{width:100%;border:1px solid #c9ccd1;border-radius:1cqw;background:#fff;color:#1b1d1f;padding:1.4cqw 1.6cqw;display:flex;flex-direction:column;gap:.8cqw}
.g5-fh{display:flex;justify-content:space-between;align-items:center}.g5-fh>b{font-size:2.2cqw;font-weight:900}
.g5-sign{display:grid;grid-template-columns:repeat(3,5.5cqw);border:1px solid #9aa0a6}
.g5-sign span{font-size:1.1cqw;text-align:center;border-right:1px solid #9aa0a6;border-bottom:1px solid #9aa0a6;padding:.2cqw}
.g5-sign i{height:2.6cqw;border-right:1px solid #9aa0a6}
.g5-sign span:nth-child(3),.g5-sign i:last-child{border-right:0}
.g5-fd{font-size:1.4cqw;font-weight:700}.g5-fd em{font-style:normal;color:var(--blue);font-weight:900}
.g5-form table{width:100%;border-collapse:collapse;font-size:1.35cqw}
.g5-form th{background:#0b1826;color:#fff;font-weight:800;padding:.6cqw}
.g5-form td{border:1px solid #e5e7ea;padding:.55cqw .7cqw;text-align:center;height:2.6cqw}
.g5-form td:first-child{font-weight:800}
.g5-form tr.sum td{background:#f1f3f5;font-weight:900}
.g5-form .lo{color:var(--red);font-weight:900}
.g5-form td .st:not(.off) span{animation:g5Fill .5s both}
@keyframes g5Fill{from{background:#fff4c2}to{background:transparent}}

/* 내려받기 */
.g5-dl{display:flex;flex-direction:column;gap:.8cqw;background:#fff;border-radius:1.2cqw;padding:1.4cqw;color:#1b1d1f}
.g5-dl a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2cqw 1cqw;border:1px solid #d9dce1;border-radius:.9cqw;padding:.9cqw 1.2cqw;text-decoration:none;color:inherit}
.g5-dl a b{font-size:1.5cqw}.g5-dl a small{grid-column:1;font-size:1.2cqw;color:#5b5f63}
.g5-dl a span{grid-row:1/3;grid-column:2;font-size:1.4cqw;font-weight:900;color:#0573f0}
.g5-dl a.all{background:#0573f0;color:#fff;border-color:#0573f0}.g5-dl a.all span{color:#fff}
html[data-theme=dark] .g5-dl{background:#0d0d0d;color:#f4f4f5}

/* exe의 한계 */
.g5-lim{display:flex;align-items:center;justify-content:center;gap:3cqw;width:100%}
.g5-lim>.st{display:flex}
.g5-lcol{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.g5-out{background:var(--panel);border-radius:.8cqw;padding:.6cqw 1.2cqw;font-size:1.5cqw;font-weight:800}
.g5-q{display:flex;flex-direction:column;gap:.7cqw;background:var(--panel);border-radius:1.6cqw;padding:1.8cqw 2.2cqw}
.g5-q span{font-size:1.4cqw;color:var(--sub);font-weight:800}.g5-q b{font-size:2.1cqw;font-weight:900}
.g5-ai{display:flex;flex-direction:column;align-items:flex-start;gap:.7cqw;border:.3cqw solid var(--blue);border-radius:1.6cqw;padding:1.8cqw 2.2cqw}
.g5-ai i{font-style:normal;background:var(--blue);color:#fff;border-radius:.8cqw;padding:.4cqw 1cqw;font-weight:900;font-size:1.6cqw}
.g5-ai b{font-size:2cqw;font-weight:900}.g5-ai span{font-size:2.4cqw;font-weight:900}.g5-ai em{font-style:normal;color:var(--blue)}
.st:not(.off) .g5-q,.st:not(.off) .g5-ai{animation:g4Pop .5s both}

/* 대시보드 모습 */
.g5-dash{width:100%;border:1px solid var(--line);border-radius:1.4cqw;padding:1.6cqw 2cqw;display:flex;flex-direction:column;gap:1.2cqw;background:var(--bg)}
.g5-dash>.st{display:flex;flex-direction:column;gap:1.2cqw}
.g5-dh{display:flex;align-items:center;gap:1.2cqw}.g5-dh img{height:2.6cqw}.g5-dh span{font-size:2cqw;font-weight:900}.g5-dh small{margin-left:auto;font-size:1.3cqw;color:var(--sub)}
.g5-drop{border:.2cqw dashed #b0b4ba;border-radius:1cqw;padding:1cqw;display:flex;align-items:center;justify-content:center;gap:1.4cqw;font-size:1.4cqw;color:var(--sub);position:relative;min-height:4.4cqw}
.g5-drop>.st{display:flex}
.g5-file{background:#1d6f42;color:#fff;border-radius:.7cqw;padding:.5cqw 1cqw;font-size:1.3cqw;font-weight:800}
.st:not(.off) .g5-file{animation:g5DropIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes g5DropIn{from{opacity:0;transform:translate(10cqw,-4cqw) rotate(-8deg)}to{opacity:1;transform:none}}
.g5-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}
.g5-kpi div{border-radius:1cqw;background:#0b1826;color:#fff;padding:1cqw 1.4cqw}
.g5-kpi small{font-size:1.2cqw;opacity:.75}.g5-kpi b{display:block;font-size:2.8cqw;font-weight:900}
.st:not(.off) .g5-kpi div{animation:g4Up .5s both}.st:not(.off) .g5-kpi div:nth-child(2){animation-delay:.15s}.st:not(.off) .g5-kpi div:nth-child(3){animation-delay:.3s}
.g5-bars{display:flex;flex-direction:column;gap:.6cqw}
.g5-bars div{display:grid;grid-template-columns:5cqw 1fr 6cqw;align-items:center;gap:1cqw}
.g5-bars b{font-size:1.4cqw}.g5-bars em{font-style:normal;font-size:1.4cqw;font-weight:900;text-align:right}
.g5-bars i{height:1.6cqw;border-radius:.4cqw;background:#0b1826;width:0}
.g5-bars i.lo{background:#e03131}
.st:not(.off) .g5-bars i{animation:g5Grow 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
html[data-theme=dark] .g5-bars i:not(.lo){background:#8ea9c4}
.g5-down{display:flex;align-items:center;gap:1.4cqw}
.g5-down span{background:#e03131;color:#fff;border-radius:99px;padding:.6cqw 1.6cqw;font-size:1.5cqw;font-weight:900;animation:g4Pulse 1.6s infinite}
.g5-down small{font-size:1.3cqw;color:var(--green);font-weight:800}

/* 로컬 주소 보내기 */
.g5-local{display:flex;align-items:center;justify-content:center;gap:2cqw;width:100%;flex-wrap:wrap}
.g5-local>.st{display:flex;align-items:center;gap:2cqw}
.g5-me,.g5-you,.g5-naver{display:flex;flex-direction:column;align-items:center;gap:.8cqw;border:1px solid var(--line);border-radius:1.4cqw;padding:2cqw 1.8cqw;min-width:14cqw}
.g5-url{font-size:1.35cqw;font-weight:800;background:var(--panel);border-radius:99px;padding:.5cqw 1.2cqw;white-space:nowrap}
.g5-me small,.g5-you small,.g5-naver small{font-size:1.3cqw;color:var(--sub);font-weight:700}
.g5-send{font-style:normal;font-size:3.4cqw;font-weight:900;color:var(--blue)}
.g5-you b{font-size:4.4cqw;color:var(--red)}.g5-you span{font-size:1.8cqw;font-weight:900;color:var(--red)}
.g5-naver b{font-size:4.4cqw;color:var(--green)}
.st:not(.off) .g5-you,.st:not(.off) .g5-naver{animation:g4Pop .5s both}
.g5-small .prompt{font-size:1.12cqw!important;line-height:1.42!important;padding:1cqw 1.3cqw!important}
/* 프롬프트 라벨은 파트 색 글자, 배경 없음 */
.stage[data-ch="4"] .prompt .lb{color:#5b3ce0!important;background:none!important}
.stage[data-ch="5"] .prompt .lb{color:#c2410c!important;background:none!important}
html[data-theme=dark] .stage[data-ch="4"] .prompt .lb{color:#b9a6ff!important}
html[data-theme=dark] .stage[data-ch="5"] .prompt .lb{color:#ffa36b!important}
/* 꼬리말 AI쭌 심볼: 흰 실루엣 처리 안 함 */
.ft img.sym{width:1.7cqw;height:1.7cqw;border-radius:.35cqw;filter:none!important}
/* 만족도 QR */
.g5-qr{display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.g5-qr img{width:17cqw;height:17cqw;border-radius:1cqw;background:#fff;padding:.6cqw;border:1px solid var(--line)}
.g5-qr b{font-size:1.7cqw;font-weight:900}.g5-qr small{font-size:1.15cqw;color:var(--sub)}
/* 대비 보정 */
.sl.lab .warn{background:#fff;color:#1b1d1f;border-color:#ffd8a8}
html[data-theme=dark] .sl.lab .warn{background:#0d0d0d;color:#f4f4f5}
.stage[data-ch="5"] .sl.blue{background:#c2410c!important}
.stage[data-ch="4"] .sl.blue{background:#5b3ce0!important}
.stage[data-ch="4"] .sl.blue .pn,.stage[data-ch="5"] .sl.blue .pn{color:#fff}
.stage[data-ch="4"] .sl.blue .pcols *,.stage[data-ch="5"] .sl.blue .pcols *{color:#fff}
.sl.lab .warn b{color:#c2410c}
html[data-theme=dark] .sl.lab .warn b{color:#ffa36b}
html[data-theme=dark] .stage[data-ch="5"] .sl.blue{background:#c2410c!important}
html[data-theme=dark] .stage[data-ch="4"] .sl.blue{background:#5b3ce0!important}
.stage[data-ch="5"] .g4-dp-l{background:#c2410c}
.g4-ok{background:#2b8a3e}
html[data-theme=dark] .g5-rr{background:#8a2f2f}html[data-theme=dark] .g5-yy{background:#7a5a00}html[data-theme=dark] .g5-bb{background:#1c4f8a}
html[data-theme=dark] .g5-track small{color:#f4f4f5}
/* 2쪽 강사 소개 (2026-11-09) */
.g5-ins{display:grid;grid-template-columns:24cqw 1fr;gap:3cqw;width:100%;align-items:center}
.g5-ins>img{width:100%;height:34cqw;object-fit:cover;object-position:top;border-radius:1.4cqw;display:block}
.g5-ins-r{display:flex;flex-direction:column;gap:1.1cqw;min-width:0}
.g5-ins-h{display:flex;align-items:baseline;gap:1.4cqw}
.g5-ins-h b{font-size:3cqw;font-weight:900}
.g5-ins-h span{font-size:1.5cqw;font-weight:800;color:#0573f0}
.g5-ins-k{font-size:1.35cqw;font-weight:800;color:var(--sub)}
.g5-orgs{display:grid;grid-template-columns:repeat(5,1fr);gap:.8cqw}
.g5-orgs div{background:#f1f5fb;border-radius:1cqw;padding:1.1cqw .9cqw;display:flex;flex-direction:column;gap:.5cqw}
.g5-orgs b{font-size:1.75cqw;font-weight:900;color:#1b1d1f}
.g5-orgs span{font-size:1.15cqw;line-height:1.4;color:#3a3f45}
.g5-ins-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5cqw;font-size:1.35cqw;line-height:1.35}
.g5-ins-l li{display:grid;grid-template-columns:3.6cqw 1fr;gap:.4cqw}
.g5-ins-l i{font-style:normal;color:var(--sub);font-weight:700}
.g5-ins .pf-btn{align-self:flex-start}
html[data-theme=dark] .g5-orgs div{background:#1f2630}
html[data-theme=dark] .g5-orgs b{color:#f4f4f5}
html[data-theme=dark] .g5-orgs span{color:#c9ced6}
html[data-theme=dark] .g5-ins-h span{color:#5aa2ff}
.g5-orgs b{white-space:nowrap;font-size:1.6cqw}
.g5-orgs span{word-break:keep-all}

/* 6차 (2026-11-09) */
.twt{background:#fff;color:#0f1419;border:1px solid var(--line);border-radius:1.3cqw;padding:1.7cqw 1.9cqw;display:flex;flex-direction:column;gap:1cqw;box-shadow:0 .4cqw 1.6cqw rgba(0,0,0,.08)}
.tw-h{display:grid;grid-template-columns:4cqw 1fr 2cqw;gap:.9cqw;align-items:center}
.tw-a{width:4cqw;height:4cqw;border-radius:50%;background:linear-gradient(135deg,#3f4a5a,#0f1419);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.4cqw}
.tw-h b{display:block;font-size:1.45cqw;font-weight:800}.tw-h small{color:#536471;font-size:1.15cqw}
.tw-h img{width:1.7cqw;height:1.7cqw}
.tw-q{font-size:2.05cqw;line-height:1.35;font-weight:600}.tw-q em{font-style:normal;color:#0573f0;font-weight:800}
.tw-k{background:#f4f6f8;border-radius:.8cqw;padding:.9cqw 1.1cqw;font-size:1.4cqw;line-height:1.45}.tw-k b{color:#0461cc}
.tw-f{display:flex;justify-content:space-between;color:#536471;font-size:1.1cqw;border-top:1px solid #eff3f4;padding-top:.7cqw}.tw-f a{color:#0573f0;font-weight:700;text-decoration:none}
/* 소파트 지도 (포항 .spm 구조, 파트 색 따라감) */
.spm{width:100%;display:flex;flex-direction:column;justify-content:center;gap:2.4cqw;--pc:#0573f0}
.stage[data-ch="4"] .spm{--pc:#5b3ce0}.stage[data-ch="5"] .spm{--pc:#c2410c}
.spm-r{display:grid;gap:.9cqw}
.spm-r div{display:flex;align-items:center;gap:.8cqw;background:#f6f7f9;border:1px solid #e6e8eb;border-radius:1cqw;padding:1.3cqw 1.3cqw;color:#8a8f95;min-width:0}
.spm-r i{flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#e6e8eb;color:#5b5f63;font-style:normal;font-weight:900;font-size:1.35cqw;display:grid;place-items:center}
.spm-r span{font-size:1.6cqw;font-weight:800;word-break:keep-all;line-height:1.3}
.spm-r .done{color:#3a3d40}.spm-r .done i{background:#1b1d1f;color:#fff}
.spm-r .on{background:var(--pc);border-color:var(--pc);color:#fff;transform:translateY(-.3cqw);box-shadow:0 .6cqw 1.6cqw rgba(5,40,90,.22)}
.spm-r .on i{background:#fff;color:var(--pc)}
.spm-l{background:#f6f7f9;border-radius:1.2cqw;padding:1.8cqw 2.2cqw}
.spm-l small{font-size:1.25cqw;font-weight:800;color:var(--pc)}
.spm-l p{margin:.5cqw 0 0;font-size:2.2cqw;font-weight:800;line-height:1.45;word-break:keep-all;text-wrap:balance;color:#1b1d1f}
html[data-theme=dark] .spm-r div,html[data-theme=dark] .spm-l{background:#1c2129;border-color:#2c333d}
html[data-theme=dark] .spm-r span{color:#9aa3ad}html[data-theme=dark] .spm-r .done span{color:#e6e8eb}
html[data-theme=dark] .spm-r .on span{color:#fff}html[data-theme=dark] .spm-l p{color:#f4f4f5}
html[data-theme=dark] .spm-r .done i{background:#e6e8eb;color:#1b1d1f}
html[data-theme=dark] .stage[data-ch="4"] .spm{--pc:#7c63ff}html[data-theme=dark] .stage[data-ch="5"] .spm{--pc:#d9480f}
html[data-theme=dark] .spm-l small{color:#7cb6ff}
html[data-theme=dark] .stage[data-ch="4"] .spm-l small{color:#b3a4ff}html[data-theme=dark] .stage[data-ch="5"] .spm-l small{color:#ffa94d}

/* 챗봇과 에이전트 표 */
.g6-tbl img{width:1.6cqw;height:1.6cqw;vertical-align:-.3cqw;margin-right:.4cqw}
.g6-tbl td b{color:#0573f0}
html[data-theme=dark] .g6-tbl img[src*="openai"],html[data-theme=dark] .g6-tbl img[src*="anthropic"]{filter:invert(1)}
html[data-theme=dark] .g6-tbl td b{color:#7cb6ff}

/* 숨은 원문 프롬프트의 자료 칩과 창 */
.pchip{display:inline;font:inherit;font-weight:800;color:#3a3f45;background:#e9ecef;border:0;border-radius:.5cqw;padding:.05cqw .5cqw;margin:0 .1cqw;cursor:pointer}
.pchip:hover{background:#dde2e7}
html[data-theme=dark] .pchip{background:#2f3742;color:#e6e8eb}
.g6-modal{position:fixed;inset:0;z-index:9999;background:rgba(10,16,24,.55);display:none;align-items:center;justify-content:center;padding:24px}
.g6-modal.on{display:flex}
.g6-mbox{background:#fff;color:#1b1d1f;border-radius:14px;width:min(860px,100%);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:g6up .25s ease-out}
.g6-mh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e6e8eb}
.g6-mh b{font-size:17px}.g6-mh button{border:0;background:#f1f3f5;border-radius:8px;padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}
.g6-mbox pre{margin:0;padding:18px 22px;overflow:auto;white-space:pre-wrap;word-break:keep-all;font-family:inherit;font-size:14.5px;line-height:1.7}
@keyframes g6up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 보안 장 */
.g6-sec{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw}
.g6-sec>div>div{border-radius:1.2cqw;padding:1.8cqw 2cqw;display:flex;flex-direction:column;gap:.75cqw;height:100%;box-sizing:border-box}
.g6-sec .no{background:#fff1f0;border:1px solid #f5c2bf}.g6-sec .ok{background:#eefaf1;border:1px solid #b9e3c4}
.g6-sec b{font-size:2.1cqw;font-weight:900}.g6-sec .no b{color:#c92a2a}.g6-sec .ok b{color:#2b8a3e}
.g6-sec span{font-size:1.6cqw;line-height:1.4;color:#2b2f33;word-break:keep-all}
.g6-sec span::before{content:'';display:inline-block;width:.6cqw;height:.6cqw;border-radius:50%;background:currentColor;opacity:.35;margin:0 .8cqw .25cqw 0}
.g6-sec-n{background:#f6f7f9;border-radius:1.2cqw;padding:1.4cqw 2cqw;display:flex;flex-direction:column;gap:.4cqw}
.g6-sec-n b{font-size:1.7cqw;color:#1b1d1f}.g6-sec-n span{font-size:1.35cqw;line-height:1.5;color:#3a3f45;word-break:keep-all}
html[data-theme=dark] .g6-sec .no{background:#3a1d1d;border-color:#6b2c2c}html[data-theme=dark] .g6-sec .ok{background:#16301f;border-color:#2b5c3a}
html[data-theme=dark] .g6-sec .no b{color:#ff8787}html[data-theme=dark] .g6-sec .ok b{color:#69db7c}
html[data-theme=dark] .g6-sec span{color:#e6e8eb}
html[data-theme=dark] .g6-sec-n{background:#1c2129}html[data-theme=dark] .g6-sec-n b{color:#f4f4f5}html[data-theme=dark] .g6-sec-n span{color:#c9ced6}

/* 줄바꿈 (전체) */
.sl h1,.sl h2,.sl h3,.sl .card h3{text-wrap:balance}
.sl p,.sl .card,.sl .steps span,.sl small,.sl .note{word-break:keep-all;text-wrap:pretty}
.stage :where(div,span,p,li,small,a,b,td){word-break:keep-all;text-wrap:pretty}
.stage :where(h1,h2,h3,.t,.kick){text-wrap:balance}
.stage :where(.num,td,.g5-dl small){font-variant-numeric:tabular-nums}
.spm-r div{padding:1.8cqw 1.4cqw}.spm-r span{font-size:1.8cqw}.spm{gap:3cqw}

/* 7차 (2026-11-09 실습 개편) */
/* 문서 세 종류 */
.g7-four{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1cqw}
.g7-doc{background:#fff;border:1px solid #dce0e3;border-radius:1.1cqw;padding:1.6cqw 1.5cqw;display:flex;flex-direction:column;gap:.55cqw;height:100%;box-sizing:border-box}
.g7-doc small{font-size:1.15cqw;font-weight:800;color:#63707b}
.g7-doc b{font-size:2cqw;font-weight:900;color:#142333}
.g7-doc span{font-size:1.35cqw;line-height:1.45;color:#3a3f45}
.g7-doc u{text-decoration:none;margin-top:auto;font-size:1.2cqw;font-weight:800;color:#0573f0;border-top:1px solid #eef0f2;padding-top:.6cqw}
.g7-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1cqw}
.g7-roles div{background:#f2f4f5;border-radius:1cqw;padding:1.1cqw 1.4cqw;display:flex;gap:1cqw;align-items:baseline}
.g7-roles b{font-size:1.6cqw;font-weight:900;color:#142333;flex:none}.g7-roles span{font-size:1.35cqw;color:#3a3f45}
html[data-theme=dark] .g7-doc{background:#151a21;border-color:#2c333d}html[data-theme=dark] .g7-doc b{color:#f4f4f5}
html[data-theme=dark] .g7-doc span,html[data-theme=dark] .g7-roles span{color:#c9ced6}html[data-theme=dark] .g7-doc small{color:#9aa3ad}
html[data-theme=dark] .g7-doc u{color:#7cb6ff;border-color:#2c333d}
html[data-theme=dark] .g7-roles div{background:#1c2129}html[data-theme=dark] .g7-roles b{color:#f4f4f5}
/* 요청 메일 */
.g7-mail{background:#fff;border:1px solid #dce0e3;border-radius:1.1cqw;overflow:hidden;color:#142333}
.g7-mh{background:#f2f4f5;padding:1.2cqw 1.6cqw;display:flex;flex-direction:column;gap:.4cqw;border-bottom:1px solid #dce0e3}
.g7-mh b{font-size:1.8cqw;font-weight:900}.g7-mh small{font-size:1.1cqw;color:#63707b;word-spacing:.3cqw}
.g7-mail ol{margin:0;padding:1.3cqw 1.6cqw 1.4cqw 3.6cqw;display:flex;flex-direction:column;gap:.7cqw;font-size:1.45cqw;line-height:1.5}
.g7-kit{background:#f6f7f9;border-radius:1.1cqw;padding:1.3cqw 1.4cqw;display:flex;flex-direction:column;gap:.6cqw}
.g7-kit small{font-size:1.15cqw;font-weight:800;color:#63707b}
.g7-kit div{display:flex;gap:.9cqw;align-items:center;font-size:1.4cqw;color:#142333}
.g7-kit i{font-style:normal;flex:none;min-width:3.2cqw;text-align:center;background:#0b1826;color:#fff;border-radius:.5cqw;font-size:1.1cqw;font-weight:800;padding:.25cqw .4cqw}
html[data-theme=dark] .g7-mail{background:#151a21;border-color:#2c333d;color:#e6e8eb}html[data-theme=dark] .g7-mh{background:#1c2129;border-color:#2c333d}
html[data-theme=dark] .g7-mh small{color:#9aa3ad}html[data-theme=dark] .g7-kit{background:#1c2129}html[data-theme=dark] .g7-kit div{color:#e6e8eb}
html[data-theme=dark] .g7-kit i{background:#e6e8eb;color:#0b1826}
/* 양식 세 개 */
.g7-tpl{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;align-items:start}
.g7-tpl>div>div{display:flex;flex-direction:column;gap:.5cqw}
.g7-shot{border:1px solid #dce0e3;border-radius:.9cqw;overflow:hidden;background:#fff;height:24cqw}
.g7-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.g7-tpl b{font-size:1.7cqw;font-weight:900;color:#142333;margin-top:.5cqw}.g7-tpl span{font-size:1.3cqw;color:#3a3f45}
html[data-theme=dark] .g7-tpl b{color:#f4f4f5}html[data-theme=dark] .g7-tpl span{color:#c9ced6}html[data-theme=dark] .g7-shot{border-color:#2c333d}
/* 대시보드 막대 이름 칸 */
.g7-bars div{grid-template-columns:9.5cqw 1fr 6cqw}

/* 8차 (2026-11-09 오후) */
/* 강사 시연 장: 흰 흐림 안내 */
.g8-veil{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(.9cqw);backdrop-filter:blur(.9cqw);border-radius:inherit}
.st:not(.off) .g8-veil{animation:g8fade .5s ease-out both}
.g8-vbox{width:78%;display:flex;flex-direction:column;gap:1.1cqw;text-align:center}
.g8-vbox small{font-size:1.3cqw;font-weight:800;color:#63707b}
.g8-vbox p{margin:0;font-size:1.75cqw;line-height:1.5;color:#1b1d1f;word-break:keep-all;text-wrap:balance}
.g8-vbox .g8-big{font-size:3.1cqw;font-weight:900;line-height:1.3;color:#142333}
.g8-vbox mark{background:linear-gradient(transparent 58%,#ffd43b 58%);color:inherit;padding:0 .2cqw}
.st:not(.off) .g8-vbox mark{background-size:0 100%;background-repeat:no-repeat;animation:g8mark .7s .45s ease-out forwards;background-image:linear-gradient(transparent 58%,#ffd43b 58%);background-color:transparent}
.g8-vbox .g8-key{margin-top:.6cqw;font-size:2.2cqw;font-weight:900;color:#142333}
.g8-vbox .g8-key em{font-style:normal;color:#fff;background:#d92e2a;border-radius:.5cqw;padding:.1cqw .7cqw}
.st:not(.off) .g8-vbox p{animation:g8up .5s ease-out both}
.st:not(.off) .g8-vbox p:nth-of-type(2){animation-delay:.25s}.st:not(.off) .g8-vbox p:nth-of-type(3){animation-delay:.5s}.st:not(.off) .g8-vbox p:nth-of-type(4){animation-delay:.75s}
@keyframes g8fade{from{opacity:0}to{opacity:1}}
@keyframes g8up{from{opacity:0;transform:translateY(.8cqw)}to{opacity:1;transform:none}}
@keyframes g8mark{to{background-size:100% 100%}}
html[data-theme=dark] .g8-veil{background:rgba(255,255,255,.8)}
@media (prefers-reduced-motion:reduce){.st:not(.off) .g8-veil,.st:not(.off) .g8-vbox p{animation:none}.st:not(.off) .g8-vbox mark{animation:none;background-size:100% 100%}}
/* 업무 분석 */
.g8-ana{background:#fff;border:1px solid #dce0e3;border-radius:1.1cqw;padding:1.2cqw 1.3cqw;display:flex;flex-direction:column;gap:.45cqw}
.g8-ana>small{font-size:1.2cqw;font-weight:800;color:#0573f0;margin-bottom:.3cqw}
.g8-row{display:grid;grid-template-columns:1.15fr 1fr 1.05fr;gap:.6cqw;align-items:center;font-size:1.25cqw;line-height:1.35;color:#2b2f33;border-top:1px solid #eef0f2;padding-top:.45cqw}
.g8-row b{color:#142333;font-weight:900}
.g8-row.g8-hd{border:0;padding:0;font-size:1.05cqw;font-weight:800;color:#63707b}
html[data-theme=dark] .g8-ana{background:#151a21;border-color:#2c333d}html[data-theme=dark] .g8-row{color:#c9ced6;border-color:#2c333d}html[data-theme=dark] .g8-row b{color:#f4f4f5}
html[data-theme=dark] .g8-ana>small{color:#7cb6ff}
/* 쉬는 시간 타이머 */
.g8-brk{margin-top:2.2cqw;display:flex;flex-direction:column;align-items:center;gap:1.2cqw}
.g8-clock{font-size:10cqw;font-weight:900;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1}
.g8-brk div{display:flex;gap:.8cqw}
.g8-brk button{font:inherit;font-size:1.4cqw;font-weight:800;border:0;border-radius:.8cqw;padding:.7cqw 1.6cqw;background:rgba(255,255,255,.18);color:inherit;cursor:pointer}
.g8-brk button[data-a=go]{background:#fff;color:#0b1826}
.g8-brk.done .g8-clock{color:#ffd43b;animation:g8blink 1s steps(2) infinite}
@keyframes g8blink{50%{opacity:.35}}
/* 자료 창 */
.g8-body{overflow:auto;padding:18px 24px 22px;font-size:15px;line-height:1.7;color:#1b1d1f;word-break:keep-all}
.g8-md h2{font-size:21px;margin:4px 0 10px}.g8-md h3{font-size:17px;margin:18px 0 8px}.g8-md h4{font-size:15px;margin:14px 0 6px}
.g8-md p{margin:0 0 8px}.g8-md ul,.g8-md ol{margin:0 0 10px;padding-left:22px}
.g8-md table,.g8-tb table{border-collapse:collapse;width:100%;margin:6px 0 12px;font-size:14px}
.g8-md th,.g8-md td,.g8-tb th,.g8-tb td{border:1px solid #dce0e3;padding:6px 9px;text-align:left;vertical-align:top}
.g8-md th,.g8-tb th{background:#0b1826;color:#fff;font-weight:700;white-space:nowrap}
.g8-md code{background:#f2f4f5;border-radius:4px;padding:1px 5px;font-size:13px}
.g8-ml{border:1px solid #dce0e3;border-radius:12px;overflow:hidden}
.g8-mlh{background:#f2f4f5;padding:14px 18px;display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:#3a3f45}
.g8-mlh b{font-size:18px;color:#142333;margin-bottom:6px}.g8-mlh span{display:inline-block;width:72px;color:#63707b;font-weight:700}
.g8-mlb{padding:16px 18px}.g8-mlb p{margin:0 0 10px}
.g8-mock{font-size:12px;color:#8a939c;padding:10px 18px;border-top:1px solid #eef0f2}
.g8-log{display:flex;flex-direction:column;gap:2px}.g8-lt{margin:0 0 8px;font-weight:700;color:#142333}
.g8-lr{display:grid;grid-template-columns:190px 1fr;gap:12px;padding:7px 0;border-top:1px solid #eef0f2}
.g8-lr span{font-variant-numeric:tabular-nums;color:#63707b;font-size:13.5px}.g8-lr p{margin:0}
.g8-tn{margin:0 0 8px;font-size:13px;color:#63707b}.g8-tw{overflow:auto;max-height:60vh}
.g8-tb td.n{text-align:right;font-variant-numeric:tabular-nums}.g8-tb tbody tr:nth-child(even) td{background:#fafbfc}
.g8-tb th{position:sticky;top:0}
.g8-brk button{background:#e9ecef;color:#142333}
.g8-brk button[data-a=go]{background:#0573f0;color:#fff}
.g8-brk.run button[data-a=go]{background:#142333}
html[data-theme=dark] .g8-brk button{background:#2f3742;color:#f4f4f5}html[data-theme=dark] .g8-brk button[data-a=go]{background:#0573f0;color:#fff}
.g5-qr img{width:17cqw!important;height:17cqw!important}
.g8-row{font-size:1.35cqw}
/* 65쪽 대시보드 프롬프트: 글자 키우기 */
.g8-dash .prompt{font-size:1.55cqw!important;line-height:1.55!important;padding:1.3cqw 1.6cqw!important}

/* ===== 디자인 규칙 (apply_design.py) ===== */
/* 실습은 진한 강조색 배경: 한눈에 실습인 걸 알게 */
.sl.lab{background:var(--blue);color:#fff}
.sl.lab h1{color:#fff}.sl.lab h1 em{color:#fff;text-decoration:underline;text-decoration-thickness:.25cqw;text-underline-offset:.4cqw}
.sl.lab .band,.sl.lab .band .kk,.sl.lab .band .tm,.sl.lab .band .kk-end{color:#fff}
.sl.lab .band .lt{background:#fff;color:var(--blue)}
.sl.lab .ar,.sl.lab .badge{color:#fff}
.sl.lab .ft,.sl.lab .ft span,.sl.lab .ft .wm{color:#fff}.sl.lab .ft img{filter:brightness(0) invert(1)}
.sl.lab .note,.sl.lab .note b,.sl.lab .quote,.sl.lab .quote em{color:#fff}
.sl.lab .prompt,.sl.lab .card,.sl.lab .steps .it,.sl.lab .check,.sl.lab .tbl,.sl.lab .brandlink{background:#fff;color:#1b1d1f}
/* 꼬리말과 내용 띄우기 */
.sl:not(.blue):not(.title):not(.tocpg):not(.mg){padding-bottom:4.8cqw}
.sl .ft{bottom:1.3cqw;gap:1cqw}.sl .ft img{margin-right:0}
/* 프롬프트는 읽기 좋은 글꼴로(고정폭은 한글이 벌어져 보임) */
.prompt{font-family:"Pretendard Variable",Pretendard,sans-serif;letter-spacing:-.01em;line-height:1.55;font-weight:500}
/* 공백: 프롬프트와 표는 뜻풀이 바로 아래, 칸 안에서는 가운데 */
.sl.theory .tl2 .extra{margin-top:.8cqw}.sl.theory .tl2{justify-content:center}.sl.theory.lift .tl2{justify-content:flex-start}
.sl.theory:not(.wide) .pic{background:transparent}.sl .bd>.col{justify-content:center}
/* 강조는 강조색 */
.sl .card b,.sl .card strong{color:var(--lime)}.sl .card.c b{color:var(--blue)}
/* 단계 장면: 지나간 칸은 숨기고 첫 칸은 처음부터 */
.lp>.st:has(+.st:not(.off)){visibility:hidden}.lp>.st:first-child.off,.lf>.st:first-child.off{opacity:1;transform:none}.st.off .col-n i{animation:none}
.theme-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;white-space:nowrap}
.toc-sess{margin:16px 4px 2px;padding:6px 10px;border-radius:8px;background:var(--blue);color:#fff;font-size:12px;font-weight:800}
/* 재사용 부품: 장면종류.md 참고 */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}.modes>div{border-radius:1.1cqw;padding:1.4cqw;background:var(--panel);display:flex;flex-direction:column;gap:.5cqw}.modes b{font-size:2.2cqw;font-weight:900}.modes span{font-size:1.4cqw;line-height:1.4}.modes small{font-size:1.15cqw;color:var(--sub);line-height:1.4}.modes>div.c{background:var(--blue);color:#fff}.modes>div.c small{color:#fff}
.mdl{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw}.mdl>div{background:var(--panel);border-radius:1cqw;padding:1.2cqw;display:flex;flex-direction:column;gap:.5cqw}.mdl b{font-size:1.9cqw;font-weight:900}.mdl span{font-size:1.25cqw;line-height:1.42}.mdl>div.top{background:var(--blue);color:#fff}
.road2{display:flex;align-items:stretch;gap:1.2cqw}.road2>.st{display:flex;align-items:center;flex:1}.road2>.st:nth-child(2){flex:none}.road2 i{font-style:normal;font-size:2.4cqw;font-weight:900;color:var(--blue)}.road2 div{flex:1;background:var(--panel);border-radius:1.1cqw;padding:1.4cqw;display:flex;flex-direction:column;gap:.4cqw}.road2 span{font-size:1.2cqw;font-weight:800;color:var(--sub)}.road2 b{font-size:2.3cqw;font-weight:900}.road2 small{font-size:1.3cqw;color:var(--sub)}.road2 div.c{background:var(--blue);color:#fff}.road2 div.c span,.road2 div.c small{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.8cqw}.chips span{display:flex;align-items:center;gap:.6cqw;background:var(--panel);border-radius:99px;padding:.7cqw 1.3cqw;font-size:1.5cqw;font-weight:800}.chips i{font-style:normal;width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.1cqw}
.mk{display:flex;align-items:stretch;gap:.5cqw}.mk>.st{display:flex;align-items:center}.mk>.st:has(>div){flex:1}.mk>.st>i{font-style:normal;font-weight:900;color:var(--blue);font-size:1.6cqw}.mk>.st>div{flex:1;background:var(--panel);border-radius:1cqw;padding:1.3cqw .8cqw;text-align:center;display:flex;flex-direction:column;gap:.4cqw}.mk em{font-style:normal;font-size:3cqw}.mk b{font-size:1.5cqw;font-weight:900}.mk small{font-size:1.1cqw;color:var(--sub)}.mk-end{font-size:2.2cqw;font-weight:800;text-align:center;margin-top:1.4cqw}.mk-end b{color:var(--blue)}
.mk-chat{display:flex;flex-direction:column;gap:.8cqw}.mk-chat .say{display:inline-block;float:right;background:var(--blue);color:#fff;font-size:1.6cqw;font-weight:700;border-radius:1cqw 1cqw .2cqw 1cqw;padding:.7cqw 1.2cqw}
.mk-one{font-size:2.8cqw;font-weight:900;background:var(--blue);color:#fff;border-radius:1cqw;padding:1.2cqw;text-align:center}.mk-run{display:flex;gap:.8cqw;justify-content:center}.mk-run span{font-size:1.5cqw;font-weight:800;color:var(--green)}.mk-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:.8cqw}.mk-cards div{aspect-ratio:4/5;background:var(--panel);border:1px solid var(--line);border-radius:.8cqw;display:grid;place-items:center;font-size:1.3cqw;font-weight:800}.mk-cards div:first-child{background:var(--blue);color:#fff}
.wifi{display:grid;grid-template-columns:1fr auto;gap:3cqw;align-items:center;width:100%}.wifi dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:1.2cqw 2cqw;font-size:3cqw;font-weight:800}.wifi dt{color:var(--lime)}.wifi dd{margin:0;font-family:Consolas,monospace}.wifi img{width:17cqw;height:17cqw;border-radius:1cqw;background:#fff;padding:.5cqw}
.tourg{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}.tourg label{display:flex;gap:.8cqw;align-items:flex-start;background:#fff;color:#1b1d1f;border-radius:.9cqw;padding:1cqw;font-size:1.35cqw;font-weight:700;line-height:1.35}.tourg label small{display:block;font-weight:500;font-size:1.1cqw;color:#5b5f63;margin-top:.2cqw}.tourg kbd{font-family:Consolas,monospace;font-size:1.25cqw;font-weight:800;color:var(--lime)}.tourg input{width:1.3cqw;height:1.3cqw;margin-top:.15cqw;flex:none}

.term{background:#1b1d1f;border-color:#1b1d1f}
.rpt-b,.dbv-file{color:#fff}

/* 수습 20261107: go 장면 */
.sl.gopg{background:var(--blue,#0573f0)!important;color:#fff}
html[data-theme=dark] .sl.gopg{background:var(--blue,#0573f0)!important;color:#fff}
.go-steps li{background:#fff!important;color:#1b1d1f!important}
html[data-theme=dark] .go-steps li{background:#0d0d0d!important;color:#f4f4f5!important}
.sl.gopg .go-back,.sl.gopg .go-pt,.sl.gopg .go-w{color:#fff}
.sl.gopg .go-t,.sl.gopg .go-t b{color:#fff}