/* nav-upgrade.css */
/* ==========================================================================
   nav-upgrade.css — 상단 네비게이션 고급화 (v1.1.2)
   bundle.min.css 뒤에 로드되어 기존 .site-nav/.header-cta 스타일을 override.
   변수(--color-primary 등)는 자식테마 theme.css에서 분기됨.
   ========================================================================== */

/* ---------- 헤더 하단 그라데이션 라인 + 그림자 ---------- */
.site-header { position: relative; }
.site-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-primary) 20%,
        var(--color-primary-dark) 50%,
        var(--color-primary) 80%,
        transparent 100%);
    opacity: .9;
    pointer-events: none;
}
.site-header__main {
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06);
}

/* ---------- 드롭다운/메가 갭 + hover bridge 12px ---------- */
.site-nav__list .sub-menu,
.site-nav__list .site-nav__mega {
    margin-top: 12px;
}
/* 트리거 li의 hit area를 12px 아래로 확장 — 갭에서도 :hover 유지.
   ::before(패널 자식, :hover 시에만 생성) 방식은 :hover 풀리는 순간 같이 사라져 bridge로 동작하지 못함. */
.site-nav__list .menu-item-has-children::after,
.site-nav__list .menu-item--mega::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

/* ---------- 메가 패널 세로 1열 (Apple식, 지역 메가 제외) ---------- */
/* 부모 li를 relative로 복원 — :not(.menu-item--areas) 한정으로 지역 메가의 헤더 폭 가운데 정렬은 유지.
   header-footer.css의 `.menu-item--mega { position: static; }` 와 충돌하여 좁은 1열 드롭다운이 헤더 좌측 끝에 붙던 버그 수정. */
.site-nav__list .menu-item--mega:not(.menu-item--areas) {
    position: relative;
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) > .site-nav__mega {
    left: 0;
    right: auto;
    transform: none;
    width: 260px;
    padding: 12px 0;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
    border: 1px solid var(--color-border-light);
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) .site-nav__mega-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) .site-nav__mega-list > li {
    margin: 0;
    padding: 0;
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) .site-nav__mega-list > li > a {
    display: block;
    padding: 11px 22px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    border-radius: 0;
    transition: color .18s, padding-left .18s, background-color .18s;
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) .site-nav__mega-list > li > a:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    padding-left: 28px;
}

/* ---------- 현재 페이지 표시 (밑줄 바) ---------- */
.site-nav__list .menu-item > a { position: relative; }
.site-nav__list .current-menu-item > a {
    background-color: transparent;
    color: var(--color-primary);
}
.site-nav__list .current-menu-item > a::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px;
    bottom: 4px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 2px;
}

/* ---------- 콜버튼 고급화 ---------- */
.header-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.header-cta__phone:hover,
.header-cta__phone:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.header-cta__phone svg {
    color: #fff;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.header-cta__phone-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}
.header-cta__phone-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}
.header-cta__phone-number {
    font-size: var(--font-size-base);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- 모바일 가드 (≤768px) ---------- */
@media (max-width: 768px) {
    /* 데스크톱 active bar 무력화 — 드로어 안에서는 의미 없음 */
    .site-nav__list .current-menu-item > a::after { display: none; }

    /* 드로어 안에서 메가는 static이라 hover bridge ::after 불필요 */
    .site-nav__list .menu-item-has-children::after,
    .site-nav__list .menu-item--mega::after { display: none; }

    /* 세로 메가 스킨이 드로어 내부 sub-menu에 침범하지 않도록 */
    .site-nav__list .menu-item--mega > .site-nav__mega {
        position: static;
        width: auto;
        margin-top: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .site-nav__list .menu-item--mega .site-nav__mega-list > li > a:hover {
        padding-left: var(--spacing-lg);
    }

    /* 모바일에서는 콜버튼 라벨 숨기고 번호만 — 가로폭 절약 */
    .header-cta__phone {
        padding: 8px 14px;
        gap: 6px;
    }
    .header-cta__phone-label {
        display: none;
    }
}

/* theme-noimport-2516f1ff79.css */
/*
 * drain24 자식테마 v4 — 애플 마케팅 페이지 톤
 *  - 화이트 캔버스 · huge Pretendard 300~600 · letter-spacing -0.045em
 *  - radius 14~20px · subtle shadow · scroll reveal
 *  - 브랜드: 하수구막힘고압세척전문24시출동 (drain24 표기 제거)
 *  - primary accent: SF Blue #0071E3 (CTA 한정)
 */

/* 폰트: mu-plugin drain24-perf-fonts.php 가 로컬 @font-face + preload + size-adjust 폴백 인라인 주입 */

:root {
    /* --font-family / --font-heading / --font-display / --font-numeric 은
       drain24-perf-fonts.php 인라인 :root 에서 최우선 정의됨. 여기 값은 폴백. */
    --font-family: 'Pretendard', 'Pretendard-fallback', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Malgun Gothic', sans-serif;
    --font-heading: var(--font-family);
    --font-display: var(--font-family);
    --font-body: var(--font-family);
    --font-numeric: 'Pretendard', 'Pretendard-fallback', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

    --color-canvas:      #FFFFFF;
    --color-surface:     #FBFBFD;
    --color-surface-2:   #F5F5F7;
    --color-text:        #1D1D1F;
    --color-text-2:      #424245;
    --color-muted:       #6E6E73;
    --color-border:      #D2D2D7;
    --color-border-soft: #E8E8ED;

    --color-primary:      #0071E3;
    --color-primary-hover:#0077ED;
    --color-primary-tint: #EAF3FF;

    --color-accent-issue: #FFF2E8;
    --color-accent-case:  #E8F4FF;
    --color-accent-tips:  #EDF7EC;
    --color-accent-review:#FFF7E6;

    --color-danger:  #FF3B30;
    --color-warn:    #FF9500;
    --color-success: #34C759;

    --radius-sm:  10px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-btn: 12px;
    --radius-pill:999px;

    --shadow-card: 0 4px 20px rgba(0,0,0,.06);
    --shadow-lift: 0 12px 40px rgba(0,0,0,.10);

    --max-width: 1120px;
    --max-width-narrow: 800px;

    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
    --spacing-xl: 56px;
    --spacing-2xl: 96px;
}

/* ============= 기본 리셋 · 타이포 ============= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.5;
    font-size: 17px;
    letter-spacing: -0.015em;
}
* { box-sizing: border-box; }

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

/* ============= 헤더 (얇은 sticky + blur backdrop) ============= */
.drain-header__topbar { display: none !important; } /* 오렌지 alert bar 제거 */
.drain-header {
    background: rgba(255,255,255,.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    color: var(--color-text);
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid var(--color-border-soft);
}
.drain-header__main { padding: 0; border: 0; background: transparent; }
.drain-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; min-height: 52px;
}
.drain-header__brand-text {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-text); text-decoration: none;
    font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
}
.drain-header__brand-mark {
    display: none !important; /* D24 배지 제거 */
}
.drain-header__brand-name { color: var(--color-text); font-weight: 600; }

.drain-nav { flex: 1; }
.drain-nav__list {
    display: flex; gap: 24px; list-style: none; margin: 0; padding: 0;
    justify-content: center;
}
.drain-nav__list a {
    color: var(--color-text); text-decoration: none;
    font-size: 14px; font-weight: 400; padding: 8px 2px;
    letter-spacing: -0.01em;
    opacity: .88;
    transition: opacity .15s;
}
.drain-nav__list a:hover { opacity: 1; }
.drain-nav__list .current-menu-item > a { opacity: 1; font-weight: 500; }

/* 메가 패널 (부모 fallback 렌더링 구조: .site-nav__mega, .site-nav__mega-list, .site-nav__mega-cluster) */
.drain-nav__list .site-nav__mega { display: none; }
.drain-nav__list .menu-item--mega { position: relative; }
.drain-nav__list .menu-item--mega:hover > .site-nav__mega,
.drain-nav__list .menu-item--mega:focus-within > .site-nav__mega {
    display: block;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 320px; max-width: 92vw;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    padding: 16px 20px;
    z-index: 200;
}
.drain-nav__list .site-nav__mega-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px;
    min-width: 320px;
}
/* 서비스 안내 mega — 50 서비스 대응 auto-fit 4~5열 */
.drain-nav__list .menu-item--mega:hover > .site-nav__mega:has(> .site-nav__mega-list > li:nth-child(n+16)),
.drain-nav__list .menu-item--mega:focus-within > .site-nav__mega:has(> .site-nav__mega-list > li:nth-child(n+16)) {
    width: min(1040px, 92vw);
}
.drain-nav__list .site-nav__mega-list:has(> li:nth-child(n+16)) {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 12px;
    min-width: 640px;
}
.drain-nav__list .site-nav__mega-list:has(> li:nth-child(n+16)) a {
    padding: 6px 10px; font-size: 13px;
}
.drain-nav__list .site-nav__mega-list a {
    display: block; padding: 10px 12px;
    font-size: 14px; font-weight: 500;
    color: var(--color-text); text-decoration: none;
    border-radius: 8px;
    opacity: 1;
}
.drain-nav__list .site-nav__mega-list a:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

/* 지역 mega (17개 시도 클러스터 · 4열) */
.drain-nav__list .menu-item--areas:hover > .site-nav__mega--areas,
.drain-nav__list .menu-item--areas:focus-within > .site-nav__mega--areas {
    min-width: 720px; padding: 24px 28px;
}
.drain-nav__list .site-nav__mega-cluster {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.drain-nav__list .site-nav__mega-cluster .sido-block { padding: 0; }
.drain-nav__list .sido-block__title {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--color-muted); letter-spacing: .3px;
    margin: 0 0 8px; text-transform: uppercase;
}
.drain-nav__list .sido-block__list { list-style: none; margin: 0; padding: 0; }
.drain-nav__list .sido-block__list li { margin: 0; }
.drain-nav__list .sido-block__list a {
    display: block; padding: 4px 0;
    font-size: 13px; font-weight: 400;
    color: var(--color-text-2); text-decoration: none;
    opacity: 1;
}
.drain-nav__list .sido-block__list a:hover { color: var(--color-primary); }
.drain-nav__list .site-nav__mega-foot {
    margin: 16px 0 0; padding-top: 12px;
    border-top: 1px solid var(--color-border-soft);
    font-size: 13px;
}
.drain-nav__list .site-nav__mega-foot a {
    color: var(--color-primary); text-decoration: none; font-weight: 500;
}

/* 빈 mega 방어 */
.drain-nav__list .site-nav__mega:empty,
.drain-nav__list .site-nav__mega-list:empty,
.drain-nav__list .site-nav__mega-cluster:empty { display: none !important; }

/* 메가 항목 다수(16+) — 부모 nav-upgrade.css의 세로 1열(260px)을 다열 그리드로 오버라이드.
   Why: 서비스 30+ 시 세로 드롭다운이 뷰포트 밑을 넘어가 하위 항목 접근 불가.
   fallback 메뉴 DOM은 .site-nav__list > li.menu-item--mega > .site-nav__mega > ul.site-nav__mega-list. */
.site-nav__list .menu-item--mega:not(.menu-item--areas) > .site-nav__mega:has(> .site-nav__mega-list > li:nth-child(n+16)) {
    width: min(880px, 92vw);
    min-width: min(640px, 92vw);
    max-height: min(72vh, 620px);
    overflow-y: auto;
    /* 상단 12px는 트리거와의 시각적 간격을 유지하되 hover 유지용 실 영역 — 패널을 트리거 바닥까지 붙이고 안쪽 여백으로 밀어 원래 위치 보존.
       기본 mega의 margin-top:12px 는 트리거~패널 사이 투명 갭을 만들어 넓은 패널로 대각선 이동 시 hover 해제 → 사라짐 */
    margin-top: 0;
    padding: 26px 16px 14px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* 지역 mega hover 오탐 수정 — 부모 header-footer.css의 `.menu-item--mega { position: static }` 로 인해
   지역 mega 패널이 sticky .drain-header 를 기준 삼아 900px width 로 헤더 중앙에 뜬다. 이 넓은 패널이
   다른 li 아래 공간까지 덮으므로, 사용자가 매뉴얼/서비스 안내 사이로 마우스를 지나가다 지역 li 를 살짝만
   스쳐도 패널이 열리고, 이후 어느 li 아래 공간을 지나도 지역 패널 descendant 이므로 hover 가 유지된다.
   해결: 지역 li 를 position:relative 로 되돌리고 패널을 li 우측에 우측 앵커. */
.site-nav__list .menu-item--areas {
    position: relative;
}
.site-nav__list .menu-item--areas > .site-nav__mega--areas {
    left: auto;
    right: 0;
    transform: none;
    width: min(720px, 92vw);
    margin-top: 0;
    padding-top: calc(var(--spacing-lg) + 12px);
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) > .site-nav__mega:has(> .site-nav__mega-list > li:nth-child(n+16)) > .site-nav__mega-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px 12px;
    flex-direction: initial;
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) .site-nav__mega-list:has(> li:nth-child(n+16)) > li {
    margin: 0;
    padding: 0;
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) .site-nav__mega-list:has(> li:nth-child(n+16)) > li > a {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-nav__list .menu-item--mega:not(.menu-item--areas) .site-nav__mega-list:has(> li:nth-child(n+16)) > li > a:hover {
    padding-left: 12px;
    background: var(--color-surface, var(--color-primary-light));
    color: var(--color-primary);
}

.drain-header__cta { display: flex; align-items: center; gap: 12px; }
.drain-header__phone-sticker {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-primary); color: #fff !important;
    padding: 8px 18px; border-radius: var(--radius-pill);
    text-decoration: none; font-weight: 500; font-size: 14px;
    letter-spacing: -0.01em; box-shadow: none;
    border: 0; min-height: 36px; line-height: 1.2;
    transition: background .15s;
}
.drain-header__phone-sticker:hover { background: var(--color-primary-hover); }
.drain-header__phone-label { display: none; }
.drain-header__phone-number { font-weight: 500; font-size: 14px; letter-spacing: -0.01em; }

.drain-header__toggle {
    display: none; background: transparent; border: 0; padding: 8px; cursor: pointer;
}
.drain-header__toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); margin: 4px 0; border-radius: 2px; }

@media (max-width: 900px) { .drain-header__brand-sub { display: none; } }
@media (max-width: 768px) {
    .drain-nav { display: none; }
    .drain-header__toggle { display: block; }
    .drain-header__phone-sticker { padding: 6px 12px; }
    .drain-header__phone-number { font-size: 13px; }
}

