/**
 * station-directory.css
 * 검사소 디렉토리 전용 컴포넌트 스타일. 설계문서 STEP 2(디자인 토큰)·5(모바일 UX) 구현체.
 * 베이스 테마(GeneratePress/Kadence/Blocksy 등, STEP 1)의 전역 스타일 위에 얹어서 사용.
 * 테마 style.css 끝에 이 파일 내용을 append 하거나, 별도 enqueue 할 것.
 */

/* ============================================================
   디자인 토큰 (설계문서 STEP 2 원본 + 델타)
   ============================================================ */
/* 팔레트 근거: 개선 설계문서 §8.1.
   ink/navy는 어두운 배경(마감 CTA·히어로 오버레이)용, cyan은 도로 라인·강조선,
   amber는 "방문 전 확인" 계열 주의 문구, red는 실제 오류·경고에만 쓴다. */
:root {
  --ink: #0B1220;
  --navy: #111D33;
  --cyan: #82DFFF;

  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F7FA;
  --text-primary: #111827;
  --text-muted: #677386;
  --accent: #1F75E8;
  --accent-hover: #155FC8;
  --border: #DDE4EE;
  --success: #17936A;
  --warning: #F1AE35;
  --danger: #D94848;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 4px 20px rgba(11,18,32,0.06);
  --shadow-hover: 0 14px 38px rgba(11,18,32,0.12);

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --measure: 760px;   /* 글 본문 폭 (§8.2) */

  --map-marker-public: #1F75E8;   /* TS 직영 */
  --map-marker-private: #17936A;  /* 민간 지정정비 */
  --map-marker-featured: #F1AE35; /* 제휴 리스팅, STEP 14 */
  --filter-chip-radius: 999px;
  --card-min-touch: 48px;
}

[data-theme="dark"] {
  --bg-primary: #0B1220;
  --bg-secondary: #131C2E;
  --text-primary: #EEF2F8;
  --text-muted: #98A4B8;
  --accent: #5FA3F5;
  --accent-hover: #7DB6F8;
  --border: #27324A;
  --shadow-soft: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-hover: 0 14px 38px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0B1220;
    --bg-secondary: #131C2E;
    --text-primary: #EEF2F8;
    --text-muted: #98A4B8;
    --accent: #5FA3F5;
    --accent-hover: #7DB6F8;
    --border: #27324A;
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-hover: 0 14px 38px rgba(0,0,0,0.55);
  }
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* §9.5 — reveal/count-up은 즉시 완료 상태로 표시한다(JS 관찰을 기다리지 않음) */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   공통: breadcrumb
   ============================================================ */
.breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  margin: 16px 0;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* ============================================================
   검사소 상세 (single-station.php)
   ============================================================ */
.station-detail header { margin-bottom: 24px; }
.station-detail h1 { font-size: 28px; margin: 8px 0 0; }

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--filter-chip-radius);
  font-size: 12px;
  font-weight: 600;
}
.badge--ts-direct { background: color-mix(in srgb, var(--map-marker-public) 15%, transparent); color: var(--map-marker-public); }
.badge--private-designated { background: color-mix(in srgb, var(--map-marker-private) 15%, transparent); color: var(--map-marker-private); }

.station-info-panel {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.station-info-panel dl { display: grid; grid-template-columns: 120px 1fr; gap: 12px 16px; margin: 0; }
.station-info-panel dt { color: var(--text-muted); font-size: 14px; }
.station-info-panel dd { margin: 0; font-size: 16px; }
.station-info-panel a { color: var(--accent); text-decoration: none; }
.muted { color: var(--text-muted); font-size: 13px; }

.service-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.service-badge {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--filter-chip-radius);
  padding: 4px 10px;
  font-size: 12px;
}

