/*
 * 브랜드 상단 페이지 공통 스타일 (brand_*.html)
 * 모든 brand_*.html 파일이 공유하는 단일 소스.
 * 브랜드별로 다른 값(히어로 폴백 배경색)은 각 파일의
 * .ml-brand-hero 엘리먼트에 --ml-hero-fallback-bg 커스텀 프로퍼티로 지정한다.
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #fff; color: #111; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ══════════════════════════════════════
   배너매니저(dfbm) 연동 공통 규칙
   df-banner-code 그룹 1개에 히어로(배너[0])와
   우측 카드(배너[1+])가 함께 등록되는 구조를 전제로,
   각 클론에 부여된 df-idx-{index} 클래스로 노출 영역을 나눈다.
══════════════════════════════════════ */
[df-banner-code][hidden] { display:none !important }
.ml-hero-bm .ml-brand-hero:not(.df-idx-0) { display:none }
.ml-desc-bm .ml-desc:not(.df-idx-0) { display:none }
.ml-desc-bm .ml-desc { white-space:pre-line }
#ml-track .ml-content-card.df-idx-0 { display:none }

/* 히어로 자리 예약: 배너매니저가 채우기 전에도 최종 높이를 미리 확보해 CLS를 방지한다.
   [df-banner-code][hidden]의 display:none을 이 컨테이너에 한해 되돌리고, 내용만 숨긴다. */
.ml-hero-bm[hidden] {
  display: block !important;
  height: 500px;
  overflow: hidden;
  background: var(--ml-hero-fallback-bg, #ece8e2);
}
.ml-hero-bm[hidden] > * { visibility: hidden; }
@media (max-width: 767px) {
  .ml-hero-bm[hidden] { height: 50svh; }
}

/* ══════════════════════════════════════
   ① 풀 와이드 단일 이미지 + 오버레이
══════════════════════════════════════ */
.ml-brand-hero {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: var(--ml-hero-fallback-bg, #ece8e2);
}
.ml-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.ml-hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 55%, transparent 100%);
  padding: 64px var(--spacing-page-side, 20px) 28px;
}
.ml-overlay-category {
  font-size: var(--text-label-lg); font-weight: var(--font-weight-medium); text-transform: uppercase;
  color: rgba(255,255,255,1); margin-bottom: 8px;
}
.ml-overlay-name {
  font-size: clamp(32px, 4vw, 44px); font-weight: 600; color: #fff;
  line-height: 1.0; margin-bottom: 0;
}
.ml-overlay-tagline {
  font-size: 17px; font-weight: 400;
  color: rgba(255,255,255,1); line-height: 1.5;
}

/* ══════════════════════════════════════
   ② 2열 정보 바
══════════════════════════════════════ */
.ml-brand-info {
  display: grid;
  grid-template-columns: 1fr min(37.5%, 600px);
  border-bottom: 1px solid var(--color-border-default);
}

