/* layout/header.css — 부모 컴포넌트 오버라이드
   로드 순서: 부모 archf-* → common → animation → layout/* → page/{슬러그}
   시안: ../1. 연센트럴치과_디자인/PC/pc)연센트럴치과_랜딩페이지_01~03 핵심가치.psd (헤더 0..150)
   전제: 커스터마이저 헤더 변형 A(솔리드 · 드롭다운) — 2차 메뉴가 없어 B·D 는 빈 메가 패널이 열린다 */

/* ── 메뉴 글자 ──
   부모는 메뉴를 커스터마이저 변수로 뿌린다. :root 에 값이 무조건 찍히므로 요소에서 다시 정의한다
   (CLAUDE.md 「부모 변수의 폴백」). 시안: Noto Sans KR 18px · 자간 -55 · #000, 현재 항목만 Bold */

.site-header {
    --nav-color: var(--hd-color);
    --nav-hover-color: var(--main-color);
    --nav-current-color: var(--hd-color);
    --nav-font-size: 18px;
    --font-nav-weight: 400;
    --nav-letter-spacing: -0.055em;
    --nav-item-spacing: 42px;   /* 글자 사이 실측 45 — 상자 사이는 옆 여백만큼 덜 띄운다 (렌더 대조) */
}

/* 현재 위치는 assets/js/layout.js 가 스크롤에 맞춰 .is-active 로 표시한다.
   WP 의 current-menu-item 은 해시 링크라 전부 붙어서 inc/one-page.php 가 떼어 둔다 */
.site-header .nav-link.is-active {
    font-weight: 700;
}

/* 부모의 hover·현재 항목 밑줄 — 시안에 없다 */
.site-header--child-order .nav-item > .nav-link::after {
    content: none;
}

.site-header--child-order .nav-link {
    padding: 0;
    line-height: 1.6;
}

/* ── 헤더 정보 — 전화 · 야간진료 · 네이버 예약 (PC 전용) ──
   시안: 알약 높이 35(선 포함) · 간격 8 · G마켓 산스 18px.
   테두리는 시안 #000 이지만 컬러칩 보더(--gray-color02)로 맞췄다 — 글자색(#29292c)과 같은 값 */

.hd-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hd-info-pill {
    --hd-pill-bg: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 156px;
    height: 35px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--gray-color02);
    border-radius: 999px;
    background-color: var(--hd-pill-bg);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: var(--gray-color02);
    white-space: nowrap;
}

/* 요일·시간을 <span> 하나로 감쌌다 — 알약이 flex 라 따로 두면 사이 공백이 사라진다 */
.hd-info-hours {
    --hd-pill-bg: #d8f3ff;
}

.hd-info-hours strong {
    font-weight: 700;
    letter-spacing: -0.03em;
}

.hd-info-naver {
    --hd-pill-bg: #e2ffe1;

    min-width: 56px;
    padding: 0;
}

.hd-info-naver img {
    display: block;
    width: 22px;
}

@media (hover: hover) {
    .hd-info-tel:hover {
        border-color: var(--main-color);
        color: var(--main-color);
    }

    .hd-info-naver:hover {
        border-color: var(--main-color);
    }
}

/* ── PC 배치 — 로고 왼쪽 / 오른쪽 윗줄 정보 · 아랫줄 메뉴 ──
   시안 design/header/pc_summary.jpg (1920×150). 컨테이너 160..1760 · 정보 38..73 · 메뉴 글줄 92..121 · 로고 51..114
     가로  로고 왼쪽 = 컨테이너 왼쪽, 정보·메뉴 오른쪽 끝 = 컨테이너 오른쪽
     세로  로고 아랫선 = 메뉴 한글 아랫선. 로고 크기·헤더 높이가 바뀌어도 이 선에 앉는다
           (시안은 로고가 2px 떠 있었는데 맞춰 달라는 요청으로 붙였다 — 2026-10-27)
           정보+메뉴 두 줄 묶음(약 84)은 헤더 안에서 가운데 — 시안이 5px 아래라 padding-top 10
   상하 여백은 커스터마이저 「헤더 높이 — PC」가 정한다. 150 이면 시안과 같다 */

