/* G4 '30일 재확인 시계' · gfx-dial.css (dial · 11-04 자동 반복판 · 지시서 §19 · 원형 절정)
   11-04 반복판: 장면(.is-live) = 높이 고정 판(화면 높이 − 쪽 고정 띠 · 데스크톱 640~840 · 폰 560~780) · sticky·스크롤 트랙 0 · 시간으로 반복(gfx-dial.js).
     색 = 무대 토큰 다섯(--gfx-ink · --gfx-paper · --gfx-dim · --gfx-line · --gfx-accent)을 읽고 없으면 밝은 기본값 · 장면 안 이름은 --gd-*(--gfx-* 다시 정의 0).
     무대(.hb-stage) 안: 바탕 투명(무대 검정) · 그림자 0(1px 선) · 다시 보임 = 주황 · 사라짐 = 무대의 --st-ok 초록(stage.css) · 표 SVG 색도 같은 토큰.
   (아래는 3회차 설명)
   접두어 .gfx-dial · 바깥 쪽 요소·전역 규칙 0(이 파일의 모든 선택자는 .gfx-dial 안쪽만 가리킴) · @font-face 0(쪽의 글꼴을 받음).
   재질: 크림 #fdfbf7 · 종이 #fffdf9 · 먹 #151414 · 괘선 #e6dccd · 주황 #ff5e1f(다시 보임 · 남음) · 초록 #1f7a4d(사라짐 확인)
   글 크기 바닥: 데스크톱 15px · 폰 14px(표 SVG 는 1:1 로 보여서 줄지 않음). 누름: 폰 단추 44px.
   기본 = 포스터(결과 프레임 · JS 꺼짐 · 모션 줄이기). .is-live = 스크롤 장면(gfx-dial.js 가 자리 잡음). */

