/* base.css — 리셋 + 타이포 스케일 + 공통 유틸리티 */
/* 모든 무드 토큰 파일과 함께 로드된다 */

/* === Reset === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--mood-body-ff);
    font-weight: var(--mood-body-fw);
    color: var(--mood-text);
    background-color: var(--mood-bg);
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

/* === Typography Scale (clamp, mobile-first) === */
/* 히어로 H1 모바일 최소 32px (CLAUDE.md §13) */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mood-heading-ff);
    font-weight: var(--mood-heading-fw);
    line-height: 1.3;
    word-break: keep-all;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);    /* 32px ~ 56px */
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem); /* 24px ~ 40px */
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* 20px ~ 28px */
}

h4 {
    font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18px ~ 22px */
}

p {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); /* 15px ~ 17px */
    line-height: 1.8;
}

small {
    font-size: 0.875rem; /* 14px */
}

/* === Layout Utilities === */

.section {
    padding: var(--mood-section-gap) 0;
}

/* 짝수 섹션 줄무늬 — :where() 로 특이도 0: 자체 배경을 가진 섹션(.section-numbers primary, hero-c 그라데이션, S18 accent, CTA 등)의
   단일 클래스 규칙이 항상 이긴다 (Act iter1 시각 검수: S03 흰 글씨가 bg-alt 위에 렌더되던 대비 결함) */
:where(.section:nth-child(even)) {
    background-color: var(--mood-bg-alt);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

/* === CTA Buttons === */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;    /* 터치 타깃 44px (CLAUDE.md §8.2) */
    min-width: 44px;
    padding: 12px 24px;
    border-radius: var(--mood-radius);
    font-family: var(--mood-body-ff);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.btn:active {
    transform: scale(0.97);
}

.btn--primary {
    background-color: var(--mood-primary);
    color: #fff;
}

.btn--primary:hover {
    background-color: var(--mood-primary-light);
}

.btn--secondary {
    background-color: transparent;
    color: var(--mood-primary);
    border: 1.5px solid var(--mood-primary);
}

.btn--secondary:hover {
    background-color: var(--mood-primary);
    color: #fff;
}

/* === Accessibility === */

.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;
}

/* === Site header / nav / footer (g5-theme-base head.sub.php · tail.sub.php 골격) — M7 추가 ===
   모바일 우선: 햄버거 + 드롭 패널 → 1024px 이상 인라인 메뉴. 색은 토큰만 참조(§15). */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: color-mix(in srgb, var(--mood-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mood-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--header-h-mobile, 64px);
    position: relative;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-header__logo img {
    height: 36px;
    width: auto;
}

.site-header__phone {
    margin-left: auto;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mood-primary);
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.site-header__hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.site-header__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--mood-text);
    transition: transform 0.2s, opacity 0.2s;
}

.site-header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: var(--mood-bg);
    border-bottom: 1px solid var(--mood-border);
    padding: 8px clamp(16px, 4vw, 40px) 16px;
}

.site-nav--open {
    display: block;
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-weight: 500;
    color: var(--mood-text);
}

.site-nav__cta {
    color: var(--mood-primary) !important;
    font-weight: 700 !important;
}

/* 드롭다운(Act iter2 — 허브→세부, 병원소개→의료진·시그니처). <1024px: 햄버거 패널 안 아코디언(.is-open, JS 클릭 토글).
   >=1024px: hover/focus-within(CSS, 키보드 Tab 포함)로 열리고 .is-open(클릭·터치 데스크톱)도 동일하게 연다. 라이브러리 없이 바닐라 JS(§13). */
.site-nav__item { position: relative; }

.site-nav__row {
    display: flex;
    align-items: stretch;
}

.site-nav__link {
    flex: 1 1 auto;
}

.site-nav__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--mood-text);
}

.site-nav__toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.site-nav__item.is-open > .site-nav__row .site-nav__toggle svg {
    transform: rotate(180deg);
}

.site-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.site-nav__item.is-open > .site-nav__submenu {
    max-height: 1200px;
}

.site-nav__submenu a {
    font-size: 0.9375rem;
    font-weight: 400;
    opacity: 0.85;
}

