/* ============================================================
   theme.css — 아스콘 사이트 보이는 규칙 정본 (base.css 대체 · 2026-08-10)
   전제: 40~70대가 밝은 야외에서 장갑 낀 손으로 스마트폰으로 본다.
   계획 문서 §A-4 그대로:
     본문 18px 이상 · 큰 숫자 40px 이상 · 누르는 곳 56×56px 이상
     줄 간격 1.6 · 흑백 + 강조 1색 · 상태색은 빨강(막힘)·회색(오래됨)만
   금지: 장식 그라데이션 · 이모지 남발 · 카드 안 카드 · 과한 라운드 · 보라색
   ------------------------------------------------------------
   ■ 크기를 rem 으로 적는 이유 (Apple 타이포 원칙 · 2026-08-10 채택)
     사용자가 폰 글자 크기를 키우면 화면도 같이 커져야 한다.
     기본 설정(1rem=16px)에서 §A-4 최소값이 정확히 지켜진다:
       본문 1.125rem=18px · 큰 숫자 2.75rem=44px · 누르는 곳 3.5rem=56px
   ■ 색 결정 근거 (2026-08-10 · dataviz 검증기로 재측정 — 눈대중 아님)
     방향: 아스팔트(회색조) + 도로 차선 1색.
     노랑(중앙선 그대로)은 흰 바탕에서 글자 대비 4.5:1을 못 넘어 탈락.
     강조 1색을 화면 밝기별로 이렇게 정했다:
       밝은 화면 = 진한 차선 주황 #b93a05 — 흰 바탕 5.72:1 · 카드 5.25:1
       어두운 화면 = 밤 아스팔트 위 차선 호박색 #ffb648 — 바탕 10.36:1 · 카드 9.42:1
     차트 짝(강조색↔비교용 회색) 색각이상 분리 ΔE: 밝음 14.1 · 어두움 25.7 (기준 8)
     일반시력 분리 ΔE: 19.9 · 29.3 (기준 15). 마크 대비 전부 3:1 이상 (3.17·3.64).
     비교용 회색은 채도 기준(C≥0.10)을 일부러 어긴다 — 회색은 「덜 중요함」을
     나르는 자리라 정체성 일을 안 한다. 어느 선이 무엇인지는 색이 아니라
     선 끝의 글자 라벨이 말한다 (charts.js 공통 규칙).
     어두운 화면 호박색은 마크 밝기 밴드(L 0.48~0.67)보다 밝다(0.826) —
     강조 1색 체계라 헷갈릴 이웃색이 없고, 노안·야외 대비(10:1)를 우선했다.
     글자 대비 전 조합 실측: 최저 4.80:1 (어두운 화면 보조글자/카드) — 전부 4.5:1 이상.
   ■ 그라데이션 예외 2건 (장식 아님 — 뜻을 나르는 것만):
     1) charts.js 범위 밴드(B등급) 안 opacity 그라데이션 —
        「가운데 값이 더 그럴듯하다」는 뜻을 나르는 부호 (벤치 스펙 1 · 2026-08-10 확정)
     2) 이 파일의 .tabbar-shell::after 오른끝 페이드 —
        「메뉴가 오른쪽에 더 있다」는 뜻을 나르는 힌트 (결함 C-2 수리 · 2026-08-10)
     떠 있는 머리줄 경계는 선·그라데이션 대신 부드러운 그림자로 만든다.
   ============================================================ */

