/* =========================================================
   PATIENT FUNNEL · 11기 · 껄이 감옥이 된 원장들
   Shared design system — 화면 공유용 HTML 슬라이드
   ---------------------------------------------------------
   본 파일은 4개의 HTML 파일이 모두 공유하는 디자인 토큰이다.
   풀-세트(293장)를 하나로 꿸는 시각 어휘를 여기서 정의하며,
   각 장의 본문은 각 HTML 파일 안에 인라인으로 들어 있다.
   ========================================================= */

/* ---------- 폰트 선언 ----------
   모든 폰트는 assets/fonts/ 의 woff2 파일을 함께 묶어
   assets/fonts.css 의 @font-face 만으로 로드한다.
   본 프로젝트는 외부 CDN 에 의존하지 않는다 — file:// 에서도 동일하게 렌더.
   -------------------------------- */
@import url("fonts.css");

/* SIL OFL 1.1 라이선스:
   · Pretendard Variable  — © orioncactus, 2021   (https://github.com/orioncactus/pretendard)
   · Noto Serif KR         — © Google, 2017          (https://fonts.google.com/noto/specimen/Noto+Serif+KR)
   · JetBrains Mono        — © JetBrains s.r.o.     (https://www.jetbrains.com/mono)
   자세한 출처와 라이선스 전문은 assets/LICENSE-FONTS.md 참고.
*/

:root {
  /* 공통 */
  --ink:        #1C1916;
  --paper:      #F3ECE3;
  --gray:       #8A8580;
  --gray-soft:  #cfc9c1;
  --terracotta: #C8693F;
  --terracotta-soft: #d9916a;
  --terracotta-deep: #8a3e1f;
  --deep-green: #2F5D50;
  --white:      #FFFFFF;
  --warning:    #f3c43c;

  /* 차트용 — 메시지 박스의 부드러운 색은 사용 안 함 */
  --shadow: 0 8px 28px rgba(28,25,22,.10), 0 2px 6px rgba(28,25,22,.06);

  /* 타이포 */
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-serif: 'Noto Serif KR', 'Noto Serif CJK KR', 'Apple SD Gothic Neo', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #0a0908;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* =========================================================
   슬라이드 컨테이너
   ========================================================= */
.slide {
  position: fixed; inset: 0;
  width: 1920px; height: 1080px;
  margin: 0; padding: 0;
  overflow: hidden;
  display: none;                 /* 한 번에 한 장만 표시 */
  background: var(--paper);
}
.slide.is-active { display: block; }

/* 노이즈 그레인 (본편 일관) ----------------------------------- */
.slide::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(0,0,0,.05), transparent 60%);
  mix-blend-mode: overlay;
  opacity: .5;
  z-index: 0;
}
.slide > .motif, .slide > .content, .slide > .label,
.slide > .corner, .slide > .progress-host { position: absolute; z-index: 2; }

/* =========================================================
   코너 라벨 — 장 번호 / 페이지 타입
   ========================================================= */
.label {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--gray);
  text-transform: uppercase;
  font-weight: 500;
  z-index: 10;
}
.label.tl { top: 36px; left: 56px; }
.label.tr { top: 36px; right: 56px; }
.label.bl { bottom: 36px; left: 56px; }
.label.br { bottom: 36px; right: 56px; }
.slide-dark .label { color: var(--gray-soft); }

/* 큰 문장 / 인용 --------------------------------------------- */
.quote {
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: -.012em;
  line-height: 1.18;
  color: var(--ink);
}
.slide-dark .quote { color: var(--white); }

/* 일반 본문 --------------------------------------------------- */
.body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
}
.slide-dark .body { color: var(--gray-soft); }

/* =========================================================
   화면 글 청크 — 단계 공개
   ========================================================= */
.chunk {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms ease-out, transform 460ms cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.chunk.is-on { opacity: 1; transform: none; }
.chunk.is-old { opacity: .35; }       /* 이미 지나간 덩어리 */
.chunk.is-old-strong { opacity: .22; }
.slide-dark .chunk.is-old { opacity: .42; }
.slide-dark .chunk.is-old-strong { opacity: .25; }

/* 키네틱 등장 — 큰 문장 도달 시 한 번 더 강하게 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.chunk.hero { animation: riseIn 620ms cubic-bezier(.2,.7,.3,1) both; }

/* =========================================================
   카드, 표, 도식
   ========================================================= */
.card {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(28,25,22,.08);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 28px 32px;
}
.slide-paper .card { background: rgba(255,255,255,.78); }

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.split-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.split-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; }

