/*
Theme Name: Find Blue Sky Renewal
Theme URI: https://findbluesky.com
Description: 파인드블루스카이 — 미세먼지·대기질·날씨 데이터 서비스 전용 커스텀 클래식 테마. 기성 테마·페이지빌더 미사용.
Author: 파인드블루스카이
Version: 3.0.0
Requires PHP: 8.3
Text Domain: findbluesky
*/

/* ============================================================
   디자인 토큰 — 색상 hex 는 이 :root 블록에만 존재한다 (하드코딩 0건 원칙).
   등급 색상: 에어코리아 공식 4등급 색 체계(좋음 파랑 / 보통 초록 / 나쁨 노랑 / 매우나쁨 빨강)
   출처: 한국환경공단 에어코리아 통합대기환경지수 등급 표기 색 체계 (airkorea.or.kr)
   ============================================================ */
:root {
  /* 브랜드·중립 */
  --c-brand: #1a73c9;
  --c-brand-deep: #10508c;
  --c-sky-soft: #eaf4fd;
  --c-bg: #f6f8fa;
  --c-surface: #ffffff;
  --c-text: #1b2733;
  --c-text-sub: #5b6b7b;
  --c-border: #dde4ea;
  --c-border-strong: #b9c4cf;
  --c-focus: #10508c;

  /* 등급 4색 (에어코리아 공식 색 체계) — 지도·그래프·표 셀 배경 등 대면적 표출용 원색.
     출처: 한국환경공단 에어코리아 통합대기환경지수 등급 색(좋음 파랑/보통 초록/나쁨 노랑/매우나쁨 빨강) */
  --c-g1: #32a1ff;      /* 좋음 */
  --c-g2: #00c73c;      /* 보통 */
  --c-g3: #fda60e;      /* 나쁨 */
  --c-g4: #ff5959;      /* 매우나쁨 */
  /* 등급 배지 배경 — 흰/진갈 글씨로 WCAG AA(4.5:1) 확보를 위해 위 원색과 동일 색상(hue)을
     유지하되 명도만 낮춘 값. 등급 정체성(파랑·초록·노랑·빨강)은 그대로 읽힌다. */
  --c-g1-badge: #1668b3;   /* 좋음 배지 (파랑 계열, 흰 글씨 AA) */
  --c-g2-badge: #0a7d33;   /* 보통 배지 (초록 계열, 흰 글씨 AA) */
  --c-g3-badge: #fda60e;   /* 나쁨 배지 (노랑 원색 유지 + 진갈 글씨 AA) */
  --c-g4-badge: #d32020;   /* 매우나쁨 배지 (빨강 계열, 흰 글씨 AA) */
  --c-g1-fg: #ffffff;
  --c-g2-fg: #ffffff;
  --c-g3-fg: #3d2b00;   /* 노랑 배경 대비 확보용 진갈색 */
  --c-g4-fg: #ffffff;
  --c-gx: #5f6b76;      /* 결측·점검 중 (흰 글씨 AA) */
  --c-gx-fg: #ffffff;

  /* 특보 배너 */
  --c-alert-bg: #fff3e6;
  --c-alert-border: #f0b268;
  --c-alert-text: #7a4a00;

  /* 타이포·간격·형태 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-num: 2.25rem;   /* 수치 카드 큰 숫자 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(27, 39, 51, 0.08);
  --tap: 44px;         /* 최소 터치 타깃 */
  --maxw: 1080px;
}

/* ============================================================
   리셋·베이스
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  word-break: keep-all;
}
img { max-width: 100%; height: auto; }
a { color: var(--c-brand); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-surface); padding: var(--sp-2) var(--sp-4);
}
.skip-link:focus { left: 0; }

/* ============================================================
   헤더·내비게이션 (모바일 퍼스트, 체크박스 토글 — JS 무의존)
   ============================================================ */
.site-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: relative;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; gap: var(--sp-3);
}
.brand {
  font-size: var(--fs-lg); font-weight: 700; color: var(--c-brand-deep);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap);
}
.brand:hover { text-decoration: none; }
.brand__mark { color: var(--c-brand); }

.nav-toggle-input { position: absolute; opacity: 0; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); cursor: pointer;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
}
.nav-toggle-input:focus-visible + .nav-toggle { outline: 3px solid var(--c-focus); }
.site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow);
}
.nav-toggle-input:checked ~ .site-nav { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4); }
.site-nav a, .site-nav .nav-soon {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--sp-2); color: var(--c-text); font-weight: 500;
}
.site-nav a[aria-current="page"] { color: var(--c-brand-deep); font-weight: 700; }
.nav-soon { color: var(--c-text-sub); cursor: default; }
.nav-soon .tag-soon {
  margin-left: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-sub);
  border: 1px solid var(--c-border); border-radius: 999px; padding: 0 var(--sp-2);
}

@media (min-width: 880px) {
  .nav-toggle, .nav-toggle-input { display: none; }
  .site-nav {
    display: block; position: static; border: 0; box-shadow: none; background: none;
  }
  /* 메뉴 폭 예약 — 글리프 폭이 늦게 확정되며 .site-nav 폭이 198.3→519.5 로 변해
     NAV 가 시프트 소스로 잡혔다(1280px 실측 1/6회 0.00593).
     안정 상태 519.55px 기준으로 하한을 잡고, 우측 기준선을 고정해
     항목이 자리를 잡는 동안 이미 그려진 항목의 x 가 바뀌지 않게 한다.
     ※ 880px 미만은 토글 드로어라 이 블록 밖이므로 영향 없다. */
  .site-nav { min-width: 528px; }        /* 519.55 + 여유 ≈8px */
  /* 높이도 함께 예약한다 — 폭만 잡아 두면 링크 줄높이가 늦게 확정되며
     NAV 높이가 26→44px 로 변해 그대로 시프트가 된다(CPU 4x 스로틀 실측 0.00606).
     44px 는 터치 타깃 최소치이자 안정 상태 높이다. */
  .site-nav > ul { min-height: 44px; align-items: center; }
  .site-nav a, .site-nav .nav-soon, .nav-item > summary {
    display: flex; align-items: center; min-height: 44px;
  }
  .site-nav ul { display: flex; gap: var(--sp-2); padding: 0; }
  /* 최상위 목록에만 적용한다 — .site-nav ul 로 걸면 메가패널 안 .mega__list 까지
     528px 가 먹어 가로 넘침(1442px)이 난다. */
  /* 항목 자리를 왼쪽 기준으로 고정한다. flex-end 는 우측 기준선을 잡아 주지만,
     항목이 하나씩 확정되는 동안 **이미 그려진 항목이 왼쪽으로 밀린다**
     (실측: LI x=997→679, 2/6회 0.003). 폭이 min-width 로 이미 예약돼 있으므로
     시작 기준으로 두면 먼저 확정된 항목의 x 가 끝까지 그대로다. */
  .site-nav > ul { min-width: 528px; justify-content: flex-start; }
  .site-nav a, .site-nav .nav-soon { padding: 0 var(--sp-3); }
}

