/* 강사 교육 슬라이드 공통 틀 — 1920×1080 무대를 화면에 맞춰 줄인다(프로젝터용 밝은 한 가지 모양).
   덱을 쓰는 사람이 쓰는 클래스(이것만 쓰면 모양이 맞는다):
   - 무대: <main class="deck" data-deck="이름"> > <section class="slide" data-place="촬영장" data-timer="20">
   - 글: .kicker(작은 머리말) · h1(표지) · h2(장 제목) · .lead(큰 한 줄 안내) · p · ul.dots · ol.steps
   - 버튼 이름: <span class="ui">이 주인공으로 시작하기</span>   큰 할 일 상자: .do-now
   - 배치: .row(가로 나눔, 자식은 .col 또는 .col-2 등) · .grid2 · .grid3 · .grid4 · .center
   - 상자: .card · .tip(회색) · .warn(호박) · .yay(코랄) · .ok(초록) · .qa(학생 질문 → 답, 안에 .q·.a)
   - 그림: figure.shot(그림+figcaption) · figure.click[data-steps](누르면 다음 화면) · .badge(그림 위 꼬리표)
   - 세 칸 틀: .flow3 > .screen · .values · .result (화면 → 넣은 값 → 결과)
   - 값 카드: .values 안 dl > dt(이름) dd(값)
   - 강사 노트: <aside class="notes"><p data-k="할 말">…</p><p data-k="시간">…</p><p data-k="볼 것">…</p><p data-k="막히면">…</p></aside>
   - 색 낱말: .c-brand · .c-accent · .c-warn · .c-ok · .muted */