table.t {
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 22px;
}
table.t th, table.t td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(28,25,22,.10);
  text-align: left;
}
table.t thead th {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 500;
  border-bottom: 1px solid rgba(28,25,22,.18);
}
table.t tbody tr.is-strong td {
  background: rgba(200,105,63,.06);
  color: var(--ink);
}
.slide-dark table.t th, .slide-dark table.t td { color: var(--gray-soft); border-color: rgba(255,255,255,.10); }
.slide-dark table.t tbody tr.is-strong td { background: rgba(200,105,63,.10); color: var(--white); }

/* 코드블록(원고의 결과를 도식으로 표현) 안의 표 행 --------------- */
.row {
  display: flex; align-items: baseline; gap: 28px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(28,25,22,.08);
}
.row:last-child { border-bottom: none; }
.row .lbl {
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray); width: 200px;
}
.row .val { font-family: var(--font-serif); font-weight: 700; font-size: 32px; color: var(--ink); }
.slide-dark .row { border-color: rgba(255,255,255,.10); }
.slide-dark .row .val { color: var(--white); }

/* 풀폭 배경 --------------------------------------------------- */
.bg-full { position: absolute; inset: 0; z-index: 0; }

/* =========================================================
   디자인 콘셉트 — 감옥에서 착공으로
   ---------------------------------------------------------
   다크 → 어두운 점잖은 → 종이 → 흰 배경
   각 구간은 --bg, --fg, --accent 를 오버라이드한다.
   ========================================================= */

/* [1] 오프닝 + 1부 (꺼져 있는 영역) */
.slide-dark {
  --bg:      #1C1916;
  --fg:      #EAE3D6;
  --gray-on: #8A8580;
  --accent:  #C8693F;
  background: var(--bg);
  color: var(--fg);
}
/* [2] 2부 (열쇠·문틈의 빛) — 어두움에서 따뜻하게 */
.slide-bridge {
  --bg:      #1F1A14;
  --fg:      #EFE3D2;
  --gray-on: #97826B;
  --accent:  #C8693F;
  background: var(--bg);
  color: var(--fg);
}
/* [3] 3부 (병원 재건축, 일곱 기둥) */
.slide-paper {
  --bg:      #F3ECE3;
  --fg:      #1C1916;
  --gray-on: #6E665B;
  --accent:  #C8693F;
  background: var(--bg);
  color: var(--fg);
}
/* [4] 세일즈 */
.slide-sales {
  --bg:      #FFFFFF;
  --fg:      #1C1916;
  --gray-on: #6E665B;
  --accent:  #C8693F;
  background: var(--bg);
  color: var(--fg);
}

/* =========================================================
   모티프 — 각 구간의 시그니처
   ========================================================= */

/* 1부: 세로 창살 */
.bars {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
.bars span {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,.06);
}
.slide-paper .bars span { background: rgba(28,25,22,.06); }
.slide-sales .bars span { background: rgba(28,25,22,.05); }

/* 2부: 가로 빛선 · 문틈의 빛 */
.crack {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}

/* 3부: 청사진 격자 */
.grid-blueprint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(28,25,22,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,25,22,.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  background-position: 0 0, 0 0;
}

/* 일곱 기둥 진행 표시 ----------------------------------------- */
.pillars {
  display: flex; gap: 14px; align-items: flex-end;
  height: 80px;
}
.pillar {
  width: 28px; height: 100%;
  background: transparent;
  border: 2px solid rgba(28,25,22,.25);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.pillar.is-on {
  background: var(--accent);
  border-color: var(--accent);
}
.pillar-label {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray-on);
  display: block; text-align: center; margin-top: 10px;
}
.pillar.is-on + .pillar-label { color: var(--accent); }

