/* 디자인 토큰 — docs/visual-system/tokens.css 의 사본. 값은 그 파일과 함께 바꾼다. */
:root {
  /* 색 — 바탕과 면 (차가운 중성 회색, 크림 계열 없음) */
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8f9fb;
  --color-border: #d9dde3;
  --color-border-strong: #767e8a;

  /* 색 — 글자 */
  --color-text: #1c2129;
  --color-text-secondary: #4a5260;
  --color-text-muted: #646b78;
  --color-text-disabled: #8a919c;
  --color-text-on-accent: #ffffff;

  /* 색 — 강조 (절제된 파랑 하나) */
  --color-accent: #1f5fa8;
  --color-accent-hover: #184d89;
  --color-link: #1f5fa8;
  --color-focus: #1f5fa8;
  --color-selected-bg: #eaf1fa;

  /* 색 — 의미 */
  --color-required: #1a6e3f;
  --color-required-bg: #e8f4ec;
  --color-warning: #7a4f00;
  --color-warning-bg: #fff6e0;
  --color-warning-border: #e3c98a;
  --color-discount: #b23a3a;
  --color-disabled-bg: #f0f2f5;
  --color-toast-bg: #1c2129;
  --color-toast-text: #ffffff;
  --color-backdrop: rgba(28, 33, 41, 0.55);

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* 글꼴 — 로컬·시스템 글꼴만, 웹 글꼴 없음 */
  --font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* 모서리 — 작게 유지 */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* 테두리 두께 */
  --border-1: 1px;
  --border-2: 2px;

  /* 그림자 — 회색, 낮은 번짐 */
  --shadow-panel: 0 1px 2px rgba(28, 33, 41, 0.06), 0 2px 6px rgba(28, 33, 41, 0.08);
  --shadow-modal: 0 8px 24px rgba(28, 33, 41, 0.18);

  /* 크기 — 레이아웃과 조작 대상 */
  --layout-min: 1200px;
  --layout-max: 1320px;
  --col-nav: 200px;
  --col-summary: 290px;
  --control-min: 44px;
  --checkbox-size: 18px;
  --icon-size: 16px;
  --thumb-size: 96px;
  --modal-max-height: 85vh;
}

/* 기본 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--color-bg); }
body {
  margin: 0;
  min-width: var(--layout-min);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
body.has-modal { overflow: hidden; }
.sr-only {
  position: absolute;
  width: var(--border-1);
  height: var(--border-1);
  margin: calc(var(--border-1) * -1);
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.page {
  min-width: var(--layout-min);
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* 불러오기 상태에 따라 보이는 요소 */
main:not([data-state="loading"]) .when-loading,
main:not([data-state="error"]) .when-error,
main:not([data-state="ready"]) .when-ready { display: none; }

:focus-visible {
  outline: var(--border-2) solid var(--color-focus);
  outline-offset: var(--border-2);
}

/* 머리말 */
.doc-head h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}
.doc-meta {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.doc-intro {
  max-width: 60em;
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  word-break: keep-all;
}
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-5) 0 0;
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.fact { padding: var(--space-4) var(--space-5); }
.fact + .fact { border-left: var(--border-1) solid var(--color-border); }
.fact dt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-tight);
}
.fact dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

/* 세 단 */
.layout {
  display: grid;
  grid-template-columns: var(--col-nav) minmax(0, 1fr) var(--col-summary);
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-6);
}

/* 분류 메뉴 */
.nav { position: sticky; top: var(--space-6); }
.nav h2 {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.nav-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-align: left;
  cursor: pointer;
}
.nav-btn:hover { background: var(--color-surface); }
.nav-btn[aria-current="true"] { background: var(--color-selected-bg); color: var(--color-accent); }
.nav-count {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 분류 묶음과 항목 줄 */
.group {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: var(--space-6);
}
.group + .group { margin-top: var(--space-6); }
.group-head { padding: var(--space-4) var(--space-4) var(--space-3); }
.group-head h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.group-head p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.group-cols, .item {
  display: grid;
  grid-template-columns: var(--control-min) minmax(0, 1fr) calc(var(--space-8) + var(--space-4)) calc(var(--space-8) * 2 + var(--space-5));
  column-gap: var(--space-3);
}
.group-cols {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  background: var(--color-surface-subtle);
  border-top: var(--border-1) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.group-cols span:nth-child(3), .group-cols span:nth-child(4) { text-align: center; }
.items { list-style: none; margin: 0; padding: 0; }
.item {
  padding: var(--space-2) var(--space-4) var(--space-3) var(--space-2);
  border-top: var(--border-1) solid var(--color-border);
}
.item.is-checked { background: var(--color-selected-bg); }
.item-hit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-min);
  height: var(--control-min);
  cursor: pointer;
}
.is-required .item-hit, .is-required .item-name { cursor: not-allowed; }
.item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-min);
}
.item-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  cursor: pointer;
}
.item-desc {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  word-break: keep-all;
}
.item-days, .item-price {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min);
  align-self: start;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.item-days { color: var(--color-text-muted); }
