/* ==========================================================================
   DECK LOOK v2 — 카드·아이콘 룩 (brand-profiles/gwanggyo-bareun-deck-v2.yaml)

   왜 별도 파일인가
   ---------------
   기존 97개 덱은 shared/clinic-slides.css 만 링크한다. 이 파일은 **추가로 링크한
   덱에서만** 효력이 있다 — 즉 기존 덱은 이 파일이 존재하는 것만으로는 1픽셀도
   바뀌지 않는다. 롤백은 링크 한 줄 삭제다.

   출처(추측 없음)
   --------------
   사용자가 지목한 dyslipidemia_early_intensive_treatment_2026.pptx(Genspark, 24장)의
   슬라이드 XML 에서 도형 좌표와 채우기색을 기계로 추출해 옮겼다. 원본이 우리와 같은
   1280×720 격자라 환산 손실이 없다. 로고만 사용자 결정으로 위치를 바꿨다(원본은
   우측 끝에 붙어 잘려 보였다 → 우측 여백 64px + 액센트 바 아래 20px).

   인쇄 규약
   --------
   화면 전용 장식(액센트 바·칩 배경·그림자)은 @media print 에서 잉크를 아끼도록
   눌러 준다. 레이아웃 좌표는 건드리지 않는다 — _validate_layout.py 는 print 미디어로
   렌더하므로 좌표를 바꾸면 그 게이트가 흔들린다.
   ========================================================================== */

:root {
  --v2-navy: #003366;
  --v2-accent: #5B9BD5;
  --v2-ink: #334155;
  --v2-body: #475569;
  --v2-muted: #64748B;
  --v2-faint: #94A3B8;
  --v2-line: #E2E8F0;
  --v2-surface: #F8FAFC;
  --v2-chip-navy: #F0F4F8;
  --v2-chip-accent: #EEF6FC;
  --v2-cite: #1D4ED8;
  --v2-flag-ink: #92400E;
  --v2-flag-bg: #FEF3C7;
  --v2-fig-line: #E4EAF2;
  --v2-fig-ph-bg: #F1F5F9;
  --v2-alert: #EF4444;
  --v2-margin: 64px;
}

.slide--v2 {
  position: relative;
  width: 1280px;
  height: 720px;
  background: #FFF;
  overflow: hidden;

  /* v2 덱의 루트는 `class="slide slide--v2"` 로 쓴다 — 파이프라인의 레이아웃
     검증기(shared/_validate_layout.py)와 렌더 게이트가 `.slide` 를 찾기 때문이다.
     그래서 v1 기본 기하(.slide 의 grid·padding·모서리·그림자)를 여기서 무력화한다.
     v2 의 자식은 전부 absolute 이고 좌표는 **패딩 박스 기준**이라, .slide 의
     padding 이 남아 있으면 64px 여백 규격이 통째로 밀린다(2026-08-13 실측).
     이 선언들은 .slide--v2 안에만 있으므로 기존 v1 덱에는 아무 영향이 없다. */
  display: block;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 이 룩의 좌표는 전부 **테두리 기준**이다(원본 PPT 도형이 그렇다). border-box 를
   명시하지 않으면 padding 24px 이 폭에 더해져 패널이 오른쪽 여백을 먹는다 —
   첫 이식에서 실제로 702px 패널이 750px 로 렌더돼 화면 밖으로 밀렸다. */
.slide--v2 *,
.slide--v2 *::before,
.slide--v2 *::after { box-sizing: border-box; }

/* ── 상단 액센트 바 + 헤더 ─────────────────────────────────────────────── */
.v2-accent {
  position: absolute;
  inset: 0 0 auto 0;
  height: 12px;
  background: linear-gradient(90deg, var(--v2-navy) 0%, var(--v2-navy) 62%, var(--v2-accent) 100%);
}

/* 로고 — 우측 여백을 본문과 같은 64px 로 맞춘다. 폭은 자동(비율 보존). */
.v2-logo {
  position: absolute;
  right: var(--v2-margin);
  top: 32px;
  height: 46px;
  width: auto;
  object-fit: contain;
}

.v2-chapter {
  position: absolute;
  left: var(--v2-margin);
  top: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--v2-faint);
  letter-spacing: 1.4px;
}

.v2-mark {
  position: absolute;
  left: var(--v2-margin);
  top: 104px;
  width: 8px;
  height: 52px;
  background: var(--v2-accent);
  border-radius: 2px;
}

.v2-title {
  position: absolute;
  left: 88px;
  top: 96px;
  width: 1128px;
  /* 36px — 집 규칙 36~40px(원장님 49113 ③Ⓐ, 종전 33px). 한 줄 높이 42px 로
     제목 아래끝 138px 을 종전(98+40)과 같게 둬 .v2-sub(top 144px)와 간격 불변. */
  font-size: 36px;
  font-weight: 700;
  color: var(--v2-navy);
  letter-spacing: -.5px;
  line-height: 42px;
  word-break: keep-all;
}

