/* ============================================================
   연담 양조 가이드 — 컴포넌트 스타일 (T026)
   값은 전부 tokens.css 의 var() 참조다. raw hex·하드코딩 font-size 금지 (헌법 V).
   근거: 연담-design-system/design.md — Hard rules 1~17, 사용 맥락(터치 --touch-min·--touch-gap).
   ============================================================

   ── 마이그레이션 지도 (W002 작성 · W029 1차 정리) — 기존 클래스 → 신규 어휘
   참조 0 확인된 것만 제거한다 — grep 은 동적 클래스(verdict-{{…}})를 못 본다.
   새 화면·수정 화면은 반드시 "신규" 이름에서 고른다 (Hard rule 17).

   | 기존 (v1)                          | 신규 (v3 어휘)                | 상태 (W029) |
   |------------------------------------|-------------------------------|-------------|
   | 구 계산결과 카드 5종·구 탭 2종      | .metric / .card / 화면 분리   | ✅ 제거 완료 |
   | .work-card .stage-card             | .card                         | 잔존 — 화면 이행 중 |
   | .master-detail .active-batch       | .card 링크형                  | 잔존 — 사용 중 |
   | .big-label .big-number             | .metric__label/__value        | ✅ 제거 완료 |
   | .work-action .work-sub .work-meta  | (보류 — 대응 어휘 미정)       | 잔존 — 작업 화면 활자 역할 유지 |
   | .inline-row .bottle-row .stock-row | .datalist__row 또는 .cluster  | 잔존 — 폼 화면 사용 중 |
   | .step-row .ingredient-row .check-row | .cluster (+ .field)         | 잔존 — 에디터 사용 중 |
   | 맨 <table>                         | .datatable                    | 5열 이상 전환 완료(4열 이하 존치) |
   | .verdict-fit / -unfit / -na        | .verdict--fit/--unfit/--na    | ✅ 이행·제거 완료 (W029b) |
   | .notice-kind (+ .notice)           | .notice--safety/--legal/--hygiene | 잔존 — B-017 연동 |
   | button .btn-link .btn-primary      | .btn/--primary/--ghost/--danger | 이행 중 — 참조 잔존 |
   | .site-nav a                        | .nav/.nav__link + .tabbar     | ✅ 이행·제거 완료 (W046) |
   | .page (컨테이너 겸용)               | .shell + .page__head/__title  | 병존 (base.html) |
   | 빈 상태 즉석 마크업                 | .empty                        | ✅ 주요 화면 적용 |
   | .field .badge .chip                | 동명 유지 — 요소만 신설       | 유지 |
   ============================================================ */

* { box-sizing: border-box; }

/* 가로 스크롤 금지 — hidden 이 아니라 clip (Hard rule 15 · 오퍼스엠 G7 권장).
   덮는 게 아니라 원인(긴 단어·고정폭·표)을 고치는 것이 원칙이고, clip 은 마지노선이다 */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base); /* 16px — 헌법 XI-4. --text-md(15px)는 표·캡션 전용 (Hard rule 14) */
  font-weight: var(--body-weight);
  line-height: var(--leading-body); /* 한글 본문 1.7 이상 — Hard rule 5 */
}

/* 오버플로 방지 관용구 (design.md §Responsive) — 긴 단어·URL 이 360px 을 밀지 않게 */
:where(p, li, dd, td) { overflow-wrap: anywhere; }

h1, h2 { text-wrap: balance; }

/* ── 헤더 ── */
.site-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 메뉴가 4개가 되며 좁은 화면에서 글자가 세로로 쪼개졌다 (2026-08-15) */
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: var(--touch-min); /* 탭 대상 — 헤더 로고도 링크다 (W011 실측 35px) */
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
}

.brand-ko { font-size: var(--text-2xl); }

/* 국·영문 혼용 시 라틴 보정 (design.md §Type) — 워드마크 라틴 병기는 제거됐지만
   (사용자 결정 2026-08-21) 제목의 국·영 혼용을 위해 어휘는 유지한다 */