/* ============================================================
   히어로 — "우리동네 지금 공기질"
   ============================================================ */
.hero {
  background: linear-gradient(180deg, var(--c-sky-soft), var(--c-bg));
  padding: var(--sp-6) 0 var(--sp-5);
}
.hero h1 { margin-bottom: var(--sp-2); }
.hero__lead { color: var(--c-text-sub); margin-bottom: var(--sp-5); }
.hero__hint { font-size: var(--fs-sm); color: var(--c-text-sub); margin: var(--sp-3) 0 0; }

/* 히어로 이미지 — 텍스트·조회폼 아래 별도 블록(글자를 그림 위에 얹지 않는다).
   aspect-ratio로 자리를 먼저 잡아 도착 전후 레이아웃이 움직이지 않는다(CLS 0). */
.hero__media {
  position: relative; margin: 0 0 var(--sp-5);
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--c-surface-3);
  border: 1px solid var(--c-border);
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 그라데이션 스크림 — 밝은 히어로 배경과 어두운 그림의 경계 대비를 CSS로 보장한다.
   (그림 자체의 여백에 기대지 않는다.) */
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.28) 100%);
}

/* 지역 선택 폼 — 실제 URL 이동형 (크롤러블 보조 링크는 noscript·허브 링크로 제공) */
.locator {
  display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5);
  grid-template-columns: 1fr;
}
.locator select, .locator button {
  min-height: var(--tap);
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
  padding: 0 var(--sp-3); font-size: var(--fs-base); background: var(--c-surface);
  color: var(--c-text);
}
.locator button {
  background: var(--c-brand); color: var(--c-surface); border-color: var(--c-brand);
  font-weight: 700; cursor: pointer;
}
.locator button:hover { background: var(--c-brand-deep); }
@media (min-width: 640px) {
  .locator { grid-template-columns: 1fr 1fr 1fr auto; }
  .locator button { padding: 0 var(--sp-6); }
}

/* ============================================================
   수치 카드·등급 배지 (공용 컴포넌트)
   높이 사전 예약: min-height 로 데이터 유무와 무관하게 CLS 0
   ============================================================ */
.card-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.value-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--sp-4); min-height: 148px;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.value-card__label { font-size: var(--fs-sm); color: var(--c-text-sub); font-weight: 600; }
.value-card__value {
  font-size: var(--fs-num); font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.value-card__unit { font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-sub); }
.value-card__value--missing { color: var(--c-text-sub); font-size: var(--fs-xl); }
.value-card__last { font-size: var(--fs-xs); color: var(--c-text-sub); margin-top: auto; }

.badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 28px; padding: 0 var(--sp-3);
  border-radius: 999px; font-size: var(--fs-sm); font-weight: 700;
}
.badge--g1 { background: var(--c-g1-badge); color: var(--c-g1-fg); }
.badge--g2 { background: var(--c-g2-badge); color: var(--c-g2-fg); }
.badge--g3 { background: var(--c-g3-badge); color: var(--c-g3-fg); }
.badge--g4 { background: var(--c-g4-badge); color: var(--c-g4-fg); }
.badge--missing { background: var(--c-gx); color: var(--c-gx-fg); }

/* 출처·측정시각 표기줄 (절대 금지 3 — 전 데이터 페이지 필수) */
.source-line {
  font-size: var(--fs-xs); color: var(--c-text-sub);
  margin-top: var(--sp-3);
}
.forecast-notice {
  font-size: var(--fs-sm); color: var(--c-text-sub);
  border-left: 3px solid var(--c-border-strong);
  padding-left: var(--sp-3); margin: var(--sp-3) 0;
}

/* 특보 배너 */
.alert-banner {
  background: var(--c-alert-bg); border: 1px solid var(--c-alert-border);
  color: var(--c-alert-text); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0;
  font-weight: 600; min-height: 52px;
  display: flex; align-items: center; gap: var(--sp-2);
}
.alert-banner__icon { flex: none; }

/* ============================================================
   섹션·표·본문
   ============================================================ */
.section { padding: var(--sp-6) 0; }
.section--alt { background: var(--c-surface); border-block: 1px solid var(--c-border); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.section__more { font-size: var(--fs-sm); white-space: nowrap; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table th, .data-table td {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm);
  white-space: nowrap;
}
.data-table th { color: var(--c-text-sub); font-weight: 600; background: var(--c-bg); }
.data-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.data-table .muted, .muted { color: var(--c-text-sub); font-size: var(--fs-sm); }

/* 브레드크럼 */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--c-text-sub); margin-bottom: var(--sp-3);
}
.breadcrumb a { color: var(--c-text-sub); min-height: auto; }
.breadcrumb a:hover { color: var(--c-brand); }

/* 전일 대비 증감 (증가=악화 빨강, 감소=개선 파랑) */
.delta-up { color: var(--c-g4-badge); font-weight: 700; }
.delta-down { color: var(--c-g1-badge); font-weight: 700; }

/* 예보 발표문 인용 */
.forecast-quote {
  margin: var(--sp-3) 0; padding: var(--sp-4);
  background: var(--c-bg); border-left: 3px solid var(--c-brand);
  border-radius: var(--radius-sm); color: var(--c-text);
  white-space: normal; line-height: 1.7;
}

