@charset "utf-8";

/* 앵커 이동 여백 */
html {scroll-padding-top: var(--header-height);}

/* 헤더 - 로고 · GNB(가운데) · Donate */
.header {position: sticky; top: 0; left: 0; z-index: 100; width: 100%; background-color: var(--color-bg); transition: box-shadow 0.2s;}
.scroll .header {box-shadow: 0 1px 0 var(--color-border1);}
.header > .inner {display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--space-24); height: var(--header-height);}
.header .logo {justify-self: start; display: inline-flex; align-items: center; min-height: 44px;}
.header .logo img {width: 119px; height: auto;}
.header .header-btn-list {justify-self: end; flex-wrap: nowrap; column-gap: 8px;}
.header .header-btn-list .all-menu-btn {display: none; color: var(--color-font1);}

/* GNB */
.header .gnb .gnb-list {display: flex; align-items: center; column-gap: clamp(1.5rem, 0.2rem + 2.2vw, 2.625rem);}
.header .gnb .gnb-link {display: flex; align-items: center; min-height: 44px;}
.header .gnb .gnb-link span {position: relative; color: var(--color-font1); white-space: nowrap; transition: color 0.2s;}
.header .gnb .gnb-link span::after {content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background-color: currentColor; transform: scaleX(0); transition: transform 0.3s var(--ease-out);}
.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);}

/* 전체메뉴 버튼 아이콘 - span + ::before · ::after, 열리면 X */
.all-menu-ico {position: relative; display: block; width: 20px; height: 2px; border-radius: 2px; background-color: currentColor;}
.all-menu-ico::before, .all-menu-ico::after {content: ''; position: absolute; left: 0; width: 100%; height: 100%; border-radius: inherit; background-color: currentColor; transition: transform 0.3s;}
.all-menu-ico::before {transform: translateY(-7px);}
.all-menu-ico::after {transform: translateY(7px);}
.header.menu-open .all-menu-ico {background-color: transparent;}
.header.menu-open .all-menu-ico::before {transform: rotate(45deg);}
.header.menu-open .all-menu-ico::after {transform: rotate(-45deg);}

/* 전체메뉴 패널 (1024 이하) */
.header .gnb-panel {position: fixed; top: var(--header-height); right: 0; bottom: 0; left: 0; z-index: 99; display: none; padding-block: var(--space-20) var(--space-50); background-color: var(--color-bg); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;}
.header.menu-open .gnb-panel {opacity: 1; visibility: visible; transition: opacity 0.25s, visibility 0s;}
.header .gnb-panel .gnb-sub-list {display: flex; flex-direction: column;}
.header .gnb-panel .gnb-sub {border-bottom: 1px solid var(--color-border1);}
.header .gnb-panel .gnb-sub-tit {display: flex; align-items: center; min-height: 60px; color: var(--color-font1);}
.header .gnb-panel .gnb-sub-tit[aria-current="page"] {color: var(--color-static1);}
.header .gnb-panel .gnb-sub ul {display: flex; flex-wrap: wrap; column-gap: var(--space-16); padding-bottom: var(--space-16);}
.header .gnb-panel .gnb-sub-link {display: inline-block; padding-block: 5px; color: var(--color-font3);}
.header .gnb-panel .gnb-sub-link[aria-current="page"] {color: var(--color-static1);}

