/* =============================================
   Tokens
============================================= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* 사이트 공통 GNB가 fixed/sticky로 위에 떠 있어서 콘텐츠 상단이 가려지는 것 보정용.
     화면 보면서 이 숫자만 조절하면 됨 (px 단위) */
  --gnb-offset: 38px;

  --font-display: "General Sans", "Pretendard Variable", sans-serif;
  --font-body: "General Sans", "Pretendard Variable", "Pretendard", -apple-system, sans-serif;

  --color-black: #000000;
  --color-title: #1d1d1d;
  --color-body: #555555;
  --color-disabled: #8e8e8e;
  --color-border-30: #d8d8d8;
  --color-border-dark: #717171;
  --color-red: #FA0A00;
  --color-red-2: #FA0A00;
  --color-bg-light: #f7f7f7;
  --color-placeholder: #d9d9d9;
  --color-white: #ffffff;
  --color-off-white: #e4e4e4;

  --page-max: 1920px;
  --content-max: 1760px;

  /* 섹션 헤드라인(타이틀+설명+탭) ~ 제품 그리드 사이 간격
     데스크톱 기본값. 모바일 전용 값은 아래 @media 안의 :root에서 별도로 덮어씀 */
  --head-to-grid-gap: 48px;

  /* .offers 섹션 자체의 flex gap (헤드라인/그리드/버튼 사이 전반 간격) */
  --section-gap: 64px;
}

/* =============================================
   Reset
============================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-title);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01' on, 'ss05' on;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.page { max-width: var(--page-max); margin: 0 auto; overflow-x: clip; }

/* =============================================
   Shared: section head / tabs / buttons / cards
============================================= */
.offers__head,
.featured__head,
.discover__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 24px;
}

.offers__head { position: relative; }
.offers__head::after {
  top: auto;
  bottom: 0;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--color-border-30);
}
.offers[data-tab-section="special-offers"] .offers__head::after {
  background: var(--color-border-dark);
}

.offers__title,
.featured__title,
.discover__title {
  font-family: "General Sans", var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 38px);
  letter-spacing: -0.48px;
  text-transform: uppercase;
}

.offers__desc,
.featured__desc,
.discover__desc {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  color: var(--color-body);
}

/* SPECIAL OFFERS 탭만 왼쪽부터 시작 */
.offers[data-tab-section="special-offers"] .tabs {
  justify-content: flex-start;
}

/* FOOTWEAR / APPAREL & GEAR 탭은 기존처럼 가운데 정렬(또는 원하는 값으로 변경) */
.offers[data-tab-section="footwear"] .tabs,
.offers[data-tab-section="apparel-gear"] .tabs {
  justify-content: center;
}

.tabs {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: nowrap; /* 미디어쿼리 발동 여부와 무관하게 항상 한 줄 유지 -> 활성 탭 밑줄이 항상 베이스라인과 겹치게 함 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  max-width: var(--content-max);
  margin: 32px auto 0;
  position: relative;
}
.tabs::-webkit-scrollbar { display: none; }

/* 활성 탭 슬라이딩 인디케이터: JS가 활성 탭의 실제 위치/너비를 측정해서 left/width를 지정.
   baseline(offers__head::after)과 동일하게 bottom:0을 기준으로 삼아서 좌표가 어긋날 수 없게 함 */
.tabs__indicator {
  top: auto;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-title);
  transition: left 0.2s ease, width 0.2s ease;
  pointer-events: none;
}
.tabs--dark .tabs__indicator { background: var(--color-white); }

