@charset "utf-8";

:root {
    /* 헤더 - GNB 열 간격 (Shop · Lookbook · About · Customer Care) · 1280 이하 메뉴 버튼 */
    --gnb-item-w: 110px;
    --header-logo-w: 202px;
}
html {scroll-padding-top: var(--header-height);}

/* 헤더 - .inner(gnb | logo | util) · 서브 sticky · 메인(body.main-page) fixed 반투명 */
.header {position: sticky; top: 0; left: 0; z-index: 100; width: 100%; border-bottom: 1px solid var(--color-border); background-color: var(--color-white); transition: background-color 0.3s, border-color 0.3s;}
.header > .inner {display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "gnb logo util"; align-items: center; column-gap: var(--space-24); height: var(--header-height);}
.header > .inner > .gnb {grid-area: gnb; height: 100%;}
.header > .inner > .all-menu-btn {position: relative; z-index: 1; grid-area: gnb; justify-self: start; display: none;}
.header > .inner > .logo {grid-area: logo;}
.header > .inner > .header-util {grid-area: util; justify-self: end;}
.header .logo {display: inline-flex; align-items: center; min-height: 44px;}
.header .logo img {width: var(--header-logo-w); height: auto;}

/* 메인 - 스크롤 전 반투명 헤더 */
.main-page .header {position: fixed;}
.main-page:not(.scroll) .header:not(:focus-within):not(.menu-open) {/*border-bottom-color: rgb(var(--rgb-white) / 0.5);*/ background-color: rgb(var(--rgb-white) / 0.2);}

/* GNB 1depth */
.header .gnb .gnb-list {display: grid; grid-auto-flow: column; grid-auto-columns: var(--gnb-item-w); height: 100%;}
.header .gnb .gnb-item {display: flex;}
.header .gnb .gnb-link {display: flex; align-items: center; padding-block: 10px;}
.header .gnb .gnb-link span {position: relative; color: var(--color-font1); white-space: nowrap;}
.header .gnb .gnb-link span::after {content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out);}
.header .gnb .gnb-link:focus-visible span::after,
.header .gnb .gnb-link[aria-current="page"] span::after,
.header .gnb .gnb-item.hover .gnb-link span::after {transform: scaleX(1);}

/* 서브메뉴 패널 - 헤더 아래 전체 폭 · PC: 2depth 열 = 1depth 열 · 1280 이하: .gnb-m-wrap(1depth + 1024 이하 언어·통화) + 펼친 2depth */
.header::after {content: ''; position: absolute; top: calc(100% + 1px); left: 0; z-index: -1; width: 100%; height: 100vh; background-color: rgb(var(--rgb-black) / 0.2); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s, visibility 0.25s;}
.header.menu-open::after {opacity: 1; visibility: visible;}
.header .gnb-panel {position: absolute; top: 100%; left: 0; width: 100%; border-bottom: 1px solid var(--color-border); background-color: var(--color-white); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s;}
.header.menu-open .gnb-panel {opacity: 1; visibility: visible; transform: translateY(0);}
.header .gnb-panel > .inner {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-40); padding-block: var(--space-24) var(--space-40);}
.header .gnb-sub-list {display: grid; grid-auto-flow: column; grid-auto-columns: var(--gnb-item-w); justify-content: start;}
.header .gnb-sub ul {display: flex; flex-direction: column; row-gap: 4px;}
.header .gnb-sub-link {display: inline-block; padding-block: 4px; color: var(--color-font3); white-space: nowrap; transition: color 0.2s;}
.header .gnb-sub-link[aria-current="page"] {color: var(--color-font1);}
.header .gnb-sub-tit {display: none; color: var(--color-font1);}

