/* ============================================================================
   충북대 생성형 AI 실습 심화교육 — 공용 슬라이드 디자인시스템 (deck.css)
   라이트 테마 / 빔프로젝터 가독성 우선 / 외부 CDN·라이브러리 의존 없음
   ============================================================================

   ┌──────────────────────────────────────────────────────────────────────────┐
   │  마크업 계약 (콘텐츠 에이전트는 이 주석만 읽고 슬라이드를 쓸 수 있다)      │
   └──────────────────────────────────────────────────────────────────────────┘

   [슬라이드 루트]
   <section class="slide {유형}" data-part="1~6" data-title="네비 배지에 뜰 제목"
            data-module="M2" data-day="1">…</section>

     · class 유형 = cover | concept | demo | lab | check | trouble  (이 6개만 쓴다)
     · data-part  = 1~6  → --accent / --accent-ink / --accent-soft / --accent-deep 스와핑
                    (M0·M6→1, M1·M7→2, M2·M8→3, M3·M9→4, M4·M10→5, M5·M11→6)
     · data-title = 상단 배지 + 개요(O) 모드에 표시되는 제목. 필수.
     · data-module= 선택. "M2" 같은 모듈 코드. 배지에 함께 표시.
     · data-day   = 선택. "1" | "2".

   [① .cover — 모듈 표지 · 풀블리드 컬러 배경 · 흰 글자]
     <section class="slide cover" data-part="3" data-title="HWPX 한글문서" data-module="M4">
       <p class="cover-kicker">1일차 · 14:50–16:00</p>
       <h2 class="cover-title">HWPX 한글문서 작성/변환</h2>
       <p class="cover-lead">AI가 내용을 만들고, 한글 템플릿이 서식을 입힌다.</p>
       <p class="cover-outcome"><span>산출물</span> .hwpx 보고서 초안</p>
     </section>

   [② .concept — 1장 = 1개념 · 흰 배경 큰 타이포]
     <section class="slide concept" data-part="3" data-title="왜 2단계인가">
       <h2 class="slide-title">왜 2단계로 나누는가</h2>
       <p class="lead">…한 줄 요약…</p>
       <ul class="points"><li><b>강조어</b> 설명</li>…</ul>
       <p class="note">보조 캡션</p>
     </section>

   [③ .demo — 강사 시연 · 스크린샷 + 강조]
     <section class="slide demo" data-part="3" data-title="시연: 템플릿 채우기">
       <h2 class="slide-title">시연 <span class="tag">강사 시연</span></h2>
       <div class="demo-grid">
         <figure class="figure"><img src="…" alt="…"><figcaption>캡션</figcaption></figure>
         <ol class="demo-steps"><li>…</li></ol>
       </div>
     </section>
     · .demo-grid 는 기본 2열(그림:설명 = 1.35fr : 1fr). .demo-grid.wide 는 그림만 크게.

   [④ .lab — 실습 지시 · 가장 중요 · 좌 단계 / 우 프롬프트+복사]
     <section class="slide lab" data-part="4" data-title="실습: 공문 초안">
       <h2 class="slide-title">실습 <span class="tag">따라하기</span></h2>
       <div class="lab-grid">
         <ol class="lab-steps">
           <li>클로드를 연다.</li>
           <li>오른쪽 프롬프트를 <b>복사</b>해 붙여넣는다.</li>
           <li class="is-warn">개인정보·미공개 자료는 넣지 않는다.</li>   ← 경고 단계
         </ol>
         <div class="lab-prompt">
           <div class="codebox" data-lang="프롬프트">
             <div class="codebox-head">
               <span class="codebox-title">프롬프트</span>
               <button class="copy-btn" data-copy type="button">복사</button>
             </div>
             <pre><code>여기에 프롬프트 원문</code></pre>
           </div>
         </div>
       </div>
     </section>
     · 좁은 화면(≤1000px)에서는 1열로 스택.
     · .lab-grid.reverse 로 좌우 교체 가능.

   [⑤ .check — 체크포인트 · "여기까지 됐으면 손 드세요"]
     <section class="slide check" data-part="4" data-title="체크포인트">
       <h2 class="slide-title">체크포인트</h2>
       <div class="check-grid">
         <ul class="check-list">
           <li>제목이 가운데 정렬로 굵게 나온다</li>
           <li>표 테두리가 살아 있다</li>
         </ul>
         <figure class="figure"><img src="…" alt="예상 결과"></figure>
       </div>
       <p class="check-cta">여기까지 됐으면 손 들어주세요</p>
     </section>

   [⑥ .trouble — 트러블슈팅 · 경고 색상]
     <section class="slide trouble" data-part="4" data-title="막히는 지점">
       <h2 class="slide-title">자주 막히는 지점</h2>
       <ul class="trouble-list">
         <li>
           <p class="t-sym">문장이 한 줄에 겹쳐 찍힌다</p>
           <p class="t-fix">레이아웃 캐시(&lt;hp:linesegarray&gt;)가 남아서다. hwpx_fill.py 가 제거한다.</p>
         </li>
       </ul>
     </section>

   [공용 부품 — 어느 유형 안에서도 쓸 수 있다]
     .slide-title            슬라이드 제목(h2)
     .lead                   제목 아래 리드 문장
     .note                   작은 보조 캡션 (.8em 이상 유지)
     .tag                    제목 옆 작은 라벨 칩 (accent 색)
     .chip / .chip.warn/.ok  인라인 칩
     .kbd                    키캡 표기  <span class="kbd">Ctrl</span>
     .points                 불릿 목록 (큰 타이포)
     .cards / .card          카드 그리드 (.cards.c2 / .c3 로 열 수 지정)
     .callout                강조 박스. .callout.warn(빨강) / .callout.tip(틸) / .callout.demo(앰버)
                             <div class="callout warn"><b>주의</b> 본문…</div>
     .figure > img + figcaption   이미지. 항상 alt 필수.
     .table-wrap > table     넓은 표. 자체 가로 스크롤.
     .codebox                프롬프트/코드 박스. ★ 반드시 .copy-btn[data-copy] 포함 ★
     .codebox.vba            VBA 코드용 (모노 + 살짝 다른 헤더 라벨)
     .grow                   남는 세로 공간을 채우는 컨테이너 (figure 등에 붙임)
     .cols / .cols.c2 .c3    범용 균등 분할 열

   [복사 버튼 계약 — 절대 규칙]
     <button class="copy-btn" data-copy type="button">복사</button>
     · data-copy 값이 없으면 → 같은 .codebox 안의 <pre> 텍스트를 복사한다. (권장)
     · data-copy="#어떤id" 처럼 선택자를 주면 → 그 요소의 텍스트를 복사한다.
     · deck.js 가 문서 전체에 위임 리스너를 건다. 슬라이드마다 스크립트 쓰지 말 것.

   [금지]
     · 인라인 style 로 색을 하드코딩하지 말 것. 반드시 var(--…) 토큰 사용.
     · 브랜드 원색(--amber/--teal)을 흰 배경 위 '텍스트'로 쓰지 말 것 (명암비 미달).
       텍스트에는 --amber-ink / --teal-ink / --blue-ink / --red-ink 를 쓴다.
     · body 가로 스크롤 유발 금지. 넓은 것은 .table-wrap / .codebox 안에 넣는다.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   0. 디자인 토큰
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── 슬라이드 지면 (라이트) ───────────────────── */
  --paper:#FFFFFF;
  --paper-2:#F6F8FC;
  --paper-3:#EDF1F8;
  --stage:#DDE4EF;

  /* ── 텍스트 ───────────────────────────────────── */
  --ink:#0B1120;
  --ink-soft:#33415C;
  --ink-muted:#5A6B8C;
  --ink-invert:#FFFFFF;

  /* ── 브랜드 원색 (채움·테두리·배너 전용 · 텍스트 금지) ── */
  --navy:#0B1120;
  --amber:#F5B301;
  --teal:#2DD4BF;
  --blue:#4F86F7;

  /* ── 텍스트용 액센트 (흰 배경에서 4.5:1 이상) ─── */
  --amber-ink:#8A6100;
  --teal-ink:#0F766E;
  --blue-ink:#1D4ED8;
  --red-ink:#B91C1C;

  /* ── 딥 배경 (① 모듈 표지 풀블리드 · 흰 글자 기준) ── */
  --amber-deep:#7A5600;
  --teal-deep:#0B5F59;
  --blue-deep:#1A3EA8;
  --navy-deep:#0B1120;

  /* ── 연한 배경 ────────────────────────────────── */
  --amber-soft:#FEF3D2;
  --teal-soft:#D7F5F0;
  --blue-soft:#DCE7FE;
  --red-soft:#FDE2E2;

  /* ── 선 ───────────────────────────────────────── */
  --line:#C9D3E3;
  --line-soft:#E4EAF3;
  --line-strong:#94A5C0;

  /* ── 유형별 액센트 (data-part로 스와핑) ────────── */
  --accent:var(--blue);
  --accent-ink:var(--blue-ink);
  --accent-soft:var(--blue-soft);
  --accent-deep:var(--blue-deep);

  /* ── 슬라이드 6유형 시맨틱 색 ─────────────────── */
  --do:#1D4ED8;    --do-soft:#DCE7FE;
  --cp:#0F766E;    --cp-soft:#D7F5F0;
  --warn:#B91C1C;  --warn-soft:#FDE2E2;
  --demo:#8A6100;  --demo-soft:#FEF3D2;

  /* ── 타이포 ───────────────────────────────────── */
  --font-title:'Noto Serif KR',"Malgun Gothic",serif;
  --font-body:'Noto Sans KR',system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --font-mono:'JetBrains Mono',"D2Coding",Consolas,monospace;

  --fs-title:2.6em;  --fs-h2:1.9em;   --fs-lead:1.08em;
  --fs-body:1em;     --fs-small:.84em; --fs-code:.9em;
  --lh-tight:1.2;    --lh-body:1.65;

  /* ── 형태 ─────────────────────────────────────── */
  --r-sm:.5em; --r:0.9em; --r-lg:1.2em;
  --shadow-card:0 2px 6px rgba(11,17,32,.06), 0 12px 28px rgba(11,17,32,.08);
  --shadow-frame:0 24px 60px rgba(11,17,32,.22);
  --ease:cubic-bezier(.2,.75,.25,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);

  /* 상·하단 크롬 높이 */
  --chrome-top:52px;
  --chrome-bot:0px;
}