/* ============= 본문 컨테이너 · 헤딩 ============= */
.site-content { min-height: 500px; padding: 40px 0 80px; }
body.home .site-content { padding-bottom: 0; }
.site-content .container, .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.site-content > * { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
/* 일반 페이지 · 카테고리 · 시도·시군구 페이지 본문은 wide (1120px)
   매거진 본문만 narrow (800px) — article.magazine 스코프로 아래에서 별도 처리 */
.site-content > h1, .site-content > h2, .site-content > h3, .site-content > h4,
.site-content > p, .site-content > ul, .site-content > ol, .site-content > figure,
.site-content > blockquote, .site-content > table, .site-content > .wp-block-heading,
.site-content > .wp-block-paragraph, .site-content > .wp-block-list, .site-content > .wp-block-table {
    max-width: var(--max-width); margin-left: auto; margin-right: auto;
    padding-left: 24px; padding-right: 24px;
}

/* 매거진 본문만 narrow */
article.magazine .site-content > h1,
article.magazine .site-content > h2,
article.magazine .site-content > h3,
article.magazine .site-content > h4,
article.magazine .site-content > p,
article.magazine .site-content > ul:not(.drain24-sido-grid),
article.magazine .site-content > ol,
article.magazine .site-content > figure,
article.magazine .site-content > blockquote,
article.magazine .site-content > table,
article.magazine .site-content > .callout,
article.magazine .site-content > .mag-toc {
    max-width: var(--max-width-narrow);
}

/* 매거진 폭 일관성: 상단 헤더·썸네일·관련 매거진을 본문(.page-content) 폭에 맞춤
   article.magazine 만 스코핑해 area_service/카테고리 wide 레이아웃엔 영향 없음 */
article.magazine .single__header,
article.magazine .single__thumbnail,
article.magazine + .mag-related {
    max-width: var(--max-width-narrow);
    margin-left: auto;
    margin-right: auto;
}

/* 모든 페이지 상단 여백 축소: 헤더 바로 아래 첫 .section 의 padding-top 만 축소
   (내부 섹션들의 상하 간격은 유지 — 홈 서브 섹션, 관련 매거진 등 영향 없음) */
.site-content > .section:first-child {
    padding-top: var(--spacing-2xl);
}
@media (max-width: 768px) {
    .site-content > .section:first-child {
        padding-top: var(--spacing-xl);
    }
}

.site-content h1 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    color: var(--color-text);
    margin: 0 0 20px;
    letter-spacing: -0.045em;
    line-height: 1.08;
}
.site-content h2 {
    position: relative;
    font-weight: 700;
    font-size: clamp(1.65rem, 1.2rem + 1.4vw, 2.15rem);
    color: var(--color-text);
    margin: 72px 0 28px;
    letter-spacing: -0.04em;
    line-height: 1.22;
    padding: 24px 0 0;
    border: 0;
}
.site-content h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border-soft);
}
.site-content h2::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    border-radius: 2px;
}
.site-content h3 {
    font-weight: 600;
    font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem);
    color: var(--color-text);
    margin: 32px 0 12px;
    letter-spacing: -0.025em;
    line-height: 1.3;
}
.site-content p {
    line-height: 1.65;
    margin: 0 0 18px;
    color: var(--color-text-2);
    font-size: 17px;
    letter-spacing: -0.015em;
}
.site-content strong { color: var(--color-text); font-weight: 600; }
.site-content em { color: var(--color-primary); font-style: normal; font-weight: 500; }
.site-content ul, .site-content ol { margin: 0 0 20px; padding-left: 24px; }
.site-content li { margin: 6px 0; line-height: 1.65; color: var(--color-text-2); }
.site-content li::marker { color: var(--color-muted); }

/* ============= 링크 (밑줄 제거 · 컬러+굵기) ============= */
.site-content a,
.entry-content a,
.page-content a,
.mag-body a,
article.magazine .site-content a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.site-content a:hover,
.entry-content a:hover,
.page-content a:hover,
.mag-body a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* ============= 표 (애플 카드 톤) ============= */
.site-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--color-border-soft);
    margin: 24px 0;
    background: var(--color-canvas);
    font-size: 15px;
}
.site-content th, .site-content td {
    padding: 14px 18px;
    text-align: left;
    border: 0;
    vertical-align: top;
}
.site-content th {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--color-border-soft);
}
.site-content td { border-top: 1px solid var(--color-border-soft); color: var(--color-text-2); }
.site-content tr:first-child td { border-top: 0; }

/* ============= 히어로 (fullbleed white · huge type) ============= */
/* .hero--themed 는 배경 이미지/그라데이션이 인라인으로 주입되므로 흰색 강제에서 제외 */
.hero:not(.hero--themed), .theme-drain .hero:not(.hero--themed) {
    background: var(--color-canvas) !important;
    color: var(--color-text) !important;
    position: relative;
    padding: 96px 0 80px !important;
    min-height: auto !important;
    border-bottom: 0 !important;
    overflow: hidden;
    text-align: left;
}
.hero:not(.hero--themed)::before, .hero:not(.hero--themed)::after,
.theme-drain .hero:not(.hero--themed)::before { display: none !important; content: none !important; }
.hero:not(.hero--themed) .hero__overlay { display: none !important; }
.hero__container { position: relative; z-index: 2; padding: 0 24px; max-width: var(--max-width); margin: 0 auto; }
.hero__content { max-width: 800px; }
.hero__badge {
    display: inline-block !important;
    background: var(--color-primary-tint) !important;
    color: var(--color-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill) !important;
    text-transform: none !important;
    margin-bottom: 20px !important;
}
.hero:not(.hero--themed) .hero__title, .theme-drain .hero:not(.hero--themed) .hero__title {
    color: var(--color-text) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    letter-spacing: -0.055em !important;
    line-height: 1.05 !important;
    font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5rem) !important;
    margin: 12px 0 20px !important;
}
.hero:not(.hero--themed) .hero__desc, .theme-drain .hero:not(.hero--themed) .hero__desc {
    color: var(--color-muted) !important;
    font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem) !important;
    line-height: 1.5 !important;
    max-width: 640px !important;
    font-weight: 400 !important;
    margin: 0 0 32px !important;
}
.hero__cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn--phone, .hero .btn.btn--lg,
.theme-drain .hero .btn--phone {
    background: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 500 !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
    letter-spacing: -0.01em !important;
    font-size: 16px !important;
    border: 0 !important;
    transition: background .15s !important;
}
.hero .btn--phone:hover, .hero .btn.btn--lg:hover,
.theme-drain .hero .btn--phone:hover { background: var(--color-primary-hover) !important; transform: none !important; }

/* ============= .hero--themed (single-area_service 배경 이미지 히어로) ============= */
.hero--themed {
    position: relative;
    padding: 88px 0 76px;
    background-color: #0F172A;
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
    text-align: left;
    border-bottom: 0;
}
.hero--themed .hero__overlay--themed {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 1;
    pointer-events: none;
}
.hero--themed .hero__container { position: relative; z-index: 2; }
.hero--themed .hero__title {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
    font-weight: 700 !important;
    line-height: 1.15 !important;
    font-size: clamp(2rem, 1.2rem + 3.6vw, 3.75rem) !important;
    margin: 12px 0 18px !important;
}
.hero--themed .hero__desc {
    color: rgba(255, 255, 255, .94) !important;
    font-size: clamp(1rem, .95rem + .3vw, 1.15rem) !important;
    line-height: 1.6 !important;
    max-width: 680px !important;
    margin: 0 0 26px !important;
}
.hero--themed .hero__badge {
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ============= 매거진 폴백 썸네일 (single-magazine.php) ============= */
.single__thumbnail--fallback {
    margin: 24px 0 8px;
    border-radius: 12px;
    overflow: hidden;
    background: #F1F5F9;
}
.single__thumbnail--fallback img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ============= 섹션 · 카드 ============= */
.section { padding: var(--spacing-xl) 0 !important; background: var(--color-canvas); }
.section--alt { background: var(--color-surface) !important; }
.section__header {
    text-align: center !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
}
.section__title {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important;
    letter-spacing: -0.035em !important;
    margin: 0 auto 14px !important;
    text-align: center !important;
    width: 100%;
}
.section__desc {
    color: var(--color-muted) !important;
    font-size: 16px;
    line-height: 1.65;
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
    display: block;
}
.section__subtitle {
    color: var(--color-primary) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 14px !important;
    margin-bottom: 10px;
}

/* CTA 버튼 전역 (오렌지 → SF Blue) */
.cta-btn, .btn-cta, .btn.btn--primary {
    background: var(--color-primary) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-pill) !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: -0.01em;
    min-height: 44px;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .15s;
    border: 0 !important;
}
.cta-btn:hover, .btn-cta:hover, .btn.btn--primary:hover {
    background: var(--color-primary-hover) !important;
    transform: none !important;
}
.btn--phone { background: var(--color-primary) !important; color: #fff !important; }

/* ============= 시도 그리드 (홈·서비스 하단) — <ul> 방식 ============= */
.drain24-sido-grid,
.site-content .drain24-sido-grid,
.site-content ul.drain24-sido-grid,
.page-content .drain24-sido-grid,
.page-content ul.drain24-sido-grid,
.entry-content .drain24-sido-grid,
body.theme-drain ul.drain24-sido-grid {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    padding: 0 !important;
    margin: 24px 0 48px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    max-width: none !important;
}
.drain24-sido-grid > li,
.site-content .drain24-sido-grid > li,
.page-content .drain24-sido-grid > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.drain24-sido-grid > li::marker,
.drain24-sido-grid > li::before { content: none !important; display: none !important; }
.drain24-sido-grid a {
    display: block;
    padding: 18px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    color: var(--color-text) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.015em;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.drain24-sido-grid a:hover {
    background: var(--color-canvas);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}
.drain24-sido-grid a strong {
    color: var(--color-text);
    font-weight: 600;
    margin-right: 6px;
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

/* ============= 시도 카드 그리드 (카테고리 페이지 · <div>+<a>) — 새 컴포넌트 ============= */
.drain-sido-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 48px;
    max-width: none;
    padding: 0;
    list-style: none;
}
.drain-sido-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    color: var(--color-text) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.015em;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    flex: 0 1 calc((100% - 48px) / 5);
    min-width: 180px;
    max-width: 220px;
}
.drain-sido-card:hover {
    background: var(--color-canvas);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}
.drain-sido-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-surface);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--color-border-soft);
}
.drain-sido-card__media:not([style*="background-image"]) {
    background: linear-gradient(135deg, #F0F7FF 0%, #E0EFFF 60%, #DBEAFE 100%);
}
.drain-sido-card__ph {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0B5FFF;
    opacity: .55;
}
.drain-sido-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 12px 16px;
}
.drain-sido-card strong {
    color: var(--color-text);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.025em;
}
.drain-sido-card span {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.005em;
}
@media (max-width: 900px) {
    .drain-sido-card { flex: 0 1 calc((100% - 24px) / 3); }
}
@media (max-width: 600px) {
    .drain-sido-cards { gap: 10px; }
    .drain-sido-card { flex: 0 1 calc((100% - 10px) / 2); min-width: 0; }
    .drain-sido-card__body { padding: 12px 10px 14px; }
    .drain-sido-card strong { font-size: 15px; }
}

/* 서비스 페이지 하단 지역 리스트 */
.site-content h3 + ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px auto 28px;
    max-width: var(--max-width-narrow);
}
.site-content h3 + ul > li,
.page-content h3 + ul > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    background: none !important;
}
.site-content h3 + ul > li::marker,
.site-content h3 + ul > li::before,
.page-content h3 + ul > li::marker,
.page-content h3 + ul > li::before { content: none !important; display: none !important; }
.site-content h3 + ul a {
    display: inline-block;
    padding: 9px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    color: var(--color-text) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.015em;
    transition: background .15s, border-color .15s, color .15s;
}
.site-content h3 + ul a:hover {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    color: var(--color-primary) !important;
}