/* Q11 바퀴 ---------------------------------------------------- */
.gear {
  width: 64px; height: 64px;
  position: relative;
}
.gear svg { animation: spin 14s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* 변환 카운터 (전환 장 18개) ----------------------------------- */
.counter {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: 22px;
  letter-spacing: .14em;
  color: var(--gray-on);
}
.counter .now { color: var(--accent); font-weight: 700; }
.counter .slash { opacity: .5; padding: 0 .25em; }

/* =========================================================
   노트 책
   ========================================================= */
.notes-bar {
  position: fixed; left: 0; right: 0; bottom: 80px;
  background: rgba(28,25,22,.92);
  color: #EAE3D6;
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.55;
  padding: 22px 80px;
  display: none;
  z-index: 90;
}
body.notes-on .notes-bar { display: block; }
.notes-bar .ttl {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-soft, #d9916a);
  margin-bottom: 6px;
  opacity: .8;
}

/* =========================================================
   진행 막대 (아래 얇은 띠)
   ========================================================= */
.progress-host {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  height: 4px; pointer-events: none;
}
.progress-host .bar { position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%; background: var(--accent); transition: width 240ms ease; }
.progress-host .seg { position: absolute; top: 0; bottom: 0; width: 1px; opacity: .25; background: rgba(255,255,255,.4); }
.slide-paper .progress-host .seg, .slide-sales .progress-host .seg { background: rgba(28,25,22,.25); }

/* =========================================================
   오버뷰 (썸네일 격자)
   ========================================================= */
.overview {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,9,8,.96);
  display: none;
  overflow: auto; padding: 40px;
}
body.overview-on .overview { display: block; }
.overview h3 {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; color: #EAE3D6; opacity: .7;
  margin: 24px 0 14px;
}
.overview .grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px;
}
.overview .cell {
  position: relative;
  aspect-ratio: 16/9;
  background: #2a2622;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  color: #EAE3D6;
  overflow: hidden;
  font-size: 12px;
  transition: transform 160ms ease, border-color 160ms ease;
}
.overview .cell:hover { transform: scale(1.02); border-color: var(--accent); }
.overview .cell .id {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--font-mono); font-size: 11px; opacity: .6;
}
.overview .cell .head {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  font-family: var(--font-serif); font-weight: 700; line-height: 1.2; font-size: 14px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.overview .cell .open {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent); opacity: .8;
}

/* =========================================================
   암전, 풀스크린 등 유틸
   ========================================================= */
body.blackout .slide, body.blackout .notes-bar,
body.blackout .progress-host, body.blackout .overview { display: none; }
body.blackout::after {
  content: ""; position: fixed; inset: 0; background: #000; z-index: 999;
}

.elapsed {
  position: fixed; top: 20px; right: 24px;
  font-family: var(--font-mono); font-size: 14px;
  color: #EAE3D6; opacity: 0; transition: opacity 200ms ease;
  z-index: 90;
  background: rgba(0,0,0,.4); padding: 6px 10px; border-radius: 4px;
}
body.elapsed-on .elapsed { opacity: 1; }
.slide-paper + .elapsed, .slide-sales .elapsed, .slide-paper .elapsed, .slide-sales + .elapsed { color: var(--ink); background: rgba(255,255,255,.5); }
body.elapsed-on .elapsed { opacity: 1; }

/* 노란 테두리 — 세일즈의 【확인 …】 자리 --------------------- */
.confirm {
  outline: 2px dashed var(--warning);
  outline-offset: 4px;
}

/* =========================================================
   도식 도우미 — 깔때기, 막대, 화살표
   ========================================================= */