/* data-part별 액센트 스와핑 */
.slide[data-part="1"]{--accent:var(--blue);  --accent-ink:var(--blue-ink);  --accent-soft:var(--blue-soft);  --accent-deep:var(--blue-deep);}
.slide[data-part="2"]{--accent:var(--amber); --accent-ink:var(--amber-ink); --accent-soft:var(--amber-soft); --accent-deep:var(--amber-deep);}
.slide[data-part="3"]{--accent:var(--teal);  --accent-ink:var(--teal-ink);  --accent-soft:var(--teal-soft);  --accent-deep:var(--teal-deep);}
.slide[data-part="4"]{--accent:var(--blue);  --accent-ink:var(--blue-ink);  --accent-soft:var(--blue-soft);  --accent-deep:var(--blue-deep);}
.slide[data-part="5"]{--accent:var(--amber); --accent-ink:var(--amber-ink); --accent-soft:var(--amber-soft); --accent-deep:var(--amber-deep);}
.slide[data-part="6"]{--accent:var(--teal);  --accent-ink:var(--teal-ink);  --accent-soft:var(--teal-soft);  --accent-deep:var(--teal-deep);}

/* 랜딩(index.html)은 하우스 스타일대로 다크 — 별도 토큰 */
.landing{
  --bg:#070C16; --bg-2:#0B1120;
  --surface:rgba(23,36,64,.62);
  --glass-border:rgba(120,150,210,.24);
  --text:#EEF3FB;
  --text-soft:#C7D3E8;
  --muted:#8A9BBD;
  --amber:#F5B301;
  --teal:#2DD4BF;
  --blue:#7FA8FF;
  --red:#F26D6D;
}


