/*
  header.css
  ------------------------------------------------------------
  상단 고정 헤더: 로고, 가운데 내비게이션, Login/Book 버튼, 모바일 햄버거 메뉴.

  동작 메모 (js/header.js 와 짝):
   - 스크롤해서 히어로를 벗어나면 header에 .solid 클래스가 붙어 로고/글자색이
     밝은색 → 어두운색으로 바뀝니다. (배경 자체는 항상 투명 유지)
   - 스크롤 60px 이상부터는 가운데 nav가 위로 슬라이드 + 블러되며 사라집니다.
*/

header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:26px 48px;
  transition:background .5s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.solid{
  padding:16px 48px;
}
/* 히어로가 없는 페이지(experiences.html 등)는 헤더 배경을 처음부터
   항상 켜둡니다. 투명 헤더로 두면 스크롤 시 아래 제목 텍스트가
   헤더 글자와 겹쳐 보이는 문제가 있어서, 이 페이지들만 예외로 둡니다. */
body.no-hero header{
  background:rgba(255,250,240,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

/* 로고: 밝은/어두운 버전 두 장을 겹쳐두고 opacity로 크로스페이드 */
.logo{
  display:flex; align-items:center; justify-self:start; position:relative;
  height:24px;
}
.logo-img{
  height:24px; width:auto; display:block;
  transition:opacity .5s var(--ease);
}
.logo .logo-dark{ position:absolute; left:0; top:0; opacity:0; }
header.solid .logo .logo-light{ opacity:0; }
header.solid .logo .logo-dark{ opacity:1; }
.footer-logo{ height:22px; }
.footer-logo .logo-img{ height:22px; }

/* 가운데 내비게이션 */
nav.main-nav{
  display:flex; gap:44px; justify-self:center;
  transition:opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease);
}
@media (min-width:921px){
  nav.main-nav.hide{
    opacity:0; transform:translateY(-16px); filter:blur(2px); pointer-events:none;
  }
}
nav.main-nav a{
  font-family:var(--font-en-main);
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--foam); font-weight:700; position:relative;
  padding-bottom:4px; transition:color .5s var(--ease);
}
header.solid nav.main-nav a{color:var(--ink);}
nav.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--brass); transition:width .3s var(--ease);
}
nav.main-nav a:hover::after{width:100%;}

/* 우측 Login / Book / 햄버거 */
.head-actions{display:flex; align-items:center; gap:22px; justify-self:end;}
.head-actions a.login{
  font-family:var(--font-en-main);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--foam); transition:color .5s var(--ease);
}
header.solid .head-actions a.login{color:var(--ink);}

/* Book 버튼: 정확한 브랜드 민트 컬러(--accent-mint) 텍스트만, 박스 테두리 없음 */
.btn-book{
  font-family:var(--font-en-main);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:11px 24px; border:none; background:transparent; color:var(--accent-mint);
  border-radius:2px; transition:all .35s var(--ease);
}
header.solid .btn-book{color:var(--accent-mint);}
.btn-book:hover{color:var(--ink);}

.burger{display:none; width:26px; height:18px; position:relative;}
.burger span{position:absolute; left:0; width:100%; height:1.5px; background:var(--foam); transition:.3s;}
header.solid .burger span{background:var(--ink);}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:8px;}
.burger span:nth-child(3){top:16px;}

/* ===== 모바일 (920px 이하): 풀스크린 플라이아웃 내비게이션 ===== */
@media (max-width:920px){
  header{padding:20px 24px;}
  header.solid{padding:14px 24px;}
  nav.main-nav{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--foam); flex-direction:column; justify-content:center; align-items:flex-start;
    gap:30px; padding:0 40px; transform:translateX(100%); transition:transform .45s var(--ease);
    box-shadow:-20px 0 50px rgba(0,0,0,.15);
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{color:var(--ink) !important; font-size:16px;}
  .burger{display:block; z-index:120;}
  .head-actions .login{display:none;}
}