.latin { font-size: calc(1em * var(--display-latin-scale)); }

/* 모드·역할 배지 (W047/F-203) — 상업만 강조(기본 .badge=accent 계열),
   가양주는 조용히: 잉크 보조색으로 낮춘다. 두 번째 강조색을 만들지 않는다 (Hard rule 6) */
.badge[data-mode="home"] {
  color: var(--color-ink-2);
  background: var(--color-paper-2);
}

/* 헤더 네비(.nav — W046 데이터 렌더)는 넓은 화면 전용. 좁은 화면은 하단 탭바 */
@media (max-width: 47.99rem) {
  .site-header .nav { display: none; }
}

/* ── 상단 탭바 (W046 · W068 하단→상단 — design.md v0.4.2 .tabbar) — 767px 이하 전용.
   5칸 = 항목 4 + 더보기. 헤더 아래 sticky — 스크롤해도 메뉴가 남는다.
   상단 배치라 .actionbar(하단)와 충돌하지 않아 작업 모드에서도 유지 ── */
.tabbar {
  position: sticky;
  top: 0;
  z-index: 10; /* 본문 카드·metric 위로 — 스크롤 중 겹침 방지 */
  display: flex;
  gap: var(--touch-gap);
  background: var(--color-paper);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  padding: var(--space-1) var(--space-2);
}

.tabbar__link {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  color: var(--color-ink-2);
  text-decoration: none;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

.tabbar__link[aria-current="page"] { color: var(--color-ink); font-weight: var(--heading-weight); }

.tabbar__more { flex: 1 1 0; min-width: 0; position: relative; margin: 0; }

.tabbar__more > summary {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  cursor: pointer;
}

/* 더보기 시트 — 탭바 아래로 펼친다 (W068 상단 이동). 항목 간 간격은 오탭 방지 (헌법 XI) */
.tabbar__sheet {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 11rem;
  display: grid;
  gap: var(--touch-gap);
  background: var(--color-paper);
  border: var(--border-hairline) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-top: var(--space-2);
  box-shadow: var(--shadow-md);
}

.tabbar__sheet .tabbar__link { justify-content: flex-start; }

@media (min-width: 48rem) {
  .tabbar { display: none; } /* 넓은 화면은 헤더 네비 */
}
/* W068 — 상단 이동으로 .actionbar(하단) 오탭 충돌이 사라져 작업 모드 숨김 규칙과
   하단 여백 보정을 함께 제거했다 (design.md v0.4.2) */

/* ── 페이지 ── */
.page {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--display-weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  margin: var(--space-4) 0;
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--heading-weight);
  line-height: var(--leading-heading);
  margin: var(--space-5) 0 var(--space-3);
}

/* ── 폼 ── */
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }

/* grid 자식 min-width:auto 해제 — 고유폭 큰 입력(파일 선택 등)이 트랙을 밀지 않게
   (design.md §Responsive 오버플로 관용구 · 실측: /ui/import 파일 입력 367px, W010) */
.field > * { min-width: 0; }

/* ── 작업 모드 (S-10~S-12, T042) — 젖은 손·먼 눈. 장식 0개(Hard rule 13),
   활자 확대, 한 화면 한 가지. 색은 기존 토큰만 쓴다 ── */
.work-mode { font-size: var(--text-lg); line-height: var(--leading-body); }

.work-meta { font-size: var(--text-sm); color: var(--color-muted); }

.work-card {
  background: var(--color-paper-2);
  border: var(--border-hairline) solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  margin: var(--space-4) 0;
}

.work-action {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--display-weight);
  line-height: var(--leading-heading);
  margin: 0;
}

.work-sub { color: var(--color-ink-2); }

/* 홈 최상단 진행 중 배치 카드 (F-050 AC) — 카드 전체가 1탭 대상 */
.active-batch {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: var(--border-hairline) solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  color: var(--color-ink);
  text-decoration: none;
}