.entry { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-5); }
.entry__meta { color: var(--c-text-sub); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.entry-content h2 { margin-top: var(--sp-6); }
.entry-content table { margin: var(--sp-4) 0; }

/* 링크 카드 목록 (지역 허브 등) */
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.link-list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap); padding: 0 var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); color: var(--c-text);
}
.link-list a:hover { border-color: var(--c-brand); text-decoration: none; }
@media (min-width: 640px) { .link-list { grid-template-columns: 1fr 1fr; } }

/* 콘텐츠 리스트 카드 (매거진·리포트·브리핑) — 중립 크롬색, 헤어라인, 등급색 미사용 */
.post-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .post-cards { grid-template-columns: 1fr 1fr; } }
.post-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.post-card > a { display: block; padding: var(--sp-4); color: var(--c-text); }
.post-card > a:hover { text-decoration: none; }
.post-card > a:hover .post-card__title { color: var(--c-brand-deep); }
.post-card__title { font-size: var(--fs-lg); font-weight: 500; margin: 0 0 var(--sp-1); }
.post-card__date { font-size: var(--fs-xs); color: var(--c-text-sub); }
.post-card__excerpt { font-size: var(--fs-sm); color: var(--c-text-sub); margin: var(--sp-2) 0 0; }
/* 대표 이미지 — 리스트 카드(300×200) */
.post-card__thumb { display: block; margin: 0 0 var(--sp-3); border-radius: var(--radius-sm); overflow: hidden; }
.post-card__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* 대표 이미지 — 단일글 상단 */
.entry__thumb { max-width: 600px; margin: 0 auto var(--sp-5); }
.entry__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.brand__mark { display: inline-flex; }
.brand__mark svg { display: block; }

/* 광고 슬롯 예약 (런칭 게이트 전: 빈 예약 영역, 코드 삽입 금지 — 절대 금지 8)
   높이 사전 예약으로 CLS 0. 수치 카드·등급 배지와 인접 배치 금지. */
.ad-slot-reserved { min-height: 0; }

/* ============================================================
   푸터
   ============================================================ */
