/*
  셈 공통 스타일 common-v2 (2026-10-25, T-0030)
  - 이 파일은 배포 후 절대 수정하지 않는다. 바꿀 일이 있으면 v3 폴더를 새로 만든다.
  - 외부 폰트·이미지·@import 없음. 시스템 글꼴만 쓴다.
  - v1과 달라진 점(디자인 T-0008·T-0033 가독성 기준):
    1) 글자: 최소 14px. 힌트·보조 문장 15px, 리드 17px, 입력값 18px/600, 본문 줄간격 1.6.
    2) 색: 바탕을 밝게(#fafbf8), 회색 글자를 두 단계(--ink-2 보조, --ink-3 힌트·단위)로 줄이고 둘 다 7:1 이상.
    3) 선: 의미 있는 경계(입력 밑줄, 선택지·보조 버튼 테두리)는 --rule-ui(3:1 이상).
       --line은 장식 구분선(행 사이, 바닥글 위)에만 쓴다.
  - 대비 실측값은 docs/build-rules.md 5-4에 있다. 토큰 값을 바꾸면 표도 다시 계산한다.
*/

:root {
  color-scheme: light dark;

  --ink: #1d211f;       /* 본문·숫자        바탕 대비 15.68 */
  --ink-2: #3f4642;     /* 보조 글·칸 머리   9.33 */
  --ink-3: #4a514d;     /* 힌트·단위·기준 줄 7.85 */
  --paper: #fafbf8;
  --paper-2: #eef0eb;   /* 옅은 면(필요할 때만). 위 글자 최저 ink-3 7.11 */
  --rule-ui: #5f6661;   /* 입력 밑줄·선택지 테두리(비텍스트) 5.68 */
  --line: #d3d7d0;      /* 장식 구분선 전용 1.40. 의미 있는 경계에 쓰지 않는다 */
  --accent: #1f5a46;    /* 7.75 */
  --accent-ink: #ffffff;/* 버튼 글자, accent 위 8.05 */
  --warn: #8a3b12;      /* 7.45 */
  --focus: #1f5a46;

  --font: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 글자 크기: 14px 미만 토큰은 두지 않는다 */
  --step-min: 0.875rem;   /* 14px 최소: 칸 머리, 기준 줄, 바닥글, 캡션 */
  --step--1: 0.9375rem;   /* 15px 문장형 보조: 힌트, 안내, 오류 */
  --step-0: 1rem;         /* 16px 본문 */
  --step-lead: 1.0625rem; /* 17px 리드 */
  --step-input: 1.125rem; /* 18px 입력값(iOS 확대 방지 16px 이상) */
  --step-1: 1.1875rem;    /* 19px */
  --step-2: 1.5rem;
  --step-3: 2.125rem;

  --lh-body: 1.6;
  --lh-sub: 1.45;

  --gap: 1rem;
  --measure: 40rem;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e8e4;     /* 14.50 */
    --ink-2: #c3c8c3;   /* 10.54 */
    --ink-3: #aab0ab;   /* 8.10 */
    --paper: #151816;
    --paper-2: #1e2220;
    --rule-ui: #8f9590; /* 5.85 */
    --line: #343a36;
    --accent: #7fc4a6;  /* 8.81 */
    --accent-ink: #0f1311;
    --warn: #e39a6f;    /* 7.77 */
    --focus: #7fc4a6;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--step-0)/var(--lh-body) var(--font);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }

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

h1, h2, h3 { line-height: 1.3; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); margin-top: 2em; }
h3 { font-size: var(--step-1); margin-top: 1.5em; }
p, ul, ol { margin: 0 0 1em; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 페이지 골격 ---------- */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.site-bar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--measure); margin: 0 auto; padding: 0.875rem 1.25rem;
  font-size: var(--step-min); color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.site-bar a { text-decoration: none; font-weight: 700; color: var(--ink); }

.page-head { margin: 1.5rem 0 2rem; }
.page-head .lead { font-size: var(--step-lead); line-height: 1.55; color: var(--ink-2); margin: 0; }