.active-batch:hover { background: var(--color-paper-3); }

/* 카드(링크) 밖에 두는 삭제 버튼 — a 안에 button 을 넣을 수 없다 */
.batch-row { margin-bottom: var(--space-5); }

.batch-row > .active-batch { margin-bottom: var(--space-2); }

/* 공정(步) 행 (T039 게이트 — 일정·고지의 입력) */
.stage-subtitle {
  font-size: var(--text-sm);
  font-weight: var(--heading-weight);
  color: var(--color-ink-2);
  margin: var(--space-4) 0 var(--space-2);
}

.step-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

.step-prefix { color: var(--color-muted); }

/* input 은 기본 콘텐츠 폭(min-width:auto)이 커서 flex-basis 를 밀어낸다 — 0 으로 풀어
   한 줄에 담는다 (사용자 지적 2026-08-15) */
.step-row > input { min-width: 0; }

.step-row > [name="day_offset"] { flex: 0 0 4.5rem; }

.step-row > [name="action"] { flex: 1 1 8rem; }

.step-row > [name="target_temp_min"],
.step-row > [name="target_temp_max"] { flex: 0 0 5.5rem; }

/* 셀렉트+버튼 한 줄 (레시피 불러오기 등) */
.inline-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

.inline-row > select { flex: 1 1 14rem; min-width: 0; }

.field > label {
  font-size: var(--text-sm);
  font-weight: var(--heading-weight);
  color: var(--color-ink-2);
}

input, select, textarea {
  font: inherit;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--border-hairline) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-height: var(--touch-min); /* 터치 영역 */
}

/* 파일 입력은 고유폭이 커서 360px 을 민다(실측 367px, /ui/import) —
   가로 스크롤은 덮지 않고 원인을 고친다 (Hard rule 15, W010) */
input[type="file"] { max-width: 100%; }

:focus-visible {
  /* 5.35:1 ≥ 3:1 (design.md 대비표). 폭·오프셋은 전용 토큰 (W012 — 구 --border-frame·2px 하드코딩 정리) */
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* ── 버튼 — primary CTA 는 페이지당 하나 (Hard rule 7) ── */
button {
  font: inherit;
  font-weight: var(--heading-weight);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--color-rule-2);
  background: var(--color-paper-2);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

button:hover { background: var(--color-paper-3); } /* 배경만 — 위치를 움직이지 않는다 */

/* W012 — 구형 button·.btn-link·.chip 에도 8상태를 채운다 (design.md §States).
   신규 어휘 .btn 은 아래 W002 절에 자체 정의가 있다 */
button:active { transform: translateY(1px); } /* transform 만 — 레이아웃 속성 금지 */

button[disabled],
button[aria-disabled="true"],
.btn-link[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  cursor: not-allowed;
}

button[disabled]:active,
button[aria-disabled="true"]:active { transform: none; } /* 눌리는 시늉을 하지 않는다 */

/* loading — 라벨 유지(폭 불변은 라벨을 지우지 않는 것으로 지킨다) + 재조작 차단 */
button[data-state="loading"] { pointer-events: none; opacity: var(--state-disabled-opacity); }

/* error·success — danger 는 강조색과 같은 붉은 계열이라 색만으로 말하지 않는다:
   인접한 .notice/.field__error 문장이 함께 간다 (스펙 §8 gotcha) */
button[data-state="error"] { border-color: var(--color-danger); color: var(--color-danger); }

button[data-state="success"] { border-color: var(--color-success); color: var(--color-success); }

/* 버튼형 링크 — 이동(상세·수정 진입)은 a, 동작(삭제·저장)은 button 으로 구분한다 */
.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--color-rule-2);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-weight: var(--heading-weight);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.btn-link:hover { background: var(--color-paper-3); }