/* ============= 푸터 (화이트 톤 · 지역 accordion) ============= */
.drain-footer {
    background: var(--color-surface);
    color: var(--color-text-2);
    padding: var(--spacing-xl) 0 32px;
    margin-top: 0;
    border-top: 1px solid var(--color-border-soft);
}
.drain-footer__lead {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #fff;
    padding: 44px 40px;
    border-radius: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin-bottom: 56px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
}
.drain-footer__lead::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at center, rgba(255,90,54,.10) 0%, rgba(255,90,54,0) 70%);
}
.drain-footer__lead > * { position: relative; z-index: 1; }
.drain-footer__lead-eyebrow {
    font-size: 12px;
    color: rgba(255,255,255,.68);
    margin: 0;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.drain-footer__lead-headline {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #fff;
    line-height: 1.2;
}
.drain-footer__lead-headline a {
    color: #FF7A5A !important;
    text-decoration: none !important;
    background: linear-gradient(90deg, #FF7A5A 0%, #FF5A36 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter .15s ease;
}
.drain-footer__lead-headline a:hover { filter: brightness(1.15); text-decoration: none !important; }
@media (max-width: 600px) {
    .drain-footer__lead { padding: 32px 20px; border-radius: 16px; margin-bottom: 32px; }
}

.drain-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
@media (max-width: 900px) { .drain-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .drain-footer__grid { grid-template-columns: 1fr; } }

/* ============= 푸터 지역 카드 그리드 + 대표 서비스 pill (v4.1 신규) ============= */
.drain-footer__areas-block {
    padding: 32px 0 24px;
    margin-bottom: 24px;
    border-top: 1px solid var(--color-border-soft);
}
.drain-footer__areas-flex {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 32px;
}
@media (max-width: 900px) { .drain-footer__areas-flex { grid-template-columns: 1fr; gap: 24px; } }

.drain-footer__areas-title {
    color: var(--color-text);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
.drain-footer__areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
@media (max-width: 900px) { .drain-footer__areas-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .drain-footer__areas-grid { grid-template-columns: repeat(2, 1fr); } }

.drain-footer__area-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--color-canvas);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    text-decoration: none !important;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.drain-footer__area-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.drain-footer__area-card strong {
    color: var(--color-text);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
}
.drain-footer__area-card span {
    color: var(--color-muted);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* 대표 서비스 pill 사이드 */
.drain-footer__services-side { }
.drain-footer__services-pills {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.drain-footer__services-pills li { margin: 0; padding: 0; }
.drain-footer__services-pills li::marker { content: none; }
.drain-footer__services-pills a {
    display: inline-block;
    padding: 8px 14px;
    background: var(--color-canvas);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    color: var(--color-text) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.015em;
    transition: background .15s, border-color .15s, color .15s;
}
.drain-footer__services-pills a:hover {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    color: var(--color-primary) !important;
}
.drain-footer__services-hint {
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0;
}
.drain-footer__services-hint a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.drain-footer__services-hint a:hover { text-decoration: underline; }

.drain-footer__col { color: var(--color-text-2); font-size: 14px; }
.drain-footer__col h3,
.drain-footer__col h4,
.drain-footer__panel summary h4 {
    color: var(--color-text);
    font-weight: 600;
    margin: 0 0 16px;
    font-size: 14px;
    letter-spacing: -0.01em;
    padding: 0; border: 0;
}
.drain-footer__col a { color: var(--color-text-2); text-decoration: none; font-size: 13.5px; }
.drain-footer__col a:hover { color: var(--color-primary); }
.drain-footer__details {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 13.5px;
    color: var(--color-muted);
    line-height: 1.6;
}
.drain-footer__desc { color: var(--color-muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.drain-footer__panel { }
.drain-footer__panel summary { list-style: none; cursor: default; }
.drain-footer__panel summary::-webkit-details-marker { display: none; }
.drain-footer__panel ul { list-style: none; padding: 0; margin: 8px 0 0 0; display: flex; flex-direction: column; gap: 8px; }

/* 지역 accordion (col--areas) — 시도별 details/summary */
.drain-footer__areas details {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.drain-footer__areas details:last-child { border-bottom: 0; }
.drain-footer__areas summary {
    list-style: none; cursor: pointer;
    font-weight: 500; font-size: 14px; color: var(--color-text);
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0;
}
.drain-footer__areas summary::-webkit-details-marker { display: none; }
.drain-footer__areas summary::after {
    content: '+'; color: var(--color-muted);
    font-weight: 400; font-size: 16px; margin-left: 8px;
}
.drain-footer__areas details[open] summary::after { content: '−'; }
.drain-footer__areas summary a { color: var(--color-text); text-decoration: none; }
.drain-footer__areas summary a:hover { color: var(--color-primary); }
.drain-footer__areas .sido-list {
    list-style: none; margin: 8px 0 0 0; padding: 8px 0 4px;
    display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.drain-footer__areas .sido-list li { margin: 0; }
.drain-footer__areas .sido-list a { color: var(--color-muted); font-size: 13px; text-decoration: none; }
.drain-footer__areas .sido-list a:hover { color: var(--color-primary); }

.drain-footer__bottom {
    border-top: 1px solid var(--color-border-soft);
    padding-top: 20px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-size: 13px; color: var(--color-muted);
}
.drain-footer__copy { color: var(--color-muted); }
.drain-footer__bottom a { color: var(--color-muted); text-decoration: none; }
.drain-footer__bottom a:hover { color: var(--color-primary); }

/* 부모 default sido-group도 accordion 톤 유지 */
.site-footer__sido-group { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-soft); }
.site-footer__sido-group .sido-head { color: var(--color-text); font-weight: 500; margin: 0 0 6px; font-size: 14px; padding: 0; border: 0; }
.site-footer__sido-group .sido-head a { color: var(--color-text); text-decoration: none; }
.site-footer__sido-group .sido-head a:hover { color: var(--color-primary); }
.site-footer__sido-group .sido-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.site-footer__sido-group .sido-list a { color: var(--color-muted); font-size: 13px; }
.site-footer__sido-group .sido-list a:hover { color: var(--color-primary); text-decoration: none; }

/* ============= drain-faq (통일 FAQ 렌더 · v4.2) ============= */
.drain-faq-title {
    font-weight: 600 !important;
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.75rem) !important;
    color: var(--color-text) !important;
    letter-spacing: -0.035em !important;
    margin: 48px auto 16px !important;
    padding: 0 !important;
    border: 0 !important;
    max-width: var(--max-width-narrow) !important;
    text-align: left;
}
.drain-faq,
.drain-faq--auto {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: var(--max-width-narrow);
    margin: 24px auto 32px;
    padding: 0;
    list-style: none;
}
.drain-faq details,
.drain-faq__item {
    background: var(--color-canvas);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: 16px 22px;
    margin: 0;
    transition: border-color .15s, box-shadow .15s;
}
.drain-faq details:hover,
.drain-faq__item:hover { border-color: var(--color-border); }
.drain-faq details[open],
.drain-faq__item[open] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card);
}
.drain-faq summary,
.drain-faq__item > summary {
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    letter-spacing: -0.02em;
    line-height: 1.5;
    gap: 12px;
}
.drain-faq summary::-webkit-details-marker,
.drain-faq__item > summary::-webkit-details-marker { display: none; }
.drain-faq summary::after,
.drain-faq__item > summary::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 20px; height: 20px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / 20px 20px;
    transition: transform .2s;
}
.drain-faq details[open] > summary::after,
.drain-faq__item[open] > summary::after { transform: rotate(180deg); }
.drain-faq details > *:not(summary),
.drain-faq__item > *:not(summary) {
    margin-top: 12px;
    color: var(--color-text-2);
    line-height: 1.65;
    font-size: 15.5px;
    letter-spacing: -0.01em;
}
.drain-faq__answer p { margin: 0 0 10px; color: inherit; font-size: inherit; }
.drain-faq__answer p:last-child { margin-bottom: 0; }

/* FAQ 앞 h2 헤더 톤 통일 */
.site-content h2 + .drain-faq,
.site-content h2 + .drain-faq--auto { margin-top: 20px; }

/* 부모 컴포넌트 .accordion (카테고리 페이지 등) 도 drain-faq 톤으로 override */
.accordion { display: flex; flex-direction: column; gap: 8px; max-width: var(--max-width-narrow); margin: 24px auto 32px; }
.accordion__item {
    background: var(--color-canvas) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    padding: 0 !important;
    transition: border-color .15s, box-shadow .15s;
}
.accordion__item:hover { border-color: var(--color-border) !important; }
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-card);
}
.accordion__trigger {
    width: 100%;
    text-align: left;
    padding: 16px 22px !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    font-size: 16px !important;
    line-height: 1.5;
    letter-spacing: -0.02em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.accordion__trigger:hover { background: var(--color-surface) !important; }
.accordion__trigger[aria-expanded="true"] {
    background: transparent !important;
    color: var(--color-text) !important;
}
.accordion__icon {
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
    color: var(--color-muted) !important;
    transition: transform .2s;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__trigger::after { display: none !important; }
.accordion__panel { padding: 0 22px 18px !important; color: var(--color-text-2) !important; line-height: 1.65; font-size: 15.5px; letter-spacing: -0.01em; }
.accordion__panel[aria-hidden="true"] { display: none; }
.accordion__content { color: inherit; }
.accordion__content p { margin: 0 0 10px; color: inherit; }
.accordion__content p:last-child { margin: 0; }

/* ============= 문의 폼 · contact-info ============= */
.contact-form, .drain-contact-form {
    background: var(--color-canvas) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-lg) !important;
    padding: 32px !important;
    box-shadow: var(--shadow-card);
}
.form__group { margin-bottom: 18px; }
.form__label, .drain-contact-form label {
    display: block !important;
    font-size: 13px !important;
    color: var(--color-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.005em;
}
.form__input, .form__textarea,
.drain-contact-form input, .drain-contact-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-btn) !important;
    font-family: var(--font-family) !important;
    font-size: 15px !important;
    background: var(--color-canvas) !important;
    color: var(--color-text) !important;
    letter-spacing: -0.01em;
}
.form__input:focus, .form__textarea:focus,
.drain-contact-form input:focus, .drain-contact-form textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-tint);
}
.form__textarea { min-height: 120px; resize: vertical; }
.drain-contact-form button {
    background: var(--color-primary); color: #fff; border: 0;
    border-radius: var(--radius-pill); padding: 14px 28px;
    font-weight: 500; font-size: 15px; cursor: pointer; width: 100%;
    box-shadow: none;
}
.drain-contact-form button:hover { background: var(--color-primary-hover); }

.contact-info__item { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; }
.contact-info__icon {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: var(--color-primary-tint); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info__icon svg { width: 18px; height: 18px; }
.contact-info__label {
    font-size: 12px !important; color: var(--color-muted) !important;
    font-weight: 500 !important; margin: 0 0 4px !important;
    letter-spacing: -0.005em; text-transform: none !important;
    border-left: none !important; padding-left: 0 !important;
}
.contact-info__value {
    color: var(--color-text) !important; font-weight: 500 !important;
    font-size: 16px; text-decoration: none !important;
    letter-spacing: -0.02em;
}
.contact-info__value--phone { color: var(--color-primary) !important; font-size: 18px; }

/* ============= 프로세스 단계 (4단계) ============= */
.process-steps {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    counter-reset: none !important;
}
@media (max-width: 800px) { .process-steps { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } }
@media (max-width: 480px) { .process-steps { grid-template-columns: 1fr !important; gap: 16px !important; } }

.process-step {
    position: relative;
    background: var(--color-canvas) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius-md) !important;
    padding: 22px 22px 20px !important;
    counter-increment: none !important;
    text-align: left;
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: visible;
}
.process-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(30, 64, 175, .22), 0 4px 10px -4px rgba(15, 23, 42, .08);
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border-soft)) !important;
}
.process-step::before { content: none !important; }

/* 카드 사이 연결 화살표 (데스크톱만) */
.process-step::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    width: 12px; height: 12px;
    border-top: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    opacity: .85;
}
.process-step:last-child::after { display: none; }
@media (max-width: 800px) {
    .process-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 480px) {
    .process-step::after { display: none !important; }
}

/* STEP 라벨 */
.process-step__eyebrow {
    display: inline-block;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    color: var(--color-primary) !important;
    background: var(--color-primary-tint);
    padding: 3px 8px;
    border-radius: 999px;
    margin-bottom: 12px;
}

/* 아이콘 영역 — 배경 없이 크게, 대비 확보 */
.process-step__icon-wrap {
    width: 100%;
    height: 150px;
    display: flex; align-items: center; justify-content: center;
    margin: 8px 0 20px;
    background: transparent;
    box-shadow: none;
}
.process-step__icon {
    display: block;
    width: 150px; height: 150px;
    max-width: 100%;
    margin: 0 !important;
    object-fit: contain;
    filter: contrast(1.05) saturate(1.1);
}
@media (max-width: 800px) {
    .process-step__icon-wrap { height: 128px; margin: 6px 0 16px; }
    .process-step__icon { width: 128px; height: 128px; }
}

/* 넘버 배지 — 우상단 고정 */
.process-step .process-step__num {
    position: absolute !important;
    top: 16px; right: 16px;
    left: auto !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 700 !important; font-size: 12px !important;
    margin: 0 !important;
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--color-primary) 45%, transparent);
    letter-spacing: 0;
}

.process-step h3 {
    font-weight: 700 !important; color: var(--color-text) !important;
    margin: 0 0 6px !important; font-size: 16px !important;
    letter-spacing: -0.025em;
    line-height: 1.35;
}
.process-step p {
    color: var(--color-text-2) !important; margin: 0 0 14px !important;
    font-size: 14px; line-height: 1.6;
}

/* 소요시간 · 부가정보 메타 */
.process-step__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-canvas));
    color: color-mix(in srgb, var(--color-primary) 85%, var(--color-text));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.process-step__meta-ico {
    flex-shrink: 0;
    color: currentColor;
}

/* ============= 카테고리 hero · 카드 ============= */
.drain-category-hero {
    background: var(--color-surface);
    color: var(--color-text);
    padding: 64px 0 56px;
    margin-bottom: 40px;
    position: relative;
    border-bottom: 1px solid var(--color-border-soft);
}
.drain-category-hero::before { display: none !important; }
.drain-category-hero__eyebrow {
    color: var(--color-primary); font-size: 13px;
    letter-spacing: 0; text-transform: none;
    margin: 0 0 12px; font-weight: 500;
}
.drain-category-hero__title {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 600; margin: 0 0 16px;
    letter-spacing: -0.045em;
    line-height: 1.1;
    color: var(--color-text);
}
.drain-category-hero__desc {
    font-size: 18px; color: var(--color-muted);
    max-width: 640px; line-height: 1.5; margin: 0;
}
.drain-category-hero__cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 24px; padding: 12px 24px;
    background: var(--color-primary); color: #fff !important; text-decoration: none;
    border-radius: var(--radius-pill); font-weight: 500;
    letter-spacing: -0.01em; font-size: 15px;
    box-shadow: none;
}
.drain-category-hero__cta:hover { background: var(--color-primary-hover); transform: none; }

.drain-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px auto;
    max-width: var(--max-width);
    padding: 0 24px;
}
.drain-cat-card {
    background: var(--color-canvas);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    box-shadow: var(--shadow-card);
}
.drain-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: var(--color-primary);
}
.drain-cat-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-surface);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--color-border-soft);
    text-decoration: none;
    transition: background-size .35s ease;
}
.drain-cat-card__media:not([style*="background-image"]) {
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
}
.drain-cat-card__media-ph {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-primary, #0B5FFF);
    opacity: .55;
}
.drain-cat-card__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .35s ease;
}
.drain-cat-card:hover .drain-cat-card__media img { transform: scale(1.03); }
.drain-cat-card:hover .drain-cat-card__media[style*="background-image"] { background-size: 105%; }
.drain-cat-card__body { padding: 22px 24px; }
.drain-cat-card__eyebrow {
    color: var(--color-primary); font-size: 12px;
    letter-spacing: 0; text-transform: none;
    font-weight: 500; margin: 0 0 8px;
}
.drain-cat-card__title {
    font-size: 1.15rem; color: var(--color-text);
    font-weight: 600; margin: 0 0 10px;
    line-height: 1.35; letter-spacing: -0.025em;
}
.drain-cat-card__title a { color: inherit; text-decoration: none; }
.drain-cat-card__title a:hover { color: var(--color-primary); }
.drain-cat-card__desc { color: var(--color-text-2); font-size: 14px; line-height: 1.55; margin: 0; }
.drain-cat-card__footer {
    border-top: 1px solid var(--color-border-soft);
    padding: 12px 24px;
    background: var(--color-surface);
    font-size: 12px; color: var(--color-muted);
    font-weight: 500;
}

.drain-steps {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: 40px;
}
.drain-steps__title { font-size: 1.5rem; color: var(--color-text); margin: 0 0 8px; text-align: center; font-weight: 600; letter-spacing: -0.03em; }
.drain-steps__desc { text-align: center; color: var(--color-muted); margin: 0 0 32px; }
.drain-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.drain-step {
    position: relative;
    padding: 24px 22px 22px 66px;
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-card);
}
.drain-step__num {
    position: absolute; left: 20px; top: 24px;
    width: 34px; height: 34px; border-radius: var(--radius-pill);
    background: var(--color-primary-tint); color: var(--color-primary);
    font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; box-shadow: none;
}
.drain-step__title { font-weight: 600; color: var(--color-text); margin: 0 0 6px; font-size: 15px; letter-spacing: -0.02em; }
.drain-step__desc { color: var(--color-text-2); font-size: 13px; line-height: 1.55; margin: 0; }

/* 지역 리스트 (부모 .area-region-list) */
.area-region-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: var(--max-width); margin: 0 auto; }
.area-region { background: var(--color-canvas); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 22px 24px; box-shadow: var(--shadow-card); }
.area-region__name { color: var(--color-text) !important; font-weight: 600 !important; margin: 0 0 12px !important; font-size: 16px !important; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-soft); letter-spacing: -0.02em; }
.area-links { display: flex; flex-wrap: wrap; gap: 8px; }
.area-link-tag { display: inline-block; padding: 6px 12px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-pill); color: var(--color-text); text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s; }
.area-link-tag:hover { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary); }