.gfx-dial {
  --gd-paper: var(--gfx-paper, #fffdf9); --gd-sand: #f3e9dc;
  --gd-ink: var(--gfx-ink, #151414); --gd-sub: #4d4a46; --gd-mute: var(--gfx-dim, #736d66); --gd-dim: #8f897f;
  --gd-line: var(--gfx-line, #e6dccd); --gd-line2: #efe7dc; --gd-rule: #d9cfbf;
  --gd-or: var(--gfx-accent, #ff5e1f); --gd-ort: #c2410c; --gd-orb: #fff1ea; --gd-orl: #f3cbb8;
  --gd-ok: #1f7a4d; --gd-okt: #1f7a4d; --gd-okb: #e8f3ec; --gd-okl: #cfe3d6; --gd-okp: #cfe5d6;
  --gd-ease: cubic-bezier(.22, 1, .36, 1);
  --gd-sh: 0 0 0 1px rgba(21, 20, 20, .05), 0 30px 60px -14px rgba(21, 20, 20, .16), 0 16px 32px -18px rgba(21, 20, 20, .2);
  --gd-sh-sat: 0 0 0 1px rgba(21, 20, 20, .04), 0 14px 32px -8px rgba(21, 20, 20, .16), 0 4px 10px -4px rgba(21, 20, 20, .08);
  --gd-font: var(--font, 'AboutUs Home Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif);
  /* 큰 숫자: 데스크톱은 보고서(756px) 옆 남는 폭에 '1,182개'가 들어가는 크기(1440 = 화면 폭 1/3 이상) */
  --gd-num: clamp(100px, calc((min(100vw - 80px, 1360px) - 796px) / 2.69), 200px);
  --gd-run: 98vh;
  --gd-top: var(--st-top, var(--hdx-band, 0px));   /* 쪽의 고정 띠 높이 = 무대가 붙는 자리(sticky top) · 쪽의 --hdx-band(홈 64 · 폰 56). 폰도 받음: 무대의 data-dock-yield 로 독이 내려가면 홈 머리줄은 늘 보임 */
  position: relative;
  background: transparent;
  color: var(--gd-ink);
  font-family: var(--gd-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: clip;
}
.gfx-dial *, .gfx-dial *::before, .gfx-dial *::after { box-sizing: border-box; }
.gfx-dial :where(h2, h3, p, ol, ul, li, figure, figcaption, button) { margin: 0; padding: 0; }
.gfx-dial :where(ol, ul) { list-style: none; }
.gfx-dial svg { display: block; overflow: visible; }
.gfx-dial svg text { font-family: var(--gd-font); }
.gfx-dial .gfx-dial-tn { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.gfx-dial .gfx-dial-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── 포스터(기본 · 1180px 이상) ─────────────────────────── */
.gfx-dial-stage {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 max(40px, calc((100% - 1360px) / 2)) 104px;   /* 위 여백 = 무대 자리의 --st-pad */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas: "steps steps" "copy report" "legend report" "gap report" "count report";
  column-gap: 40px;
  align-items: start;
}
.gfx-dial-steps { grid-area: steps; margin-bottom: 56px; }
.gfx-dial-copy { grid-area: copy; max-width: 440px; }
.gfx-dial-legend { grid-area: legend; margin-top: 26px; }
.gfx-dial-count { grid-area: count; margin-top: 40px; }
.gfx-dial-report { grid-area: report; justify-self: end; width: 756px; max-width: 100%; }
.gfx-dial .gfx-dial-face, .gfx-dial .gfx-dial-center, .gfx-dial .gfx-dial-sat, .gfx-dial .gfx-dial-canvas, .gfx-dial .gfx-dial-ctl { display: none; }

/* 4단 진행 줄 = 홈 nav.hb-prog 와 같은 부품(크림 위 먹 1px 잇는 선 · 지난 단계 먹 · 지금 단계 = 먹 굵게 + 주황 밑줄 2px)
   홈처럼 쪽 진행 줄이 머리줄 아래 붙어 있으면 data-gd-steps="page" 로 이 줄을 숨기고 단추만 남김(아래 '쪽 진행 줄 쓰기') */
.gfx-dial-steps { display: flex; align-items: center; gap: 16px; }
.gfx-dial-steps ol { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; height: 44px; }
.gfx-dial-steps li {
  position: relative; display: flex; align-items: center; flex: 1 1 0; gap: 14px; min-width: 0;
  font-size: 15px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; color: var(--gd-dim); white-space: nowrap;
}
.gfx-dial-steps li:last-child { flex: 0 0 auto; }
.gfx-dial-steps li > span { position: relative; display: flex; align-items: center; height: 100%; }
.gfx-dial-steps li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; margin-right: 14px; background: rgba(21, 20, 20, .22); }
.gfx-dial-steps li.is-past, .gfx-dial-steps li[aria-current] { color: var(--gd-ink); }
.gfx-dial-steps li.is-past::after { background: var(--gd-ink); }
.gfx-dial-steps li[aria-current] { font-weight: 720; }
.gfx-dial-steps li[aria-current] > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gd-or); }
.gfx-dial-ctl {
  flex: none; position: relative; appearance: none; -webkit-appearance: none;
  height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--gd-line); background: var(--gd-paper); color: var(--gd-ink);
  font: 560 15px/1 var(--gd-font); letter-spacing: -0.01em; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: border-color 140ms var(--gd-ease);
}
.gfx-dial-ctl::before { content: ""; position: absolute; inset: 0; background: var(--gd-sand); transform-origin: 0 50%; transform: scaleX(var(--gd-prog, 0)); z-index: -1; }
.gfx-dial-ctl:hover { border-color: var(--gd-dim); }
.gfx-dial-ctl:focus-visible { outline: 2px solid var(--gd-ink); outline-offset: 3px; }

/* 글 기둥 */
.gfx-dial-title { font-size: var(--st-h, clamp(44px, 3.9vw, 56px)); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; color: var(--gd-ink); white-space: nowrap; }
.gfx-dial-lead { margin-top: 20px; font-size: var(--st-lead, 18px); line-height: 1.6; font-weight: 430; color: var(--gd-sub); letter-spacing: -0.01em; max-width: 26em; }

/* 범례 한 줄 */
.gfx-dial-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; line-height: 1.4; font-weight: 520; color: var(--gd-sub); letter-spacing: -0.01em; }
.gfx-dial-legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.gfx-dial-k { flex: none; display: block; width: 14px; height: 7px; border-radius: 1px; background: var(--gd-ink); }
.gfx-dial-k.is-seen { background: var(--gd-or); }
.gfx-dial-k.is-gone { background: var(--gd-ok); }

/* 큰 숫자: 사라짐 확인 N개 · 남음 N · 작은 한 줄 */
.gfx-dial-count-k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; line-height: 1.3; font-weight: 640; letter-spacing: -0.015em; color: var(--gd-ink); }
.gfx-dial-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--gd-rule); background: var(--gd-paper);
  font-size: 15px; font-weight: 560; color: var(--gd-sub); letter-spacing: -0.01em; white-space: nowrap;
}
.gfx-dial-num {
  display: flex; align-items: flex-end; margin-top: 16px; padding-bottom: 0.11em; white-space: nowrap;
  font-size: var(--gd-num); line-height: 0.8; font-weight: 380; letter-spacing: -0.045em; color: var(--gd-ink);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.gfx-dial-num-d { display: block; height: 0.8em; line-height: 0.8; }
.gfx-dial-num-u { font-size: 0.2em; line-height: 1; font-weight: 560; letter-spacing: -0.02em; margin: 0 0 0.12em 0.14em; }
.gfx-dial-count-s { margin-top: 16px; font-size: 18px; line-height: 1.4; font-weight: 520; color: var(--gd-sub); letter-spacing: -0.01em; }
.gfx-dial-count-s b { font-weight: 680; color: var(--gd-ort); }
.gfx-dial-note { margin-top: 4px; font-size: 15px; line-height: 1.45; font-weight: 460; color: var(--gd-mute); letter-spacing: -0.01em; }

/* 보고서 한 장 */
.gfx-dial-report { position: relative; padding: 22px 28px 18px; }
/* 판 .st-frame(무대 · stage.css 정의)이 아닐 때만 이 장면의 종이 판 */
.gfx-dial-report:not(.st-frame) { background: var(--gd-paper); border: 1px solid var(--gd-line); border-radius: 16px; box-shadow: var(--gd-sh); }
.gfx-dial-rep-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.gfx-dial-rep-t { font-size: 22px; line-height: 1.3; font-weight: 680; letter-spacing: -0.025em; }
.gfx-dial-rep-sub { font-size: 15px; line-height: 1.5; color: var(--gd-mute); font-weight: 480; }
.gfx-dial-table { margin-top: 16px; }
.gfx-dial-table svg { height: auto; }
.gfx-dial-table .tb-d { width: 698px; max-width: 100%; }
.gfx-dial-table .tb-m, .gfx-dial-table .tb-s { display: none; }
.gfx-dial-rows { margin-top: 14px; border-top: 1px solid var(--gd-line); }
.gfx-dial-rows li {
  display: grid; grid-template-columns: 64px 168px minmax(0, 1fr); align-items: baseline; column-gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--gd-line2);
  font-size: 15px; line-height: 1.45; color: var(--gd-sub); letter-spacing: -0.01em;
}
.gfx-dial-rows .gfx-dial-d { color: var(--gd-mute); }
.gfx-dial-rows b { font-weight: 640; color: var(--gd-ink); font-variant-numeric: tabular-nums; }
.gfx-dial-rows b.is-seen { color: var(--gd-ort); }
.gfx-dial-rows b.is-gone { color: var(--gd-okt); }
.gfx-dial-rows b.is-left { color: var(--gd-ort); }
.gfx-dial-addr { color: var(--gd-ink); font-weight: 540; }
.gfx-dial-foot { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--gd-mute); }

