/* ============================================================================
   SNOW THEME — 흰 dominant + 회색 단조 위계
   3-layer 토큰: primitive scale → semantic → component
   장식 0 (shadow/gradient X). 위계는 brightness 단계로만.
============================================================================ */

:root {
    /* ====================================================================
       Layer 1: PRIMITIVE — neutral 단색 12 단계 (snow 는 accent 없음)
       모든 컬러는 이 스케일에서만 가져옴.
       ==================================================================== */
    --n-00:  #ffffff;
    --n-50:  #fafafa;
    --n-100: #f4f4f4;
    --n-150: #eeeeee;
    --n-200: #e2e2e2;
    --n-300: #d0d0d0;
    --n-400: #b0b0b0;
    --n-500: #8b8b8b;
    --n-600: #5b5b5b;
    --n-700: #414141;
    --n-800: #2a2a2a;
    --n-900: #0a0a0a;

    /* Snow 는 accent 컬러 스케일 없음 — 강조도 neutral 단계로 */
    /* NEW 배지만 유일한 vivid 액센트 */
    --new: #ff4800;

    /* ====================================================================
       Layer 2: SEMANTIC — 의미 기반 토큰 (컴포넌트가 이걸 참조)
       ==================================================================== */
    --surface-base:    var(--n-00);
    --surface-raised:  var(--n-50);
    --surface-hover:   var(--n-100);
    --surface-strong:  var(--n-100);

    --text-strong:     var(--n-800);
    --text-body:       var(--n-700);
    --text-meta:       var(--n-500);
    --text-disabled:   var(--n-400);
    --text-inverse:    var(--n-00);

    --border-base:     var(--n-300);
    --border-soft:     var(--n-200);
    --border-strong:   var(--n-400);

    --accent-bg:       var(--n-800);
    --accent-text:     var(--n-00);
    --accent-soft:     var(--n-100);

    --focus-ring:      rgba(42, 42, 42, 0.3);
    --link:            var(--n-800);   /* snow 는 링크도 다크 회색 (파랑 X) */

    /* ====================================================================
       Layer 3: COMPONENT — 반복 컴포넌트 슬롯 (semantic 매핑)
       ==================================================================== */
    --card-bg:         var(--surface-raised);
    --card-border:     var(--border-base);
    --card-hover-bg:   var(--surface-hover);

    --box-bg:          var(--surface-base);
    --box-bg-alt:      var(--n-50);        /* 인접 박스 zebra 교차 */
    --box-border:      var(--border-base);

    --btn-primary-bg:    var(--accent-bg);
    --btn-primary-text:  var(--accent-text);
    --btn-primary-hover: var(--n-900);

    --btn-secondary-bg:    var(--surface-raised);
    --btn-secondary-text:  var(--text-strong);
    --btn-secondary-border: var(--border-base);
    --btn-secondary-hover-bg: var(--surface-hover);

    --badge-bg:        var(--surface-strong);
    --badge-text:      var(--text-body);
    --badge-border:    var(--border-base);
    --badge-strong-bg:    var(--n-150);
    --badge-strong-text:  var(--text-strong);
    --badge-strong-border: var(--border-strong);

    --input-bg:        var(--surface-base);
    --input-border:    var(--border-base);
    --input-focus-border: var(--accent-bg);

    --chevron-color:   var(--text-meta);
    --chevron-hover:   var(--text-strong);

    --header-bg:       var(--surface-base);
    --header-text:     var(--text-strong);
    --footer-bg:       var(--n-800);
    --footer-text:     var(--n-150);

    /* ====================================================================
       Legacy compat — style.css 가 옛 변수명 사용해도 동작하도록
       ==================================================================== */
    --page-bg:           var(--surface-base);
    --surface:           var(--surface-base);
    --surface-alt:       var(--surface-raised);
    --card-bg-hover:     var(--card-hover-bg);
    --divider:           var(--border-soft);
    --border:            var(--border-base);
    --border-hover:      var(--border-strong);
    --search-bg:         var(--input-bg);
    --search-bg-focus:   var(--surface-hover);
    --search-border:     var(--input-border);
    --text-primary:      var(--text-strong);
    --text-secondary:    var(--text-body);
    --text-tertiary:     var(--text-meta);
    --text-muted:        var(--text-meta);
    --text-white:        var(--text-inverse);
    --accent:            var(--accent-bg);
    --accent-color:      var(--accent);   /* 미정의 토큰 보강: var(--accent-color,#3498db) 사용처가 테마색 따르게(snow=중립) */
    --accent-bright:     var(--text-strong);
    --accent-dim:        var(--text-meta);
    --color-bg:          var(--surface-base);
    --color-bg-secondary: var(--surface-raised);
    --color-bg-hover:    var(--surface-hover);
    --color-text:        var(--text-strong);
    --color-text-secondary: var(--text-body);
    --color-text-disabled: var(--text-disabled);
    --color-primary:     var(--accent-bg);
    --color-primary-hover: var(--btn-primary-hover);
    --color-primary-light: var(--accent-soft);
    --color-success:     var(--text-body);
    --color-success-light: var(--surface-strong);
    --color-warning:     var(--n-700);
    --color-warning-light: var(--n-100);
    --color-error:       var(--n-700);
    --color-error-light: var(--n-100);
    --color-border:      var(--border-base);
    --color-border-light: var(--border-soft);

    /* Shadow 토큰 — 디자인 시스템 규칙: shadow 전역 0 */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

/* ============================================================================
   기본 body
============================================================================ */
body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                 system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Noto Sans KR",
                 "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    background-color: var(--surface-base);
    color: var(--text-body);
}

