/* =========================================================================
   waste.ipsitalk.net 디자인 시스템 (통합 베이스 + 데이터셋 섹션 액센트)
   단일 소스. header.php에서 $extraHead 다음(마지막)에 로드하여 색/카드/히어로를
   최종 승리시킨다. 페이지 고유 레이아웃(그리드 template-columns·지도 높이 등)은
   다른 셀렉터라 그대로 생존한다.
   ========================================================================= */

:root {
    /* 브랜드 그린 (안정색: 네비·버튼·페이지네이션) */
    --brand: #2E7D32;
    --brand-dark: #14532d;
    --brand-light: #e8f5ee;
    --brand-ink: #166534;

    /* 전 페이지 동일 히어로 그라디언트 */
    --hero: linear-gradient(135deg, #14532d 0%, #1f7a3f 55%, #86d3a4 100%);

    /* 중립 */
    --ink: #1f2e26;
    --muted: #607167;
    --border: #e3ece6;
    --surface: #fff;
    --bg: #f7faf8;

    /* 반경 스케일 */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-pill: 999px;

    /* 그림자 스케일 */
    --shadow-sm: 0 8px 18px rgba(16, 45, 27, .05);
    --shadow-md: 0 14px 28px rgba(16, 45, 27, .07);
    --shadow-lg: 0 18px 34px rgba(16, 45, 27, .10);

    /* 섹션 액센트 기본값(waste) — body 클래스로 재정의 */
    --accent: #2E7D32;
    --accent-soft: #e8f5ee;
    --accent-ink: #166534;
}

/* ── 데이터셋 섹션 액센트 (장식 요소에만: eyebrow·뱃지·active칩·카드 hover) ── */
body.sec-company   { --accent: #a9730a; --accent-soft: #fff4e0; --accent-ink: #8a5a00; } /* 골드 */
body.sec-clothing  { --accent: #1565C0; --accent-soft: #e8f0fb; --accent-ink: #10458c; } /* 파랑 */
body.sec-recycling { --accent: #00897B; --accent-soft: #e2f4f0; --accent-ink: #05655a; } /* 청록 */
body.sec-bag       { --accent: #b35d09; --accent-soft: #fff4df; --accent-ink: #8c4708; } /* 주황 */
body.sec-food      { --accent: #087f8c; --accent-soft: #e7f7f7; --accent-ink: #075e67; } /* 바다색 */

/* ── 베이스 ── */
body {
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
}

/* =========================================================================
   히어로 (전 페이지 동일 그라디언트)
   ========================================================================= */
.hero,
.company-hero,
.clothing-hero,
.search-hero,
.cloth-header,
.company-header,
.bag-hero,
.food-hero,
.detail-hero,
.sitemap-hero,
.page-hero {
    background: var(--hero) !important;
    color: #fff;
}
.hero h1,
.company-hero h1,
.clothing-hero h1,
.cloth-header h1,
.company-header h1,
.bag-hero h1,
.food-hero h1,
.detail-hero h1,
.sitemap-hero h1,
.page-hero h1 {
    font-weight: 800;
    letter-spacing: -0.01em;
}
.company-hero p,
.clothing-hero p,
.cloth-header .lead,
.company-header .lead {
    opacity: 0.94;
}

/* =========================================================================
   카드 (약 15종 레거시 클래스를 하나의 룩으로 통일)
   ========================================================================= */
.stat-card,
.company-card,
.bin-card,
.region-card,
.center-card,
.region-center-card,
.search-company-card,
.search-clothing-card,
.search-center-card,
.home-company-card,
.home-clothing-card,
.home-recycling-card,
.info-panel,
.cloth-card,
.company-card,
.result-card,
.action-card,
.related-card,
.wc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

.home-expansion-card,
.home-tool-card,
.sitemap-section,
.policy-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

/* 링크형 카드 공통 hover (섹션 액센트 테두리로 소속감) */
.company-card,
.bin-card,
.region-card,
.center-card,
.region-center-card,
.search-company-card,
.search-clothing-card,
.search-center-card,
.home-company-card,
.home-clothing-card,
.home-recycling-card,
.related-card,
.wc-card--link {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-expansion-card,
.home-tool-card,
.sitemap-link,
.sitemap-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.company-card:hover,
.bin-card:hover,
.region-card:hover,
.center-card:hover,
.region-center-card:hover,
.search-company-card:hover,
.search-clothing-card:hover,
.search-center-card:hover,
.home-company-card:hover,
.home-clothing-card:hover,
.home-recycling-card:hover,
.related-card:hover,
.wc-card--link:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}
.home-expansion-card:hover,
.home-tool-card:hover,
.sitemap-link:hover,
.sitemap-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

/* 통계 카드 숫자 */
.stat-card .num,
.stat-card .stat-num,
.wc-stat .num {
    color: var(--brand-ink);
    font-weight: 800;
}

/* =========================================================================
   이어라벨 · 뱃지 (섹션 액센트)
   ========================================================================= */
.eyebrow {
    color: var(--accent);
    font-weight: 700;
}
.type-badge,
.badge-soft,
.fee-badge {
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-radius: var(--r-pill);
    font-weight: 700;
}

/* =========================================================================
   칩 / pill 링크 (통일 + active·hover는 섹션 액센트)
   ========================================================================= */
.sido-chip,
.sido-link,
.sido-btn,
.cross-chip,
.type-chips a,
.popular-keywords a {
    border-radius: var(--r-pill);
    font-weight: 700;
    transition: all .18s ease;
}
.sido-chip:hover,
.sido-link:hover,
.sido-btn:hover,
.type-chips a:hover,
.popular-keywords a:hover,
.sido-chip.active,
.sido-link.active,
.type-chips a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* =========================================================================
   섹션 타이틀 · 개요 · 빈 상태
   ========================================================================= */
.section-title {
    color: var(--ink);
    font-weight: 800;
}
.section-title i,
.section-title .bi {
    color: var(--accent);
}
.sec-overview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.empty-state {
    color: var(--muted);
}

/* 상세 페이지 요약 박스 / 정보 테이블 (레이아웃은 페이지, 색만 통일) */
.summary-box {
    border-radius: var(--r-md);
}
.summary-box .value {
    color: var(--brand-ink);
}
.info-table th {
    color: var(--muted);
}
.info-table .value-strong {
    color: var(--brand-ink);
}

/* =========================================================================
   버튼 (브랜드 그린으로 안정화 — Bootstrap 기본 초록 #198754 → 브랜드 통일)
   ========================================================================= */
.btn {
    border-radius: var(--r-sm);
    font-weight: 600;
}
.btn-success {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
}
.btn-outline-success {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}
.btn-accent {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.btn-accent:hover,
.btn-accent:focus {
    color: #fff;
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}
.btn-outline-accent {
    color: var(--accent-ink);
    background: transparent;
    border-color: var(--accent);
}
.btn-outline-accent:hover,
.btn-outline-accent:focus {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.topic-actions .btn,
.quick-actions .btn {
    border-radius: var(--r-pill);
}

/* =========================================================================
   페이지네이션 (브랜드 그린)
   ========================================================================= */
.pagination .page-link {
    color: var(--brand);
}
.pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* =========================================================================
   네비게이션 (헤더 토큰 정합)
   ========================================================================= */
.navbar-brand {
    color: var(--brand) !important;
}
.nav-link:hover,
.nav-link.active {
    color: var(--brand) !important;
}

/* =========================================================================
   공통 페이지 도입부 · 문맥 링크 · 푸터
   ========================================================================= */
.page-hero {
    padding: 48px 0 38px;
}
.page-hero p {
    max-width: 760px;
    margin: 0;
    opacity: .94;
}
.context-links {
    border-top: 1px solid var(--border);
    background: #eef6f1;
    padding: 30px 0;
}
.context-links h2 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 14px;
}
.context-link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.context-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 14px 16px;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.context-link:hover {
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.context-link i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--accent-ink);
    background: var(--accent-soft);
    font-size: 1.05rem;
}
.context-link strong,
.context-link span {
    display: block;
}
.context-link span {
    color: var(--muted);
    font-size: .82rem;
}
.footer-title {
    color: #fff;
    font-size: .9rem;
    font-weight: 800;
    margin-bottom: 12px;
}
.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav li + li {
    margin-top: 7px;
}
.official-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 18px 0;
    margin-top: 24px;
    border-top: 1px solid #37474f;
}
.official-links a {
    font-size: .88rem;
}
.source-link {
    font-weight: 700;
    text-underline-offset: 3px;
}
.source-note {
    padding: 14px 16px;
    color: var(--muted);
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-sm);
}
.home-tool-card {
    display: block;
    height: 100%;
    padding: 24px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}
.home-tool-card i {
    color: var(--brand);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(46, 125, 50, .28);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .page-hero {
        padding: 38px 0 30px;
    }
    .page-hero h1 {
        font-size: 1.65rem;
    }
    .context-link-grid {
        grid-template-columns: 1fr;
    }
    .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 18px;
    }
}