@media (min-width: 1024px) {
    .site-header--child-order .site-header__inner.container {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "logo info"
            "logo nav";
        align-content: center;
        column-gap: 40px;
        row-gap: 20px;
        max-width: calc(1600px + var(--one-gap-r) * 2);
        padding-top: 10px;
    }

    /* 5 = 메뉴 글줄 아래에서 한글 아랫선까지 (Noto Sans KR 18px · 행간 1.6, 크롬 렌더 실측) */
    .site-header--child-order .site-logo {
        grid-area: logo;
        align-self: end;
        margin-bottom: 5px;
    }

    .site-header--child-order .hd-info {
        grid-area: info;
        justify-self: end;
    }

    .site-header--child-order .main-navigation {
        grid-area: nav;
        justify-content: flex-end;
    }

    /* 부모는 헤더 A 메뉴를 --header-a-max-width(인라인 1200)로 가두고 가운데에 둔다 */
    .site-header--child-order .header-a,
    .site-header--child-order .header-a__track,
    .site-header--child-order .nav-menu--variant-a {
        max-width: none;
        margin-inline: 0;
    }

    .site-header--child-order .nav-menu--variant-a {
        justify-content: flex-end;
    }

    /* 부모 responsive.css 가 ≤1279 에서 간격 −6px · 글자 −1px 을 한 번 더 깎는다 —
       아래 구간별 값이 그대로 나오도록 변수를 직접 받는다 */
    .site-header--child-order .nav-menu {
        gap: var(--nav-item-spacing);
    }

    .site-header--child-order .nav-link {
        font-size: var(--nav-font-size);
    }

    /* 유틸(전화·햄버거)은 시안 PC 에 없다 — 커스터마이저 「햄버거 메뉴 표시」도 PC 에서는 효과 없음 */
    .site-header--child-order .site-header__util {
        display: none;
    }
}

/* 메뉴 9개가 한 줄에 들어가도록 좁아질수록 간격·글자·로고를 줄인다 (시안 없음 — 유추값).
   로고 폭은 커스터마이저가 인라인 style 로 박아 !important 로만 덮인다 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .site-header {
        --nav-font-size: 16px;
        --nav-item-spacing: 24px;
    }

    .site-header .site-logo__img {
        width: 200px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .site-header {
        --nav-font-size: 15px;
        --nav-item-spacing: 14px;
    }

    .site-header .site-logo__img {
        width: 170px !important;
    }
}

/* 부모가 ≥1920 에서 헤더만 10px 키운다(responsive.css). 본문 여백(body padding-top)은
   그대로라 슬라이드 위 10px 이 헤더에 가린다 — 높이를 커스터마이저 값으로 되돌린다 */
@media (min-width: 1920px) {
    .site-header {
        height: var(--header-height);
    }
}

/* 관리자 로그인 시 WP 관리 막대가 html 을 32px(≤782 46px) 밀어 내리는데, 고정 헤더는 화면 맨 위에
   그대로라 위쪽이 막대에 가리고 헤더 아래로 그만큼 빈 띠가 생긴다. 부모가 처리하지 않아 막대 아래로 내린다.
   ≤600 은 막대가 스크롤로 사라져 내려간 동안 헤더 위가 46 빈다 — 관리자 화면에서만 */
.admin-bar .site-header--sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header--sticky {
        top: 46px;
    }
}

/* ── 모바일·태블릿 — 부모 그리드(logo util) 그대로, 메뉴는 햄버거로 ── */

@media (max-width: 1023px) {
    .hd-info {
        display: none;
    }

    .site-header--child-order .site-header__util {
        gap: 12px;
    }

    /* 로고 이미지에 고유 크기가 없으면(width·height 속성 없는 SVG) 부모의
       width:auto + height:auto !important 에 크기를 못 정해 무너진다 — 높이만 확정한다.
       가로는 비율로 따라온다. PNG 로고는 이 규칙이 없어도 같은 결과다 */
    .site-header .site-logo__img {
        height: calc(var(--header-height-sm, 60px) - 16px) !important;
        max-height: none;
    }
}

/* 1024 미만은 헤더 좌우 여백을 .site-header 가 혼자 갖는다.
   layout/base.css 의 .container 패딩과 겹쳐 두 번 들어가므로 안쪽을 지운다 */
@media (max-width: 1023px) {
    .site-header {
        padding: 0 30px;
    }

    .site-header__inner.container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 639px) {
    .site-header {
        padding: 0 16px;
    }
}

/* 햄버거 선 — 부모는 background-color 라 --nav-color 상속을 안 탄다. 직접 지정한다. */
.hamburger-btn__line {
    background-color: var(--hd-color);
}

/* ── 원페이지 앵커 — 고정 헤더 밑에 섹션 머리가 숨지 않게 ──
   JS 가 꺼져 있거나 다른 페이지에서 /#doctor 로 들어올 때의 기본값.
   메뉴 클릭은 assets/js/layout.js 가 헤더 실제 높이로 다시 계산한다 */
section[id],
.section[id] {
    scroll-margin-top: var(--header-height);
}

/* 메뉴로 이동하면 JS 가 섹션에 포커스를 옮긴다(tabindex -1) — 섹션 전체에 테두리가 그려지지 않게 */
section[id]:focus,
.section[id]:focus {
    outline: none;
}

@media (max-width: 1023px) {
    section[id],
    .section[id] {
        scroll-margin-top: var(--header-height-sm);
    }
}