@media (min-width: 1200px) {
    .site-header__hamburger { display: none; }
    .site-header__phone { margin-left: 0; order: 3; }
    .site-nav {
        display: block;
        position: static;
        background: transparent;
        border: 0;
        padding: 0;
        margin-left: auto;
        order: 2;
    }
    /* 허브 최대 7 + 칼럼 + 오시는 길 + 예약 = 10항목(Act iter1 I-7) — 1024px 근처 폭 부족 대비 wrap 허용, 간격은 clamp */
    /* 드롭다운 도입으로 항목이 10개가 되면서 두 줄로 접혔다(2026-09-10).
       간격·글자를 조여 한 줄에 밀어 넣었더니 이번엔 너무 빽빽했다 — 헤더 컨테이너를 본문보다 넓게 쓰고
       간격·글자를 원래 크기로 되돌린다. 본문 폭(1200px)은 읽기 좋은 값이라 그대로 두고 헤더만 넓힌다. */
    /* --header-* 는 거래처 token_overrides 로 조정(시안별 헤더 높이·메뉴 글자·간격). 기본값 = 종전 값 */
    .site-header__inner { max-width: var(--header-max, 1560px); min-height: var(--header-h, 64px); }
    .site-nav__list { flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; gap: 0 var(--header-nav-gap, clamp(16px, 1.6vw, 30px)); }
    .site-nav__list a { min-height: var(--header-h, 64px); font-size: var(--header-nav-fs, 0.95rem); white-space: nowrap; }
    /* 로고·전화번호가 내비 폭을 압박하지 않도록 내비에 남은 공간을 준다 */
    .site-header__nav { flex: 1 1 auto; min-width: 0; }

    .site-nav__row { align-items: center; }
    .site-nav__toggle { width: 32px; height: 44px; }

    .site-nav__submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        max-height: none;
        overflow: visible;
        padding: 8px;
        margin-top: -4px;
        background-color: var(--mood-bg);
        border: 1px solid var(--mood-border);
        border-radius: var(--mood-radius);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
        z-index: 60;
    }

    .site-nav__item:hover > .site-nav__submenu,
    .site-nav__item:focus-within > .site-nav__submenu,
    .site-nav__item.is-open > .site-nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-nav__submenu li { width: 100%; }
    .site-nav__submenu a {
        min-height: 40px;
        padding: 4px 10px;
        border-radius: calc(var(--mood-radius) - 4px);
        white-space: normal;
        font-size: 0.9rem;
    }
    .site-nav__submenu a:hover,
    .site-nav__submenu a:focus-visible {
        background-color: var(--mood-bg-alt);
        opacity: 1;
    }
}

/* 다크 헤더 (client.yaml brand.header_theme: dark) — 흰색·밝은 로고 거래처. primary 바탕 + on-primary 글자, 색은 토큰만(§15).
   2026-09-14 정교한치과(로고 시안+연회색): 흰 헤더에서 로고가 떠 보여 사용자 요청. 모바일 패널·데스크톱 드롭다운도 같은 톤 */
.site-header--dark {
    background-color: color-mix(in srgb, var(--mood-primary) 94%, transparent);
    border-bottom-color: color-mix(in srgb, var(--mood-on-primary) 15%, transparent);
    color: var(--mood-on-primary);
}

.site-header--dark .site-header__phone,
.site-header--dark .site-nav__list a,
.site-header--dark .site-nav__toggle {
    color: var(--mood-on-primary);
}

.site-header--dark .site-nav__cta {
    color: var(--mood-on-primary) !important;
}

.site-header--dark .site-header__hamburger span {
    background-color: var(--mood-on-primary);
}

.site-header--dark .site-nav {
    background-color: var(--mood-primary);
    border-bottom-color: color-mix(in srgb, var(--mood-on-primary) 15%, transparent);
}

@media (min-width: 1200px) {
    .site-header--dark .site-nav {
        background: transparent;
    }

    .site-header--dark .site-nav__submenu {
        background-color: var(--mood-primary);
        border-color: color-mix(in srgb, var(--mood-on-primary) 20%, transparent);
    }

    .site-header--dark .site-nav__submenu a:hover,
    .site-header--dark .site-nav__submenu a:focus-visible {
        background-color: color-mix(in srgb, var(--mood-on-primary) 12%, transparent);
    }
}

/* 어두운 헤더의 전화번호 — 크림 강조색(--mood-accent-soft)이 있으면 그것으로. 아이콘은 brand.extra_assets.header-call */
.site-header--dark .site-header__phone {
    gap: 8px;
    color: var(--mood-accent-soft, var(--mood-on-primary));
}

