/* deckkit 구조 스타일 — 색은 전부 테마 토큰(themes/*.css)을 참조한다.
   여기에 원색(hex/rgb)을 직접 쓰지 말 것. scripts/validate-deck.mjs 가 잡는다. */

* { box-sizing:border-box; margin:0; }
html,body { height:100%; }

/* vw 기반 스케일 — 프로젝터·4K 에서 화면 크기에 비례해 커진다 */
body {
  background:var(--bg); color:var(--fg);
  font:clamp(18px, 1.5vw, 30px)/1.62 var(--font-sans);
  overflow:hidden;
}

.slide {
  display:none; position:absolute; inset:0;
  padding:8vh 8vw 10vh;
  flex-direction:column; justify-content:center;
}
.slide.on { display:flex; }

/* ---- 슬라이드 프리미티브 ---- */

.kicker {
  color:var(--accent); font-weight:700; font-size:clamp(14px,1vw,20px);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.2vh;
}
h1 { font-size:clamp(40px, 3.9vw, 76px); line-height:1.22; letter-spacing:-0.02em; }
h2 { font-size:clamp(32px, 2.9vw, 58px); line-height:1.25; letter-spacing:-0.01em; margin-bottom:3.2vh; }
h3 { font-size:clamp(22px, 1.8vw, 36px); line-height:1.3; margin-bottom:1.4vh; }
.sub { color:var(--muted); margin-top:1.8vh; font-size:clamp(18px,1.45vw,29px); }
.big { font-size:clamp(22px,1.8vw,36px); line-height:1.65; }
.mut { color:var(--muted); }

ul, ol { margin:0 0 0 1.2em; display:flex; flex-direction:column; gap:1.6vh; font-size:clamp(19px,1.5vw,30px); }
li b { color:var(--fg); }

code, pre {
  font-family:var(--font-mono); font-size:.9em;
  background:var(--panel); border:1px solid var(--border); border-radius:6px;
}
code { padding:1px 6px; }
pre { padding:1.6vh 1.4vw; overflow-x:auto; line-height:1.5; font-size:clamp(15px,1.15vw,24px); }

table { border-collapse:collapse; width:100%; font-size:clamp(16px,1.3vw,27px); }
th,td { border:1px solid var(--border); padding:1vh 1vw; text-align:left; }
th { background:var(--panel); }

.cols { display:grid; grid-template-columns:1fr 1fr; gap:3vw; align-items:start; }
.cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2vw; align-items:start; }

.flow { display:flex; align-items:center; gap:.7vw; flex-wrap:wrap; margin:2.2vh 0; }
.flow .box {
  background:var(--panel); border:2px solid var(--border); border-radius:var(--radius);
  padding:1.2vh 1.2vw; font-size:clamp(15px,1.2vw,25px); font-weight:600;
}
.flow .arr { color:var(--muted); font-size:clamp(18px,1.4vw,28px); }

.tag {
  display:inline-block; background:var(--panel); border:1px solid var(--border);
  border-radius:999px; padding:.3vh 1vw; font-size:clamp(13px,1vw,20px);
  color:var(--muted); margin:0 .4vw .8vh 0;
}
blockquote {
  border-left:4px solid var(--accent); padding-left:1.4vw;
  font-size:clamp(22px,1.9vw,38px); line-height:1.5;
}
blockquote cite { display:block; margin-top:1.4vh; font-size:.6em; color:var(--muted); font-style:normal; }

.stat { display:flex; gap:3vw; flex-wrap:wrap; margin:2vh 0; }
.stat .n { font-size:clamp(40px,4.4vw,88px); font-weight:800; line-height:1.05; letter-spacing:-0.03em; }
.stat .l { color:var(--muted); font-size:clamp(15px,1.15vw,24px); }

.ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); }

/* ---- 크롬 (슬라이드 밖 고정 요소) ---- */

.foot { position:fixed; bottom:2.2vh; right:1.8vw; color:var(--muted); font-size:clamp(12px,0.9vw,18px); }
.hint { position:fixed; bottom:2.2vh; left:1.8vw; color:var(--muted); font-size:clamp(12px,0.9vw,18px); }

#prog-track { position:fixed; top:0; left:0; right:0; height:0.6vh; min-height:4px; background:var(--border); z-index:10; }
#prog {
  height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), var(--prog-mid), var(--bad));
  background-size:100vw 100%; background-repeat:no-repeat;
  transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* 브랜드 마크 슬롯 — 덱이 자기 로고를 넣는 자리. 없으면 아무것도 안 보인다. */
.brand { display:block; color:var(--brand-fg); }
#brand-corner { position:fixed; top:2.4vh; right:1.8vw; width:clamp(120px,10vw,220px); z-index:9; opacity:.92; }
.brand-title { width:clamp(200px,16vw,340px); margin-bottom:4.5vh; }
.presenter { margin-top:6vh; font-size:clamp(18px,1.4vw,28px); }
.presenter b { color:var(--fg); }

/* ---- 공용 오버레이 (기능 모듈이 함께 쓰는 최소 규약) ----
   오버레이 루트에는 data-deck-ui 를 달아야 한다. 그래야 그 안의 클릭이
   슬라이드 이동으로 새지 않는다(engine/deck.js 의 클릭 내비 참고). */

.deck-pill {
  position:fixed; z-index:20; display:flex; align-items:center; gap:12px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:999px; padding:8px 18px; box-shadow:var(--shadow-pill);
}
.deck-btn {
  border:0; background:var(--accent); color:var(--accent-fg); border-radius:999px;
  padding:8px 20px; font:inherit; font-size:clamp(14px,1vw,19px); font-weight:700; cursor:pointer;
}
.deck-btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.deck-note { color:var(--muted); font-size:clamp(11px,0.8vw,15px); }

/* embed 모드 — 부모 프레임이 한 장만 축소 렌더할 때 크롬을 숨긴다 */
html.embed .hint, html.embed #prog-track, html.embed .foot,
html.embed #brand-corner, html.embed [data-deck-ui] { display:none !important; }
html.embed, html.embed body { background:transparent; }

/* 인쇄 — 한 장씩 페이지 분리 (내보내기 모듈이 없어도 브라우저 인쇄로 PDF 가 나온다) */
@media print {
  body { overflow:visible; background:#fff; }
  .slide { display:flex !important; position:relative; inset:auto; break-after:page; height:100vh; }
  #prog-track, .hint, .foot, #brand-corner, [data-deck-ui] { display:none !important; }
}