/* 컴포넌트 골격(TASK-S4-003): 버튼·입력·표·상태 배지·경보 줄. 값은 토큰 변수만(직접 색값은 tests/web/tokens.test.ts 가 잡는다).
   터치 목표 ≥ var(--target-min)(48px, 06장 U-7) · 글자 ≥ var(--font-base)(16px, 태블릿 18px) · 상태 = 색 + 글자 + 모양(U-2).
   기호는 번들 글꼴(CareSans, 나눔고딕 서브셋)에 있는 것만 쓴다 — U+2713(체크)은 없어서 √(U+221A)를 쓴다. 검사: tests/web/fonts.test.ts */

/* ── 링크: 색은 primary(대비표에서 bg·surface 위 4.5:1 보장), 목록·경보 줄 안의 링크는 터치 목표 48px */
a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.15em; }
.alert a, .table a, li a, .header a, a.action-link { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-unit); }
a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ── 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-unit);
  min-height: var(--target-min); min-width: var(--target-min); padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
  font: inherit; font-size: var(--font-base); font-weight: 700; line-height: 1.2; cursor: pointer;
  border-radius: var(--radius-md); border: 2px solid var(--color-primary);
  background: var(--color-primary); color: var(--color-on-primary);
}
.btn--accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-muted); }
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 1; background: var(--color-surface); color: var(--color-muted); border-color: var(--color-muted); }

/* ── 입력 */
.field { display: flex; flex-direction: column; gap: var(--space-unit); }
.field__label { font-weight: 700; }
.field__hint { color: var(--color-muted); }
.input, .select, .textarea {
  min-height: var(--target-min); padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
  font: inherit; font-size: var(--font-base); color: var(--color-ink); background: var(--color-surface);
  border: 2px solid var(--color-muted); border-radius: var(--radius-sm); width: 100%; max-width: 32rem;
}
.textarea { min-height: calc(var(--target-min) * 2); resize: vertical; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 1px; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
tr[tabindex]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }   /* TASK-S4-116: 목록 행(키보드로 열기) — 고리 없이 초점만 옮겨 가던 것 */   /* TASK-S4-116: 브라우저 기본 1px 고리(토큰 밖 색)뿐이던 것 — 다른 초점과 같은 3px 강조색 */
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--state-fail); }
.field__error { color: var(--state-fail); font-weight: 700; }
.field__error::before { content: "■ "; }
/* 미작성 표지(U-3): 빈칸이 아니라 글자로 보인다 */
.unwritten { color: var(--state-fail); font-weight: 700; }
.unwritten::before { content: "■ "; }

/* ── 표 */
.table { width: 100%; border-collapse: collapse; font-size: var(--font-base); background: var(--color-surface); }
.table th, .table td { padding: calc(var(--space-unit) * 3); text-align: left; border-bottom: 2px solid var(--color-bg); vertical-align: top; min-height: var(--target-min); }
.table th { font-weight: 700; border-bottom-color: var(--color-muted); }
.table tr[tabindex], .table tr[role="button"] { cursor: pointer; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table--wrap { overflow-x: auto; }

/* ── 상태 배지: 색 + 글자 + 모양(::before 의 기호). 배지 색은 글자·테두리에만 쓴다(바탕은 surface → 대비 4.5:1 은 토큰 표에서 보장). */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-unit);
  min-height: calc(var(--space-unit) * 8); padding: var(--space-unit) calc(var(--space-unit) * 2);
  border-radius: var(--radius-sm); border: 2px solid currentColor; background: var(--color-surface);
  font-size: var(--font-base); font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.badge::before { display: inline-block; }
