/* ================================================================
   my-slides 엔진: 사진 반응 · 확대 · 타이머 · 펜 · 도움말
   테마는 --kit-* 변수만 바꾼다
   ================================================================ */
:root{--kit-accent:var(--coral,#FF5B3A);--kit-ink:var(--ink,#16141A);--kit-paper:var(--cream,#F3ECE0);--kit-ff:var(--ff,system-ui,sans-serif)}

/* ----- 사진: 커서를 올리면 떠오르며 기울고, 빛이 지나간다 ----- */
.zp-host{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d;will-change:transform}
.zp-host img.zp{cursor:zoom-in}
body[data-mode] .slide .zp-host.zp-hot{
  transform:perspective(1100px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-10px) scale(1.035);
  box-shadow:0 0 0 4px var(--kit-accent),0 28px 60px -18px rgba(22,20,26,.55);z-index:5;transition:transform .12s linear,box-shadow .35s}
body[data-mode] .slide figure.zp-host.zp-hot{border-radius:.7em}
.zp-host.zp-glare{position:relative}
.zp-host.zp-glare::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.45),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light}
.zp-host.zp-glare.zp-hot::after{opacity:1}
.zp-hint{position:absolute;right:.5em;top:.5em;z-index:6;width:1.6em;height:1.6em;border-radius:50%;background:var(--kit-ink);color:var(--kit-paper);display:flex;align-items:center;justify-content:center;font-size:.7em;opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.zp-hot > .zp-hint{opacity:1;transform:scale(1)}

/* ----- 사진 확대 (라이트박스): 원본 전체, 장은 넘어가지 않는다 ----- */
#kitLbx{position:fixed;inset:0;z-index:9999;background:rgba(16,14,20,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;cursor:zoom-out;padding:3vh 3vw}
#kitLbx.on{opacity:1;visibility:visible}
#kitLbx img{max-width:92vw;max-height:84vh;border-radius:14px;box-shadow:0 0 0 5px #fff,0 40px 100px rgba(0,0,0,.55);transform:scale(.9) rotate(-1.5deg);transition:transform .45s cubic-bezier(.2,1.4,.3,1)}
#kitLbx.on img{transform:none}
#kitLbx p{color:#fff;font:700 18px/1.4 var(--kit-ff);opacity:.85;text-align:center;max-width:80vw}

/* ----- 강사 도구 단추 (상단 바 안) ----- */
.kitbtns{display:flex;gap:6px}
.kitbtns button{font-size:12px;font-weight:900;padding:6px 10px;border-radius:99px;border:2px solid var(--kit-ink)}
.kitbtns button.on{background:var(--kit-ink);color:var(--kit-paper)}
body[data-mode="present"] .kitbtns{pointer-events:auto;opacity:.35;transition:opacity .3s}
body[data-mode="present"] .topbar:hover .kitbtns{opacity:1}
body[data-mode="present"] .kitbtns button{font-size:12px;padding:5px 10px}

/* ----- 타이머: 끌어서 옮기는 둥근 창 ----- */
#kitTimer{position:fixed;right:24px;top:64px;z-index:120;width:250px;background:#fff;color:var(--kit-ink);border:3px solid var(--kit-ink);border-radius:28px;box-shadow:8px 8px 0 var(--kit-ink);font-family:var(--kit-ff);user-select:none;touch-action:none}
#kitTimer[hidden]{display:none}
#kitTimer .kt-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 0;cursor:grab;font-size:13px;font-weight:900;letter-spacing:.08em}
#kitTimer .kt-hd button{width:26px;height:26px;border-radius:50%;font-size:16px;line-height:1;border:2px solid var(--kit-ink)}
#kitTimer .kt-t{font-size:64px;font-weight:900;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;padding:4px 0 0;cursor:text;position:relative}
#kitTimer .kt-t::after{content:"";display:block;width:56%;height:6px;margin:2px auto 0;border-radius:6px;background:var(--kit-accent)}
#kitTimer input.kt-in{width:80%;margin:6px 10%;font:900 40px var(--kit-ff);text-align:center;border:3px solid var(--kit-accent);border-radius:14px}
#kitTimer .kt-pre{display:flex;gap:6px;justify-content:center;padding:10px 10px 0}
#kitTimer .kt-pre button{font-size:13px;font-weight:900;padding:4px 10px;border-radius:99px;border:2px solid var(--kit-ink)}
#kitTimer .kt-pre button:hover{background:var(--kit-ink);color:#fff}
#kitTimer .kt-go{display:flex;gap:8px;justify-content:center;padding:12px 0 16px}
#kitTimer .kt-go button{font-size:16px;font-weight:900;padding:8px 18px;border-radius:99px;border:2.5px solid var(--kit-ink)}
#kitTimer .kt-go .kt-play{background:var(--kit-accent);border-color:var(--kit-accent);color:#fff}
#kitTimer.min .kt-pre,#kitTimer.min .kt-go{display:none}
#kitTimer.min{width:170px}
#kitTimer.min .kt-t{font-size:40px;padding-bottom:10px}
#kitTimer.warn .kt-t{color:var(--kit-accent)}
#kitTimer.done{animation:ktBlink .5s 6 alternate}
@keyframes ktBlink{to{background:var(--kit-accent);color:#fff}}

/* ----- 펜: 화면 위에 그리기 ----- */
#kitPen{position:fixed;inset:0;z-index:110;cursor:crosshair;touch-action:none}
#kitPen[hidden]{display:none}
#kitPenBar{position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:121;display:flex;flex-direction:column;gap:8px;align-items:center;padding:12px 8px;background:#fff;border:3px solid var(--kit-ink);border-radius:20px;box-shadow:6px 6px 0 var(--kit-ink);font-family:var(--kit-ff)}
#kitPenBar[hidden]{display:none}
#kitPenBar button{width:44px;height:44px;border-radius:12px;font-size:13px;font-weight:900;line-height:1.1;border:2px solid transparent}
#kitPenBar button.on{border-color:var(--kit-ink);background:var(--kit-paper)}
#kitPenBar .sw{width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--kit-ink);padding:0}
#kitPenBar .sw.on{box-shadow:0 0 0 4px var(--kit-ink)}
#kitPenBar hr{width:30px;border:0;border-top:2px dashed rgba(22,20,26,.25)}
@media (max-width:760px),(orientation:portrait) and (max-width:900px){
  #kitPenBar{top:auto;bottom:12px;left:50%;transform:translateX(-50%);flex-direction:row;padding:6px 8px}
  #kitPenBar hr{width:0;height:26px;border-top:0;border-left:2px dashed rgba(22,20,26,.25)}
  #kitTimer{right:12px;top:60px}
}

/* ----- 알림 · 도움말 ----- */
#kitToast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);z-index:130;background:var(--kit-ink);color:var(--kit-paper);font:900 17px var(--kit-ff);padding:10px 18px;border-radius:99px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
#kitToast.on{opacity:1;transform:translateX(-50%)}
#kitHelp{position:fixed;inset:0;z-index:140;background:rgba(16,14,20,.6);display:flex;align-items:center;justify-content:center;font-family:var(--kit-ff)}
#kitHelp[hidden]{display:none}
#kitHelp .kh{background:#fff;color:var(--kit-ink);border:3px solid var(--kit-ink);border-radius:24px;box-shadow:10px 10px 0 var(--kit-ink);padding:26px 32px;max-width:640px;width:92vw}
#kitHelp h3{font-size:24px;font-weight:900;margin-bottom:12px}
#kitHelp dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:16px}
#kitHelp dt{font-weight:900}
#kitHelp kbd{display:inline-block;min-width:1.8em;text-align:center;padding:1px 7px;border:2px solid var(--kit-ink);border-bottom-width:4px;border-radius:7px;font:900 14px var(--kit-ff);margin-right:3px}

@media (prefers-reduced-motion:reduce){body[data-mode] .slide .zp-host.zp-hot{transform:none}}

/* ----- 줄바꿈 미감: 제목은 줄 길이를 고르게, 본문은 끝줄에 한 낱말만 남지 않게 ----- */
.slide .title,.slide .ctitle .l1,.slide .ctitle .l2,.slide h3{text-wrap-style:balance}
.slide p,.slide li,.slide figcaption,.slide dd{text-wrap-style:pretty}
.nw{white-space:nowrap}