/* S-25 상세 패널 — 행 아래 전 속성 표시, 수정은 여기서 진입 */
.master-detail {
  background: var(--color-paper-2);
  border: var(--border-hairline) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.master-detail p { margin: var(--space-1) 0; }

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn-primary:hover { background: var(--color-accent-strong); }

/* ── 단계 카드 — 표면은 paper→paper-2 한 단 (Hard rule 8) ── */
.stage-card {
  background: var(--color-paper-2);
  border: var(--border-hairline) solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.stage-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.stage-title { font-weight: var(--heading-weight); font-size: var(--text-lg); }

/* 재료 행 — 플렉스: 숨은 컨트롤(단위·가공법)은 자리를 남기지 않고 이웃이 채운다
   (사용자 지적 2026-08-14 — % 라벨 제거 후 빈 칸) */
.ingredient-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

.ingredient-row > [name="kind"] { flex: 0 0 5.5rem; }

/* 기본(좁은 화면) = 원료·가공법 전폭 — 카드 밖 넘침 방지. 넓어지면 한 줄로 (모바일 퍼스트, W010) */
.ingredient-row > [name="ref_id"] { flex: 1 1 100%; min-width: 0; }

.ingredient-row > [name="preparation"] { flex: 1 1 100%; min-width: 0; }

.ingredient-row > [name="amount_value"] { flex: 0 0 6rem; }

.ingredient-row > [name="amount_unit"] { flex: 0 0 3.5rem; }

@media (min-width: 48rem) { /* --bp-wide. 시스템 브레이크포인트로 정렬(구 44rem 폐기) — @media 는 리터럴 */
  .ingredient-row > [name="ref_id"] { flex-basis: 10rem; }
  .ingredient-row > [name="preparation"] { flex-basis: 8rem; }
}

table { width: 100%; border-collapse: collapse; }
/* 행 동작 버튼 묶음 — 좁은 셀에서 세로로 쪼개지지 않게 (사용자 지적 2026-08-19).
   인접 탭 대상 간격 --touch-gap 보장 (W011). ⚠️ 행 안 삭제 버튼의 위치 분리는 W022·W029 */
.row-actions { white-space: nowrap; }

.row-actions > * + * { margin-left: var(--touch-gap); }

/* 파괴적 조작(삭제)은 이웃과 더 띄운다 — 오탭 방지 (W022 · design.md §Responsive 터치) */
.row-actions > [data-log-delete] { margin-left: var(--space-5); }

th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  font-size: var(--text-sm);
}

th { color: var(--color-muted); font-weight: var(--heading-weight); }

/* 정렬 버튼 (사용자 요청 2026-08-15) — 헤더 텍스트 자체가 버튼이다.
   표면·테두리 없이 잉크로만, 방향은 화살표로 (두 번째 강조색 금지) */
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min); /* 터치 영역 */
  min-width: var(--touch-min);  /* 한두 글자 헤더(실측 33px)도 --touch-min 확보 */
  /* 좌우 탭 영역은 패딩으로 채우고 음수 마진으로 시각 정렬 유지 (W011) */
  padding: 0 var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  justify-content: flex-start;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--heading-weight);
  cursor: pointer;
}

.sort-btn:hover { background: none; color: var(--color-accent-strong); }

th[aria-sort="ascending"] .sort-btn,
th[aria-sort="descending"] .sort-btn { color: var(--color-ink); }

/* 알코올내성 강조 — 도수 캡 C-10 입력원 (IA S-25). 강조는 굵기·잉크로, 두 번째 강조색 금지 */
.tolerance { font-weight: var(--display-weight); font-size: var(--text-lg); }

details { margin: var(--space-2) 0; }

summary {
  cursor: pointer;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

/* confidence 배지 — 이론/보정됨/실측기반 (대비 6.25:1 실측 계산, T026 기록) */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--heading-weight);
  color: var(--color-accent-strong);
  background: var(--color-accent-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  vertical-align: middle;
}

/* ── S-01 진입점 칩 (T034) — 복수 선택 토글 ── */
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0; }