/* ---------- 토큰 ---------- */
:root {
  color-scheme: light dark;

  /* 색 — 아스팔트 회색조 */
  --bg: #ffffff;          /* 바탕 */
  --card: #f6f5f3;        /* 카드 바탕 (한 겹만. 카드 안에 카드 금지) */
  --line: #dcdad6;        /* 경계선 */
  --ink: #1c1b1a;         /* 글자 (아스팔트) — 흰 바탕 17.20:1 */
  --ink-soft: #55524e;    /* 덜 중요한 글자 — 7.77:1 */
  --ink-faint: #6f6b66;   /* 보조 글자·표본수 — 5.29:1 (카드 위 4.85:1) */

  /* 강조 1색 — 도로 차선. 누르는 곳·행동으로 이어지는 값에만 쓴다 */
  --accent: #b93a05;
  --accent-fg: #ffffff;   /* 강조색 위 글자 — 5.72:1 */

  /* 상태색 — 이 둘만 (§A-4) */
  --danger: #b3261e;      /* 빨강 = 막힘 — 6.54:1 */
  --stale: #6f6b66;       /* 회색 = 오래됨 (ink-faint와 같은 값 — 역할 이름만 분리) */

  /* 차트 전용 (charts.js가 읽는다 — SVG 안 고정 hex 금지) */
  --chart-main: var(--accent);    /* 주인공 지표 — 화면당 1개만 */
  --chart-dim: #8a8a88;           /* 비교 대상 — 카드 위 3.17:1 (마크 기준 3:1) */
  --chart-ink: var(--ink);        /* 차트 안 값 글자 */
  --chart-soft: var(--ink-faint); /* 차트 안 보조 글자 */
  --chart-ring: var(--card);      /* 점이 선을 지날 때 두르는 바탕색 테 */

  /* 떠 있는 머리줄 재질 — 반투명 + 흐림 (내용이 밑으로 지나간다) */
  --head-bg: rgba(255, 255, 255, 0.78);
  --head-blur: blur(14px) saturate(1.4);
  --head-edge: 0 10px 18px -16px rgba(28, 27, 26, 0.4);

  /* 글자 크기 — §A-4 최소값(기본 설정 기준 px 병기). 더 줄이지 않는다 */
  --fs-body: 1.125rem;    /* 18px 본문 최소 */
  --fs-h: 1.375rem;       /* 22px 소제목 */
  --fs-title: 1.75rem;    /* 28px 화면 제목 */
  --fs-big: 2.75rem;      /* 44px 큰 숫자(40px 이상). 날짜도 이 크기 (§3-3) */

  /* 글자 짜임 — 크기가 클수록 자간은 좁게, 줄간은 조이게 (Apple 타이포) */
  --track-big: -0.02em;   /* 큰 숫자·날짜 */
  --track-title: -0.015em;/* 화면 제목 */
  --track-h: -0.01em;     /* 소제목 */
  --lh-big: 1.1;
  --lh-title: 1.2;
  --lh-h: 1.35;
  --lh: 1.6;              /* 본문 (§A-4 고정) */

  /* 간격 — 0.25rem 계단. 여백이 위계를 만든다 (선 대신 여백) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;

  /* 치수 */
  --touch: 3.5rem;        /* 56px 누르는 곳 최소 (장갑 낀 손) */
  --r-s: 8px;             /* 작은 모서리 — 배지 */
  --r-m: 12px;            /* 카드·단추·입력 — 이보다 둥글게 하지 않는다 */
  --maxw: 45rem;          /* 720px */

  /* 그림자 — 딱 한 단계, 아주 약하게 (떠 보이는 장식 금지) */
  --shadow: 0 1px 2px rgba(28, 27, 26, 0.06);

  /* 스켈레톤 */
  --skel: #e9e7e3;

  /* 누름 반응 — 릴리즈는 반동 없이 부드럽게 (스프링 damping 1.0 상당) */
  --press-scale: 0.97;
  --press-in: 100ms ease-out;
  --press-out: 350ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* 어두운 화면 — 색 역할은 그대로, 값만 바꾼다 (밤 아스팔트 + 차선 호박색) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --card: #211f1d;
    --line: #3a3733;
    --ink: #f2efec;         /* 15.79:1 */
    --ink-soft: #b5b0aa;    /* 8.40:1 */
    --ink-faint: #8f8a83;   /* 5.28:1 (카드 위 4.80:1) */
    --accent: #ffb648;      /* 밤 차선 — 10.36:1 */
    --accent-fg: #171614;   /* 호박색 위엔 어두운 글자 */
    --danger: #ff7b6e;      /* 7.16:1 */
    --stale: #8f8a83;
    --chart-dim: #7a766f;   /* 카드 위 3.64:1 */
    --head-bg: rgba(23, 22, 20, 0.78);
    --head-edge: 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow: none;         /* 어두운 화면은 경계선이 그림자 몫을 한다 */
    --skel: #2b2926;
  }
}