.tab {
  height: 60px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.24px;
  color: var(--color-disabled);
  transition: color 0.15s ease;
}
.tab:hover { color: var(--color-title); }
.tab.is-active {
  color: var(--color-title);
}
.tabs--dark .tab { color: #8e8e8e; }
.tabs--dark .tab:hover { color: var(--color-white); }
.tabs--dark .tab.is-active {
  color: var(--color-white);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.18px;
  white-space: nowrap;
}
.btn--outline-light {
  width: 294px;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}
.btn--outline-light:hover { background: var(--color-white); color: var(--color-black); }

.btn--solid-dark {
  background: var(--color-title);
  color: #f8f8f8;
}
.btn--solid-dark:hover { background: #000; }
.btn__icon { width: 20px !important; height: 20px; }

/* Product grid + card (shared by offers/footwear/apparel) */
.product-grid {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: var(--content-max);
  margin: var(--head-to-grid-gap) auto 0;
  padding: 0 24px;
}
.product-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.product-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }

.product-card { display: flex; flex-direction: column; gap: 16px; }
.product-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-placeholder);
}
.product-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card__info { display: flex; flex-direction: column; gap: 8px; }
.product-card__name {
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-title);
}
.product-card__price-row { display: flex; align-items: center; gap: 8px; }
.product-card__discount { font-weight: 700; font-size: 16px; color: var(--color-red-2); }
.product-card__price { font-weight: 500; font-size: 16px; color: var(--color-title); }

/* dark section variant text colors */
.offers--dark .product-card__name,
.offers--dark .product-card__price { color: var(--color-white); }

/* =============================================
   Hero
============================================= */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 800;
  background: var(--color-placeholder);
  overflow: hidden;
  margin-top: var(--gnb-offset);
}

/* 오픈 전 카운트다운 오버레이
   기본값은 숨김(display:none) -> JS가 "아직 오픈 전"이라고 판단할 때만 flex로 노출.
   JS가 실패/차단돼도 이 블록은 계속 숨김 상태라, 페이지 전체가 정상 노출되는 쪽이 기본값(안전 우선) */
.hero__countdown {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.7); /* 영상 위 텍스트 가독성 확보용 스크림 */
}
.hero__countdown-label {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  letter-spacing: -0.2px;
}
.hero__countdown-timer {
  display: flex;
  gap: clamp(12px, 3vw, 32px);
}
.hero__countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
}
.hero__countdown-value {
  font-family: "General Sans", var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1;
  font-variant-numeric: tabular-nums; /* 숫자가 바뀌어도 폭이 흔들리지 않게 */
}
.hero__countdown-unit-label {
  font-size: clamp(12px, 1.5vw, 16px);
  color: var(--color-off-white);
}

/* 히어로를 제외한 나머지 랜딩페이지 전체.
   기본값은 "노출"(JS가 실패/차단돼도 페이지 전체가 정상적으로 보이는 쪽이 안전).
   카운트다운 진행 중일 때만 JS가 [data-landing-locked]를 붙여서 숨김 처리함 */
[data-landing-content][data-landing-locked] { display: none; }

/* 티징 전용 CTA (data-landing-content와 반대: 오픈되면 JS가 숨김 처리) */
.teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 64px 24px;
  text-align: center;
  border-bottom: 1px solid var(--color-border-30);
}
.teaser__desc {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-title);
}
.teaser__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 64px;
  line-height: 1.3;
  min-width: 220px;
  padding: 14px 32px;
  background: var(--color-title);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.teaser__cta:hover { background: #000; }
[data-teaser-content][data-teaser-hidden] { display: none; }

/* =============================================
   Coupon
============================================= */
.coupon { padding: 80px 24px 160px; }
.coupon__inner {
  max-width: 586px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.coupon__head { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.coupon__title {
  font-family: "General Sans", var(--font-display);
  text-align: center;
  line-height: normal;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 38px);
  letter-spacing: -0.48px;
}
.coupon__desc { font-size: 18px; line-height: 1.5; letter-spacing: -0.2px; color: var(--color-body); }
.coupon__desc-accent { color: var(--color-red); font-weight: 600; }

.coupon__body { display: flex; flex-direction: column; gap: 16px; }
.coupon__card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 200px;
  border-radius: 8px;
  background: var(--color-red);
  padding: 0 60px;
  color: var(--color-black);
  overflow: hidden;
}
.coupon__percent {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(56px, 10vw, 100px);
  line-height: 1;
  letter-spacing: -1px;
}
.coupon__percent em {
  font-style: normal;
  font-size: 0.64em;
  margin-left: 4px;
}
.coupon__meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 16px;
  letter-spacing: -0.16px;
  text-align: right;
}

.coupon__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 100%;
  border: 1px solid var(--color-black);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.18px;
}
.coupon__cta:hover { background: var(--color-black); color: var(--color-white); }

