/* ISCC 온라인 교육자료 공용 스타일 — 이시도르 지속가능연구소 브랜딩 */

:root {
  --primary: #800000;
  --primary-soft: #a83232;
  --secondary: #9fa0a0;
  --accent: #ffab40;
  --accent-soft: #fff4e4;
  --ink: #23201f;
  --ink-soft: #57514f;
  --bg: #f6f3f0;
  --card: #ffffff;
  --line: #e7e1dc;
  --ok: #1f8a52;
  --ok-soft: #e7f5ec;
  --no: #c0392b;
  --no-soft: #fdeceb;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(60,40,30,.05), 0 8px 24px rgba(60,40,30,.06);
  --maxw: 860px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  font-size: 16.5px;
}

/* ---------- 상단 헤더 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar .logo { height: 34px; width: auto; }

/* 첫 화면 ISCC 멤버 배지 */
.landing-hero .member-logo { display: block; margin: 8px auto 4px; width: 68%; max-width: 340px; height: auto; }
.topbar .crumb {
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: .01em;
}
.topbar .crumb b { color: var(--primary); }
.topbar .spacer { flex: 1; }
.topbar a.home {
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: .15s;
  white-space: nowrap;
}
.topbar a.home:hover { border-color: var(--primary); color: var(--primary); }

/* 진행 막대 */
.progress-track { height: 3px; background: transparent; }
.progress-bar { height: 3px; width: 0; background: var(--accent); transition: width .2s; }