/* ══════════════════════════════════════════════════════════════════════════
   1. 리셋 · 무대(stage) · 프레임(frame)
   ══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}

html,body{
  width:100%; height:100%;
  overflow:hidden;                 /* body 가로/세로 스크롤 원천 차단 */
  background:var(--stage);
  color:var(--ink);
  font-family:var(--font-body);
  word-break:keep-all;             /* 한국어 어절 단위 줄바꿈 */
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}

img{max-width:100%; height:auto; display:block;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

/* 스크린리더 전용 */
.sr-only{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* 포커스 링 — 키보드 전용 조작 보장 */
:focus-visible{outline:3px solid var(--blue-ink); outline-offset:2px;}
.landing :focus-visible{outline-color:var(--amber);}
/* 컬러 딥 배경 위에서는 흰 링 */
.slide.cover :focus-visible{outline-color:#FFFFFF;}

/* ── 무대 ── */
#stage{
  position:absolute;
  inset:var(--chrome-top) 0 var(--chrome-bot) 0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, #E7ECF5 0%, var(--stage) 70%);
}

/* ── 슬라이드 프레임 : 항상 16:9, 화면에 맞춰 레터박스 ── */
#slide-frame{
  position:relative;
  aspect-ratio:16/9;
  width:min(100vw, calc((100vh - var(--chrome-top) - var(--chrome-bot)) * 16 / 9));
  height:min(calc(100vw * 9 / 16), calc(100vh - var(--chrome-top) - var(--chrome-bot)));
  background:var(--paper);
  overflow:hidden;
  box-shadow:var(--shadow-frame);
  /* 컨테이너 쿼리 기준면. 내부 슬라이드는 전부 em / cqw 로 스케일된다. */
  container-type:size;
  container-name:frame;
}

/* 슬라이드 본체 — 폰트 크기는 프레임 폭에 비례(cqw), 상·하한 clamp */
.slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:2.6em 3em;
  font-size:clamp(12px, 1.30cqw, 22px);   /* 1em = 22px @1920w → 본문 20px+ 충족. 1366w 구형 PC에서도 16.5px까지 확보(1920/1366 전 슬라이드 넘침 0 실측). 더 크게 보려면 F(전체화면) 또는 Ctrl+ + */
  line-height:var(--lh-body);
  background:var(--paper);
  color:var(--ink);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(2.2%);
  transition:opacity .34s var(--ease), transform .38s var(--ease), visibility 0s .4s;
  overflow:hidden;
}
.slide.active{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  transition:opacity .34s var(--ease), transform .38s var(--ease), visibility 0s 0s;
  z-index:2;
}
.slide.prev{transform:translateX(-2.2%);}


/* ══════════════════════════════════════════════════════════════════════════
   2. 상단 크롬 — 진행바 · 모듈 배지 · 슬라이드 번호
   ══════════════════════════════════════════════════════════════════════════ */
#topbar{
  position:absolute; top:0; left:0; right:0; height:var(--chrome-top);
  display:flex; align-items:center; gap:14px;
  padding:0 16px;
  background:var(--paper);
  border-bottom:1px solid var(--line-soft);
  z-index:20;
}
#deck-brand{
  font-family:var(--font-title); font-weight:700; font-size:15px;
  color:var(--ink); white-space:nowrap;
  flex:0 0 auto;
}
#deck-brand .day{
  display:inline-block; margin-left:8px; padding:2px 8px;
  border-radius:999px; font-family:var(--font-body); font-size:12px; font-weight:700;
  background:var(--paper-3); color:var(--ink-soft);
}
#module-badge{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:8px;
  overflow:hidden;
}
#module-badge .mod{
  flex:0 0 auto;
  padding:3px 9px; border-radius:6px;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid currentColor;
}
#module-badge .ttl{
  font-size:14px; font-weight:600; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#topbar-actions{flex:0 0 auto; display:flex; align-items:center; gap:6px;}
.tb-btn{
  padding:6px 10px; border-radius:8px;
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  border:1px solid var(--line);
  background:var(--paper);
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.tb-btn:hover{background:var(--paper-2); color:var(--ink); border-color:var(--line-strong);}
.tb-btn kbd{
  display:inline-block; margin-left:3px; padding:1px 5px;
  border-radius:4px; background:var(--paper-3); color:var(--ink-muted);
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  border:1px solid var(--line);
}
#counter{
  flex:0 0 auto;
  font-family:var(--font-mono); font-size:13px; font-weight:700;
  color:var(--ink-muted); font-variant-numeric:tabular-nums;
  padding-left:4px;
}

/* 진행바 — 상단 크롬 하단 경계선에 얹음 */
#progress{
  position:absolute; top:calc(var(--chrome-top) - 3px); left:0; right:0; height:3px;
  background:var(--line-soft); z-index:21;
}
#progress-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--blue), var(--teal));
  transition:width .34s var(--ease);
}