/* .page-content 은 카테고리·페이지 wrapper 로 사용. wide 폭. */
.page-content { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
/* 매거진에서만 narrow */
article.magazine .page-content { max-width: var(--max-width-narrow); }
.hero__cta { margin-top: 24px; }

/* FAQ eyebrow 는 부모테마 content-faq.php 의 span.section__subtitle 로 이미 렌더링됨.
   과거 ::before 로 'FAQ' 를 주입하던 규칙은 라벨 중복(FAQ FAQ 자주 묻는 질문) 원인이라 제거. */

/* ============= 매거진 · 카테고리 배지 (파스텔) ============= */
.drain24-mag-cat {
    margin: 0 0 20px 0 !important;
    font-size: 14px;
}
.drain24-mag-cat a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.drain24-mag-cat.mag-cat--issue a { background: var(--color-accent-issue); color: #B7501C; }
.drain24-mag-cat.mag-cat--case a { background: var(--color-accent-case); color: var(--color-primary); }
.drain24-mag-cat.mag-cat--tips a { background: var(--color-accent-tips); color: #1D7A2E; }
.drain24-mag-cat.mag-cat--review a { background: var(--color-accent-review); color: #8B6512; }
.drain24-mag-cat a:hover { opacity: .85; }

.drain24-mag-back {
    margin: 40px 0 0;
    padding: 16px 20px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--color-text-2);
}
.drain24-mag-back a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.drain24-mag-back a:hover { text-decoration: underline; }

/* ============= 매거진 목차 (신규) ============= */
.mag-toc {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin: 32px auto 40px;
    font-size: 14px;
    max-width: var(--max-width-narrow);
}
.mag-toc__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.mag-toc ol { list-style: decimal; padding-left: 20px; margin: 0; }
.mag-toc li { margin: 4px 0; color: var(--color-text-2); }
.mag-toc a { color: var(--color-text); text-decoration: none; font-weight: 400; }
.mag-toc a:hover { color: var(--color-primary); text-decoration: underline; }

/* ============= 매거진 콜아웃 (파스텔 배경) ============= */
.callout {
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin: 24px auto;
    max-width: var(--max-width-narrow);
    display: flex;
    gap: 14px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--color-text-2);
}
.callout p { margin: 0 0 8px; color: inherit; font-size: inherit; }
.callout p:last-child { margin: 0; }
.callout strong { color: var(--color-text); }
.callout__title { font-weight: 600; color: var(--color-text); display: block; margin-bottom: 6px; font-size: 15px; }
.callout--warn { background: #FFF4F4; border-left: 3px solid var(--color-danger); }
.callout--info { background: var(--color-primary-tint); border-left: 3px solid var(--color-primary); }
.callout--tip  { background: var(--color-accent-tips); border-left: 3px solid var(--color-success); }
.callout--q    { background: var(--color-accent-review); border-left: 3px solid var(--color-warn); }

/* ============= 매거진 본문 표 ============= */
.mag-body table,
article.magazine .site-content table {
    box-shadow: 0 0 0 1px var(--color-border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mag-body th, article.magazine .site-content th { background: var(--color-surface); }

/* ============= 매거진 관련글 카드 (하단) ============= */
.mag-related {
    margin: 56px 0 0;
    max-width: var(--max-width);
    padding: 0 24px;
}
.mag-related__title {
    font-size: 18px; font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin: 0 0 20px;
}
.mag-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.mag-related__card {
    background: var(--color-canvas);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    transition: transform .2s, box-shadow .2s;
}
.mag-related__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.mag-related__card a { color: var(--color-text); text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: -0.02em; line-height: 1.35; display: block; }
.mag-related__card a:hover { color: var(--color-primary); text-decoration: none; }
.mag-related__card .date { display: block; margin-top: 8px; font-size: 12px; color: var(--color-muted); }

/* ============= 스크롤 페이드인 (reveal.js) ============= */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(0.22, 1, 0.36, 1), transform .8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============= sr-only ============= */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sr-only:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; padding: 12px 20px; background: var(--color-primary); color: #fff; border-radius: var(--radius-md); z-index: 999; clip: auto; }

/* Custom logo 크기 + 네비 한글 세로쪼갬 방지 + CTA 후킹문구 (2026-08-14) */
.drain-header__inner { min-height: 64px; padding: 6px 0; }
.drain-header__brand { flex: 0 0 auto; display: flex; align-items: center; align-self: stretch; }
.drain-header__brand .custom-logo-link { display: inline-flex; align-items: center; line-height: 1; }
.drain-header__brand .custom-logo { height: 40px; width: auto; max-width: 240px; display: block; object-fit: contain; object-position: left center; }
@media (max-width: 900px) { .drain-header__brand .custom-logo { height: 32px; max-width: 180px; } }

.drain-nav__list > li,
.drain-nav .site-nav__list > li { flex: 0 0 auto; }
.drain-nav__list > li > a,
.drain-nav .site-nav__list > li > a { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.drain-nav .site-nav__list { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.drain-nav .site-nav__list a { color: var(--color-text); text-decoration: none; font-size: 14px; font-weight: 400; padding: 8px 2px; letter-spacing: -0.01em; opacity: .88; transition: opacity .15s; }
.drain-nav .site-nav__list a:hover { opacity: 1; }

/* CTA 버튼: 후킹문구 + 각진 라운드 */
.drain-header__phone-sticker { border-radius: 10px !important; padding: 9px 18px !important; }
.drain-header__phone-hook { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 900px) {
  .drain-header__phone-sticker { border-radius: 8px !important; padding: 7px 14px !important; }
  .drain-header__phone-hook { font-size: 13px; }
}

/* =====================================================================
   프리미엄 애니메이션 팩 v1 (2026-08-14)
   - 상단 티커(.drain-topbar) 좌향 무한 마퀴
   - 히어로 스태거 진입 (.stg > *)
   - 카드 스태거 진입 (.reveal--stagger > *)
   - 스탯 카운트업 (.stat-num)
   - CTA shine (.btn--phone::before) + 필 pulse
   - 히어로 미묘한 파라랭스 (--sy 변수)
   - 모두 prefers-reduced-motion 대응
   ===================================================================== */

/* --- Numeric tabular for stats --- */
.stat-num, .count-up {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' on, 'ss03' on;
}

/* --- 상단 티커 (헤더 위 얀 밴드) --- */
.drain-topbar {
    position: relative;
    background: linear-gradient(90deg, #0A1A2E 0%, #101E3A 50%, #0A1A2E 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.06);
    height: 32px;
    display: flex;
    align-items: center;
}
.drain-topbar__viewport {
    display: flex;
    width: max-content;
    animation: drain-topbar-slide 32s linear infinite;
    will-change: transform;
    gap: 0;
}
.drain-topbar:hover .drain-topbar__viewport { animation-play-state: paused; }
.drain-topbar__track {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 0 18px;
    white-space: nowrap;
}
.drain-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #E7EEF7;
    font-size: 13px;
    text-decoration: none;
}
.drain-topbar__item strong {
    color: #7AB3FF;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.drain-topbar__item::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px; border-radius: 50%;
    background: #7AB3FF;
    margin-right: 2px;
    opacity: .8;
}
.drain-topbar__item.is-phone {
    background: rgba(122,179,255,.12);
    padding: 4px 12px;
    border-radius: 999px;
    color: #fff;
}
.drain-topbar__item.is-phone::before { display: none; }
@keyframes drain-topbar-slide {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); }
}
@media (max-width: 640px) {
    .drain-topbar { height: 28px; font-size: 12px; }
    .drain-topbar__track { gap: 28px; }
    .drain-topbar__item, .drain-topbar__item.is-phone { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .drain-topbar__viewport { animation: none; transform: none; }
}

/* --- 히어로 진입 스태거 (nth-child delay) --- */
.stg > * {
    opacity: 0;
    transform: translateY(14px);
    animation: stg-in .7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stg > *:nth-child(1) { animation-delay: .08s; }
.stg > *:nth-child(2) { animation-delay: .22s; }
.stg > *:nth-child(3) { animation-delay: .36s; }
.stg > *:nth-child(4) { animation-delay: .50s; }
.stg > *:nth-child(5) { animation-delay: .64s; }
.stg > *:nth-child(6) { animation-delay: .78s; }
@keyframes stg-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .stg > * { opacity: 1; transform: none; animation: none; }
}

/* --- 카드 그리드 진입 스태거 (reveal.js 와 조합) --- */
.reveal--stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(0.22, 1, 0.36, 1), transform .7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
    will-change: opacity, transform;
}
.reveal--stagger.in > *,
.reveal--stagger.is-in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal--stagger > * { opacity: 1; transform: none; transition: none; }
}

/* --- CTA shine 오버레이 --- */
.btn--phone, .btn.btn--lg, .btn.btn--primary,
.cta-btn, .btn-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn--phone::before, .btn.btn--lg::before, .btn.btn--primary::before,
.cta-btn::before, .btn-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -110%;
    width: 90%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.28) 55%, transparent 100%);
    transform: skewX(-18deg);
    z-index: 1;
    pointer-events: none;
    transition: left .8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn--phone:hover::before, .btn.btn--lg:hover::before, .btn.btn--primary:hover::before,
.cta-btn:hover::before, .btn-cta:hover::before {
    left: 110%;
}
.btn--phone > *, .btn.btn--lg > *, .btn.btn--primary > *,
.cta-btn > *, .btn-cta > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .btn--phone::before, .btn.btn--lg::before, .btn.btn--primary::before,
    .cta-btn::before, .btn-cta::before { display: none; }
}

/* --- 전화 필 미묘한 pulse (헤더 CTA) --- */
.drain-header__phone-sticker {
    animation: drain-phone-pulse 2.6s ease-in-out infinite;
}
@keyframes drain-phone-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,113,227,.35); }
    50%      { box-shadow: 0 0 0 8px rgba(0,113,227,0); }
}
@media (prefers-reduced-motion: reduce) {
    .drain-header__phone-sticker { animation: none; }
}

/* --- 히어로 이미지 미묘한 파라랭스 --- */
.hero-visual, .he-hero__visual {
    transform: translate3d(0, calc(var(--sy, 0) * -0.03px), 0);
    transition: transform .05s linear;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .hero-visual, .he-hero__visual { transform: none; }
}

/* --- 카드 hover 리프트 강화 (기존 유지 · 새 카드 대응) --- */
.he-problem-card, .he-review-card, .he-process-card, .he-mag-card, .he-service-card {
    transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color .25s;
}

/* --- 진입 카운트업 시각 안정 --- */
.count-up { display: inline-block; min-width: 2ch; text-align: center; }

/* --- CTA 블록: 한국인 기술진 사진 배경 (2026-08-14) --- */
.cta-block {
    position: relative;
    overflow: hidden;
    text-align: right;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
    background-image:
        linear-gradient(90deg,
            rgba(10, 22, 55, 0.10) 0%,
            rgba(10, 22, 55, 0.55) 45%,
            rgba(10, 22, 55, 0.82) 100%),
        image-set(
            url('/wp-content/themes/developer-developer-drain/assets/images/cta-technician-korean-1600.webp') type('image/webp'),
            url('/wp-content/themes/developer-developer-drain/assets/images/cta-technician-korean-1600.jpg')  type('image/jpeg')
        );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(10, 22, 55, 0.18);
}

@media (min-width: 1400px) {
    .cta-block {
        background-image:
            linear-gradient(90deg,
                rgba(10, 22, 55, 0.10) 0%,
                rgba(10, 22, 55, 0.55) 45%,
                rgba(10, 22, 55, 0.82) 100%),
            image-set(
                url('/wp-content/themes/developer-developer-drain/assets/images/cta-technician-korean-2400.webp') type('image/webp'),
                url('/wp-content/themes/developer-developer-drain/assets/images/cta-technician-korean-2400.jpg')  type('image/jpeg')
            );
    }
}

@media (max-width: 640px) {
    .cta-block {
        text-align: center;
        background-image:
            linear-gradient(180deg,
                rgba(10, 22, 55, 0.35) 0%,
                rgba(10, 22, 55, 0.75) 55%,
                rgba(10, 22, 55, 0.90) 100%),
            image-set(
                url('/wp-content/themes/developer-developer-drain/assets/images/cta-technician-korean-800.webp') type('image/webp'),
                url('/wp-content/themes/developer-developer-drain/assets/images/cta-technician-korean-800.jpg')  type('image/jpeg')
            );
        background-position: 20% center;
    }
}

/* .site-content h3 / p 의 색 오버라이드를 이기기 위해 specificity 강화 */
.site-content .cta-block__title,
.cta-block .cta-block__title {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
}
.site-content .cta-block__desc,
.cta-block .cta-block__desc {
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    font-size: 15px;
    margin: 0 0 18px;
}
/* 히어로 위 hook eyebrow */
.cta-block__eyebrow {
    display: inline-block;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    margin: 0 0 14px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
/* 제목 안의 전화번호 강조 */
.cta-block__title .cta-block__phone {
    color: #FCD34D;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-weight: 800;
    white-space: nowrap;
}

.cta-block__buttons {
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .cta-block__buttons {
        justify-content: center;
    }
}

/* style.css */
/*
Theme Name: drain24 - 하수구막힘 전문
Template: developer-developer
Theme URI: https://drain24.kr
Author: drain24
Description: drain24.kr 하수구·변기·소변기막힘 24시간 즉시출동 전문 자식테마
Version: 1.5.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.2
Text Domain: developer-developer-drain
*/

:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F4F7FB;
  --text-primary: #16233A;
  --text-muted: #5B6B82;
  --brand: #0B5FFF;
  --brand-dark: #0847BF;
  --cta: #FF5A36;
  --cta-hover: #E64A28;
  --border: #E1E7EF;
  --success: #1FAA59;
  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-soft: 0 4px 20px rgba(16,35,58,0.08);
}