.chip {
  border-radius: 999px; /* 칩 형태 — 아치 라디우스 계열 */
  background: var(--color-paper);
}

.chip[aria-pressed="true"] {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

/* 칩 포커스 링 — 즉시 나타난다 (G10, design.md §States. 트랜지션 없음) */
.chip:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  transition: none;
}

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min); /* 터치 영역 */
}

.check-row input[type="checkbox"] { width: var(--space-5); height: var(--space-5); min-height: 0; }

/* 라디오·체크박스는 기본 크기가 작다(실측 13px) — 감싼 label 전체를 탭 영역으로,
   컨트롤 자체도 키운다 (W011 · 스펙 §8 gotcha 의 check-row 와 같은 규율) */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
}

input[type="radio"] { width: var(--space-5); height: var(--space-5); min-height: 0; }

/* 보유 재료로 더한 줄 — 이름은 왼쪽, 삭제는 오른쪽 */
#have-list .check-row { justify-content: space-between; gap: var(--space-3); }

.stock-row {
  display: grid;
  grid-template-columns: 1fr 8rem 3rem;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

.bottle-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* S-22 위반 행 — 색이 아니라 굵기로 신호 (두 번째 강조색 금지, Hard rule 6) */
.violation-row td { font-weight: var(--heading-weight); }

.violation-row td.hint { font-weight: var(--body-weight); }

/* S-11 고지 kind 소제목 */
.notice-kind {
  font-size: var(--text-sm);
  font-weight: var(--heading-weight);
  color: var(--color-ink-2);
  margin: var(--space-3) 0 var(--space-1);
}

/* 결과 알림 */
.notice {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--color-rule-2);
  background: var(--color-paper-2);
}

.notice[data-tone="error"] { border-color: var(--color-danger); color: var(--color-danger); }

.notice[data-tone="ok"] { border-color: var(--color-success); color: var(--color-success); }

.hint { color: var(--color-muted); font-size: var(--text-xs); }

/* 움직임 최소화 (WCAG) — 토큰 duration 0ms 는 tokens.css 가 담당하지만, 검사기가
   tokens.css 를 제외(V007 예외)하므로 transition 이 사는 이 파일에도 대체를 둔다 */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms; animation-duration: 0ms; }
}

/* S-61 판정 (V014) — 판정 화면은 장식 0. 부적합만 --color-accent (두 번째 강조색 금지) */
.verdict { font-family: var(--font-display); font-size: var(--text-display-s); margin: var(--space-4) 0 var(--space-2); }
.spec-reason { color: var(--color-ink-2); max-width: 38rem; }

/* S-71/S-73 (V024) — 기한 지남만 강조 (--color-accent, IA §2 S-73) */
.deadline-overdue { color: var(--color-accent); font-weight: var(--heading-weight); }

/* ============================================================
   W002 — 컴포넌트 어휘 스켈레톤 (design.md v0.4.0 §Components·§States)
   이후 화면 작업은 여기서 고른다. 어휘에 없는 이름이 필요하면
   design.md 에 먼저 추가한 뒤 여기 정의한다 (Hard rule 17).
   ============================================================ */

/* ── 레이아웃 프리미티브 ── */

/* 콘텐츠 컨테이너 — 좌우 --gutter, 최대 --layout-max, 가운데 */
.shell {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 세로 흐름 + 일정 간격. min-width:0 은 grid/flex 자식 오버플로 방지 관용구
   (design.md §Responsive — 기본값 min-width:auto 해제) */
.stack > * { min-width: 0; }

.stack > * + * { margin-top: var(--space-4); }

/* 가로 나열 + 줄바꿈 */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}

/* 넓은 화면에서만 2열 — 기본(좁은 화면)은 1열 (모바일 퍼스트) */
.split { display: grid; gap: var(--section-gap); }