.coupon__notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  margin-top: 32px;
}
.coupon__notice-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.16px;
  color: var(--color-title);
}
.coupon__notice-icon {
  position: relative;
  width: 16px;
  height: 24px;
  flex-shrink: 0;
}
.coupon__notice-icon::before,
.coupon__notice-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-title);
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}
.coupon__notice-icon::before { width: 16px; height: 1px; } /* 가로선: 항상 표시 */
.coupon__notice-icon::after { width: 1px; height: 16px; } /* 세로선: 닫혔을 때만 표시(+ 모양) */
.coupon__notice-toggle[aria-expanded="true"] .coupon__notice-icon::after { opacity: 0; }

.coupon__notice-list {
  list-style: disc;
  padding-left: 24px;
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.coupon__notice-list li { margin-bottom: 3px; }
.coupon__notice-list li::marker { font-size: 0.5em; }
.coupon__notice-list li:last-child { margin-bottom: 0; }

/* =============================================
   Special Offers (dark)
============================================= */
.offers { padding: 80px 0; }
.offers--light { background: var(--color-white); }
.offers[data-tab-section="special-offers"] {
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
}
.offers[data-tab-section="special-offers"] .offers__desc { color: var(--color-off-white); }
.offers[data-tab-section="special-offers"] .product-card__name,
.offers[data-tab-section="special-offers"] .product-card__price { color: var(--color-white); }
.offers[data-tab-section="special-offers"] .btn--outline-light { margin-top: 16px; }

.offers[data-tab-section="footwear"],
.offers[data-tab-section="apparel-gear"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
}

/* =============================================
   Featured item
============================================= */
.featured { padding: 160px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.featured__head { max-width: 700px; }

.featured__body {
  width: 100%;
  max-width: 1174px;
  display: flex;
  gap: 16px;
}
.featured__hero { flex: 1 1 0; aspect-ratio: 1 / 1; overflow: hidden; }
.featured__hero img { width: 100%; height: 100%; object-fit: cover; }

.featured__collage {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.featured__collage-item { aspect-ratio: 1 / 1; overflow: hidden; }
.featured__collage-item img { width: 100%; height: 100%; object-fit: cover; }

.featured__dots { display: none; }
.featured__slide--clone { display: none; }

.featured__footer {
  width: 100%;
  max-width: 1174px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.featured__copy { display: flex; flex-direction: column; gap: 8px; max-width: 638px; }
.featured__copy h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.36px;
  text-transform: uppercase;
}
.featured__copy p { font-size: 16px; line-height: 1.5; letter-spacing: -0.18px; color: var(--color-body); }

/* =============================================
   Discover more
============================================= */
.discover { padding: 80px 24px 160px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.discover__list {
  width: 100%;
  max-width: 876px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.discover__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 40px;
  border-radius: 8px;
  background: var(--color-bg-light);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.24px;
  transition: background 0.15s ease;
}
.discover__thumb { width: 119px !important; height: 119px; border-radius: 8px; object-fit: cover; flex-shrink: 0; margin: 0 !important;}

/* =============================================
   Responsive
============================================= */

/* ---- Tablet (~1200px 이하): 그리드 컬럼 축소 ---- */
@media (max-width: 1200px) {
  .product-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .product-grid[data-cols="5"] { grid-template-columns: repeat(3, 1fr); }
  .featured__body { flex-direction: column; }
}

/* ---- Large mobile / small tablet (~860px 이하) ---- */
@media (max-width: 860px) {
  :root {
    /* 모바일에서는 .offers의 flex gap(--section-gap) 하나로만 간격을 통일해서 관리.
       product-grid의 margin-top(--head-to-grid-gap)은 0으로 꺼서 이중으로 안 겹치게 함 */
    --section-gap: 16px;
    --head-to-grid-gap: 0px;
  }

  /* 섹션 세로 여백 축소 */
  .offers { padding: 56px 0; }
  .featured { padding: 96px 24px; gap: 24px; }
  .coupon { padding: 56px 24px 96px; }
  .discover { padding: 56px 24px 96px; }

  /* Featured item: 5장 이미지를 1장씩 스와이프하는 가로 캐러셀로 전환
     (display:contents로 콜라주 4장을 히어로와 같은 레벨의 슬라이드로 풀어냄) */
  .featured__media {
    position: relative;
    left: 50vw;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
  }

  .featured__body {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .featured__body::-webkit-scrollbar { display: none; }

  .featured__collage { display: contents; } /* 그리드 해제 -> 자식들이 featured__body의 직속 슬라이드가 됨 */

  .featured__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .featured__slide--clone { display: block; }

  /* dots: 이미지 위에 겹쳐지는 오버레이 + 바(bar) 형태 인디케이터 */
  .featured__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 2;
    padding: 8px 12px;
    pointer-events: none;
  }
  .featured__dot {
    width: 20px;
    height: 3px;
    background: var(--color-border-30); /* 비활성: 그레이 */
    transition: background 0.15s ease;
  }
  .featured__dot.is-active { background: var(--color-title); } /* 활성: 블랙 */

  .offers__head,
  .featured__head,
  .discover__head { gap: 6px; }

  .offers__desc,
  .featured__desc,
  .discover__desc { font-size: 16px; }

  /* 탭: 모바일 전용 풀블리드 레이아웃 (한 줄+스크롤 자체는 base .tabs에서 이미 항상 보장됨) */
  .tabs {
    position: relative;
    left: 50vw;
    transform: translateX(-50%);
    margin-top: 24px;
    margin-left: 0;
    margin-right: 0;
    gap: 8px;
    justify-content: flex-start;
    width: 100vw;
    max-width: 100vw;
    padding-left: 24px;
    padding-right: 24px;
  }
  .tab { font-size: 17px; height: 48px; flex-shrink: 0; }

  .product-grid { gap: 12px; }
  .product-grid[data-cols="4"],
  .product-grid[data-cols="5"] { grid-template-columns: repeat(2, 1fr); }

  .featured__footer { align-items: flex-start; gap: 16px; }
  .featured__copy h3 { font-size: 28px; }
  .btn--solid-dark { width: 100%; }
  .btn--outline-light { width: calc(100% - 32px); max-width: calc(100% - 32px); }

  .coupon__card { padding: 0 32px; min-height: 172px; }
  .coupon__inner { gap: 24px; }
  .coupon__notice { margin-top: 24px; }

  .discover__card { padding: 20px 24px; }
  .discover__thumb { width: 72px !important; height: 72px; }
}

/* ---- Mobile (~560px 이하) ---- */
@media (max-width: 560px) {
  .hero { aspect-ratio: 9 / 16; } /* TODO: 모바일 전용 배너 크리에이티브로 교체 시 실제 비율에 맞게 조정 */

  .offers { padding: 64px 0; }
  .featured { padding: 64px 16px; }
  .coupon { padding: 64px 16px 72px; }
  .discover { padding: 64px 16px 72px; gap: 24px;}
  .offers__head, .featured__head, .discover__head {padding:0;}

  .coupon__desc,
  .offers__desc,
  .featured__desc,
  .discover__desc { font-size: 16px; }

  .offers__desc { padding: 0 16px; }

  .product-grid[data-cols="4"],
  .product-grid[data-cols="5"] { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0 16px; }

  .product-card { gap: 8px; }
  .product-card__name,
  .product-card__discount,
  .product-card__price { font-size: 14px; }

  .coupon__card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; min-height: unset; }
  .coupon__meta { margin-left: 0; align-items: flex-start; text-align: left; }
  .coupon__cta { font-size: 16px; }

  .coupon__notice-toggle { font-size: 14px; }
  .coupon__notice-list { font-size: 14px; padding-left: 20px; }

  .featured__collage { gap: 10px; }
  .featured__copy h3 { font-size: 24px; }
  .featured__copy p { font-size: 14px; }

  .discover__list { gap: 16px; }
  .discover__card { padding: 16px 20px; font-size: 16px; }
  .discover__thumb { width: 56px !important; height: 56px; border-radius: 6px; }
}

/* ---- Small phones (~380px 이하) ---- */
@media (max-width: 380px) {
  .coupon__percent { font-size: 48px; }
}