/* v6 이미지형 상담 배너: 텍스트는 HTML로 유지해 선명도와 접근성을 보존한다. */
.drain-footer__lead {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid rgba(139, 210, 255, 0.22);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(3, 20, 38, 0.99) 0%, rgba(3, 20, 38, 0.96) 38%, rgba(3, 20, 38, 0.7) 64%, rgba(3, 20, 38, 0.42) 100%),
    url("/wp-content/themes/developer-developer-drain/assets/images/drain24-footer-consultation-v2.webp") 72% center / cover no-repeat;
  box-shadow: 0 28px 60px rgba(2, 18, 35, 0.2);
  color: #fff;
  text-align: left;
}
.drain-footer__lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 7% 16%, rgba(69, 208, 255, 0.16), transparent 29%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%);
  pointer-events: none;
}
.drain-footer__lead-content { width: min(650px, 62%); }
.drain-footer__lead-eyebrow {
  margin: 0 0 14px;
  color: #8BDDFF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}
.drain-footer__lead-headline {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.drain-footer__lead-headline strong { color: #fff; font-weight: 900; }
.drain-footer__lead-desc {
  max-width: 610px;
  margin: 18px 0 0;
  color: #D4E0EA;
  font-size: 15px;
  line-height: 1.75;
}
.drain-footer__lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.drain-footer__lead-action {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 14px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.drain-footer__lead-action--call {
  min-width: 250px;
  border-color: #18A5FF;
  background: #0878D1;
  box-shadow: 0 12px 28px rgba(0, 120, 209, 0.3);
}
.drain-footer__lead-action--call span { color: #D9F2FF; font-size: 12px; }
.drain-footer__lead-action--call strong { color: #fff; font-size: 19px; letter-spacing: .01em; }
.drain-footer__lead-action--photo { background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); }
.drain-footer__lead-action:hover,
.drain-footer__lead-action:focus-visible { transform: translateY(-2px); border-color: #8BDDFF; background-color: #0A8BE8; }
.drain-footer__lead-action:focus-visible { outline: 3px solid #C7F23A; outline-offset: 3px; }
.drain-footer__lead-principles {
  margin: 16px 0 0;
  color: #AFC0CF;
  font-size: 12px;
  font-weight: 700;
}
.drain-footer__lead-principles span { padding: 0 5px; color: #47BFFF; }

@media (max-width: 760px) {
  .drain-footer__lead {
    min-height: 440px;
    align-items: flex-end;
    padding: 28px 22px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(3, 20, 38, 0.42) 0%, rgba(3, 20, 38, 0.82) 45%, rgba(3, 20, 38, 0.99) 74%),
      url("/wp-content/themes/developer-developer-drain/assets/images/drain24-footer-consultation-v2.webp") 72% top / auto 56% no-repeat,
      #031426;
  }
  .drain-footer__lead-content { width: 100%; }
  .drain-footer__lead-eyebrow { margin-bottom: 10px; font-size: 10px; }
  .drain-footer__lead-headline { font-size: clamp(23px, 6.4vw, 28px); letter-spacing: -.055em; }
  .drain-footer__lead-desc { margin-top: 12px; font-size: 13px; line-height: 1.65; }
  .drain-footer__lead-actions { display: grid; grid-template-columns: 1fr; margin-top: 18px; }
  .drain-footer__lead-action,
  .drain-footer__lead-action--call { width: 100%; min-width: 0; min-height: 52px; }
  .drain-footer__lead-principles { line-height: 1.6; }
}

/* 검증되지 않은 가상 상담 접수·대기 인원 알림은 노출하지 않는다. */
.dd-live-toast,
#ddLiveToast {
  display: none !important;
}

/* v6 단일 브랜드 자산과 반응형 헤더 */
.drain-topbar {
  background: #071A2B;
  color: #DCEAF4;
  font-size: 12px;
}
.drain-topbar__inner {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.drain-topbar__inner p { margin: 0; display: flex; gap: 8px; align-items: center; color: #BAC7D5; }
.drain-topbar__inner strong { color: #C7F23A; }
.drain-topbar__inner a { color: #FFFFFF; font-weight: 700; text-decoration: none; white-space: nowrap; }
.drain-header { position: relative; z-index: 1000; }
.drain-header__main { min-height: 72px; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(220,229,234,.9); backdrop-filter: blur(12px); }
.drain-header__brand-text { display: inline-flex; align-items: center; color: #071A2B; text-decoration: none; }
.drain-header__brand-logo { display: block; width: clamp(148px, 12vw, 168px); height: auto; }
.site-header__drawer-logo { display: block; width: 164px; height: auto; }
.drain-nav__list { gap: 22px !important; }
.drain-nav__list > li > a { font-size: 14px !important; font-weight: 650; white-space: nowrap; }
.drain-header__photo-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 17px;
  border-radius: 12px;
  background: #0066CC;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
}
.drain-header__photo-cta:focus-visible,
.drain-header__toggle:focus-visible,
.site-header__drawer-close:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(57,212,216,.42); }
.drain-header__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.drain-header__toggle {
  width: 44px;
  height: 44px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #071A2B;
  background: transparent;
  cursor: pointer;
}
.drain-header__toggle span { display: block; width: 22px; height: 2px; border-radius: 999px; background: currentColor; }
.drain-drawer-nav { padding: 28px 22px; }
.drain-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.drain-drawer-nav li { border-bottom: 1px solid #E3E9EF; }
.drain-drawer-nav li a { display: block; padding: 15px 2px; color: #13202C; font-weight: 700; text-decoration: none; }
.drain-drawer-nav__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.drain-drawer-nav__actions a { min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #0066CC; color: #fff; font-weight: 800; text-decoration: none; }
.drain-drawer-nav__actions a:last-child { background: #071A2B; }

@media (max-width: 1120px) {
  .drain-nav { display: none !important; }
  .drain-header__toggle { display: inline-flex !important; }
}
/* 부모 drawer의 768px 경계와 자식 헤더의 1120px 경계를 맞춘다. */
@media (min-width: 769px) and (max-width: 1120px) {
  .site-header__drawer { display: block !important; }
  .site-header__drawer-backdrop:not([hidden]) { display: block !important; }
  .site-header__drawer-backdrop[hidden] { display: none !important; }
}
@media (max-width: 820px) {
  .drain-topbar__inner { min-height: 28px; justify-content: center; text-align: center; }
  .drain-topbar__inner a { display: none; }
  .drain-header__photo-cta { display: none; }
  .drain-header__main { min-height: 64px; }
}
@media (max-width: 420px) {
  .drain-topbar__inner p { font-size: 11px; gap: 5px; }
  .drain-topbar__detail { display: none; }
  .drain-header__brand-logo { width: 154px; }
}

/* 브랜드 컬러 오버라이드 */
.brand-color, .site-header .brand { color: var(--brand); }
.cta-btn, .btn-cta {
  background: var(--cta);
  color: #fff;
  border-radius: var(--radius-md);
  min-height: 52px;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s ease;
}
.cta-btn:hover, .btn-cta:hover { background: var(--cta-hover); color: #fff; }
.cta-btn:focus-visible { outline: 3px solid #FFD1C3; outline-offset: 2px; }
.cta-float__btn--phone { background: #087A37 !important; }

/* WP core 버튼 블록: site-content a 밑줄/파랑이 덮이는 이슈 방어 */
.site-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.site-content .wp-block-button__link {
  background: var(--brand);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  display: inline-block;
  border: 0;
  transition: background .15s ease;
}
.site-content .wp-block-button__link:hover,
.site-content .wp-block-button__link:focus { background: var(--brand-dark); color: #fff !important; }
.site-content .wp-block-button.is-style-fill .wp-block-button__link { background: var(--cta); }
.site-content .wp-block-button.is-style-fill .wp-block-button__link:hover,
.site-content .wp-block-button.is-style-fill .wp-block-button__link:focus { background: var(--cta-hover); }
.site-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--brand) !important; box-shadow: inset 0 0 0 2px var(--brand);
}
.site-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.site-content .wp-block-button.is-style-outline .wp-block-button__link:focus {
  background: var(--brand); color: #fff !important;
}

/* ─── 매거진 아카이브: 지역 필터 네비게이션 ─── */
.drain-mag-sido-nav {
  background: #f6f8fc;
  border-block: 1px solid #e2e8f0;
  padding: 14px 0;
}
.drain-mag-sido-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.drain-mag-sido-nav__link {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.drain-mag-sido-nav__link:hover,
.drain-mag-sido-nav__link:focus-visible {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.drain-mag-sido-nav__link.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ─── 매거진 아카이브: 카드 그리드 (홈 .he-mag-card 재사용) ─── */
.drain-mag-archive {
  padding: 40px 0 64px;
}
.drain-mag-archive__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.drain-mag-archive__item {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* 카드 전체 높이 동일 정렬 */
.drain-mag-archive__grid .he-mag-card {
  height: 100%;
  border: 1px solid #E1E7EF;
  box-shadow: 0 1px 3px rgba(16, 35, 58, 0.04);
}
.drain-mag-archive__grid .he-mag-card:hover {
  border-color: #C7D6EA;
  box-shadow: 0 8px 24px rgba(16, 35, 58, 0.10);
}
/* 원본 전체가 보이도록 정사각 프레임으로 통일 */
.drain-mag-archive__grid .he-mag-card__thumb,
.drain-mag-archive__grid .he-mag-card__thumb--placeholder {
  aspect-ratio: 1 / 1 !important;
}
.drain-mag-archive__grid .he-mag-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  background: #0F172A;
}
.drain-mag-archive__grid .he-mag-card__body {
  padding: 18px 20px 20px;
  gap: 8px;
  flex: 1 1 auto;
}
.drain-mag-archive__grid .he-mag-card__title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drain-mag-archive__grid .he-mag-card__title::before,
.drain-mag-archive__grid .he-mag-card__title::after {
  content: none !important;
  display: none !important;
}
.drain-mag-archive__grid .he-mag-card__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drain-mag-archive__meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #94A3B8;
  letter-spacing: 0.02em;
}

/* 페이지네이션 */
.drain-mag-archive__pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.drain-mag-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  margin: 0 3px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #E1E7EF;
  color: #334155;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.drain-mag-archive__pagination .page-numbers:hover {
  background: #F1F5FB;
  border-color: #C7D6EA;
  color: var(--brand);
}
.drain-mag-archive__pagination .page-numbers.current {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.drain-mag-archive__pagination .page-numbers.dots {
  background: transparent;
  border: 0;
}

/* ─── 매거진 단일 글: 상단 내비게이션과 동일한 본문 컨테이너 폭 ─── */
body.single-magazine .site-content > .section > .container,
body.single-magazine .site-content > .section > .container--narrow {
  max-width: 1120px !important;
}

body.single-magazine .site-content article,
body.single-magazine .site-content .page-content,
body.single-magazine .site-content .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

body.single-magazine .site-content .page-content,
body.single-magazine .site-content .entry-content {
  padding-inline: 0 !important;
}

@media (max-width: 900px) {
  .drain-mag-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}
@media (max-width: 560px) {
  .drain-mag-sido-nav {
    padding-block: 10px;
  }
  .drain-mag-sido-nav .container {
    overflow: hidden;
  }
  .drain-mag-sido-nav__list {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 0 8px;
    scroll-padding-inline: 4px;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .drain-mag-sido-nav__list > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .drain-mag-sido-nav__link {
    white-space: nowrap;
  }
  .drain-mag-archive__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .drain-mag-archive__grid .he-mag-card__title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-btn,
  .btn-cta,
  .drain-footer__lead-action,
  .site-header__drawer,
  .site-header__drawer-backdrop,
  .site-content .wp-block-button__link,
  .drain-mag-sido-nav__link,
  .drain-mag-archive__grid .he-mag-card,
  .drain-mag-archive__pagination .page-numbers {
    transition: none !important;
  }
  .drain-footer__lead-action { transform: none !important; }
}

/* editorial.css */
/*
 * drain24 editorial layout (home + category + area)
 * .he-* : shared home + category + area editorial UI
 * .ae-* : area-specific extensions (see drain24-area-editorial.php)
 * .ce-* : category-specific extensions (see drain24-category-editorial.php)
 */

:root {
  --he-ink: #0F172A;
  --he-ink-2: #334155;
  --he-mute: #64748B;
  --he-bg: #FFFFFF;
  --he-surface: #F8FAFC;
  --he-surface-2: #F1F5F9;
  --he-border: #E2E8F0;
  --he-brand: #0B5FFF;
  --he-brand-2: #0847BF;
  --he-cta: #FF5A36;
  --he-cta-2: #E64A28;
  --he-gold: #B7501C;
  --he-teal: #0F766E;
  --he-radius: 16px;
  --he-radius-sm: 10px;
  --he-shadow: 0 4px 24px rgba(15, 23, 42, .06);
  --he-shadow-hover: 0 10px 32px rgba(15, 23, 42, .10);
}
/* .site-content > * { max-width: none } 리셋에 대응. article 은 풀폭. */
.site-content > .he-article,
.he-main { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.he-article { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.he-article > .he-hero,
.he-article > .he-trust,
.he-article > .he-section,
.he-article > .he-ctaband { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; }

/* ===== HERO ===== */
.he-article > .he-hero { padding: 32px 0 40px !important; background: var(--he-bg); }
.he-hero .he-hero__inner {
  max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important;
  display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  gap: 40px !important; align-items: center !important;
  box-sizing: border-box;
}
.he-hero .he-hero__body { min-width: 0 !important; }
.he-hero .he-hero__visual { min-width: 0 !important; max-width: 100% !important; }
.he-hero__eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--he-brand);
  background: #E8F0FF; padding: 6px 12px; border-radius: 999px; margin: 0 0 16px;
  letter-spacing: -.02em;
}
.he-hero__title {
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.28; letter-spacing: -.035em;
  color: var(--he-ink); margin: 0 0 20px; font-weight: 700;
}
.he-hero__title-em { color: var(--he-brand); }
.he-hero__desc {
  font-size: 16px; line-height: 1.75; color: var(--he-ink-2); margin: 0 0 28px;
  max-width: 560px; letter-spacing: -.01em;
}
.he-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.he-hero__visual {
  aspect-ratio: 4 / 3; border-radius: var(--he-radius); overflow: hidden;
  background-color: #E2E8F0;
  background-size: cover; background-position: center;
  box-shadow: var(--he-shadow);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.he-hero__visual:not([style*="background-image"]) {
  background: linear-gradient(135deg, #DBEAFE 0%, #E0E7FF 45%, #F1F5F9 100%);
}
.he-hero__visual-fallback svg { width: 60%; opacity: .35; color: var(--he-brand); }
@media (max-width: 767px) {
  .he-hero .he-hero__inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .he-hero .he-hero__visual { order: -1 !important; aspect-ratio: 16 / 10 !important; }
}

/* ===== CTA BUTTONS (공용) ===== */
.he-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: 12px;
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  border: 0;
}
.he-cta__icon { font-size: 18px; }
.he-cta--primary,
.he-cta--primary:link,
.he-cta--primary:visited,
.he-cta--primary:hover,
.he-cta--primary:active {
  background: var(--he-cta); color: #fff !important; text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(255, 90, 54, .28), 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  font-weight: 800;
}
.he-cta--primary:hover {
  background: var(--he-cta-2); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 90, 54, .38), 0 3px 6px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
.he-cta--secondary,
.he-cta--secondary:link,
.he-cta--secondary:visited {
  background: var(--he-surface-2); color: var(--he-ink) !important; text-decoration: none !important;
}
.he-cta--secondary:hover { background: #E2E8F0; color: var(--he-ink) !important; }
.he-cta--outline,
.he-cta--outline:link,
.he-cta--outline:visited,
.he-cta--outline:hover,
.he-cta--outline:active {
  background: rgba(255,255,255,.06); color: #fff !important; text-decoration: none !important;
  border: 2px solid rgba(255,255,255,.90);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.he-cta--outline:hover {
  background: rgba(255,255,255,.16); border-color: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.he-cta--lg { min-height: 64px; padding: 0 36px; font-size: 17px; letter-spacing: -.01em; }
.he-cta__icon { display: inline-flex; align-items: center; justify-content: center; }
.he-cta__icon svg { width: 18px; height: 18px; }

/* ===== TRUST STRIP ===== */
.he-article > .he-trust { background: var(--he-surface) !important; border-top: 1px solid var(--he-border); border-bottom: 1px solid var(--he-border); padding: 20px 0 !important; }
.he-trust .he-trust__grid {
  max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important;
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important;
  list-style: none !important;
  box-sizing: border-box;
}
.he-trust__grid li {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.he-trust__grid strong { font-size: 22px; color: var(--he-brand); font-weight: 700; letter-spacing: -.03em; }
.he-trust__grid span { font-size: 13px; color: var(--he-mute); font-weight: 500; }
@media (max-width: 640px) { .he-trust .he-trust__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } }

/* ===== SECTION 공통 ===== */
.he-article > .he-section { max-width: 1200px !important; margin: 64px auto !important; padding: 0 20px !important; box-sizing: border-box; }
.he-section__head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.he-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--he-brand);
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px;
}
.he-section__title {
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; letter-spacing: -.028em;
  color: var(--he-ink); margin: 0 0 12px; font-weight: 700;
}
.he-section__desc { font-size: 15px; line-height: 1.7; color: var(--he-mute); margin: 0; }

/* ===== 문제 4카드 ===== */
.he-problems { background: transparent; }
.he-problems .he-problems__grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important;
}
.he-problem-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--he-border);
  border-radius: var(--he-radius); overflow: hidden; text-decoration: none;
  color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.he-problem-card:hover { transform: translateY(-3px); box-shadow: var(--he-shadow-hover); border-color: var(--he-brand); }
.he-problem-card__visual {
  aspect-ratio: 1 / 1; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--he-brand);
}
.he-problem-card__visual:not([style*="background-image"]) {
  background: linear-gradient(135deg, #F1F5F9 0%, #E0E7FF 100%);
}
.he-problem-card__visual--smell:not([style*="background-image"])      { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); color: #92400E; }
.he-problem-card__visual--backflow:not([style*="background-image"])   { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); color: #1D4ED8; }
.he-problem-card__visual--slow:not([style*="background-image"])       { background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%); color: #0369A1; }
.he-problem-card__visual--recurrence:not([style*="background-image"]) { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); color: #B91C1C; }
.he-problem-card__icon { width: 46%; max-width: 96px; }
.he-problem-card__icon svg { width: 100%; height: auto; }
.he-problem-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.he-problem-card__title { font-size: 17px; letter-spacing: -.028em; color: var(--he-ink); margin: 0; font-weight: 700; }
.he-problem-card__desc { font-size: 14px; line-height: 1.65; color: var(--he-mute); margin: 0; }
.he-problem-card__more { font-size: 13px; color: var(--he-brand); font-weight: 600; margin-top: 4px; }
@media (max-width: 900px) { .he-problems .he-problems__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .he-problems .he-problems__grid { grid-template-columns: 1fr !important; } }

/* ===== 후기 3장 ===== */
.he-reviews { background: transparent; }
.he-reviews__band {
  position: relative; overflow: hidden;
  border-radius: var(--he-radius); background-color: #FFF8EC;
  background-size: cover; background-position: center;
  padding: 40px 24px; text-align: center; margin-bottom: 28px;
  border: 1px solid #F3E4C4;
}
.he-reviews__band[style*="background-image"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at center,
    rgba(255,248,236,.92) 0%,
    rgba(255,248,236,.72) 40%,
    rgba(255,248,236,.28) 80%,
    rgba(255,248,236,.10) 100%);
}
.he-reviews__band:not([style*="background-image"]) {
  background: linear-gradient(90deg, #FFF8EC 0%, #FDF4E3 50%, #FFF8EC 100%);
}
.he-reviews__head { position: relative; z-index: 1; }
.he-reviews__head .he-eyebrow { color: var(--he-gold); }
.he-reviews__head .he-section__title { color: var(--he-ink); }
.he-reviews__head .he-section__desc { color: #6B5433; }
.he-reviews .he-reviews__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; }
.he-review-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--he-border);
  border-radius: var(--he-radius); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.he-review-card:hover { transform: translateY(-3px); box-shadow: var(--he-shadow-hover); border-color: var(--he-gold); }
.he-review-card__thumb { position: relative; aspect-ratio: 1 / 1; background: #0F172A; overflow: hidden; }
.he-review-card__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.he-review-card__badge {
  position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.94);
  color: var(--he-gold); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
}
.he-review-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.he-review-card__stars { color: #FFC107; font-size: 14px; letter-spacing: 1px; }
.he-review-card__title { font-size: 16px; letter-spacing: -.025em; color: var(--he-ink); margin: 0; font-weight: 700; line-height: 1.4; }
.he-review-card__desc { font-size: 13.5px; line-height: 1.65; color: var(--he-mute); margin: 0; }
@media (max-width: 900px) { .he-reviews .he-reviews__grid { grid-template-columns: 1fr !important; } }

/* ===== 프로세스 4스텝 ===== */
.he-process .he-process__grid {
  list-style: none !important; padding: 0 !important; margin: 0 !important;
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important;
}
.he-process-card {
  background: #fff; border: 1px solid var(--he-border); border-radius: var(--he-radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.he-process-card__visual {
  aspect-ratio: 1 / 1; background-color: #FFFFFF;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.he-process-card__visual:not([style*="background-image"]) {
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
}
.he-process-card__num {
  font-size: 56px; font-weight: 700; color: rgba(11, 95, 255, .18); letter-spacing: -.05em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.he-process-card__visual[style*="background-image"] .he-process-card__num {
  position: absolute; top: 12px; left: 14px; bottom: auto; right: auto;
  color: #2563EB; background: rgba(37, 99, 235, .10);
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  padding: 4px 12px; border-radius: 999px; text-shadow: none;
}
.he-process-card__body { padding: 18px 20px 22px; }
.he-process-card__title { font-size: 16px; letter-spacing: -.025em; color: var(--he-ink); margin: 0 0 6px; font-weight: 700; }
.he-process-card__desc { font-size: 14px; line-height: 1.65; color: var(--he-mute); margin: 0; }
@media (max-width: 900px) { .he-process .he-process__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .he-process .he-process__grid { grid-template-columns: 1fr !important; } }

/* ===== 매거진 그리드 ===== */
.he-magazines .he-mag__grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important;
}
.he-mag-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--he-border);
  border-radius: var(--he-radius); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.he-mag-card:hover { transform: translateY(-3px); box-shadow: var(--he-shadow-hover); }
.he-mag-card__thumb { position: relative; aspect-ratio: 1 / 1; background: var(--he-surface); overflow: hidden; }
.he-mag-card__thumb img { width: 100%; height: 100%; object-fit: contain; background: #0F172A; display: block; transition: transform .3s ease; }
.he-mag-card:hover .he-mag-card__thumb img { transform: none; }
.he-mag-card__badge {
  position: absolute; top: 12px; left: 12px; background: rgba(15, 23, 42, .82); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px;
}
.he-mag-card__badge--issue  { background: #B7501C; }
.he-mag-card__badge--case   { background: #0B5FFF; }
.he-mag-card__badge--tips   { background: #0F766E; }
.he-mag-card__badge--review { background: #B7501C; }
.he-mag-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.he-mag-card__title { font-size: 15.5px; letter-spacing: -.025em; color: var(--he-ink); margin: 0; font-weight: 600; line-height: 1.45; }
.he-mag-card__desc { font-size: 13px; line-height: 1.6; color: var(--he-mute); margin: 0; }
.he-mag__more { text-align: center; margin-top: 28px; }
.he-linkbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px;
  border: 1.5px solid var(--he-border); border-radius: 999px; color: var(--he-ink);
  font-size: 14.5px; font-weight: 600; text-decoration: none; transition: all .15s ease;
}
.he-linkbtn:hover { border-color: var(--he-brand); color: var(--he-brand); }
@media (max-width: 900px) { .he-magazines .he-mag__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .he-magazines .he-mag__grid { grid-template-columns: 1fr !important; } }

/* ===== 서비스 8종 ===== */
.he-services .he-svc__grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important;
}
.he-svc-card {
  background: #fff; border: 1px solid var(--he-border);
  border-radius: var(--he-radius-sm); text-decoration: none; color: inherit;
  transition: all .15s ease; display: flex; flex-direction: column; overflow: hidden;
}
.he-svc-card:hover { border-color: var(--he-brand); transform: translateY(-2px); box-shadow: var(--he-shadow); }
.he-svc-card__visual {
  aspect-ratio: 1 / 1; background-color: var(--he-surface-2);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.he-svc-card__visual:not([style*="background-image"]) {
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
}
.he-svc-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.he-svc-card__title { font-size: 16px; letter-spacing: -.025em; color: var(--he-ink); margin: 0; font-weight: 700; }
.he-svc-card__desc { font-size: 13.5px; line-height: 1.6; color: var(--he-mute); margin: 0; }
.he-svc-card__more { font-size: 13px; color: var(--he-brand); font-weight: 600; margin-top: 4px; }
@media (max-width: 900px) { .he-services .he-svc__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .he-services .he-svc__grid { grid-template-columns: 1fr !important; } }

/* ===== 시도 그리드 ===== */
.he-areas .he-area__grid {
  display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important;
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.he-area-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--he-border); border-radius: var(--he-radius-sm);
  text-decoration: none; color: inherit; transition: all .15s ease;
}
.he-area-card:hover { border-color: var(--he-brand); transform: translateY(-2px); box-shadow: var(--he-shadow); }
.he-area-card__visual {
  aspect-ratio: 1 / 1; background-color: var(--he-surface-2);
  background-size: cover; background-position: center;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.he-area-card__visual:not([style*="background-image"]) {
  background: linear-gradient(135deg, #F0F7FF 0%, #E0EFFF 60%, #DBEAFE 100%);
}
.he-area-card__ph {
  font-size: 20px; font-weight: 700; letter-spacing: -.03em;
  color: #0B5FFF; opacity: .55;
}
.he-area-card__body {
  padding: 12px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
.he-area-card__body strong { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--he-ink); }
.he-area-card__body span { font-size: 11.5px; color: var(--he-mute); }
@media (max-width: 900px) { .he-areas .he-area__grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 480px) { .he-areas .he-area__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } }

/* ===== CTA 밴드 ===== */
.he-article > .he-ctaband {
  margin: 64px 0 0 !important;
  background: #0F172A;
  background-size: cover; background-position: center;
  color: #fff !important; padding: 72px 20px !important; text-align: center !important;
  position: relative;
  min-height: clamp(360px, 42vw, 620px);
  display: flex !important; align-items: center; justify-content: center;
}
.he-ctaband:not([style*="background-image"]) {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #0B5FFF 200%);
}
.he-ctaband::before {
  content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, .55);
  pointer-events: none;
}
.he-ctaband[style*="background-image"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.78) 40%, rgba(15,23,42,.78) 60%, rgba(15,23,42,.55) 100%);
}
.he-ctaband__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.he-ctaband__eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85) !important; margin: 0 0 14px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.he-ctaband__title { font-size: clamp(22px, 3vw, 32px); letter-spacing: -.03em; color: #fff !important; margin: 0 0 14px; font-weight: 700; line-height: 1.35; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.he-ctaband__desc { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.92) !important; margin: 0 0 28px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.he-ctaband__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ===== 기존 부모테마 heading gradient 제거 (편집자 톤 유지) ===== */
.entry-content .he-section h2::before,
.entry-content .he-section h2::after,
.entry-content .he-hero h1::before,
.entry-content .he-hero h1::after,
.entry-content .he-ctaband h2::before,
.entry-content .he-ctaband h2::after { display: none !important; content: none !important; }

/* ==========================================================================
   CATEGORY-EDITORIAL (.ce-*) — 서비스/대분류 카테고리 페이지 확장
   ========================================================================== */

/* 매거진 강조 카드 (대분류 hub 레이아웃) */
.ce-mag-hero__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 24px;
}
.ce-mag-hero__grid > .he-mag-card:first-child .he-mag-card__thumb { aspect-ratio: 1 / 1; }
.ce-mag-hero__grid > .he-mag-card:first-child .he-mag-card__title { font-size: 20px; line-height: 1.35; font-weight: 700; }
.ce-mag-hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) {
  .ce-mag-hero__grid { grid-template-columns: 1fr !important; }
  .ce-mag-hero__side { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ce-mag-hero__side { grid-template-columns: 1fr; }
}

/* 서비스 특징 카드 (landing 레이아웃) */
.ce-features .ce-feat__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
.ce-feat-card {
  background: #fff; border: 1px solid var(--he-border);
  border-radius: var(--he-radius); padding: 24px 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ce-feat-card:hover { transform: translateY(-3px); box-shadow: var(--he-shadow-hover); border-color: var(--ce-accent, var(--he-brand)); }
.ce-feat-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--ce-accent, var(--he-brand)) 12%, #fff);
  color: var(--ce-accent, var(--he-brand));
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.ce-feat-card__icon svg { width: 22px; height: 22px; }
.ce-feat-card__title { font-size: 16px; letter-spacing: -.025em; color: var(--he-ink); margin: 0; font-weight: 700; }
.ce-feat-card__desc { font-size: 14px; line-height: 1.65; color: var(--he-mute); margin: 0; }
@media (max-width: 900px) { .ce-feat__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .ce-feat__grid { grid-template-columns: 1fr !important; } }

/* FAQ 아코디언 */
.ce-faq__list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ce-faq__item {
  border: 1px solid var(--he-border); border-radius: var(--he-radius-sm);
  background: #fff; overflow: hidden; transition: border-color .15s ease;
}
.ce-faq__item[open] { border-color: var(--ce-accent, var(--he-brand)); }
.ce-faq__item > summary {
  list-style: none; cursor: pointer;
  padding: 18px 22px; font-size: 16px; font-weight: 600; color: var(--he-ink); letter-spacing: -.02em;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ce-faq__item > summary::-webkit-details-marker { display: none; }
.ce-faq__item > summary::after {
  content: "＋"; font-size: 22px; color: var(--he-mute); font-weight: 400;
  transition: transform .2s ease;
}
.ce-faq__item[open] > summary::after { content: "－"; color: var(--ce-accent, var(--he-brand)); }
.ce-faq__item > .ce-faq__answer {
  padding: 0 22px 20px; font-size: 14.5px; line-height: 1.75; color: var(--he-ink-2);
}

/* 히어로에 accent 컬러 오버라이드 */
.he-hero--accent .he-hero__eyebrow {
  background: color-mix(in srgb, var(--ce-accent, var(--he-brand)) 12%, #fff);
  color: var(--ce-accent, var(--he-brand));
}
.he-hero--accent .he-hero__title-em { color: var(--ce-accent, var(--he-brand)); }

/* ==========================================================================
   AREA-EDITORIAL (.ae-*) — 시도/시군구 지역 페이지 확장
   ========================================================================== */

/* 부모 single-area_service.php 의 기본 히어로 · narrow container 우회 */
body.dd-editorial-area .site-content > .hero,
body.dd-editorial-area .site-content > article > .hero,
body.dd-editorial-area .site-content > article > .entry-header { display: none !important; }
/* section wrapper 를 full-bleed 로 확장해 .he-article 가 정상 렌더 */
body.dd-editorial-area .site-content > .section {
  padding: 0 !important; margin: 0 !important;
  max-width: none !important; width: 100% !important;
}
body.dd-editorial-area .site-content > .section > .container,
body.dd-editorial-area .site-content > .section > .container--narrow {
  max-width: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important;
}
body.dd-editorial-area .site-content > .section > .container > .page-content {
  max-width: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important;
}
/* 부모의 "인근 서비스 지역" 섹션도 편집자 지역 페이지에서는 숨김 (편집자 renderer 가 자체 nearby 렌더) */
body.dd-editorial-area .site-content > .section--alt { display: none !important; }
/* 부모 dd_cta_block() 은 편집자 CTA 밴드와 중복이므로 숨김 */
body.dd-editorial-area .site-content > .section:last-of-type { display: none !important; }

/* 지역 파라랭스 히어로 */
.ae-hero {
  position: relative; overflow: hidden;
  min-height: clamp(320px, 40vw, 520px);
  display: flex; align-items: center;
  background-color: var(--ae-accent, #1E40AF);
  background-size: cover; background-position: center;
  color: #fff;
}
.ae-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ae-accent, #1E40AF) 80%, transparent) 0%,
    rgba(15, 23, 42, .72) 70%);
}
.ae-hero__inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; padding: 60px 20px;
  width: 100%; box-sizing: border-box;
}
.ae-hero__eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff !important; font-weight: 700; margin: 0 0 14px !important;
  padding: 6px 14px; background: rgba(255, 255, 255, .18); border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ae-hero__title {
  font-size: clamp(28px, 3.8vw, 48px) !important; line-height: 1.24 !important; letter-spacing: -.035em;
  color: #fff !important; margin: 0 0 18px !important; font-weight: 700 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.ae-hero__title-em { color: #FCD34D !important; font-weight: 700; }
.ae-hero__desc {
  font-size: 16px !important; line-height: 1.75 !important;
  color: #fff !important; opacity: .96;
  margin: 0 0 26px !important;
  max-width: 620px; text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.ae-hero__stats {
  list-style: none !important; padding: 0 !important; margin: 0 0 28px !important;
  display: flex !important; flex-wrap: wrap; gap: 32px;
}
.ae-hero__stats li { display: flex; flex-direction: column; gap: 4px; }
.ae-hero__stats strong {
  font-size: 32px !important; color: #fff !important; font-weight: 700 !important;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.ae-hero__stats span {
  font-size: 13px !important; color: #fff !important; opacity: .88;
  font-weight: 500 !important;
}
.ae-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) {
  .ae-hero__stats { gap: 20px; }
  .ae-hero__stats strong { font-size: 26px; }
}

/* 시군구 그리드 (시도 페이지) */
.ae-sigungu__grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.ae-sigungu__grid li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ae-sigungu__grid li::marker { content: '' !important; }
.ae-sigungu__grid li a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 18px 8px; background: #fff; border: 1px solid var(--he-border);
  border-radius: var(--he-radius-sm); text-decoration: none; color: var(--he-ink);
  transition: all .15s ease; min-height: 72px; text-align: center;
}
.ae-sigungu__grid li a:hover {
  border-color: var(--ae-accent, var(--he-brand));
  color: var(--ae-accent, var(--he-brand));
  transform: translateY(-2px);
  box-shadow: var(--he-shadow);
}
.ae-sigungu__grid strong { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }
.ae-sigungu__grid small { font-size: 11px; color: var(--he-mute); font-weight: 500; }
@media (max-width: 900px) { .ae-sigungu__grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 480px) { .ae-sigungu__grid { grid-template-columns: repeat(3, 1fr) !important; } }

/* 원본 지역 콘텐츠(흡수 섹션) 타이포 */
.ae-context__inner { max-width: 860px; margin: 0 auto; }
.ae-context__inner h2 {
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.028em;
  color: var(--he-ink); margin: 32px 0 12px; font-weight: 700;
}
.ae-context__inner h3 {
  font-size: 18px; letter-spacing: -.024em;
  color: var(--he-ink); margin: 24px 0 10px; font-weight: 700;
}
.ae-context__inner p {
  font-size: 15.5px; line-height: 1.85; color: var(--he-ink-2); margin: 0 0 14px;
  letter-spacing: -.005em;
}
.ae-context__inner ul, .ae-context__inner ol { padding-left: 20px; margin: 0 0 14px; }
.ae-context__inner li { font-size: 15.5px; line-height: 1.8; color: var(--he-ink-2); margin: 0 0 6px; }
.ae-context__inner a { color: var(--he-brand); text-decoration: underline; text-underline-offset: 2px; }

/* 인근 시군구 (시군구 페이지 하단) */
.ae-nearby__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.ae-nearby__grid li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ae-nearby__grid li::marker { content: '' !important; }
.ae-nearby__grid li a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; background: #fff; border: 1px solid var(--he-border);
  border-radius: var(--he-radius-sm); text-decoration: none; color: var(--he-ink);
  transition: all .15s ease;
}
.ae-nearby__grid li a:hover {
  border-color: var(--ae-accent, var(--he-brand));
  transform: translateY(-2px);
  box-shadow: var(--he-shadow);
}
.ae-nearby__grid strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; }
.ae-nearby__grid span { font-size: 12px; color: var(--ae-accent, var(--he-brand)); }
@media (max-width: 900px) { .ae-nearby__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .ae-nearby__grid { grid-template-columns: 1fr !important; } }

/* editorial 그리드 공통 - 브라우저 list marker 방어 (.site-content li::marker 상속 차단) */
.he-trust__grid li,
.he-process__grid li,
.he-area__grid li,
.ae-hero__stats li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.he-trust__grid li::marker,
.he-process__grid li::marker,
.he-area__grid li::marker,
.ae-hero__stats li::marker { content: '' !important; }

/* home-upgrade.css */
/* DRAIN24 home upgrade v3 — execution blueprint 2026-09-15 */

.d24-home {
  --d24-ink-950: #071A2B;
  --d24-ink-800: #173247;
  --d24-blue-600: #0066CC;
  --d24-blue-700: #0055AA;
  --d24-aqua-400: #39D4D8;
  --d24-lime-400: #C7F23A;
  --d24-white: #FFFFFF;
  --d24-surface-50: #F7FAFC;
  --d24-surface-100: #EEF4F7;
  --d24-line-200: #DCE5EA;
  --d24-text-700: #334B5B;
  --d24-text-500: #637784;
  --d24-danger-500: #E85D4A;
  --d24-radius-sm: 10px;
  --d24-radius-md: 14px;
  --d24-radius-lg: 22px;
  --d24-radius-xl: 30px;
  --d24-shadow-1: 0 8px 24px rgba(7, 26, 43, .08);
  --d24-shadow-2: 0 18px 48px rgba(7, 26, 43, .14);
  --d24-focus: 0 0 0 3px rgba(57, 212, 216, .42);
  --d24-navy: var(--d24-ink-950);
  --d24-blue: var(--d24-blue-600);
  --d24-aqua: var(--d24-aqua-400);
  --d24-lime: var(--d24-lime-400);
  --d24-warm: var(--d24-surface-50);
  --d24-ink: var(--d24-ink-950);
  --d24-muted: var(--d24-text-500);
  --d24-line: var(--d24-line-200);
  --d24-coral: var(--d24-danger-500);
  color: var(--d24-ink-950);
  background: var(--d24-surface-50);
  font-family: Pretendard, Pretendard-fallback, -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  overflow: clip;
}

.d24-home :is(h1, h2, h3, p, li, dt, dd, a, button) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.d24-lazy-media,
.d24-art-directed-media,
.d24-art-directed-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.d24-home .he-eyebrow {
  color: var(--d24-blue-600);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
}

.d24-home .he-section__title {
  color: var(--d24-ink-950);
  font-size: clamp(36px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.03em;
}

.d24-home .he-eyebrow + .he-section__title { margin-top: 0; }
.d24-home .he-section__desc { max-width: 680px; color: var(--d24-text-500); font-size: 16px; line-height: 1.72; }
.d24-home .he-linkbtn { color: var(--d24-blue-600); font-weight: 700; }

.d24-home.he-main > .he-section {
  width: min(1280px, calc(100% - 64px));
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 96px 0 !important;
}

.d24-home .he-cta {
  min-height: 52px;
  padding-inline: 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 750;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.d24-home .he-cta:hover { transform: translateY(-1px); }
.d24-home .he-cta:active { transform: translateY(0); }
.d24-home .he-cta:focus-visible { outline: 0; box-shadow: var(--d24-focus); }
.d24-home .he-cta--primary,
.d24-home .he-cta--primary:link,
.d24-home .he-cta--primary:visited { color: var(--d24-white); background: var(--d24-blue-600); box-shadow: 0 8px 20px rgba(0, 102, 204, .18); }
.d24-home .he-cta--primary:hover { background: var(--d24-blue-700); box-shadow: 0 10px 24px rgba(0, 85, 170, .22); }
.d24-home .he-cta--secondary,
.d24-home .he-cta--secondary:link,
.d24-home .he-cta--secondary:visited { color: var(--d24-ink-950) !important; background: var(--d24-white); border: 1px solid var(--d24-line-200); }

.d24-hero-full {
  position: relative;
  min-height: clamp(680px, 72vh, 780px);
  display: flex !important;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  color: var(--d24-white);
  background: var(--d24-ink-950);
}
.d24-hero-full__media,
.d24-hero-full__overlay { position: absolute; inset: 0; }
.d24-hero-full__media { z-index: -2; }
.d24-hero-full__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 76% 50%; }
.d24-hero-full__overlay {
  z-index: -1;
  background: linear-gradient(90deg, rgba(7, 26, 43, .94) 0%, rgba(7, 26, 43, .83) 39%, rgba(7, 26, 43, .52) 62%, rgba(7, 26, 43, .12) 100%);
}
.d24-hero-full .d24-hero-full__content {
  width: min(1280px, calc(100% - 64px));
  max-width: 1280px !important;
  margin: 0 auto;
  padding: 88px 0 !important;
  display: block !important;
}
.d24-hero-full .he-hero__body { width: min(640px, 54%); }
.d24-hero-full .he-hero__eyebrow {
  display: inline-flex;
  color: #E8F8FA;
  background: rgba(7, 26, 43, .46);
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
}
.d24-hero-full .he-hero__title {
  max-width: 640px;
  margin: 24px 0 24px;
  color: var(--d24-white);
  font-size: clamp(56px, 4.5vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.d24-hero-full .he-hero__title > span { display: block; }
.d24-hero-full .he-hero__title-em { color: #9DECEF; }
.d24-hero-full .he-hero__desc { max-width: 620px; color: #E0E9EF; font-size: 18px; line-height: 1.72; letter-spacing: -.01em; }
.d24-hero-full .he-hero__cta { margin-top: 30px; }
.d24-hero-full .he-cta { min-height: 56px; }
.d24-hero-full .he-cta--secondary { background: rgba(255, 255, 255, .94); }

.d24-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; }
.d24-hero__chips li {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #ECF7FA;
  background: rgba(7, 26, 43, .44);
  font-size: 13px;
  font-weight: 650;
  backdrop-filter: blur(8px);
}
.d24-media-note { position: absolute; right: 14px; bottom: 12px; z-index: 3; color: rgba(255,255,255,.82); font-size: 11px; font-style: normal; }

.d24-home.he-main > .he-trust {
  padding: 24px 0 !important;
  background: var(--d24-navy) !important;
  border: 0;
}

.d24-home .he-trust__grid { max-width: 1280px !important; grid-template-columns: repeat(4, 1fr) !important; }
.d24-home .he-trust__grid li { border-right: 1px solid rgba(255,255,255,.13); }
.d24-home .he-trust__grid li:last-child { border-right: 0; }
.d24-home .he-trust__grid strong { color: var(--d24-lime); font-size: 17px; }
.d24-home .he-trust__grid span { color: #C8D6E0; }

.d24-symptoms__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.d24-symptom-card {
  display: grid;
  grid-template-columns: 44% 56%;
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--d24-radius-md);
  color: inherit;
  background: #FFFFFF;
  border: 1px solid var(--d24-line);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.d24-symptom-card:hover {
  transform: translateY(-2px);
  border-color: var(--d24-blue);
  box-shadow: var(--d24-shadow-1);
}
.d24-symptom-card:focus-visible { outline: 0; box-shadow: var(--d24-focus); }

.d24-symptom-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  background: linear-gradient(145deg, #DDF7F6, #DCEBFF);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.d24-symptom-card__visual > .d24-lazy-media { position: absolute; inset: 0; z-index: 0; }

.d24-symptom-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 26, 43, 0) 55%, rgba(7, 26, 43, .28));
}

.d24-symptom-card__visual small {
  position: absolute;
  z-index: 2;
  left: 9px;
  bottom: 8px;
  color: rgba(255,255,255,.9);
  font-size: 9px;
}

.d24-symptom-card__heading { display: flex; align-items: center; gap: 10px; }
.d24-symptom-card__icon { flex: 0 0 24px; width: 24px; color: var(--d24-blue-600); }
.d24-symptom-card__icon svg { display: block; width: 100%; }
.d24-symptom-card__body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px 22px; }
.d24-symptom-card__body strong { color: var(--d24-navy); font-size: 19px; line-height: 1.35; }
.d24-symptom-card__body > span:not(.d24-symptom-card__heading) { color: var(--d24-muted); font-size: 14px; line-height: 1.6; }
.d24-symptom-card__body em { margin-top: auto; color: var(--d24-blue); font-size: 13px; font-style: normal; font-weight: 800; }

.d24-home.he-main > .d24-checker {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 96px max(32px, calc((100vw - 1280px) / 2)) !important;
  color: #FFFFFF;
  background:
    radial-gradient(circle at 85% 0%, rgba(57,212,216,.15), transparent 35%),
    var(--d24-navy);
}

.d24-checker__inner {
  width: min(1224px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 64px;
  align-items: start;
}

.d24-checker .he-eyebrow { color: var(--d24-lime); }
.d24-checker h2 { margin: 0 0 20px; color: #FFFFFF; font-size: clamp(36px, 4vw, 48px); font-weight: 800; line-height: 1.18; letter-spacing: -.03em; }
.d24-checker__intro > p:last-child { color: #C7D6E0; font-size: 16px; line-height: 1.75; }
.d24-checker__form { display: grid; gap: 15px; }
.d24-checker fieldset { margin: 0; padding: 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.055); }
.d24-checker legend { width: 100%; margin-bottom: 13px; color: #FFFFFF; font-size: 16px; font-weight: 800; }
.d24-checker label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin-right: 8px; padding: 0 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #DCE8EF; cursor: pointer; }
.d24-checker label:has(input:checked) { color: #FFFFFF; background: rgba(199,242,58,.08); border-color: var(--d24-lime); font-weight: 800; }
.d24-checker label:focus-within { box-shadow: var(--d24-focus); }
.d24-checker input { accent-color: var(--d24-blue); }
.d24-checker__result { min-height: 76px; padding: 20px 22px; border-left: 4px solid var(--d24-aqua); border-radius: 12px; color: #DCE8EF; background: rgba(57,212,216,.09); line-height: 1.65; }
.d24-checker__result.is-alert { border-left-color: var(--d24-coral); background: rgba(255,106,85,.12); }

.d24-guides .he-reviews__grid { gap: 22px !important; }
.d24-guides .he-review-card { border-radius: 22px; }
.d24-guides .he-review-card__badge { color: #7A3F11; background: #FFF3D9; }

.d24-home.he-main > .d24-equipment {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 640px;
  margin: 0 !important;
  padding: 112px max(32px, calc((100vw - 1280px) / 2)) !important;
  display: flex !important;
  align-items: center;
  background-color: var(--d24-navy);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.d24-equipment__media { position: absolute; inset: 0; z-index: -2; }
.d24-equipment__media > img { object-position: center; }
.d24-equipment__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,26,43,.98) 0%, rgba(7,26,43,.91) 48%, rgba(7,26,43,.3) 100%); }
.d24-equipment__inner { width: min(1224px, 100%); margin: 0 auto; }
.d24-equipment .he-eyebrow { color: var(--d24-aqua); }
.d24-equipment h2 { max-width: 640px; margin: 0 0 22px; color: #FFFFFF; font-size: clamp(42px, 4vw, 56px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; }
.d24-equipment__inner > p:not(.he-eyebrow) { max-width: 660px; color: #C8D6E0; font-size: 17px; line-height: 1.75; }
.d24-equipment__steps { max-width: 850px; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 46px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.2); }
.d24-equipment__steps li { padding: 22px 12px 0 0; }
.d24-equipment__steps b { display: block; color: var(--d24-lime); font-size: 13px; }
.d24-equipment__steps span { display: block; margin-top: 8px; color: #FFFFFF; font-size: 16px; font-weight: 800; }
.d24-equipment__inner > small { display: block; margin-top: 40px; color: rgba(255,255,255,.66); }

.d24-spaces__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 292px; gap: 18px; }
.d24-space-card { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: 22px; color: #FFFFFF; background: linear-gradient(145deg, #17344A, #0878F9); background-size: cover; background-position: center; text-decoration: none; isolation: isolate; }
.d24-space-card > .d24-lazy-media { position: absolute; inset: 0; z-index: -2; }
.d24-space-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,26,43,.02) 30%, rgba(7,26,43,.88) 100%); }
.d24-space-card > span { display: flex; flex-direction: column; gap: 7px; padding: 28px; }
.d24-space-card strong { color: #FFFFFF; font-size: 22px; }
.d24-space-card small { color: #D7E4EC; font-size: 14px; }
.d24-space-card em { position: absolute; right: 12px; top: 10px; color: rgba(255,255,255,.72); font-size: 10px; font-style: normal; }

.d24-process .he-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
.d24-process .he-process-card { display: grid; grid-template-columns: 80px 1fr; min-height: 144px; border-radius: 18px; }
.d24-process .he-process-card__visual { aspect-ratio: auto; background: var(--d24-navy) !important; }
.d24-process .he-process-card__num { color: var(--d24-aqua); font-size: 28px; }
.d24-process .he-process-card__body { display: flex; flex-direction: column; justify-content: center; }

.d24-cost { display: grid !important; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 48px; align-items: center; }
.d24-cost__copy > p:not(.he-eyebrow) { color: var(--d24-muted); font-size: 16px; line-height: 1.75; margin-bottom: 28px; }
.d24-cost__table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--d24-line); background: #FFFFFF; }
.d24-cost table { width: 100%; border-collapse: collapse; min-width: 560px; }
.d24-cost th, .d24-cost td { height: 60px; padding: 16px 20px; border-bottom: 1px solid var(--d24-line); text-align: left; }
.d24-cost thead th { color: #FFFFFF; background: var(--d24-navy); font-size: 13px; }
.d24-cost tbody th { width: 32%; color: var(--d24-blue); font-size: 14px; }
.d24-cost tbody td { color: #435563; font-size: 14px; }
.d24-cost tr:last-child th, .d24-cost tr:last-child td { border-bottom: 0; }

.d24-areas .he-area-card__visual { overflow: hidden; }
.d24-areas .he-area-card__visual > .d24-lazy-media { position: absolute; inset: 0; }

.d24-home.he-main > .d24-proof {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 96px 28px !important;
  background: var(--d24-surface-100);
}
.d24-proof__inner { width: min(1280px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 48px; align-items: start; }
.d24-proof h2 { margin: 0 0 16px; color: var(--d24-navy); font-size: clamp(36px, 3.5vw, 42px); font-weight: 800; line-height: 1.18; letter-spacing: -.03em; }
.d24-proof p { color: var(--d24-muted); line-height: 1.7; }
.d24-proof dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d24-proof dl > div { padding: 22px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--d24-line-200); }
.d24-proof dt { margin-bottom: 8px; color: var(--d24-blue); font-size: 12px; font-weight: 850; }
.d24-proof dd { margin: 0; color: var(--d24-ink); font-size: 14px; line-height: 1.55; font-weight: 700; }

.d24-magazines .he-section__head { text-align: left; }
.d24-magazines__chips { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.d24-magazines__chips a { padding: 8px 13px; border-radius: 999px; color: var(--d24-blue); background: #E8F2FF; font-size: 13px; font-weight: 750; text-decoration: none; }
.d24-mag-feature { display: grid; grid-template-columns: 58% 42%; overflow: hidden; min-height: 400px; margin-bottom: 24px; border-radius: 22px; color: inherit; background: #FFFFFF; border: 1px solid var(--d24-line); text-decoration: none; }
.d24-mag-feature__visual { position: relative; background: var(--d24-navy); }
.d24-mag-feature__visual img { width: 100%; height: 100%; object-fit: cover; }
.d24-mag-feature__visual.is-placeholder::before,
.d24-magazines .he-mag-card__thumb.is-placeholder::before {
  content: "D24";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .82);
  background: linear-gradient(145deg, var(--d24-navy), #164E63);
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 850;
  letter-spacing: -.04em;
}
.d24-mag-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 44px; }
.d24-mag-feature__body small { color: var(--d24-blue); font-weight: 850; }
.d24-mag-feature__body strong { color: var(--d24-navy); font-size: clamp(25px, 3vw, 38px); line-height: 1.25; }
.d24-mag-feature__body span { color: var(--d24-muted); line-height: 1.7; }
.d24-mag-feature__body em { color: var(--d24-blue); font-style: normal; font-weight: 850; }
.d24-magazines .he-mag__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; }
.d24-magazines .he-mag-card,
.d24-magazines .he-mag-card * { text-decoration: none !important; }
.d24-magazines .he-mag-card { min-height: 420px; border: 1px solid var(--d24-line-200); border-radius: 18px; background: var(--d24-white); box-shadow: none; }
.d24-magazines .he-mag-card:focus-visible { outline: 0; box-shadow: var(--d24-focus); }
.d24-magazines .he-mag-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--d24-surface-100); }
.d24-magazines .he-mag-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d24-magazines .he-mag-card__body { min-height: 210px; padding: 24px; }
.d24-magazines .he-mag-card__title { display: -webkit-box; overflow: hidden; color: var(--d24-ink-950); font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; line-height: 1.38; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.d24-magazines .he-mag-card__desc { display: -webkit-box; overflow: hidden; color: var(--d24-text-500); font-size: 15px; line-height: 1.68; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.d24-mag-card__link { margin-top: auto; color: var(--d24-blue-600); font-size: 14px; font-weight: 800; }

.d24-area-search { max-width: 760px; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 auto 34px; padding: 8px; border: 1px solid var(--d24-line); border-radius: 18px; background: #FFFFFF; }
.d24-area-search input { min-width: 0; min-height: 54px; padding: 0 16px; border: 0; color: var(--d24-ink); background: transparent; font-size: 16px; }
.d24-area-search input:focus { outline: 2px solid var(--d24-aqua); border-radius: 12px; }
.d24-area-search button { min-width: 118px; border: 0; border-radius: 12px; color: #FFFFFF; background: var(--d24-blue); font-weight: 850; cursor: pointer; }
.d24-areas .he-area__grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.d24-areas .he-area-card { border-radius: 18px; }

.d24-faq { max-width: 960px !important; }
.d24-faq__list { display: grid; gap: 10px; }
.d24-faq details { border: 1px solid var(--d24-line); border-radius: 14px; background: #FFFFFF; }
.d24-faq summary { position: relative; min-height: 62px; padding: 19px 56px 19px 24px; color: var(--d24-navy); font-size: 16px; font-weight: 800; cursor: pointer; list-style: none; }
.d24-faq summary::-webkit-details-marker { display: none; }
.d24-faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--d24-blue-600); border-bottom: 2px solid var(--d24-blue-600); transform: translateY(-65%) rotate(45deg); transition: transform .16s ease; }
.d24-faq details[open] summary::after { transform: translateY(-35%) rotate(225deg); }
.d24-faq summary:focus-visible { outline: 0; box-shadow: inset var(--d24-focus); }
.d24-faq details p { margin: 0; padding: 0 24px 24px; color: var(--d24-muted); line-height: 1.75; }
.d24-faq details[open] { border-color: rgba(0,102,204,.42); background: var(--d24-surface-50); }

.d24-home.he-main > .he-ctaband {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  min-height: 600px;
  margin-top: 0 !important;
  padding: 72px 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.d24-home.he-main > .he-ctaband > .d24-art-directed-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
}
.d24-home.he-main > .he-ctaband > .d24-art-directed-media > img { object-position: center; }
.d24-home .he-ctaband::before { z-index: 1; background: linear-gradient(90deg, rgba(7,26,43,.93), rgba(7,26,43,.72)); }
.d24-home .he-ctaband__inner { z-index: 2; width: min(100%, 960px); max-width: 960px; text-align: left; }
.d24-home .he-ctaband__title {
  margin: 0 0 20px;
  padding-top: 0;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.03em;
}
.d24-home .he-ctaband__title::before,
.d24-home .he-ctaband__title::after { display: none !important; content: none !important; }
.d24-home .he-ctaband__desc { font-size: 17px; }
.d24-home .he-ctaband .d24-media-note { position: static; display: block; margin-top: 28px; }

.d24-mobile-actions { display: none; }

@media (max-width: 1280px) {
  .d24-home.he-main > .he-section,
  .d24-hero-full .d24-hero-full__content,
  .d24-proof__inner { width: calc(100% - 48px); }
}

@media (max-width: 1100px) {
  .d24-home.he-main > .he-section { padding-block: 80px !important; }
  .d24-hero-full .he-hero__body { width: min(600px, 62%); }
  .d24-hero-full .he-hero__title { font-size: clamp(48px, 5.4vw, 58px); }
  .d24-symptoms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d24-process .he-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .d24-magazines .he-mag__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .d24-areas .he-area__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
  body.home { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .d24-home.he-main > .he-section { width: calc(100% - 40px); padding-block: 64px !important; }
  .d24-home .he-section__title { font-size: clamp(29px, 8vw, 32px); line-height: 1.24; }
  .d24-home .he-section__desc { font-size: 15.5px; line-height: 1.7; }
  .d24-hero-full { min-height: 620px; height: min(720px, calc(100svh - 92px)); align-items: stretch; }
  .d24-hero-full__media img { object-position: 68% 36%; }
  .d24-hero-full__overlay { background: linear-gradient(180deg, rgba(7,26,43,.18) 0%, rgba(7,26,43,.44) 42%, rgba(7,26,43,.96) 78%, #071A2B 100%); }
  .d24-hero-full .d24-hero-full__content { width: calc(100% - 40px); padding: 44px 0 92px !important; display: flex !important; align-items: flex-end; }
  .d24-hero-full .he-hero__body { width: 100%; }
  .d24-hero-full .he-hero__eyebrow { max-width: 100%; margin: 0 0 18px; padding: 7px 10px; font-size: 11px; }
  .d24-hero-full .he-hero__title { margin: 0 0 18px; font-size: clamp(36px, 10vw, 40px); line-height: 1.14; }
  .d24-hero-full .he-hero__desc { color: #E4EDF2; font-size: 16px; line-height: 1.7; }
  .d24-hero-full .he-hero__cta { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .d24-hero-full .he-hero__cta .he-cta--secondary { display: none; }
  .d24-hero__chips { margin-top: 18px; gap: 6px; }
  .d24-hero__chips li { padding: 6px 9px; font-size: 11.5px; }
  .d24-home .he-trust__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .d24-home .he-trust__grid li:nth-child(2) { border-right: 0; }
  .d24-symptoms__grid { grid-template-columns: 1fr; }
  .d24-symptom-card { min-height: 200px; }
  .d24-home.he-main > .d24-checker { margin: 0 !important; padding: 72px 20px !important; }
  .d24-checker__inner { grid-template-columns: 1fr; gap: 38px; }
  .d24-checker h2 { font-size: 32px; line-height: 1.24; }
  .d24-checker label { margin-bottom: 8px; }
  .d24-home.he-main > .d24-equipment { min-height: 620px; margin: 0 !important; padding: 72px 20px !important; }
  .d24-equipment__overlay { background: rgba(7,26,43,.88); }
  .d24-equipment h2 { font-size: 36px; line-height: 1.2; }
  .d24-equipment__steps { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .d24-spaces__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 12px; }
  .d24-space-card > span { padding: 18px; }
  .d24-space-card strong { font-size: 18px; line-height: 1.25; }
  .d24-space-card small { font-size: 12px; line-height: 1.45; }
  .d24-space-card em { font-size: 8px; }
  .d24-process .he-process__grid { grid-template-columns: 1fr !important; }
  .d24-process .he-process-card { grid-template-columns: 76px 1fr; min-height: 118px; }
  .d24-process .he-process-card__num { font-size: 24px; }
  .d24-cost { grid-template-columns: 1fr; gap: 34px; }
  .d24-cost__table-wrap { overflow: visible; border: 0; background: transparent; }
  .d24-cost table, .d24-cost tbody, .d24-cost tr, .d24-cost th, .d24-cost td { display: block; width: 100%; min-width: 0; }
  .d24-cost thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .d24-cost tbody { display: grid; gap: 10px; }
  .d24-cost tr { padding: 16px 18px; border: 1px solid var(--d24-line); border-radius: 14px; background: #FFFFFF; }
  .d24-cost tbody th { width: 100%; padding: 0 0 7px; border: 0; font-size: 13px; }
  .d24-cost tbody td { padding: 0; border: 0; font-size: 14px; line-height: 1.55; }
  .d24-home.he-main > .d24-proof { margin: 0 !important; padding: 64px 20px !important; }
  .d24-proof__inner { grid-template-columns: 1fr; gap: 34px; }
  .d24-proof__inner { width: 100%; }
  .d24-proof h2 { font-size: 30px; line-height: 1.24; }
  .d24-proof dl { grid-template-columns: 1fr; }
  .d24-mag-feature { grid-template-columns: 1fr; }
  .d24-mag-feature__visual { aspect-ratio: 16 / 10; }
  .d24-mag-feature__body { padding: 28px; }
  .d24-magazines .he-mag__grid { grid-template-columns: 1fr !important; }
  .d24-magazines .he-mag-card { min-height: 0; }
  .d24-area-search { grid-template-columns: 1fr; padding: 7px; }
  .d24-area-search button { min-height: 48px; }
  .d24-areas .he-area__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .d24-home.he-main > .he-ctaband { min-height: 560px; margin-top: 0 !important; padding: 64px 20px 92px !important; }
  .d24-home .he-ctaband__title { font-size: 32px; line-height: 1.24; }
  body.home #ctaFloat { display: none !important; }
  .d24-mobile-actions {
    position: fixed;
    z-index: 9998;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 8px;
    padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
    background: rgba(247,250,252,.96);
    border-top: 1px solid var(--d24-line);
    backdrop-filter: blur(14px);
  }
  .d24-mobile-actions a { min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #FFFFFF; background: var(--d24-navy); font-weight: 850; text-decoration: none; }
  .d24-mobile-actions a:last-child { color: var(--d24-navy); background: var(--d24-lime); }
}

@media (max-width: 360px) {
  .d24-home.he-main > .he-section,
  .d24-hero-full .d24-hero-full__content { width: calc(100% - 32px); }
  .d24-hero-full .he-hero__title { font-size: 36px; }
  .d24-symptom-card { grid-template-columns: 39% 61%; }
  .d24-symptom-card__body { padding: 20px 16px; }
  .d24-areas .he-area__grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
}

@media (max-width: 320px) {
  .d24-hero-full .he-hero__title { font-size: 34px; }
  .d24-hero-full .he-hero__desc { font-size: 15px; }
  .d24-hero__chips li { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .d24-home *,
  .d24-home *::before,
  .d24-home *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}