@media (min-width: 64rem) { /* --bp-desk. 토큰은 기록용 — @media 는 리터럴 (tokens.css §Layout) */
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── 표시 ── */

/* 표면 1단 — paper → paper-2. 카드 안에 카드 금지 (Hard rule 8) */
.card {
  background: var(--color-paper-2);
  border: var(--border-hairline) solid var(--color-rule);
  border-radius: var(--radius-lg);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) 0;
}

.card__body { padding: var(--space-4); }

/* 큰 숫자 하나 (도수·온도·D+n) — 숫자는 크게 (design.md 사용 맥락) */
.metric { display: grid; gap: var(--space-1); align-content: start; }

/* 메트릭 나열 — 좁은 화면 1열(자연 줄바꿈), 넓으면 가로 (W025) */
.cluster > .metric { flex: 1 1 12rem; }

/* p 기본 마진 제거 — 라벨:값이 한 덩어리로 읽히게 (W027 실측: 마진이 그리드를 벌림) */
.metric__label,
.metric__value { margin: 0; }

.metric__label { font-size: var(--text-sm); color: var(--color-ink-2); }

.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--display-weight);
  line-height: var(--leading-heading);
}

.metric__unit {
  font-size: var(--text-lg);
  color: var(--color-muted);
  margin-left: var(--space-1);
}

/* 라벨:값 나열 — 표의 좁은 화면 대체형이자 독립 컴포넌트 */
.datalist { margin: 0; }

.datalist__row {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.datalist__label { color: var(--color-muted); font-size: var(--text-sm); }

.datalist__value { margin: 0; }

/* 표 — 좁은 화면에서 정의목록 형태로 전환 (Hard rule 16 · design.md §Responsive).
   마크업은 유지하고 표시만 바꾼다. 셀에 data-label 필수:
   <td data-label="술덧℃">24.5</td>
   ⚠️ 열 수 상한 --table-cols-max(6) 초과 표 — 전환만으로 부족, 열 축소가 선행돼야
   한다 (W014 실측 → W022·W029 대상):
   · _log_table.html 일일 기록 10열(작업 메모 문장 포함 — 열에서 뺄 것)
   · ingredients.html 쌀 마스터 9열
   · recipe_detail.html 계수 표 등 화면별 작업에서 data-label 부여와 함께 판정 */
.datatable { width: 100%; border-collapse: collapse; }

@media (max-width: 47.99rem) { /* --bp-wide 미만 */
  .datatable thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); /* 시각적 숨김 — 스크린리더 유지 */
  }
  .datatable tr {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline) solid var(--color-rule);
  }
  .datatable td {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border-bottom: none;
  }
  .datatable td::before {
    content: attr(data-label);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }
  /* 행 동작 셀은 라벨 없이 버튼만 오른쪽 정렬 — 그리드 배치가 버튼을 쪼개지 않게 (W022) */
  .datatable td.row-actions { display: flex; justify-content: flex-end; gap: var(--touch-gap); }
  .datatable td.row-actions::before { content: none; }
}

/* 판정 배지 변형 — 기존 .verdict-fit 류의 BEM 개명. 판정 화면 4요소는 템플릿 책임 (FR-224) */
.verdict--fit { color: var(--color-ink); }

.verdict--unfit { color: var(--color-accent); }

.verdict--na { color: var(--color-muted); }

/* 공정 고지 변형 — 좌측 구분 테두리. 색만으로 종류를 구분하지 않는다:
   종류(안전·법규·위생)는 반드시 글자로도 표기한다 (Hard rule 11 예외 조건 ②).
   접거나 숨기지 않는다 (헌법 IV).
   ⚠️ legal·hygiene 의 전용색(design.md v0.4.0 예외 — leaf 등)은 잠정 보류:
   test_t038_no_second_accent_promotion 이 v0.3.0 기준(사용 0 강제)이라 충돌.
   테스트 갱신 승인 후 적용한다 — `3. 개발/_보류작업.md` 참조 */
.notice--safety { border-left: var(--border-frame) solid var(--color-warning); }

