/* 닷컴 고정 헤더·푸터. 메인·상세 공통 3열(좌/중/우) 1단 레이아웃.
   헤더 마크업은 web/modules/site-shell/site-shell.js 가 만든다 — 조립 지점은
   scripts/build-pages.js:renderPage (값 전달만, HTML 로직은 없음).
   스크롤에 따른 헤더 내용 변화나 IntersectionObserver는 넣지 않는다. */

:root {
  --site-header-h: 84px;
}
@media (max-width:700px) {
  :root { --site-header-h: 64px; }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  height: var(--site-header-h);
  background: rgba(23, 42, 70, 0.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
}

/* 본문 컨테이너(.landing-width, web/css/spa-landing.css:7)와 같은 최대폭 계약. */
.site-header-in {
  width: min(1180px, calc(100% - 80px));
  margin-inline: auto;
  display: grid;
  /* minmax(0,...) — auto 트랙 기본 최소 폭은 min-content라 업체명 길이만큼 안 줄어든다.
     세 트랙 모두 0까지 줄어들 수 있어야 .site-header-vendor의 ellipsis가 실제로 발동한다. */
  grid-template-columns: minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
  align-items: center;
  gap: 12px;
}
@media (max-width:700px) {
  .site-header-in { width: calc(100% - 32px); }
  /* 모바일 상세만 3열 계약을 바꾼다 — 데스크톱과 메인 헤더는 위 minmax(0,1fr) minmax(0,auto) minmax(0,1fr) 그대로.
     좌우를 1fr로 똑같이 나누면 내용이 큰 우측(언어 버튼+상담 아이콘)이 실제 필요폭을 못 받아
     업체명 위로 넘쳤고(390px Chrome 실측: .lang-toggle x=254..322 가 x=87.8..302.2 의 업체명과 48px 겹침),
     가운데가 auto라 max-content로 커지는 탓에 .site-header-vendor 의 ellipsis 도 발동하지 않았다.
     좌 44px(뒤로가기 터치 타깃) / 가운데 minmax(0,1fr)(줄어들어 ellipsis 발동) / 우 auto(실너비 확보). */
  .site-header--detail .site-header-in { grid-template-columns: 44px minmax(0,1fr) auto; }
}

.site-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.site-header-center { display: flex; justify-content: center; min-width: 0; }
.site-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }

.site-header .pill-btn { min-height: 44px; }

.brand-wordmark { color:#fff; font-family:Georgia,"Times New Roman",serif; font-size:24px; line-height:1.1; text-decoration:none; }
.brand-wordmark small { display:block; margin-top:4px; font:600 11px/1 system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; opacity:.8; }

/* 상세 헤더 — 업체명이 중앙에 오는 만큼 부제는 늘 숨긴다. */
.site-header--detail .brand-wordmark small { display:none; }

.site-header-vendor {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 목록으로 돌아가기 — 데스크톱에는 없고(스파 목록 링크가 대신한다), 상세 모바일에서만 아이콘으로 보인다. */
.site-header-back { display: none; }
@media (max-width:700px) {
  .site-header--detail .brand-wordmark { display:none; }
  .site-header--detail .site-header-vendor { font-size: 20px; }
  .site-header--detail .site-header-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
  }
}

.site-nav a[aria-current="page"] { color:#fff; border-bottom:2px solid var(--accent-orange); }
.site-nav { display: flex; gap: 28px; }
.site-nav a { color: rgba(255,255,255,.78); display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: .88rem; font-weight: 700; }
@media (max-width:700px) {
  .site-nav { display: none; }
}

.site-header-actions { display:flex; align-items:center; gap:10px; }
.lang-toggle { min-height:44px; min-width:44px; padding:0 12px; border:1px solid rgba(255,255,255,.6); border-radius:999px; background:transparent; color:#fff; font:600 14px system-ui,sans-serif; cursor:pointer; }
.lang-toggle { white-space:nowrap; }
a.lang-toggle { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

.pill-btn-whatsapp { background:#25D366; color:#06301a; border-color:#25D366; }
.pill-btn-whatsapp:hover { background:#1fb857; color:#06301a; }
.site-header .pill-btn-consult { background:var(--accent-orange,#E8622C); color:var(--primary-navy,#172A46); border-color:var(--accent-orange,#E8622C); white-space:nowrap; }
.site-header .pill-btn-consult:hover { filter:brightness(0.92); }

/* 상세 헤더 예약 버튼 — 데스크톱에서만 보인다. 모바일은 book-bar 모듈의 하단 바가 대신한다.
   예약이 주 행동이므로 채움(주황), 상담은 같은 자리에서 외곽선으로 한 단계 낮춘다. */
.site-header .pill-btn-book { background:var(--accent-orange,#E8622C); color:var(--primary-navy,#172A46); border-color:var(--accent-orange,#E8622C); white-space:nowrap; }
.site-header .pill-btn-book:hover { filter:brightness(0.92); }
@media (min-width:701px) {
  .site-header--detail .pill-btn-consult { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
  .site-header--detail .pill-btn-consult:hover { filter:none; background:rgba(255,255,255,.1); }
}
@media (max-width:700px) {
  .site-header-book { display:none; }
}

/* 상담 버튼은 기본은 문구, 아이콘은 숨긴다 — 상세 모바일에서만 뒤바뀐다(아이콘 전용, aria-label로 이름 유지). */
.site-header-consult-icon { display: none; }
@media (max-width:700px) {
  .site-header--detail .site-header-consult-label { display: none; }
  .site-header--detail .site-header-consult-icon { display: block; }
  .site-header--detail .pill-btn-consult {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }
}

.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.site-footer { background: var(--primary-navy); color: rgba(255, 255, 255, 0.6); padding: 16px 24px; font-size: 0.88rem; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }
/* 푸터의 다낭픽 소개 링크(모든 페이지). */
.site-footer-link { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; }
.site-footer-link:hover { color: #fff; }

@media (max-width:420px) {
  .brand-wordmark { font-size:20px; }
  .brand-wordmark small { letter-spacing:.08em; }
}
/* 이 블록은 메인(홈) 헤더용 420px 축소 규칙이다. 상세 헤더는 700px에서 이미 아이콘 전용으로
   바뀌어 있으므로(위 .site-header--detail .pill-btn-consult, 101-110행) 여기서 다시 손대면
   안 된다 — .site-header .pill-btn-consult 와 .site-header--detail .pill-btn-consult 는
   특성(0,2,0)이 같아 나중에 오는 규칙이 이기므로, 선택자 자체에서 상세 헤더를 제외한다. */
@media (max-width:420px) {
  .site-header:not(.site-header--detail) .brand-wordmark small { display:none; }
  .site-header-actions { gap:8px; }
  .site-header .pill-btn-whatsapp { padding-left:14px; padding-right:14px; }
  .site-header:not(.site-header--detail) .pill-btn-consult { padding-left:12px; padding-right:12px; font-size:13px; white-space:normal; line-height:1.15; text-align:center; }
}