.site-footer {
  margin-top: var(--sp-7);
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  padding: var(--sp-6) 0; color: var(--c-text-sub); font-size: var(--fs-sm);
}
.site-footer nav ul {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
}
.site-footer nav a { color: var(--c-text-sub); display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-source { border-top: 1px solid var(--c-border); padding-top: var(--sp-4); }

/* ============================================================
   404
   ============================================================ */
.error-404 { text-align: center; padding: var(--sp-7) 0; }
.error-404 .code { font-size: 4rem; font-weight: 800; color: var(--c-border-strong); line-height: 1; }

/* ============================================================
   홈 전면 재설계 (DESIGN-FINAL A부 / DESIGN.md B부) — 2026-08-04
   기존 토큰은 이름·값 그대로 재사용하고 역할만 매핑한다(§1-5).
   신규 하드코딩 hex 0건 — 보조 팔레트는 전부 color-mix() 파생(A-7).
   ============================================================ */

:root {
  /* 보조 팔레트 — 기존 토큰 파생(하드코딩 금지) */
  --c-surface-2: color-mix(in srgb, var(--c-brand) 4%, #fff);
  --c-surface-3: color-mix(in srgb, var(--c-brand) 8%, #fff);
  --c-brand-soft: color-mix(in srgb, var(--c-brand) 12%, #fff);
  /* eyebrow: 72% 혼합은 밝은 섹션 배경(#f6f8fa)에서 대비 3.87 로 AA(4.5) 미달이었다.
     혼합 비율만 올려 같은 색상(hue)을 유지한 채 대비를 확보한다(실측 5.5). */
  --c-eyebrow: color-mix(in srgb, var(--c-brand-deep) 88%, #fff);
  --c-util-bg: var(--c-brand-deep);
  --c-util-fg: color-mix(in srgb, #fff 88%, var(--c-brand));
  --c-footer-bg: color-mix(in srgb, var(--c-brand-deep) 92%, #000);
  --c-footer-fg: color-mix(in srgb, #fff 86%, var(--c-brand));
  --c-footer-head: #fff;
  --c-footer-border: color-mix(in srgb, #fff 18%, transparent);
  /* 홈 전용 타이포(A-7) */
  --fs-h1-home: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --fs-section: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --mobile-bar-h: 56px;
}

/* 100vw 는 스크롤바 폭을 포함하므로 그 자체로 가로 스크롤을 만들 수 있다.
   메가 패널이 뷰포트 폭을 쓰는 구조라 body 에서 가로 넘침을 차단한다.
   (세로 스크롤·sticky 에는 영향이 없다 — overflow-x 만 지정) */
body { overflow-x: clip; }

/* 그리드 항목 폭 붕괴 방지 — 이 서버 전체에 깔린 패턴(§1-B H).
   min-width:auto 기본값이 콘텐츠 최소폭을 강제해 문서 폭을 부풀린다. */
.card-grid > *,
.cat-grid > *,
.step-grid > *,
.why-grid > *,
.mag-grid > *,
.official-grid > *,
.region-grid > * { min-width: 0; }

/* ============================================================
   A-2. 유틸리티 바 — 좌: 데이터 출처·갱신, 우: 핵심 도구
   ============================================================ */
.util-bar {
  background: var(--c-util-bg);
  color: var(--c-util-fg);
  font-size: var(--fs-xs);
  min-height: 34px;
  display: flex;
  align-items: center;
}
.util-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: 34px; flex-wrap: nowrap;
}
/* 좁은 화면에서 유틸리티 바가 문서 폭을 밀어내지 않게 한다.
   (실측: 375px 에서 460px 로 부풀어 가로 스크롤이 발생했다 — min-width:auto 기본값 때문) */
.util-bar__note {
  margin: 0; min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.util-bar__links { display: flex; gap: var(--sp-3); flex: 0 0 auto; min-width: 0; }
.util-bar__links a { overflow: hidden; text-overflow: ellipsis; }
/* 아주 좁은 화면에서는 보조 링크를 숨기고 안내 문구만 남긴다.
   (좌우 요소가 모두 축소 불가일 때 문서 폭이 밀리는 것을 원천 차단) */
@media (max-width: 560px) {
  .util-bar__links a + a { display: none; }
}
@media (max-width: 400px) {
  .util-bar__links { display: none; }
}
.util-bar a { color: #fff; text-decoration: none; white-space: nowrap; }
.util-bar a:hover, .util-bar a:focus { text-decoration: underline; }

/* ============================================================
   A-3. 메가 드롭다운 — CSS only (hover/focus-within + 모바일 details)
   높이를 CSS 로 고정해 CLS 0 을 지킨다.
   ============================================================ */
.site-header__inner { flex-wrap: wrap; }
.brand__tagline {
  display: none; font-size: var(--fs-xs); color: var(--c-text-sub);
  font-weight: 500; margin-left: var(--sp-2);
}
@media (min-width: 880px) { .brand__tagline { display: inline; } }

/* 모바일: details 아코디언 */
.nav-item > summary,
.nav-item__link {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-2);
  color: var(--c-text); font-weight: 600; cursor: pointer;
  list-style: none;
}
.nav-item > summary::-webkit-details-marker { display: none; }
.nav-item > summary::after {
  content: ""; margin-left: auto;
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .55;
}
.nav-item[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.mega { padding: 0 0 var(--sp-3); }
.mega__col { margin: 0 0 var(--sp-3); }
.mega__title {
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-eyebrow);
  letter-spacing: .04em; margin: 0 0 var(--sp-1); padding: 0 var(--sp-2);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list a {
  display: block; padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm); color: var(--c-text); min-height: 32px;
}
.mega__list a:hover { background: var(--c-surface-2); text-decoration: none; }
.mega__pills { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0 var(--sp-2); }
.mega__pills a {
  font-size: var(--fs-xs); padding: 4px var(--sp-2);
  border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text);
  background: var(--c-surface);
}
.mega__pills a:hover { border-color: var(--c-brand); color: var(--c-brand-deep); text-decoration: none; }
.mega__more { font-size: var(--fs-xs); font-weight: 700; color: var(--c-brand); padding: 0 var(--sp-2); }

/* 데스크탑: hover/focus 메가 패널.
   패널은 컨테이너 폭 안에 가두고 좌우로 넘치지 않게 한다(§1-B K 실측: 화면 밖 174·275px 넘침). */
@media (min-width: 880px) {
  .site-nav ul { align-items: stretch; }
  /* 위치 기준을 .site-header 로 통일한다 — 중간에 positioned 조상이 생기면
     패널이 그 요소 폭에 갇혀 화면 밖으로 밀려난다. */
  .site-nav, .site-nav ul, .nav-li, .nav-item { position: static; }
  .nav-item > summary::after { display: none; }
  .nav-item > summary, .nav-item__link { padding: 0 var(--sp-3); }
  /* 닫힌 <details> 의 슬롯은 브라우저가 content-visibility:hidden 으로 감추는데,
     그 순간 details 가 **컨테이닝 블록**이 되어 left/right:0 이 details 폭(234px)에 갇힌다.
     그 결과 마지막 메뉴 패널이 화면 밖으로 273px 넘쳤다(실측, §1-B K).
     데스크탑은 open 상태가 아니라 hover/focus 로 제어하므로 슬롯을 항상 레이아웃에 올린다. */
  .site-nav .nav-item::details-content {
    content-visibility: visible;
    display: block;
    overflow: visible;
  }
  /* 메가 패널 폭은 **뷰포트 기준으로 직접 고정**한다.
     닫힌 <details> 의 슬롯은 브라우저가 감추면서 details 를 컨테이닝 블록으로 만들기 때문에
     left/right:0 은 details 폭(234px)에 갇힌다 — 그 결과 마지막 메뉴 패널이 화면 밖으로
     273px 넘쳤다(실측, §1-B K). 100vw + translateX 는 컨테이닝 블록이 무엇이든 화면에 맞는다. */
  .site-nav .nav-item .mega {
    position: absolute; top: 100%;
    left: 50%; right: auto;
    width: 100vw; max-width: 100vw;
    transform: translateX(-50%);
    box-sizing: border-box;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border); border-top: 0;
    box-shadow: var(--shadow);
    padding: var(--sp-4) max((100vw - var(--maxw)) / 2 + var(--sp-4), var(--sp-4));
    z-index: 60;
    visibility: hidden; opacity: 0;
  }
  /* details 는 데스크탑에서 open 상태와 무관하게 hover/focus 로만 제어한다.
     (모바일에서 펼친 채 리사이즈해도 패널이 붙박이로 남지 않는다) */
  .nav-item[open] > .mega { visibility: hidden; opacity: 0; }
  .nav-item:hover > .mega,
  .nav-item:focus-within > .mega { visibility: visible; opacity: 1; }
  .mega__col { margin: 0; }
  .mega--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 모바일 인기 키워드 스트립(A-3) — 가로 스크롤은 이 요소에만 한정 */
.key-strip {
  display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.key-strip::-webkit-scrollbar { display: none; }
.key-strip a {
  flex: none; font-size: var(--fs-sm); padding: 6px var(--sp-3);
  border: 1px solid var(--c-border); border-radius: 999px;
  color: var(--c-text); background: var(--c-surface);
}
@media (min-width: 880px) { .key-strip { display: none; } }

/* ============================================================
   A-7. 섹션 리듬 — eyebrow + 배경 교대
   ============================================================ */
.eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-eyebrow); margin: 0 0 var(--sp-1);
}
.section__title { font-size: var(--fs-section); font-weight: 700; margin: 0 0 var(--sp-2); }
.section__lead { color: var(--c-text-sub); margin: 0 0 var(--sp-4); max-width: 62ch; }
/* 기존 .section__head 는 flex + space-between(제목 좌 / 더보기 우) 구조였다.
   재설계 헤드는 eyebrow → 제목 → 리드가 **세로로 쌓이는** 블록이므로 flex 를 해제한다.
   (해제하지 않으면 eyebrow 는 좌측, 제목은 우측으로 찢어져 표시된다 — 육안 실측) */
.section__head {
  display: block; margin-bottom: var(--sp-4);
}
/* "전체 보기" 링크가 있는 헤드만 가로 배치를 유지한다 */
.section__head:has(.section__more) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: var(--sp-3);
}
.section__head:has(.section__more) .eyebrow,
.section__head:has(.section__more) .section__title { grid-column: 1; }
.section__head:has(.section__more) .section__more { grid-column: 2; grid-row: 2; }
.section__head:has(.section__more) .section__lead { grid-column: 1 / -1; }
.section--tint { background: var(--c-surface-2); border-block: 1px solid var(--c-border); }

/* ============================================================
   B-2 №1. 히어로 — 실시간 수치 없음(캐시 60분 > 갱신 60분)
   ============================================================ */
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-brand-deep);
  background: var(--c-brand-soft); border-radius: 999px;
  padding: 5px var(--sp-3); margin-bottom: var(--sp-3);
}
.hero h1 { font-size: var(--fs-h1-home); font-weight: 800; letter-spacing: -.01em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--sp-5);
  border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-base);
  border: 1px solid var(--c-brand); background: var(--c-brand); color: #fff;
}
.btn:hover, .btn:focus { background: var(--c-brand-deep); border-color: var(--c-brand-deep); text-decoration: none; color: #fff; }
.btn--ghost { background: var(--c-surface); color: var(--c-brand-deep); }
.btn--ghost:hover, .btn--ghost:focus { background: var(--c-brand-soft); color: var(--c-brand-deep); }

/* ============================================================
   B-2 №3. BY THE NUMBERS — 데이터 규모 스트립
   ============================================================ */
.stat-strip {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-4);
  min-height: 104px; /* 높이 예약 — CLS 0 */
  display: flex; flex-direction: column; justify-content: center;
}
.stat__num {
  font-size: var(--fs-num); font-weight: 800; line-height: 1.1;
  color: var(--c-brand-deep); font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: var(--fs-lg); font-weight: 700; }
.stat__label { font-size: var(--fs-sm); color: var(--c-text-sub); font-weight: 600; margin-top: var(--sp-1); }

/* ============================================================
   B-2 №4·5. 빠른 찾기 pill / 지역 그리드
   ============================================================ */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); padding: 7px var(--sp-3);
  border: 1px solid var(--c-border); border-radius: 999px;
  background: var(--c-surface); color: var(--c-text); font-weight: 500;
  min-height: var(--tap);   /* 터치 타깃 44px (CLAUDE.md PHASE 2) */
}
.pill:hover, .pill:focus { border-color: var(--c-brand); color: var(--c-brand-deep); text-decoration: none; background: var(--c-brand-soft); }
.pill__n { font-size: var(--fs-xs); color: var(--c-text-sub); font-variant-numeric: tabular-nums; }
.pill:hover .pill__n { color: var(--c-brand-deep); }