/* ============================================================================
   헤더 — 흰 bg, 검정 글씨, 얇은 하단 보더
============================================================================ */
.header,
.region-header,
.detail-header {
    background: var(--header-bg);
    color: var(--header-text);
    border-bottom: 1px solid var(--border-base);
    box-shadow: none;
}
.header-title,
.region-title,
.detail-header h1 {
    color: var(--text-strong);
    font-weight: 700;
}
.header-title:hover { color: var(--text-strong); }
.header-icon { color: var(--text-meta); }
.header-search input,
.search-input-wrapper {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--text-strong);
}
.header-search select,
.region-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--text-strong);
}

/* ============================================================================
   카드 (클릭 가능) — flat, 5px radius, shadow 없음
============================================================================ */
.hospital-card,
.pharmacy-card,
.nearby-hospital-link,
.specialty-hospital-link,
.service-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 5px;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s;
}
.hospital-card:hover,
.pharmacy-card:hover,
.nearby-hospital-link:hover,
.specialty-hospital-link:hover,
.service-card:hover {
    background: var(--card-hover-bg);
    border-color: var(--border-strong);
    transform: none;
    box-shadow: none;
}
.hospital-card:active,
.pharmacy-card:active,
.nearby-hospital-link:active,
.specialty-hospital-link:active,
.service-card:active {
    transform: scale(0.98);
}

/* 카드 내부 텍스트 위계 */
.hospital-name,
.pharmacy-name,
.nearby-hospital-name,
.specialty-hospital-name {
    color: var(--text-strong) !important;
    font-weight: 700;
}
.hospital-address,
.pharmacy-address,
.nearby-hospital-info,
.specialty-hospital-info {
    color: var(--text-body);
}
.hospital-phone,
.pharmacy-phone,
.tel-link {
    color: var(--text-body);
    font-weight: 500;
}
.hospital-doctors,
.nearby-hospital-doctors {
    color: var(--text-meta);
    font-weight: 500;
}
.specialty-hospital-distance {
    color: var(--text-meta);
}