.site-header__phone-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.site-header--dark .site-header__logo img {
    height: var(--header-logo-h, 36px);
}

/* 모바일 — 가로형 흰색 로고(179×34)는 36px 높이면 전화번호·햄버거와 함께 390px 을 넘는다 → 로고를 줄이고 전화 아이콘은 생략 */
@media (max-width: 1199px) {
    .site-header--dark .site-header__logo img {
        height: 26px;
    }

    .site-header__phone-icon {
        display: none;
    }
}

/* 오버레이 헤더 (client.yaml brand.header_theme: overlay) — 2026-09-21 돌다리 피그마(132:327) 역수확.
   홈에서만: 히어로 위에 고정으로 겹치고 primary 73%→5% 투명 그라데이션 + primary 1px 밑줄. 스크롤하면 단색.
   서브·게시판은 .site-header--dark 그대로(히어로가 없어 겹칠 대상이 없다). */
.site-header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mood-primary) 73%, transparent) 0%,
        color-mix(in srgb, var(--mood-primary) 5%, transparent) 100%);
    border-bottom: 1px solid var(--mood-primary);
    backdrop-filter: none;
}

.site-header--overlay.is-scrolled {
    background: color-mix(in srgb, var(--mood-primary) 96%, transparent);
    backdrop-filter: blur(8px);
}

.site-header--overlay .site-nav__list a {
    text-shadow: 0 1px 2px color-mix(in srgb, var(--mood-text) 35%, transparent);   /* 밝은 그라데이션 하단에서 흰 글자 가독성 보강 */
}

.site-header--overlay.is-scrolled .site-nav__list a {
    text-shadow: none;
}

@media (min-width: 1200px) {
    /* flat — 드롭다운 화살표 숨김(시안에 없음). 하위 메뉴는 hover·focus-within 으로 그대로 열린다 */
    .site-header--flat .site-nav__toggle {
        display: none;
    }

    .site-header--flat .site-nav__link[aria-current="page"],
    .site-header--flat .site-nav__list > li > a[aria-current="page"] {
        font-weight: 700;
    }
}

.site-footer {
    background-color: var(--mood-primary);
    color: var(--mood-on-primary);
    padding: 48px 0 calc(48px + 64px);   /* 하단 여백 = 플로팅 CTA 바 높이 */
    font-size: 0.9rem;
}

