@charset "utf-8";

:root {
    --all-menu-col: 4;
}
/* 헤더 - 서브는 sticky, 메인은 비주얼 위에 fixed (body.main-page) */
.header {position: sticky; top: 0; left: 0; width: 100%; z-index: 100; background-color: var(--color-bg); border-bottom: 1px solid var(--color-gray3); transition: background-color 0.2s, border-color 0.2s;}
.header > .inner {display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; grid-template-areas: "logo gnb util"; align-items: center; height: var(--header-height);}
.header > .inner > .logo {grid-area: logo; justify-self: start;}
.header > .inner > .gnb {grid-area: gnb; justify-self: center; max-width: 100%; height: 100%;}
.header > .inner > .header-btn-list {grid-area: util; justify-self: end;}
/* TODO: 로고 SVG 전달 시 img 로 교체 */
.header .logo {display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-20); font-weight: 700; letter-spacing: 0.02em; line-height: 1; color: var(--color-gray11); transition: color 0.2s;}
.header .header-btn-list {gap: 0;}
.header .header-btn-list .ico-btn {color: var(--color-gray11);}

/* 메인 - 최상단에서는 투명. 스크롤(body.scroll)·hover·포커스 시 흰 배경 */
.main-page .header {position: fixed;}
.main-page:not(.scroll) .header:not(:hover):not(:focus-within) {background-color: transparent; border-bottom-color: transparent;}
.main-page:not(.scroll) .header:not(:hover):not(:focus-within) .logo,
.main-page:not(.scroll) .header:not(:hover):not(:focus-within) .header-btn-list .ico-btn,
.main-page:not(.scroll) .header:not(:hover):not(:focus-within) .gnb .gnb-link span {color: var(--color-white);}

/* GNB */
.header .gnb .gnb-list {display: flex; height: 100%;}
.header .gnb .gnb-item {position: relative; display: flex;}
.header .gnb .gnb-link {position: relative; display: flex; align-items: center; padding: 10px clamp(0.875rem, 0.2rem + 1vw, 1.75rem);}
.header .gnb .gnb-link span {position: relative; font-size: var(--fs-15); font-weight: 500; color: var(--color-gray9); white-space: nowrap; transition: color 0.2s;}
.header .gnb .gnb-link span::after {content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background-color: currentColor; transform: scaleX(0); transition: transform 0.3s;}
.header .gnb .gnb-link:hover span::after,
.header .gnb .gnb-link:focus-visible span::after,
.header .gnb .gnb-link[aria-current="page"] span::after {transform: scaleX(1);}
.header .gnb .gnb-link[aria-current="page"] span {color: var(--color-static1);}
.header .gnb .gnb-item.dev .gnb-link span {color: var(--color-static1);} /* 개발용 메뉴 - 납품 전 제거 */

/* GNB 2depth */
.header .gnb .gnb-sub {position: absolute; top: 100%; left: 50%; min-width: 180px; padding-block: var(--fs-12); background-color: var(--color-white); border: 1px solid var(--color-gray3); box-shadow: var(--box-shadow); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s;}
.header .gnb .gnb-item:hover .gnb-sub,
.header .gnb .gnb-item:focus-within .gnb-sub {opacity: 1; visibility: visible; transform: translate(-50%, 0);}
.header .gnb .gnb-sub-link {display: block; padding: 8px var(--fs-20); font-size: var(--fs-14); color: var(--color-gray8); white-space: nowrap; transition: color 0.2s;}
.header .gnb .gnb-sub-link:hover,
.header .gnb .gnb-sub-link[aria-current="page"] {color: var(--color-static1);}

/* 전체메뉴 - 트리거 [data-all-menu-open], 열림 상태 .all-menu.active (js/layout.js) */
.all-menu {position: fixed; inset: 0; z-index: 200; display: none; overflow-y: auto; overscroll-behavior: contain; background-color: var(--color-white);}
.all-menu.active {display: block;}
.all-menu .all-menu-head {display: flex; align-items: center; justify-content: space-between; height: var(--header-height);}
.all-menu .all-menu-head .logo {display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-20); font-weight: 700; letter-spacing: 0.02em; color: var(--color-gray11);}
.all-menu .all-menu-list {display: grid; grid-template-columns: repeat(var(--all-menu-col), 1fr); gap: var(--space-48) var(--space-30); padding-block: var(--space-60) var(--space-80);}
.all-menu .all-menu-link {display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-24); font-weight: 600; color: var(--color-gray9); transition: color 0.2s;}
.all-menu .all-menu-link:hover,
.all-menu .all-menu-item.active .all-menu-link,
.all-menu .all-menu-item.dev .all-menu-link {color: var(--color-static1);}
.all-menu .all-menu-sub {margin-top: var(--fs-12);}
.all-menu .all-menu-sub a {display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-15); color: var(--color-gray7); transition: color 0.2s;}
.all-menu .all-menu-sub a:hover {color: var(--color-static1);}

