/* ============================================================
   layout.css — 헤더 · 푸터 · 섹션 · 그리드
   ============================================================ */

/* ============================================================
   Announcement bar
   ============================================================ */
.announcement {
  position: relative;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  height: var(--banner-h);
  padding-inline: var(--sp-40);
  background: var(--c-cream);
  color: var(--c-dark);
  font-size: var(--t-13);
  letter-spacing: var(--tr-wide);
  text-align: center;
}

.announcement[hidden] { display: none; }

.announcement__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement__text strong { font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }

.announcement__close {
  position: absolute;
  inset-inline-end: var(--sp-12);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
}

.announcement__close svg { width: .875rem; height: .875rem; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  color: var(--header-fg);
  transition: color var(--d-fast) var(--ease-quart-out);
}

.site-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  padding-inline: var(--margin);
  background: var(--header-bg);
  transition: background-color var(--d-base) var(--ease-quart-out);
}

/* 히어로 위 투명 상태 */
.site-header--transparent { color: var(--header-fg-transparent); }
.site-header--transparent .site-header__bar { background: transparent; }

/* 밝은 히어로 이미지 위에서도 흰색 내비 텍스트가 AA 대비를 유지하도록 상단 스크림을 깐다 */
.site-header--transparent::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: -1;
  height: calc(var(--header-h) + 3rem);
  background: linear-gradient(180deg,
    rgba(29, 26, 23, .62) 0%,
    rgba(29, 26, 23, .38) 55%,
    rgba(29, 26, 23, 0) 100%);
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-quart-out);
}

.site-header--transparent.site-header--scrolled::before { opacity: 0; }

.site-header--scrolled { color: var(--header-fg); }
.site-header--scrolled .site-header__bar { background: var(--header-bg); }

.site-header__nav,
.site-header__utils {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
}

.site-header__utils { justify-content: flex-end; }

.site-header__burger,
.site-header__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: inherit;
}

.site-header__burger svg,
.site-header__icon svg { width: 1.375rem; height: 1.375rem; }

.site-header__burger { display: grid; }

.site-header__cart { position: relative; }

.site-header__cart-count {
  position: absolute;
  top: .125rem;
  inset-inline-end: .0625rem;
  min-width: 1rem;
  height: 1rem;
  padding-inline: .1875rem;
  border-radius: var(--r-full);
  background: var(--c-dark);
  color: var(--c-cream);
  font-size: 10px;
  font-weight: var(--fw-medium);
  line-height: 1rem;
  text-align: center;
  letter-spacing: 0;
}

.site-header--transparent:not(.site-header--scrolled) .site-header__cart-count {
  background: #fff;
  color: var(--c-dark);
}

.site-header__lang {
  font-size: var(--t-14);
  letter-spacing: var(--tr-wide);
  white-space: nowrap;
}

.site-header__lang [aria-current] { color: inherit; }
.site-header__lang span:not([aria-current]) { opacity: .5; }

/* 모바일에서는 원본과 동일하게 햄버거 · 로고 · 장바구니만 노출 */
.site-header__lang,
.site-header__utils .site-header__icon:not(.site-header__cart) { display: none; }

@media (min-width: 1024px) {
  .site-header__lang { display: block; }
  .site-header__utils .site-header__icon:not(.site-header__cart) { display: grid; }
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .0625rem;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}

.logo__word {
  font-size: var(--t-20);
  font-weight: var(--fw-light);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
}

.logo__sub {
  font-size: var(--t-12);
  font-weight: var(--fw-regular);
  font-style: italic;
  letter-spacing: .3em;
  text-indent: .3em;
  opacity: .9;
}

.logo--lg .logo__word { font-size: var(--t-32); }
.logo--lg .logo__sub { font-size: var(--t-14); }

/* 데스크톱 내비 */
.nav-desktop { display: none; }

.nav-desktop__list {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding-block: var(--sp-8);
  font-size: var(--t-16);
  color: inherit;
  white-space: nowrap;
  background: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: .25rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s var(--ease-quart-out);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav-link svg { width: .75rem; height: .75rem; }
.nav-link > svg:first-child { width: 1rem; height: 1rem; }

.site-header__club { display: none; }

@media (min-width: 1280px) {
  .site-header__club { display: inline-flex; }
}

/* ============================================================
   Mega menu
   ============================================================ */
.mega {
  position: fixed;
  inset-inline: 0;
  top: calc(var(--header-h));
  z-index: var(--z-menu);
  background: var(--c-cream);
  color: var(--c-dark);
  border-top: var(--bd-hairline);
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--d-base) var(--ease-quint-inout),
              visibility var(--d-base);
}

.mega.is-open { grid-template-rows: 1fr; visibility: visible; }

.mega__inner { overflow: hidden; }

.mega__grid {
  display: grid;
  gap: var(--gutter);
  padding: var(--sp-40) var(--margin) var(--sp-48);
}

.mega__col-title {
  font-size: var(--t-13);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--sp-16);
}

.mega__links { display: grid; gap: var(--sp-12); }

.mega__link {
  position: relative;
  display: inline-block;
  font-size: var(--t-16);
  color: var(--fg-muted);
  transition: color var(--d-fast) var(--ease-quart-out);
}

.mega__link:hover { color: var(--c-dark); }

.mega__promo { display: grid; gap: var(--sp-12); }

