/* 스파 고요재 공용 GNB — 새 홈과 구 페이지(oopy 프리즈본)가 함께 쓴다.
   구 페이지에도 얹히므로 **전역 리셋을 넣지 않는다**(img/h1/li/a 등을 건드리면
   oopy 마크업이 깨진다). 홈 전용 스타일은 home.css 가 이어서 로드한다. */

:root {
  --brand: #40210F;
  --brand-deep: #2E170A;
  --night: #1F150F;
  --stone: #F1F1EF;
  --white: #FFFFFF;
  --cream: #F6F1EA;
  --sand: #E4D8CC;
  --mist: #CDBBAA;
  --gold: #C9A774;
  --bronze: #8A6A45;
  --bronze-light: #B08A5B;
  --ink: #3A2A22;
  --body: #4A3A31;
  --muted: #64473A;
  --subtle: #7A675B;
  --line-light: #E0D9D1;
  --line-light-2: #DDD5CC;
  --line-light-3: #D6CEC5;
  --line-dark: #6E5338;

  --serif: "Gowun Batang", serif;
  --sans: "Noto Sans KR", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;

  --shell: 1200px;
  --pad: 120px;
  --sec-y: 140px;
  --wave-h: 110px;
  --header-h: 88px;
}


.shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; }
@media (min-width: 1200px) { .shell { padding: 0; } }

.site-header *, .drawer * { box-sizing: border-box; }
.site-header :focus-visible, .drawer :focus-visible { outline: 2px solid #B08A5B; outline-offset: 3px; }

/* ── 버튼 ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 2px;
  font-family: var(--sans); font-size: 15px; font-weight: 400;
  text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.btn-cream { background: var(--cream); color: var(--brand-deep); }
.btn-cream:hover { background: #fff; }
.btn-outline-cream { border: 1px solid rgba(246,241,234,.5); color: var(--cream); }
.btn-outline-cream:hover { border-color: var(--cream); background: rgba(246,241,234,.08); }
.btn-outline-gold { min-height: 40px; padding: 0 18px; border: 1px solid var(--gold); color: var(--cream); font-size: 14px; }
.btn-outline-gold:hover { background: rgba(201,167,116,.14); }

/* ── 헤더 ───────────────────────────────────────────────────────────── */
.site-header {
  /* z-index 를 크게 잡는다 — 구 페이지(oopy 프리즈본) 위에도 얹히는데, 그쪽 마크업에
     헤더 영역을 덮는 요소가 있어 낮은 값이면 메뉴가 클릭되지 않는다. */
  position: sticky; top: 0; z-index: 9000;
  background: var(--brand-deep); border-bottom: 1px solid #4A3022;
}
.header-inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 34px; width: auto; }
.main-nav { display: flex; gap: 30px; margin: 0 auto; }
.main-nav a { color: var(--sand); font-size: 15px; text-decoration: none; }
.main-nav a:hover { color: var(--cream); }
/* 현재 페이지(SPEC 4-1): cream + gold 밑줄 offset 8px */
.main-nav a.is-current { color: var(--cream); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 8px; text-decoration-thickness: 1px; }
.header-right { display: flex; align-items: center; gap: 22px; flex: none; }
.lang-nav { display: flex; gap: 12px; font-size: 13px; }
.lang-nav .lang { color: var(--mist); text-decoration: none; }
.lang-nav .lang:hover { color: var(--cream); }
.lang-nav .is-current { color: var(--cream); }
.hamburger { display: none; }

/* 모바일 드로어 */
.drawer {
  position: fixed; inset: 0; z-index: 9001; background: var(--brand-deep);
  padding: 0 20px 40px; overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer-head { display: flex; justify-content: flex-end; align-items: center; height: 64px; }
.drawer-close { background: none; border: 0; color: var(--cream); font-size: 30px; line-height: 1; padding: 8px 10px; cursor: pointer; }
.drawer-nav { display: flex; flex-direction: column; border-top: 1px solid #4A3022; }
.drawer-nav a {
  padding: 18px 2px; color: var(--cream); font-size: 19px; text-decoration: none;
  border-bottom: 1px solid #4A3022; font-family: var(--serif);
}
.drawer-lang { display: flex; gap: 18px; padding: 24px 2px 28px; font-size: 14px; }
.drawer-lang .lang { color: var(--mist); text-decoration: none; }
.drawer-lang .is-current { color: var(--cream); }
.drawer-book { width: 100%; min-height: 54px; }


/* ── 모바일 헤더 (≤767) ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .main-nav, .header-right { display: none; }
  .logo img { height: 26px; }
  .header-inner { gap: 0; justify-content: space-between; }
  .hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer;
  }
  .hamburger span { display: block; height: 1px; background: var(--cream); }
}