/* =============================================================
 * header.css — PC 헤더 + Mobile 헤더 + 햄버거 드로어.
 *
 * 시안 출처: Figma node 5:2291 (Navigation, Nav Mobile Default/Expanded).
 * 토큰만 사용, 리터럴 값 금지 — 변경은 tokens.css 에서.
 *
 * 마크업 구조 (header.php 참조):
 *   .ws-header
 *     └ .ws-header__inner.ws-container
 *         ├ .ws-header__logo
 *         ├ .ws-header__nav.is-pc-only         (PC: wp_nav_menu)
 *         ├ .ws-header__cta.is-pc-only         (PC: 1:1 상담)
 *         └ .ws-header__toggle.is-mobile-only  (Mobile: 햄버거)
 *     └ .ws-mobile-drawer.is-mobile-only
 *         ├ .ws-mobile-drawer__nav   (wp_nav_menu)
 *         └ .ws-mobile-drawer__actions  (1:1 상담 / 전화 상담)
 * ============================================================= */


/* ─────────────────────────────────────────────────────────────
 *  Header shell (PC + Mobile 공통)
 * ───────────────────────────────────────────────────────────── */

.ws-header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: var(--ws-z-sticky);
    width: 100%;
    background: var(--ws-color-bg-nav);
    backdrop-filter: blur(var(--ws-blur-nav));
    -webkit-backdrop-filter: blur(var(--ws-blur-nav));
    border-bottom: 1px solid var(--ws-color-border-2);
}

/* WordPress 관리자바(admin bar) 가 떠 있을 때 sticky 헤더가 그 아래로 내려가야
   상단이 가려지지 않음. admin bar 높이는 PC 32 / Mobile 46. */
body.admin-bar .ws-header {
    top: 32px;
}

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

/* admin bar 는 ≤600 viewport 에서 `position: absolute` 로 동작 (스크롤 시 콘텐츠와 함께 사라짐)
   → sticky 헤더는 viewport top:0 에 딱 붙어야 함 (사용자 보고 — 헤더 중간 공간 fix). */
@media screen and (max-width: 600px) {
    body.admin-bar .ws-header {
        top: 0;
    }
}

.ws-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--ws-header-h-mobile);
    gap: var(--ws-space-4);
}

@media (min-width: 1024px) {
    .ws-header__inner {
        height: var(--ws-header-h);
        gap: var(--ws-space-8);
    }
    /* Mobile 에서는 1px border 가 시안과 어울리고 PC 에서는 제거 */
    .ws-header {
        border-bottom: 0;
    }
}


/* ─────────────────────────────────────────────────────────────
 *  Logo
 * ───────────────────────────────────────────────────────────── */

.ws-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
    color: inherit;
    text-decoration: none;
}

.ws-header__logo:hover {
    text-decoration: none;
}

.ws-header__logo-img {
    display: block;
    height: 32px;
    width: auto;
    max-width: 180px;
}

@media (min-width: 1024px) {
    .ws-header__logo-img {
        height: 48px;
    }
}

/* 옵션 미설정 시의 placeholder (시안의 보라 박스와 동일) */
.ws-header__logo-placeholder {
    display: block;
    width: 146px;
    height: 45px;
    background: var(--ws-color-primary);
    border-radius: var(--ws-radius-sm);
}

@media (min-width: 1024px) {
    .ws-header__logo-placeholder {
        width: 180px;
        height: 48px;
    }
}


/* ─────────────────────────────────────────────────────────────
 *  PC nav (wp_nav_menu)
 * ───────────────────────────────────────────────────────────── */

/* 기본(Mobile) 숨김 → desktop 에서만 노출.
   utilities 의 .is-pc-only(display:none) 보다 header.css 가 뒤에 enqueue 되어
   specificity 동등 시 component 룰이 이기는 문제를 미디어쿼리로 직접 차단. */
.ws-header__nav {
    display: none;
}

@media (min-width: 1024px) {
    .ws-header__nav {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }
}

