/* =============================================
   Tokens
============================================= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  /* �ъ씠�� 怨듯넻 GNB媛� fixed/sticky濡� �꾩뿉 �� �덉뼱�� 肄섑뀗痢� �곷떒�� 媛��ㅼ��� 寃� 蹂댁젙��.
     �붾㈃ 蹂대㈃�� �� �レ옄留� 議곗젅�섎㈃ �� (px �⑥쐞) */
  --gnb-offset: 38px;

  --font-display: "Pretendard Variable", "Pretendard", sans-serif;
  --font-body: "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: 1280px;

  /* �뱀뀡 �ㅻ뱶�쇱씤(���댄�+�ㅻ챸+��) ~ �쒗뭹 洹몃━�� �ъ씠 媛꾧꺽
     �곗뒪�ы넲 湲곕낯媛�. 紐⑤컮�� �꾩슜 媛믪� �꾨옒 @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: var(--font-display);
  font-weight: 700;
  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: 400;
  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: 400;
  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: 400; font-size: 16px; color: var(--color-red-2); }
.product-card__price { font-weight: 400; 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: 400;
  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: var(--font-display);
  font-weight: 400;
  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: 400;
  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: 400;
  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: var(--font-display);
  text-align: center;
  line-height: normal;
  text-transform: uppercase;
  font-weight: 700;
  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: 400; }

.coupon__body { display: flex; flex-direction: column; gap: 16px; }
.coupon__card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 130px;
  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: 400;
  font-size: clamp(28px, 5vw, 50px);
  line-height: 1;
  letter-spacing: -1px;
  white-space: nowrap;
}
.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: 400;
  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: 400;
  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: 400;
  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: 400;
  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; }
}


/* =============================================
   Members Week 전용 추가 스타일
   (원본 mweek_pc.css에 없는 신규 마크업만 최소로 추가)
============================================= */

  /* ============ 테스트용 상태 미리보기 툴바 (QA 확인용, 실 배포 시 이 블록만 삭제하면 됨) ============ */
  .qa-bar{
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#fff3cd; border-bottom:2px solid #f5c400;
    padding:10px 24px;
    font-size:13px;
  }
  .qa-bar__label{ font-weight:400; color:#7a5b00; margin-right:4px; }
  .qa-bar__btn{
    font:inherit; font-size:13px; font-weight:400; cursor:pointer;
    border:1px solid #d8a900; background:#fff; color:#7a5b00;
    padding:6px 14px; border-radius:999px;
  }
  .qa-bar__btn:hover{ background:#ffe58a; }
  .qa-bar__btn.is-current{ background:#7a5b00; border-color:#7a5b00; color:#fff; }

  /* mo(모바일 전용) 파일에서만 보여야 하는 개행 포인트: PC에서는 항상 숨김 */
  .mw-br-mobile{ display:none; }

  /* 한글은 기본적으로 글자 단위로도 줄바꿈되기 때문에(word-break 기본값),
     폭이 좁아지는 구간에서 단어가 중간에 쪼개지는 걸 방지 */
  .page{ word-break: keep-all; }

  .mw-note-flag{
    display:block;
    background:#111; color:#ff2b2b; font-weight:400; font-size:13px;
    text-align:center;
    padding:9px 16px;
    max-width:360px;
    margin:0 auto 24px;
  }

  /* 혜택2 데일리 타임특가: 상태(오픈대기/진행중/당일종료/지난날짜/다가올날짜)별 카운트다운·상품 노출 영역
     (원본 CSS에 없는 신규 UI라 디자인 토큰만 재사용해서 최소로 구성) */
  .mw-deal{ text-align:center; padding:48px 24px 0; }

  .mw-deal__badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:400; letter-spacing:.2px;
    padding:6px 14px; border-radius:999px; margin-bottom:16px;
    border:1px solid var(--color-border-30); color:var(--color-body);
  }
  .mw-deal__badge--live{ background:var(--color-red); border-color:var(--color-red); color:#fff; }
  .mw-deal__badge--live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; }
  .mw-deal__badge--muted{ color:var(--color-disabled); border-color:var(--color-border-30); }
  .mw-deal__badge--strong{ color:var(--color-title); border-color:var(--color-title); }

  /* 쿠폰 카드 다크 배경(검정 배경 + 완전 흰색 아닌 오프화이트 텍스트) */
  .mw-card-dark{ background:#000; }
  .mw-card-dark .coupon__percent,
  .mw-card-dark .coupon__percent em,
  .mw-card-dark .coupon__meta,
  .mw-card-dark .coupon__meta p{ color:#f2f2f2; }

  .mw-deal__label{ font-size:16px; color:var(--color-body); margin:0 0 20px; }
  .mw-deal__countdown{
    display:flex; align-items:flex-end; justify-content:center; gap:14px;
    margin:0 0 32px;
  }
  .mw-deal__countdown-unit{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:56px; }
  .mw-deal__countdown-value{
    font-family:var(--font-display); font-weight:400; font-size:40px; line-height:1;
    letter-spacing:-0.5px; color:var(--color-title);
    font-variant-numeric:tabular-nums;
  }
  .mw-deal__countdown-label{ font-size:12px; letter-spacing:.3px; color:var(--color-body); text-transform:uppercase; }
  .mw-deal__countdown-sep{ min-width:0; }
  .mw-deal__countdown-sep .mw-deal__countdown-label{ visibility:hidden; }
  .mw-deal__countdown--live .mw-deal__countdown-value{ color:var(--color-red); }
  .mw-deal__message{ font-size:18px; color:var(--color-body); margin:0 0 32px; }

  .mw-deal__thumb-wrap{ width:300px; margin:0 auto; }
  .mw-deal__thumb{
    width:300px; height:300px; margin:0 auto; overflow:hidden;
    background:repeating-linear-gradient(45deg, var(--color-placeholder), var(--color-placeholder) 10px, #cfcfcf 10px, #cfcfcf 20px);
    transition:filter .2s ease, opacity .2s ease;
  }
  /* 오픈 전(대기/다가올 날짜): 형태가 희미하게만 보이는 정도로 블러 처리 */
  .mw-deal__thumb--blur{ filter:blur(8px); transform:scale(1.03); }
  /* 특가 진행 중: 블러 없이 선명하게 */
  .mw-deal__thumb--clear{ filter:none; }
  /* 종료(당일 종료/지난 날짜): 딤드 처리 */
  .mw-deal__thumb--dim{ filter:grayscale(.3) brightness(.6); opacity:.85; }
  /* 요일별 실제 상품 이미지: .mw-deal__thumb(300x300, overflow:hidden) 안을 꽉 채움 */
  .mw-deal__thumb-img{ display:block; width:100%; height:100%; object-fit:cover; }
  /* 진행중(live) 상태에서만 상품 이미지에 링크를 씌움 */
  .mw-deal__thumb-link{ display:block; width:300px; margin:0 auto; }

  /* 진행중(live) 전용: 썸네일과 폭이 같은(300px), 테두리만 있는 미니멀 쿠폰(할인율 + 다운로드 화살표)
     전체가 <a> 링크라 박스 어디를 눌러도 쿠폰 다운로드(jfBasicCouponDown)가 호출됨 */
  .mw-deal__coupon{
    display:flex; align-items:center; justify-content:space-between;
    width:300px; height:40px; margin:12px auto 0; padding:0 16px;
    border:1px solid var(--color-title); border-radius:4px;
    background:none; color:var(--color-title);
    text-decoration:none; cursor:pointer;
  }
  .mw-deal__coupon-rate{ font-family:var(--font-display); font-weight:400; font-size:15px; letter-spacing:-0.2px; }
  .mw-deal__coupon-download{ display:flex; align-items:center; gap:3px; font-size:11px; color:var(--color-body); }
  .mw-deal__coupon-download p{ margin:0; }
  /* 원본 아이콘이 흰색(-wh) 에셋이라 테두리형 밝은 배경 위에서는 안 보여서 brightness(0)로 어둡게 보정 */
  .mw-deal__coupon-icon{ width:12px; height:12px; flex-shrink:0; filter:brightness(0); }

  /* 진행중(live) 전용: 상품명(길면 말줄임) + 소비자가(좌) / 쿠폰 적용가(우측 정렬) */
  .mw-deal__info{ width:300px; margin:16px auto 0; text-align:center; }
  .mw-deal__name{
    margin:0 0 6px; font-size:14px; color:var(--color-title);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mw-deal__price{ display:flex; align-items:baseline; justify-content:center; gap:8px; font-size:14px; }
  .mw-deal__price-original{ color:var(--color-disabled); text-decoration:line-through; font-weight:400; }
  .mw-deal__price-final{ color:var(--color-title); font-weight:600; }

  .mw-deal__date{ margin:12px 0 24px; font-size:16px; color:var(--color-title); }

  .mw-deal__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:520px; margin:0 auto 64px; }
  .mw-deal__btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:56px; padding:0 28px; border:1px solid var(--color-title);
    font-size:15px; font-weight:400; color:var(--color-title); min-width:180px;
    background:none; cursor:pointer;
  }
  .mw-deal__btn:hover{ background:var(--color-title); color:#fff; }
  .mw-deal__btn--primary{ background:var(--color-title); color:#fff; }
  .mw-deal__btn--primary:hover{ background:#000; }
  .mw-deal__btn--disabled{ border-color:var(--color-border-30); color:var(--color-disabled); cursor:default; pointer-events:none; }

  .tab__badge{
    display:inline-block; font-size:11px; font-weight:400; margin-left:6px;
    padding:2px 6px; border-radius:4px; background:var(--color-off-white); color:var(--color-disabled);
    vertical-align:middle;
  }

  /* 더미 이미지 공통: 회색 배경 + 중앙 '이미지 없음' 아이콘 (실제 이미지 나오면 교체) */
  .mw-dummy-thumb{
    background-color: var(--color-placeholder);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='1.4'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:32%;
  }

  /* 혜택3 구매 상위 고객 선정 상품 증정: PC 기준 1~5등 가로 배치 */
  .mw-section{ max-width:var(--content-max); margin:0 auto; padding:80px 24px; text-align:center; }
  .mw-section__title{
    font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,34px);
    letter-spacing:-0.4px; color:var(--color-title); margin:0 0 8px;
  }
  .mw-section__desc{ font-size:16px; color:var(--color-body); margin:0 0 32px; }
  .mw-ranking-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
    max-width:var(--content-max); margin:0 auto; text-align:left;
  }
  .mw-ranking-card__thumb{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#f7f7f7; }
  /* 사은품 더미 이미지: background 단축 속성이 mw-dummy-thumb의 아이콘을 지워버리지 않도록 별도 명시 */
  .mw-ranking-card__thumb.mw-dummy-thumb{
    background-color: var(--color-placeholder);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='1.4'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:32%;
  }
  .mw-ranking-card__photo{
    display:block; width:100%; height:100%; object-fit:contain;
    box-sizing:border-box; padding:10%;
  }
  .mw-ranking-card__rank{
    position:absolute; top:10px; left:10px;
    background:var(--color-title); color:#fff;
    font-family:var(--font-display); font-weight:400; font-size:13px;
    padding:4px 10px; border-radius:999px;
  }
  .mw-ranking-card__name{ margin:12px 0 2px; font-size:16px; color:var(--color-title); text-align:center; }

  /* 카카오톡 플친 이벤트: 카카오 옐로우 배너 (Ch 아이콘 실제 배경색 #FFDD00 에 맞춤) */
  .mw-kakao{ padding:0 24px; }
  .mw-kakao__banner{
    max-width:var(--content-max); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    background:#FBE300; border-radius:16px;
    padding:32px 40px;
    flex-wrap:wrap;
  }
  .mw-kakao__profile{ display:flex; align-items:center; gap:20px; min-width:280px; text-align:left; }
  .mw-kakao__icon{ width:64px; height:64px; border-radius:16px; flex-shrink:0; }
  .mw-kakao__text{ display:flex; flex-direction:column; gap:5px; }
  .mw-kakao__text p{ margin:0; color:#391B1B; }
  .mw-kakao__text-sub{ font-size:14px; font-weight:400; opacity:.75; }
  .mw-kakao__text-main{ font-size:19px; font-weight:600; line-height:1.4; }
  .mw-kakao__text-main strong{ font-weight:600; }
  .mw-kakao__btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:52px; padding:0 28px; border-radius:8px;
    background:#391B1B; color:#FFDD00; flex-shrink:0;
    font-size:15px; font-weight:400; border:none; cursor:pointer;
  }
  .mw-kakao__btn:hover{ background:#000; }

  /* 카카오 쿠폰 사용 안내: 배너가 커서(PC) 바깥이 아니라 배너 안, 본문 텍스트 아래에 작게 배치 */
  .mw-kakao__notice{
    font-size:13px; color:#391B1B; opacity:.6;
    font-weight:400; margin-top:2px; text-align:left;
  }

  /* 스포츠 배너: 카카오 배너와 동일 크기(.mw-kakao__banner 그대로 재사용) + 배경/문구만 별도 지정
     좌측은 상품 컷아웃 사진이 들어갈 자리 (실제 이미지는 추후 작업 예정, 지금은 더미 플레이스홀더)
     사진 크기를 카카오 아이콘 행 높이에 맞춰서, 배너 전체 높이가 카카오 배너와 정확히 같아지도록 함 */
  .mw-sports__banner{
    background:var(--color-bg-light);
    margin-top:24px;
    /* 배너 높이를 고정값으로 고정 -> .mw-sports__photo 크기를 키워도 배너 높이는 변하지 않음
       (렌더링 높이: padding 32px*2 + 사진 120px = 184px) */
    height:140px;
    /* 사진이 커져도 텍스트가 아래로 줄바꿈되지 않고 항상 옆으로(수평) 나란히 배치되도록 고정 */
    flex-wrap:nowrap;
  }
  .mw-sports__photo{
    width:120px; height:120px; flex-shrink:0; border-radius:12px;background: transparent;
  }
  .mw-sports__title{
    font-family:var(--font-display); font-weight:600; font-size:19px;
    line-height:1.4; color:var(--color-title); margin:0;
    flex:1 1 200px; text-align:left; white-space:nowrap;
  }



  /* 멤버스위크 구매TIP: 모든 혜택을 합쳤을 때 예시 상품이 얼마가 되는지 한눈에 보여주는 카드
     (모바일 폭 고정, PC에서도 가운데 정렬된 좁은 카드로 노출) */
  .mw-tip{ max-width:560px; margin:0 auto; padding:80px 24px; }
  .mw-tip__badge{
    display:inline-block; background:#000; color:#fff;
    font-size:13px; font-weight:400; letter-spacing:.2px;
    padding:4px 10px; border-radius:4px; margin-bottom:10px;
  }
  .mw-tip__title{
    font-family:var(--font-display); font-weight:700; font-size:24px;
    letter-spacing:-0.3px; color:var(--color-title); margin:0 0 20px;
  }
  .mw-tip__card{
    border:1px solid var(--color-border-30); border-radius:12px;
    padding:28px 24px; background:#fff; text-align:left;
    margin-top:20px;
  }
  .mw-tip__thumb{ width:100%; aspect-ratio:1/1; margin:0 0 16px; overflow:hidden; }
  .mw-tip__thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
  .mw-tip__product{ margin:0 0 16px; }
  .mw-tip__product-name{ font-size:16px; color:var(--color-body); margin:0 0 4px; }
  .mw-tip__product-price{ font-size:18px; color:var(--color-title); margin:0; }
  .mw-tip__rows{
    display:flex; flex-direction:column; gap:14px;
    padding:18px 0; margin:0 0 18px;
    border-top:1px solid var(--color-border-30);
    border-bottom:1px solid var(--color-border-30);
  }
  .mw-tip__row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .mw-tip__row-label{ font-size:16px; color:var(--color-body); margin:0; }
  .mw-tip__row-note{ font-size:13px; color:var(--color-disabled); margin:3px 0 0; }
  .mw-tip__row-value{ font-size:16px; color:var(--color-title); white-space:nowrap; flex-shrink:0; }
  .mw-tip__final{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px; }
  .mw-tip__final-label{ font-size:18px; font-weight:700; color:var(--color-title); }
  .mw-tip__final-value{ font-size:25px; font-weight:700; color:var(--color-title); }
  .mw-tip__reward{
    display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
    font-size:15px; color:var(--color-body); margin:0 0 20px;
  }
  .mw-tip__reward-note{ display:block; font-size:13px; color:var(--color-disabled); margin:3px 0 0; }
  .mw-tip__reward-value{ white-space:nowrap; flex-shrink:0; color:var(--color-title); }
  .mw-tip__highlight{ background:#000; border-radius:8px; padding:24px 20px; text-align:center; }
  .mw-tip__highlight-sub{ font-size:14px; color:#fff; opacity:.75; margin:0 0 8px; }
  .mw-tip__highlight-main{ font-size:23px; font-weight:700; color:#fff; margin:0; }
  .mw-tip__foot{ font-size:12px; color:var(--color-disabled); text-align:center; margin:16px 0 0; }