/* 더 뚜렷하게 설정 — 경계를 진하게, 재질은 불투명하게 */
@media (prefers-contrast: more) {
  :root {
    --line: #55524e;
    --head-bg: var(--bg);
    --head-blur: none;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --line: #b5b0aa; }
}

/* 투명 줄이기 설정 — 흐림 없애고 불투명 바탕 */
@media (prefers-reduced-transparency: reduce) {
  :root { --head-bg: var(--bg); --head-blur: none; }
}

/* ---------- 바탕 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* 시스템 글꼴만 — 내려받는 글꼴 없음 */
  font-family: system-ui, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR",
    "Malgun Gothic", 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(--sp-4); }

/* 위계는 크기 하나로 안 만든다 — 크기+굵기+줄간을 한 벌로 */
h1 {
  font-size: var(--fs-title); font-weight: 800;
  line-height: var(--lh-title); letter-spacing: var(--track-title);
  margin: var(--sp-3) 0 var(--sp-3);
}
h2 {
  font-size: var(--fs-h); font-weight: 700;
  line-height: var(--lh-h); letter-spacing: var(--track-h);
  margin: var(--sp-6) 0 var(--sp-3);
}
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 화면 낭독기용 숨김 글자 */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- 페이지 상단: 떠 있는 머리줄 ----------
   반투명 재질 위에 내용이 밑으로 지나간다. 딱딱한 1px 경계선 대신
   부드러운 그림자 모서리 (--head-edge). 재질 위 글자는 굵게·진하게. */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--head-bg);
  -webkit-backdrop-filter: var(--head-blur);
  backdrop-filter: var(--head-blur);
  box-shadow: var(--head-edge);
}
.site-head .wrap { padding-top: var(--sp-2); padding-bottom: 0; }
.site-name {
  display: inline-flex; align-items: center; min-height: var(--touch);
  font-size: var(--fs-h); font-weight: 800; color: var(--ink);
  text-decoration: none; letter-spacing: var(--track-h);
}
/* 차선 표시 — 이름 앞 강조색 사각형 하나 (이미지·이모지 아님) */
.site-name::before {
  content: ""; width: 0.875rem; height: 1.625rem; margin-right: 0.625rem;
  background: var(--accent); border-radius: 3px;
}
/* 메뉴 여섯 개가 한 줄에 다 안 들어간다 (전부 합쳐 약 780px — 실측 2026-08-10).
   좁은 화면: 한 줄 옆으로 밀기 + 오른끝 페이드·「›」 힌트 (숨은 메뉴 없다고 오해 방지 — C-2)
   넓은 화면(≥46rem): 두 줄로 감아서 여섯 개를 전부 보여준다 — 숨김 자체가 없다. */
.tabbar-shell { position: relative; }
.tabbar-shell::after {
  content: "›";
  position: absolute; top: var(--sp-1); bottom: var(--sp-3); right: 0;
  width: 3rem; display: grid; place-items: center;
  font-size: var(--fs-h); font-weight: 700; color: var(--ink-faint);
  background: linear-gradient(to left, var(--bg) 40%, transparent);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out;
}
.tabbar-shell.has-more::after { opacity: 1; }
.tabbar {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-1) 0 var(--sp-3);
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
@media (min-width: 46rem) {
  .tabbar { flex-wrap: wrap; overflow-x: visible; }
  .tabbar-shell::after { content: none; }
}
.tabbar a {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--bg); color: var(--ink); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--press-out);
}
.tabbar a:active { transform: scale(var(--press-scale)); transition: transform var(--press-in); }
.tabbar a[aria-current="page"] {
  background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 800;
}
/* 지금 화면 표시는 강조색이 아니라 아스팔트색 — 강조색은 행동에만 아낀다 */