.region-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.region-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-4);
}
.region-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.region-card__name { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.region-card__name a { color: var(--c-text); }
.region-card__name a:hover { color: var(--c-brand-deep); }
.region-card__count {
  font-size: var(--fs-xs); color: var(--c-text-sub); font-weight: 600;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.region-card__more { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; }

/* ============================================================
   B-2 №6. 카테고리 카드 — 16:10 이미지 영역(폴백 SVG) + 하위 pill
   ============================================================ */
.cat-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.cat-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.cat-card__media {
  aspect-ratio: 16 / 10;            /* 비율 예약 — CLS 0 */
  background: linear-gradient(135deg, var(--c-brand-soft), var(--c-surface-3));
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--c-border);
}
.cat-card__media svg { width: 30%; height: auto; color: var(--c-brand); opacity: .92; }
/* 이미지가 들어온 카드 — 16:10 예약은 그대로, 이미지가 박스를 채운다(CLS 0 유지). */
.cat-card__media--img { display: block; background: var(--c-surface-3); }
.cat-card__media--img picture { display: block; width: 100%; height: 100%; }
.cat-card__media--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.cat-card__title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.cat-card__title a { color: var(--c-text); }
.cat-card__title a:hover { color: var(--c-brand-deep); }
.cat-card__desc { font-size: var(--fs-sm); color: var(--c-text-sub); margin: 0; }
.cat-card .pill-row { margin-top: auto; }

/* ============================================================
   B-2 №7. HOW IT WORKS — 번호 + SVG 아이콘 (이미지 없음)
   ============================================================ */
.step-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  counter-reset: step;
}
.step { display: flex; gap: var(--sp-3); align-items: flex-start; }
.step__num {
  flex: none; width: 44px; height: 44px; border-radius: 999px;
  background: var(--c-brand-soft); color: var(--c-brand-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.step__title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 4px; }
.step__desc { font-size: var(--fs-sm); color: var(--c-text-sub); margin: 0; }

/* ============================================================
   B-2 №8·9. 공식 출처 카드 / 왜 이 사이트인가
   ============================================================ */
.official-grid, .why-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.official-card, .why-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-4);
}
.official-card__title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--sp-1); }
.official-card__desc, .why-card__desc { font-size: var(--fs-sm); color: var(--c-text-sub); margin: 0; }
.official-card__link { font-size: var(--fs-sm); font-weight: 700; display: inline-block; margin-top: var(--sp-2); }
.why-card__title {
  font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--sp-1);
  display: flex; align-items: center; gap: var(--sp-2);
}
.why-card__title svg { flex: none; color: var(--c-brand); }

/* ============================================================
   B-2 №10·11. 매거진·가이드 카드
   ============================================================ */
