/*
Theme Name: 카스테라 Renewal
Theme URI: https://carstera.com
Author: 카스테라
Description: 자동차 생활 데이터 서비스 카스테라 전용 커스텀 테마. 전국 주유소 유가·전기차 충전소·자동차검사 데이터 페이지에 최적화된 클래식 테마.
Version: 3.0.0
Requires PHP: 8.3
License: GNU General Public License v2 or later
Text Domain: carstera-renewal
*/

/* ==========================================================================
   1. 디자인 토큰 (CSS 변수)
   ========================================================================== */
:root {
  /* ── 공통 디자인 시스템(A부) 토큰 매핑 ──
     A-0 규칙: 기존 --c-* 이름을 유지하고 논리 역할(c1/c2/c3)을 그 위에 매핑한다.
     매핑표:  c1(주:주유소 유가)=--c-primary  c2(전기차 충전)=--c2  c3(계산기/검사)=--c3
              --ok=정상/최저가/운영  --warn=준비중  --danger=마감/상승경고 */

  /* 기본 (A-1) */
  --c-bg: #fafaf9;          /* bg-page: 아주 옅은 웜그레이 */
  --c-surface: #ffffff;     /* bg-card */
  --c-text: #1a1a18;        /* text-1 본문 */
  --c-text-muted: #5f5e5a;  /* text-2 보조 */
  --c-text-hint: #888780;   /* text-3 힌트·캡션 */
  --c-border: #e7e5e0;      /* 헤어라인 */

  /* 브랜드 3색 (B-1) — c1 주 색은 기존 --c-primary 이름에 매핑 */
  --c1: #185fa5; --c1-bg: #e6f1fb; --c1-deep: #0c447c;   /* 주유소 유가 (파랑) */
  --c2: #1d9e75; --c2-bg: #e1f5ee; --c2-deep: #0f6e56;   /* 전기차 충전 (초록) */
  --c3: #d85a30; --c3-bg: #faece7; --c3-deep: #993c1d;   /* 계산기·검사 (주황) */
  --c-primary: var(--c1); --c-primary-dark: var(--c1-deep); --c-primary-soft: var(--c1-bg);
  --c-accent: var(--c2); --c-accent-soft: var(--c2-bg);

  /* 상태 (A-1) */
  --ok-bg: #e1f5ee;   --ok: #0f6e56;    --c-success: var(--ok);
  --warn-bg: #faeeda; --warn: #854f0b;
  --danger-bg: #fcebeb; --danger: #a32d2d; --c-danger: var(--danger);

  /* 연료 구분색 (데이터 표기 고유색 — 브랜드색으로 덮지 않음, A-3) */
  --fuel-gasoline: #e07b00;
  --fuel-premium: #c2410c;
  --fuel-diesel: #0f766e;
  --fuel-lpg: #6d28d9;
  --fuel-ev: #0284c7;

  /* 타이포그래피 — 시스템 폰트 스택 (웹폰트 금지) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-num: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 크기 (A-1: radius-card 12 / chip 9 / pill 999) */
  --radius: 12px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(26, 26, 24, 0.05);
  --container: 1080px;
  --header-h: 56px;
}

/* ==========================================================================
   2. 리셋·베이스
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  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-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 0.6em; font-weight: 500; }
h1 { font-size: 1.375rem; }   /* 22px */
h2 { font-size: 1.125rem; }   /* 18px */
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
b, strong { font-weight: 500; }
table { border-collapse: collapse; width: 100%; }
button { font-family: inherit; }

/* 인라인 SVG 아이콘 (외부 요청 0 — 테마 내장 <symbol> 스프라이트, stroke 1.75 라인) */
svg.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  width: auto; height: auto; clip: auto;
  background: var(--c-surface); padding: 10px 16px; border-radius: var(--radius-sm);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }

/* ==========================================================================
   3. 헤더·내비게이션 (모바일 퍼스트)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}
.site-logo {
  font-size: 1.2rem; font-weight: 500; color: var(--c-text);
  display: flex; align-items: center; gap: 7px; letter-spacing: -0.01em;
}
.site-logo:hover { text-decoration: none; }
.site-logo .logo-mark { display: inline-flex; color: var(--c1); }
.site-logo .logo-mark svg { width: 26px; height: 26px; display: block; }

.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  color: var(--c-text);
}
.nav-toggle svg { width: 24px; height: 24px; }

.site-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow);
}
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 8px 0; }
.site-nav a {
  display: block; padding: 12px 20px;
  color: var(--c-text); font-weight: 500;
  min-height: 44px;
}
.site-nav a:hover { background: var(--c1-bg); color: var(--c1-deep); text-decoration: none; }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: block; position: static;
    background: none; border: 0; box-shadow: none;
  }
  .site-nav ul { display: flex; gap: 4px; padding: 0; }
  .site-nav a { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.95rem; }
}

/* ==========================================================================
   4. 히어로 + 검색 도구 (프론트 최상단)
   ========================================================================== */
.hero { padding: 20px 0 4px; }
.hero .container {
  background: var(--c1-bg);
  border-radius: 16px;
  padding: 30px 18px 22px;
  text-align: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; margin-bottom: 12px;
  background: var(--c-surface); color: var(--c1-deep);
  border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 500;
}
.hero-badge svg { width: 14px; height: 14px; }
.hero h1 { font-size: 1.5rem; margin-bottom: 6px; color: var(--c-text); }
.hero .hero-sub { color: var(--c-text-muted); margin-bottom: 18px; font-size: 0.95rem; }

.search-tool {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--c-text);
  max-width: 760px; margin: 0 auto; text-align: left;
}
.search-tool .fields { display: grid; gap: 10px; }
.search-tool label { font-size: 0.82rem; font-weight: 500; color: var(--c-text-muted); display: block; margin-bottom: 4px; }
.search-tool select {
  width: 100%; min-height: 44px;
  padding: 8px 12px;
  font-size: 1rem; font-family: inherit;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
}
.search-tool select:focus { outline: 2px solid var(--c1); outline-offset: -1px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 20px;
  font-size: 1rem; font-weight: 500;
  border: 0; border-radius: var(--radius-sm);
  background: var(--c1); color: #fff;
  cursor: pointer; text-decoration: none;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { background: var(--c1-deep); text-decoration: none; color: #fff; }
.btn-block { width: 100%; }
.btn-ghost { background: var(--c1-bg); color: var(--c1-deep); }
.btn-ghost:hover { background: #d7e7f6; color: var(--c1-deep); }

@media (min-width: 640px) {
  .hero .container { padding: 40px 24px 30px; }
  .hero h1 { font-size: 1.85rem; }
  .search-tool { padding: 16px; }
  .search-tool .fields { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
  .search-tool .btn { min-width: 110px; }
}

/* ==========================================================================
   5. 카드·섹션
   ========================================================================== */
.section { padding: 32px 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-title h2 { margin: 0; }
.section-title .more { font-size: 0.9rem; white-space: nowrap; }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px;
}
.card-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: 1fr 1fr; } .card-grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* 전국 평균 유가 카드 (통계 컴포넌트 — 큰 숫자 500) */
.price-board { margin-top: 20px; }
.price-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.price-board-head h2 { margin: 0; font-size: 1.05rem; }
.price-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .price-items { grid-template-columns: repeat(4, 1fr); } }
.price-item {
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 12px; text-align: center;
}
.price-item .fuel-name { font-size: 0.85rem; font-weight: 500; color: var(--c-text-muted); display: block; }
.price-item .fuel-price { font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.price-item .fuel-unit { font-size: 0.75rem; color: var(--c-text-hint); }
/* 유가 등락 (B-2): 하락=파랑▼ / 상승=빨강▲ / 보합=회색 — 색만이 아니라 ▲▼+"전일비" 병기 */
.price-item .fuel-diff { display: block; font-size: 0.8125rem; font-weight: 500; margin-top: 2px; }
.diff-up { color: var(--danger); }
.diff-down { color: var(--c1); }
.diff-flat { color: var(--c-text-hint); }
.price-item[data-fuel="gasoline"] { border-top: 3px solid var(--fuel-gasoline); }
.price-item[data-fuel="premium"] { border-top: 3px solid var(--fuel-premium); }
.price-item[data-fuel="diesel"] { border-top: 3px solid var(--fuel-diesel); }
.price-item[data-fuel="lpg"] { border-top: 3px solid var(--fuel-lpg); }
.price-item[data-fuel="ev"] { border-top: 3px solid var(--fuel-ev); }

/* 신선도 신호 표기 */
.updated-at {
  font-size: 0.8125rem; color: var(--c-text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.updated-at::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-success); flex: none;
}
.updated-at.is-stale::before { background: var(--c-text-muted); }

/* 서비스 바로가기 카드 (A-2: 상단 3px 색 라인 + 아이콘칩) */
.feature-card { display: block; color: var(--c-text); position: relative; overflow: hidden; }
.feature-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c1); }
.feature-card.c2::before { background: var(--c2); }
.feature-card.c3::before { background: var(--c3); }
.feature-card:hover { text-decoration: none; border-color: var(--c-text-hint); }
.feature-card h3 { margin: 12px 0 4px; }
.feature-card p { margin: 0; font-size: 0.9rem; color: var(--c-text-muted); }

/* 아이콘칩 (A-2: 42px, 라운드 10, cN-bg 배경 + cN-deep 아이콘) */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--c1-bg); color: var(--c1-deep);
}
.icon-chip svg { width: 24px; height: 24px; }
.c2 .icon-chip { background: var(--c2-bg); color: var(--c2-deep); }
.c3 .icon-chip { background: var(--c3-bg); color: var(--c3-deep); }

