/* 디자인 토큰: 색·간격·글자·모서리·그림자는 여기 한곳에서만 정한다. 아래 규칙은 var(--...)만 쓴다. */
:root {
  /* 색 */
  --bg: #ffffff; --fg: #1b1f24; --muted: #596070; --line: #dde2ea; --accent: #1d4ed8; --card: #ffffff;
  --surface: #f3f5f8; --border: #7d8797; --accent-fg: #ffffff; --error: #b42318; --error-bg: #fef3f2; --success: #067647;
  /* 글꼴 */
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", sans-serif;
  /* 글자 크기 */
  --fs-xs: 13px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.2rem; --fs-stat: 1.125rem; --fs-h1: 1.5rem; --fs-result: 2.25rem;
  /* 줄 높이 */
  --lh-body: 1.7; --lh-tight: 1.25;
  /* 간격 */
  --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 20px; --sp-5: 24px; --sp-6: 48px;
  --sp-tight: 6px; --sp-pad-input: 10px; --sp-pad-btn: 14px; --sp-pad-top: 14px; --sp-gap-row: 10px;
  --sp-xs: 4px; --sp-l: 32px; --gutter: var(--sp-3);
  /* 모서리 */
  --radius-card: 8px; --radius-ctl: 8px;
  /* 그림자 (지금은 없음. 시안 단계에서 값만 바꾼다) */
  --shadow-card: none;
  /* 폭·높이 */
  --w-main: 45rem; --w-card-min: 15rem; --w-stat-min: 7rem; --w-input-max: 11rem; --h-textarea: 12rem; --control-h: 48px;
}
@media (min-width: 720px) { :root { --fs-result: 3rem; --gutter: var(--sp-5); } }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151a; --fg: #e8eaed; --muted: #a3acb9; --line: #2d343d; --accent: #8ab4ff; --card: #181d24;
    --surface: #1f252d; --border: #8591a3; --accent-fg: #0b1220; --error: #ff9a90; --error-bg: #3b1714; --success: #5fd08f;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fs-base)/var(--lh-body) var(--font); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 키보드 포커스: 입력·버튼·링크·요약 모두 같은 3px 표시. outline 을 없애는 규칙은 두지 않는다. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 공통 틀: 머리 · 본문 · 꼬리 */
.top { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; padding: var(--sp-pad-top) var(--gutter); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--accent); text-decoration: none; }
.tag { color: var(--muted); font-size: var(--fs-sm); }
main { max-width: var(--w-main); margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-6); }
.foot { text-align: center; padding: var(--sp-5); font-size: var(--fs-sm); }
.lead, .crumb, .foot { color: var(--muted); }
.crumb a { color: inherit; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); margin: .4em 0 .2em; }
h2 { font-size: var(--fs-xl); margin-top: 2em; }
main p a { color: var(--accent); }

/* 공통 카드: 도구 목록 카드와 입력 카드가 같은 틀을 쓴다 */
.cards a, .tool { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-card); }
.tool { padding: var(--gutter); }
.cards { list-style: none; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--w-card-min)), 1fr)); }
.cards a { display: block; color: inherit; text-decoration: none; }
.cards a:hover { border-color: var(--accent); }
.cards strong { display: block; }
.cards span { color: var(--muted); font-size: var(--fs-sm); }

/* 도구 배치: 720px 미만 한 열(입력 → 결과), 이상은 왼쪽 입력 · 오른쪽 결과 */
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
@media (min-width: 720px) { .tool-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); } }
.tool-in, .tool-out { min-width: 0; }
.tool h3 { font-size: var(--fs-md); margin: 1.2em 0 .2em; }