.mag-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.mag-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.mag-card__media {
  aspect-ratio: 16 / 10; background: var(--c-surface-3);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--c-border);
}
.mag-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-card__media svg { width: 26%; height: auto; color: var(--c-brand); opacity: .5; }
.mag-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.mag-card__cat {
  align-self: flex-start; font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-brand-deep); background: var(--c-brand-soft);
  border-radius: 999px; padding: 3px var(--sp-2);
}
.mag-card__title {
  font-size: 1.0625rem; font-weight: 600; margin: 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mag-card__title a { color: var(--c-text); }
.mag-card__title a:hover { color: var(--c-brand-deep); }
.mag-card__excerpt {
  font-size: var(--fs-sm); color: var(--c-text-sub); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mag-card__meta {
  margin-top: auto; font-size: var(--fs-xs); color: var(--c-text-sub);
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
}

/* ============================================================
   B-2 №13. FAQ 아코디언 (CSS only — details/summary)
   ============================================================ */
.faq { display: grid; gap: var(--sp-2); }
.faq__item {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.faq__q {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
  font-weight: 600; cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; margin-left: auto; flex: none;
  width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .55;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); }
.faq__a { padding: 0 var(--sp-4) var(--sp-4); color: var(--c-text-sub); font-size: var(--fs-sm); }
.faq__a p { margin: 0 0 var(--sp-2); }
.faq__a p:last-child { margin: 0; }

/* ============================================================
   A-5. 메가 푸터
   ============================================================ */
.site-footer {
  background: var(--c-footer-bg); color: var(--c-footer-fg);
  border-top: 0; margin-top: var(--sp-7);
}
.site-footer a { color: var(--c-footer-fg); }
.site-footer a:hover, .site-footer a:focus { color: #fff; }
.mega-footer {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
  padding: var(--sp-6) 0 var(--sp-5);
}
@media (min-width: 640px) { .mega-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .mega-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fcol__title {
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-footer-head);
  margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-footer-border);
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fcol li { font-size: var(--fs-sm); }
.fcol__sub {
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-footer-head);
  margin: var(--sp-3) 0 var(--sp-1); opacity: .9;
}
.fcol__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fcol__pills a {
  font-size: var(--fs-xs); padding: 3px var(--sp-2);
  border: 1px solid var(--c-footer-border); border-radius: 999px;
}
.fcol__pills a:hover { border-color: #fff; text-decoration: none; }
.fcol__about { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.footer-bottom {
  border-top: 1px solid var(--c-footer-border);
  padding: var(--sp-4) 0 var(--sp-5);
  font-size: var(--fs-xs);
  display: grid; gap: var(--sp-2);
}
.footer-bottom p { margin: 0; }
.site-footer .footer-source { color: var(--c-footer-fg); font-size: var(--fs-xs); margin: 0; }

/* ============================================================
   A-6. 모바일 하단 고정 바 — 높이 예약으로 CLS 0
   ============================================================ */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -1px 6px rgba(27, 39, 51, .08);
}
.mobile-bar .btn { flex: 1; font-size: var(--fs-sm); padding: 0 var(--sp-3); }
@media (min-width: 880px) { .mobile-bar { display: none; } }
/* 하단 바에 본문이 가리지 않도록 여백 예약 */
@media (max-width: 879.98px) {
  body.home { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   축소 헤더·푸터 (B-3) — 상세·목록·브리핑은 전량 렌더하지 않는다
   ============================================================ */
.site-footer--slim .mega-footer { display: none; }
.site-footer--slim .footer-bottom { border-top: 0; }

/* ============================================================
   PHASE-HOME — 등급 아이콘·칩 / 내 지역 카드 / 전국 지도 / 요약
   원칙: 색은 전부 등급 토큰(--c-gN)에서 파생한다. 하드코딩 hex 0건(G-G ②).
         등급이 색으로만 표현되는 지점을 만들지 않는다 — 아이콘·텍스트 병기(G-G ③).
   ============================================================ */

/* 등급별 연한 배경 톤 — 원색에서 파생(새 색을 도입하지 않는다) */
:root {
  --c-g1-soft: color-mix(in srgb, var(--c-g1) 14%, #fff);
  --c-g2-soft: color-mix(in srgb, var(--c-g2) 14%, #fff);
  --c-g3-soft: color-mix(in srgb, var(--c-g3) 18%, #fff);
  --c-g4-soft: color-mix(in srgb, var(--c-g4) 16%, #fff);
  --c-gx-soft: color-mix(in srgb, var(--c-gx) 10%, #fff);
}

/* ── 등급 아이콘 ── */
.g-icon { flex: none; vertical-align: -0.15em; }
.g-icon--g1 { color: var(--c-g1-badge); }
.g-icon--g2 { color: var(--c-g2-badge); }
.g-icon--g3 { color: var(--c-g3-fg); }
.g-icon--g4 { color: var(--c-g4-badge); }
.g-icon--missing { color: var(--c-gx); }

/* ── 등급 칩 (아이콘 + 등급명) ── */
.g-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2); border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.g-chip--g1 { background: var(--c-g1-badge); color: var(--c-g1-fg); }
.g-chip--g2 { background: var(--c-g2-badge); color: var(--c-g2-fg); }
.g-chip--g3 { background: var(--c-g3-badge); color: var(--c-g3-fg); }
.g-chip--g4 { background: var(--c-g4-badge); color: var(--c-g4-fg); }
.g-chip--missing { background: var(--c-gx); color: var(--c-gx-fg); }
.g-chip .g-icon { color: currentColor; }

/* ── 행동요령 줄 (공식 원문 인용) ── */
.action-line {
  margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text);
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
}
.action-line__grade { font-weight: 700; }
.action-line__src { color: var(--c-text-sub); font-size: var(--fs-xs); }

/* ── 내 지역 카드 (§2-1) ── */
.mycard-section { padding: var(--sp-6) 0 var(--sp-5); }
.mycard {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--sp-5); background: var(--c-surface);
  transition: background-color .2s ease;
}
/* 배경을 등급 연한 톤으로 — 멀리서 색만 보고도 판별되게(§2-6) */
.mycard--g1 { background: var(--c-g1-soft); border-color: color-mix(in srgb, var(--c-g1) 35%, #fff); }
.mycard--g2 { background: var(--c-g2-soft); border-color: color-mix(in srgb, var(--c-g2) 35%, #fff); }
.mycard--g3 { background: var(--c-g3-soft); border-color: color-mix(in srgb, var(--c-g3) 40%, #fff); }
.mycard--g4 { background: var(--c-g4-soft); border-color: color-mix(in srgb, var(--c-g4) 40%, #fff); }
.mycard--missing { background: var(--c-gx-soft); }

.mycard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.mycard__title { font-size: var(--fs-xl); margin: 0; font-weight: 800; letter-spacing: -.01em; }
.mycard__locate {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--c-border-strong); border-radius: 999px;
  background: var(--c-surface); color: var(--c-text);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.mycard__locate:hover, .mycard__locate:focus { border-color: var(--c-brand); color: var(--c-brand-deep); }

/* 본문 — 위치 확정 전후로 높이가 변하지 않게 최소 높이를 고정한다(CLS 0 / G-D) */
.mycard__body {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-4); min-height: 104px;
}
/* 아이콘 박스를 미리 잡아 둔다 — SVG 렌더 전후로 높이가 확정되며 세로 16px 밀린 사례가 있다.
   width/height 속성이 있어도 부모 박스가 없으면 정렬 기준이 늦게 정해진다. */
.mycard__icon { flex: none; line-height: 0; width: 72px; height: 72px; }
.mycard__icon svg { display: block; }
.mycard__main { min-width: 0; }
/* 지역명 줄 — 상태 전환 시 1줄↔2줄로 바뀌면 카드 높이가 변한다(375px 실측: 25px 시프트).
   2줄분 높이를 미리 예약해 위치 확정 전후 높이를 고정한다(§2-1 / G-D CLS 0). */
.mycard__place {
  margin: 0 0 var(--sp-1); font-weight: 700; font-size: var(--fs-lg);
  line-height: 1.35; min-height: calc(1.35em * 2);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--sp-2);
}
.mycard__place-note { font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-sub); }
.mycard__value { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); }
.mycard__num { font-size: 3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mycard__unit { font-size: var(--fs-sm); color: var(--c-text-sub); }
.mycard__missing { font-size: var(--fs-2xl); font-weight: 800; color: var(--c-gx); }
.mycard__meta {
  margin: var(--sp-2) 0 0; display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; font-size: var(--fs-sm);
  min-height: 1.7rem;   /* 등급 칩(아이콘 포함) 높이 기준 — 칩 교체 시 줄 높이 변동 방지 */
}
.mycard__item-name { color: var(--c-text-sub); }

/* 행동요령 영역 — 등급에 따라 원문이 없을 수 있으므로 높이를 예약해 시프트를 막는다 */
.mycard__guide { min-height: 1.5rem; margin-top: var(--sp-3); }
/* 상태 안내 줄 — 문구 길이가 상태마다 달라 375px 에서 2줄↔1줄로 바뀐다(실측 22.4px 시프트).
   2줄분을 예약해 폴백/성공 어느 경로에서도 카드 높이가 같게 만든다(G-D CLS 0). */
.mycard__status {
  margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-sub);
  line-height: 1.6; min-height: calc(1.6em * 2);
}

.mycard__picker { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
.mycard__picker select { min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface); font-size: var(--fs-base); }
.mycard__picker-go { min-height: 44px; padding: 0 var(--sp-4); border: 0; border-radius: var(--radius); background: var(--c-brand); color: #fff; font-weight: 700; cursor: pointer; }
.mycard__src { margin-top: var(--sp-3); }

@media (max-width: 30rem) {
  .mycard__body { gap: var(--sp-3); }
  .mycard__num { font-size: 2.5rem; }
}

/* ── 전국 지도 (§2-2) ── */
.map-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.map-toggle { display: inline-flex; border: 1px solid var(--c-border-strong); border-radius: 999px; overflow: hidden; }
.map-toggle__btn {
  min-height: 40px; padding: 0 var(--sp-4); border: 0; background: var(--c-surface);
  color: var(--c-text-sub); font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.map-toggle__btn.is-on { background: var(--c-brand); color: #fff; }

.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); align-items: start; }
@media (max-width: 48rem) { .map-wrap { grid-template-columns: 1fr; } }

/* SVG 자체가 비율을 고정하므로 이미지처럼 리플로우하지 않는다(CLS 0) */
.kmap { width: 100%; height: auto; display: block; }
.kmap__area {
  stroke: var(--c-surface); stroke-width: 1.1; stroke-linejoin: round;
  transition: opacity .15s ease;
}
.kmap__area--g1 { fill: var(--c-g1); }
.kmap__area--g2 { fill: var(--c-g2); }
.kmap__area--g3 { fill: var(--c-g3); }
.kmap__area--g4 { fill: var(--c-g4); }
.kmap__area--missing { fill: var(--c-gx); }
.kmap__link:hover .kmap__area { opacity: .78; }
.kmap__link:focus { outline: none; }
.kmap__link:focus-visible .kmap__area { stroke: var(--c-focus); stroke-width: 2.4; }

.kmap__leader { stroke: var(--c-text-sub); stroke-width: .6; }
/* 라벨: text-anchor 기본값을 middle 로 두고, 좌/우 정렬만 클래스로 예외 처리한다
   (속성을 17번 반복하지 않기 위함 — 홈 예산 G-E) */
.kmap__labels { pointer-events: none; }
.kmap__label { text-anchor: middle; font-size: 8.5px; font-weight: 700; fill: var(--c-text); paint-order: stroke; stroke: var(--c-surface); stroke-width: 2.4px; stroke-linejoin: round; }
.kmap__label--start { text-anchor: start; }
.kmap__label--end { text-anchor: end; }
.kmap__label-val { font-weight: 800; }

/* 범례 — 색만 있고 기준이 없으면 오독되므로 구간 수치를 함께 낸다(§2-2) */
/* 범례 박스를 미리 잡는다 — 5행(4등급+점검중)이 하나씩 확정되며 폭 262→278·높이 143→244 로
   커져 시프트 소스가 됐다(스로틀 실측 2/8회 0.00062). 안정 상태 치수를 하한으로 예약한다.
   min-height 는 5행 + 제목 + 출처줄 기준이며, 행 수가 바뀌면 함께 조정해야 한다. */
.map-legend {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--sp-4); background: var(--c-surface);
  min-width: 17.5rem; min-height: 244px;
}
.map-legend__title { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 700; }
.map-legend__unit { color: var(--c-text-sub); font-weight: 400; }
.map-legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.map-legend__row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.map-legend__swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.map-legend__row--g1 .map-legend__swatch { background: var(--c-g1); }
.map-legend__row--g2 .map-legend__swatch { background: var(--c-g2); }
.map-legend__row--g3 .map-legend__swatch { background: var(--c-g3); }
.map-legend__row--g4 .map-legend__swatch { background: var(--c-g4); }
.map-legend__row--missing .map-legend__swatch { background: var(--c-gx); }
.map-legend__label { font-weight: 700; }
.map-legend__range { margin-left: auto; color: var(--c-text-sub); font-variant-numeric: tabular-nums; }
.map-legend__src { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-sub); }

.map-note { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-sub); }
.map-more { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.map-listwrap { margin-top: var(--sp-4); }
.map-listwrap > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--c-brand-deep); min-height: 44px; display: flex; align-items: center; }

/* 지도의 텍스트 대응물 */
.sido-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--sp-2); }
.sido-list__item a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); text-decoration: none; color: var(--c-text); }
.sido-list__item a:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.sido-list__name { font-weight: 700; }
.sido-list__val { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.sido-list__unit { font-size: var(--fs-xs); color: var(--c-text-sub); font-weight: 400; margin-left: 2px; }
.sido-list__missing { margin-left: auto; color: var(--c-gx); font-size: var(--fs-sm); }

/* ── 오늘의 요약 (§2-3) ── */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-5); }
.summary__title { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.summary__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); counter-reset: rank; }
.summary__item a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); text-decoration: none; color: var(--c-text); background: var(--c-surface); }
.summary__item a:hover { border-color: var(--c-brand); }
.summary__name { font-weight: 700; }
.summary__val { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.summary__unit { font-size: var(--fs-xs); color: var(--c-text-sub); font-weight: 400; margin-left: 2px; }
.summary__note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-sub); }

