/*
Theme Name: joeunmap
Theme URI: https://joeunmap.com
Description: 좋은맵 — 전국 병원·약국 찾기 데이터 서비스 커스텀 테마. 클래식 테마, 모바일 퍼스트, 시스템 폰트.
Author: joeunmap
Version: 1.0.0
Requires PHP: 8.3
Text Domain: joeunmap
*/

/* ==========================================================================
   1. 디자인 토큰 (CSS 변수)
   ========================================================================== */
:root {
  /* 색상 — 의료 서비스 신뢰 톤 */
  --c-primary: #0b6e6e;        /* 청록 — 주 브랜드 */
  --c-primary-dark: #085353;
  --c-primary-light: #e6f4f4;
  --c-accent: #d9480f;         /* 주황 — 전화/긴급 행동 */
  --c-accent-light: #fff0e6;
  --c-text: #1f2937;
  --c-text-sub: #556070;
  --c-border: #dde3ea;
  --c-bg: #ffffff;
  --c-bg-soft: #f4f7f9;
  --c-warn-bg: #fff8e6;
  --c-warn-border: #e8c96a;
  --c-danger: #b42318;
  --c-danger-bg: #fdeceb;

  /* 타이포 — 시스템 폰트 스택 (웹폰트 금지) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", Roboto, "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  /* 간격·형태 */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --maxw: 72rem;
  --tap: 44px; /* 최소 터치 타깃 */
}

/* ==========================================================================
   2. 베이스
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  word-break: keep-all;
}
img { max-width: 100%; height: auto; }
a { color: var(--c-primary); }
a:hover { color: var(--c-primary-dark); }
h1, h2, h3, h4 { line-height: 1.35; 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-family: inherit; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-primary); color: #fff; padding: var(--sp-2) var(--sp-4);
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   3. 헤더 / 내비게이션 (모바일 퍼스트)
   ========================================================================== */
.site-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; gap: var(--sp-3);
}
.site-logo {
  font-size: var(--fs-xl); font-weight: 800; text-decoration: none;
  color: var(--c-primary); letter-spacing: -0.02em;
  display: inline-flex; align-items: center; min-height: var(--tap);
}
.site-logo:hover { color: var(--c-primary-dark); }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  background: none; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--c-text);
}
.nav-toggle svg { width: 22px; height: 22px; }
.site-nav { display: none; width: 100%; }
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.site-nav a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--sp-2); text-decoration: none; color: var(--c-text);
  font-weight: 600; border-radius: var(--radius-sm);
}
.site-nav a:hover { background: var(--c-primary-light); color: var(--c-primary-dark); }
.site-header__inner { flex-wrap: wrap; }

@media (min-width: 56rem) {
  .nav-toggle { display: none; }
  .site-nav { display: block; width: auto; }
  .site-nav ul { display: flex; gap: var(--sp-1); padding: 0; }
  .site-nav a { padding: 0 var(--sp-3); }
}

/* ==========================================================================
   4. 히어로 검색 (프론트페이지)
   ========================================================================== */
.hero {
  background: linear-gradient(160deg, var(--c-primary) 0%, #0a5c74 100%);
  color: #fff;
  padding: var(--sp-6) 0 var(--sp-8);
}
.hero h1 { color: #fff; margin-bottom: var(--sp-2); }
.hero__sub { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.search-box {
  background: var(--c-bg); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow);
  display: grid; gap: var(--sp-3);
}
.search-box label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-sub); display: block; margin-bottom: var(--sp-1); }
.search-box select {
  width: 100%; min-height: var(--tap); padding: 0 var(--sp-3);
  font-size: var(--fs-base); font-family: inherit; color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg);
}
.search-box select:disabled { background: var(--c-bg-soft); color: var(--c-text-sub); }
@media (min-width: 40rem) {
  .search-box { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
}

/* 야간·주말 바로가기 */
.quick-night {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius); color: #fff; text-decoration: none; font-weight: 700;
  min-height: var(--tap);
}
.quick-night:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.quick-night svg { flex: none; width: 24px; height: 24px; }

/* ==========================================================================
   5. 버튼
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  font-size: var(--fs-base); font-weight: 700; text-decoration: none;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn-outline { background: var(--c-bg); color: var(--c-primary); border: 1px solid var(--c-primary); }
.btn-outline:hover { background: var(--c-primary-light); }
.btn-tel {
  background: var(--c-accent); color: #fff; width: 100%;
  font-size: var(--fs-lg);
}
.btn-tel:hover { background: #b93a08; color: #fff; }
.btn-tel svg { width: 20px; height: 20px; }
@media (min-width: 56rem) { .btn-tel { width: auto; } }

/* ==========================================================================
   6. 카드 / 목록
   ========================================================================== */