/* 푸터 */
.footer {padding-block: var(--space-64); background-color: var(--section-bg4); color: var(--color-font6);}
.footer .footer-top {display: flex; justify-content: space-between; column-gap: var(--space-40); padding-bottom: var(--space-64);}
.footer .footer-info .footer-logo img {width: 180px; height: auto;}
.footer .footer-info .footer-desc {max-width: 300px; margin-top: var(--space-20); color: rgb(var(--rgb-white) / 0.85);}
.footer .footer-menu {display: flex; column-gap: var(--space-80);}
.footer .footer-menu .footer-col {min-width: 140px;}
.footer .footer-menu .footer-col-tit {font-weight: 700; color: var(--color-font6);}
.footer .footer-menu .footer-col ul {display: flex; flex-direction: column; margin-top: var(--space-12);}
.footer .footer-menu .footer-col a {min-height: 35px; color: rgb(var(--rgb-white) / 0.85);}
.footer .footer-link {text-decoration: underline; text-underline-offset: 3px;}
.footer .footer-bot {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-24); padding-top: var(--space-24); border-top: 1px solid rgb(var(--rgb-white) / 0.2);}
.footer .footer-bot .copyright {color: rgb(var(--rgb-white) / 0.85);}
.footer .footer-bot .foot-nav ul {display: flex; align-items: center; column-gap: var(--space-24);}
.footer .footer-bot .foot-nav a {min-height: 24px; color: rgb(var(--rgb-white) / 0.85);}
.footer a:focus-visible {outline-color: var(--color-white);}

/* 섹션 */
.container {max-width: 1920px; margin: 0 auto;}
.inner {width: calc(100% - 80px); max-width: 1320px; margin: 0 auto;}
.section-bg1 {background-color: var(--section-bg1);}
.section-bg2 {background-color: var(--section-bg2);}
.section-bg3 {background-color: var(--section-bg3);}
.section-bg4 {background-color: var(--section-bg4);}

/* 섹션 타이틀 - .txt-wrap(.eyebrow? + .h2 + .body-l) + .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 .h2 {color: var(--color-font1);}
.section-tit-wrap .txt-wrap .body-l, .section-tit-wrap .txt-wrap .body-m {margin-top: var(--space-16); color: var(--color-font2);}
.section-tit-wrap .btn-list {flex: none;}
.section-tit-wrap.center {flex-direction: column; align-items: center; row-gap: var(--space-30); text-align: center;}
.section-tit-wrap.white .txt-wrap .h2,
.section-tit-wrap.white .txt-wrap .body-l,
.section-tit-wrap.white .txt-wrap .body-m {color: var(--color-font6);}

/* 히어로 타이틀 */
.hero-tit-wrap {max-width: 1000px;}
.hero-tit-wrap .display {color: var(--color-font1);}
.hero-tit-wrap .h4 {margin-top: var(--space-24); color: var(--color-font2);}
.hero-tit-wrap .btn-list {margin-top: var(--space-30);}
.hero-tit-wrap.white .display, .hero-tit-wrap.white .h4 {color: var(--color-font6);}

/* 호버 */
@media (hover: hover) {
    .header .gnb .gnb-link:hover span {color: var(--color-static1);}
    .header .gnb .gnb-link:hover span::after {transform: scaleX(1);}
    .header .gnb-panel .gnb-sub-link:hover {color: var(--color-static1);}
    .footer .footer-menu .footer-col a:hover, .footer .footer-bot .foot-nav a:hover {color: var(--color-font6); text-decoration: underline;}
}

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

    /* 전체메뉴 - GNB 숨김 · 패널을 버튼으로 연다 */
    .header .logo img {width: 100px;}
    .header .gnb .gnb-list {display: none;}
    .header .gnb-panel {display: block;}
    .header .header-btn-list .all-menu-btn {display: flex;}

    .footer .footer-top {flex-direction: column; row-gap: var(--space-48);}
}
@media screen and (max-width: 768px) {
    .inner {width: calc(100% - 48px);}

    .header .header-btn-list .donate-btn {min-height: 36px; padding-inline: 14px; font-size: var(--fs-14);}

    .footer .footer-menu {column-gap: var(--space-40);}
    .footer .footer-bot {flex-direction: column-reverse; align-items: flex-start; row-gap: var(--space-16);}

    .section-tit-wrap {flex-direction: column; align-items: flex-start; row-gap: var(--space-20);}
    .section-tit-wrap.center {align-items: center;}
}
@media screen and (max-width: 480px) {
    .inner {width: calc(100% - 40px);}

    .footer .footer-menu {flex-direction: column; row-gap: var(--space-40);}
}
@media screen and (max-width: 375px) {
    .inner {width: calc(100% - 32px);}
}