/* 1280 이하 1depth 줄 - .gnb-m-list + .gnb-panel-util(1024 이하) space-between */
.header .gnb-m-wrap {display: none; border-bottom: 1px solid var(--color-border);}
.header .gnb-m-wrap > .inner {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-24);}
.header .gnb-m-wrap .gnb-m-list {display: flex; flex-wrap: wrap; column-gap: var(--space-24);}
.header .gnb-m-wrap .gnb-m-btn {display: flex; align-items: center; min-height: 52px; color: var(--color-font2); white-space: nowrap; transition: color 0.2s;}
.header .gnb-m-wrap .gnb-m-btn[aria-expanded="true"], .header .gnb-m-wrap .gnb-m-btn[aria-current="page"] {color: var(--color-font1);}

/* 1024 이하 언어 · 통화 */
.header .gnb-panel-util {display: none; flex: none; align-items: center; column-gap: var(--space-30);}

/* 패널 이미지 - .gnb-panel-img > .img-wrap.portrait + .img-wrap.landscape */
.header .gnb-panel-img {flex: none; display: flex; column-gap: 20px;}
.header .gnb-panel-img .img-wrap {height: 174px; overflow: hidden; background-color: var(--color-border);}
.header .gnb-panel-img .img-wrap.portrait {width: 107px;}
.header .gnb-panel-img .img-wrap.landscape {width: 296px;}
.header .gnb-panel-img img {width: 100%; height: 100%; object-fit: cover;}

/* 유틸 - 언어 · 통화 · 아이콘 */
.header .header-util {display: flex; align-items: center; column-gap: var(--space-50);}
.header .lang-list {display: flex; align-items: center;}
.header .lang-list li + li::before {content: '|'; margin-inline: 8px; color: var(--color-font3);}
.header .lang-list a {color: var(--color-font3); transition: color 0.2s;}
.header .lang-list a[aria-current="true"] {color: var(--color-font1);}
.header .currency-dropdown .custom-dropdown-btn {column-gap: var(--space-12);}
.header .header-ico-list {column-gap: 12px; flex-wrap: nowrap; margin-right: -8px;}
.header .header-ico-list .cart-count {position: absolute; right: 6px; bottom: 6px; min-width: 14px; height: 14px; padding-inline: 3px; border-radius: 99px; background-color: var(--color-static1); font-size: var(--fs-10); line-height: 14px; color: var(--color-font4); text-align: center;}

/* 메뉴 버튼 - 텍스트 (769~1280 HAEUM · 768 이하 MENU / CLOSE) */
.header .all-menu-btn {align-items: center; min-height: 44px; letter-spacing: 0.08em; color: var(--color-font1);}
.header .all-menu-btn .all-menu-txt-m {display: none;}

/* 푸터 - .footer-top(로고 + 링크 3열) + .footer-bot(사업자 정보 + 카피라이트) */
.footer {padding-block: var(--space-60); border-top: 1px solid var(--color-border); background-color: var(--color-white);}
.footer .inner {display: flex; flex-direction: column; row-gap: var(--space-120);}
.footer .footer-top {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-40);}
.footer .footer-top .footer-logo img {width: 200px; height: auto;}
.footer .footer-top .footer-nav {display: grid; grid-template-columns: 174px 208px auto;}
.footer .footer-top .footer-nav ul {display: flex; flex-direction: column; row-gap: 20px;}
.footer .footer-top .footer-nav a {color: var(--color-font1); transition: color 0.2s;}
.footer .footer-bot {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-40);}
.footer .footer-bot .footer-address {line-height: 1.7; color: var(--color-font2);}
.footer .footer-bot .footer-address span + span::before {content: '·'; margin-inline: 4px;}
.footer .footer-bot .copyright {flex: none; color: var(--color-font2);}

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

/* 호버 */
@media (hover: hover) {
    .main-page:not(.scroll) .header:hover {border-bottom-color: var(--color-border); background-color: var(--color-white);}
    .header .gnb .gnb-link:hover span::after {transform: scaleX(1);}
    .header .gnb-sub-link:hover, .header .lang-list a:hover, .header .gnb-m-wrap .gnb-m-btn:hover {color: var(--color-font1);}
    .footer .footer-top .footer-nav a:hover {color: var(--color-font3);}
}