/* 위성(사건 기록) · 가운데 날 수 — 장면에서만 */
.gfx-dial-sat {
  width: 248px; padding: 14px 16px 15px;
  background: var(--gd-paper); border: 1px solid var(--gd-line); border-radius: 16px; box-shadow: var(--gd-sh-sat);
  font-size: 15px; line-height: 1.45; color: var(--gd-sub); letter-spacing: -0.01em;
}
.gfx-dial-sat-h { font-size: 15px; color: var(--gd-mute); font-weight: 520; padding-bottom: 8px; border-bottom: 1px solid var(--gd-line2); margin-bottom: 9px; }
.gfx-dial-sat-r1, .gfx-dial-sat-r2 { display: flex; align-items: baseline; gap: 8px; }
.gfx-dial-sat .gfx-dial-d { color: var(--gd-ink); font-weight: 640; }
.gfx-dial-sat-r1 > span + span { color: var(--gd-ort); font-weight: 620; }
.gfx-dial-sat .gfx-dial-addr { display: block; margin-top: 2px; }
.gfx-dial-more { color: var(--gd-mute); font-weight: 480; white-space: nowrap; }
.gfx-dial-sat-chips { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.gfx-dial-pill {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--gd-rule); background: var(--gd-paper); font-size: 15px; font-weight: 580; color: var(--gd-sub); white-space: nowrap;
}
.gfx-dial-pill.is-seen { border-color: var(--gd-orl); background: var(--gd-orb); color: var(--gd-ort); }
.gfx-dial-pill.is-gone { border-color: var(--gd-okl); background: var(--gd-okb); color: var(--gd-okt); }
.gfx-dial-arw { color: var(--gd-dim); font-size: 15px; }
.gfx-dial-sat-m { margin-top: 7px; font-size: 15px; color: var(--gd-mute); }
.gfx-dial-sat-r2 { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--gd-line2); flex-wrap: wrap; row-gap: 6px; }