.v2-sub {
  position: absolute;
  left: 88px;
  top: 144px;
  width: 1128px;
  font-size: 19px;
  font-weight: 500;
  color: var(--v2-muted);
  line-height: 28px;
  word-break: keep-all;
}

/* ── 카드/패널 ─────────────────────────────────────────────────────────── */
.v2-panel {
  position: absolute;
  background: #FFF;
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  overflow: hidden;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --rule: var(--v2-navy);
  --chip: var(--v2-chip-navy);
}

.v2-panel--accent {
  --rule: var(--v2-accent);
  --chip: var(--v2-chip-accent);
}

.v2-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--rule);
}

/* 블록은 위에서부터 쌓는다 — 좌표를 고정하면 내용 길이에 따라 빈 구멍이 생긴다
   (1·2차 샘플에서 실제로 그랬다). */
.v2-block + .v2-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--v2-line);
}

.v2-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.v2-head b {
  font-size: 20px;
  font-weight: 700;
  color: var(--v2-navy);
  word-break: keep-all;
}

.v2-chip {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--chip);
  color: var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-chip svg { width: 24px; height: 24px; }
/* 아이콘 SVG 의 presentation 속성(fill=…)을 CSS 로 덮어 브랜드색을 입힌다. */
.v2-chip svg * { fill: currentColor; }

.v2-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-body);
  word-break: keep-all;
}

.v2-body b { color: var(--v2-navy); font-weight: 700; }

/* ── 수치 강조 · 단계 리스트 ───────────────────────────────────────────── */
.v2-stat { text-align: center; padding: 14px 0 18px; }

.v2-stat__num {
  font-size: 64px;
  font-weight: 800;
  color: var(--v2-navy);
  line-height: 1;
  letter-spacing: -2px;
}

.v2-stat__num span { font-size: 28px; font-weight: 700; color: var(--v2-accent); }

.v2-stat__cap {
  margin-top: 10px;
  font-size: 14px;
  color: var(--v2-muted);
  line-height: 1.5;
  word-break: keep-all;
}

.v2-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  font-size: 15px;
  color: var(--v2-ink);
  border-bottom: 1px dashed var(--v2-line);
  word-break: keep-all;
}

.v2-step:last-child { border-bottom: 0; }

.v2-step i {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  background: var(--v2-chip-accent);
  color: var(--v2-navy);
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Tip 띠 · 푸터 ─────────────────────────────────────────────────────── */
.v2-tip {
  position: absolute;
  left: var(--v2-margin);
  top: 626px;
  width: 1152px;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--v2-chip-accent);
  border-left: 4px solid var(--v2-accent);
  border-radius: 6px;
  font-size: 13px;
  color: var(--v2-body);
  word-break: keep-all;
}

.v2-tip b { color: var(--v2-navy); }

.v2-foot {
  position: absolute;
  top: 684px;
  font-size: 12px;
  color: var(--v2-faint);
  letter-spacing: .4px;
}

.v2-foot--l { left: var(--v2-margin); }
.v2-foot--r { right: var(--v2-margin); }

/* ── 표지 = v1 표지 그대로 (2026-08-23 원장님 지시 — 두 번째 정정) ───────────

   이 룩의 표지는 **v1 표지(.slide--cover, shared/clinic-slides.css:196~)를 그대로
   쓴다.** 마크업도 v1 표지 마크업(`section.slide.slide--cover` + slide__header /
   slide__title-block / slide__footer)이다 — 첫 장만 v1, 나머지는 `.slide--v2`.

   왜 이렇게 됐나
   -------------
   8/23 오전에 v2 어휘(.v2-title 등)로 v1 표지를 **모사**한 `.slide--v2.slide--cover`
   규칙을 여기 두었다. 그런데 모사본은 v1 과 같지 않았다 — 실측(1280×720 렌더):
     · 제목 60px/700 흰색, 바닥에 붙음(y=491) ↔ v1 은 72px/540 하늘색, 중하단(y=288)
     · 부제 20px 1줄 ↔ v1 은 26px 최대 3줄·굵은 강조
     · 여백 64px ↔ v1 72px, 푸터 규칙선 y=666 ↔ v1 649
   원장님: "표지는 v1 이랑 **똑같은 그 형식**" — 비슷한 게 아니라 같은 것. 그래서
   모사본을 지우고 v1 규칙을 **재사용**한다. 여기에는 v1 표지가 v2 덱 안에
   앉을 때 필요한 자리 규칙만 남긴다(v1 템플릿 fulldeck-12 의 덱로컬 값과 같다).

   ⛔ `.slide--v2.slide--cover` 를 다시 만들지 마라. 집 스타일 게이트
      (shared/_house_style_gate.py `deck_cover_not_v1`)가 그 조합을 차단하고,
      tools/deck_template.py 의 freeze/render 도 거부한다.
   ========================================================================== */