.mega__promo-media {
  position: relative;
  overflow: clip;
  background: var(--bg-surface);
  aspect-ratio: 4 / 3;
}

.mega__promo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-image) var(--ease-expo-out);
}

.mega__promo:hover .mega__promo-media img { transform: scale(1.04); }

.mega__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  background: rgba(29, 26, 23, .35);
  opacity: var(--overlay-o, 0);
  visibility: var(--overlay-v, hidden);
  transition: opacity var(--d-base) var(--ease-quart-out), visibility var(--d-base);
}



/* ============================================================
   Mobile drawer nav
   ============================================================ */
.nav-mobile {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  width: min(88vw, 26rem);
  display: flex;
  flex-direction: column;
  background: var(--c-cream);
  color: var(--c-dark);
  /* 열림 상태는 JS가 --drawer-x 를 인라인으로 설정해 제어한다.
     인라인 커스텀 프로퍼티 변경은 스타일 무효화가 항상 보장되므로
     클래스 토글보다 전환 신뢰도가 높다. */
  transform: translateX(var(--drawer-x, -100%));
  transition: transform var(--d-base) var(--ease-quint-inout);
  overflow-y: auto;
  overscroll-behavior: contain;
}


.nav-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding-inline: var(--sp-20);
  border-bottom: var(--bd-hairline);
}

.nav-mobile__body { padding: var(--sp-16) var(--sp-20) var(--sp-48); }

.nav-mobile__group + .nav-mobile__group { border-top: var(--bd-hairline); }

.nav-mobile__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--sp-16);
  font-size: var(--t-18);
  text-align: start;
  cursor: pointer;
  list-style: none;
}

.nav-mobile__summary::-webkit-details-marker { display: none; }
.nav-mobile__summary svg { width: 1rem; height: 1rem; transition: transform var(--d-fast) var(--ease-quart-out); }
.nav-mobile__group[open] .nav-mobile__summary svg { transform: rotate(180deg); }

.nav-mobile__sub {
  display: grid;
  gap: var(--sp-12);
  padding-block: 0 var(--sp-20);
}

.nav-mobile__sub a { font-size: var(--t-16); color: var(--fg-muted); }

.nav-mobile__utils {
  display: grid;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
  padding-top: var(--sp-24);
  border-top: var(--bd-hairline);
}

.nav-mobile__utils a { display: flex; align-items: center; gap: var(--sp-12); font-size: var(--t-16); }
.nav-mobile__utils svg { width: 1.125rem; height: 1.125rem; }

/* ============================================================
   Main
   ============================================================ */
.main { display: block; }

.main--offset { padding-top: var(--header-h); }

.section { margin-block: var(--section-gap); }

.section--flush { margin-block: 0; }

.section__head {
  display: grid;
  justify-items: center;
  gap: var(--sp-16);
  text-align: center;
}

.section__head + .section__body { margin-top: var(--sp-26); }

@media (min-width: 1024px) {
  .section__head + .section__body { margin-top: var(--sp-46); }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  margin-top: var(--section-gap);
  padding-bottom: var(--sp-24);
  background: var(--bg-footer);
  color: var(--c-black);
}

.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1.5rem;
  background-image: url("../svg/frieze.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.site-footer::before { top: 0; }
.site-footer::after { bottom: 0; transform: scaleY(-1); }

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  padding: var(--sp-73) var(--margin) var(--sp-60);
}

.site-footer__cols {
  display: grid;
  gap: var(--sp-32);
  grid-template-columns: 1fr;
}

.footer-col__title {
  font-size: var(--t-13);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  margin-bottom: var(--sp-16);
}

.footer-col__list { display: grid; gap: var(--sp-12); }

.footer-col__list a {
  position: relative;
  display: inline-block;
  font-size: var(--t-14);
  color: var(--c-dark-89);
  transition: color var(--d-fast) var(--ease-quart-out);
}

.footer-col__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s var(--ease-quart-out);
}

.footer-col__list a:hover { color: var(--c-dark); }
.footer-col__list a:hover::after,
.footer-col__list a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

.site-footer__aside { display: grid; gap: var(--sp-32); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-16) var(--sp-24);
  padding: var(--sp-24) var(--margin) 0;
  border-top: 1px solid var(--c-black-25);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16) var(--sp-24);
}

.site-footer__legal a { font-size: var(--t-12); color: var(--c-dark-89); }
.site-footer__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__copy { font-size: var(--t-12); color: var(--fg-subtle); margin-inline-start: auto; }

/* ============================================================
   Responsive — Tablet
   ============================================================ */
@media (min-width: 768px) {
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--sp-40) var(--gutter); }
  .mega__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Responsive — Desktop
   ============================================================ */
@media (min-width: 1024px) {
  .site-header__burger { display: none; }
  .nav-desktop { display: block; }

  .site-header__bar { grid-template-columns: 1fr auto 1fr; }

  .site-footer__inner { flex-direction: row; justify-content: space-between; gap: var(--gutter); }
  .site-footer__cols { flex: 1; grid-template-columns: repeat(4, 1fr); }
  .site-footer__aside { flex: 0 0 auto; width: calc(var(--column) * 4 + var(--gutter) * 3); }

  .mega__grid { grid-template-columns: repeat(4, 1fr) 1.4fr; padding-block: var(--sp-48) var(--sp-60); }
  .mega__grid--eshop { grid-template-columns: repeat(6, 1fr) 1.6fr; }
}