/* ---------- 카드 (한 겹만) ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--sp-5) var(--sp-4); margin: 0 0 var(--sp-3);
  box-shadow: var(--shadow);
}
a.card {
  display: block; color: var(--ink); text-decoration: none; min-height: 5.5rem;
  transition: transform var(--press-out);
}
a.card:active {
  border-color: var(--accent);
  transform: scale(var(--press-scale)); transition: transform var(--press-in);
}
.card-title { font-size: var(--fs-h); font-weight: 700; line-height: var(--lh-h); letter-spacing: var(--track-h); margin: 0 0 var(--sp-1); }
.card-sub { color: var(--ink-soft); margin: 0; }

/* ---------- 큰 숫자 부품 (질문 → 숫자 → 날짜 → 표본) ----------
   날짜를 숫자만큼 크게 적는다 (§3-3). 이 위계가 이 사이트의 정체성이다. */
.ins-q { margin: 0 0 var(--sp-2); color: var(--ink-soft); font-weight: 600; }
.ins-value {
  margin: 0; font-size: var(--fs-big); font-weight: 800;
  line-height: var(--lh-big); letter-spacing: var(--track-big);
  color: var(--ink);
}
.ins-value .unit { font-size: var(--fs-h); font-weight: 500; letter-spacing: normal; margin-left: var(--sp-1); color: var(--ink-soft); }
.ins-range { margin: var(--sp-1) 0 0; color: var(--ink-soft); }
.ins-date {
  margin: var(--sp-2) 0 0; font-size: var(--fs-big); font-weight: 800;
  line-height: var(--lh-big); letter-spacing: var(--track-big);
  color: var(--ink);
}
.ins-date .date-suffix { font-size: var(--fs-h); font-weight: 500; letter-spacing: normal; color: var(--ink-soft); margin-left: var(--sp-1); }
.ins-meta { margin: var(--sp-3) 0 0; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ins-note { margin: var(--sp-2) 0 0; color: var(--ink-soft); }
.ins-chart { margin: var(--sp-4) 0 0; }
/* 표본수는 차트 밖, 카드 바닥 고정 (차트 벤치 공통 규칙 5) */
.ins-foot { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--ink-faint); }

/* 오래된 값 — 회색으로 죽인다. 색만 아니라 배지도 같이 붙는다 (색 홀로 뜻 금지) */
.is-stale .ins-value, .is-stale .ins-date, .is-stale .ins-range { color: var(--stale); }
.is-stale .fig { opacity: 0.55; }

/* ---------- 상태 배지 ----------
   숫자 3등급(§3-1) + 오래됨. 이 네 가지 말고는 안 만든다.
   A = 아스팔트 채움(정본의 무게) · B = 테두리(참고) · 막힘 = 빨강 · 오래됨 = 회색 */
.badge {
  display: inline-flex; align-items: center;
  min-height: 2.25rem; padding: 0 var(--sp-3); border-radius: var(--r-s);
  font-size: var(--fs-body); font-weight: 700; line-height: 1;
  border: 2px solid var(--ink); color: var(--ink); background: transparent;
}
.badge-a { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.badge-b { border-color: var(--ink-soft); color: var(--ink-soft); }
.badge-unverified { border-color: var(--danger); color: var(--danger); }
.badge-stale { border-color: var(--stale); color: var(--stale); }

/* ---------- 누르는 것 ----------
   반응은 누르는 순간(:active) 바로 — 떼기를 기다리면 죽은 느낌.
   움직이는 속성은 transform 뿐 (합성기 속성만). */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); min-width: var(--touch); padding: 0 var(--sp-5);
  font-size: var(--fs-body); font-family: inherit; font-weight: 700;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--bg); color: var(--ink); cursor: pointer;
  text-decoration: none;
  transition: transform var(--press-out);
}
.btn:active {
  border-color: var(--accent); color: var(--accent);
  transform: scale(var(--press-scale)); transition: transform var(--press-in);
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-primary:active { color: var(--accent-fg); }
.btn:disabled { color: var(--stale); border-color: var(--line); background: var(--card); cursor: not-allowed; transform: none; }
.btn-block { display: flex; width: 100%; }

/* ---------- 입력 ---------- */
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 var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--bg); color: var(--ink);
}
input::placeholder { color: var(--ink-faint); }
label { display: block; margin: 0 0 var(--sp-2); font-weight: 700; }
.field { margin: 0 0 var(--sp-4); }
.field-row { display: flex; gap: var(--sp-2); }
.field-row input { flex: 1 1 auto; }
.field-row .btn { flex: 0 0 auto; }