/* ==========================================================================
   6. 데이터 표 (유가·충전소·검사소 목록)
   ========================================================================== */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.data-table th, .data-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.92rem; white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table th { background: var(--c-bg); font-weight: 500; color: var(--c-text-muted); font-size: 0.82rem; }
.data-table td.num { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.data-table tbody tr:hover td { background: var(--c1-bg); }
/* 최저가 행 강조 (B-4: ok 상태색) */
.data-table tr.is-lowest td { background: var(--ok-bg); }
.data-table tr.is-lowest:hover td { background: var(--ok-bg); }

/* 배지(알약형) — 분류=브랜드색 / 상태색 (A-2) */
.badge {
  display: inline-block; padding: 3px 9px;
  font-size: 0.75rem; font-weight: 500;
  border-radius: var(--radius-pill); background: var(--c1-bg); color: var(--c1-deep);
  vertical-align: middle;
}
.badge-c2 { background: var(--c2-bg); color: var(--c2-deep); }
.badge-c3 { background: var(--c3-bg); color: var(--c3-deep); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-accent { background: var(--c3-bg); color: var(--c3-deep); }
.badge-muted { background: var(--c-bg); color: var(--c-text-muted); }
.ev-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* 유가 기준일 배지 (숫자 옆 부착 — 롤링 갱신 오인 방지, 반드시 유지·강조 / B-2·B-5) */
.price-age {
  display: inline-block; margin-left: 4px; padding: 2px 7px;
  font-size: 0.72rem; font-weight: 500; vertical-align: middle;
  border-radius: var(--radius-pill); background: var(--ok-bg); color: var(--ok);
}
.price-age.is-old { background: var(--warn-bg); color: var(--warn); }

/* 빈 데이터 상태 */
.empty-state {
  text-align: center; padding: 32px 16px;
  color: var(--c-text-muted); font-size: 0.95rem;
  border: 1px dashed var(--c-border); border-radius: var(--radius);
  background: var(--c-surface);
}

/* ==========================================================================
   7. 본문 (매거진·허브 글)
   ========================================================================== */
.content-main { padding: 28px 0 48px; }
.entry {
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 24px 18px;
}
@media (min-width: 640px) { .entry { padding: 36px 40px; } }
.entry-header { margin-bottom: 20px; }
.entry-meta { font-size: 0.85rem; color: var(--c-text-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.entry-content { font-size: 1.02rem; }
.entry-content h2 { margin-top: 1.8em; padding-bottom: 0.3em; border-bottom: 2px solid var(--c-border); }
.entry-content h3 { margin-top: 1.5em; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content table th, .entry-content table td { padding: 8px 10px; border: 1px solid var(--c-border); font-size: 0.92rem; }
.entry-content table th { background: var(--c-bg); }
.entry-content blockquote {
  margin: 1em 0; padding: 12px 16px;
  border-left: 4px solid var(--c-primary); background: var(--c-primary-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 글 목록 카드 */
.post-card { display: block; color: var(--c-text); }
.post-card:hover { text-decoration: none; border-color: var(--c-text-hint); }
.post-card h3 { margin-bottom: 6px; font-size: 1.02rem; font-weight: 500; }
.post-card .excerpt { font-size: 0.88rem; color: var(--c-text-muted); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 매거진 썸네일 (PART B) — has-thumb 카드만 적용, 미보유 카드는 기존 레이아웃 유지 */
.post-card.has-thumb { padding: 0; overflow: hidden; }
.post-card.has-thumb .post-card-body { padding: 16px 20px 20px; }
.card-thumb { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-bg); }
/* 아카이브(2열): 카드가 넉넉해지는 ≥960px에서만 이미지-좌 / 텍스트-우.
 * (640~960px 구간은 카드 폭이 좁아 세로 배치 유지 — 가로 분할 시 본문이 과하게 줄바꿈)
 * align-items:start + 고정 3:2 비율로 이미지가 본문 높이만큼 세로로 늘어나 잘리는 것 방지 */
@media (min-width: 960px) {
  .card-grid.cols-2 .post-card.has-thumb { display: grid; grid-template-columns: 260px 1fr; align-items: start; }
  .card-grid.cols-2 .post-card.has-thumb .card-thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .card-grid.cols-2 .post-card.has-thumb .post-card-body { padding: 20px; }
}
/* 단일글 대표 이미지: 최대 600px 중앙, 16:9 */
.entry-thumb { max-width: 600px; margin: 0 auto 24px; border-radius: var(--radius-sm); overflow: hidden; }
.entry-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* 페이지네이션 */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text); font-weight: 500;
}
.pagination .page-numbers.current { background: var(--c1); color: #fff; border-color: var(--c1); }
.pagination a.page-numbers:hover { border-color: var(--c-text-hint); text-decoration: none; }

/* ==========================================================================
   8. 주유소 상세·지역 허브 전용
   ========================================================================== */
.station-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.station-head h1 { margin: 0; }
.info-table th { width: 110px; font-weight: 500; color: var(--c-text-muted); text-align: left; }
.info-table th, .info-table td { padding: 8px 10px; border-bottom: 1px solid var(--c-border); font-size: 0.95rem; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }

.breadcrumb { font-size: 0.85rem; color: var(--c-text-muted); margin: 16px 0; }
.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb .sep { margin: 0 6px; }

/* 도구 페이지 */
.tool-panel { margin-bottom: 28px; }
.tool-panel .field-row { margin-bottom: 14px; }
.tool-panel label { font-weight: 500; font-size: 0.9rem; display: block; margin-bottom: 4px; }

/* Renewal: 계산기 스크립트가 placeholder를 폼으로 교체해도 본문을 밀지 않는다. */
.tool-panel-mount[data-tool="charge-calc"] { min-height: 430px; }

/* Renewal: 데이터 상세의 첫 판단과 출처를 화면 위계에 포함한다. */
.station-jump { position: sticky; top: 8px; z-index: 8; display: flex; gap: 6px; overflow-x: auto; margin: 0 0 14px; padding: 7px; border: 1px solid var(--c-border); border-radius: var(--radius); background: rgba(255,255,255,.96); box-shadow: 0 6px 20px rgba(17,42,70,.08); }
.station-jump a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; padding: 0 13px; border-radius: 9px; color: var(--c1); font-size: .86rem; font-weight: 700; }
.station-jump a:hover, .station-jump a:focus-visible { background: var(--surface-2); }
.station-answer { margin: 0 0 16px; padding: 18px 20px; border-left: 4px solid var(--c1); border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(120deg, #eef6ff, #fff); }
.station-answer h2 { margin: 0 0 7px; font-size: 1.12rem; }
.station-answer p, .station-source p { margin: 0; }
.station-source p + p { margin-top: 10px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }

/* Renewal: 카드 피드백과 1회 reveal. */
.post-card, .cat-card, .region-card, .src-card, .guide-card { transition: transform 180ms ease, box-shadow 180ms ease; }
.post-card:hover, .cat-card:hover, .region-card:hover, .src-card:hover, .guide-card:hover { transform: translateY(-2px); }
.reveal-ready { opacity: 0; transform: translateY(10px); transition: opacity 280ms ease, transform 280ms ease; }
.reveal-ready.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .post-card, .cat-card, .region-card, .src-card, .guide-card, .reveal-ready { transition: none; transform: none; }
  .reveal-ready { opacity: 1; }
}
.tool-panel input[type="number"], .tool-panel input[type="text"], .tool-panel select {
  width: 100%; min-height: 44px; padding: 8px 12px;
  font-size: 1rem; font-family: inherit;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
/* 도구 결과 박스 (B-4: 충전요금 계산기 = c3 강조, 큰 숫자 500) */
.tool-result {
  background: var(--c3-bg); color: var(--c3-deep);
  border: 1px solid var(--c-border); border-left: 3px solid var(--c3);
  border-radius: var(--radius);
  padding: 16px; margin: 16px 0;
}
.tool-result .result-value { font-size: 1.7rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 2px; }
.calc-mode label { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; font-weight: 400; }

/* ==========================================================================
   9. 푸터
   ========================================================================== */
.site-footer {
  margin-top: 48px;
  background: #20242c; color: #b8bec8;
  padding: 32px 0;
  font-size: 0.88rem;
}
.site-footer a { color: #dfe3ea; }
.footer-menu ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-source {
  padding: 12px 14px; margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm);
  line-height: 1.7;
}
.footer-copy { color: #9aa3b0; font-size: 0.82rem; }

/* ==========================================================================
   10. 404·유틸리티
   ========================================================================== */
.page-404 { text-align: center; padding: 64px 16px; }
.page-404 .code { font-size: 3.5rem; font-weight: 500; color: var(--c1); line-height: 1; }
.text-muted { color: var(--c-text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ===== READABILITY LAYER v1 ===== */
/* 본문 컨테이너: .entry-content / accent: 기존 --c1 (A-0 토큰 매핑 규칙) */
.entry-content{
  max-width:720px;margin-left:auto;margin-right:auto;
  font-size:17px;line-height:1.8;
  word-break:keep-all;overflow-wrap:break-word;
}
.entry-content p{margin:0 0 1.5em}
.entry-content h2{
  font-size:1.45em;font-weight:800;line-height:1.4;
  margin:2.4em 0 .9em;padding-bottom:.45em;
  border-bottom:2px solid var(--c1);
}
.entry-content h3{
  font-size:1.15em;font-weight:700;margin:1.8em 0 .7em;
  padding-left:.6em;border-left:4px solid var(--c1);
}
.entry-content a{color:var(--c1);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.4em;margin:0 0 1.5em}
.entry-content li{margin:.45em 0}
.entry-content li::marker{color:var(--c1)}
.entry-content blockquote{
  margin:1.5em 0;padding:1em 1.2em;border-left:4px solid var(--c1);
  background:#f7f7f9;border-radius:0 10px 10px 0;
}

/* 형광펜 하이라이트 */
.entry-content mark{background:#fff3d9;padding:2px 6px;border-radius:5px}
.entry-content mark.hl-blue{background:#e5f0ff}
.entry-content mark.hl-green{background:#e1f5e6}

/* 표 */
.entry-content .table-wrap{overflow-x:auto;margin:1.5em 0;-webkit-overflow-scrolling:touch}
.entry-content table{width:100%;border-collapse:collapse;font-size:.94em;line-height:1.6}
.entry-content th{background:#f5f5f7;font-weight:700;text-align:left}
.entry-content th,.entry-content td{padding:10px 12px;border:1px solid #e5e5ea}
.entry-content tr:nth-child(even) td{background:#fafafa}

/* 이미지·캡션 */
.entry-content figure{margin:1.8em 0}
.entry-content figure img,.entry-content img{max-width:100%;height:auto;border-radius:12px}
.entry-content figcaption{margin-top:.6em;font-size:.85em;color:#6e6e73;text-align:center}

/* FAQ(details/summary)가 본문에 있는 경우 */
.entry-content details{border:1px solid #e5e5ea;border-radius:10px;padding:.9em 1.1em;margin:.6em 0}
.entry-content details summary{font-weight:700;cursor:pointer;list-style:none}
.entry-content details summary::before{content:"Q. ";color:var(--c1)}
.entry-content details[open]{background:#fafafa}

/* 목차 */
.rl-toc{border:1px solid #e5e5ea;border-radius:12px;background:#fafafa;padding:1em 1.2em;margin:0 0 2em;font-size:.93em}
.rl-toc-title{font-weight:800;margin-bottom:.5em}
.rl-toc ol{margin:0;padding-left:1.3em}
.rl-toc li{margin:.3em 0}
.rl-toc a{text-decoration:none;color:inherit}
.rl-toc a:hover{color:var(--c1);text-decoration:underline}

/* 읽기 진행바 */
.rl-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--c1);z-index:9999}

/* 관련글 카드 */
.rl-related{max-width:720px;margin:3em auto 0;padding-top:1.6em;border-top:1px solid var(--c-border)}
.rl-related-title{font-size:1.15rem;font-weight:800;margin:0 0 .9em}
.rl-related-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:600px){.rl-related-grid{grid-template-columns:repeat(3,1fr)}}
.rl-related-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden}
.rl-related-card a{display:block;color:var(--c-text);text-decoration:none}
.rl-related-card img{width:100%;height:120px;object-fit:cover;display:block}
.rl-related-card .rl-related-name{display:block;padding:10px 12px;font-size:.92rem;line-height:1.45;font-weight:500}
.rl-related-card a:hover .rl-related-name{color:var(--c1-deep)}

/* ===== 모바일 가로 오버플로 수정 (gas_station CPT) =====
   원인: .card-grid의 그리드 아이템은 min-width:auto 가 기본이라 트랙이
   내용물 최소폭(표 ~404px)까지 늘어나 375px 뷰포트를 넘겼다.
   유가 표(.data-table)·등락 표시 로직은 변경하지 않는다 —
   .data-table-wrap의 가로 스크롤이 제 역할을 하도록 폭 제약만 되돌린다. */
.card-grid > * { min-width: 0; }
.card > .info-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   9. 홈 전면 재설계 — 유틸리티 바 / 메가 헤더 / 홈 13블록 / 메가 푸터
   토큰 규칙(§1-5): 기존 --c1/--c2/--c3 를 그대로 쓰고 이름을 바꾸지 않는다.
   파생색은 전부 color-mix(). 외부 JS 0건 — 드롭다운·아코디언은 CSS만.
   ========================================================================== */

:root {
  --util-h: 34px;
  --surface-2: color-mix(in srgb, var(--c-bg) 55%, #fff);
  --hair: color-mix(in srgb, var(--c-border) 75%, transparent);
  --mobile-bar-h: 56px;
}

/* ── A-2 유틸리티 바 ── */
.util-bar {
  background: var(--c1-deep);
  color: color-mix(in srgb, #fff 88%, var(--c1));
  font-size: 0.76rem;
  line-height: 1;
}
.util-bar .container {
  min-height: var(--util-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.util-src { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.util-upd { font-weight: 600; color: #fff; }
.util-tool { color: #fff; font-weight: 600; white-space: nowrap; }
.util-tool:hover { text-decoration: underline; }

/* ── A-3 헤더 · 메가 드롭다운 ── */
.site-header .container { gap: 12px; }
.site-logo { gap: 10px; }
.logo-svg { display: block; height: 28px; width: auto; }
.site-tagline {
  font-size: 0.72rem; color: var(--c-text-hint); font-weight: 500;
  padding-left: 10px; border-left: 1px solid var(--hair); white-space: nowrap;
}
@media (max-width: 900px) { .site-tagline { display: none; } }

.nav-switch { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px;
  border: 0; background: none; color: var(--c-text); cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; }

.mega-nav { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.mega-top {
  display: flex; align-items: center; gap: 5px;
  padding: 0 12px; height: var(--header-h);
  font-size: 0.93rem; font-weight: 600; color: var(--c-text); white-space: nowrap;
}
.mega-top:hover, .mega-item:focus-within > .mega-top {
  color: var(--c1); text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--c1);
}

/* 패널 — hover/focus-within 만으로 연다 (JS 0) */
.mega-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-surface);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 12px 28px rgba(26,26,24,.10);
  padding: 20px 0 16px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 90;
}
.mega-item.has-panel:hover > .mega-panel,
.mega-item.has-panel:focus-within > .mega-panel {
  opacity: 1; visibility: visible; transform: none;
}
.mega-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 16px;
  display: grid; gap: 6px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  box-sizing: border-box;   /* padding 이 max-width 안쪽에 들어오게 — 넘침 방지 */
}
/* 시도 17개 패널: minmax(0,1fr) 로 트랙이 콘텐츠 폭에 밀리지 않게 고정한다.
   (1280px에서 우측으로 180px 넘치던 지점 — 실측 후 수정) */
.mega-panel-wide .mega-inner { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mega-panel { overflow: hidden; }
.mega-col { min-width: 0; }               /* 그리드 아이템 min-width:auto 함정 차단 */
.mega-col-2 { grid-column: span 2; }
.mega-head {
  display: block; font-size: 0.83rem; font-weight: 700; color: var(--c-text);
  padding: 4px 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--hair);
}
a.mega-head:hover { color: var(--c1); text-decoration: none; }
.mega-cnt { font-size: 0.72rem; font-weight: 500; color: var(--c-text-hint); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 0; }
.mega-col li a {
  display: block; padding: 3px 0; font-size: 0.82rem; color: var(--c-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mega-col li a:hover { color: var(--c1); text-decoration: none; }
.mega-all {
  display: block; max-width: var(--container); margin: 12px auto 0; padding: 0 16px;
  font-size: 0.82rem; font-weight: 600; color: var(--c1);
}

/* 인기 키워드 가로 스크롤 스트립 (모바일) */
.kw-strip { border-top: 1px solid var(--hair); background: var(--surface-2); }
.kw-inner {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.kw-inner::-webkit-scrollbar { display: none; }
.kw-pill {
  flex: 0 0 auto; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--c-surface); border: 1px solid var(--c-border);
  font-size: 0.78rem; color: var(--c-text-muted); white-space: nowrap;
}
.kw-pill:hover { text-decoration: none; border-color: var(--c1); color: var(--c1); }
@media (min-width: 960px) { .kw-strip { display: none; } }

/* ── 모바일 내비 (체크박스 아코디언) ── */
@media (max-width: 959px) {
  .site-header .container { position: relative; flex-wrap: wrap; }
  .site-nav {
    display: none; order: 3; width: 100%;
    border-top: 1px solid var(--hair);
    max-height: min(70vh, 520px); overflow-y: auto;
  }
  .nav-switch:checked ~ .site-nav { display: block; }
  .mega-nav { flex-direction: column; gap: 0; }
  .mega-top { height: 46px; padding: 0 2px; border-bottom: 1px solid var(--hair); }
  .mega-item.has-panel > .mega-top::after { content: '＋'; margin-left: auto; color: var(--c-text-hint); }
  /* 모바일에선 패널을 정적으로 펼친다 — hover 없는 환경 대응 */
  .mega-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 6px 0 10px; display: none;
  }
  .mega-item.has-panel:focus-within > .mega-panel { display: block; }
  .mega-inner, .mega-panel-wide .mega-inner { grid-template-columns: 1fr 1fr; padding: 0; }
  .mega-all { padding: 0; }
}
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .site-header .container { position: static; }
  .site-header { position: sticky; }
  .mega-item { position: static; }
}

/* ── 히어로 ── */
.hero {
  background:
    radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--c2) 16%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--c1-deep) 0%, var(--c1) 62%, color-mix(in srgb, var(--c1) 78%, var(--c2)) 100%);
  color: #fff;
}
/* 기존 .hero .container 규칙(연한 --c1-bg 카드)이 특정도 0,2,0 으로 이겨서
   흰 글씨가 연파랑 박스 위에 얹혀 거의 보이지 않았다(1280px 육안 실측).
   같은 특정도로 되돌린다. */
.hero .container.hero-inner {
  background: none; border-radius: 0;
  padding: 40px 16px 44px; text-align: center;
}
.hero-badge {
  display: inline-block; padding: 5px 13px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  font-size: 0.76rem; font-weight: 600; margin-bottom: 14px;
}
/* 아래 3개는 기존 규칙(.hero h1 / .hero .hero-sub / .hero-badge)을 이기도록
   선택자를 맞춘다 — 색을 되돌리지 않으면 흰 배경 위 흰 글씨가 된다. */
.hero .hero-inner h1 {
  font-size: 2rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 12px; color: #fff;
}
.hero .hero-inner .hero-sub {
  font-size: 0.97rem; line-height: 1.65; margin: 0 auto 22px; max-width: 40em;
  color: rgba(255,255,255,.92);
}
/* 배지는 작은 글씨(12.16px)라 AA 기준이 4.5:1 이다.
   흰색 반투명(.16)은 히어로 배경을 오히려 밝히므로 어두운 쪽으로 깐다(§3 실측).
   실효 규칙은 이 선택자다 — 위쪽 .hero-badge 는 특이도에서 진다.
   실측 결과 375px 6.37:1 / 1280px 6.45:1 로 기준을 넘는다. */
.hero .hero-inner .hero-badge {
  background: color-mix(in srgb, var(--c1-deep) 46%, transparent); color: #fff;
  border: 1px solid rgba(255,255,255,.30);
}
.hero-sub b { font-weight: 700; color: #fff; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: var(--radius-sm);
  font-size: 0.95rem; font-weight: 700; border: 0; cursor: pointer;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn-1 { background: #fff; color: var(--c1-deep); }
.btn-3 { background: var(--c3); color: #fff; }
@media (min-width: 700px) {
  .hero .container.hero-inner { padding: 60px 16px 64px; }
  .hero .hero-inner h1 { font-size: 2.5rem; }
  .hero .hero-inner .hero-sub { font-size: 1.05rem; }
}

/* ── ② 유가 등락 스트립 (높이 예약으로 CLS 0) ── */
.band-ticker { background: var(--c-surface); border-bottom: 1px solid var(--hair); }
/* 좁은 폭에서는 라벨을 위로 쌓는다 — 가로로 붙이면 항목 트랙이 105px로 눌려
   가격+등락이 뷰포트를 39px 넘긴다(375px 실측). 높이는 아래에서 예약. */
.ticker {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  min-height: 168px; padding: 12px 0;   /* 1열 4행 + 라벨 높이 예약 (CLS 0) */
}
@media (min-width: 460px) { .ticker { min-height: 116px; } }
.ticker-label {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 0.8rem; font-weight: 700; color: var(--c-text); white-space: nowrap;
}
.ticker-sub { font-size: 0.68rem; font-weight: 500; color: var(--c-text-hint); }
/* 375px에서 2열이면 셀 164px < 콘텐츠 195px 라 등락 숫자가 옆 칸을 침범한다(실측).
   좁은 폭에서는 1열로 두고 이름-가격-등락을 좌우로 벌린다. */
.ticker-items {
  display: grid; grid-template-columns: 1fr; gap: 6px 14px;
  flex: 1; min-width: 0;
}
.tk {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  justify-content: space-between;
}
.tk-price { margin-left: auto; }
@media (min-width: 460px) {
  .ticker-items { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; }
}
/* 넓은 폭에서는 space-between 이 항목 내부(이름↔가격)를 55px 벌리는데
   옆 항목까지의 간격은 14px 뿐이라, 등락값이 다음 연료명에 붙어 읽힌다
   ("휘발유 1,866.5 ▼0.1 경유" → ▼0.1이 경유 것으로 보임). 실측 후 수정:
   내부는 모아 붙이고 항목 사이를 벌려 근접성이 의미와 일치하게 한다. */
@media (min-width: 460px) {
  .ticker-items { column-gap: 34px; }
  .tk { justify-content: flex-start; }
  .tk-price { margin-left: 0; }
}
.tk-name { font-size: 0.78rem; color: var(--c-text-muted); white-space: nowrap; }
.tk-price { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-price i { font-size: 0.68rem; font-weight: 500; font-style: normal; color: var(--c-text-hint); margin-left: 2px; }
/* 등락은 색 + 화살표 + 숫자를 항상 함께 (색각 이상·흑백 출력 대응) */
.tk-diff { font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.diff-up { color: var(--danger); }
.diff-down { color: var(--c1); }
.diff-flat { color: var(--c-text-hint); }
@media (min-width: 760px) {
  /* 넓은 폭에서만 라벨을 좌측에 붙인다 */
  .ticker { flex-direction: row; align-items: center; gap: 14px; min-height: 76px; }
  .ticker-label { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ticker-items { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ── 섹션 공통 ── */
.section { padding: 42px 0; }
.section-alt { background: var(--surface-2); }
.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--c1) 72%, var(--c-text-hint));
  margin: 0 0 6px; text-transform: uppercase;
}
.sec-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 18px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sec-head .sec-title { margin-bottom: 18px; }
.sec-note { margin: -10px 0 16px; font-size: 0.85rem; color: var(--c-text-muted); }
.more { font-size: 0.85rem; font-weight: 600; color: var(--c1); white-space: nowrap; padding-bottom: 20px; }
@media (min-width: 700px) { .sec-title { font-size: 1.65rem; } .section { padding: 56px 0; } }

/* ── ③ 숫자 스트립 ── */
.num-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
}
.num-cell {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 16px 14px; text-align: center;
}
.num-cell b {
  display: block; font-size: 1.6rem; font-weight: 800; color: var(--c1);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15;
}
.num-cell span { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--c-text-muted); }
.num-caption { margin: 14px 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--c-text-muted); }
@media (min-width: 700px) {
  .num-strip { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .num-cell b { font-size: 1.95rem; }
}

/* ── ④ 빠른 찾기 pill ── */
.pill-label { margin: 18px 0 8px; font-size: 0.82rem; font-weight: 600; color: var(--c-text-muted); }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: var(--radius-pill);
  background: var(--c-surface); border: 1px solid var(--c-border);
  font-size: 0.82rem; color: var(--c-text-muted);
}
a.pill:hover { text-decoration: none; border-color: var(--c1); color: var(--c1); background: var(--c1-bg); }
.pill i { font-style: normal; font-size: 0.74rem; color: var(--c-text-hint); font-variant-numeric: tabular-nums; }
.pill-static { background: transparent; }
.tool-note { margin: 10px 0 0; font-size: 0.82rem; color: var(--c-text-muted); }

/* ── ⑤ 지역 그리드 ── */
.region-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.region-grid > * { min-width: 0; }
.region-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 14px 15px; min-width: 0;
}
.region-head { display: inline-block; font-size: 1rem; font-weight: 700; color: var(--c-text); }
a.region-head:hover { color: var(--c1); text-decoration: none; }
.region-meta { margin: 3px 0 9px; font-size: 0.78rem; color: var(--c-text-hint); }
.region-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.region-pills a {
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--hair);
  font-size: 0.78rem; color: var(--c-text-muted);
}
.region-pills a:hover { text-decoration: none; border-color: var(--c1); color: var(--c1); }
.region-pills .region-all { background: transparent; border-color: transparent; color: var(--c1); font-weight: 600; }
@media (min-width: 640px) { .region-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .region-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ── ⑥ 카테고리 카드 (축별 색 = 길찾기 신호) ── */
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cat-grid > * { min-width: 0; }
.cat-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-top: 3px solid var(--ax, var(--c1));
  border-radius: var(--radius); padding: 18px 16px; min-width: 0;
}
.cat-card.c1 { --ax: var(--c1); }
.cat-card.c2 { --ax: var(--c2); }
.cat-card.c3 { --ax: var(--c3); }
.cat-card.c4 { --ax: var(--c-text-muted); }
.cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ax) 12%, transparent); color: var(--ax);
  margin-bottom: 10px;
}
.cat-icon .icon { width: 22px; height: 22px; }
.cat-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.cat-card h3 a { color: var(--c-text); }
.cat-card h3 a:hover { color: var(--ax); text-decoration: none; }
.cat-card > p { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.6; color: var(--c-text-muted); }
.cat-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-pills a {
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ax) 9%, transparent);
  font-size: 0.78rem; color: var(--ax); font-weight: 500;
}
.cat-pills a:hover { text-decoration: none; background: color-mix(in srgb, var(--ax) 18%, transparent); }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ── ⑦ STEP ── */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 10px; counter-reset: s;
}
.steps > * { min-width: 0; }
.step {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 16px; min-width: 0;
}
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c1-bg); color: var(--c1-deep);
  font-size: 0.8rem; font-weight: 800; margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 5px; }
.step p { margin: 0; font-size: 0.83rem; line-height: 1.6; color: var(--c-text-muted); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ── ⑧ 출처 카드 ── */
.src-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.src-grid > * { min-width: 0; }
.src-card {
  display: block; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 15px 16px; min-width: 0;
}
.src-card:hover { text-decoration: none; border-color: var(--c1); }
.src-card b { display: block; font-size: 0.95rem; font-weight: 700; color: var(--c-text); margin-bottom: 4px; }
.src-card span { display: block; font-size: 0.81rem; color: var(--c-text-muted); line-height: 1.55; }
@media (min-width: 700px) { .src-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ── ⑨ WHY ── */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.why-grid > * { min-width: 0; }
/* ⑨는 축(주유소/충전소/계산기)에 속하지 않는 일반 신뢰 서술이다.
   --c2(충전소 초록)를 쓰면 축 색이 길찾기 신호가 아니라 장식이 되고,
   등락 파랑과도 같은 화면에서 의미가 흐려진다. 중립 회색으로 뺀다. */
.why {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-text-hint); border-radius: var(--radius);
  padding: 14px 15px; min-width: 0;
}
.why b { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 5px; }
.why p { margin: 0; font-size: 0.83rem; line-height: 1.6; color: var(--c-text-muted); }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ── ⑩ 매거진 카드 ── */
.mag-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mag-grid > * { min-width: 0; }
.mag-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); overflow: hidden; min-width: 0;
}
.mag-card > a { display: block; color: inherit; }
.mag-card > a:hover { text-decoration: none; }
/* 원본 썸네일이 16:9(1376×772, 실측 비율 1.79)다. 16:10 박스에 넣으면
   object-fit:cover 가 좌우를 잘라낸다 — 박스를 원본 비율에 맞춘다. */
.mag-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.mag-thumb img, .mag-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-thumb-fb {
  background: linear-gradient(135deg, var(--c1-bg) 0%, var(--c2-bg) 100%);
}
.mag-body { display: block; padding: 13px 14px 15px; }
.mag-cat {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--c1-bg); color: var(--c1-deep);
  font-size: 0.71rem; font-weight: 700; margin-bottom: 7px;
}
.mag-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--c-text); margin-bottom: 6px;
}
.mag-card > a:hover .mag-title { color: var(--c1); }
.mag-ex {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.82rem; line-height: 1.55; color: var(--c-text-muted); margin-bottom: 8px;
}
.mag-meta { display: block; font-size: 0.75rem; color: var(--c-text-hint); }
@media (min-width: 640px) { .mag-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .mag-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ── ⑪ 가이드 카드 ── */
.guide-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.guide-grid > * { min-width: 0; }
.guide-card {
  display: block; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 15px 16px; min-width: 0;
}
.guide-card:hover { text-decoration: none; border-color: var(--c1); }
.guide-card b { display: block; font-size: 0.95rem; font-weight: 700; color: var(--c-text); margin-bottom: 5px; }
.guide-card span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.81rem; line-height: 1.55; color: var(--c-text-muted);
}
@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .guide-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ── ⑫ 바로가기 ── */
.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.sc-grid > * { min-width: 0; }
.sc {
  display: block; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--c-surface); border: 1px solid var(--c-border);
  font-size: 0.84rem; color: var(--c-text-muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc:hover { text-decoration: none; border-color: var(--c1); color: var(--c1); }
@media (min-width: 700px) { .sc-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ── ⑬ FAQ (CSS only 아코디언) ── */
.faq { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  padding: 15px 44px 15px 16px; font-size: 0.92rem; font-weight: 600;
  cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '＋'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-hint); font-weight: 400;
}
.faq details[open] summary::after { content: '－'; }
.faq summary:hover { color: var(--c1); }
.faq-a { padding: 0 16px 16px; }
.faq-a p { margin: 0; font-size: 0.86rem; line-height: 1.7; color: var(--c-text-muted); }
.faq-a a { color: var(--c1); text-decoration: underline; text-underline-offset: 2px; }

/* ── A-5 메가 푸터 ── */
.mega-footer { background: var(--c1-deep); color: rgba(255,255,255,.82); padding: 38px 0 8px; }
.mf-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.mf-grid > * { min-width: 0; }
.mf-brand { margin-bottom: 10px; }
.mf-brand .logo-svg { height: 26px; }
.mf-desc { font-size: 0.84rem; line-height: 1.65; margin: 0 0 10px; }
.mf-src { font-size: 0.76rem; line-height: 1.6; color: rgba(255,255,255,.62); margin: 0 0 8px; }
.mf-upd { font-size: 0.78rem; margin: 0; color: rgba(255,255,255,.72); }
.mf-upd b { color: #fff; font-weight: 600; }
.mf-head {
  font-size: 0.85rem; font-weight: 700; color: #fff; margin: 0 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.16);
}
.mf-list { list-style: none; margin: 0; padding: 0; }
.mf-list li { margin: 0 0 6px; }
.mf-list a, .mf-sub-head, .mf-pills a {
  color: rgba(255,255,255,.78); font-size: 0.81rem;
}
.mf-list a:hover, .mf-pills a:hover, .mf-sub-head:hover { color: #fff; }
.mf-sub { margin-bottom: 10px; }
.mf-sub-head { display: block; font-weight: 600; color: #fff; margin-bottom: 4px; font-size: 0.83rem; }
.mf-pills { display: flex; flex-wrap: wrap; gap: 4px 9px; }
.mf-pills a { font-size: 0.78rem; }
@media (min-width: 640px) { .mf-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) {
  .mf-grid { grid-template-columns: 1.6fr 1.2fr 1fr 1.2fr 1.2fr 1fr; gap: 22px 20px; }
  .mf-about { grid-row: span 1; }
}

.site-footer.is-bar { background: color-mix(in srgb, var(--c1-deep) 84%, #000); border-top: 1px solid rgba(255,255,255,.1); }
.site-footer.is-bar .footer-copy { color: rgba(255,255,255,.7); }
.footer-disc { display: block; font-size: 0.75rem; color: rgba(255,255,255,.55); margin-top: 3px; }
.site-footer:not(.is-bar) .footer-disc { color: var(--c-text-hint); }

/* 디자인 점검 2026-09-09: 내비게이션 링크의 터치 영역을 카드 규격 44px에 맞춘다. */
.site-logo{min-height:44px}
.rl-toc a{display:flex;align-items:center;min-height:44px}
.footer-menu a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}

/* ── A-6 모바일 하단 고정 바 (높이 예약으로 CLS 0) ── */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; gap: 8px; padding: 8px 12px;
  height: var(--mobile-bar-h);
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  box-shadow: 0 -2px 10px rgba(26,26,24,.07);
}
.mb-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-btn:hover { text-decoration: none; }
.mb-1 { background: var(--c1); color: #fff; }
.mb-3 { background: var(--c3); color: #fff; }
/* 하단 바에 본문이 가리지 않도록 패딩 예약 */
body.home { padding-bottom: var(--mobile-bar-h); }
@media (min-width: 960px) {
  .mobile-bar { display: none; }
  body.home { padding-bottom: 0; }
}

/* ==========================================================================
   10. 회귀 방지 — 표 가로 넘침 (§B-0-1 / §B-3)
   ========================================================================== */

/* (1) 주유소 상세·지역 허브의 데이터 표: 375px에서 래퍼 스크롤이 아니라 열 재배치.
       래퍼 안 스크롤도 가로 스크롤이다(§B-3). 좁은 폭에서 표를 카드형으로 쌓는다. */
@media (max-width: 560px) {
  .data-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .data-table { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tbody, .data-table tr, .data-table td, .data-table th { display: block; width: auto; }
  .data-table tr {
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    padding: 9px 11px; margin-bottom: 8px; background: var(--c-surface);
  }
  .data-table tr:last-child { margin-bottom: 0; }
  .data-table td, .data-table th {
    border: 0; padding: 2px 0; text-align: left;
    overflow-wrap: anywhere; word-break: break-word;
  }
  /* thead 를 숨기면 열 의미가 사라진다("1,808 / 1,829"가 무슨 연료인지 알 수 없음).
     data-label 을 셀 앞에 붙여 헤더 역할을 대신한다. */
  .data-table td[data-label]::before {
    content: attr(data-label) " ";
    display: inline-block; min-width: 5.2em;
    font-size: 0.78rem; font-weight: 500; color: var(--c-text-hint);
  }
  .data-table td.num { text-align: left; font-weight: 600; }
  .data-table tr.is-lowest { border-color: var(--c1); background: var(--c1-bg); }
}

/* (2) 가독성 레이어 표 래핑 JS 는 body.single 에서만 돈다 —
       page 유형(허브·정적)은 적용 밖이라 375px에서 표가 넘친다.
       JS 스코프를 건드리지 않고 CSS로만 차단한다. */
.entry-content table { max-width: 100%; }
@media (max-width: 560px) {
  .entry-content table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .entry-content table th, .entry-content table td { overflow-wrap: anywhere; }
}

/* (3) 새 그리드에도 min-width:0 을 명시한다 — 같은 함정을 다시 밟지 않는다(§B-0-1) */
.region-grid > *, .cat-grid > *, .mag-grid > *, .guide-grid > *,
.sc-grid > *, .steps > *, .src-grid > *, .why-grid > *, .mf-grid > *,
.num-strip > *, .ticker-items > * { min-width: 0; }

/* ==========================================================================
   11. 이미지 슬롯 (벤치마크 정보구조: 카테고리마다 그림 1장)
   원칙: 래퍼가 aspect-ratio 로 높이를 예약한다 → 이미지 도착 전(폴백)/후 동일 높이 = CLS 0.
   폴백은 주색 그라데이션 + 내장 SVG 심볼. 40px 안팎 아이콘 슬롯은 SVG 유지(래스터화 금지).
   히어로 외 전부 lazy.
   ========================================================================== */

/* ── ⑥ 카테고리 카드: 40px 아이콘 → 16:10 이미지 영역으로 승격 ── */
.cat-media {
  display: block; position: relative;
  aspect-ratio: 16 / 10;          /* 높이 예약 — 도착 전후 불변 */
  margin: -18px -16px 14px;       /* 카드 패딩 밖으로 빼 상단을 꽉 채운다 */
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; background: var(--surface-2);
}
.cat-img, .slot-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* 폴백: 축 색 그라데이션 (이미지 미도착 상태로 완주) */
.slot-fb, .cat-media .slot-fb {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(120% 130% at 78% 8%, color-mix(in srgb, var(--ax, var(--c1)) 26%, transparent) 0%, transparent 58%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--ax, var(--c1)) 14%, #fff) 0%,
      color-mix(in srgb, var(--ax, var(--c1)) 30%, #fff) 100%);
}
/* 아이콘은 이미지 위 배지로 유지 (SVG 그대로) */
.cat-media .cat-icon {
  position: absolute; left: 12px; bottom: 12px; margin: 0;
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  box-shadow: 0 1px 3px rgba(26,26,24,.16);
  backdrop-filter: saturate(1.4);
}

/* ── ② 배너 좌측 아트 ── */
.ticker-art {
  display: none;                   /* 375px 는 세로 공간이 귀해 숨긴다 */
  flex: 0 0 auto; width: 76px; aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2);
}
.ticker-art-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ticker-art-fb {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--c1-bg) 0%, color-mix(in srgb, var(--c1) 34%, #fff) 100%);
}
@media (min-width: 760px) { .ticker-art { display: block; } }

/* ── ⑤·⑨ 섹션 헤딩 옆 아트 ── */
/* 제목과 아트가 1080px 폭 양끝으로 갈라지면 590px 공백이 생겨
   아트가 섹션에 속하지 않는 것처럼 보인다(1280px 육안 실측).
   아트를 제목 쪽으로 당겨 하나의 헤딩 블록으로 읽히게 한다. */
.sec-head-art { align-items: center; margin-bottom: 18px; justify-content: flex-start; gap: 28px; }
.sec-head-art > div { flex: 0 1 auto; }
.sec-head-art .sec-title { margin-bottom: 0; }
.sec-art {
  display: block; flex: 0 0 auto; width: 128px; aspect-ratio: 16 / 10;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
}
.sec-art-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sec-art-fb {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(110% 120% at 80% 10%, color-mix(in srgb, var(--c2) 22%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--c1-bg) 0%, color-mix(in srgb, var(--c1) 28%, #fff) 100%);
}
/* ⑤와 ⑨가 같은 폴백이면 두 장이 복제처럼 보인다 — 방향을 어긋나게 둔다 */
.why-art-fb {
  background:
    radial-gradient(110% 120% at 18% 88%, color-mix(in srgb, var(--c3) 20%, transparent) 0%, transparent 62%),
    linear-gradient(215deg, var(--c1-bg) 0%, color-mix(in srgb, var(--c1) 22%, #fff) 100%);
}
@media (min-width: 700px) { .sec-art { width: 224px; } }

/* ── ① 히어로 배경 이미지 (<picture> 분기, LCP 대상) ──
   그라데이션 위에 이미지를 깔고 어두운 오버레이로 흰 글씨 대비를 확보한다.
   이미지가 없으면 이 블록은 렌더되지 않고 기존 그라데이션만 남는다(폴백 유지). */
.hero { position: relative; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 대비 확보용 오버레이 — 원본이 이미 어둡지만 지역·수치 텍스트까지 AA 를 보장한다 */
/* 대비 확보용 스크림 — 실측으로 정한 값이다(§3).
   교체 전 히어로는 어두운 야경이라 46% 중간대로 충분했지만,
   신규 히어로(042)는 일몰 하늘이 밝아 같은 그라데이션에서 h1 이 2.55:1 까지 떨어졌다
   (텍스트 visibility:hidden 후 그 자리 배경 샘플링, 375px 실측).
   최악 배경 rgb(138,165,192) 기준으로 중간대를 68% 로 올리면 6.28:1 이 된다 —
   AA 기준(큰글씨 3:1 / 본문 4.5:1)을 양쪽 다 여유 있게 넘긴다. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c1-deep) 74%, transparent) 0%,
    color-mix(in srgb, var(--c1-deep) 68%, transparent) 46%,
    color-mix(in srgb, var(--c1-deep) 80%, transparent) 100%);
}

/* ==========================================================================
   14. 버튼 위계 3단계 (§2-4) + 내 주변 최저가·지도 (§2-1 / §2-2)
   ========================================================================== */

/* ── 위계: 채운(주요) > 테두리(보조) > 밑줄 텍스트(참고) ──
   세 단계는 크기·여백·대비가 확실히 달라야 한다. 블록당 채운 버튼은 1개가 원칙. */
.btn-primary {
  background: var(--c1); color: #fff; border: 2px solid var(--c1);
  min-height: 48px; padding: 0 24px; font-weight: 700; font-size: 1rem;
}
.btn-primary:hover { background: var(--c1-deep); border-color: var(--c1-deep); color: #fff; }
.btn-lg { min-height: 54px; padding: 0 32px; font-size: 1.06rem; }

.btn-outline {
  background: transparent; color: var(--c1-deep); border: 2px solid var(--c1);
  min-height: 44px; padding: 0 18px; font-weight: 600; font-size: 0.95rem;
}
.btn-outline:hover { background: var(--c1-bg); color: var(--c1-deep); }
.btn-outline[disabled] { opacity: .5; cursor: not-allowed; }

/* 축별 색 — 주유소 파랑 / 충전소 초록 / 계산기·요금 주황 (하드코딩 hex 0건) */
.btn-axis-ev { background: var(--c2); border-color: var(--c2); color: #fff; }
.btn-axis-ev:hover { background: var(--c2-deep); border-color: var(--c2-deep); }
.btn-axis-calc { background: var(--c3); border-color: var(--c3); color: #fff; }
.btn-axis-calc:hover { background: var(--c3-deep); border-color: var(--c3-deep); }

/* 3단계: 본문 내 참고 링크 */
.link-ref { color: var(--c1-deep); text-decoration: underline; text-underline-offset: 2px; font-weight: 400; }

/* 포커스 링은 제거하지 않는다(키보드 접근성) */
.btn:focus-visible, .chip:focus-visible, .pill:focus-visible, a:focus-visible {
  outline: 3px solid var(--c1); outline-offset: 2px;
}

/* ── 연료 토글 칩 — 터치 타깃 44px 이상 ── */
.nb-tools {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.fuel-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center;
  border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  background: var(--c-surface); color: var(--c-text); font-size: 0.94rem;
  font-weight: 500; cursor: pointer;
}
.chip:hover { border-color: var(--c1); color: var(--c1-deep); background: var(--c1-bg); }
.chip.is-on { background: var(--c1); border-color: var(--c1); color: #fff; font-weight: 700; }

/* ── 최저가 목록 ── */
.nb-criteria { margin: 0 0 4px; font-size: 0.9rem; color: var(--c-text-muted); font-weight: 600; }
.nb-status { margin: 0 0 12px; font-size: 0.92rem; color: var(--c-text-muted); }
.nb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* 목록 높이는 예약하지 않는다.
   "누르는 순간 min-height 를 건다"를 먼저 시도했으나 CLS 가 그대로 0.145 였다(실측):
   예약을 거는 그 시점 자체가 레이아웃 변화라 시프트로 계산되고, 데이터가 3.5초 뒤에
   오면 클릭의 hadRecentInput 유예(≈500ms)를 이미 벗어나 있기 때문이다.
   해법은 자리를 비워 두는 게 아니라 데이터를 미리 받아 두는 것이다(nearby.js 의 warm()).
   클릭 시점에 데이터가 있으면 렌더가 유예 안에서 끝나 시프트가 계상되지 않는다. */
.nb-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 12px 14px;
}
.nb-rank {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c1-bg); color: var(--c1-deep); font-size: 0.82rem; font-weight: 700;
}
.nb-body { flex: 1 1 auto; min-width: 0; }
.nb-name { margin: 0; font-weight: 600; font-size: 0.98rem; }
.nb-meta { margin: 2px 0 0; font-size: 0.84rem; color: var(--c-text-muted); }
.nb-dist { font-variant-numeric: tabular-nums; }
.nb-price { flex: 0 0 auto; text-align: right; }
.nb-price b { font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nb-price i { font-style: normal; font-size: 0.8rem; color: var(--c-text-muted); margin-left: 2px; }
.nb-price .price-age { display: block; font-size: 0.76rem; }
.nb-fallback { margin-top: 14px; }
.nb-note { margin: 14px 0 0; font-size: 0.84rem; line-height: 1.7; color: var(--c-text-muted); }

/* ── 지도 — 높이를 미리 예약해 SDK 로드 전후 CLS 0 ── */
.map-canvas {
  position: relative; width: 100%; height: 380px;
  background: var(--c1-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden;
}
.map-idle {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 20px; font-size: 0.92rem; color: var(--c-text-muted);
}
.map-status { margin: 8px 0 0; font-size: 0.88rem; color: var(--c-text-muted); }
.map-list-head { margin: 20px 0 8px; font-size: 1rem; }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.map-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); text-decoration: none; color: var(--c-text);
}
.map-list a:hover { border-color: var(--c1); background: var(--c1-bg); color: var(--c1-deep); }
.map-list-cnt { font-size: 0.84rem; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
  .map-canvas { height: 460px; }
  .map-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) { .map-list { grid-template-columns: repeat(3, 1fr); } }

/* ── 지도 마커 — 색만으로 가격대를 전달하지 않고 가격 숫자를 함께 띄운다 ── */
.mk {
  display: inline-block; padding: 3px 7px; border-radius: var(--radius-pill);
  font-size: 0.76rem; font-weight: 700; color: #fff; white-space: nowrap;
  border: 2px solid #fff; box-shadow: var(--shadow); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.mk-t0 { background: var(--ok); }        /* 낮은 가격대 */
.mk-t1 { background: var(--warn); }      /* 중간 */
.mk-t2 { background: var(--danger); }    /* 높은 가격대 */
.iw { padding: 10px 12px; max-width: 240px; font-size: 0.88rem; }
.iw-name { margin: 0 0 2px; font-weight: 700; }
.iw-meta { margin: 0 0 6px; font-size: 0.8rem; color: var(--c-text-muted); }
.iw-price { margin: 0 0 8px; }
.iw-age { font-size: 0.76rem; color: var(--c-text-muted); }
.iw-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.iw-links a { font-size: 0.82rem; text-decoration: underline; }

/* 인라인 아이콘 (이모지 대체) — 장식용이므로 aria-hidden, 색은 상속 */
.icon-inline {
  width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 5px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 지도 범례 (§2-2) — 색 옆에 실제 가격 구간을 적어 색만으로 전달하지 않는다 */
.map-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 10px 0 0; font-size: 0.82rem; color: var(--c-text-muted);
}
.map-legend[hidden] { display: none; }
.lg-item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.lg-sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }
.lg-t0 { background: var(--ok); }
.lg-t1 { background: var(--warn); }
.lg-t2 { background: var(--danger); }

/* 인포윈도우가 모바일에서 지도를 다 가리지 않게 폭·여백을 줄인다(§2-2 모바일 우선).
   실측(390px): 기본 폭이 지도 가로의 70%를 덮어 주변 마커가 안 보였다. */
.iw { max-width: 210px; padding: 9px 11px; }
.iw-name { font-size: 0.9rem; line-height: 1.35; }
.iw-links { gap: 6px 10px; }
@media (max-width: 480px) {
  .iw { max-width: 172px; font-size: 0.8rem; padding: 8px 10px; }
  .iw-name { font-size: 0.84rem; }
  .iw-meta, .iw-age { font-size: 0.72rem; }
  .iw-links a { font-size: 0.76rem; }
}

/* ==========================================================================
   ⑦ 연료별 · 충전 방식 격자 (이미지 슬롯 신설, 20260814)
   축 색은 기존 체계를 그대로 쓴다 — 이미지를 얹어도 주유소 파랑·충전 초록을 덮지 않는다(§1).
   .tile-art 가 aspect-ratio 로 높이를 예약하므로 이미지 도착 전후 CLS 0.
   ========================================================================== */
.eyebrow-sub { margin-top: 34px; }
.sec-lead { margin: -10px 0 18px; font-size: 0.88rem; color: var(--c-text-muted); }

/* 375px 에서 2열로 깔면 아트 92px + 여백을 빼고 남는 폭이 모자라
   "1,863.3원/L" 이 "1,863." 에서 잘린다(실측). 좁은 화면은 1열로 간다.
   숫자가 잘리면 값이 틀려 보이므로 레이아웃보다 우선한다. */
.tile-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .tile-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
.tile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius);
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.tile:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--ax, var(--c1)) 42%, var(--c-border));
  box-shadow: 0 2px 8px rgba(26,26,24,.08);
}
/* 축 색 — 연료 격자는 주유소 파랑, 충전 격자는 충전 초록 */
.tile-grid-fuel { --ax: var(--c1); }
.tile-grid-chg  { --ax: var(--c2); }

/* 높이 예약: 정사각 아트. 실측 슬롯 폭 92px(375) / 116px(1280) */
.tile-art {
  display: block; flex: 0 0 auto;
  width: 92px; aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden; background: var(--surface-2);
}
.tile-art-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* 폴백 — 이미지 미도착 상태로도 완주한다 */
.tile-art-fb {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(120% 130% at 78% 8%, color-mix(in srgb, var(--ax, var(--c1)) 26%, transparent) 0%, transparent 58%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--ax, var(--c1)) 14%, #fff) 0%,
      color-mix(in srgb, var(--ax, var(--c1)) 30%, #fff) 100%);
}
/* min-width:0 만으로는 숫자가 잘린다 — 줄바꿈을 허용해 값이 항상 온전히 보이게 한다 */
.tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tile-num, .tile-label { overflow-wrap: anywhere; }
.tile-label { font-size: 0.95rem; font-weight: 700; }
/* 숫자에는 단위를 항상 붙인다 — 단위 없는 숫자 금지(§5 G-5) */
.tile-num {
  font-size: 1.15rem; font-weight: 700; color: var(--ax, var(--c1));
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.tile-num i { font-style: normal; font-size: 0.78rem; font-weight: 600; margin-left: 2px; color: var(--c-text-muted); }
.tile-note { font-size: 0.76rem; color: var(--c-text-muted); }

@media (min-width: 700px) {
  .tile-art { width: 116px; }
  .tile { padding: 14px; gap: 14px; }
}

/* ==========================================================================
   자동광고 CLS 대비 (§4, 20260814)
   ca-pub-9411902782207288 자동광고는 main 직계뿐 아니라 .sec-head·.wrap·카드 내부 등
   콘텐츠 안쪽 여러 곳에 주입되고 채움이 비결정적이다.
   같은 계열 사이트에서 스니펫 한 줄만으로 375px 홈 CLS 가 0.7256 까지 간 전례가 있다.

   방식 비교 결과 (d) 래퍼 :has() 예약만이 겹침 0 + CLS 0 이었다:
   - filled 인 컨테이너를 가진 래퍼에만 높이를 예약한다.
   - unfilled·dismissed 는 레이아웃에서 제외해 빈 공간을 남기지 않는다.
   - body 에 직접 예약하지 않는다 — WP 코어 global-styles-inline-css 의
     body{padding:0} 이 덮어쓴다.
   광고 코드 자체는 한 글자도 바꾸지 않는다.
   ========================================================================== */

/* 삽입분은 자체 레이아웃에 가둔다 — 바깥 형제 요소로 리플로우가 번지지 않게 */
ins.adsbygoogle { contain: layout; display: block; }

/* 채워진 광고를 품은 래퍼에만 높이 예약 */
.section:has(> .container > ins.adsbygoogle[data-ad-status="filled"]),
.container:has(> ins.adsbygoogle[data-ad-status="filled"]),
.sec-head:has(ins.adsbygoogle[data-ad-status="filled"]),
.cat-card:has(ins.adsbygoogle[data-ad-status="filled"]),
.mag-card:has(ins.adsbygoogle[data-ad-status="filled"]),
.tile:has(ins.adsbygoogle[data-ad-status="filled"]) {
  min-height: var(--ad-h, 280px);
}

/* 채워지지 않은 지면은 레이아웃에서 뺀다 — 빈 칸이 남으면 그 자체가 시프트원이다 */
ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle[data-ad-status="dismissed"] {
  display: none !important;
}

/* ==========================================================================
   라운드 2026-09-05 — DESIGN-ID.md ③④: 최소 글자 13px, 터치 타깃 44px, 영문 오버라인 제거 후 간격 보존
   ========================================================================== */
.sec-title-sub { margin-top: 34px; }
.pill { min-height: 44px; padding: 10px 14px; font-size: 0.8125rem; }
.pill i, .tk-name, .tk-diff, .tk-price i, .ticker-sub, .region-meta, .mag-meta, .mag-cat,
.price-item .fuel-unit, .badge, .price-age, .nb-price .price-age, .mega-cnt, .site-tagline,
.src-card span, .guide-card span, .mf-src, .mf-upd, .mf-list a, .mf-sub-head, .mf-pills a, .footer-disc,
.iw-age, .iw-meta, .iw-links a, .mk, .tile-num i, .tile-note { font-size: 0.8125rem; }
@media (max-width: 639px) { .iw-meta, .iw-age, .iw-links a { font-size: 0.8125rem; } }
.kw-pill, .data-table td[data-label]::before, .hero .hero-inner .hero-badge, .hero-badge, .ticker-label,
.util-src, .util-upd, .util-tool { font-size: 0.8125rem; }