.badge--ok   { color: var(--state-ok); }   .badge--ok::before   { content: "√"; }
.badge--warn { color: var(--state-warn); } .badge--warn::before { content: "▲"; }
.badge--fail { color: var(--state-fail); } .badge--fail::before { content: "■"; }
.badge--info { color: var(--state-info); } .badge--info::before { content: "●"; }
.badge--na   { color: var(--state-na); }   .badge--na::before   { content: "◇"; }
/* ── 표지(TASK-S4-037): 판정 결과·창의 flags(확정 점수 제외·사람 확인 필요·사후 기록 …). 상태가 아니라 부가 표지라 색 없이 본문 글자 + 점선 테두리. */
.tag { display: inline-flex; align-items: center; padding: 0 calc(var(--space-unit) * 2); border: 1px dashed var(--color-muted); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-surface); font-size: var(--font-base); line-height: 1.6; white-space: nowrap; }

/* ── 경보 줄(마감 임박·미실시 확정·사후 입력 등): 왼쪽 굵은 띠 + 기호 + 글자. 본문 글자는 ink(7:1). */
.alert {
  display: flex; gap: calc(var(--space-unit) * 2); align-items: flex-start;
  min-height: var(--target-min); padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 4);
  background: var(--color-surface); color: var(--color-ink); border-left: 8px solid var(--color-muted); border-radius: var(--radius-sm);
}
.alert__mark { font-weight: 700; flex: 0 0 auto; }
.alert__body { flex: 1 1 auto; }
.alert__action { flex: 0 0 auto; }
.alert--ok   { border-left-color: var(--state-ok); }   .alert--ok   .alert__mark { color: var(--state-ok); }
.alert--warn { border-left-color: var(--state-warn); } .alert--warn .alert__mark { color: var(--state-warn); }
.alert--fail { border-left-color: var(--state-fail); } .alert--fail .alert__mark { color: var(--state-fail); }
.alert--info { border-left-color: var(--state-info); } .alert--info .alert__mark { color: var(--state-info); }
.alert--na   { border-left-color: var(--state-na); }   .alert--na   .alert__mark { color: var(--state-na); }

/* ── 기록 버전 카드(버전 이력·수급자 상세 공통). 취소 버전 = 점선·값 취소선(취소 사유 제외)·muted 글자, 불투명도로 흐리게 하지 않는다(본문 7:1) */
.version { background: var(--color-surface); border: 2px solid var(--color-muted); border-radius: var(--radius-md); padding: calc(var(--space-unit) * 4); }
.version--cancelled { border-style: dashed; color: var(--color-muted); }
.version--cancelled .version__values dd:not(.keep) { text-decoration: line-through; }   /* 취소 사유는 읽혀야 하므로 줄을 긋지 않는다 */
.version__values { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-unit) calc(var(--space-unit) * 4); margin: 0; }
.version__values dt { font-weight: 700; } .version__values dd { margin: 0; }

/* ── 서명 이미지 자리(O-5): 입력이 아니다. 서명 패드·저장된 서명 불러오기는 두지 않는다 */
.sig-slot { min-height: var(--target-min); min-width: calc(var(--target-min) * 2); border: 2px dashed var(--color-muted); border-radius: var(--radius-sm); color: var(--color-muted); display: flex; align-items: center; justify-content: center; padding: 0 var(--space-unit); }

/* ── 인쇄(E-5·E-6, TASK-S4-032): 종이 색(시스템 색 Canvas/CanvasText — 팔레트 값을 직접 쓰지 않는다, U-1), 입력·버튼·머리줄 숨김, 쪽 나눔에서 항목이 잘리지 않게 */
@media print {
  body { background: Canvas; color: CanvasText; }
  .header, .no-print, button, .btn { display: none !important; }
  .surface, .alert, .ind, .check-item { background: Canvas !important; border-color: CanvasText !important; color: CanvasText !important; break-inside: avoid; }
  .badge { color: CanvasText !important; border-color: CanvasText !important; }
  a { color: CanvasText; text-decoration: none; }
}
/* 화면 이동 줄(TASK-S4-129, nav.ts) — 실서버·목업에 붙은 화면에만 */
#care-nav { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit) * 2); padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4); background: var(--color-bg); }
#care-nav [aria-current="page"] { border-color: var(--color-accent); font-weight: 700; }