/* v2 본문 슬라이드와 같은 간격으로 쌓인다(v2 덱에는 .deck 래퍼가 없다). */
section.slide--cover { margin: 0 auto 28px; }
/* v1 템플릿(fulldeck-12-split-stat-v1) 덱로컬 규격 — 표지에만 국한해 옮겼다. */
.slide--cover { --slide-pad-y: 44px; }
.slide--cover .slide__footer { padding-top: 8px; font-size: 12px; }

/* ── 인쇄 ──────────────────────────────────────────────────────────────── */
@media print {
  .v2-accent { background: var(--v2-navy); }
  .v2-panel { box-shadow: none; }
  .v2-chip { background: transparent; }
  .v2-tip { background: transparent; border-left-color: var(--v2-navy); }
}

/* ==========================================================================
   표 패턴 (2026-08-16 추가) — 아래는 **덧붙인 것만** 이다.

   왜 추가했나
   -----------
   이 룩을 쓰는 덱이 하나(nocturnal-leg-cramps)뿐이었고 그 덱의 모양은 3종
   (큰수치+3단계 / 그림+설명 / 마무리)이라 **표가 필요한 슬라이드를 못 그렸다**.
   가이드라인 비교·시술 목록·과별 관점 대비는 카드로 옮기면 줄이 어긋난다.

   좌표 규약은 위와 같다 — 본문 영역은 x 64~1216, y 206~606 이고, 아래 요소는
   `.v2-panel` 처럼 **인라인 style 로 left/top/width** 를 받는다. 높이는 행 높이의
   합으로 결정되므로 표에는 height 를 주지 않는다(주면 브라우저가 남는 높이를
   행에 나눠 넣어 셀 안 여백이 슬라이드마다 달라진다).

   위 규칙은 한 줄도 고치지 않았다 — 이 파일을 이미 쓰는 덱이 있기 때문이다.
   ========================================================================== */

/* ── ① 비교표 / 나열표 공통 골격 ──────────────────────────────────────────
   `border-collapse: separate` + `overflow: hidden` 조합이라야 모서리 반경이
   셀 배경까지 깎는다. collapse 로 두면 헤더 네이비가 둥근 모서리 밖으로 삐져
   나온다. 셀 높이는 `box-sizing: border-box`(위 .slide--v2 * 규칙) 기준이다. */
.v2-table {
  position: absolute;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #FFF;
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.v2-table th,
.v2-table td {
  padding: 10px 16px;
  text-align: left;
  vertical-align: middle;
  word-break: keep-all;
  overflow-wrap: break-word;
  border-right: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}

.v2-table th:last-child,
.v2-table td:last-child { border-right: 0; }
.v2-table tbody tr:last-child > * { border-bottom: 0; }

.v2-table thead th {
  height: 56px;
  background: var(--v2-navy);
  color: #FFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  border-bottom: 0;
  border-right-color: rgba(255, 255, 255, .22);
}

/* 행 머리(첫 열) — 축 이름이다. 값 칸과 색을 달리해 눈이 축을 먼저 잡게 한다. */
.v2-table tbody th {
  height: 68px;
  background: var(--v2-chip-navy);
  color: var(--v2-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.v2-table tbody td {
  height: 68px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--v2-body);
}

.v2-table tbody tr:nth-child(even) td { background: var(--v2-surface); }
.v2-table b { color: var(--v2-navy); font-weight: 700; }
.v2-table .v2-td--alert { color: var(--v2-alert); font-weight: 700; }

/* ── ② 나열표 — 행이 많을 때(10~12행) ────────────────────────────────────
   비교표와 같은 골격에 행 높이만 줄인다. 40 + 12×30 = 400 으로 본문 영역
   (206~606)에 정확히 맞는다. 한 셀은 **한 줄**을 전제로 한다 — 두 줄이 필요한
   내용이면 비교표(.v2-table 기본 행 68px)를 쓰는 게 맞다. */
.v2-table--list thead th { height: 40px; font-size: 14px; }

.v2-table--list tbody th,
.v2-table--list tbody td {
  height: 30px;
  padding: 3px 16px;
  font-size: 14px;
  line-height: 1.4;
}

/* ── ③ 대비 2단 — 좌/우가 맞서는 구조 ────────────────────────────────────
   두 칸은 같은 높이로 늘어나고(align-items: stretch) 가운데 64px 트랙이 세로선과
   VS 배지를 담는다. 배지 글자를 마크업이 아니라 CSS content 로 두는 이유:
   deck_template.freeze 가 텍스트 있는 엘리먼트를 슬롯으로 잡는데, "VS" 는 내용이
   아니라 판박이라 슬롯이 되면 작성자가 매번 채워야 하는 빈 칸이 하나 늘어난다. */
.v2-vs {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: stretch;
}

.v2-vs__col {
  display: flex;
  flex-direction: column;
  background: #FFF;
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --rule: var(--v2-navy);
  --chip: var(--v2-chip-navy);
}

.v2-vs__col--b { --rule: var(--v2-accent); --chip: var(--v2-chip-accent); }

.v2-vs__head {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--rule);
  color: #FFF;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.2px;
  word-break: keep-all;
}

.v2-vs__lead {
  flex: none;
  padding: 14px 20px;
  background: var(--chip);
  border-bottom: 1px solid var(--v2-line);
  font-size: 15px;
  line-height: 1.5;
  color: var(--v2-ink);
  word-break: keep-all;
}

.v2-vs__lead b { color: var(--v2-navy); font-weight: 700; }

.v2-vs__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 6px 20px 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.v2-vs__list li {
  position: relative;
  padding: 11px 0 11px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--v2-body);
  border-bottom: 1px dashed var(--v2-line);
  word-break: keep-all;
}

