/* ============================================================
   Slide chrome — shared by every slide type (4:3, 1024×768).
   Loaded with colors_and_type.css.
   ============================================================ */

.slide {
  position: relative;
  width: var(--slide-w);
  height: var(--slide-h);
  background: var(--ink-0);
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--ink-900);
}

/* ============================================================
   Korean line-breaking — 어절 단위로만 끊고 음절 중간 break 차단.
   "운전이 불편합니다"가 "불편합 / 니다"로 끊기는 현상 방지.
   :where()로 specificity 0 — 후속 룰이 자유롭게 덮을 수 있음.
   ============================================================ */
.slide :where(h1, h2, h3, h4, .title-block h1, .hero-h1) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ============================================================
   .slide-content — 본문 슬라이드의 콘텐츠 영역 (flex column).
   absolute 좌표 패치 제거 후 정식 레이아웃 시스템.
   - top:120, bottom:96 으로 chrome(topbar/footer)을 자동 회피
   - bottom:96 보장으로 푸터 안전영역(y≤672) CSS 레벨 강제
   - overflow:hidden 으로 콘텐츠 초과 시 즉시 가시화 (디자이너 신호)
   - flex column + gap:32 로 title-block과 본문 사이 일관된 32px 갭
   ============================================================ */
.slide-content {
  position: absolute;
  top: 120px;
  left: 80px;
  right: 80px;
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
}

/* ---------- Stage wrapper — exactly the slide size, no chrome,
   so the slide renders edge-to-edge in DS preview cards at 1024×768.
   Wider browsers see a centered slide with a neutral letterbox. */
.stage {
  width: var(--slide-w);
  height: var(--slide-h);
  margin: 0 auto;
  overflow: hidden;
}
html, body { background: #f1f1f1; }
@media (min-width: 1100px) {
  body { padding: 24px 0; background: #1a1a1a; }
  .stage { box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
}

/* ---------- Top chrome ---------- */
.slide-topbar {
  position: absolute;
  top: 32px;
  left: 80px;
  right: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}
.slide-topbar .crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  text-transform: uppercase;
}
.slide-topbar .crumb .sep { color: var(--ink-300); }
.slide-topbar .brand-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.slide-topbar .brand-mark::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--eduwill-yellow);
  border-radius: 4px;
  display: inline-block;
}

/* ---------- Bottom chrome ---------- */
.slide-footer {
  position: absolute;
  bottom: 28px;
  left: 80px;
  right: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-500);
  z-index: 3;
}
.slide-footer .chapter {
  font-weight: 600;
  color: var(--ink-700);
}
.slide-footer .pageno {
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-900);
}
.slide-footer .pageno b {
  color: var(--eduwill-yellow-700);
  font-weight: 900;
  margin-right: 2px;
}

/* ---------- Category tag (consistent identifier across deck) ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--ink-1000);
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 2px;
  text-transform: uppercase;
}
.tag.yellow {
  background: var(--eduwill-yellow);
  color: var(--ink-1000);
}
.tag.outline {
  background: transparent;
  color: var(--ink-1000);
  box-shadow: inset 0 0 0 2px var(--ink-1000);
}
.tag.ok { background: var(--ok-500); color: white; }
.tag.err { background: var(--err-500); color: white; }
.tag.info { background: var(--info-500); color: white; }

/* ---------- Title block ---------- */
.title-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.title-block .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--eduwill-yellow-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.title-block .eyebrow::before {
  content: "";
  width: 32px;
  height: 3px;
  background: var(--eduwill-yellow);
}
.title-block h1 {
  margin: 0;
  font: 900 44px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink-1000);
}
.title-block h1 .accent {
  background: linear-gradient(transparent 65%, var(--eduwill-yellow) 65%, var(--eduwill-yellow) 95%, transparent 95%);
  padding: 0 4px;
}
.title-block .sub {
  font-size: 20px;
  color: var(--ink-700);
  font-weight: 500;
}

/* ---------- Highlight (marker style) ---------- */
.hl {
  background: linear-gradient(transparent 60%, var(--eduwill-yellow) 60%, var(--eduwill-yellow) 95%, transparent 95%);
  padding: 0 2px;
  font-weight: 700;
}
.hl-soft {
  background: var(--eduwill-yellow-200);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

/* ---------- Containers ---------- */
.card {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-3);
  padding: 24px 28px;
}
.card.flat {
  border: none;
  background: var(--ink-100);
}
.callout {
  border-left: 6px solid var(--eduwill-yellow);
  background: var(--eduwill-yellow-50);
  padding: 20px 24px;
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
.callout.info { border-color: var(--info-500); background: var(--info-50); }
.callout.warn { border-color: var(--warn-500); background: var(--warn-100); }
.callout.err  { border-color: var(--err-500);  background: var(--err-50); }
.callout.ok   { border-color: var(--ok-500);   background: var(--ok-50); }

.callout .label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--eduwill-yellow-700);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.callout.info .label { color: var(--info-700); }
.callout.warn .label { color: var(--warn-700); }
.callout.err  .label { color: var(--err-700); }
.callout.ok   .label { color: var(--ok-700); }
.callout .body { font-size: 18px; line-height: 1.6; color: var(--ink-900); }