/* ---------- 레이아웃 ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 96px; }

/* ---------- 챕터 표지 ---------- */
.hero {
  margin: 40px 0 8px;
  padding: 44px 40px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, #a02020 0%, var(--primary) 55%, #5a0000 100%);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(255,171,64,.16);
}
.hero .kicker {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.hero h1 { margin: 0 0 12px; font-size: 33px; line-height: 1.25; letter-spacing: -.01em; }
.hero p { margin: 0; max-width: 640px; color: rgba(255,255,255,.86); font-size: 16px; }
.hero .chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.hero .chip {
  font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  padding: 5px 12px; border-radius: 999px;
}

/* ---------- 섹션 ---------- */
section.block { margin-top: 40px; scroll-margin-top: 72px; }
.sec-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--primary);
  background: #f3e6e6;
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 4px;
}
h2.sec-title { font-size: 25px; letter-spacing: -.01em; margin: 12px 0 6px; color: var(--ink); }
h3.sub { font-size: 19px; margin: 30px 0 6px; color: var(--primary); }
p { margin: 12px 0; }
.lead { font-size: 17.5px; color: var(--ink-soft); }
strong { color: #000; font-weight: 700; }
.wrap ul, .wrap ol { padding-left: 22px; }
.wrap li { margin: 6px 0; }
sub { font-size: .72em; }
sup { font-size: .72em; }

/* ---------- 카드 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow);
  margin: 18px 0;
}

/* ---------- 콜아웃 ---------- */
.callout {
  border-radius: var(--radius);
  padding: 16px 20px 16px 18px;
  margin: 18px 0;
  border-left: 5px solid var(--secondary);
  background: #fbfaf9;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.callout .co-head { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.callout p:first-of-type { margin-top: 2px; }
.callout p:last-child { margin-bottom: 0; }
.callout.concept { border-left-color: var(--primary); background: #fbf5f5; }
.callout.concept .co-head { color: var(--primary); }
.callout.key { border-left-color: var(--accent); background: var(--accent-soft); }
.callout.key .co-head { color: #b06d00; }
.callout.warn { border-left-color: #d98324; background: #fdf3e8; }
.callout.warn .co-head { color: #b5641a; }
.callout.example { border-left-color: #3b7ea1; background: #eef6fa; }
.callout.example .co-head { color: #276488; }

/* ---------- 수식 박스 ---------- */
.formula {
  background: #2a2422;
  color: #f6ede4;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 18px 0;
  font-family: "SFMono-Regular", "JetBrains Mono", "Menlo", monospace;
  font-size: 16px;
  line-height: 1.9;
  overflow-x: auto;
}
.formula .eq { display: block; }
.formula .accent { color: var(--accent); }
.formula .muted { color: #b9afa6; }
.formula.light {
  background: #fbf7f2; color: var(--ink);
  border: 1px solid var(--line);
}
.formula.light .accent { color: var(--primary); font-weight: 700; }

/* 인라인 코드/기호 */
code.sym {
  font-family: "SFMono-Regular", "Menlo", monospace;
  background: #f0eae4; padding: 1px 6px; border-radius: 6px; font-size: .92em;
  color: var(--primary);
}

/* ---------- 표 ---------- */
.tbl { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.tbl th, .tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th { color: var(--primary); font-weight: 700; border-bottom: 2px solid var(--primary); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 매스밸런스 다이어그램 ---------- */
.mb-diagram { margin: 22px 0; }
.mb-flow {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  justify-content: center;
}
.mb-box {
  flex: 1 1 180px; min-width: 150px;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px; margin: 6px;
  background: #fff; text-align: center;
}
.mb-box .t { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.mb-box .v { font-size: 20px; font-weight: 800; color: var(--primary); margin-top: 2px; }
.mb-box.in { border-color: #cdb79c; background: #fbf6ef; }
.mb-box.proc { border-color: var(--primary); background: #fbf1f1; }
.mb-box.out { border-color: #9cc0cd; background: #eff7fa; }
.mb-arrow { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--secondary); padding: 0 2px; }

/* ---------- 제조 레시피 CF 다이어그램 (Case 1·2·3) ---------- */
.cf-case { margin: 16px 0; }
.cf-case .cf-cap { font-weight: 700; font-size: 15px; color: var(--primary); margin-bottom: 2px; }
.cf-svg { width: 100%; max-width: 720px; height: auto; display: block; font-family: inherit; }
.cf-svg text { fill: #23201f; }
.cf-svg .cf-lbl { fill: var(--primary); font-weight: 700; font-size: 13px; }
.cf-svg .flow { fill: var(--secondary); font-size: 11px; }

/* ---------- 투입·산출 개념도 프레임 ---------- */
.io-fig { margin: 14px 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.io-fig img { width: 100%; height: auto; display: block; }

/* ---------- 라이브 투표 (QR 응답 집계) ---------- */
.livepoll { border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; padding: 16px 18px; margin: 16px 0; background: #fffdfa; box-shadow: var(--shadow); }
.lp-head { display: flex; gap: 20px; align-items: center; }
.lp-qr { text-align: center; flex: none; }
.lp-qr img { width: 124px; height: 124px; display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lp-cap { font-size: 12px; color: var(--ink-soft); margin-top: 6px; font-weight: 700; max-width: 130px; }
.lp-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lp-row { display: flex; align-items: center; gap: 10px; }
.lp-lab { width: 84px; font-size: 14px; font-weight: 600; flex: none; }
.lp-track { flex: 1; background: #f0eae4; border-radius: 999px; height: 22px; overflow: hidden; }
.lp-fill { height: 100%; background: var(--accent); width: 0; border-radius: 999px; transition: width .4s; }
.lp-n { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 800; width: 28px; text-align: right; flex: none; color: var(--ink-soft); }
.lp-total { text-align: right; font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.lp-total b { color: var(--primary); font-size: 16px; }
.lp-row.correct .lp-fill { background: var(--ok); }
.lp-row.correct .lp-lab, .lp-row.correct .lp-n { color: var(--ok); }
@media (max-width: 620px) { .lp-head { flex-direction: column; } .lp-qr img { width: 150px; height: 150px; } .lp-lab { width: 70px; } }

/* ---------- 재고 항등식 인터랙티브 검증 ---------- */
.mbsim { border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 14px; background: #fff; margin: 14px 0; box-shadow: var(--shadow); }
.mbsim-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mbsim-stats span { font-size: 13.5px; color: var(--ink-soft); background: #f7f2ee; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-weight: 600; }
.mbsim-stats b { color: var(--primary); font-size: 18px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.mbsim-stats span.fixed b { color: var(--ink-soft); }
.mbsim-eq { text-align: center; font-family: "SFMono-Regular","Menlo",monospace; font-size: 16px; margin: 4px 0 12px; color: var(--ink); }
.mbsim-eq .ok { color: var(--ok); font-weight: 700; }
.mbsim-stage { display: flex; align-items: stretch; justify-content: center; gap: 6px; padding-top: 16px; }
.mbsim-col { flex: 1; min-height: 150px; border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; justify-content: center; }
.mbsim-col.left { background: #fbf6ef; border: 1.5px dashed #cdb79c; }
.mbsim-col.warehouse { background: #fbf1f1; border: 2px solid var(--primary); position: relative; flex: 1.25; }
.mbsim-col.warehouse::before { content: ""; position: absolute; top: -15px; left: -2px; right: -2px; height: 16px; background: var(--primary); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.mbsim-col.out { background: #eff7fa; border: 1.5px dashed #9cc0cd; }
.mbsim-col .zlabel { width: 100%; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.mbsim-col.warehouse .zlabel { color: var(--primary); }
.mbsim-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color: var(--secondary); font-size: 12.5px; line-height: 1.1; white-space: nowrap; }
.mbsim-arrow .ar { font-size: 20px; }
.mb-item { width: 30px; height: 30px; border-radius: 6px; background: var(--accent-soft); border: 1.5px solid var(--accent); cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center; font-size: 17px; user-select: none; -webkit-user-select: none; }
.mb-item.dragging { cursor: grabbing; z-index: 1000; box-shadow: 0 8px 20px rgba(60,40,30,.28); }
.mb-item.static { cursor: default; opacity: .8; border-style: dashed; }
@media (max-width: 620px) { .mb-item { width: 26px; height: 26px; font-size: 14px; } .mbsim-col { min-height: 120px; } }

/* ---------- 퀴즈 ---------- */
.quiz {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 22px 0;
  box-shadow: var(--shadow);
}

/* 라이브 투표 — QR 우상단 코너 + 보기별 실시간 투표수 */
.lp-qr-corner { position: absolute; top: 16px; right: 18px; width: 96px; text-align: center; z-index: 3; }
.lp-qr-corner img { width: 96px; height: 96px; display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: zoom-in; }

/* QR 확대 오버레이 — 뒷좌석에서도 스캔 */
.lp-zoom { position: fixed; inset: 0; z-index: 300; background: rgba(24,12,12,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; cursor: pointer; }
.lp-zoom-img { width: min(74vmin, 620px); height: min(74vmin, 620px); background: #fff; padding: 20px; border-radius: 18px; }
.lp-zoom-cap { color: #fff; font-size: 16px; font-weight: 600; opacity: .85; text-align: center; padding: 0 16px; }
.lp-qr-cap { font-size: 11px; color: var(--ink-soft); font-weight: 700; margin-top: 4px; line-height: 1.3; white-space: nowrap; }
.lp-qr-cap b { color: var(--primary); font-size: 13px; }
.lp-reset { position: absolute; bottom: 14px; right: 18px; z-index: 4; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--ink-soft); background: #f1ece8; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; cursor: pointer; transition: .13s; }
.lp-reset:hover { background: #e7e0da; color: var(--primary); }
.lp-answers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lp-chip { font-size: 15px; font-weight: 700; color: var(--primary); background: #f3e6e6; border: 1px solid #e7cccc; border-radius: 999px; padding: 6px 14px; font-variant-numeric: tabular-nums; }
.lp-chip i { font-style: normal; color: var(--secondary); font-weight: 600; margin-left: 5px; font-size: 13px; }
.quiz.has-poll .q-text, .quiz.has-poll .q-sub { padding-right: 108px; }
.quiz.has-poll .q-options { margin-top: 42px; }
.q-opt .lp-optn { flex: none; align-self: center; min-width: 44px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--secondary); }
.q-opt .lp-optn.has { color: var(--primary); }
.q-opt.is-correct .lp-optn { color: var(--ok); }
@media (max-width: 620px) {
  .lp-qr-corner { width: 82px; top: 14px; right: 14px; }
  .lp-qr-corner img { width: 82px; height: 82px; }
  .quiz.has-poll .q-text, .quiz.has-poll .q-sub { padding-right: 92px; }
  .quiz.has-poll .q-options { margin-top: 34px; }
}
.quiz .q-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: var(--primary);
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
}
.quiz .q-text { font-size: 17px; font-weight: 600; margin: 12px 0 4px; line-height: 1.6; }
.quiz .q-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 8px; }

.q-options { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; gap: 9px; }
.q-opt {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1.5px solid var(--line); border-radius: 11px;
  padding: 12px 15px; cursor: pointer; transition: .13s;
  background: #fff;
}
.q-opt:hover { border-color: var(--primary-soft); background: #fdf8f8; }
.q-opt input { margin-top: 3px; accent-color: var(--primary); width: 17px; height: 17px; flex: none; }
.q-opt .otxt { flex: 1; }
.q-opt.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.q-opt.is-wrong { border-color: var(--no); background: var(--no-soft); }
.q-opt.locked { cursor: default; }
.q-opt .mark { font-weight: 800; display: none; }
.q-opt.is-correct .mark { display: inline; color: var(--ok); }
.q-opt.is-wrong .mark { display: inline; color: var(--no); }

.q-numeric { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
.q-numeric input[type="text"] {
  font-size: 18px; padding: 10px 14px; width: 160px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-variant-numeric: tabular-nums; font-family: inherit;
}
.q-numeric input:focus { outline: none; border-color: var(--primary); }
.q-numeric .unit { font-size: 15px; color: var(--ink-soft); font-weight: 600; }

.q-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.btn {
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: none; border-radius: 10px; padding: 10px 20px; cursor: pointer;
  transition: .15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #6a0000; }
.btn-primary:disabled { background: var(--secondary); cursor: default; }
.btn-ghost { background: #f1ece8; color: var(--ink-soft); }
.btn-ghost:hover { background: #e7e0da; }

.q-verdict { font-weight: 700; font-size: 15px; display: none; align-items: center; gap: 7px; }
.q-verdict.show { display: inline-flex; }
.q-verdict.ok { color: var(--ok); }
.q-verdict.no { color: var(--no); }

.q-explain {
  display: none;
  margin-top: 16px; padding: 16px 18px;
  background: #faf7f3; border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 10px;
  font-size: 15px;
}
.q-explain.show { display: block; animation: fade .25s ease; }
.q-explain .ex-h { font-weight: 700; color: #b06d00; margin-bottom: 6px; }
.q-explain .steps { margin: 8px 0 0; }
.q-explain .steps code { font-family: "SFMono-Regular","Menlo",monospace; background:#f0eae4; padding:1px 5px; border-radius:5px; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to {opacity:1; transform:none;} }

/* ---------- 하단 네비 ---------- */
.chap-nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
}
.chap-nav a {
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; flex: 1; max-width: 48%;
  transition: .15s; background: #fff;
}
.chap-nav a:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.chap-nav a.next { text-align: right; }
.chap-nav .nl { font-size: 12px; color: var(--secondary); font-weight: 700; }
.chap-nav .nt { font-size: 15.5px; font-weight: 700; color: var(--primary); }
.chap-nav a.disabled { opacity: .4; pointer-events: none; }

/* ---------- index 랜딩 ---------- */
.landing-hero { text-align: center; padding: 70px 20px 30px; }
.landing-hero img.biglogo { height: 40px; margin-bottom: 26px; }
.landing-hero h1 { font-size: 38px; margin: 0 0 14px; letter-spacing: -.02em; }
.landing-hero p { font-size: 18px; color: var(--ink-soft); max-width: 620px; margin: 0 auto; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; margin: 34px 0; }
.ch-card {
  display: block; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 24px; box-shadow: var(--shadow); transition: .18s;
  position: relative; overflow: hidden;
}
.ch-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.ch-card .num {
  font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--accent);
}
.ch-card h3 { font-size: 22px; margin: 8px 0 8px; color: var(--primary); }
.ch-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.ch-card .topics { margin-top: 14px; font-size: 12.5px; color: var(--secondary); }
.ch-card .go { position: absolute; right: 22px; bottom: 22px; color: var(--primary); font-weight: 800; font-size: 20px; }

.foot { text-align: center; color: var(--secondary); font-size: 13px; margin-top: 40px; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding: 32px 24px; }
  .hero h1 { font-size: 26px; }
  .wrap { padding: 0 16px 72px; }
  .card, .quiz { padding: 18px 18px; }
}

/* ============================================================
   슬라이드 덱 모드 — 한 화면에 토픽 하나, 넘겨서 학습
   ============================================================ */
body.deck {
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg);
}

/* 상단 바 */
.deck-top {
  flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.deck-top .logo { height: 32px; }
.deck-top .dt-title { font-size: 14px; font-weight: 700; color: var(--primary); }
.deck-top .dt-title span { color: var(--ink-soft); font-weight: 600; }
.deck-top .spacer { flex: 1; }

/* 챕터 탭 (헤더) */
.ch-tabs { display: flex; align-items: center; gap: 4px; }
.ch-tabs a {
  font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap; transition: .13s;
}
.ch-tabs a:hover { background: #f3ece8; color: var(--primary); }
.ch-tabs a.active { background: #f3e6e6; color: var(--primary); font-weight: 700; }
.topbar .ch-tabs { margin-left: 4px; }
@media (max-width: 640px) {
  .ch-tabs a { padding: 5px 9px; font-size: 12.5px; }
  .ch-tabs .tl { display: none; }
}
.deck-top a.home {
  font-size: 13px; color: var(--ink-soft); text-decoration: none;
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
}
.deck-top a.home:hover { border-color: var(--primary); color: var(--primary); }
.deck-progress { flex: none; height: 4px; background: #eee4dc; }
.deck-progress .bar { height: 4px; width: 0; background: var(--accent); transition: width .35s ease; }

/* 슬라이드 무대 */
.deck-stage { flex: 1; position: relative; overflow: hidden; }
.slide {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: none;
  padding: 30px 22px 34px;
}
.slide.active { display: block; }
.slide.in-right { animation: sIn 320ms cubic-bezier(.22,.61,.36,1); }
.slide.in-left  { animation: sInL 320ms cubic-bezier(.22,.61,.36,1); }
@keyframes sIn  { from { opacity: 0; transform: translateX(26px);} to { opacity: 1; transform: none; } }
@keyframes sInL { from { opacity: 0; transform: translateX(-26px);} to { opacity: 1; transform: none; } }

.slide-inner { max-width: 720px; margin: 0 auto; }
/* 짧은 표지·정리 슬라이드는 세로 중앙 정렬 */
.slide.center { display: none; }
.slide.center.active { display: flex; align-items: safe center; justify-content: center; }
/* 화면이 낮거나 좁으면(모바일) 중앙정렬 대신 위 정렬 — 내용이 잘리지 않고 스크롤됨 */
@media (max-width: 620px), (max-height: 700px) {
  .slide.center.active { display: block; }
  .slide.center .slide-inner { margin: 0 auto; }
}
.slide.center .slide-inner { text-align: center; }

/* 슬라이드 내부 타이포 */
.slide .s-kicker {
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.slide .sec-label { margin-bottom: 6px; }
.slide h2 { font-size: 26px; letter-spacing: -.01em; margin: 6px 0 10px; color: var(--ink); line-height: 1.3; }
.slide .lead { font-size: 18px; color: var(--ink-soft); margin-top: 4px; }
.slide p { font-size: 16.5px; }
.slide .big-title { font-size: 40px; color: var(--primary); margin: 14px 0 12px; letter-spacing: -.02em; }

/* 하단 네비 */
.deck-bottom {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
}
.nav-btn {
  font-family: inherit; font-size: 16px; font-weight: 700;
  border: none; border-radius: 12px; padding: 13px 26px; cursor: pointer; transition: .15s;
}
.nav-prev { background: #f1ece8; color: var(--ink-soft); }
.nav-prev:hover:not(:disabled) { background: #e7e0da; }
.nav-next { background: var(--primary); color: #fff; min-width: 120px; }
.deck-bottom { justify-content: space-between; }
.nav-center { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-center .member-logo-sm { height: 42px; width: auto; display: block; }
@media (max-width: 620px) { .nav-center .member-logo-sm { height: 34px; } }
.nav-next:hover:not(:disabled) { background: #6a0000; }
.nav-btn:disabled { opacity: .4; cursor: default; }
.nav-next.locked { background: var(--secondary); opacity: 1; cursor: not-allowed; }
.nav-next.pulse { animation: pulse 1.1s ease 2; box-shadow: 0 0 0 0 rgba(128,0,0,.5); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(128,0,0,.45);} 70%{box-shadow:0 0 0 14px rgba(128,0,0,0);} 100%{box-shadow:0 0 0 0 rgba(128,0,0,0);} }
.nav-counter { font-size: 14px; font-weight: 700; color: var(--secondary); font-variant-numeric: tabular-nums; min-width: 66px; text-align: center; }

/* 게이트 안내 + 흔들림 */
.gate-hint {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: #b06d00;
  background: var(--accent-soft); border: 1px solid #f2d9ab;
  padding: 7px 13px; border-radius: 999px; margin-top: 4px;
}
.gate-hint.flash { animation: flash .6s ease 2; }
@keyframes flash { 50% { background: var(--accent); color: #4a2e00; } }
.quiz.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-7px);} 40%,80%{transform:translateX(7px);} }

/* 덱 안에서 첫 요소 margin 정리 */
.slide-inner > :first-child { margin-top: 0; }
.slide .quiz { margin-top: 8px; }
.btn-giveup { display: none; }

/* 표지/정리 슬라이드 버튼 */
.start-hint { margin-top: 22px; font-size: 15px; color: var(--secondary); font-weight: 600; }
.slide .chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.slide .chip {
  font-size: 13px; font-weight: 700; color: var(--primary);
  background: #f3e6e6; border: 1px solid #e7cccc;
  padding: 6px 13px; border-radius: 999px;
}
.slide .btn-cta {
  display: inline-block; margin-top: 8px; text-decoration: none;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 16px;
  padding: 13px 28px; border-radius: 12px;
}
.slide .btn-cta:hover { background: #6a0000; }

/* 챕터 표지 ISCC 멤버 배지 */
.slide .member-logo { display: block; margin: 26px auto 0; width: 52%; max-width: 210px; height: auto; }

@media (max-width: 620px) {
  .slide { padding: 24px 16px 28px; }
  .slide h2 { font-size: 22px; }
  .slide .big-title { font-size: 32px; }
  .nav-btn { padding: 12px 18px; font-size: 15px; }
  .deck-top .dt-title { font-size: 13px; }
}

/* 현황 스탯 타일 — 헤드라인 숫자 나열용 (chapter1 등) */
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.stat { flex: 1 1 118px; min-width: 108px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 10px 13px; text-align: center; }
.stat .sv { font-size: 26px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .sl { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; line-height: 1.35; }