.funnel {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.funnel .step {
  height: 56px; display: flex; align-items: center; justify-content: center;
  color: var(--white); font-family: var(--font-body); font-weight: 700;
}
.slide-paper .funnel .step, .slide-sales .funnel .step { color: var(--white); }
.funnel .step.is-active { box-shadow: 0 0 0 4px rgba(200,105,63,.15); }
.funnel .step.is-green { background: var(--deep-green) !important; }

.bar-stack { display: flex; height: 60px; gap: 6px; align-items: stretch; }
.bar-stack .b { position: relative; display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.65); font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.arrow-line { stroke: var(--accent); stroke-width: 2; fill: none; }

/* =========================================================
   메인 그리드 — 대형 슬라이드용
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }

/* =========================================================
   고정 좌표 유틸
   ========================================================= */
.center-stage {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80%; max-width: 1500px;
  text-align: center;
}

/* 장면 타이틀 (큰 인용) */
.scene-title {
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: -.012em;
  line-height: 1.05;
}

/* 한 줄 가운데 큰 문장 */
.one-line {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 88px;
  line-height: 1.1;
}

.hl-accent { color: var(--accent); }
.hl-ink { color: var(--ink); }
.slide-dark .hl-ink { color: var(--white); }

/* =========================================================
   카운트업 — 초기값이 0인 숫자가 눈 깜짝할 사이에 도달값으로
   ========================================================= */
[data-count] > .num { font-variant-numeric: tabular-nums; }

/* =========================================================
   반응형 — 큰 화면에선 그대로, 작은 화면에선 축소
   ========================================================= */
html, body { width: 100vw; height: 100vh; }
@media (max-aspect-ratio: 16/9) {
  .slide { transform-origin: top left; transform: scale(calc(100vw / 1920px)); }
}
@media (max-height: 800px) {
  /* 최소한의 안전 표시 */
}

/* =========================================================
   signature 모션 CSS — animations.js 가 제어
   ========================================================= */

/* 단어/문자 분리 등장 — SplitText 대체 */
[data-split] { display: inline-block; }
[data-split].is-split .wrd,
[data-split].is-split .chr { opacity: 0; }

/* transition 카드 정적 시각 — 스크립트가 풀어 주는 자리는 JS가 토글 */
[data-role="discard"]:not(.is-on)::before {
  content: ''; position: absolute; left: 0; right: 0; top: 52%;
  height: 2px; background: currentColor; opacity: .55;
  transform: scaleX(1); transform-origin: left center;
  animation: shrinkBar 320ms ease both;
}
[data-role="keep"].is-on::before {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -8px;
  height: 3px; background: var(--terracotta);
  transform: scaleX(0); transform-origin: left center;
  animation: growLine 540ms cubic-bezier(.2,.7,.3,1) 80ms both;
}
.chunk { position: relative; display: inline-block; padding-bottom: 2px; }
@keyframes growLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shrinkBar { from { transform: scaleX(1); } to { transform: scaleX(0.85); opacity: .55; } }

/* SVG path stroke 그리기 */
[data-draw] { opacity: 0; transition: opacity 320ms ease; }
[data-draw].is-drawn { opacity: 1; }

/* 일곱 기둥 (PDF 가 아니라 실제 CSS transition) */
.pillar.is-appearing { animation: pillar-rise 540ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes pillar-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Q18-E8 통합 카운터 모션 */
[data-anim="consolidate"] span {
  transition: opacity 360ms ease, background 360ms ease, transform 360ms ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] *,
  [data-split] *,
  [data-draw],
  .pillar,
  .chunk::before,
  .chunk::after,
  .pillar.is-appearing,
  [data-counter] > * {
    animation: none !important;
    transition: none !important;
  }
  [data-split].is-split .wrd,
  [data-split].is-split .chr { opacity: 1; }
}

/* transition 카드 액션 — keep/discard 자동 식별 후 animations.js 에서 부여 */
[data-role] { position: relative; }

/* Production player: fixed 16:9 canvas, bounded at every viewport ratio. */
:root { --accent: #C8693F; --accent-soft:#d9916a; --gray-on:#8A8580; --stage-scale:1; --stage-left:0px; --stage-top:0px; }
.slide { inset:auto;left:var(--stage-left);top:var(--stage-top);transform:scale(var(--stage-scale));transform-origin:top left; }
.chunk { display:block; }
.chunk.is-old, .slide-dark .chunk.is-old { opacity:.35; transform:none; }
.chunk.is-old-strong, .slide-dark .chunk.is-old-strong { opacity:.22; }
.chunk.hero { animation:none; }
.center-stage > .chunk { display:block; }
.chunk:not(.is-on):not(.is-old):not(.is-old-strong) { pointer-events:none; }
[data-role="discard"]::before { display:none; }
[data-role="discard"].crossed { text-decoration:line-through; text-decoration-thickness:2px; }
[data-role="keep"].is-on { text-decoration:underline; text-decoration-color:var(--terracotta);text-underline-offset:14px;text-decoration-thickness:3px; }
[data-role="keep"]::before { display:none; }
.notes-bar { bottom:40px;left:5vw;right:5vw;padding:12px 22px;border:1px solid #726052;border-radius:8px;font-size:clamp(12px,1.15vw,22px); }
.notes-bar .ttl { display:block; }
.progress-host .bar { background:linear-gradient(90deg,#8A8580 0 33.1%,#C8693F 33.1% 45.7%,#a78d6d 45.7% 81.9%,#2F5D50 81.9%);background-size:100vw 100%; }
#signature-architecture { position:fixed;left:var(--stage-left);top:var(--stage-top);width:1920px;height:1080px;transform:scale(var(--stage-scale));transform-origin:top left;pointer-events:none;z-index:3;view-transition-name:architecture; }
.seven-pillars,.pillar-titles { display:none!important; }
.pillar-hud { position:fixed;display:flex;align-items:flex-end;gap:12px;left:50%;bottom:calc(var(--stage-top) + 22px * var(--stage-scale));transform:translateX(-50%) scale(var(--stage-scale));transform-origin:bottom center;z-index:8; }
.pillar-hud[hidden] { display:none; }
.hud-pillar { display:flex;flex-direction:column;align-items:center;gap:8px;color:#70675c;font-size:12px; }
.hud-pillar i { display:block;width:22px;height:40px;border:1px solid #9c8c7d;border-bottom:0; }
.hud-pillar.filled i { background:var(--terracotta);border-color:var(--terracotta); }
.hud-pillar.filled { color:#96451f; }
.hud-gear { width:28px;height:28px;display:block;color:#C8693F;position:absolute;left:-52px;bottom:14px; }
.wheel-only .hud-pillar { opacity:.2; }
.wheel-only .hud-gear { width:48px;height:48px;left:calc(50% - 24px);bottom:60px; }
.wheel-only svg { animation:spin 30s linear infinite; }
.presenter-controls { position:fixed;bottom:8px;left:50%;transform:translateX(-50%);z-index:110;display:flex;align-items:center;gap:4px;padding:7px;border:1px solid #75675466;border-radius:10px;background:#1C1916ed;color:#f3ece3;opacity:0;transition:opacity .18s;max-width:98vw;white-space:nowrap; }
.presenter-controls:hover,.presenter-controls:focus-within { opacity:1; }
.presenter-controls button,.presenter-controls a,.timer-control { background:transparent;border:1px solid #8A858066;color:inherit;border-radius:5px;padding:7px 10px;cursor:pointer;font:13px var(--font-body);text-decoration:none; }
.presenter-controls button:hover,.presenter-controls a:hover { background:#C8693F;color:white; }
.presentation-position { font:11px var(--font-mono);opacity:.75;padding:0 8px; }
.timer-control { color:#C8693F; }
.presenter-modal { border:1px solid #a28b70;border-radius:16px;background:#f3ece3;color:#1c1916;padding:28px;width:min(600px,90vw);font-family:var(--font-body);box-shadow:0 24px 100px #0008; }
.presenter-modal::backdrop { background:#080705cc; }
.presenter-dialog { position:relative; }
.presenter-dialog h2 { margin:10px 0 16px;font-size:26px; }
.presenter-dialog p { color:#665c50;line-height:1.7; }
.presenter-dialog button { cursor:pointer;padding:10px 16px;border:1px solid #bfa88d;border-radius:6px;font:inherit;background:transparent; }
.presenter-dialog .primary { background:#C8693F;color:white;border-color:#C8693F; }
.dialog-close { float:right; }
.jump-input { width:100%;margin:8px 0 18px;padding:14px;border:1px solid #ad9680;border-radius:6px;font:22px var(--font-mono);background:white;color:#1c1916; }
.shortcut-list { display:grid;grid-template-columns:1fr 2fr;gap:10px;font-size:15px;clear:both; }
.shortcut-list dt { font-family:var(--font-mono);color:#a74f2e; }
.shortcut-list dd { margin:0; }
.helper-note { font-size:12px;border-top:1px solid #d3c7ba;padding-top:12px; }
.presenter-toast { position:fixed;bottom:70px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#1c1916f5;color:#f3ece3;border:1px solid #C8693F;border-radius:8px;z-index:500;opacity:0;pointer-events:none;transition:opacity .2s;font-size:15px; }
.presenter-toast.show { opacity:1; }
.overview-header { display:flex;justify-content:space-between;align-items:center;color:#f3ece3; }
.overview-header h2 { font-size:28px; }
.overview-header button { background:none;color:#f3ece3;border:1px solid #8a8580;padding:10px 18px;border-radius:6px;cursor:pointer; }
.overview-nav { display:flex;gap:10px;position:sticky;top:0;background:#181512;padding:12px 0;z-index:4; }
.overview-nav a { color:#d9916a;text-decoration:none;padding:8px 16px;border:1px solid #5a4e40;border-radius:6px; }
.overview .cell { text-align:left;font-family:var(--font-body); }
.overview .cell.selected { border:2px solid #C8693F; }
.overview .grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.confirm:focus { outline:3px solid #d7a018;background:#fff1c9;color:#1c1916!important; }
.seat-input:focus { outline:3px solid #C8693F; }
.qr { cursor:pointer; }
.calendar-demo { display:grid;grid-template-columns:repeat(7,1fr);gap:5px;height:68px;margin-bottom:24px; }
.calendar-demo i { border:1px solid #8a858055;background:#f3ece311; }
.calendar-demo i:nth-child(10),.calendar-demo i:nth-child(11) { background:#C8693F; }
.message-demo { height:68px;position:relative;margin-bottom:24px; }
.message-demo i { display:block;width:80%;height:20px;margin-bottom:8px;background:#C8693F;border-radius:6px; }
.message-demo i+ i { width:60%;opacity:.5; }
.message-demo b { position:absolute;right:16px;top:10px;font-size:38px;color:#C8693F; }
/* Same-document View Transitions are controlled by runtime; file:// has no cross-document opt-in. */
::view-transition-old(root) { animation:fade-out .18s ease both; }
::view-transition-new(root) { animation:fade-in .3s ease both; }
@keyframes fade-out { to { opacity:0; } }
@keyframes fade-in { from { opacity:0; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:opacity .01s!important;scroll-behavior:auto!important; } }
@media(max-width:700px) { .presenter-controls { gap:2px; }.presenter-controls button,.presenter-controls a { padding:7px;font-size:11px; }.presentation-position { display:none; }.overview { padding:20px; }.overview-nav a { padding:8px;font-size:12px; } }
body.blackout .pillar-hud,body.blackout #signature-architecture { display:none; }
.comparison-heading { display:grid;grid-template-columns:1fr 1.4fr;gap:70px;font-size:17px;color:#8A8580;padding:12px 24px; }
.comparison-row { display:grid;grid-template-columns:1fr 40px 1.4fr;gap:15px;align-items:center;margin:14px 0;font-size:27px;line-height:1.55; }
.comparison-row>span { padding:24px;background:#ece8e2;border-radius:8px; }
.comparison-row>span:last-child { background:#f7e8df;border:1px solid #C8693F; }
.comparison-row>b { color:#C8693F;text-align:center; }
.patient-count-table [data-number] { font-variant-numeric:tabular-nums; }
.slide[data-layout="scene"] .center-stage { text-align:left;width:76%; }
.slide[data-layout="scene"] .center-stage > .chunk { margin-left:0!important;margin-right:0!important; }
.slide[data-layout="misconception"] .center-stage { text-align:left;border-left:3px solid #8A8580;padding-left:60px; }
.slide[data-layout="punch"] .center-stage .quote { letter-spacing:-.045em; }
.slide[data-layout="translation"] .center-stage { text-align:left;width:75%;border-left:2px solid #C8693F;padding-left:44px; }
.slide-bridge.bridge-middle { --bg:#493426; background:var(--bg); }
.slide-bridge.bridge-light { --bg:#ead9c7;--fg:#2b2119;--white:#2b2119;--gray-soft:#574636;--gray-on:#66503c;--accent:#ad512c; background:var(--bg);color:var(--fg); }
.bridge-light [style*="color:#EFE3D2"] { color:#2b2119!important; }
.bridge-light .quote { color:#2b2119; }
#Q18-E4 { --ink:#f3ece3;--gray-on:#a89e91;background:#1c1916;color:#f3ece3; }
#Q18-E4 .grid-blueprint { display:none; }