/* ---------- Choice list (객관식 보기) ---------- */
.choices { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.choice {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  background: var(--ink-50);
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-2);
  font-size: 19px;
  line-height: 1.4;
}
.choice .num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink-0);
  border: 1.5px solid var(--ink-300);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-700);
}
.choice.is-correct {
  background: var(--ok-50);
  border-color: var(--ok-500);
  font-weight: 600;
}
.choice.is-correct .num {
  background: var(--ok-500);
  border-color: var(--ok-500);
  color: white;
}
.choice.is-wrong {
  background: var(--err-50);
  border-color: var(--err-500);
}
.choice.is-wrong .num {
  background: var(--err-500);
  border-color: var(--err-500);
  color: white;
}

/* ---------- Table ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
}
.tbl thead th {
  background: var(--ink-1000);
  color: var(--ink-0);
  font-weight: 700;
  padding: 14px 18px;
  text-align: left;
  letter-spacing: -0.01em;
}
.tbl thead th:first-child { border-top-left-radius: 8px; }
.tbl thead th:last-child  { border-top-right-radius: 8px; }
.tbl tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-200);
  color: var(--ink-900);
}
.tbl tbody tr:nth-child(even) td { background: var(--ink-50); }
.tbl tbody tr.hi td {
  background: var(--eduwill-yellow-100);
  font-weight: 700;
}
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--font-mono); }

/* ---------- Code block ---------- */
.code {
  background: var(--code-bg);
  color: var(--code-fg);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.55;
  padding: 18px 22px;
  border-radius: var(--r-2);
  overflow: hidden;
  position: relative;
  /* 코드 블록은 HTML 개행·들여쓰기를 그대로 렌더 (키워드 줄바꿈 가독성).
     pre-wrap: 의도한 개행 보존 + 너무 긴 줄은 wrap해 가로 클리핑 방지. */
  white-space: pre-wrap;
  tab-size: 2;
}
.code::before {
  content: "SQL";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--eduwill-yellow);
  opacity: 0.7;
}
.code .kw { color: var(--code-keyword); font-weight: 700; }
.code .st { color: var(--code-string); }
.code .nm { color: var(--code-number); }
.code .cm { color: var(--code-comment); font-style: italic; }
.code .tb { color: var(--code-table); }

/* ---------- Big number / stat ---------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat .num {
  font: 900 88px/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--ink-1000);
  font-variant-numeric: tabular-nums;
}
.stat .num .unit { font-size: 36px; color: var(--ink-700); margin-left: 4px; }
.stat .label { font-size: 18px; color: var(--ink-500); font-weight: 600; }

/* ============================================================
   재사용 본문 컴포넌트 (Phase 0 승격, 2026-05-28)
   ─ 4강 화면설계 데크 작업 중 검증된 컴포넌트들을 _slide.css 코어로 승격.
   ─ 모든 자격증·과목에서 즉시 재사용 가능. lecture.css 중복 정의 금지.
   ============================================================ */

/* ---------- def-box · 용어 정식 정의 박스 (다크 배경 + 노란 약어) ---------- */
.def-box {
  display: grid;
  grid-template-columns: 132px 1fr;
  background: var(--ink-1000);
  border-radius: 12px;
  overflow: hidden;
  align-items: stretch;
}
.def-box .term {
  background: var(--eduwill-yellow);
  color: var(--ink-1000);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.def-box .term .abbr { font: 800 44px/1 var(--font-sans); letter-spacing: -0.02em; }
.def-box .term .full { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin-top: 6px; opacity: 0.75; }
.def-box .body { padding: 24px 28px; color: white; display: flex; flex-direction: column; justify-content: center; }
.def-box .body .label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--eduwill-yellow); text-transform: uppercase; }
.def-box .body .text { margin-top: 8px; font-size: 20px; line-height: 1.55; color: white; font-weight: 500; }
.def-box .body .text b { color: var(--eduwill-yellow); font-weight: 700; }

/* ---------- metaphor · 비유 카드 (검정 좌측 바 + 노란 아이콘) ---------- */
.metaphor {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: var(--ink-50);
  border-left: 5px solid var(--ink-1000);
  border-radius: 0 8px 8px 0;
}
.metaphor .icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--ink-1000);
  color: var(--eduwill-yellow);
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 22px;
  font-weight: 800;
}
.metaphor .text { font-size: 17px; line-height: 1.55; color: var(--ink-900); }
.metaphor .text b { color: var(--ink-1000); }