.ws-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--ws-space-8); /* 32px (시안) */
}

.ws-header__menu a {
    display: inline-block;
    font-family: var(--ws-font-display);
    font-size: var(--ws-fs-menu);
    font-weight: var(--ws-fw-medium);
    line-height: var(--ws-lh-tight);
    letter-spacing: var(--ws-ls-tight);
    color: var(--ws-color-text-2);
    text-decoration: none;
    transition: color var(--ws-transition-base);
}

.ws-header__menu a:hover,
.ws-header__menu a:focus-visible {
    color: var(--ws-color-primary);
    text-decoration: none;
}

.ws-header__menu .current-menu-item > a,
.ws-header__menu .current_page_item > a {
    color: var(--ws-color-primary);
}

.ws-header__menu-fallback {
    margin: 0;
    font-size: var(--ws-fs-caption);
    color: var(--ws-color-text-mute2);
}


/* ─────────────────────────────────────────────────────────────
 *  CTA buttons (공용 .ws-btn)
 * ───────────────────────────────────────────────────────────── */

.ws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ws-space-2);            /* 6px ≒ space-2(8)와 비슷, 시안은 6 */
    height: 48px;
    padding: 10px 21px;
    border-radius: var(--ws-radius-md);
    font-family: var(--ws-font-display);
    font-size: var(--ws-fs-link);      /* 16px */
    font-weight: var(--ws-fw-medium);
    line-height: var(--ws-lh-base);
    letter-spacing: var(--ws-ls-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ws-transition-base),
                color var(--ws-transition-base),
                border-color var(--ws-transition-base);
}

.ws-btn:hover,
.ws-btn:focus-visible {
    text-decoration: none;
}

.ws-btn__icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    display: block;
}

/* outline 변형 — 흰 배경 + primary 테두리 / hover 시 채움 */
.ws-btn--outline.ws-btn--primary {
    background: var(--ws-color-bg);
    color: var(--ws-color-primary);
    border: 2px solid var(--ws-color-primary);
}

.ws-btn--outline.ws-btn--primary:hover,
.ws-btn--outline.ws-btn--primary:focus-visible {
    background: var(--ws-color-primary);
    color: var(--ws-color-text-white);
}

/* filled 변형 — 시안 hover state, mobile drawer */
.ws-btn--filled.ws-btn--primary {
    background: var(--ws-color-primary);
    color: var(--ws-color-text-white);
    border: 2px solid var(--ws-color-primary);
}

.ws-btn--filled.ws-btn--primary:hover,
.ws-btn--filled.ws-btn--primary:focus-visible {
    /* 살짝 어둡게 — 토큰화 안 된 동적 색이므로 filter로 처리 */
    filter: brightness(0.95);
    color: var(--ws-color-text-white);
}


/* ─────────────────────────────────────────────────────────────
 *  Mobile hamburger toggle
 * ───────────────────────────────────────────────────────────── */

.ws-header__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ws-color-text-2);
    cursor: pointer;
}

/* desktop 에서는 햄버거 토글 숨김 — 위 .ws-header__nav 와 동일한 이유 (utility 룰
   덮어씀 방지). */
@media (min-width: 1024px) {
    .ws-header__toggle {
        display: none;
    }
}

.ws-header__toggle-icon { display: none; }

.ws-header[data-state="closed"] .ws-header__toggle-icon--open  { display: inline-flex; }
.ws-header[data-state="open"]   .ws-header__toggle-icon--close { display: inline-flex; }


/* ─────────────────────────────────────────────────────────────
 *  Mobile drawer (햄버거 펼친 상태)
 * ───────────────────────────────────────────────────────────── */

.ws-mobile-drawer {
    position: fixed;
    /* 풀 뷰포트 — header 와 그 빈 자리(WP admin bar 로 인한 어긋남) 까지 모두 덮음. */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ws-z-sticky);
    background: var(--ws-color-bg);
    /* backdrop-filter 제거 — 솔리드 흰색 배경 위에 blur 는 무의미 + stacking context 만 생김. */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: var(--ws-space-6) var(--ws-space-6) var(--ws-space-6);
}