.item-price { font-weight: var(--weight-medium); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}
.tag-required { color: var(--color-required); background: var(--color-required-bg); }
.tag-requires {
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border: var(--border-1) solid var(--color-border);
}
.item-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-bg);
  border: var(--border-1) solid var(--color-warning-border);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.ico { width: var(--icon-size); height: var(--icon-size); flex: none; fill: none; }
.item-warn .ico { stroke: var(--color-warning); margin-top: var(--space-1); }

/* 참고 화면 */
.item-extra { margin-top: var(--space-1); }
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-min);
  padding: 0 var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.link-btn .ico { stroke: var(--color-link); }
.link-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-1) 0 var(--space-2); }
.thumbs figure { margin: 0; }
.thumb {
  display: block;
  width: var(--thumb-size);
  height: calc(var(--thumb-size) * 2);
  padding: 0;
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  overflow: hidden;
  cursor: zoom-in;
}
.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.thumb.is-broken, .thumb:disabled { cursor: default; }
.thumb-fail {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-tight);
  text-align: center;
  word-break: keep-all;
}
.thumbs figcaption {
  max-width: var(--thumb-size);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-tight);
}

/* 체크 상자 */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  border: var(--border-2) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
input[type="checkbox"]::before {
  content: "";
  width: calc(var(--checkbox-size) / 4);
  height: calc(var(--checkbox-size) / 2);
  border-style: solid;
  border-color: var(--color-text-on-accent);
  border-width: 0 var(--border-2) var(--border-2) 0;
  transform: translateY(calc(var(--border-1) * -1)) rotate(45deg);
  visibility: hidden;
}
input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); }
input[type="checkbox"]:checked::before { visibility: visible; }
input[type="checkbox"]:disabled { cursor: not-allowed; }
input[type="checkbox"]:disabled:checked { background: var(--color-required); border-color: var(--color-required); }

/* 견적 요약 */
.aside {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--space-6) * 2);
}
.aside > * { flex-shrink: 0; }
.aside > .summary { flex-shrink: 1; min-height: 0; }
.summary {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: var(--space-5);
}
.summary > * { flex-shrink: 0; }
.summary-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.summary dl { margin: 0; }
.sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.sum-row dt { color: var(--color-text-secondary); }
.sum-row dd {
  margin: 0;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.picked {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
  list-style: disc outside;
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
  word-break: keep-all;
}
.summary > .picked { flex-shrink: 1; min-height: 0; overflow-y: auto; }
.picked.is-empty { list-style: none; padding-left: var(--space-3); color: var(--color-text-muted); }
.sum-sep { border-top: var(--border-1) solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-2); }
.sum-discount dd { color: var(--color-discount); }
.sum-net dt, .sum-net dd { color: var(--color-text); font-weight: var(--weight-semibold); }
.sum-total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-2) solid var(--color-border-strong);
}
.sum-total dt { color: var(--color-text); font-weight: var(--weight-semibold); }
.sum-total dd {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

/* 공수 합계 설명 */
.sum-days { position: relative; }
.sum-days dt { display: flex; align-items: center; }
.tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-min);
  height: var(--control-min);
  margin: calc(var(--space-3) * -1) 0 calc(var(--space-3) * -1) calc(var(--space-2) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  cursor: help;
}
.tip-btn .ico { stroke: var(--color-text-muted); }
.tip-btn:hover .ico, .tip-btn:focus .ico { stroke: var(--color-text); }
.tip {
  display: none;
  position: absolute;
  top: calc(100% - var(--space-1));
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-toast-bg);
  color: var(--color-toast-text);
  box-shadow: var(--shadow-modal);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.tip-btn:hover + .tip, .tip-btn:focus + .tip { display: block; }