.gfx-dial-center { flex-direction: column; align-items: center; pointer-events: none; text-align: center; }
.gfx-dial-c-top { font-size: 15px; line-height: 1.2; color: var(--gd-mute); font-weight: 500; }
.gfx-dial-c-num { display: block; height: 1em; overflow: hidden; font-size: var(--gd-cnum, 60px); line-height: 1; font-weight: 380; letter-spacing: -0.04em; color: var(--gd-ink); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.gfx-dial-c-roll { display: flex; flex-direction: column; align-items: center; will-change: transform; }
.gfx-dial-c-roll > span { display: block; height: 1em; line-height: 1; }
.gfx-dial-c-word { display: none; font-size: max(15px, calc(var(--gd-cnum, 60px) * .36)); line-height: 1.1; letter-spacing: -0.02em; font-weight: 640; color: var(--gd-ink); }
.gfx-dial-c-bot { font-size: 15px; line-height: 1.2; color: var(--gd-sub); font-weight: 520; }
.gfx-dial-center.is-word .gfx-dial-c-top, .gfx-dial-center.is-word .gfx-dial-c-num, .gfx-dial-center.is-word .gfx-dial-c-bot { display: none; }
.gfx-dial-center.is-word .gfx-dial-c-word { display: block; }

/* 쪽 진행 줄 쓰기 — data-gd-steps="page"(홈: 머리줄 아래 붙는 nav.hb-prog 가 '확인'을 켬): 장면 안 이름표 줄은 숨기고 멈춤 단추만 남김.
   고정 띠 = 머리줄 + 쪽 진행 줄(데스크톱 64 + 44 · 폰 56 + 40) — 무대는 그 바로 아래에 붙음. 다른 값이면 쪽에서 --gd-page-top 으로 줌.
   (머리줄이 숨었다 나오는 쪽이면 --gd-page-top 은 진행 줄 높이만, --gd-safe-top 에 머리줄 높이를 주면 큰 숫자 줄 · '가상 예시' 칩은 그 아래로만 올라감) */
.gfx-dial[data-gd-steps="page"] { --gd-top: var(--gd-page-top, var(--st-top, calc(var(--hdx-band, 56px) + 40px))); }
@media (min-width: 768px) { .gfx-dial[data-gd-steps="page"] { --gd-top: var(--gd-page-top, var(--st-top, calc(var(--hdx-band, 64px) + 44px))); } }
.gfx-dial[data-gd-steps="page"] .gfx-dial-steps ol { display: none; }
.gfx-dial[data-gd-steps="page"] .gfx-dial-steps { justify-content: flex-end; }
.gfx-dial[data-gd-steps="page"]:not(.is-live) .gfx-dial-steps { display: none; }
.gfx-dial.is-live[data-gd-steps="page"] .gfx-dial-steps { z-index: 5; pointer-events: none; }
.gfx-dial.is-live[data-gd-steps="page"] .gfx-dial-ctl { pointer-events: auto; }

/* ── 좁은 폭 포스터(1179px 이하 · 폰은 다시 설계) ─────────── */
@media (max-width: 1179px) {
  .gfx-dial { --gd-num: clamp(84px, 30vw, 150px); --gd-run: 59vh; }
  .gfx-dial-stage { display: block; max-width: 744px; padding: 0 32px 72px; }
  .gfx-dial-copy { max-width: none; }
  .gfx-dial-steps { margin-bottom: 30px; gap: 10px; }
  .gfx-dial-steps li { font-size: 14px; gap: 8px; }
  .gfx-dial-steps li:not(:last-child)::after { margin-right: 8px; min-width: 8px; }
  .gfx-dial-ctl { height: 44px; padding: 0 16px; font-size: 14px; }
  .gfx-dial-title { font-size: var(--st-h, 32px); }
  .gfx-dial-lead { margin-top: 12px; font-size: 16px; line-height: 1.55; }
  .gfx-dial-count { margin-top: 28px; }
  .gfx-dial-count-k { font-size: 16px; gap: 8px; }
  .gfx-dial-chip { height: 28px; font-size: 14px; padding: 0 11px; }
  .gfx-dial-num { margin-top: 12px; }
  .gfx-dial-count-s { margin-top: 10px; font-size: 16px; }
  .gfx-dial-note { font-size: 14px; margin-top: 2px; }
  .gfx-dial-legend { margin-top: 22px; font-size: 14px; gap: 6px 16px; }
  .gfx-dial-report { margin-top: 14px; width: auto; padding: 20px 12px 16px; }
  .gfx-dial-rep-sub { font-size: 14px; }
  .gfx-dial-table .tb-d { width: 100%; max-width: 698px; }
  .gfx-dial-rows li { font-size: 14px; grid-template-columns: 58px 156px minmax(0, 1fr); }
  .gfx-dial-foot { font-size: 14px; }
  .gfx-dial-sat { font-size: 14px; }
  .gfx-dial-sat-h, .gfx-dial-sat-m, .gfx-dial-pill, .gfx-dial-arw { font-size: 14px; }
  .gfx-dial-c-top, .gfx-dial-c-bot { font-size: 14px; }
}
@media (max-width: 759px) {
  .gfx-dial-stage { padding: 0 16px 64px; }
  .gfx-dial-report { padding: 18px 14px 14px; border-radius: 14px; }
  .gfx-dial-rep-t { font-size: 19px; }
  .gfx-dial-table { margin-top: 12px; }
  .gfx-dial-table .tb-d { display: none; }
  .gfx-dial-table .tb-m { display: block; width: 330px; }
  .gfx-dial-rows li { grid-template-columns: 50px minmax(0, 1fr); row-gap: 1px; padding: 9px 0; }
  .gfx-dial-rows li > :nth-child(n+3) { grid-column: 2; }
  /* 폰: 줄 글(요약)을 표 위로 — 장면이 화면 위로 빠질 때 마지막에 남는 것이 글이 아니라 표 */
  .gfx-dial-report { display: flex; flex-direction: column; }
  .gfx-dial-rep-h { order: 0; }
  .gfx-dial-rows { order: 1; margin-top: 10px; }
  .gfx-dial-table { order: 2; margin-top: 14px; }
  .gfx-dial-foot { order: 3; }
}
@media (max-width: 389px) {
  .gfx-dial-table .tb-m { display: none; }
  .gfx-dial-table .tb-s { display: block; width: 300px; }
}

/* ── 장면(.is-live) ─────────────────────────────────────── */
/* 11-04 반복판: 무대 = 높이 고정 판(화면 높이 − 쪽 고정 띠 --gd-top · 데스크톱 640~840 · 폰 560~780) · CSS 가 미리 잡음(밀림 0) · sticky·스크롤 트랙 0 */
.gfx-dial.is-live .gfx-dial-track { position: relative; height: auto; padding-top: 0; }   /* 위 여백 = 무대 자리의 --st-pad */
.gfx-dial.is-live .gfx-dial-stage {
  position: relative; display: block; max-width: none; margin: 0; padding: 0;
  height: clamp(640px, calc(100vh - var(--gd-top) - 16px), 840px); overflow: hidden;
}
@supports (height: 100svh) { .gfx-dial.is-live .gfx-dial-stage { height: clamp(640px, calc(100svh - var(--gd-top) - 16px), 840px); } }
@media (max-width: 1179px) {
  .gfx-dial.is-live .gfx-dial-stage { height: clamp(560px, calc(100vh - var(--gd-top)), 780px); }
  @supports (height: 100svh) { .gfx-dial.is-live .gfx-dial-stage { height: clamp(560px, calc(100svh - var(--gd-top)), 780px); } }
}
.gfx-dial.is-live:not(.is-ready) .gfx-dial-stage { visibility: hidden; }
.gfx-dial.is-live .gfx-dial-steps,
.gfx-dial.is-live .gfx-dial-copy,
.gfx-dial.is-live .gfx-dial-legend,
.gfx-dial.is-live .gfx-dial-count,
.gfx-dial.is-live .gfx-dial-report,
.gfx-dial.is-live .gfx-dial-sat,
.gfx-dial.is-live .gfx-dial-center,
.gfx-dial.is-live .gfx-dial-face { position: absolute; left: 0; top: 0; margin: 0; }
.gfx-dial.is-live .gfx-dial-ctl { display: inline-block; }
.gfx-dial.is-live .gfx-dial-copy { max-width: none; }
.gfx-dial.is-live .gfx-dial-face { display: block; border-radius: 50%; z-index: 0; }
/* 다이얼 바탕 원 = 판 .st-frame(무대 · 바탕·선·그림자·테두리 빛 = stage.css) — 모양만 원 · 판이 아닐 때만 이 장면의 종이 원 */
.gfx-dial.is-live .gfx-dial-face:not(.st-frame) {
  background: var(--gd-paper);
  box-shadow: 0 0 0 1px rgba(21, 20, 20, .05), 0 24px 48px -16px rgba(21, 20, 20, .14), 0 8px 18px -10px rgba(21, 20, 20, .12);
}
.gfx-dial .gfx-dial-face.st-frame::before { border-radius: 50%; }   /* 판 테두리 빛(::after · stage.css)은 둥글기를 물려받음 */
.gfx-dial.is-live .gfx-dial-report { z-index: 1; max-width: none; opacity: 0; }
.gfx-dial.is-live .gfx-dial-canvas { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.gfx-dial.is-live .gfx-dial-center { display: flex; z-index: 3; }
.gfx-dial.is-live .gfx-dial-sat { display: block; opacity: 0; z-index: 4; }
.gfx-dial.is-live .gfx-dial-steps, .gfx-dial.is-live .gfx-dial-copy, .gfx-dial.is-live .gfx-dial-legend, .gfx-dial.is-live .gfx-dial-count { z-index: 4; }
.gfx-dial.is-live .gfx-dial-sat-r2 { overflow: hidden; }
/* 펼친 표: 칸은 캔버스가 그리다가 끝 프레임에서 포스터 SVG 로 넘김(같은 그림) */
.gfx-dial.is-live:not(.is-done) .gfx-dial-table .tb-cells { visibility: hidden; }
.gfx-dial.is-live .gfx-dial-rep-h, .gfx-dial.is-live .gfx-dial-table .tb-head { opacity: var(--gd-head, 0); }
.gfx-dial.is-live .gfx-dial-rows, .gfx-dial.is-live .gfx-dial-foot { opacity: var(--gd-text, 0); }
.gfx-dial.is-live .gfx-dial-rows li.is-cut, .gfx-dial.is-live .gfx-dial-foot.is-cut { display: none; }
/* 낮은 폰(높이 760 미만): 위성은 줄 셋(날 · 칩 · 사라짐) — 다이얼을 폭 가득 */
.gfx-dial.is-live.is-tight .gfx-dial-sat-h, .gfx-dial.is-live.is-tight .gfx-dial-sat-m, .gfx-dial.is-live.is-tight .gfx-dial-sat > .gfx-dial-addr { display: none; }
.gfx-dial.is-live.is-tight .gfx-dial-sat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 11px 14px 12px; }
.gfx-dial.is-live.is-tight .gfx-dial-sat-chips { margin-top: 0; flex-wrap: wrap; row-gap: 4px; }
.gfx-dial.is-live.is-tight .gfx-dial-sat-r2 { grid-column: 1 / -1; }
.gfx-dial.is-live .gfx-dial-center.is-mini .gfx-dial-c-top, .gfx-dial.is-live .gfx-dial-center.is-mini .gfx-dial-c-bot { display: none; }
.gfx-dial.is-live .gfx-dial-center.is-mini .gfx-dial-c-num { margin: 0; }
.gfx-dial.is-live.is-tight .gfx-dial-lead { font-size: 14px; margin-top: 6px; }
.gfx-dial.is-live.is-tight .gfx-dial-num { margin-top: 6px; }
.gfx-dial.is-live.is-tight .gfx-dial-count-s { margin-top: 6px; }
/* 낮은 폰 끝 프레임: 보고서 안 여백을 줄여 무대 안에 1:1 로(줄이기 배율 0 · 표 글 14px 그대로) */
.gfx-dial.is-live.is-tight .gfx-dial-report { padding: 14px 12px 10px; }
.gfx-dial.is-live.is-tight .gfx-dial-rows { margin-top: 8px; }
.gfx-dial.is-live.is-tight .gfx-dial-table { margin-top: 10px; }

/* ── 표 SVG 색 = 같은 토큰(밝은 기본에서는 원래 값과 같음) ───────────────── */
.gfx-dial .gfx-dial-table .tb-cells path[fill="#cfe5d6"] { fill: var(--gd-okp); }
.gfx-dial .gfx-dial-table .tb-cells path[fill="#151414"] { fill: var(--gd-ink); }
.gfx-dial .gfx-dial-table .tb-cells path[fill="#ff5e1f"] { fill: var(--gd-or); }
.gfx-dial .gfx-dial-table .tb-cells path[fill="#1f7a4d"] { fill: var(--gd-ok); }
.gfx-dial .gfx-dial-table .tb-cells path[stroke="#fffdf9"] { stroke: var(--gd-paper); }
.gfx-dial .gfx-dial-table .tb-head { fill: var(--gd-mute); }
.gfx-dial .gfx-dial-table text[fill="#c2410c"], .gfx-dial .gfx-dial-table g[fill="#c2410c"] { fill: var(--gd-ort); }
.gfx-dial .gfx-dial-table text[fill="#1f7a4d"], .gfx-dial .gfx-dial-table g[fill="#1f7a4d"] { fill: var(--gd-okt); }
.gfx-dial .gfx-dial-table text[fill="#4d4a46"], .gfx-dial .gfx-dial-table g[fill="#4d4a46"] { fill: var(--gd-sub); }
.gfx-dial .gfx-dial-table text[fill="#8f897f"], .gfx-dial .gfx-dial-table g[fill="#8f897f"] { fill: var(--gd-dim); }
.gfx-dial .gfx-dial-table text[fill="#736d66"] { fill: var(--gd-mute); }

/* ── 어두운 무대(.hb-stage · 지시서 §19) — 무대 검정 + 글자 흰색 + 주황 강조 · 사라짐 초록은 무대 토큰 --st-ok · 파스텔·그림자 0 ──
   토큰 다섯은 무대가 내려줌. 여기서는 그 다섯으로 만든 둘째 색만 다시 셈: 흐린 글 · 괘선 둘째 · 표 괘선 · 주황 글 = 주황 그대로 · 알약 바탕 = 투명.
   사라짐 확인 = 무대의 --st-ok(stage.css '선택: 초록 사라짐을 무대에서 읽히게 밝힌 같은 초록 · 장면이 사라짐을 그릴 때만') · 사라진 뒤 = 그 초록 24%(어두운 초록 · 파스텔 0). */
.hb-stage .gfx-dial {
  --gd-sub: #c8c5c0; --gd-dim: #9a958e; --gd-line2: #1e1e21; --gd-rule: #3a3a3e;
  --gd-ort: var(--gd-or); --gd-orb: transparent; --gd-orl: var(--gd-or);
  --gd-ok: var(--st-ok, #34a36b); --gd-okt: var(--st-ok, #34a36b); --gd-okp: #15281e; --gd-okb: transparent; --gd-okl: var(--st-ok, #34a36b);
  --gd-sh: none; --gd-sh-sat: none;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .hb-stage .gfx-dial {
    --gd-sub: color-mix(in srgb, var(--gd-ink) 78%, var(--gd-paper));
    --gd-dim: color-mix(in srgb, var(--gd-mute) 86%, var(--gd-ink));
    --gd-line2: color-mix(in srgb, var(--gd-line) 60%, var(--gd-paper));
    --gd-rule: color-mix(in srgb, var(--gd-line) 78%, var(--gd-ink));
    --gd-okp: color-mix(in srgb, var(--gd-ok) 24%, var(--gd-paper));
  }
}
.hb-stage .gfx-dial-report:not(.st-frame), .hb-stage .gfx-dial-sat { box-shadow: none; border-color: var(--gd-line); }
.hb-stage .gfx-dial.is-live .gfx-dial-face:not(.st-frame) { box-shadow: none; border: 1px solid var(--gd-line); }
.hb-stage .gfx-dial-chip { background: transparent; border-color: var(--gd-rule); }
.hb-stage .gfx-dial-ctl { background: transparent; }
.hb-stage .gfx-dial-ctl::before { display: none; }
.hb-stage .gfx-dial-steps li:not(:last-child)::after { background: var(--gd-rule); }
/* §21 뒤집는 동안(html[data-theme-transition])만 장면 글·선 색이 0.5초로 따라 바뀜(표 SVG fill 포함) */
html[data-theme-transition] .gfx-dial, html[data-theme-transition] .gfx-dial * { transition-property: color, background-color, border-color, box-shadow, fill, stroke; transition-duration: var(--theme-duration, .5s); transition-timing-function: var(--theme-ease, ease); }
@media (prefers-reduced-motion: reduce) { html[data-theme-transition] .gfx-dial, html[data-theme-transition] .gfx-dial * { transition: none; } }