/* ============================================================
   모빌리아 공용 내비게이션 (햄버거 + 전체화면 메뉴)
   스페이스바이버 스타일 참고: 로고 + 햄버거만 노출, 메뉴는 오버레이로 펼침
   모든 페이지에서 공통으로 불러와 사용합니다.
============================================================ */

.site-header{
  position:sticky; top:0; z-index:90;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.site-header.header--transparent{
  position:absolute; top:0; left:0; right:0;
  background:none; border-bottom:none; z-index:40;
}
.site-header-inner{
  max-width:1240px; margin:0 auto; padding:0 32px;
  height:84px; display:flex; align-items:center; justify-content:space-between;
}
@media (max-width:720px){ .site-header-inner{ padding:0 20px; height:72px; } }

.site-header .logo{ font-weight:600; font-size:19px; letter-spacing:1.5px; color:var(--ink); }
.site-header.header--transparent .logo{ color:var(--ivory); }

.site-header-right{ display:flex; align-items:center; gap:24px; }

.header-cta{ font-size:13px; letter-spacing:.5px; color:var(--ink-soft); transition:color .2s; }
.header-cta:hover{ color:var(--ink); }
.site-header.header--transparent .header-cta{ color:var(--ivory); opacity:.9; }
.site-header.header--transparent .header-cta:hover{ opacity:1; }

.hamburger{
  width:28px; height:18px; position:relative; background:none; border:none; cursor:pointer; padding:0;
}
.hamburger span{
  position:absolute; left:0; right:0; height:1px; background:var(--ink); transition:background .2s;
}
.site-header.header--transparent .hamburger span{ background:var(--ivory); }
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:8px; }
.hamburger span:nth-child(3){ top:16px; }

/* 전체화면 오버레이 메뉴 */
.site-menu{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  display:flex; flex-direction:column;
}
.site-menu.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease;
}
.site-menu-top{
  max-width:1240px; margin:0 auto; width:100%; padding:0 32px;
  height:84px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
@media (max-width:720px){ .site-menu-top{ padding:0 20px; height:72px; } }
.site-menu-top .logo{ font-weight:600; font-size:19px; letter-spacing:1.5px; }

.menu-close{
  background:none; border:none; font-size:30px; line-height:1; color:var(--ink); cursor:pointer; font-weight:300;
}

.site-menu-links{
  max-width:1240px; margin:0 auto; width:100%; padding:20px 32px; flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center; overflow-y:auto;
}
@media (max-width:720px){ .site-menu-links{ padding:10px 20px; } }
.site-menu-links a{
  display:block; padding:16px 0; border-bottom:1px solid var(--line);
  font-size:clamp(24px,4.8vw,40px); font-weight:300; letter-spacing:1px; color:var(--ink);
  transition:opacity .2s, padding-left .2s;
}
.site-menu-links a:hover{ opacity:.5; padding-left:10px; }
.site-menu-links a.active{ color:var(--sage-dark); }

.site-menu-bottom{
  max-width:1240px; margin:0 auto; width:100%; padding:0 32px 36px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:var(--ink-soft); flex-shrink:0;
}
@media (max-width:720px){ .site-menu-bottom{ padding:0 20px 28px; } }