/* 좌·우 클릭 영역 (무대 위, 슬라이드 아래) */
.navzone{
  position:absolute; top:0; bottom:0; width:9%;
  z-index:15; border:0; background:transparent;
  opacity:0; transition:opacity .2s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
#stage:hover .navzone{opacity:1;}
.navzone#nav-prev{left:0;}
.navzone#nav-next{right:0;}
.navzone::after{
  content:''; width:40px; height:40px; border-radius:50%;
  background:rgba(11,17,32,.30);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.navzone:hover::after{background:rgba(11,17,32,.52);}
.navzone .chev{
  position:absolute; color:#fff; font-size:20px; line-height:1; font-weight:700;
  pointer-events:none;
}

/* 키보드 힌트 */
#kbd-hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:8px; align-items:center;
  padding:8px 14px; border-radius:999px;
  background:rgba(11,17,32,.82); color:#fff;
  font-size:12.5px; font-weight:600;
  z-index:30; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
#kbd-hint.show{opacity:1;}
#kbd-hint .k{
  display:inline-block; padding:2px 6px; border-radius:5px;
  background:rgba(255,255,255,.16); font-family:var(--font-mono); font-size:11.5px;
}

/* 토스트 (복사됨! 등) */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 14px);
  padding:11px 20px; border-radius:999px;
  background:var(--navy); color:#fff;
  font-size:14px; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(11,17,32,.34);
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
#toast.show{opacity:1; transform:translate(-50%,0);}
#toast.err{background:var(--red-ink);}


/* ══════════════════════════════════════════════════════════════════════════
   3. 공용 타이포 · 부품
   ══════════════════════════════════════════════════════════════════════════ */
.slide-title{
  font-family:var(--font-title);
  font-size:var(--fs-h2); font-weight:800; line-height:var(--lh-tight);
  letter-spacing:-.015em; color:var(--ink);
  display:flex; align-items:center; gap:.5em; flex-wrap:wrap;
  flex:0 0 auto;
  margin-bottom:.5em;
  padding-bottom:.42em;
  border-bottom:3px solid var(--accent);
}
.slide-title .tag{
  font-family:var(--font-body);
  font-size:.42em; font-weight:800; letter-spacing:.02em;
  padding:.42em .8em; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-ink);
  line-height:1; white-space:nowrap;
}

.lead{
  font-size:var(--fs-lead); color:var(--ink-soft); line-height:1.55;
  margin-bottom:.9em; flex:0 0 auto;
}
.lead b, .lead strong{color:var(--ink); font-weight:700;}

.note{
  font-size:var(--fs-small); color:var(--ink-muted); line-height:1.5;
  margin-top:.7em; flex:0 0 auto;
}

.chip{
  display:inline-block; padding:.18em .6em; border-radius:.45em;
  font-size:.82em; font-weight:700; line-height:1.45;
  background:var(--accent-soft); color:var(--accent-ink);
}
.chip.warn{background:var(--warn-soft); color:var(--warn);}
.chip.ok{background:var(--cp-soft); color:var(--cp);}
.chip.demo{background:var(--demo-soft); color:var(--demo);}

.kbd{
  display:inline-block; padding:.1em .45em; border-radius:.3em;
  font-family:var(--font-mono); font-size:.86em; font-weight:700;
  background:var(--paper-3); color:var(--ink);
  border:1px solid var(--line); border-bottom-width:2px;
}

.grow{flex:1 1 auto; min-height:0;}

/* 불릿 목록 */
.points{list-style:none; display:flex; flex-direction:column; gap:.62em;}
.points li{
  position:relative; padding-left:1.5em;
  font-size:1.02em; line-height:1.55; color:var(--ink-soft);
}
.points li::before{
  content:''; position:absolute; left:0; top:.58em;
  width:.55em; height:.55em; border-radius:50%;
  background:var(--accent);
}
.points li b, .points li strong{color:var(--ink); font-weight:700;}

/* 균등 분할 열 */
.cols{display:grid; gap:1.2em; align-items:start;}
.cols.c2{grid-template-columns:1fr 1fr;}
.cols.c3{grid-template-columns:1fr 1fr 1fr;}

/* 카드 */
.cards{display:grid; gap:1em;}
.cards.c2{grid-template-columns:1fr 1fr;}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.card{
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  padding:1.1em 1.2em;
  box-shadow:var(--shadow-card);
}
.card > h3{
  font-family:var(--font-title); font-size:1.06em; font-weight:800;
  color:var(--ink); margin-bottom:.4em; line-height:1.3;
}
.card > p{font-size:.95em; color:var(--ink-soft); line-height:1.55;}
.card.accent{border-left:5px solid var(--accent); background:var(--paper);}

/* 강조 박스 */
.callout{
  display:block;
  padding:.85em 1.1em;
  border-radius:var(--r-sm);
  border-left:5px solid var(--accent);
  background:var(--accent-soft);
  color:var(--ink);
  font-size:.98em; line-height:1.55;
}
.callout h3{margin-bottom:.35em; font-size:1em;}
.callout .points{margin:.4em 0;}
.callout p{margin-top:.4em;}
.callout > *:first-child{margin-top:0;}
.callout b, .callout strong{font-weight:800; color:var(--accent-ink);}
.callout.warn{border-left-color:var(--warn); background:var(--warn-soft);}
.callout.warn b, .callout.warn strong{color:var(--warn);}
.callout.tip{border-left-color:var(--cp); background:var(--cp-soft);}
.callout.tip b, .callout.tip strong{color:var(--cp);}
.callout.demo{border-left-color:var(--demo); background:var(--demo-soft);}
.callout.demo b, .callout.demo strong{color:var(--demo);}