/* ── 예보 한 줄 (§2-4) ── */
.fc-line { border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-5); background: var(--c-surface); }
.fc-line__title { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.fc-line__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.fc-line__rows li { display: flex; gap: var(--sp-3); align-items: baseline; }
.fc-line__day { font-weight: 800; min-width: 3rem; }
.fc-line__more { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-sm); }
.fc-line__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-sub); }

/* ── 지역 칩: 개수 → 농도 (§1-1) ── */
.pill__val { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pill__unit { font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-sub); }
.pill__missing { font-size: var(--fs-xs); color: var(--c-gx); }
.pill__name { font-weight: 500; }
.pill--g1 { border-color: color-mix(in srgb, var(--c-g1) 45%, #fff); background: var(--c-g1-soft); }
.pill--g2 { border-color: color-mix(in srgb, var(--c-g2) 45%, #fff); background: var(--c-g2-soft); }
.pill--g3 { border-color: color-mix(in srgb, var(--c-g3) 50%, #fff); background: var(--c-g3-soft); }
.pill--g4 { border-color: color-mix(in srgb, var(--c-g4) 50%, #fff); background: var(--c-g4-soft); }
.pill--missing { background: var(--c-gx-soft); }

/* ── 지역 인덱스 /region/ (§3) ── */
.region-index { padding: var(--sp-6) 0; }
.region-index__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-6); }
.legend-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border: 1px solid var(--c-border); border-radius: 999px; font-size: var(--fs-xs); }
.legend-chip__range { color: var(--c-text-sub); font-variant-numeric: tabular-nums; }
.legend-chip--g1 .g-icon { color: var(--c-g1-badge); }
.legend-chip--g2 .g-icon { color: var(--c-g2-badge); }
.legend-chip--g3 .g-icon { color: var(--c-g3-fg); }
.legend-chip--g4 .g-icon { color: var(--c-g4-badge); }
.region-index__sido { margin-bottom: var(--sp-6); }
.region-index__sido-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.region-index__sido-val { font-variant-numeric: tabular-nums; font-weight: 800; }
.region-index__sido-val .unit { font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-sub); margin-left: 2px; }
.region-index__foot { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--c-text-sub); }
.section--alert { padding-top: var(--sp-4); padding-bottom: 0; }
.fc-line__basis { font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-sub); }
.stale-note { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-alert-text); background: var(--c-alert-bg); border: 1px solid var(--c-alert-border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); }
.region-index__overview { margin-bottom: var(--sp-7); }
.region-index__overview h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }

/* ── 광고 슬롯 (ADSENSE.md §3-3) ──
   광고는 페이지가 그려진 뒤 채워지므로 자리를 미리 잡지 않으면 본문이 밀린다.
   이 사이트는 CLS 0 을 유지 중이라(스로틀 4x 실측) min-height 예약은 필수다.
   인피드는 카드 그리드 안에 들어가므로 카드 배경·테두리를 그대로 쓴다. */
.ad-slot { margin: var(--sp-6) 0; text-align: center; overflow: hidden; }
.ad-slot.ad-display,
.ad-slot.ad-inarticle { min-height: 280px; }
.ad-slot.ad-infeed { min-height: 200px; }
.ad-slot.ad-multiplex { min-height: 600px; }
.post-card--ad { padding: var(--sp-3); }
.post-card--ad .ad-slot { margin: 0; }
@media (min-width: 768px) {
  .ad-slot.ad-display,
  .ad-slot.ad-inarticle { min-height: 250px; }
  .ad-slot.ad-multiplex { min-height: 400px; }
}

/* ==========================================================================
   라운드 2026-09-05 — DESIGN-ID.md ③④: 최소 글자 13px(--fs-xs 상향), 터치 44px, 보조 문구 명암비
   ========================================================================== */
:root { --fs-xs: 0.8125rem; }
.pill, a.pill { min-height: var(--tap); }
.map-toggle__btn { min-height: var(--tap); }
.mycard__status, .summary__note, .map-note { color: var(--c-text); }
.key-strip a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ==========================================================================
   라운드 2026-09-07 — 매거진·리포트 본문 가독성 (3라운드 이월 항목)
   본문 산문만 16px → 17px. --fs-base 토큰은 버튼·셀렉트·카드 제목에도 쓰이므로
   토큰을 올리지 않고 .entry-content 안 산문 요소에만 적용한다.
   표·캡션·메타는 기존 크기 유지(표는 열이 많아 17px면 가로 스크롤이 늘어난다).
   ========================================================================== */
.entry-content p,
.entry-content li {
	font-size: 1.0625rem;
	line-height: 1.7;
}
.entry-content .src,
.entry-content .source-line,
.entry-content figcaption,
.entry-content table,
.entry-content table p,
.entry-content table li {
	font-size: var(--fs-base);
	line-height: 1.6;
}

/* 디자인 점검 2026-09-09: 이미지 카드와 푸터 링크를 정체성 카드 규격에 맞춘다. */
.entry-content figure img{
	display:block;
	width:100%;
	height:auto;
	border-radius:var(--radius);
}
.site-footer nav a{min-width:var(--tap)}