.station-map-section { margin-bottom: 24px; }
.station-map {
  width: 100%;
  height: 360px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
/* 렌더 전/실패 상태에서는 빈 박스가 자리를 차지하지 않는다 */
.station-map.is-pending { display: none; }
.station-map-fallback {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 14px;
}

.footer-data-date { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }
.btn-directions {
  display: inline-block;
  margin-top: 12px;
  min-height: var(--card-min-touch);
  line-height: var(--card-min-touch);
  padding: 0 20px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
}
.btn-directions:hover { background: var(--accent-hover); }

/* STEP 11 — EEAT 블록 */
.station-eeat {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin: 24px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.data-source-citation { margin: 0 0 8px; }
.verification-badge {
  display: inline-block;
  background: var(--bg-secondary);
  border-radius: var(--filter-chip-radius);
  padding: 2px 10px;
  margin-bottom: 12px;
}
.btn-report-issue {
  display: inline-block;
  min-height: var(--card-min-touch);
  line-height: calc(var(--card-min-touch) - 2px);
  padding: 0 16px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 12px;
}
.btn-report-issue:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.data-accuracy-notice { line-height: 1.6; }
.data-accuracy-notice a { color: var(--accent); }

.related-guides h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 8px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.nearby-stations ul, .related-guides ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nearby-stations li a, .related-guides li a {
  display: inline-block;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
}
.nearby-stations li a:hover, .related-guides li a:hover { box-shadow: var(--shadow-soft); }

/* ============================================================
   지역 허브/클러스터 (taxonomy-region.php)
   ============================================================ */
.region-hub-header { text-align: center; padding: 48px 16px; }
.region-hub-header h1 { font-size: 32px; margin-bottom: 8px; }
.region-hub-header p { color: var(--text-muted); margin-bottom: 20px; }

.btn-near-me {
  display: inline-block;
  min-height: var(--card-min-touch);
  line-height: var(--card-min-touch);
  padding: 0 24px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--filter-chip-radius);
  text-decoration: none;
  font-weight: 600;
}
.btn-near-me:hover { background: var(--accent-hover); }

.sigungu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.sigungu-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  min-height: var(--card-min-touch);
  transition: box-shadow .15s ease, transform .15s ease;
}
.sigungu-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.sigungu-name { font-weight: 600; }
.sigungu-count { color: var(--text-muted); font-size: 13px; }

.representative-stations ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.representative-stations li a {
  display: inline-block;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
}
.representative-stations li a:hover { box-shadow: var(--shadow-soft); }

.station-list-controls { margin: 16px 0; }
.station-search-input {
  width: 100%;
  min-height: var(--card-min-touch);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 16px;       /* 모바일 자동 확대 방지 */
  background: var(--bg-primary);
  color: var(--text-primary);
  box-sizing: border-box;
  margin-bottom: 10px;
}

.filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;      /* 모바일에서 줄바꿈 대신 가로 스크롤 (STEP 5 델타) */
  padding-bottom: 4px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}
.filter-chips button {
  flex: 0 0 auto;
  min-height: var(--card-min-touch);
  padding: 0 16px;
  border-radius: var(--filter-chip-radius);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-chips button.is-active,
.filter-chips button:hover { border-color: var(--accent); color: var(--accent); }

.station-list { list-style: none; padding: 0; margin: 16px 0; }
.station-list-item {
  border-bottom: 1px solid var(--border);
  padding: 14px 4px;
}
.station-list-item a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text-primary); }
.station-list-item strong { font-size: 16px; }

.station-list-empty { color: var(--text-muted); padding: 32px 4px; text-align: center; }

/* WordPress 기본 paginate_links() 마크업(.page-numbers) 대응 */
.page-numbers {
  display: inline-flex;
  min-width: var(--card-min-touch);
  min-height: var(--card-min-touch);
  align-items: center;
  justify-content: center;
  margin: 2px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
}
.page-numbers.current { background: var(--accent); color: #fff; }

/* ============================================================
   정보 수정 요청 폼
   ============================================================ */
.correction-request-form { max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.correction-request-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-muted); }
.correction-request-form input,
.correction-request-form select,
.correction-request-form textarea {
  min-height: 44px;      /* STEP 5 폼 필드 기준 */
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 16px;       /* 모바일 자동 확대 방지 */
  background: var(--bg-primary);
  color: var(--text-primary);
}
.correction-request-form textarea { min-height: 88px; resize: vertical; }
.correction-request-form button[type="submit"] {
  min-height: var(--card-min-touch);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
}
.correction-request-form button[type="submit"]:hover { background: var(--accent-hover); }
.form-status { font-size: 14px; color: var(--text-muted); min-height: 20px; }