.v2-vs__list li:last-child { border-bottom: 0; }
.v2-vs__list li b { color: var(--v2-navy); font-weight: 700; }

.v2-vs__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--rule);
}

.v2-vs__mid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-vs__mid::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  background: var(--v2-line);
}

.v2-vs__mid::after {
  content: "VS";
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v2-navy);
  color: #FFF;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 인쇄(표 패턴) ─────────────────────────────────────────────────────── */
@media print {
  .v2-table { box-shadow: none; }
  .v2-vs__col { box-shadow: none; }
  .v2-vs__mid::after { background: var(--v2-navy); }
}

/* ==========================================================================
   슬롯 B · 가로 도해 패널 (2026-08-16 추가) — 아래는 **덧붙인 것만** 이다.

   왜 추가했나
   -----------
   이 룩의 그림 자리는 우측 세로 패널 하나뿐이었다(.v2-panel--fig, 484x400 →
   실제 그림칸 434x350 · 비율 1.24). 가로로 읽어야 하는 그림 — 약제 다섯 칸
   비교 스트립, 시간축, 단계 진행 — 을 그 세로 칸에 우겨넣으면 좌우에 흰
   여백이 남거나, 앞선 판에서처럼 그 칸만 object-fit 을 cover 로 바꿔 위아래를
   잘라내는 땜질을 하게 된다. 2026-08-16 사용자 지적으로 슬롯을 두 종으로
   나눴다(슬롯 A 세로 유지 · 슬롯 B 가로 신설).

   기하 — 왜 전폭이 아니라 932 인가
   --------------------------------
   본문 행은 x 64~1216(폭 1152) · y 206~606(높이 400)이다. 21:9 를 폭 1152 로
   그리면 높이가 494px 가 되어 94px 넘친다. 그래서 **높이 400 을 고정하고 폭을
   932 로** 잡는다(932/400 = 2.33 = 21:9). 좌우에 110px 씩 대칭 여백이 남고
   패널 배경이 슬라이드와 같은 흰색이라 화면에는 여백으로 보이지 않는다.
   캡션은 본문 행 아래(614px)에 따로 두며, 이 패턴은 Tip 띠(626px)를 쓰지
   않는다 — 같은 자리를 두고 겹치기 때문이다.

   기존 덱 영향 0 — 이 파일을 쓰는 어떤 덱에도 아래 클래스를 쓰는 요소가 없다.
   ========================================================================== */

/* 그림칸 자체 — 패널의 테두리·안쪽여백·상단 룰을 모두 거둬 **박스 = 그림**이
   되게 한다. 이 값들이 남아 있으면 932x400 이 그만큼 줄어 규격이 어긋난다. */
.v2-panel--figwide {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #FFF;
}

.v2-panel--figwide::before { content: none; }

/* contain — 임상 도해는 잘리면 오독되므로 어떤 경우에도 crop 하지 않는다.
   생성 백엔드가 21:9 를 정확히 못 내도(실측 2.357) 잘리지 않고 위아래로
   몇 픽셀 여백이 생길 뿐이다. */
.v2-figwide__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v2-figwide__cap {
  position: absolute;
  left: var(--v2-margin);
  top: 614px;
  width: 1152px;
  font-size: 13px;
  color: var(--v2-muted);
  line-height: 1.5;
  word-break: keep-all;
}

.v2-figwide__cap b { color: var(--v2-navy); font-weight: 700; }