/* ============================================================================
   배지 (종별, 카테고리, 상태) — flat, 11px, gray scale 만
============================================================================ */
.hospital-type,
.hospital-type-badge,
.nearby-hospital-type,
.specialty-hospital-type {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    background: var(--badge-bg);
    color: var(--badge-text);
    border: 1px solid var(--badge-border);
    box-shadow: none;
}
.hospital-type[data-type="상급종합"],
.hospital-type-badge[data-type="상급종합"],
.nearby-hospital-type[data-type="상급종합"],
.specialty-hospital-type[data-type="상급종합"] {
    background: var(--badge-strong-bg) !important;
    color: var(--badge-strong-text) !important;
    border-color: var(--badge-strong-border) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.hospital-type[data-type="종합병원"],
.hospital-type-badge[data-type="종합병원"],
.nearby-hospital-type[data-type="종합병원"],
.specialty-hospital-type[data-type="종합병원"] {
    background: var(--surface-hover) !important;
    color: var(--text-body) !important;
    border-color: var(--border-base) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.hospital-type[data-type="병원"],
.hospital-type-badge[data-type="병원"],
.nearby-hospital-type[data-type="병원"],
.specialty-hospital-type[data-type="병원"],
.hospital-type[data-type="요양병원"],
.hospital-type-badge[data-type="요양병원"],
.nearby-hospital-type[data-type="요양병원"],
.specialty-hospital-type[data-type="요양병원"],
.hospital-type[data-type="한의원"],
.hospital-type-badge[data-type="한의원"],
.nearby-hospital-type[data-type="한의원"],
.specialty-hospital-type[data-type="한의원"],
.hospital-type[data-type="의원"],
.hospital-type-badge[data-type="의원"],
.nearby-hospital-type[data-type="의원"],
.specialty-hospital-type[data-type="의원"],
.hospital-type[data-type="치과의원"],
.hospital-type-badge[data-type="치과의원"],
.nearby-hospital-type[data-type="치과의원"],
.specialty-hospital-type[data-type="치과의원"] {
    background: var(--badge-bg) !important;
    color: var(--text-meta) !important;
    border-color: var(--border-soft) !important;
    box-shadow: none !important;
}

/* 주말진료 / 응급 / 야간 등 vivid 배지 평탄화 */
.weekend-badge,
.emergency-badge,
.night-badge,
.holiday-badge {
    background: var(--surface-strong) !important;
    color: var(--text-strong) !important;
    border: 1px solid var(--border-base) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* parking-badge / 지하철 호선 / 버스 노선 등 */
.parking-badge,
.parking-badge.paid,
.parking-badge.free,
.subway-line,
.subway-line-badge,
.bus-number,
.bus-route,
.equipment-count,
.equipment-badge {
    background: var(--badge-bg) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--badge-border) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

/* ============================================================================
   네비게이션 칩 (시도/시군구/카테고리)
============================================================================ */
.nav-item,
.city-item,
.district-item,
.dong-item,
.category-chip,
.region-button,
.sido-button {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    border-radius: 4px;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s;
}
.nav-item:hover,
.city-item:hover,
.district-item:hover,
.dong-item:hover,
.category-chip:hover,
.region-button:hover,
.sido-button:hover {
    background: var(--btn-secondary-hover-bg);
    border-color: var(--border-strong);
    color: var(--text-strong);
}
.nav-item.active,
.city-item.active,
.district-item.active,
.dong-item.active,
.category-chip.active,
.region-button.active,
.sido-button.active {
    background: var(--accent-bg);
    border-color: var(--accent-bg);
    color: var(--accent-text);
}

/* ============================================================================
   Primary 버튼 (form 제출 / 진짜 액션만)
============================================================================ */
.btn-primary,
.search-btn,
.header-search button {
    background: var(--btn-primary-bg) !important;
    border: none !important;
    color: var(--btn-primary-text) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-weight: 600;
}
.btn-primary:hover,
.search-btn:hover,
.header-search button:hover {
    background: var(--btn-primary-hover) !important;
}

/* Secondary 버튼 */
.btn-secondary,
.filter-button,
.pagination button,
.pagination a.page-btn {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    border-radius: 4px;
    box-shadow: none;
}
.btn-secondary:hover,
.filter-button:hover,
.pagination button:hover,
.pagination a.page-btn:hover {
    background: var(--btn-secondary-hover-bg);
    border-color: var(--border-strong);
}
.filter-button.selected,
.filter-button.active,
.pagination button.active,
.pagination a.page-btn.active {
    background: var(--accent-bg);
    border-color: var(--accent-bg);
    color: var(--accent-text);
}

/* ============================================================================
   검색 입력 focus
============================================================================ */
.search-input:focus,
.header-search input:focus {
    border-color: var(--input-focus-border);
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ============================================================================
   정보 박스 (info-section, info-card)
   강조 박스는 border-left 단계만 차별, bg 컬러 X
============================================================================ */
/* 모든 박스 통일 — info-section / info-card / disclaimer / introduction 동일 패턴 */
.info-section,
.detail-section,
.info-card,
.info-card.info-card-primary,
.info-card.info-card-warning,
.info-card.info-card-emergency,
.disclaimer-section,
.introduction-section {
    background: var(--box-bg) !important;
    border: 1px solid var(--border-base) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}
.info-card-title,
.info-card-title.warning,
.info-card-title.emergency {
    color: var(--text-strong) !important;
}

/* 섹션 제목 */
.section-title,
.info-section h2,
.info-section h3,
.info-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
}

/* ============================================================================
   요일별 진료시간 카드
============================================================================ */
.day-card,
.hours-card,
.schedule-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-base);
    border-radius: 5px;
    box-shadow: none;
}
.day-card.closed,
.hours-card.closed {
    background: var(--surface-hover);
    color: var(--text-meta);
}

/* ============================================================================
   링크 (인라인 텍스트만 — 카드 link 는 위에서 처리)
============================================================================ */
a:not(.hospital-card):not(.pharmacy-card):not(.nearby-hospital-link):not(.specialty-hospital-link):not(.service-card):not(.mobile-context-link):not(.external-link-item):not(.pharmacy-link):not(.pharmacy-card-link):not(.nav-item):not(.city-item):not(.district-item):not(.dong-item):not(.category-chip):not(.btn-primary):not(.btn-secondary):not(.search-btn) {
    color: var(--link);
}

/* ============================================================================
   푸터 — 검정 bg + 옅은 회색 텍스트
============================================================================ */
.footer {
    background: var(--footer-bg) !important;
    color: var(--footer-text) !important;
    border-top: none;
}
.footer-company h3 { color: var(--n-00) !important; }
.footer-info,
.footer-link { color: var(--footer-text) !important; }
.footer-link { border-right-color: var(--n-700) !important; }
.footer-link:hover { color: var(--n-00) !important; text-decoration: underline; }
.footer-copyright { color: var(--n-500) !important; border-top: 1px solid var(--n-700) !important; }
.footer-copyright a { color: var(--footer-text) !important; }
.footer-copyright a:hover { color: var(--n-00) !important; }

/* ============================================================================
   shadow 전역 제거 — 단일 visual treatment 보장
============================================================================ */
.hospital-card,
.pharmacy-card,
.info-section,
.detail-section,
.info-card,
.day-card,
.region-header,
.header,
.detail-header,
.service-card,
.nearby-hospital-link,
.specialty-hospital-link,
.btn-primary,
.btn-secondary,
.search-btn {
    box-shadow: none !important;
}

/* ============================================================================
   Zebra striping — 인접 박스/항목 시각 분리 (살짝만 차이)
   세로 리스트에 적용. 가로 그리드도 wrap 되면 자연스럽게 적용됨.
   동일 비교용 가로 4-col 그리드도 약한 톤 차이라 비교 방해 없음.
============================================================================ */
.info-section:nth-of-type(even),
.detail-section:nth-of-type(even),
.equipment-accordion-item:nth-of-type(even),
.equipment-item:nth-of-type(even),
.department-card:nth-of-type(even),
.day-card:nth-of-type(even),
.hours-card:nth-of-type(even),
.bed-card:nth-of-type(even),
.nearby-hospital-item:nth-of-type(even),
.specialty-hospital-item:nth-of-type(even) {
    background: var(--box-bg-alt) !important;
}