@media screen and (max-width: 1440px) {
    .inner {width: calc(100% - 120px);}
}
@media screen and (max-width: 1280px) {
    .inner {width: calc(100% - 96px);}
    .header .header-util {column-gap: var(--space-30);}

    /* 메뉴 버튼 - GNB 숨김 · 패널 = 1depth 줄 + 호버(클릭)한 메뉴의 2depth (768 이하는 전체메뉴) */
    .header > .inner > .all-menu-btn {display: flex;}
    .header .gnb .gnb-list, .header .gnb-panel-img {display: none;}
    .header .gnb-panel {border-top: 1px solid var(--color-border); border-bottom: 0;}
    .header .gnb-m-wrap {display: block;}
    .header .gnb-panel > .inner {display: block; padding-block: 0;}
    .header .gnb-sub-list {display: block;}

    /* 2depth 슬라이드 - .gnb-sub-body 행 0fr → 1fr · 여백은 .gnb-sub-inner 안쪽 ul 이 가짐 */
    .header .gnb-sub-body {display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.45s var(--ease-out), visibility 0.45s;}
    .header .gnb-sub.open .gnb-sub-body {grid-template-rows: 1fr; visibility: visible;}
    .header .gnb-sub-body .gnb-sub-inner {min-height: 0; overflow: hidden;}
    .header .gnb-sub-body ul {display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: 200px; row-gap: 4px; padding-block: var(--space-24) var(--space-40);}
}
@media screen and (max-width: 1024px) {
    :root {--header-logo-w: 160px;}
    .inner {width: calc(100% - 64px);}

    /* 언어 · 통화 - 헤더에서 메뉴 패널로 */
    .header .header-util .lang-list, .header .header-util .currency-dropdown {display: none;}
    .header .gnb-panel-util {display: flex;}

    .footer .footer-top {flex-direction: column; row-gap: var(--space-50);}
    .footer .footer-bot {flex-direction: column; row-gap: var(--space-16);}
}
@media screen and (max-width: 768px) {
    :root {--header-logo-w: 120px;}
    .inner {width: calc(100% - 48px);}

    .header > .inner {column-gap: 0;}
    .header .header-ico-list {column-gap: 0; margin-right: -6px;}
    .header .header-ico-list .ico-btn {width: 36px;}
    .header .header-ico-list .cart-count {right: 2px;}

    .header .all-menu-btn .all-menu-txt-t {display: none;}
    .header .all-menu-btn .all-menu-txt-m {display: inline;}

    /* 전체메뉴 - 헤더 아래 화면 전체 · 1depth 타이틀 + 2depth 모두 노출 */
    .header::after, .header .gnb-m-wrap .gnb-m-list {display: none;}
    .header .gnb-panel {position: fixed; top: var(--header-height); bottom: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;}
    .header .gnb-panel > .inner {padding-top: var(--space-24);}
    .header .gnb-sub {padding-block: var(--space-20); border-bottom: 1px solid var(--color-border);}
    .header .gnb-sub-tit {display: inline-block;}
    .header .gnb-sub-body {display: block; visibility: visible;}
    .header .gnb-sub-body .gnb-sub-inner {overflow: visible;}
    .header .gnb-sub-body ul {display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px var(--space-20); margin-top: var(--space-12); padding-block: 0;}

    /* 언어 · 통화 - 메뉴 하단 */
    .header .gnb-m-wrap {order: 1; border-bottom: 0;}
    .header .gnb-panel-util {padding-block: var(--space-16) var(--space-60);}
    .header .gnb-panel-util .custom-dropdown-menu {top: auto; bottom: 100%;}

    .footer .inner {row-gap: var(--space-60);}
    .footer .footer-top .footer-logo img {width: 150px;}
    .footer .footer-top .footer-nav {grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-16); width: 100%;}
    .footer .footer-top .footer-nav ul {row-gap: 14px;}
}
@media screen and (max-width: 480px) {
    .inner {width: calc(100% - 40px);}
}
@media screen and (max-width: 375px) {
    .inner {width: calc(100% - 32px);}
}