/* ============================================================
   base.css — 아스콘 새 사이트 보이는 규칙 (한 파일만)
   전제: 40~70대가 밝은 야외에서 장갑 낀 손으로 스마트폰으로 본다.
   계획 문서 §A-4 그대로:
     본문 18px 이상 · 큰 숫자 40px 이상 · 누르는 곳 56×56px 이상
     줄 간격 1.6 · 흑백 + 강조 1색 · 상태색은 빨강(막힘)·회색(오래됨)만
   금지: 그라데이션 · 이모지 남발 · 카드 안 카드 · 과한 라운드 · 보라색
   ============================================================ */

/* ---------- 토큰 ---------- */
:root {
  /* 색 — 흑백 + 강조 1색(파랑). 상태색은 빨강·회색만 */
  --bg: #ffffff;          /* 바탕 */
  --fg: #111111;          /* 글자 */
  --fg-soft: #444444;     /* 덜 중요한 글자 */
  --line: #d9d9d9;        /* 경계선 */
  --card: #f6f6f6;        /* 카드 바탕 (카드 안에 카드 금지) */
  --accent: #0b57d0;      /* 강조 1색 — 누르는 곳, 링크 */
  --accent-fg: #ffffff;   /* 강조색 위의 글자 */
  --danger: #c62828;      /* 빨강 = 막힘 */
  --stale: #757575;       /* 회색 = 오래됨 */

  /* 글자 크기 */
  --fs-body: 18px;        /* 본문 (최소값. 더 줄이지 않는다) */
  --fs-h: 22px;           /* 소제목 */
  --fs-title: 28px;       /* 화면 제목 */
  --fs-big: 44px;         /* 큰 숫자. 날짜도 이 크기로 쓴다 (§3-3) */

  /* 치수 */
  --touch: 56px;          /* 누르는 곳 최소 높이·너비 */
  --lh: 1.6;              /* 줄 간격 */
  --radius: 8px;          /* 모서리 — 이보다 둥글게 하지 않는다 */
  --pad: 16px;
  --maxw: 720px;          /* 본문 최대 폭 (폰 우선) */
}

/* 어두운 화면 — 색 역할은 그대로, 값만 바꾼다 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #f2f2f2;
    --fg-soft: #bdbdbd;
    --line: #3a3a3a;
    --card: #1e1e1e;
    --accent: #6ea8ff;
    --accent-fg: #0a0a0a;
    --danger: #ef6b62;
    --stale: #9e9e9e;
  }
}

/* ---------- 바탕 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh);
  word-break: keep-all;   /* 한국어 낱말 중간에서 안 자른다 */
}
main.wrap, .wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--pad); }

h1 { font-size: var(--fs-title); line-height: 1.35; margin: 0 0 12px; }
h2 { font-size: var(--fs-h); line-height: 1.4; margin: 28px 0 10px; }
p { margin: 0 0 12px; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- 페이지 상단 ---------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-head .wrap { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.site-name {
  font-size: var(--fs-h); font-weight: 700; color: var(--fg);
  text-decoration: none; min-height: var(--touch); display: inline-flex; align-items: center;
}
.site-nav { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.site-nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.site-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 700; }

/* ---------- 카드 (한 겹만. 카드 안에 카드 금지) ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--pad); margin: 0 0 12px;
}
a.card { display: block; color: var(--fg); text-decoration: none; min-height: 88px; }
a.card:active { border-color: var(--accent); }
.card .card-title { font-size: var(--fs-h); font-weight: 700; margin: 0 0 4px; }
.card .card-sub { color: var(--fg-soft); margin: 0; }

/* ---------- 숫자 + 날짜 (날짜를 숫자만큼 크게 — §3-3) ---------- */
.num-card { text-align: left; }
.num-label { margin: 0 0 4px; color: var(--fg-soft); }
.num-value { font-size: var(--fs-big); font-weight: 700; line-height: 1.25; margin: 0; font-variant-numeric: tabular-nums; }
.num-value .unit { font-size: var(--fs-h); font-weight: 400; margin-left: 4px; }
.num-date { font-size: var(--fs-big); font-weight: 700; line-height: 1.25; margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; }
.num-meta { margin: 6px 0 0; color: var(--fg-soft); }

/* ---------- 상태 배지 ---------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--radius);
  font-size: var(--fs-body); font-weight: 700;
  border: 2px solid var(--fg); color: var(--fg); background: transparent;
}
.badge-a { border-color: var(--fg); color: var(--fg); }                 /* A 정본 */
.badge-b { border-color: var(--fg-soft); color: var(--fg-soft); }       /* B 참고 */
.badge-unverified { border-color: var(--danger); color: var(--danger); }/* 확인 안 된 값 */
.badge-stale { border-color: var(--stale); color: var(--stale); }       /* 오래됨 */

/* ---------- 빈 상태 · 오류 · 기다림 ---------- */
.empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 24px var(--pad); margin: 12px 0; color: var(--fg-soft);
}
.error {
  border: 2px solid var(--danger); border-radius: var(--radius);
  padding: var(--pad); margin: 12px 0; color: var(--fg);
}
.error .error-title { color: var(--danger); font-weight: 700; margin: 0 0 8px; }
.loading { padding: 24px var(--pad); color: var(--fg-soft); }
.stale-note { color: var(--stale); }

/* ---------- 누르는 것 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); min-width: var(--touch); padding: 0 22px;
  font-size: var(--fs-body); font-weight: 700;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn:disabled { color: var(--stale); border-color: var(--line); cursor: not-allowed; }

/* ---------- 입력 ---------- */
input[type="text"], input[type="search"], input[type="number"], select {
  width: 100%; min-height: var(--touch);
  font-size: var(--fs-body); font-family: inherit;
  padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
}
label { display: block; margin: 0 0 6px; font-weight: 700; }
.field { margin: 0 0 16px; }
.field-row { display: flex; gap: 8px; }
.field-row input { flex: 1 1 auto; }
.field-row .btn { flex: 0 0 auto; }

/* ---------- 목록·표 ---------- */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { border-bottom: 1px solid var(--line); padding: 12px 0; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th { color: var(--fg-soft); font-weight: 700; }

/* ---------- 소소한 것 ---------- */
.hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.right { text-align: right; }
.danger-text { color: var(--danger); font-weight: 700; }