/* 이미지 */
.figure{
  display:flex; flex-direction:column; gap:.5em;
  min-height:0; min-width:0;
  overflow:hidden;
}
.figure img{
  width:100%; height:auto; max-height:100%;
  flex:1 1 auto; min-height:0;
  object-fit:contain; object-position:center top;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper-2);
}
.figure figcaption{
  flex:0 0 auto;
  font-size:var(--fs-small); color:var(--ink-muted); line-height:1.45;
}
.figure.shadow img{box-shadow:var(--shadow-card);}

/* 표 — 넓으면 자체 가로 스크롤 */
.table-wrap{
  overflow-x:auto; overflow-y:auto;
  max-width:100%; min-height:0;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper);
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{border-collapse:collapse; width:100%; font-size:.92em;}
.table-wrap th, .table-wrap td{
  padding:.55em .8em; text-align:left;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.table-wrap thead th{
  position:sticky; top:0; z-index:1;
  background:var(--paper-3); color:var(--ink);
  font-weight:800;
  border-bottom:2px solid var(--line);
}
.table-wrap tbody tr:last-child td{border-bottom:0;}
.table-wrap td.num{font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums;}
.table-wrap td.bad{background:var(--warn-soft); color:var(--warn); font-weight:700;}
.table-wrap td.good{background:var(--cp-soft); color:var(--cp); font-weight:700;}


/* ══════════════════════════════════════════════════════════════════════════
   4. .codebox — 프롬프트 / 코드 박스 + 원클릭 복사   ★ 절대 규칙 ★
   ══════════════════════════════════════════════════════════════════════════ */
.codebox{
  position:relative;
  display:flex; flex-direction:column;
  min-height:0; min-width:0;
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.codebox-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:.6em;
  padding:.55em .7em .55em .95em;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.codebox-title{
  font-size:.8em; font-weight:800; letter-spacing:.02em;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:.4em;
}
.codebox-title::before{
  content:''; width:.55em; height:.55em; border-radius:50%;
  background:var(--accent); flex:0 0 auto;
}

/* 복사 버튼 — 헤더 우측 고정 */
.copy-btn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.35em;
  padding:.42em .85em;
  border-radius:.5em;
  font-size:.78em; font-weight:800; letter-spacing:.01em;
  color:var(--ink-invert);
  background:var(--accent-deep);
  border:1px solid transparent;
  white-space:nowrap;
  transition:background .16s var(--ease), transform .12s var(--ease-spring);
}
.copy-btn::before{content:'⧉'; font-size:1.05em; line-height:1;}
.copy-btn:hover{background:var(--ink); transform:translateY(-1px);}
.copy-btn:active{transform:translateY(0);}
.copy-btn.copied{background:var(--cp);}
.copy-btn.copied::before{content:'✓';}
.copy-btn.failed{background:var(--warn);}
.copy-btn.failed::before{content:'!';}

/* 헤더 없이 pre 만 있는 경우에도 복사버튼이 우상단에 뜨도록 */
.codebox > .copy-btn{
  position:absolute; top:.6em; right:.6em; z-index:3;
}

.codebox pre{
  flex:1 1 auto; min-height:0;
  overflow-x:auto; overflow-y:auto;
  padding:.95em 1.1em;
  -webkit-overflow-scrolling:touch;
}
.codebox code{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-code);
  line-height:1.62;
  color:var(--ink);
  white-space:pre;                 /* 코드: 줄바꿈 보존, 가로 스크롤 */
  tab-size:2;
}
/* 프롬프트는 자연어 → 자동 줄바꿈이 읽기 좋다 */
.codebox.prompt code, .codebox[data-lang="프롬프트"] code{
  white-space:pre-wrap; word-break:keep-all; overflow-wrap:anywhere;
  font-family:var(--font-body); font-size:.95em; line-height:1.66;
}
.codebox.vba .codebox-title::before{background:var(--demo);}
.codebox.vba code{color:var(--ink);}
/* VBA 정답 코드는 길다. 폭이 박스 안에 들어오게 줄여 가로 스크롤을 없앤다.
   (세로 스크롤은 남는다 — 전문은 복사 버튼과 files/정답_VBA코드.bas로 제공된다) */
.codebox.vba pre{line-height:1.45;}
.codebox.vba pre code{font-size:calc(var(--fs-code) * .80); line-height:1.45;}

/* 스크롤바 (전산실 크롬 기준) */
.codebox pre::-webkit-scrollbar, .table-wrap::-webkit-scrollbar{width:10px; height:10px;}
.codebox pre::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb{
  background:var(--line-strong); border-radius:99px; border:2px solid var(--paper-3);
}
.codebox pre::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track{background:transparent;}


/* ══════════════════════════════════════════════════════════════════════════
   5. ① .cover — 모듈 표지 (풀블리드 컬러 · 흰 글자)
   ══════════════════════════════════════════════════════════════════════════ */