.site-footer a { color: inherit; }
.site-footer__inner { display: grid; gap: 24px; }
.site-footer__name { font-weight: 700; font-size: 1.05rem; margin: 0 0 8px; }
.site-footer__address { font-style: normal; opacity: 0.9; margin: 0 0 4px; }
.site-footer__phone { margin: 0; font-weight: 600; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer__links a { text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; opacity: 0.85; font-size: 0.8rem; }
.site-footer__legal p { margin: 0; }

/* 푸터 사이트맵 (Act iter2 — §11.4 내부링크·뎁스 노출): 진료 안내(허브×세부) · 병원 소개 · 이용 안내 3그룹.
   `--mood-on-primary` 만 사용(§14 색상 토큰) — 배경은 site-footer 의 --mood-primary. 좁은 화면은 grid 가 자동으로 1~2열로 줄어 가로 스크롤 없이 쌓인다(§8.2/§13 390px 검증 대상) */
.site-footer__sitemap {
    display: grid;
    gap: 28px;
    grid-column: 1 / -1;
    padding: 24px 0;
    border-top: 1px solid color-mix(in srgb, var(--mood-on-primary) 25%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--mood-on-primary) 25%, transparent);
}
.site-footer__sitemap-title {
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    opacity: 0.7;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.site-footer__sitemap-cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px 16px;
}
.site-footer__sitemap-heading {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 8px;
}
.site-footer__sitemap-heading:hover,
.site-footer__sitemap-heading:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__sitemap-col ul,
.site-footer__sitemap-block > ul {
    display: flex;
    flex-direction: column;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__sitemap a { opacity: 0.82; line-height: 1.4; }
.site-footer__sitemap a:hover,
.site-footer__sitemap a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__sitemap-block > ul { display: flex; flex-wrap: wrap; flex-direction: row; gap: 8px 20px; }

@media (min-width: 768px) {
    .site-footer__inner { grid-template-columns: 1fr auto; align-items: start; }
    .site-footer__legal { grid-column: 1 / -1; }
}

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

/* === Fonts — self-host (CLAUDE.md §13) === */
/* @font-face 선언은 tokens/fonts.css 에 있다(build-fonts.js 자동 생성 — 2청크 unicode-range).
   head.sub.php 가 core 시트(fonts.css)를 첫 페인트 직후 인라인 주입, ext 시트(fonts-ext.css)를 load 후 주입한다 — preload 미사용(근거 library/fonts/README.md). */

/* === Motion tokens & utilities (M6 역수확 — 프리뷰 표준화) === */

:root {
    --motion-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --motion-duration: calc(0.8s * var(--mood-duration-scale, 1));
}

/* .reveal — CSS 전용 리빌(opt-in). html.js-motion 이 있을 때만 초기 숨김 → JS 미로드 시 콘텐츠 항상 노출.
   data-reveal(motion/reveal.js, GSAP) 과 별개 경로이며 충돌하지 않는다. */
html.js-motion .reveal {
    opacity: 0;
    transform: translateY(calc(32px * var(--mood-distance-scale, 1)));
    transition: opacity var(--motion-duration) var(--motion-ease),
                transform var(--motion-duration) var(--motion-ease);
}

html.js-motion .reveal.is-visible {
    opacity: 1;
    transform: none;
}

html.js-motion .reveal:nth-child(2) { transition-delay: 0.1s; }
html.js-motion .reveal:nth-child(3) { transition-delay: 0.2s; }
html.js-motion .reveal:nth-child(4) { transition-delay: 0.3s; }

/* 섹션 헤딩 — accent 언더라인 (opt-in: .section__header 래퍼) */
.section__header {
    text-align: center;
    margin-bottom: 8px;
}

.section__header h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 2px;
    background-color: var(--mood-accent);
}

.section__header p {
    max-width: 560px;
    margin: 16px auto 0;
    color: var(--mood-text-muted);
    line-height: 1.7;
}