.notice--legal { border-left: var(--border-frame) solid var(--color-rule-2); }

.notice--hygiene { border-left: var(--border-frame) solid var(--color-rule-2); }

/* ── 입력·조작 ── */

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--heading-weight);
  color: var(--color-ink-2);
}

.field__hint { font-size: var(--text-xs); color: var(--color-muted); }

.field__error { font-size: var(--text-xs); color: var(--color-danger); }

/* error 상태 — 색만으로 구분하지 않는다: .field__error 문구를 함께 둔다 (design.md §States ⚠️) */
.field[data-state="error"] :is(input, select, textarea) { border-color: var(--color-danger); }

/* 버튼 — 8상태 (design.md §States). 페이지당 --primary 하나 (Hard rule 7) */
.btn {
  --btn-y: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-hairline) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font: inherit;
  font-weight: var(--heading-weight);
  text-decoration: none;
  cursor: pointer;
  transform: translateY(var(--btn-y));
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease); /* 개별 속성만 나열한다 (G4) */
}

.btn:hover { background: var(--color-paper-3); } /* 위치를 움직이지 않는다 */

.btn:active { --btn-y: 1px; }

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  transition: none; /* 포커스 링은 즉시 (G10) */
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  cursor: not-allowed;
}

/* loading — 라벨 유지 + 폭 불변은 템플릿·JS 책임, 여기서는 재조작만 차단 */
.btn[data-state="loading"] { pointer-events: none; opacity: var(--state-disabled-opacity); }

.btn[data-state="error"] { border-color: var(--color-danger); color: var(--color-danger); }

.btn[data-state="success"] { border-color: var(--color-success); color: var(--color-success); }

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }

.btn--ghost { background: transparent; border-color: transparent; }

.btn--ghost:hover { background: var(--color-paper-2); }

/* 파괴적 조작 — 다른 탭 대상 바로 옆에 두지 않는다 (design.md §Responsive 터치) */
.btn--danger { background: var(--color-paper); border-color: var(--color-danger); color: var(--color-danger); }

.btn--danger:hover { background: var(--color-paper-2); }

/* 하단 고정 조작줄 — 엄지 도달 범위 (헌법 XI-5). 작업 모드 화면 전용,
   primary 하나 + 보조 최대 하나. 판단 화면(레시피 상세·판정)에는 쓰지 않는다 */
.actionbar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--touch-gap);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + var(--safe-bottom)); /* 홈 인디케이터 */
  background: var(--color-paper);
  border-top: var(--border-hairline) solid var(--color-rule);
}

/* ── 구조 ── */

/* 네비 — 현재 위치 표시 필수 [aria-current="page"] */
.nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover { color: var(--color-accent-strong); }

.nav__link[aria-current="page"] { color: var(--color-ink); font-weight: var(--heading-weight); }

/* 화면 골격 — <h1> 필수 (.page 컨테이너 역할은 .shell 로 이관, W029 정리 전까지 병존) */
.page__head { margin: var(--space-4) 0 var(--space-5); }

.page__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--display-weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

/* 제목이 곧 상세 링크인 화면(작업 모드 등) — 제목은 잉크로, 링크 표시는 밑줄 없이 */
.page__title a { color: inherit; text-decoration: none; }

.page__title a:hover { color: var(--color-accent-strong); }

/* 작업 모드의 핵심 숫자(D+n·목표 온도)는 화면에서 가장 큰 활자 (W020 · design.md 사용 맥락) */
.work-mode .metric__value { font-size: var(--text-display); }

/* 빈 상태 — 무엇이 없고, 언제 채워지고, 지금 무엇을 할 수 있는지.
   실패·오류 어휘 금지 (FR-222) · 내부 화면 코드 금지 (FR-220) */
.empty {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-6) 0;
}

.empty__what { font-size: var(--text-lg); color: var(--color-ink); margin: 0; }

.empty__when { color: var(--color-muted); margin: 0; }

.empty__action { margin-top: var(--space-2); }