/* ============================================================
   반응형 (STEP 5)
   ============================================================ */
@media (max-width: 767px) {
  .station-info-panel dl { grid-template-columns: 1fr; }
  .region-hub-header { padding: 32px 16px; }
  body, .station-detail, .station-info-panel dd { font-size: 16px; }
}

@media (min-width: 768px) {
  .station-map { height: 420px; }
}

/* ============================================================
   가이드 글 SEO 강화 — 목차 / FAQ / 포인트강조 / 인용구 / 표스크롤 / 관련글
   (사이트 전체 게시글 SEO 개선 작업 — geomsazone-effervescent-coral 플랜)
   ============================================================ */

/* 목차(TOC) */
.entry-content .toc-box {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 28px 0;
}
.entry-content .toc-box .toc-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--text-primary);
}
.entry-content .toc-box ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.entry-content .toc-box li { font-size: 14px; }
.entry-content .toc-box a {
  color: var(--text-primary);
  text-decoration: none;
}
.entry-content .toc-box a:hover { color: var(--accent); text-decoration: underline; }

/* FAQ 아코디언 — 가이드 글(.entry-content) + 검사소/카센터 상세(.detail-faq) 공용 */
.entry-content .faq-list, .detail-faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 28px;
}
.entry-content .faq-item, .detail-faq .faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 16px;
  background: var(--bg-primary);
}
.entry-content .faq-item[open], .detail-faq .faq-item[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.entry-content .faq-q, .detail-faq .faq-q {
  cursor: pointer;
  list-style: none;
  padding: 14px 28px 14px 0;
  font-weight: 600;
  font-size: 15px;
  position: relative;
}
.entry-content .faq-q::-webkit-details-marker, .detail-faq .faq-q::-webkit-details-marker { display: none; }
.entry-content .faq-q::after, .detail-faq .faq-q::after {
  content: "+";
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: var(--accent);
}
.entry-content .faq-item[open] .faq-q::after, .detail-faq .faq-item[open] .faq-q::after { content: "–"; }
.entry-content .faq-a, .detail-faq .faq-a { padding: 0 0 16px; color: var(--text-muted); }
.entry-content .faq-a p, .detail-faq .faq-a p { margin: 0; }
.detail-faq { margin: 24px 0; }
.detail-faq h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* 포인트 강조 (파스텔 배경 / 굵게+컬러) */
.entry-content mark.pt-bg {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text-primary);
  padding: 0 5px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.entry-content mark.pt-bg-mint {
  background: color-mix(in srgb, var(--success) 20%, transparent);
}
.entry-content mark.pt-bg-warn {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.entry-content strong.pt-strong { color: var(--accent); font-weight: 700; }
.entry-content strong.pt-strong-danger { color: var(--danger); font-weight: 700; }

/* 인용구 */
.entry-content blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  border-left: 4px solid var(--accent);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-muted);
  font-size: 15px;
}
.entry-content blockquote p { margin: 0; }
.entry-content blockquote p + p { margin-top: 8px; }

/* 표 — 모바일 가로 스크롤 컨테이너 */
.entry-content .table-wrap {
  overflow-x: auto;
  margin: 20px 0;
  -webkit-overflow-scrolling: touch;
}
.entry-content .table-wrap table { margin: 0; }

/* 같이보면 좋은 글 */
.related-posts {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 0 20px;
}
.related-posts h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.related-post-card {
  display: block;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  text-decoration: none;
  color: var(--text-primary);
}
.related-post-card:hover { box-shadow: var(--shadow-hover); color: var(--accent); }
.related-post-card h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.4; }
.related-post-card span { font-size: 13px; color: var(--text-muted); }