/* 귀속 연도·기준일 표시(돈이 걸린 서비스 필수) */
.basis {
  font-size: var(--step-min); line-height: 1.5; color: var(--ink-2);
  margin: 0.75rem 0 0;
  font-variant-numeric: tabular-nums;
}
.basis b { color: var(--ink); font-weight: 700; }

/* ---------- 입력 ---------- */

.field { margin: 0 0 1.25rem; }
.field > label, .field > .label { display: block; font-weight: 700; margin-bottom: 0.375rem; }
.field .hint {
  display: block; font-size: var(--step--1); line-height: var(--lh-sub);
  color: var(--ink-3); margin-top: 0.25rem;
}

.input, select.input {
  width: 100%;
  font: inherit; font-size: var(--step-input); font-weight: 600;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--rule-ui); /* 비텍스트 3:1 이상 */
  border-radius: 0;
  padding: 0.5rem 0.125rem;
  font-variant-numeric: tabular-nums;
}
.input::placeholder { color: var(--ink-3); font-weight: 400; opacity: 1; }
.input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1.5px 0 0 var(--accent); }
.input[aria-invalid="true"] { border-bottom-color: var(--warn); }
.input-unit { display: flex; align-items: baseline; gap: 0.5rem; }
.input-unit .unit { color: var(--ink-3); font-weight: 600; flex: none; }

.choice { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0 0 1.25rem; }
.choice legend { font-weight: 700; margin-bottom: 0.375rem; padding: 0; }
.choice label {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border: 1px solid var(--rule-ui); border-radius: var(--radius);
  cursor: pointer;
}
.choice input { accent-color: var(--accent); margin: 0; }
.choice label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-weight: 700; }

.error { color: var(--warn); font-size: var(--step--1); line-height: var(--lh-sub); margin-top: 0.25rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.5rem;
  font: inherit; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-quiet { color: var(--ink); background: transparent; border: 1px solid var(--rule-ui); }
.btn-block { width: 100%; }

/* ---------- 결과 ---------- */

.result { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.figure {
  display: block;
  font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.figure-label { display: block; color: var(--ink-2); font-size: var(--step-min); font-weight: 700; margin-bottom: 0.25rem; }

.rows { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 1rem 0; }
.rows th, .rows td { padding: 0.625rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rows th { font-weight: 700; }
.rows td.num { text-align: right; white-space: nowrap; font-weight: 700; }
.rows tr:last-child th, .rows tr:last-child td { border-bottom: 0; }

.note { font-size: var(--step--1); line-height: var(--lh-sub); color: var(--ink-2); }
.note-block {
  font-size: var(--step--1); line-height: 1.5; color: var(--ink-2);
  border-left: 2px solid var(--rule-ui); padding-left: 0.875rem; margin: 1.5rem 0;
}

/* ---------- 광고 자리표시자 ----------
   data-ad-state="off"     : 광고 미승인. 공간을 차지하지 않는다(기본).
   data-ad-state="preview" : ?adpreview=1 일 때만. 배치 검토용 점선 상자.
   data-ad-state="on"      : 승인 후. 높이를 미리 잡아 화면 밀림(CLS)을 막는다.
*/
.ad-slot { margin: 2rem 0; }
.ad-slot[data-ad-state="off"] { display: none; }
.ad-slot[data-ad-state="preview"] {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--ad-h, 100px);
  border: 1px dashed var(--rule-ui); color: var(--ink-3);
  font: var(--step-min)/1.4 var(--mono);
}
.ad-slot[data-ad-state="on"] { min-height: var(--ad-h, 100px); }

/* ---------- 바닥글 ---------- */

.site-foot {
  max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-min); line-height: 1.5; color: var(--ink-2);
}
.site-foot p { margin: 0 0 0.5em; }

@media (min-width: 48rem) {
  .page { padding-top: 2.5rem; }
  .page-head .lead { font-size: 1.125rem; }
}

@media print {
  .site-bar, .ad-slot, .btn, .site-foot nav { display: none !important; }
  body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}