/* 상단 메뉴 · 드롭다운 · 모바일 메뉴
   각 항목은 실제 섹션이나 준비 상태 안내로 연결합니다.
   헤더는 불투명한 흰 막대이고, 스크롤하면 아래로 옅은 그림자가 생겨요. */

.site-header{position:sticky;top:0;z-index:30;background:#fff;transition:box-shadow var(--t-hover) ease}
.site-header.is-scrolled{box-shadow:0 8px 24px -16px rgba(17,17,19,.3)}
.header{display:flex;align-items:center;gap:32px;height:68px}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.logo{display:block;height:26px;aspect-ratio:6648/1514;color:var(--ink)}

.nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav-direct,.nav-dropdown>summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;font-size:var(--fs-small);font-weight:500;color:var(--text);white-space:nowrap;cursor:pointer;transition:background-color var(--t-hover) ease}
.nav-direct:hover,.nav-dropdown>summary:hover,.nav-dropdown[open]>summary,.nav-direct[aria-current="page"]{background:var(--surface);color:var(--ink)}
.nav-dropdown{position:relative}
.nav-dropdown>summary{list-style:none}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary::after{content:'';width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--t-hover) ease}
.nav-dropdown[open]>summary::after{margin-top:3px;transform:rotate(225deg)}
.nav-panel{position:absolute;left:0;top:calc(100% + 8px);width:300px;padding:8px;border-radius:var(--radius-md);background:#fff}
.nav-dropdown[open] .nav-panel{box-shadow:0 0 0 1px rgba(17,17,19,.06),0 18px 44px -12px rgba(17,17,19,.22)}
.nav-panel-end{left:auto;right:0}
.nav-panel a,.nav-panel button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px;border:0;border-radius:var(--radius-sm);background:transparent;text-align:left;transition:background-color var(--t-hover) ease}
.nav-panel a:hover,.nav-panel button:hover{background:var(--surface)}
.nav-panel strong{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.nav-panel span{font-size:var(--fs-small);line-height:1.5;color:var(--muted)}

.header-actions{display:flex;align-items:center;gap:8px}
.text-button{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;font-size:var(--fs-small);font-weight:500;color:var(--text);transition:background-color var(--t-hover) ease}
.text-button:hover{background:var(--surface);color:var(--ink)}
.menu-toggle{display:none;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:none}
.menu-toggle:hover{background:var(--surface)}
.menu-toggle .icon{width:22px;height:22px}

.mobile-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-height:calc(100svh - 68px);overflow-y:auto;padding:20px var(--gutter) 28px;background:var(--surface)}
.mobile-nav-group h2{margin-bottom:4px;font-size:var(--fs-small);font-weight:600;letter-spacing:0;color:var(--muted)}
.mobile-nav-group a,.mobile-nav-group button{display:flex;align-items:center;width:100%;min-height:44px;padding:0;border:0;background:none;font-size:var(--fs-small);color:var(--ink);text-align:left}

@media (max-width:960px){
  .nav,.header-login{display:none}
  .header-actions{margin-left:auto}
  .menu-toggle{display:grid}
}
@media (min-width:961px){.mobile-nav{display:none!important}}
@media (max-width:420px){.mobile-nav{grid-template-columns:1fr}}