/* WordPress 관리자바(admin bar) 가 노출되는 경우 그 높이만큼 드로어를 아래로 내림.
   admin bar 자체는 매우 높은 z-index 라 항상 위에 떠있음 — 이 자리에 드로어가 깔리면
   상단(로고/닫기 아이콘) 이 admin bar 에 가려 시각적으로 헤더가 위로 시프트된 것처럼 보이고
   클릭 영역도 줄어들므로 회피.
   ≤600 에서도 admin bar 가 절대위치라 스크롤 0 일 때 0~46 영역에 보임 → 드로어도 46 으로 내림
   (사용자 정정 — 햄버거 열림 시 닫힘 헤더와 동일 시각 위치 유지). */
.admin-bar .ws-mobile-drawer { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .ws-mobile-drawer { top: 46px; }
}

.ws-mobile-drawer[hidden] { display: none; }

/* 드로어 상단 — 시안 5:2471: 로고(좌) + 닫힘 아이콘(우) + 헤더 닫힘 상태와 동일한 회색 라인.
   drawer 의 좌우 padding(24)을 negative margin 으로 상쇄해서 라인을 viewport 폭 끝까지 그림.
   좌우 padding 은 .ws-container(mobile 20) 와 동일하게 — 닫힘 헤더의 로고와 시각 위치 정합. */
.ws-mobile-drawer__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--ws-header-h-mobile);                    /* 72 — 헤더 닫힘 상태와 동일 */
    margin: calc(-1 * var(--ws-space-6)) calc(-1 * var(--ws-space-6)) var(--ws-space-6);
    padding: 0 var(--ws-container-pad-mobile);            /* 20 — 닫힘 헤더(.ws-container) 와 동일 */
    border-bottom: 1px solid var(--ws-color-border-2);    /* 회색 라인 — 헤더 닫힘 상태와 동일 토큰 */
}

.ws-mobile-drawer__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ws-mobile-drawer__logo-img {
    max-height: 32px;
    width: auto;
    display: block;
}

.ws-mobile-drawer__logo-placeholder {
    display: inline-block;
    width: 120px;
    height: 32px;
    background: var(--ws-color-primary);
    border-radius: var(--ws-radius-md);
}

.ws-mobile-drawer__close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ws-color-text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ws-mobile-drawer__nav {
    flex: 1 1 auto;
    padding-top: var(--ws-space-6); /* head 와 첫 메뉴 사이 간격 */
}

.ws-mobile-drawer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ws-space-6); /* 24px (시안) */
}

/* 메뉴 항목(<li>)은 한 줄씩 세로로 — wp_nav_menu 가 부여하는 menu-item 등의 클래스가
   외부 스타일을 끌고 들어와도 가로 배치되지 않도록 명시. */
.ws-mobile-drawer__menu > li {
    display: block;
    width: 100%;
}

.ws-mobile-drawer__menu a {
    display: block;
    width: 100%;
    font-family: var(--ws-font-display);
    font-size: var(--ws-fs-menu-mobile);   /* 22px (시안) */
    font-weight: var(--ws-fw-medium);
    line-height: var(--ws-lh-tight);
    letter-spacing: var(--ws-ls-tight);
    color: var(--ws-color-text-2);
    text-decoration: none;
}

.ws-mobile-drawer__menu a:hover,
.ws-mobile-drawer__menu a:focus-visible {
    color: var(--ws-color-primary);
}

.ws-mobile-drawer__actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--ws-space-3); /* 12px */
    padding-top: var(--ws-space-6);
}

.ws-mobile-drawer__btn {
    flex: 1 1 0;
    min-width: 0;
}


/* ─────────────────────────────────────────────────────────────
 *  body 의 scroll lock 클래스 (header.js 가 토글)
 * ───────────────────────────────────────────────────────────── */

body.ws-drawer-open {
    overflow: hidden;
}