:root{
  --bg:#E9EDF3; --paper:#F7F9FC; --surface:#FFFFFF; --subtle:#F3F5F9; --line:#D8DFE7; --line2:#E9EDF3;
  --fg:#0C1827; --fg2:#313F52; --fg3:#5E6C7E;
  --brand:#0460B3; --brand-fg:#014F96; --brand-weak:#F0F6FF;
  --accent:#F57150; --accent-fg:#8E3A23; --accent-weak:#FFF4F2;
  --warn:#704501; --warn-weak:#FFF6E7; --warn-line:#E0A23A;
  --ok:#0F6A46; --ok-weak:#EAFBF1;
  --ink:#0C1827;
  --font:"Pretendard Variable","Pretendard","Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
.deck{position:fixed;inset:0}
.slide{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;transform:scale(var(--s,0.5));
  background:var(--paper);display:none;flex-direction:column;gap:28px;padding:84px 120px 96px;overflow:hidden;font-size:32px;line-height:1.5}
.slide.on{display:flex}
.slide.dark{background:var(--ink);color:#F1F4F8}
.slide.dark .lead,.slide.dark p{color:#CAD2DC}

/* 글 */
.kicker{font-size:28px;font-weight:800;color:var(--brand-fg);letter-spacing:.02em}
h1{font-size:96px;line-height:1.18;font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance}
h2{font-size:64px;line-height:1.22;font-weight:800;letter-spacing:-.025em;margin:0;text-wrap:balance}
h3{font-size:40px;line-height:1.3;font-weight:800;letter-spacing:-.02em;margin:0}
.lead{font-size:40px;line-height:1.45;color:var(--fg2);margin:0;font-weight:500}
p{margin:0}
.muted{color:var(--fg3)}
.c-brand{color:var(--brand-fg)} .c-accent{color:var(--accent-fg)} .c-warn{color:var(--warn)} .c-ok{color:var(--ok)}
ul.dots,ol.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px}
ul.dots li{position:relative;padding-left:40px;color:var(--fg2)}
ul.dots li::before{content:"";position:absolute;left:8px;top:.62em;width:14px;height:14px;border-radius:50%;background:var(--brand)}
ol.steps{counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding-left:76px;min-height:52px;color:var(--fg2)}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;background:var(--brand);color:#FFFFFF;font-weight:800;display:grid;place-items:center;font-size:28px}
b,strong{color:var(--fg);font-weight:800}
.ui{display:inline-block;background:var(--brand-weak);color:var(--brand-fg);font-weight:800;border-radius:12px;padding:0 14px;line-height:1.5;white-space:nowrap;border:2px solid #BFD8F5}
.do-now{background:var(--brand);color:#FFFFFF;border-radius:28px;padding:28px 40px;font-size:44px;font-weight:800;display:flex;align-items:center;gap:24px}
.do-now .ui{background:#FFFFFF;border-color:#FFFFFF}

/* 배치 */
.row{display:flex;gap:48px;align-items:flex-start;min-height:0;flex:1}
.row>*{min-width:0}
.col{flex:1;display:flex;flex-direction:column;gap:24px;min-width:0}
.col-2{flex:2;display:flex;flex-direction:column;gap:24px;min-width:0}
.col-3{flex:3;display:flex;flex-direction:column;gap:24px;min-width:0}
.grid2,.grid3,.grid4{display:grid;gap:28px;min-height:0}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center{align-items:center;justify-content:center;text-align:center}
.grow{flex:1;min-height:0}

/* 상자 */
.card{background:var(--surface);border-radius:28px;padding:32px 36px;box-shadow:0 2px 4px rgba(12,24,39,.05),0 12px 32px rgba(12,24,39,.07);display:flex;flex-direction:column;gap:16px}
.tip,.warn,.yay,.ok{border-radius:24px;padding:26px 32px;display:flex;flex-direction:column;gap:10px;color:var(--fg2)}
.tip{background:var(--subtle)}
.warn{background:var(--warn-weak);border-left:10px solid var(--warn-line)}
.warn h3,.warn b{color:var(--warn)}
.yay{background:var(--accent-weak)}
.yay h3,.yay b{color:var(--accent-fg)}
.ok{background:var(--ok-weak)}
.ok h3,.ok b{color:var(--ok)}
.qa{display:flex;flex-direction:column;gap:12px}
.qa .q,.qa .a{border-radius:24px;padding:16px 26px;max-width:92%;font-size:30px}
.qa .q{background:var(--subtle);align-self:flex-start;border-bottom-left-radius:6px}
.qa .q::before{content:"학생  ";font-weight:800;color:var(--fg3)}
.qa .a{background:var(--brand-weak);align-self:flex-end;border-bottom-right-radius:6px;color:var(--fg)}
.qa .a::before{content:"선생님  ";font-weight:800;color:var(--brand-fg)}

/* 그림 */
figure{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;position:relative}
figure img,figure video{display:block;max-width:100%;max-height:var(--h,720px);width:auto;height:auto;border-radius:18px;object-fit:contain;background:var(--surface)}
figure.shot img,figure.shot video{box-shadow:0 2px 4px rgba(12,24,39,.06),0 10px 28px rgba(12,24,39,.10)}
figcaption{font-size:30px;color:var(--fg3);font-weight:600}
/* 번호 핀: <div class="pinbox"><img …><span class="pin" style="left:5%;top:3%">1</span></div> */
.pinbox{position:relative;width:fit-content;max-width:100%;line-height:0}
.pin{position:absolute;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--accent);color:#FFFFFF;font-weight:800;font-size:30px;line-height:56px;text-align:center;box-shadow:0 0 0 5px #FFFFFF,0 4px 12px rgba(12,24,39,.3);z-index:2}
ol.pins{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px;counter-reset:p}
ol.pins li{counter-increment:p;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;color:var(--fg2);font-size:30px}
ol.pins li::before{content:counter(p);width:46px;height:46px;border-radius:50%;background:var(--accent);color:#FFFFFF;font-weight:800;display:grid;place-items:center;font-size:24px;margin-top:2px}
.badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--brand);color:#FFFFFF;font-weight:800;font-size:24px;border-radius:999px;padding:4px 18px}
.badge.no{background:rgba(12,24,39,.72)}
.badge.hot{background:var(--accent)}
.picked img{outline:6px solid var(--brand);outline-offset:4px}

/* 누르면 이렇게 나와요 */
figure.click{position:relative;align-items:flex-start}
.click .box{position:relative;display:block;width:fit-content;max-width:100%;line-height:0;overflow:hidden;border-radius:18px}
.click .box img{transition:opacity .25s}
.click .hot{position:absolute;border:6px solid var(--accent);border-radius:16px;box-shadow:0 0 0 9999px rgba(12,24,39,.18),0 0 0 6px rgba(245,113,80,.35);
  cursor:pointer;background:transparent;padding:0;animation:pulse 1.6s ease-in-out 2}
.click .say{position:absolute;transform:translate(-50%,-100%);margin-top:-18px;background:var(--accent);color:#FFFFFF;font-weight:800;font-size:26px;line-height:1.3;
  border-radius:16px;padding:10px 18px;white-space:nowrap;pointer-events:none;z-index:2}
.click .say.below{transform:translate(-50%,0);margin-top:18px}
.click .say.lean-right{transform:translate(-100%,-100%)}
.click .say.lean-right.below{transform:translate(-100%,0)}
.click .say.lean-left{transform:translate(0,-100%)}
.click .say.lean-left.below{transform:translate(0,0)}
.click .cursor{position:absolute;width:44px;height:44px;pointer-events:none;z-index:3;transition:left .9s cubic-bezier(.3,.7,.2,1),top .9s cubic-bezier(.3,.7,.2,1)}
.click .cursor svg{width:44px;height:44px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.click .mask{position:absolute;background:rgba(243,245,249,.94);border:3px dashed #7A8799;border-radius:12px;display:grid;place-items:center;text-align:center;
  font-size:18px;line-height:1.2;font-weight:800;color:var(--fg2);padding:2px;overflow:hidden}
.click .stepno{position:absolute;right:14px;top:14px;background:rgba(12,24,39,.75);color:#FFFFFF;font-size:24px;font-weight:800;border-radius:999px;padding:4px 16px;line-height:1.4}
.click .again{position:absolute;right:14px;bottom:14px;background:#FFFFFF;color:var(--brand-fg);font:inherit;font-size:24px;font-weight:800;border:2px solid var(--brand);border-radius:999px;padding:6px 18px;cursor:pointer;line-height:1.3}
.click figcaption .now{color:var(--accent-fg);font-weight:800}
@keyframes pulse{0%,100%{box-shadow:0 0 0 9999px rgba(12,24,39,.18),0 0 0 6px rgba(245,113,80,.35)}50%{box-shadow:0 0 0 9999px rgba(12,24,39,.18),0 0 0 18px rgba(245,113,80,.15)}}
@media (prefers-reduced-motion: reduce){.click .hot{animation:none}.click .cursor{transition:none}}

/* 세 칸 틀: 화면 → 넣은 값 → 결과 */
.flow3{display:grid;grid-template-columns:minmax(0,1.25fr) 64px minmax(0,.8fr) 64px minmax(0,1.25fr);align-items:center;gap:0;flex:1;min-height:0}
.flow3>div{min-width:0;display:flex;flex-direction:column;gap:14px}
.flow3 .arrow{display:grid;place-items:center;color:var(--accent);font-size:64px;font-weight:800}
.flow3 .head{font-size:26px;font-weight:800;color:var(--fg3);letter-spacing:.02em}
.flow3 .values{background:var(--surface);border-radius:24px;padding:24px 28px;box-shadow:0 2px 4px rgba(12,24,39,.05),0 10px 26px rgba(12,24,39,.07)}
.flow3 dl{margin:0;display:flex;flex-direction:column;gap:10px}
.flow3 dt{font-size:24px;color:var(--fg3);font-weight:700}
.flow3 dd{margin:0 0 6px;font-size:32px;font-weight:800;color:var(--fg)}

/* 엔진이 그리는 것 */
.deck-map{position:absolute;right:56px;top:28px;display:flex;align-items:center;gap:6px;font-size:22px;font-weight:700;color:var(--fg3);z-index:4}
.deck-map span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:2px solid var(--line2);white-space:nowrap}
.deck-map span.here{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
.deck-map span.here::after{content:" · 지금 여기"}
.deck-map i{width:10px;height:2px;background:var(--line)}
.slide.dark .deck-map span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#ABB5C2}
.slide.dark .deck-map span.here{background:var(--accent);color:#FFFFFF}
.deck-foot{position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--line2);z-index:4}
.deck-foot b{display:block;height:100%;background:var(--brand);transition:width .25s}
.deck-page{position:absolute;right:48px;bottom:26px;font-size:22px;font-weight:700;color:var(--fg3);z-index:4;font-variant-numeric:tabular-nums}
.deck-name{position:absolute;left:48px;bottom:26px;font-size:22px;font-weight:700;color:var(--fg3);z-index:4}
.deck-timer{position:absolute;right:48px;bottom:64px;z-index:5;background:var(--ink);color:#FFFFFF;border-radius:24px;padding:14px 28px;display:flex;align-items:baseline;gap:14px;font-variant-numeric:tabular-nums}
.deck-timer b{color:#FFFFFF;font-size:56px;line-height:1}
.deck-timer small{font-size:22px;color:#ABB5C2;font-weight:700}
.slide.dark .deck-timer{background:#FFFFFF;color:var(--ink)}
.slide.dark .deck-timer b{color:var(--ink)}
.slide.dark .deck-timer small{color:var(--fg3)}
.deck-timer.done{background:var(--accent)}
.deck-timer.done small{color:#FFFFFF}

/* 강사 노트: 기본 숨김, N 키로 겹쳐 보기 */
.notes{display:none}
body.show-notes .notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:absolute;left:40px;right:40px;bottom:44px;z-index:8;
  background:#0C1827;color:#F1F4F8;border-radius:24px;padding:24px 28px;font-size:24px;line-height:1.45}
body.show-notes .notes p{color:#F1F4F8}
body.show-notes .notes p::before{content:attr(data-k);display:block;font-weight:800;color:#8FBEFA;font-size:20px;margin-bottom:4px}
.deck-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#FFFFFF;border-radius:999px;padding:10px 22px;font-size:16px;z-index:10;opacity:0;transition:opacity .2s;pointer-events:none}
.deck-toast.on{opacity:1}
.deck-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:9;display:flex;gap:6px;opacity:.3;transition:opacity .2s}
.deck-nav:hover,.deck-nav:focus-within{opacity:1}
.deck-nav button{font:inherit;font-size:14px;font-weight:700;border:1px solid var(--line);background:#FFFFFF;color:var(--fg2);border-radius:10px;padding:6px 10px;cursor:pointer}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media print{body{overflow:visible}.slide{position:relative;display:flex!important;transform:none;margin:0;left:0;top:0;page-break-after:always}.deck-nav,.deck-toast{display:none}}