.slide.cover{
  justify-content:center;
  padding:3em 3.6em;
  color:var(--ink-invert);
  background:
    radial-gradient(120% 120% at 88% 8%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    var(--accent-deep);
}
/* 우하단 대형 워터마크 (모듈 코드) */
/* 우하단 워터마크는 순수 장식.
   bottom 은 '슬라이드 패딩(3em)'과 같은 높이로 띄운다. 여기 em 은 이 의사요소의
   font-size(11em) 기준이므로 .28em × 11em ≈ 3em(슬라이드 기준) → 패딩과 일치한다.
   이렇게 해야 크롬이 abs 자식의 넘침 영역에 padding-bottom 을 더해도
   scrollHeight 가 커지지 않는다 (= 콘텐츠 넘침 검사가 오탐하지 않는다). */
.slide.cover::after{
  content:attr(data-module);
  position:absolute; right:.32em; bottom:.31em;
  font-family:var(--font-title); font-weight:900;
  font-size:11em; line-height:.86;
  color:rgba(255,255,255,.07);
  pointer-events:none; user-select:none;
}
.cover-kicker{
  font-size:.98em; font-weight:800; letter-spacing:.06em;
  color:rgba(255,255,255,.86);
  margin-bottom:.7em;
  display:inline-flex; align-items:center; gap:.6em;
  align-self:flex-start;
  padding:.4em .9em; border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
}
.cover-title{
  font-family:var(--font-title);
  font-size:var(--fs-title); font-weight:900; line-height:1.18;
  letter-spacing:-.02em;
  color:#fff;
  max-width:16em;
  margin-bottom:.35em;
}
.cover-lead{
  font-size:1.16em; line-height:1.55;
  color:rgba(255,255,255,.90);
  max-width:30em;
  margin-bottom:1.4em;
}
.cover-outcome{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.75em;
  padding:.65em 1.1em .65em .65em;
  border-radius:var(--r);
  background:rgba(255,255,255,.95);
  color:var(--ink);
  font-size:1.05em; font-weight:800;
  box-shadow:0 10px 26px rgba(0,0,0,.20);
}
.cover-outcome > span:first-child{
  padding:.3em .7em; border-radius:.45em;
  background:var(--accent-deep); color:#fff;
  font-size:.78em; font-weight:800; letter-spacing:.04em;
}
/* 표지 안에서도 목록을 쓸 수 있게 */
.slide.cover .points li{color:rgba(255,255,255,.90);}
.slide.cover .points li b{color:#fff;}
.slide.cover .points li::before{background:rgba(255,255,255,.75);}
.slide.cover .note{color:rgba(255,255,255,.72);}


/* ══════════════════════════════════════════════════════════════════════════
   6. ② .concept — 개념 (1장 1개념 · 흰 배경 큰 타이포)
   ══════════════════════════════════════════════════════════════════════════ */
.slide.concept{justify-content:center; padding:3em 4.2em;}
.slide.concept .slide-title{
  font-size:var(--fs-title);
  border-bottom:0; padding-bottom:0;
  margin-bottom:.28em;
  max-width:18em;
}
/* 제목 위 얇은 액센트 룰 */
.slide.concept::before{
  content:''; position:absolute; top:2.4em; left:4.2em;
  width:2.6em; height:5px; border-radius:99px; background:var(--accent);
}
.slide.concept .lead{
  font-size:1.28em; color:var(--ink-soft); max-width:34em;
  line-height:1.5; margin-top:.5em; margin-bottom:1.1em;
}
.slide.concept .points{max-width:38em;}
.slide.concept .points li{font-size:1.08em;}
/* 큰 한 문장을 던지는 경우 */
.concept-big{
  font-family:var(--font-title);
  font-size:2.1em; font-weight:800; line-height:1.32; letter-spacing:-.02em;
  color:var(--ink); max-width:20em;
}
.concept-big em{
  font-style:normal;
  background:linear-gradient(180deg, transparent 62%, var(--accent-soft) 62%);
  padding:0 .08em;
  color:var(--accent-ink);
}


/* ══════════════════════════════════════════════════════════════════════════
   7. ③ .demo — 강사 시연 (스크린샷 + 강조)
   ══════════════════════════════════════════════════════════════════════════ */
.slide.demo{--accent:var(--amber); --accent-ink:var(--demo); --accent-soft:var(--demo-soft); --accent-deep:var(--amber-deep);}
.slide.demo .slide-title{border-bottom-color:var(--demo);}
.slide.demo .slide-title .tag{background:var(--demo-soft); color:var(--demo);}
.slide.demo .slide-title .tag::before{content:'▶ ';}

.demo-grid{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1.35fr 1fr; gap:1.4em;
  align-items:stretch;
}
.demo-grid.wide{grid-template-columns:1fr; align-content:start;}
.demo-grid > .figure{min-height:0;}
.demo-steps{
  list-style:none; counter-reset:d;
  display:flex; flex-direction:column; gap:.6em;
  overflow-y:auto; min-height:0; padding-right:.3em;
}
.demo-steps li{
  counter-increment:d;
  position:relative; padding-left:2.1em;
  font-size:.98em; line-height:1.55; color:var(--ink-soft);
}
.demo-steps li::before{
  content:counter(d);
  position:absolute; left:0; top:.1em;
  width:1.5em; height:1.5em; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--demo-soft); color:var(--demo);
  font-size:.82em; font-weight:800; line-height:1;
  border:1px solid var(--demo);
}
.demo-steps li b, .demo-steps li strong{color:var(--ink); font-weight:700;}


/* ══════════════════════════════════════════════════════════════════════════
   8. ④ .lab — 실습 지시 (가장 중요) · 좌 단계 / 우 프롬프트
   ══════════════════════════════════════════════════════════════════════════ */
.slide.lab{
  --accent:var(--do); --accent-ink:var(--do); --accent-soft:var(--do-soft); --accent-deep:var(--blue-deep);
  background:
    linear-gradient(180deg, var(--do-soft) 0, var(--do-soft) .55em, var(--paper) .55em);
}
.slide.lab .slide-title{border-bottom-color:var(--do);}
.slide.lab .slide-title .tag{background:var(--do); color:#fff;}
.slide.lab .slide-title .tag::before{content:'✋ ';}

.lab-grid{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1.12fr; gap:1.5em;
  align-items:stretch;
}
.lab-grid.reverse{grid-template-columns:1.12fr 1fr;}
.lab-grid.reverse > .lab-steps{order:2;}
.lab-grid.reverse > .lab-prompt{order:1;}

/* 좌: 번호 붙은 단계 */
.lab-steps{
  list-style:none; counter-reset:step;
  display:flex; flex-direction:column; gap:.7em;
  overflow-y:auto; min-height:0; padding-right:.4em;
}
.lab-steps li{
  counter-increment:step;
  position:relative;
  padding:.55em .8em .55em 2.6em;
  border-radius:var(--r-sm);
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  font-size:1.02em; line-height:1.5; color:var(--ink);
}
.lab-steps li::before{
  content:counter(step);
  position:absolute; left:.6em; top:.5em;
  width:1.6em; height:1.6em; border-radius:.4em;
  display:flex; align-items:center; justify-content:center;
  background:var(--do); color:#fff;
  font-size:.85em; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
}
.lab-steps li b, .lab-steps li strong{color:var(--do); font-weight:800;}
.lab-steps li code{
  font-family:var(--font-mono); font-size:.88em;
  background:var(--paper-3); padding:.1em .35em; border-radius:.3em;
}
/* 경고 단계 */
.lab-steps li.is-warn{
  background:var(--warn-soft); border-color:var(--warn);
  color:var(--ink);
}
.lab-steps li.is-warn::before{background:var(--warn); content:'!';}
.lab-steps li.is-warn b, .lab-steps li.is-warn strong{color:var(--warn);}
/* 확인 단계 */
.lab-steps li.is-check{background:var(--cp-soft); border-color:var(--cp);}
.lab-steps li.is-check::before{background:var(--cp); content:'✓';}
.lab-steps li.is-check b{color:var(--cp);}

/* 우: 프롬프트 컬럼 (codebox 여러 개 세로 스택 가능) */
.lab-prompt{
  display:flex; flex-direction:column; gap:.9em;
  min-height:0; min-width:0;
}
.lab-prompt > .codebox{flex:1 1 auto;}
.lab-prompt > .callout{flex:0 0 auto;}

/* ── 좁을 때 1열 스택 ────────────────────────────────────────────────────
   ★ 기준은 '뷰포트'가 아니라 '프레임 폭'(@container frame)이다.
     슬라이드 내부는 16:9 프레임 안에서만 산다. 뷰포트 미디어쿼리를 쓰면
     개요(O) 썸네일(1280px 컨테이너)과 실제 화면의 레이아웃이 어긋난다.
   ──────────────────────────────────────────────────────────────────────── */
@container frame (max-width: 1000px){
  .lab-grid, .lab-grid.reverse{grid-template-columns:1fr; grid-auto-rows:minmax(0,auto);}
  .lab-grid.reverse > .lab-steps, .lab-grid.reverse > .lab-prompt{order:0;}
  .demo-grid{grid-template-columns:1fr;}
  .check-grid{grid-template-columns:1fr;}
  .cards.c3, .cols.c3{grid-template-columns:1fr 1fr;}
}
@container frame (max-width: 640px){
  .cards.c2, .cards.c3, .cols.c2, .cols.c3{grid-template-columns:1fr;}
  .trouble-list{grid-template-columns:1fr;}
}


/* ══════════════════════════════════════════════════════════════════════════
   9. ⑤ .check — 체크포인트
   ══════════════════════════════════════════════════════════════════════════ */
.slide.check{
  --accent:var(--cp); --accent-ink:var(--cp); --accent-soft:var(--cp-soft); --accent-deep:var(--teal-deep);
  background:
    linear-gradient(180deg, var(--cp-soft) 0, var(--cp-soft) .55em, var(--paper) .55em);
}
.slide.check .slide-title{border-bottom-color:var(--cp);}
.slide.check .slide-title .tag{background:var(--cp); color:#fff;}
.slide.check .slide-title .tag::before{content:'✓ ';}

.check-grid{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1.4em; align-items:stretch;
}
.check-list{list-style:none; display:flex; flex-direction:column; gap:.65em; min-height:0; overflow-y:auto;}
.check-list li{
  position:relative; padding:.6em .9em .6em 2.5em;
  border-radius:var(--r-sm);
  background:var(--paper-2); border:1px solid var(--line-soft);
  font-size:1.02em; line-height:1.5; color:var(--ink);
}
.check-list li::before{
  content:'✓';
  position:absolute; left:.65em; top:.62em;
  width:1.35em; height:1.35em; border-radius:.35em;
  display:flex; align-items:center; justify-content:center;
  background:var(--cp); color:#fff;
  font-size:.8em; font-weight:900; line-height:1;
}
.check-list li b, .check-list li strong{color:var(--cp); font-weight:800;}
/* 안 되면 안 되는 항목 (실패 신호) */
.check-list li.is-fail{background:var(--warn-soft); border-color:var(--warn);}
.check-list li.is-fail::before{content:'✕'; background:var(--warn);}

.check-cta{
  flex:0 0 auto; margin-top:1em;
  align-self:center;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.7em 1.5em;
  border-radius:999px;
  background:var(--cp); color:#fff;
  font-size:1.12em; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 8px 22px rgba(15,118,110,.28);
}
.check-cta::before{content:'🙋'; font-size:1.15em; line-height:1;}


/* ══════════════════════════════════════════════════════════════════════════
   10. ⑥ .trouble — 트러블슈팅 (경고 색상)
   ══════════════════════════════════════════════════════════════════════════ */
.slide.trouble{
  --accent:var(--warn); --accent-ink:var(--warn); --accent-soft:var(--warn-soft); --accent-deep:#8C1414;
  background:
    linear-gradient(180deg, var(--warn-soft) 0, var(--warn-soft) .55em, var(--paper) .55em);
}
.slide.trouble .slide-title{border-bottom-color:var(--warn);}
.slide.trouble .slide-title::before{content:'⚠'; color:var(--warn); font-size:.9em;}
.slide.trouble .slide-title .tag{background:var(--warn); color:#fff;}

.trouble-list{
  list-style:none;
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:1em;
  align-content:start;
  padding-right:.3em;
}
.trouble-list.one{grid-template-columns:1fr;}
.trouble-list > li{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:5px solid var(--warn);
  border-radius:var(--r-sm);
  padding:.85em 1.05em;
  box-shadow:var(--shadow-card);
}
.t-sym{
  font-size:1.02em; font-weight:800; color:var(--warn);
  line-height:1.4; margin-bottom:.4em;
  display:block;
}
.t-sym::before{content:'증상';
  display:inline-block; margin-right:.4em; vertical-align:.08em;
  padding:.16em .5em; border-radius:.35em;
  background:var(--warn-soft); color:var(--warn);
  font-size:.72em; font-weight:800; line-height:1.45;
}
.t-fix{
  font-size:.95em; color:var(--ink-soft); line-height:1.55;
  display:block;
}
.t-fix::before{content:'해법';
  display:inline-block; margin-right:.4em; vertical-align:.08em;
  padding:.16em .5em; border-radius:.35em;
  background:var(--cp-soft); color:var(--cp);
  font-size:.76em; font-weight:800; line-height:1.5;
}
.t-fix b, .t-fix strong{color:var(--ink); font-weight:700;}
.t-fix code{font-family:var(--font-mono); font-size:.9em;
  background:var(--paper-3); padding:.1em .35em; border-radius:.3em;}


/* ══════════════════════════════════════════════════════════════════════════
   11. 개요(O) 오버레이 — 전 슬라이드 썸네일 그리드
   ══════════════════════════════════════════════════════════════════════════ */
#overview{
  position:fixed; inset:0; z-index:100;
  background:rgba(11,17,32,.90);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:none; flex-direction:column;
}
#overview.show{display:flex;}
#overview-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 22px;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.14);
}
#overview-head h2{font-family:var(--font-title); font-size:17px; font-weight:800;}
#overview-head .hint{font-size:12.5px; color:#B9C6DE;}
#overview-close{
  padding:7px 14px; border-radius:8px;
  border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:13px; font-weight:700;
}
#overview-close:hover{background:rgba(255,255,255,.12);}
#overview-grid{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(228px,1fr));
  gap:14px; padding:20px 22px 34px;
  align-content:start;
}
.ov-item{
  display:flex; flex-direction:column; gap:6px;
  text-align:left; border-radius:10px; padding:0;
}
.ov-frame{
  position:relative;
  width:100%; aspect-ratio:16/9;
  overflow:hidden; border-radius:8px;
  background:#fff;
  border:2px solid rgba(255,255,255,.18);
  transition:border-color .16s var(--ease), transform .16s var(--ease);
}
.ov-item:hover .ov-frame{border-color:var(--amber); transform:translateY(-2px);}
.ov-item.current .ov-frame{border-color:var(--teal); box-shadow:0 0 0 3px rgba(45,212,191,.34);}
/* 클론된 슬라이드를 1280×720 로 렌더한 뒤 축소 */
.ov-scale{
  position:absolute; top:0; left:0;
  width:1280px; height:720px;
  transform-origin:top left;
  container-type:size; container-name:frame;
  pointer-events:none;
  background:#fff;
}
.ov-scale > .slide{
  position:absolute; inset:0;
  opacity:1!important; visibility:visible!important; transform:none!important;
  transition:none!important; animation:none!important;
}
.ov-meta{display:flex; align-items:baseline; gap:6px; padding:0 2px;}
.ov-num{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:#8A9BBD; flex:0 0 auto; font-variant-numeric:tabular-nums;
}
.ov-title{
  font-size:12.5px; font-weight:600; color:#EEF3FB;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. 인쇄 — 슬라이드 1장 = 1페이지
   ══════════════════════════════════════════════════════════════════════════ */
@page{size:A4 landscape; margin:0;}

@media print{
  html,body{
    width:auto; height:auto; overflow:visible;
    background:#fff;
  }
  #topbar, #progress, #overview, #toast, #kbd-hint, .navzone, .copy-btn{display:none!important;}

  #stage{position:static; inset:auto; display:block; overflow:visible; background:#fff;}

  #slide-frame{
    position:static;
    width:auto; height:auto; aspect-ratio:auto;
    box-shadow:none; overflow:visible;
    container-type:normal;          /* 인쇄에서는 컨테이너 쿼리 대신 고정 pt */
  }

  .slide{
    position:relative; inset:auto;
    display:flex!important;
    opacity:1!important; visibility:visible!important;
    transform:none!important; transition:none!important;
    width:100%; height:100vh;       /* 1장 = 1페이지 */
    page-break-after:always; break-after:page;
    page-break-inside:avoid; break-inside:avoid;
    font-size:11pt;                 /* cqw 대체 */
    box-shadow:none;
    border-bottom:1px solid #ddd;
    overflow:hidden;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .slide:last-child{page-break-after:auto; break-after:auto;}

  /* 인쇄 시 스크롤 컨테이너는 펼친다 */
  .codebox pre, .table-wrap, .lab-steps, .check-list,
  .trouble-list, .demo-steps{overflow:visible!important;}
  .codebox code{white-space:pre-wrap!important;}
  .slide.cover::after{display:none;}
}


/* ══════════════════════════════════════════════════════════════════════════
   13. 모션 축소 선호
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important;}
}