.ml-info-col {
  padding: var(--primitive-spacing-4) var(--spacing-page-side);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ml-info-col:first-child {
  /* border-right: 1px solid #d8d8d8; */
}

.ml-info-section {
  max-width: 880px;
}

.ml-info-section + .ml-info-section {
  margin-top: 40px;
}
.ml-info-section.-reads {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ml-swiper-nav {
  margin-bottom: 16px;
}

.ml-info-col-header {
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: 0;
}

.ml-info-label {
  font-size: var(--text-label-md, 13.6px); font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase; color: #949494;
}

/* ── About ── */
.ml-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--primitive-spacing-4, 16px); }
.ml-tag {
  display: inline-flex; align-items: center;
  padding: var(--primitive-spacing-1, 4px) var(--primitive-spacing-3, 12px); border-radius: 0;
  font-size: var(--text-label-lg, 14px); font-weight: var(--font-weight-medium, 500); white-space: nowrap;
}
.ml-desc { font-size: var(--text-body-sm); font-weight: var(--font-weight-regular, 400); color: #666; line-height: var(--primitive-font-line-height-relaxed, 1.6); word-break: keep-all; }

/* ── Promotion Block ── */
.ml-promo-block {
  padding: var(--primitive-spacing-5, 20px) var(--spacing-page-side, 20px); border-radius: 0;
  text-decoration: none; color: inherit; display: block;
  transition: filter .15s;
  max-width: 960px;
}
.ml-promo-block:hover { filter: brightness(.95); }
.ml-promo-block-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.ml-promo-indicator { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: none; }
.ml-promo-label {
  font-size: var(--text-label-lg, 14px); font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase; opacity: .6;
}
.ml-promo-period { margin-left: auto; font-size: var(--text-label-lg, 14px); opacity: .5; }
.ml-promo-block-body { margin-top: 4px; }
.ml-promo-title { font-size: var(--text-headline-sm, 20px); font-weight: var(--font-weight-medium, 500); line-height: var(--primitive-font-line-height-snug, 1.3); margin-bottom: 14px; }
.ml-promo-cta {
  display: inline-block; font-size: 14px; font-weight: 600; opacity: .7;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.ml-promo-chevron { display: none; }

/* ── Reads 스와이퍼 ── */
.ml-swiper-nav { display: flex; gap: 4px; }
.ml-swiper-btn {
  width: var(--mvl-renew-nav-size, 40px); height: var(--mvl-renew-nav-size, 40px); border-radius: 0;
  border: none; background: var(--mvl-renew-nav-bg, rgba(0,0,0,.35));
  cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ml-swiper-btn .icon { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.ml-swiper-btn:hover  { background: var(--mvl-renew-nav-bg-hover, rgba(0,0,0,.55)); }
.ml-swiper-btn:disabled { opacity: 0; cursor: default; pointer-events: none; }

/* 슬라이드가 하나도 없으면 네비 버튼을 숨긴다.
   ① :has() — 트랙에 실제 카드가 없는 경우(배너매니저 미노출 / df-idx-0 히어로 배너만 존재 /
      아직 치환되지 않은 원본 템플릿만 존재). DOM 변화에 실시간 반응하므로
      배너매니저의 비동기 삽입에도 자동으로 다시 노출된다.
   ② [hidden] — :has() 미지원 브라우저용. brand-top.js가 카드 수집 실패 시 부여한다. */
.ml-info-section.-reads:not(:has(#ml-track .ml-content-card:not(.df-idx-0):not([class*="{"]))) .ml-swiper-nav { display: none; }
.ml-swiper-nav[hidden] { display: none; }

/* 우측 프로모션 스와이퍼: 카드 이미지 위 오버레이 네비 (skin68 정렬) */
.ml-info-section.-reads { position: relative; container-type: inline-size; }
.ml-info-section.-reads .ml-info-col-header {
  position: absolute; top: 28.125cqi; left: 0; right: 0;
  margin: 0; transform: translateY(-50%); z-index: 5; pointer-events: none;
}
.ml-info-section.-reads .ml-swiper-nav {
  justify-content: space-between; gap: 0; margin: 0; width: 100%;
}
.ml-info-section.-reads .ml-swiper-btn { pointer-events: auto; }

.ml-content-swiper { overflow: hidden; width: 100%; }
.ml-content-track {
  display: flex;
  width: 100%;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.ml-content-card { flex: 0 0 100%; min-width: 0; text-decoration: none; color: inherit; margin-bottom: var(--primitive-spacing-5);}
.ml-content-card-thumb {
  width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 0;
  background: #ece8e2; margin-bottom: 12px;
  transition: opacity .2s;
}
.ml-content-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.ml-content-card:hover .ml-content-card-thumb { opacity: .88; }
.ml-content-card-category {
  font-size: var(--text-label-md, 14px); font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase; color: #949494; margin-bottom: var(--primitive-spacing-1);
}
.ml-content-card-title {
  font-size: var(--text-body-sm); font-weight: var(--font-weight-medium, 500); color: #111; line-height: var(--primitive-font-line-height-wide, 1.4);
  transition: opacity .15s;
}
.ml-content-card:hover .ml-content-card-title { opacity: .65; }

.ml-ls-slide { flex: 0 0 100%; min-width: 0; }

.ml-sw-dots { display: flex; gap: 5px; align-items: center; margin-top: 14px; display: none; }
.ml-sw-dot {
  width: 5px; height: 5px; border-radius: 0; background: #ddd;
  cursor: pointer; transition: background .2s, transform .2s;
}
.ml-sw-dot.active { background: #1a1a1a; transform: scale(1.2); }

.ml-ls-dots { display: flex; gap: 6px; align-items: center; margin-top: 12px; justify-content: center; }
.ml-ls-dot {
  width: 5px; height: 5px; border-radius: 0; background: #ddd;
  cursor: pointer; transition: background .2s, transform .2s;
}
.ml-ls-dot.active { background: #1a1a1a; transform: scale(1.2); }

/* ══════════════════════════════════════
   ③ 상품 영역 (목업)
══════════════════════════════════════ */
.ml-products-section { padding: 24px 0 60px; }
.ml-chips-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 0 0 20px; overflow-x: auto; scrollbar-width: none;
}
.ml-chips-bar::-webkit-scrollbar { display: none; }
.ml-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 0;
  border: 1.5px solid #e0e0e0; font-size: 12px; font-weight: 500;
  white-space: nowrap; cursor: pointer; background: #fff; color: #666;
  transition: all .15s;
}
.ml-chip:hover, .ml-chip.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.ml-product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: #ebebeb; border-top: 1px solid #ebebeb;
}
.ml-product-item { background: #fff; padding: 0 0 40px; cursor: pointer; }
.ml-product-item:hover .ml-product-thumb { opacity: .88; }
.ml-product-thumb {
  width: 100%; aspect-ratio: 1; background: #f2efea;
  margin-bottom: var(--mvl-renew-product-card-gap-img-text, 24px); overflow: hidden; transition: opacity .2s;
}
.ml-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ml-product-info { padding: 0 16px; }
.ml-product-brand { font-size: var(--mvl-renew-product-brand-size, 14px); font-weight: var(--font-weight-regular, 400); color: #949494; margin-bottom: var(--mvl-renew-product-card-gap-brand-name, 4px); }
.ml-product-name  { font-size: var(--mvl-renew-product-name-size, 14px); font-weight: var(--font-weight-medium, 500); color: #111; line-height: var(--mvl-renew-product-lh-14, 1.2); margin-bottom: var(--mvl-renew-product-card-gap-name-price, 24px); }
.ml-product-price { font-size: var(--mvl-renew-product-price-size, 14px); font-weight: var(--font-weight-regular, 400); color: #111; }
.ml-product-price-old { font-size: var(--mvl-renew-product-price-original-size, 12px); color: #949494; text-decoration: line-through; margin-right: 4px; }
.ml-product-discount { font-size: var(--mvl-renew-product-benefit-size, 12px); font-weight: var(--font-weight-regular, 400); color: #d44; margin-right: 4px; }

.icon { width: 18px; height: 18px; object-fit: contain; }
.icon.icoArrowLeft { transform: rotate(180deg); }

/* ══════════════════════════════════════
   반응형
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .ml-overlay-name { font-size: 38px; }
}
@media (max-width: 767px) {
  .ml-brand-hero      { height: 50svh; }
  .ml-hero-overlay    { padding: 44px var(--spacing-page-side, 16px) 20px; }
  .ml-overlay-category { font-size: var(--text-label-lg, 12px); }
  .ml-overlay-name    { font-size: 28px; margin-bottom: 0; }
  .ml-overlay-tagline { font-size: 15px; }
  .ml-desc            { font-size: var(--text-body-md, 14px); }
  .ml-info-col-header { margin-bottom: 0; }
  .ml-swiper-nav      { margin-bottom: 12px; }
  .ml-swiper-btn      { width: var(--mvl-renew-nav-size, 36px); height: var(--mvl-renew-nav-size, 36px); }

  .ml-promo-block-head { margin-bottom: 0; margin-top: 8px; }
  .ml-promo-block { padding: var(--primitive-spacing-4, 16px) var(--spacing-page-side, 16px); display: flex; flex-direction: column; }
  .ml-promo-block-body { order: -1; }
  .ml-promo-block-head { order: 0; }
  .ml-promo-indicator { display: none; }
  .ml-promo-label { font-size: var(--text-label-lg, 12px); }
  .ml-promo-period { margin-left: 0; font-size: var(--text-label-lg, 12px); }
  .ml-promo-block-body { display: flex; align-items: center; justify-content: space-between; margin-top: 0; }
  .ml-promo-title { font-size: var(--text-headline-sm, 15.6px); margin-bottom: 0; }
  .ml-promo-cta { display: none; }
  .ml-promo-chevron { display: block; width: 16px; height: 16px; opacity: .4; flex-shrink: 0; }
  .ml-promo-chevron img { width: 100%; height: 100%; object-fit: contain; }

  .ml-brand-info      { grid-template-columns: 1fr; margin-bottom: 20px; border-bottom: none;}
  .ml-info-col        { padding: calc(var(--spacing-page-side) - 4px); }
  .ml-info-col:first-child { border-right: none; border-bottom: 1px solid var(--color-border-default); padding-bottom: var(--primitive-spacing-8); }
  .ml-content-card-category { font-size: var(--text-label-lg, 12px); }
  .ml-content-card-title { font-size: var(--text-body-md, 14px); }
  .ml-product-grid    { grid-template-columns: repeat(2, 1fr); }
  .ml-product-brand   { font-size: var(--mvl-renew-product-brand-size, 12px); }
  .ml-product-name    { font-size: var(--mvl-renew-product-name-size, 12px); margin-bottom: var(--mvl-renew-product-card-gap-name-price, 16px); }
  .ml-product-price   { font-size: var(--mvl-renew-product-price-size, 11px); }
  .ml-product-price-old { font-size: var(--mvl-renew-product-price-original-size, 11px); }
  .ml-product-discount { font-size: var(--mvl-renew-product-benefit-size, 10px); }
  .ml-product-item    { padding: 0 0 16px; }
}