/*
Theme Name: findbluesky
Theme URI: https://findbluesky.com
Description: 파인드블루스카이 — 미세먼지·대기질·날씨 데이터 서비스 전용 커스텀 클래식 테마. 기성 테마·페이지빌더 미사용.
Author: 파인드블루스카이
Version: 0.1.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 ul { display: flex; gap: var(--sp-2); padding: 0; }
  .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; }

/* 지역 선택 폼 — 실제 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; }