/* 푸터 */
.footer {padding-block: var(--space-80) var(--space-48); background-color: var(--color-gray9); color: rgb(var(--rgb-white) / 0.7);}
.footer .inner {display: flex; flex-direction: column; row-gap: var(--space-40);}
.footer .footer-top .footer-logo {font-size: var(--fs-18); font-weight: 700; letter-spacing: 0.02em; color: var(--color-white);}
.footer .footer-top .body-small {margin-top: 8px;}
.footer .footer-mid {font-size: var(--fs-13);}
.footer .footer-mid p + p {margin-top: 6px;}
.footer .footer-mid p {display: flex; align-items: center; column-gap: var(--fs-12); row-gap: 6px; flex-wrap: wrap;}
.footer .footer-mid p span.line {width: 1px; height: 12px; background-color: rgb(var(--rgb-white) / 0.3);}
.footer .footer-bot {display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-24); border-top: 1px solid rgb(var(--rgb-white) / 0.15);}
.footer .footer-bot .copyright {font-size: var(--fs-13);}
.footer .footer-bot .foot-nav ul {display: flex; align-items: center; column-gap: var(--fs-20);}
.footer .footer-bot .foot-nav a {display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-13); transition: color 0.2s;}
.footer .footer-bot .foot-nav a:hover {color: var(--color-white);}
.footer .footer-bot .foot-nav a.strong {font-weight: 600; color: var(--color-white);}

/* 섹션 */
.container {max-width: 1920px; margin: 0 auto;}
.inner {max-width: 1520px; margin: 0 auto; width: calc(100% - 200px);}

/* 섹션 타이틀 - 우측에 버튼·슬라이드 화살표(.btn-list) */
.section-tit-wrap {display: flex; align-items: flex-end; justify-content: space-between; column-gap: var(--space-24); margin-bottom: var(--space-40);}
.section-tit-wrap .txt-wrap .eng-tit {margin-bottom: var(--fs-12); color: var(--color-gray7);}
.section-tit-wrap .txt-wrap .section-tit {color: var(--color-gray11);}
.section-tit-wrap .txt-wrap .body-medium {margin-top: var(--fs-16); color: var(--color-gray8);}
.section-tit-wrap .btn-list {flex: none;}
.section-tit-wrap.center {flex-direction: column; align-items: center; row-gap: var(--space-24); text-align: center;}
.section-tit-wrap.white .txt-wrap .eng-tit,
.section-tit-wrap.white .txt-wrap .section-tit,
.section-tit-wrap.white .txt-wrap .body-medium {color: var(--color-white);}

/* 히어로 타이틀 - 메인 비주얼·서브 비주얼 공통 */
.hero-tit-wrap {max-width: 720px;}
.hero-tit-wrap .eng-tit {margin-bottom: var(--fs-16);}
.hero-tit-wrap .hero-tit {color: var(--color-gray11);}
.hero-tit-wrap .body-large {margin-top: var(--space-24); color: var(--color-gray8);}
.hero-tit-wrap .btn-list {margin-top: var(--space-40);}
.hero-tit-wrap.white .eng-tit,
.hero-tit-wrap.white .hero-tit {color: var(--color-white);}
.hero-tit-wrap.white .body-large {color: rgb(var(--rgb-white) / 0.85);}
.hero-tit-wrap.center {margin-inline: auto; text-align: center;}
.hero-tit-wrap.center .btn-list {justify-content: center;}

@media screen and (max-width: 1440px) {
    .inner {width: calc(100% - 120px);}
}
@media screen and (max-width: 1280px) {
    .inner {width: calc(100% - 96px);}
}
@media screen and (max-width: 1024px) {
    :root {--all-menu-col: 2;}
    .inner {width: calc(100% - 64px);}

    .header > .inner {grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo util";}
    .header > .inner > .gnb {display: none;}
    .header .logo {font-size: var(--fs-18);}
}

@media screen and (max-width: 768px) {
    :root {--all-menu-col: 1;}
    .inner {width: calc(100% - 48px);}

    .all-menu .all-menu-list {row-gap: 0; padding-block: var(--fs-16) var(--space-48);}
    .all-menu .all-menu-item {padding-block: var(--fs-12); border-bottom: 1px solid var(--color-gray3);}
    .all-menu .all-menu-link {font-size: var(--fs-20);}
    .all-menu .all-menu-sub {display: flex; flex-wrap: wrap; column-gap: var(--fs-16); margin-top: 0;}

    .footer .footer-bot {flex-direction: column; align-items: flex-start; row-gap: 8px;}

    .section-tit-wrap {flex-direction: column; align-items: flex-start; row-gap: var(--fs-20);}
    .section-tit-wrap.center {align-items: center;}
}

@media screen and (max-width: 480px) {
    .inner {width: calc(100% - 40px);}

    .footer .footer-mid p {flex-direction: column; align-items: flex-start; row-gap: 6px;}
    .footer .footer-mid p span.line {display: none;}
}

@media screen and (max-width: 375px) {
    .inner {width: calc(100% - 32px);}
}