/* ---------- 기다릴 때: 스켈레톤 ----------
   반짝임 대신 밝기 숨쉬기(opacity만 — 합성기 속성). 그라데이션 없음. */
.skel {
  border-radius: var(--r-s); background: var(--skel);
  animation: skel-breathe 1.2s ease-in-out infinite;
}
.skel-line { height: 1.25rem; margin: 0 0 var(--sp-3); }
.skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
.skel-big { height: 3.25rem; width: 70%; margin: 0 0 var(--sp-3); }
.skel-chart { height: 6rem; margin: var(--sp-4) 0 0; }
@keyframes skel-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.loading { padding: var(--sp-5) var(--sp-4); color: var(--ink-soft); }

/* 자료가 채워질 때 — 잔잔한 나타남 (opacity만) */
.appear { animation: appear 0.3s ease-out; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 빈 상태 ---------- */
.empty {
  border: 1px dashed var(--line); border-radius: var(--r-m);
  padding: var(--sp-5) var(--sp-4); margin: var(--sp-3) 0; color: var(--ink-soft);
}
.empty .btn { margin-top: var(--sp-2); }

/* ---------- 오류 ---------- */
.error {
  border: 2px solid var(--danger); border-radius: var(--r-m);
  padding: var(--sp-4); margin: var(--sp-3) 0; color: var(--ink);
}
.error-title { color: var(--danger); font-weight: 800; margin: 0 0 var(--sp-2); }
.error .btn { margin-top: var(--sp-2); }

/* ---------- 차트 틀 ---------- */
.fig { display: block; }
.fig svg { display: block; width: 100%; height: auto; }
/* 차트 안 글자는 SVG가 그리지만 색·글꼴은 여기 토큰을 따른다 */
.fig text { font-family: inherit; }

/* ---------- 목록·표 ---------- */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
ul.plain li:last-child { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left; padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; /* 표 안 숫자만 자리맞춤 — 큰 숫자는 안 쓴다 */
}
th { color: var(--ink-faint); font-weight: 700; }
td.num, th.num { text-align: right; }

/* ---------- 소소한 것 ---------- */
.hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
.right { text-align: right; }
.danger-text { color: var(--danger); font-weight: 700; }
.stale-note { color: var(--stale); }
.muted { color: var(--ink-faint); }

/* ---------- 데스크톱 마우스 어포던스 (결함 M-7 수리 · 2026-08-10) ----------
   터치 우선은 그대로 두고, 마우스 있는 기기에서만 「여기 누를 수 있다」를
   살짝 보여준다. 새 색 없음 — 기존 토큰의 경계 진하기·바탕 한 단계만 쓴다. */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
  a.card:hover { border-color: var(--ink-soft); }
  .btn:not(:disabled):hover { border-color: var(--ink-soft); background: var(--card); }
  .btn-primary:not(:disabled):hover {
    border-color: var(--accent); background: var(--accent); filter: brightness(1.06);
  }
  .tabbar a:not([aria-current="page"]):hover { border-color: var(--ink-soft); background: var(--card); }
}

/* ---------- 움직임 ----------
   뜻 있는 움직임만: 누름 반응·숫자 카운트업(JS)·스파크라인 그리기(JS)·
   스켈레톤 숨쉬기·자료 나타남. 범위 밴드·분포 점띠는 움직이지 않는다 —
   흔들림이 「움직이는 것」처럼 보이면 오독. 전부 transform·opacity 뿐.
   움직임 줄이기 설정이면: 미끄러짐·크기 변화 대신 밝기 반응만 남긴다. */
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .appear { animation: none; }
  * { transition: none !important; }
  .btn:active, .tabbar a:active, a.card:active { transform: none; opacity: 0.7; }
}