@charset "utf-8";

/* ==========================================================================
   레이아웃 (헤더 · GNB · 모바일메뉴 · 푸터)
   브레이크포인트 : 1440 → 1024(GNB→모바일메뉴 전환) → 768 → 480 → 375
   ========================================================================== */

/* main 콘텐츠 영역 - 헤더가 fixed이므로 헤더 높이만큼 상단 여백 확보 (CLS 방지) */
main.container {padding-top: var(--header-height);}

/* 헤더 */
.header {position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 100; background-color: var(--color-bg1); box-shadow: var(--box-shadow);}
.header .inner {display: flex; align-items: center; justify-content: space-between; height: 100%;}
.header .logo img {height: 32px;}

/* GNB - 데스크톱 기본 노출, 1024px 이하에서 숨김 */
.header .gnb {height: 100%;}
.header .gnb > ul {display: flex; gap: 40px; height: 100%;}
.header .gnb > ul > li {position: relative; display: flex; align-items: center; height: 100%;}
.header .gnb > ul > li > a {font-size: var(--fs-16); font-weight: 600;}
.header .gnb > ul > li > a[aria-current="page"] {color: var(--color-primary);}

/* GNB 서브메뉴 - hover/focus-within으로 노출 */
.gnb-submenu {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 200px; padding: 20px 0; background-color: var(--color-white); box-shadow: var(--box-shadow); opacity: 0; visibility: hidden; transition: opacity 0.2s;}
.header .gnb > ul > li:hover .gnb-submenu,
.header .gnb > ul > li:focus-within .gnb-submenu {opacity: 1; visibility: visible;}
.gnb-submenu a {display: block; padding: 10px 24px; font-size: var(--fs-14); color: var(--color-font3);}
.gnb-submenu a:hover {color: var(--color-primary);}

/* 모바일 메뉴 트리거 버튼 - 1024px 이하에서만 노출 (햄버거 아이콘은 프로젝트 시안에 맞게 교체) */
.mobile-menu-btn {position: relative; display: none; width: 44px; height: 44px;}
.mobile-menu-btn::before, .mobile-menu-btn::after {content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background-color: var(--color-font1);}
.mobile-menu-btn::before {top: 16px;}
.mobile-menu-btn::after {bottom: 16px;}

/* 모바일 메뉴 패널 */
.mobile-menu {position: fixed; top: 0; right: -100%; width: min(360px, 86vw); height: 100%; z-index: 200; background-color: var(--color-white); transition: right 0.3s; overflow-y: auto;}
.mobile-menu.active {right: 0;}
.mobile-menu-dim {position: fixed; inset: 0; z-index: 199; background-color: rgb(var(--rgb-black) / 0.5); opacity: 0; visibility: hidden; transition: opacity 0.2s;}
.mobile-menu-dim.active {opacity: 1; visibility: visible;}
.mobile-menu .close-btn {position: relative; width: 44px; height: 44px; margin: 8px 8px 0 auto; display: block;}
.mobile-menu > ul > li {position: relative;}
.mobile-menu > ul > li > a {display: block; padding: 16px 24px; font-size: var(--fs-16); font-weight: 600;}
.mobile-submenu-btn {position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;}
.mobile-submenu {display: none; padding-left: 12px;}
.mobile-submenu-btn[aria-expanded="true"] + .mobile-submenu {display: block;}
.mobile-submenu a {display: block; padding: 12px 24px; font-size: var(--fs-14); color: var(--color-font3);}

/* 푸터 */
.footer {padding: var(--space-60) 0; background-color: var(--color-bg2); color: var(--color-font6);}
.footer .foot-nav {display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap;}
.footer .foot-nav a {font-size: var(--fs-14);}
.footer address {margin-bottom: 16px; color: var(--color-font4);}
.footer .copyright {font-size: var(--fs-14); color: var(--color-font4);}

/* 브레이크포인트 : 1440 */
@media screen and (max-width: 1440px) {
    .inner {padding: 0 32px;}
}

/* 브레이크포인트 : 1024 - GNB → 모바일메뉴 전환 */
@media screen and (max-width: 1024px) {
    .header .gnb {display: none;}
    .mobile-menu-btn {display: block;}
}

/* 브레이크포인트 : 768 */
@media screen and (max-width: 768px) {
    .inner {padding: 0 20px;}
}

/* 브레이크포인트 : 480 */
@media screen and (max-width: 480px) {
    :root {--header-height: 56px;}
}