/* 카드 기본 — 미세 그림자 + hover 상승 */
.card {
    background-color: var(--mood-bg);
    border: 1px solid var(--mood-border, transparent);
    border-radius: var(--mood-radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s var(--motion-ease), box-shadow 0.25s var(--motion-ease);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* === 푸터 어두운 띠 (.site-footer--dark — client.yaml brand.footer_theme: dark, 돌다리 피그마 145:804) ===
   어두운 면(#313131 상당) · 흰 로고 · 옅은 회색 글자. NAP(주소·전화)와 사이트맵은 그대로 둔다(§11.4). 글자 대비 ≥4.5:1 을 위해 시안의 60% 보다 조금 밝게 쓴다 */
.site-footer--dark {
    background-color: var(--mood-surface-dark, #313131);
    color: #c9c9c9;
}
.site-footer__biz { margin: 0 0 4px; opacity: 0.9; }
.site-footer__logo { display: block; width: auto; height: 40px; margin: 0 0 16px; opacity: 0.85; }
.site-footer--dark .site-footer__name { color: #e6e6e6; }
.site-footer--dark .site-footer__sitemap-title { color: #e6e6e6; }
.site-footer--dark .site-footer__sitemap a { opacity: 1; color: #b9b9b9; }
.site-footer--dark .site-footer__sitemap a:hover,
.site-footer--dark .site-footer__sitemap a:focus-visible { color: #fff; }
.site-footer--dark .site-footer__legal { opacity: 1; color: #b0b0b0; }

/* === 푸터 compact (.site-footer--compact — brand.footer_style: compact, 돌다리 피그마 153:931) ===
   1920 기준 h120 · 좌우 240(내용 폭 1440) · 로고 210×40 왼쪽, 바로 옆(45px)에 한 줄 고지 왼쪽 정렬(16px lh1.8, 자간 -0.03em). 로고·글자 모두 60% 로 흐림.
   좁은 화면은 세로로 쌓이고 줄바꿈 허용. 플로팅 CTA 바 높이만큼 아래 여백 유지. 글자 #d9d9d9 × 0.6 은 대비가 모자라므로 opacity 대신 색으로 같은 밝기(#8c8c8c 상당 → 4.5:1 넘기게 #9a9a9a)를 쓴다. */
.site-footer--compact {
    padding: 0;                              /* 2026-09-22 사용자 지시 — 띠(h120) 외 여백 없음 */
    font-size: 1rem;
}
.site-footer--compact .site-footer__bar {
    max-width: 1920px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px 45px;
    padding: 24px clamp(16px, 12.5vw, 240px);   /* 시안 좌우 240 */
}
.site-footer--compact .site-footer__logo-link { flex-shrink: 0; display: inline-flex; line-height: 0; }
.site-footer--compact .site-footer__logo { height: 40px; width: auto; margin: 0; opacity: 0.6; }
.site-footer--compact .site-footer__line {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(0.8125rem, 0.83vw, 1rem);
    line-height: 1.8;
    letter-spacing: -0.04em;
    color: #9d9d9d;                          /* #313131 위 4.53:1 */
    text-align: left;                        /* nowrap 을 걸면 줄이 오른쪽 방침 링크 위로 넘친다(2026-09-22) — 줄바꿈 허용, 1920 에서는 폭이 남아 자연히 한 줄 */
    word-break: keep-all;
}
.site-footer--compact .site-footer__line .site-footer__name { font-weight: 400; font-size: inherit; margin: 0; color: inherit; }   /* 기본 .site-footer__name(700·1.05rem) 을 되돌린다 */
.site-footer--compact .site-footer__address { display: inline; font-style: normal; opacity: 1; margin-left: 0.25em; }   /* 기본 .site-footer__address 의 opacity .9 가 겹치면 대비 4.07 로 미달 */
.site-footer--compact .site-footer__sep { margin: 0 0.15em; }
.site-footer--compact .site-footer__phone { font-weight: inherit; }
.site-footer--compact .site-footer__line a { text-decoration: none; }
.site-footer--compact .site-footer__line a:hover,
.site-footer--compact .site-footer__line a:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: #d9d9d9; }
.site-footer--compact .site-footer__copy { display: inline; margin-left: 0.25em; }
@media (max-width: 768px) {
    .site-footer--compact { padding-bottom: 64px; }   /* 모바일 플로팅 CTA 바(h64)가 마지막 줄을 가리지 않게 — 데스크톱은 바가 없어 0 */
}
@media (max-width: 1023px) {
    .site-footer--compact .site-footer__bar { flex-direction: column; align-items: flex-start; }
    .site-footer--compact .site-footer__copy { display: block; margin: 4px 0 0; }
}

/* === 푸터 primary 띠 (.site-footer--primary — brand.footer_theme: primary, 하늘수 피그마 1:4070) ===
   primary 면 · 흰 로고(헤더 컬러 로고를 반전) · 흰 글자. compact 와 함께 쓴다 */
.site-footer--primary {
    background-color: var(--mood-primary);
    color: var(--mood-on-primary, #fff);
}
.site-footer--primary .site-footer__logo { opacity: 1; filter: brightness(0) invert(1); }
.site-footer--primary .site-footer__name { color: inherit; }
.site-footer--compact.site-footer--primary .site-footer__line { color: rgba(255, 255, 255, 0.92); }
.site-footer--compact.site-footer--primary .site-footer__line a:hover,
.site-footer--compact.site-footer--primary .site-footer__line a:focus-visible { color: #fff; }

/* === 푸터 관리자 메뉴 (.site-footer__util — 2026-10-01): 오른쪽 끝 작은 "로그인" / 로그인 상태면 관리자·로그아웃. 회원가입 링크는 두지 않는다 ===
   글자는 한 줄 문구보다 한 단계 작게, 터치 44px. 좁은 화면(세로 쌓임)에서는 왼쪽 정렬. 색은 변형(dark/primary)이 .site-footer__line 에 준 값을 상속 */
.site-footer--compact .site-footer__util {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8125rem;
    letter-spacing: -0.02em;
}
.site-footer--compact .site-footer__util a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
}
.site-footer--compact .site-footer__util a:hover,
.site-footer--compact .site-footer__util a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer--compact.site-footer--dark .site-footer__util { color: #9d9d9d; }
.site-footer--compact.site-footer--primary .site-footer__util { color: rgba(255, 255, 255, 0.92); }
@media (max-width: 1023px) {
    .site-footer--compact .site-footer__util { margin-left: 0; }
}