/* 입력: 라벨은 칸 위, 칸 높이 48px, 글자 16px */
.tool label, .tool .field-label { display: block; margin-bottom: var(--sp-tight); font-size: var(--fs-lg); font-weight: 600; }
.tool .field-label { color: var(--fg); }
.tool .field { margin: var(--sp-2) 0; }
.tool textarea, .tool input[type="date"], .tool input[type="number"], .tool input[type="text"], .tool select {
  display: block; width: 100%; max-width: none; min-height: var(--control-h); padding: var(--sp-tight) var(--sp-2);
  font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-ctl);
}
.tool textarea { min-height: var(--h-textarea); padding: var(--sp-pad-input) var(--sp-2); resize: vertical; }
.tool [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.tool .row { display: flex; gap: var(--sp-gap-row); align-items: flex-end; flex-wrap: wrap; margin: var(--sp-1) 0; }
.tool .row label { flex: 1 1 var(--w-card-min); }
.tool .swap { display: block; text-align: center; color: var(--muted); }

/* 오류: 입력칸 바로 아래, ⚠ 와 함께(색만으로 알리지 않는다) */
.field-error { margin: var(--sp-tight) 0 0; padding: var(--sp-xs) var(--sp-1); font-size: var(--fs-sm); color: var(--error); background: var(--error-bg); border-radius: var(--radius-ctl); }
.field-error:empty { display: none; }

/* 버튼: 높이 48px. 기본은 보조(테두리), 주 버튼은 .btn-primary 하나에만 */
.tool button {
  min-height: var(--control-h); padding: 0 var(--sp-pad-btn); font: inherit; font-weight: 600; color: var(--fg);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-ctl); cursor: pointer;
}
.tool button:hover { border-color: var(--fg); }
.tool button.btn-primary { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.tool button.btn-primary:hover { filter: brightness(.92); }
.tool button:disabled { color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.tool .actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: var(--sp-2) 0; }
.tool .actions button { flex: 1 1 8rem; }

/* 결과 카드: 맨 위 제목, 큰 값, 보조 값, 복사 */
.result-card { display: grid; gap: var(--sp-2); min-width: 0; padding: var(--gutter); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.card-title { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.card-body { min-width: 0; min-height: 3.2em; overflow-wrap: anywhere; }
.empty { margin: 0; color: var(--muted); }
.big { margin: 0; font-size: var(--fs-result); line-height: var(--lh-tight); font-weight: 700; font-variant-numeric: tabular-nums; }
.big .unit { margin-left: var(--sp-tight); font-size: var(--fs-base); font-weight: 400; color: var(--muted); }
.result { margin: .4em 0 0; font-size: var(--fs-lg); font-weight: 600; }
.copy-row { display: flex; flex-direction: column; gap: var(--sp-1); }
.copy-row .copy-btn { width: 100%; }
.tool .copy-btn.done { color: var(--success); border-color: var(--success); }
.copy-status { font-size: var(--fs-sm); color: var(--muted); }
.copy-status.err { color: var(--error); }
@media (min-width: 720px) {
  .result-card { grid-template-columns: 1fr auto; grid-template-areas: "title copy" "body body"; align-items: center; }
  .card-title { grid-area: title; }
  .card-body { grid-area: body; }
  .copy-row { grid-area: copy; align-items: flex-end; }
  .copy-row .copy-btn { width: auto; }
  .copy-status.err { max-width: 14rem; text-align: right; }
}

/* 글자수 세기: 첫 칸(공백 포함)이 가장 크고, 나머지는 두 칸 격자 */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.stats li { min-width: 0; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--card); overflow-wrap: anywhere; }
.stats li:first-child { grid-column: 1 / -1; padding: 0 0 var(--sp-1); border: 0; background: transparent; }
.stats b { display: block; font-size: var(--fs-stat); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.stats li:first-child b { font-size: var(--fs-result); font-weight: 700; }
.stats span { color: var(--muted); font-size: var(--fs-sm); }

/* 자주 묻는 질문 */
details { border-bottom: 1px solid var(--line); padding: var(--sp-1) 0; }
summary { cursor: pointer; font-weight: 600; padding: var(--sp-1) 0; }