.tip-btn + .tip.is-dismissed { display: none; }

/* 버튼 */
.actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control-min);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: var(--border-1) solid var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-1) solid var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-subtle); }
.btn:disabled, .btn:disabled:hover {
  background: var(--color-disabled-bg);
  color: var(--color-text-disabled);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* 복사 결과 */
.copy-ok {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--color-surface-subtle);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
.copy-ok .ico { stroke: var(--color-required); margin-top: var(--space-1); }
.copy-fallback { margin-top: var(--space-3); }
.copy-fallback label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.url-field {
  display: block;
  width: 100%;
  min-height: var(--control-min);
  padding: 0 var(--space-3);
  border: var(--border-1) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}
.url-field::selection { background: var(--color-accent); color: var(--color-text-on-accent); }

/* 링크 속 없는 항목 안내 */
.notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-bg);
  border: var(--border-1) solid var(--color-warning-border);
  border-radius: var(--radius-md);
  color: var(--color-warning);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* 함께 골라짐 알림 */
.toast {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-toast-bg);
  color: var(--color-toast-text);
  box-shadow: var(--shadow-modal);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}
.toast-live {
  position: fixed;
  left: 50%;
  bottom: var(--space-7);
  z-index: 3;
  transform: translateX(-50%);
}

/* 견적 조건 */
.section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.terms { margin-top: var(--space-8); }
.terms-list {
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + var(--space-6));
  list-style: decimal outside;
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  word-break: keep-all;
  font-variant-numeric: tabular-nums;
}
.terms-list li + li { margin-top: var(--space-2); }

/* 불러오는 중 */
.load-msg {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.load-list {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.load-list-head { padding: var(--space-4) var(--space-4) var(--space-3); }
.skel {
  display: block;
  height: var(--space-3);
  background: var(--color-border);
  border-radius: var(--radius-sm);
}
.skel-l { width: 100%; }
.skel-m { width: 70%; }
.skel-s { width: 40%; }
.skel-box { flex: none; width: var(--checkbox-size); height: var(--checkbox-size); }
.skel-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-1) solid var(--color-border);
}
.skel-lines { display: grid; flex: 1; gap: var(--space-2); }
.skel-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

/* 불러오기 실패 */
.load-summary-note {
  margin: 0;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.load-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-warning-bg);
  border: var(--border-1) solid var(--color-warning-border);
  border-radius: var(--radius-md);
}
.load-error .ico { stroke: var(--color-warning); margin-top: var(--space-1); }
.load-error-title {
  margin: 0;
  color: var(--color-warning);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.load-error-desc {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.load-retry { display: inline-flex; width: auto; margin-top: var(--space-3); }

/* 참고 캡처 확대 창(capture-viewer) */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;
  background: var(--color-backdrop);
}
.viewer {
  display: grid;
  gap: var(--space-4);
  width: calc(var(--col-summary) * 2);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
}
.viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.viewer-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
.viewer-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.viewer-figure { margin: 0; }
.shot {
  display: flex;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-surface-subtle);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
}
.shot img {
  display: block;
  height: calc(var(--modal-max-height) - var(--space-8) * 5);
  max-height: var(--modal-max-height);
  width: auto;
  aspect-ratio: 540 / 1040;
  border-radius: var(--radius-md);
}
.viewer-caption {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  text-align: center;
}
.viewer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.counter {
  margin: 0;
  min-width: var(--control-min);
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.viewer-foot {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-1) solid var(--color-border);
}
.viewer-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
.viewer-keys {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-min);
  height: var(--control-min);
  padding: 0;
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  cursor: pointer;
}
.icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: var(--color-text);
  stroke-width: var(--border-2);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover:not(:disabled) {
  background: var(--color-selected-bg);
  border-color: var(--color-accent);
}
.icon-btn:hover:not(:disabled) .icon { stroke: var(--color-accent); }
.icon-btn:focus-visible {
  outline: var(--border-2) solid var(--color-focus);
  outline-offset: var(--border-2);
}
.icon-btn:disabled {
  background: var(--color-disabled-bg);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.icon-btn:disabled .icon { stroke: var(--color-text-disabled); }
.shot-missing {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  width: calc(var(--thumb-size) * 2);
  aspect-ratio: 540 / 1040;
  padding: var(--space-4);
  background: var(--color-surface-subtle);
  border: var(--border-1) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}
.shot-missing .icon { stroke: var(--color-text-muted); }