/* ---------- mnemonic · 두문자어 강조 박스 ---------- */
.mnemonic {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: var(--ink-1000);
  color: white;
  border-radius: 10px;
}
.mnemonic .label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--eduwill-yellow); text-transform: uppercase; }
.mnemonic .phrase { flex: 1; font-size: 22px; font-weight: 700; color: white; }
.mnemonic .phrase .keep { color: var(--eduwill-yellow); font-weight: 800; }

/* ---------- real · 실무 연결 strip (정보색 좌측 바) ---------- */
.real {
  border-radius: 10px;
  background: var(--info-50);
  border-left: 5px solid var(--info-500);
  padding: 14px 20px;
}
.real .label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--info-700); text-transform: uppercase; }
.real .text { margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--ink-900); }

/* ---------- pass-tip · 합격 공식 strip (노란 좌측 바) ---------- */
.pass-tip {
  border-radius: 10px;
  background: var(--eduwill-yellow-100);
  border-left: 5px solid var(--eduwill-yellow);
  padding: 14px 20px;
}
.pass-tip .label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--eduwill-yellow-700); text-transform: uppercase; }
.pass-tip .text { margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--ink-1000); }

/* ---------- cmp-tbl · 비교표 (좌측 라벨 컬럼 + 다크 헤더) ---------- */
.cmp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.cmp-tbl thead th {
  background: var(--ink-1000);
  color: var(--eduwill-yellow);
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
}
.cmp-tbl thead th:first-child { color: white; }
.cmp-tbl tbody td { padding: 12px 18px; border-bottom: 1px solid var(--ink-200); }
.cmp-tbl tbody td:first-child {
  font-weight: 700;
  color: var(--ink-700);
  width: 130px;
  background: var(--ink-50);
}
.cmp-tbl tbody tr:last-child td { border-bottom: none; }

/* ---------- trap-row · 함정 패턴 행 (오답 시그널 → 정답 연결) ---------- */
.trap-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid var(--ink-200);
  border-radius: 10px;
  font-size: 15px;
}
.trap-row + .trap-row { margin-top: 8px; }
.trap-row .n {
  width: 28px;
  height: 28px;
  background: var(--err-500);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 800;
  border-radius: 6px;
  font-size: 13px;
}
.trap-row .trap { color: var(--ink-700); font-weight: 500; }
.trap-row .trap::before { content: "✗ "; color: var(--err-500); font-weight: 800; }
.trap-row .answer { color: var(--ink-1000); font-weight: 700; }
.trap-row .answer::before { content: "→ "; color: var(--ok-500); font-weight: 800; }

/* ---------- q-source · 기출 출처 칩 (회차·년도·빈출도) ---------- */
.q-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--ink-100);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}

/* ---------- tbl/callout 의 .compact 변형 (안전영역 보존용) ---------- */
.tbl.compact { font-size: 15px; }
.tbl.compact thead th { padding: 10px 16px; }
.tbl.compact tbody td { padding: 10px 16px; line-height: 1.35; }
.callout.compact { padding: 14px 18px; }
.callout.compact .label { font-size: 12px; margin-bottom: 4px; }
.callout.compact .body { font-size: 16px; line-height: 1.5; }


/* ---------- Watermark grid pattern (subtle background motif) ---------- */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ink-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-100) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.slide > *:not(.bg-grid) { z-index: 1; }

/* ============================================================
   푸터 안전영역 시각 진단 — `?debug=safe-zone` URL 파라미터로 활성화.
   _slide.js의 checkSafeZone()이 body에 .debug-safe-zone 클래스를 박고,
   콘텐츠가 y=672 초과 슬라이드에 .has-overflow를 추가함.
   ============================================================ */
body.debug-safe-zone .slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 672px;
  height: 0;
  border-top: 2px dashed #DC2626;
  z-index: 9999;
  pointer-events: none;
}
body.debug-safe-zone .slide::before {
  content: "← y=672  safe zone limit (콘텐츠 침범 금지)";
  position: absolute;
  right: 8px;
  top: 656px;
  font: 700 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: #DC2626;
  background: rgba(255,255,255,0.92);
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 10000;
  pointer-events: none;
}
body.debug-safe-zone .slide.has-overflow {
  outline: 3px solid #DC2626;
  outline-offset: -3px;
}
body.debug-safe-zone .slide.has-overflow::before {
  content: "🚨 OVERFLOW — 컨텐츠가 푸터를 침범 중";
  background: #DC2626;
  color: white;
}

/* corner accent yellow blob */
.bg-accent-corner::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background: var(--eduwill-yellow);
  border-radius: 999px;
  filter: blur(0);
  z-index: 0;
}
.bg-accent-corner.tr::before { top: -180px; right: -180px; }
.bg-accent-corner.bl::before { bottom: -180px; left: -180px; }
.bg-accent-corner.br::before { bottom: -180px; right: -180px; }

/* ---------- Utility ---------- */
.row { display: flex; gap: 24px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.fill { flex: 1; min-width: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.muted { color: var(--ink-500); }
.bold { font-weight: 700; }