.section { padding: var(--sp-6) 0; }
.section--soft { background: var(--c-bg-soft); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.section__head a { font-size: var(--fs-sm); white-space: nowrap; }
.card-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--sp-4); text-decoration: none; color: var(--c-text); display: block;
}
.card:hover { border-color: var(--c-primary); box-shadow: var(--shadow); color: var(--c-text); }
.card h3 { margin-bottom: var(--sp-1); font-size: var(--fs-base); }
.card .card__meta { font-size: var(--fs-xs); color: var(--c-text-sub); margin: 0; }

/* 기관 목록 행 */
.org-list { list-style: none; margin: 0; padding: 0; }
.org-list li { border-bottom: 1px solid var(--c-border); }
.org-list a {
  display: block; padding: var(--sp-3) var(--sp-1); text-decoration: none; color: var(--c-text);
}
.org-list a:hover { background: var(--c-bg-soft); }
.org-list .org-name { font-weight: 700; }
.org-list .org-info { font-size: var(--fs-xs); color: var(--c-text-sub); }

/* 배지 */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; vertical-align: middle;
  background: var(--c-primary-light); color: var(--c-primary-dark);
}
.badge--closed { background: var(--c-danger-bg); color: var(--c-danger); }

/* ==========================================================================
   7. 표 (기본정보·진료시간)
   ========================================================================== */
.jmap-table-wrap { overflow-x: auto; }
.jmap-table th, .jmap-table td {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border);
  text-align: left; font-size: var(--fs-sm);
}
.jmap-table th { background: var(--c-bg-soft); font-weight: 700; white-space: nowrap; }
.jmap-table caption { text-align: left; font-weight: 700; margin-bottom: var(--sp-2); }

/* ==========================================================================
   8. 고지 박스 (YMYL)
   ========================================================================== */
.jmap-notice {
  background: var(--c-warn-bg); border: 1px solid var(--c-warn-border);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); margin: var(--sp-4) 0;
}
.jmap-notice--closed {
  background: var(--c-danger-bg); border-color: var(--c-danger); color: var(--c-danger);
  font-weight: 700;
}
.jmap-source {
  font-size: var(--fs-xs); color: var(--c-text-sub);
  border-top: 1px solid var(--c-border); padding-top: var(--sp-3); margin-top: var(--sp-5);
}

/* ==========================================================================
   9. 지도 placeholder (lazy)
   ========================================================================== */
.jmap-map {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; margin: var(--sp-4) 0;
}
.jmap-map__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: 220px; width: 100%;
  background: var(--c-bg-soft); border: none; cursor: pointer;
  font-size: var(--fs-sm); color: var(--c-text-sub); padding: var(--sp-4);
}
.jmap-map__ph:hover { background: var(--c-primary-light); }
.jmap-map__ph .addr { font-weight: 700; color: var(--c-text); }
.jmap-map__canvas { width: 100%; height: 320px; }

/* ==========================================================================
   10. 본문 (매거진 등)
   ========================================================================== */
.entry { padding: var(--sp-6) 0; }
.entry__header { margin-bottom: var(--sp-5); }
.entry__meta { font-size: var(--fs-xs); color: var(--c-text-sub); }
.entry__content h2 { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.entry__content h3 { margin-top: var(--sp-5); }
.entry__content table { margin: var(--sp-4) 0; }
.entry__content th, .entry__content td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); font-size: var(--fs-sm); }
.entry__content th { background: var(--c-bg-soft); }
.entry__content blockquote {
  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--c-primary); background: var(--c-bg-soft);
}

/* 브레드크럼 */
.breadcrumb { font-size: var(--fs-xs); color: var(--c-text-sub); padding: var(--sp-3) 0 0; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--sp-1); color: var(--c-border); }
.breadcrumb a { color: var(--c-text-sub); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-primary); }

/* 페이지네이션 */
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; padding: var(--sp-5) 0; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--sp-2);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--c-text);
}
.pagination .current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ==========================================================================
   11. 푸터
   ========================================================================== */
.site-footer {
  background: #14232b; color: #b6c3cc;
  padding: var(--sp-6) 0; margin-top: var(--sp-8); font-size: var(--fs-sm);
}
.site-footer a { color: #dbe6ec; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer__menu { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.site-footer__menu a { display: inline-flex; min-height: var(--tap); align-items: center; }
.site-footer__notice { font-size: var(--fs-xs); color: #8fa0ab; margin-bottom: var(--sp-2); }

/* ==========================================================================
   12. 기관 상세 페이지
   ========================================================================== */
.org-header { padding: var(--sp-5) 0 var(--sp-3); }
.org-header h1 { margin-bottom: var(--sp-1); }
.org-header .org-header__sub { color: var(--c-text-sub); font-size: var(--fs-sm); margin: 0; }
.org-actions { margin: var(--sp-3) 0; display: grid; gap: var(--sp-2); }
@media (min-width: 56rem) { .org-actions { display: flex; } }
.org-section { margin: var(--sp-5) 0; }
.org-section h2 { font-size: var(--fs-lg); border-left: 4px solid var(--c-primary); padding-left: var(--sp-2); }

/* 404 */
.error-404 { text-align: center; padding: var(--sp-8) 0; }