/* BASIC css start */
 .item_container .item {
    width: 100% !important;    margin-bottom: 0!important;
}

.promotion .item {
    width: 100%;
    margin-bottom: 0px;
}


/* ===== 히어로 수채(WebGL) — 블프 블랙 (10-19) ===== */
.slide-title{ position:relative; }
.hero-ink{ position:relative; width:100%; padding-top:36.46%;   /* 1920 x 700 */
  overflow:hidden; pointer-events:none;
  background:radial-gradient(120% 90% at 60% 45%, #4a4a4a 0%, #1c1c1c 55%, #050505 100%); }   /* WebGL 이 안 되면 이 그라디언트만 보인다 */
.hero-ink canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* 아래 검정 진열과 이음새 없이 + 흰 글자 자리(왼쪽) 살짝 눌러 두기 */
.hero-ink::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, #0B0B0C 0%, rgba(11,11,12,0) 22%),
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 62%); }
.intro_container{ z-index:3; }
@media (max-width:767px){
  .hero-ink{ padding-top:0; height:80vh; }
  .hero .slide-title{ height:80vh; }
  .hero .intro_container{ height:80vh; }
  .hero-ink::after{ background:linear-gradient(0deg, #0B0B0C 0%, rgba(11,11,12,.55) 18%, rgba(0,0,0,.2) 40%, rgba(0,0,0,0) 62%); }
}

/* ===== 랭킹 순위 배지 (TOP 10) ===== */
#ranking .item_container{ counter-reset:rank; }
#ranking .item{ position:relative; counter-increment:rank; }
#ranking .item::before{ content:counter(rank); position:absolute; top:6px; left:6px; z-index:5; min-width:24px; height:24px; padding:0 6px;
  border-radius:3px; background:#111; color:#fff; font-size:12px; font-weight:700; line-height:24px; text-align:center; }
#ranking .item:nth-child(-n+3)::before{ background:#2f6bed; }

.intro_container {     padding: 20px 0;display: flex;flex-direction: column;align-items: flex-start;gap: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -164px); }
.intro_container .intro_t1 {background: #fff;color: #000;font-weight: 600;padding: 3px 8px;font-size: 14px;}
.intro_container .intro_t2 {font-size: 50px;color: #fff;}
.intro_container .intro_t3 {font-size: 14px;color: rgba(255,255,255,.85);}

/* 모바일: 히어로 풀높이(90vh) 배너 + 텍스트 하단 정렬 (PC는 기본값 유지) */
@media (max-width:767px){
  .slide-title{ height:90vh; overflow:hidden; }
  .intro_container{ padding:20px; gap:0; left:auto; top:0; height:90vh; transform:none; justify-content:flex-end; }
  .intro_container .intro_t2{ font-size:40px; }
}

/* 미드시즌: 카테고리데이 4-카테고리 패널(활성만 노출) + PC(768+) 1줄 */
.cat-panel{ display:none; }
.cat-panel.on{ display:block; }

/* 기간 한정 노출 섹션 (장마템/바캉스템) — 기간 밖이면 숨김 */
.season-gate{ display:none; }
.season-gate.on{ display:block; }

/* 섹션 타이틀 옆 강조 플래그 */
.sec-title .flag{ margin-left:8px; font-size:12px; font-weight:700; color:#fe3e19; vertical-align:middle; }

@media (min-width:768px){
  #catday .item_container.custom_scroll { grid-template-rows:auto;overflow-x:hidden; }

  #limited .item_container.custom_scroll,
  #best .item_container.custom_scroll,
  #jangma .item_container.custom_scroll,
  #vacance .item_container.custom_scroll,
  #openrun .item_container.custom_scroll,
  #offseason .item_container.custom_scroll{ grid-template-rows:repeat(2,auto);overflow-x:hidden; }
}

#hdWrap, #headerBanner, #header {transition: opacity 0.5s ease;opacity: 1;}
#hdWrap.hide, #headerBanner.hide, #header.hide {opacity: 0;pointer-events: none;}


 :root{
    --wf-max: 1180px;
    --wf-pad: clamp(16px, 4vw, 28px);
    --ph:#f5f6f8; --ph-b:#e5e7eb; --line:#ececee;
    --ink:#111; --mut:#71767e; --tag:#9aa0a8; --bg:#fff;
    --on:#1f8a5b;
    --bar:#eceef1; --bar-dk:#dcdee2;
  }
  *{box-sizing:border-box}
  html{ scroll-behavior:smooth; }
  [id]{ scroll-margin-top:64px; }
  .promotion{ margin:0; background:var(--bg); color:var(--ink);    padding-bottom: 100px;
    font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Noto Sans KR',sans-serif; -webkit-font-smoothing:antialiased; }
  .container{ width:100%; max-width:var(--wf-max); margin:0 auto; padding-inline:var(--wf-pad); }

  /* 플레이스홀더 */
  .ph{ background:var(--ph); border:1px solid var(--ph-b); border-radius:6px; display:flex; align-items:center; justify-content:center;
    color:var(--mut); font-size:clamp(11px,1.3vw,13px); font-weight:600; text-align:center; padding:8px; }
  .ph-img{ background-image:
      linear-gradient(to top right, transparent calc(50% - .8px), var(--ph-b) calc(50% - .8px), var(--ph-b) calc(50% + .8px), transparent calc(50% + .8px)),
      linear-gradient(to top left,  transparent calc(50% - .8px), var(--ph-b) calc(50% - .8px), var(--ph-b) calc(50% + .8px), transparent calc(50% + .8px)); }
  .bar{ background:var(--bar); border-radius:4px; height:12px; }
  .bar.sm{ height:9px } .bar.dk{ background:var(--bar-dk) }
  .bar.w30{width:30%} .bar.w40{width:40%} .bar.w55{width:55%} .bar.w70{width:70%} .bar.w85{width:85%}

  /* 섹션 */
  section{ padding-block: clamp(26px,4.5vw,46px); }
  section + section{ border-top:1px solid var(--line); }
  .wf-tag{ display:inline-block; font-size:10px; font-weight:600; letter-spacing:.12em; color:var(--tag);
    border:1px solid var(--line); border-radius:999px; padding:3px 9px; margin-bottom:12px; }
  .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:clamp(14px,2.2vw,22px); }
  .sec-title{ font-size:clamp(18px,2.4vw,25px); font-weight:600; }
  .sec-sub{ font-size:clamp(11px,1.4vw,13px); color:var(--mut); margin-top:6px; font-weight:600; }
  .more{ font-size:clamp(11px,1.3vw,13px); color:var(--mut); font-weight:700; white-space:nowrap; }
  .sort{ font-size:11px; font-weight:700; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }

  /* 가로 스크롤 공통 */
  .scroller{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .scroller::-webkit-scrollbar{ display:none }
  .dragscroll{ cursor:grab }

  /* HERO */
  .hero{ padding:0 }
  .hero .ph-img{ width:100%; border-radius:0; border-inline:0; border-top:0; aspect-ratio:3/4; font-size:clamp(13px,1.8vw,16px); }
  @media(min-width:768px){ .hero .ph-img{ aspect-ratio:16/7 } }

  /* NAV sticky */
  .navbar{ position:sticky; top:0; z-index:20; background:#fff; transition:box-shadow .2s ease; }
  .navbar.scrolled{ box-shadow:0 2px 10px rgba(0,0,0,.08); }
  .nav-scroll{ display:flex; gap:20px; padding-block:0; }
  .chip{ flex:0 0 auto; background:none; border:0; border-radius:0; border-bottom:2px solid transparent;
    height:48px; padding:0 2px; display:flex; align-items:center; font-size:13px; font-weight:700;
    color:#555; text-decoration:none; user-select:none; cursor:pointer; }
  .chip.on{ color:#111; border-bottom-color:#111; }

  /* 날짜칩 */
  .dates{ display:flex; gap:8px; padding-bottom:4px; margin-bottom:clamp(14px,2vw,20px); }
  .date{ flex:0 0 auto; height:34px;    line-height: 34px; padding:0 14px; border-radius:999px; border:1px solid #e0e0e0; background:#f2f2f2;
    color:#555; font-size:12px; font-weight:700; display:flex; align-items:center; gap:5px; user-select:none; white-space:nowrap; cursor:pointer; }
  .date.on{ background:#333; color:#fff; border-color:#333; }
  .date .caret{ font-size:9px; opacity:.7 }

  /* 쿠폰 다운로드 */
  .coupons{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.6vw,16px); }
  @media(min-width:768px){ .coupons{ grid-template-columns:repeat(4,1fr) } }
  .cpn{ position:relative; border:1px dashed var(--ph-b); border-radius:12px; padding:18px; min-height:152px;
    display:flex; flex-direction:column; gap:10px; background:#fff; }
  .cpn .pct{ font-size:clamp(24px,3.4vw,34px); font-weight:600; line-height:1; }
  .cpn .cname{ font-size:13px; font-weight:700; color:var(--mut); line-height:1.45; }
  .cpn .dl{ margin-top:auto; height:40px; border-radius:8px; background:var(--ph); border:1px solid var(--ph-b);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--mut); text-decoration:none; }
  .cpn .st{ position:absolute; top:14px; right:14px; font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; background:var(--ph); color:var(--mut); }
  .cpn .st.live{ background:rgba(31,138,91,.12); color:var(--on); }
  .cpn.off{ opacity:.5 }

  .cp_wrap {display: flex;justify-content: space-between;}
.cp_down a {display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; cursor: pointer;}
.dashed {z-index: 1; height: 100%; border-left: 1px dashed rgb(0, 0, 0); opacity: 0.2; border-top-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0);}
.cp_down_w {display: flex;gap: 15px;}

.paybenefit_wrap {padding-top: 30px;}
.paybenefit {background: #f0f5fa;padding:10px 15px; border-radius: 3px;    color: #222;   width: 100%;}
.paybenefit img { width: 50px;    float: right;margin-top: -46px;}
.paybenefit_info {}
.paybenefit_info div:nth-child(1) {font-weight: 700;font-size: 14px;line-height: 24px;}
.paybenefit_info div .cunt {    background: #353535;color: #fff;padding: 2px 7px;border-radius: 4px;margin-left: 10px;font-size: 12px;vertical-align:bottom;}
.paybenefit_info div {font-size: 14px;font-family: 'Pretendard', "Apple SD Gothic Neo";color: #222;line-height: 1.5;}


  .item_txt2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

  /* 24시간 타이머 */
  .cd-pill{ display:inline-flex; align-items:center; gap:9px; background:#2f6bed; border:1px solid #2f6bed; color:#fff; border-radius:999px;
    padding:9px 16px; font-weight:600; font-variant-numeric:tabular-nums; font-size:clamp(15px,2vw,19px); }
  .cd-pill .cd-label{ font-size:11px; opacity:.7; font-weight:700; letter-spacing:.04em; color:#fff; }
  .cd-pill .cd{ color:#fff; }

  /* 원데이특가 단일상품 */
  .oneday{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.4vw,28px); align-items:center; }
  @media(max-width:680px){ .oneday{ grid-template-columns:1fr } }
  .oneday .ph-img{ width:100%; aspect-ratio:1/1; }
  .oneday .info{ display:flex; flex-direction:column; gap:14px; }
  .badge-ph{ width:120px; height:30px; border-radius:6px; background:var(--ph); border:1px solid var(--ph-b);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--mut); }
  .btn-ph{ height:46px; border-radius:8px; background:var(--ph); border:1px solid var(--ph-b);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--mut); margin-top:4px; }

  /* 상품 그리드 */
  .products{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.6vw,18px); }
  @media(min-width:768px){ .products{ grid-template-columns:repeat(4,1fr) } }
  .card{ display:flex; flex-direction:column; gap:9px; }
  .card .ph-img{ width:100%; aspect-ratio:1/1; }
  .meta{ display:flex; flex-direction:column; gap:6px; padding-top:2px; }

  /* ── 진열부: 2줄 가로 스크롤 (모바일 3.2 / PC 5단 + 좌우버튼) ── */
  .dealgrid-wrap{ position:relative; }
  .item_container.custom_scroll{ --g:12px; display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto);
    grid-auto-columns:calc((100% - 3*var(--g))/3.2); gap:30px var(--g); overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px; }
  .item_container.custom_scroll::-webkit-scrollbar{ display:none; }
  .item_container.custom_scroll::after{ display:none; }
  @media(min-width:768px){ .item_container.custom_scroll{ --g:5px; grid-auto-columns:calc((100% - 4*var(--g))/5); } }
  .item_more{ grid-row:1 / -1; align-self:stretch; display:flex; align-items:center; justify-content:center; text-align:center;
    border:1px solid var(--ph-b); border-radius:3px; color:var(--mut); font-size:12px; font-weight:700; text-decoration:none; padding:10px 16px;
    background: #f5f6f8;margin-top: 40px; }
  .rail-arrow{ display:none; }
  @media(min-width:768px){
    .rail-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:42px; height:42px; border-radius:999px;
      background:#fff; border:2px solid #e5e7eb; box-shadow:0 3px 12px rgba(0,0,0,.12); cursor:pointer;
      display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; color:var(--ink); padding-bottom:2px; }
    .rail-arrow.prev{ left:-40px } .rail-arrow.next{ right:-40px }
    .rail-arrow:hover{ background:#f1f2f4; }
    .rail-arrow.disabled{ background:#eee; color:#878787; border-color:#eee; box-shadow:none; cursor:default; pointer-events:none; }
    .rail-arrow.disabled:hover{ background:#eee; }
  }

  /* ── product_simple 카드 (다크 테마) ── */
  .item{ min-width:0; }
  .item .simple{ display:block; color:var(--ink); text-decoration:none; }
  .item .thumbnail{ position:relative; width:100%; aspect-ratio:1/1; border-radius:3px; overflow:hidden; background:var(--ph); }
  .item .thumbnail img{ width:100%; height:100%; object-fit:cover; display:block; }
  .item .thumbnail_swiper, .item .thumbnail_swiper .swiper-wrapper, .item .thumbnail_swiper .swiper-slide{ width:100%; height:100%; }
  .item .thumb-swiper-button{ display:none; }
  .item .icon_wish{ position:absolute; top:8px; right:8px; z-index:2; cursor:pointer; line-height:0; }
  .item .icon_wish img{ width:24px; height:24px; }
  .item .icon_wish .my-wish-list img + img{ display:none; }   /* 기본: 빈 하트만 노출 */
  .item .icons{ position:absolute; left:7px; top:7px; display:flex; gap:4px; z-index:2; }
  .item .icons img{ height:18px; }
  .item .sale_percent{   color:#fe3e19; font-weight:600;
    font-size:clamp(13px,1.6vw,16px); }
  .item .sale_percent .unit{ font-size:.7em; }
  .item .item_txt{ padding-top:0px;    flex-direction: column; }
  .item_txta {
    display: flex;
    gap: 15px;
    align-items: center;
}
  .item .item_txt .name{ margin:0; font-size:13px; line-height:1.35; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .item .item_txt .name{ margin-bottom:0 !important; }
  .item .item_price{ margin-top:5px; display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
  .item .item_price .strike{ color:var(--mut); text-decoration:line-through; font-size:12px; }
  .item .item_price .price{ color:#111; font-weight:600; font-size:14px; }
  .item .item_price .unit{ font-size:.78em; font-weight:400; opacity:.8; display:none; }
  .item .review{ margin-top:5px; font-size:11px; color:var(--mut); }

  /* 날짜별 진열 패널 — 활성 날짜만 노출 */
  .day-panel{ display:none; }
  .day-panel.on{ display:block; }
  .oneday-single{ max-width:340px; }

  /* 원데이특가 섹션 배경 강조 */
  #oneday{ background:#eef3ff; border-top:0; border-radius:10px; }
  #catday{ border-top:0; }

  /* 원데이특가: 좌 썸네일 / 우 상품정보·할인·가격·구매버튼 (히어로 단일상품, #oneday 한정) */
  #oneday .oneday-single{ max-width:50%; }
  #oneday .oneday-single .item{ width:100%;    display: flex;
    gap: 5px;}
  #oneday .oneday-single .simple{ display:flex; gap:clamp(15px,3vw,15px); align-items:stretch; }
  #oneday .oneday-single .thumbnail{ flex:1 1 0; min-width:100%; aspect-ratio:5/3;align-self: flex-start; }
  /* promotion 이미지가 빈 div 2겹 안에 있어 object-fit가 안 먹음 → wrapper 제거(display:contents)해 img가 thumbnail에 직접 차게 */
  #oneday .oneday-single .thumbnail > div,
  #oneday .oneday-single .thumbnail > div > div { display:contents; }
  /* 세로 크롭 위치: 값↑ = 이미지 위로 올라가 윗부분이 더 잘림 (0%=아래만 잘림, 50%=위아래 균등) */
  #oneday .oneday-single .thumbnail img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 50%; }
  #oneday .oneday-single .item_txt{ flex:1 1 0; min-width:100%;  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
    background: var(--ph);
    border: 1px solid var(--ph-b);
    border-radius: 3px;
    padding: 15px;
    height: auto;     justify-content: center;}
  #oneday .oneday-single .item_txt .name{ font-size:clamp(14px,2.2vw,14px); -webkit-line-clamp:3; }
  #oneday .oneday-single .item_price{ margin-top:0; align-items:baseline; }
  #oneday .oneday-single .item_price .price{ font-size:clamp(16px,2.6vw,16px); }
  #oneday .oneday-single .item_price .strike{ font-size:13px; }
  #oneday .oneday-single .sale_percent{ font-size:clamp(16px,2.4vw,16px); font-weight:700; }
.thumbnail2 img {
    width: 60px;    border-radius: 3px;
}

  /* 원데이특가 모바일: 위아래로 쌓기 (썸네일 위 / 정보·버튼 아래), PC는 50:50 가로 유지 */
  @media (max-width:767px){
    #oneday .oneday-single{ max-width:none; }
    #oneday .oneday-single .item{ flex-direction:column; align-items:stretch; gap:14px; }
    #oneday .oneday-single .thumbnail{ flex:none; width:100%; }
    #oneday .oneday-single .item_txt{ flex:none; width:100%; }
    #oneday .oneday-single .item_txt::after{ width:100%; }
    .paybenefit_info {display:flex; gap:15px;align-items: center;}
    .cp_down a {    flex-direction: row;}
    /* 모바일 카드/그리드 촘촘하게 */
    .item_container.custom_scroll{ --g:5px; gap:20px var(--g); }
    .item .item_txt{ margin:5px 0; }
    .item .item_txt .name{ margin-bottom:0; }
    .item .item_price{ margin-top:0; }
    #oneday .oneday-single .item_txt{ gap:5px; }
  }
  .cat-coupon{ display: none;
    align-items: center;
    justify-content: center;
    height: 40px;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: #eef3ff;
    padding: 10px 16px;
    border: 1px solid #bcd2fb;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(47,107,237,.10);
    transition: border-color .15s, box-shadow .15s; }
  .cat-coupon div {font-size: 13px; font-weight: 700; }
  .cat-coupon svg path{ fill:#2f6bed; }
  .cat-coupon:hover{ border-color:#2f6bed; box-shadow:0 4px 14px rgba(47,107,237,.20); }
  .cat-coupon.on{ display:inline-flex; }

  /* 오늘의 카테고리 라벨 */
  .today-cat{ display:flex; align-items:center; gap:10px; margin-bottom:clamp(12px,2vw,18px); flex-wrap:wrap; }
  .today-cat .k{ font-size:12px; font-weight:600; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
  .today-cat .v{ font-size:clamp(15px,2.2vw,20px); font-weight:600; }




  .item_txt .cpn {
    flex-direction: row;
    min-height: auto;
    width: 100%;
    justify-content: space-between;
    border-radius: 3px;
}
.flex {
    display: flex;
    gap: 20px;
}

/* ===================================================================
   사뿐위크 진열 리디자인 v3 (260921) — 이 블록만 지우면 이전 상태로 복귀
   =================================================================== */
:root{ --sw-band:#f5f6f8; --sw-ink:#111; --sw-sub:#6b7079; --sw-accent:#2f6bed; --sw-sale:#fe3e19; }

/* 섹션 리듬: 박스·구분선 없이 흰색 / 연회색 풀폭 띠 교차 */
.promotion section{ padding-block:clamp(44px,6vw,80px); }
.promotion section.hero{ padding-block:0; }                        /* 히어로는 여백 없이 네비에 바로 붙음 */
.promotion .navbar + section{ padding-top:clamp(28px,3.5vw,44px); }  /* 네비 바로 아래 첫 섹션 */
.promotion section + section{ border-top:0; }
#catday, #new26fw, #offseason{ background:var(--sw-band); box-shadow:0 0 0 100vmax var(--sw-band); clip-path:inset(0 -100vmax); }
#oneday{ background:none; border-radius:0; margin-top:0; }

/* 섹션 헤더 + 우측 '전체 상품 보기' */
.sec-head{ align-items:flex-end; margin-bottom:clamp(16px,2.2vw,24px); }
.sec-title{ font-size:clamp(20px,2.4vw,28px); font-weight:700; letter-spacing:-.03em; line-height:1.25; color:var(--sw-ink); }
.sec-sub{ font-size:clamp(13px,1.3vw,15px); font-weight:400; color:var(--sw-sub); margin-top:6px; letter-spacing:-.01em; }
.sec-more{ flex:0 0 auto; font-size:13px; color:#444; text-decoration:none; white-space:nowrap; padding-bottom:3px; }
.sec-more::after{ content:"›"; margin-left:4px; font-size:15px; }
.sec-more:hover{ color:#000; }
.rail-top{ display:flex; justify-content:flex-end; margin:0 0 10px; }

/* 상단 네비 탭 */
.chip{ font-size:14px; font-weight:500; color:#8a8f98; height:50px; }
.chip.on{ font-weight:700; color:#111; }
@media(min-width:768px){ .nav-scroll{ gap:28px; } .chip{ font-size:15px; } }

/* 날짜 · 카테고리 칩 */
.dates{ gap:6px; margin-bottom:clamp(16px,2vw,22px); }
.date{ height:32px; line-height:32px; padding:0 13px; border:0; background:#eef0f3; color:#555; font-size:13px; font-weight:500; }
#catday .date{ background:#fff; }
.date.on, #catday .date.on{ background:#111; color:#fff; font-weight:600; }

/* 타이머: 알약 → 텍스트 */
.cd-pill{ flex:0 0 auto; white-space:nowrap; background:none; border:0; padding:0 0 3px; border-radius:0; gap:8px; }
.cd-pill::before{ content:"종료까지"; font-size:13px; font-weight:500; color:var(--sw-sub); }
.cd-pill .cd{ color:var(--sw-sale); font-size:clamp(16px,1.8vw,20px); font-weight:700; }
/* 모바일: 타이머 섹션 헤더 = [타이틀 ↔ 카운트] 한 줄 + 서브타이틀 전체폭 */
@media(max-width:767px){
  #oneday .sec-head, #catday .sec-head, #openrun .sec-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; }
  #oneday .sec-head > div:first-child, #catday .sec-head > div:first-child, #openrun .sec-head > div:first-child{ display:contents; }
  #oneday .sec-title, #catday .sec-title, #openrun .sec-title{ grid-column:1; grid-row:1; }
  #oneday .sec-head .cd-pill, #catday .sec-head .cd-pill, #openrun .sec-head .cd-pill{ grid-column:2; grid-row:1; padding:0; }
  #oneday .sec-sub, #catday .sec-sub, #openrun .sec-sub{ grid-column:1 / -1; grid-row:2; }
}

/* 오늘의 카테고리 + 카테고리 쿠폰 카드 */
.today-cat{ gap:10px 14px; margin-bottom:16px; align-items:center; }
.today-cat .k{ border:0; padding:0; font-size:13px; font-weight:500; color:var(--sw-sub); }
.today-cat .v{ font-size:clamp(16px,1.8vw,20px); font-weight:700; }
#catCoupons{ margin-left:0; }
/* 카테고리데이 PC: 차수 버튼(좌) ↔ 쿠폰(우) 한 줄 */
@media(min-width:768px){
  .cat-bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
  .cat-bar .dates{ margin-bottom:0; min-width:0; flex:1 1 auto; }
  .cat-bar .today-cat{ margin:0; flex:0 0 auto; }
}
.cat-coupon{ display:none; align-items:center; gap:10px; height:auto; padding:7px 12px 7px 14px; border:1px solid #dfe3ea; border-radius:8px; background:#fff; color:#111; text-decoration:none; box-shadow:none; white-space:nowrap; }
.cat-coupon.on{ display:inline-flex; }
.cat-coupon:hover{ border-color:#111; box-shadow:none; }
.cc-pct{ font-size:19px; font-weight:700; color:var(--sw-accent); letter-spacing:-.02em; line-height:1; }
.cc-txt{ display:flex; flex-direction:column; gap:1px; line-height:1.3; }
.cc-txt b{ font-size:12.5px; font-weight:600; color:#111; }
.cc-txt em{ font-style:normal; font-size:11.5px; color:var(--sw-sub); }
.cc-btn{ margin-left:6px; width:20px; height:20px; flex:0 0 20px; background:none; color:#111; display:inline-flex; align-items:center; justify-content:center; transition:transform .15s ease; }
.cat-coupon:hover .cc-btn{ transform:translateY(1px); }
@media(max-width:767px){ #catCoupons{ margin-left:0; flex:1 0 100%; } .cat-coupon.on{ display:flex; } .cc-btn{ margin-left:auto; } }


/* 진열 카드: 촘촘하되 정리된 레일 (MO 3.2칸 / PC 5칸) */
.item_container.custom_scroll{ --g:8px; gap:26px var(--g); grid-auto-columns:calc((100% - 3*var(--g))/3.2); }
@media(min-width:768px){ .item_container.custom_scroll{ --g:14px; gap:40px var(--g); grid-auto-columns:calc((100% - 4*var(--g))/5); } }
.item .thumbnail{ border-radius:4px; }
.item .item_txt{ margin:10px 0 0; }
.item .item_txt .name{ font-size:12.5px; font-weight:400; color:#333; line-height:1.4; -webkit-line-clamp:1; }
.item .item_price{ margin-top:4px; gap:5px; align-items:baseline; }
.item .sale_percent{ font-size:14px; font-weight:700; color:var(--sw-sale); }
.item .item_price .strike{ display:none; }
.item .item_price .price{ font-size:14px; font-weight:700; color:var(--sw-ink); }
@media(min-width:768px){
  .item .item_txt .name{ font-size:14px; }
  .item .sale_percent, .item .item_price .price{ font-size:15px; }
}

/* 좌우 화살표: 원형 버튼 → 얇은 셰브론 */
@media(min-width:768px){
  .rail-arrow{ display:flex; align-items:center; justify-content:center; width:40px; height:56px; border:0; border-radius:0; background:transparent; box-shadow:none; color:#222; padding:0; line-height:0; }
  .rail-arrow svg{ display:block; width:28px; height:28px; }
  .rail-arrow:hover{ background:transparent; color:#000; }
  .rail-arrow.prev{ left:-52px; } .rail-arrow.next{ right:-52px; }
  .rail-arrow.disabled, .rail-arrow.disabled:hover{ background:transparent; color:#cfd3d8; border:0; }
  #ranking .item_container.custom_scroll, #new26fw .item_container.custom_scroll{ overflow-x:hidden; }
}
@media(min-width:768px) and (max-width:1279px){ .rail-arrow.prev{ left:-16px; } .rail-arrow.next{ right:-16px; } }

/* 랭킹: 한 줄 가로 1→10 */
#ranking .item_container.custom_scroll{ grid-template-rows:auto; }
#ranking .item::before, #ranking .item:nth-child(-n+3)::before{ top:0; left:0; min-width:28px; height:28px; line-height:28px; padding:0 7px; font-size:13px; border-radius:4px 0 4px 0; background:#111; }

/* 원데이특가: 21일치 슬라이드 한 줄 나열(날짜순) · 오늘 슬라이드만 선명, 나머지 화이트 오퍼시티 */
#oneday .item_container.custom_scroll{ grid-template-rows:auto; grid-auto-columns:calc((100% - 1.3*var(--g))/2.3); }
@media(min-width:768px){ #oneday .item_container.custom_scroll{ grid-auto-columns:calc((100% - 3*var(--g))/4); overflow-x:hidden; } }
@media(max-width:767px){
  #oneday .item_container.custom_scroll{ --g:10px; column-gap:var(--g); grid-auto-columns:calc((100% - var(--g))/1.7); scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
  #oneday .od-slide{ scroll-snap-align:start; scroll-snap-stop:always; }
  #oneday .od-slide .item_txt{ margin-top:10px; }
  #oneday #onedayDates{ margin-bottom:14px; }
}
#oneday .od-slide{ min-width:0; }
#oneday .od-slide .item{ display:block; width:100%; }
#oneday .od-slide .thumbnail{ position:relative; }
#oneday .od-slide .thumbnail::after{ content:""; position:absolute; inset:0; z-index:2; background:#fff; opacity:.5; pointer-events:none; transition:opacity .2s ease; border-radius:inherit; }
#oneday .od-slide.is-today .thumbnail::after{ opacity:0; }
#oneday .od-slide:not(.is-today) .item_txt{ opacity:.45; }
#oneday .od-slide:not(.is-today):hover .thumbnail::after{ opacity:.3; }
/* 원데이 전용 카드(promotion2 · 일반카드와 같은 구조): 썸네일 → 날짜문구 → 상품명 → 가격 */
#oneday .od-slide .simple{ display:block; }
#oneday .od-slide .thumbnail{ aspect-ratio:1/1; overflow:hidden; border-radius:4px; background:#f2f2f2; }
#oneday .od-slide .thumbnail img{ display:block; width:100%; height:100%; object-fit:cover; }
#oneday .od-slide .item_txt{ margin:12px 0 0; padding:0; display:block; }
#oneday .od-slide .item_txt .name{ margin:0; font-size:12px; font-weight:400; line-height:1.4; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#oneday .od-slide .item_price{ margin-top:3px; display:flex; gap:5px; align-items:baseline; }
#oneday .od-slide .item_price .sale_percent{ font-size:14px; font-weight:700; color:var(--sw-sale); }
#oneday .od-slide .item_price .sale_percent .unit{ display:inline !important; font-size:inherit; font-weight:inherit; color:inherit; margin:0; }   /* 할인율 % 표시 */
#oneday .od-slide .item_price .price{ font-size:14px; font-weight:700; color:var(--sw-ink); }
@media(min-width:768px){ #oneday .od-slide .item_txt .name{ font-size:13px; } #oneday .od-slide .item_price .sale_percent, #oneday .od-slide .item_price .price{ font-size:15px; } }
.od-day{ margin:0 0 4px; font-size:11.5px; line-height:1.3; color:var(--sw-sub); letter-spacing:-.01em; }
.od-day b{ font-weight:700; color:#111; margin-right:5px; }
.od-day{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:767px){ .od-extra{ display:none; } }
.is-today .od-day, .is-today .od-day b{ color:var(--sw-sale); font-weight:700; }
@media(min-width:768px){ .od-day{ font-size:12px; } }


/* ════════ 블프 개인화 진열 — 사뿐위크 .sec-head / .products / .item_container / .item 을 그대로 쓰고 아래만 더한다 ════════ */
.bfp[hidden], .bfp [hidden], #bfp-pool{ display:none !important; }
/* 최근 본 상품 표시 — 비슷한 상품과 구분 */
.bfp .item.bfp-recent .thumbnail::after{ content:'최근 본'; position:absolute; top:6px; left:6px; z-index:2; height:20px; padding:0 7px;
  border-radius:3px; background:rgba(17,17,17,.82); color:#fff; font-size:11px; font-weight:600; line-height:20px; }
/* 내 관심 상품 그리드 — 카드 간격을 진열 레일과 맞춤 */
#bfp-interest .products{ row-gap:26px; }
@media(min-width:768px){ #bfp-interest .products{ column-gap:14px; row-gap:40px; } }
/* 카드 오기 전 빈 카드 — 자동으로 뜨는 대기라 도는 아이콘 대신 은은한 깜빡임. 움직임 줄이기 설정이면 멈춘다 */
.bfp .bfp-skel{ pointer-events:none; }
.bfp .bfp-skel .thumbnail, .bfp .bfp-skel .name, .bfp .bfp-skel .item_price{ background:var(--ph, #f5f6f8); border-radius:3px; color:transparent; animation:bfp-skel 1.1s ease-in-out infinite alternate; }
.bfp .bfp-skel .name{ width:80%; margin-top:10px; }
.bfp .bfp-skel .item_price{ width:45%; margin-top:6px; }
@keyframes bfp-skel{ from{ opacity:.55; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .bfp .bfp-skel .thumbnail, .bfp .bfp-skel .name, .bfp .bfp-skel .item_price{ animation:none; } }
/* 가격 표기는 오픈런(promotion 템플릿)과 맞춘다 — 정가 취소선 없이 「할인율 + 판매가」, 모바일은 KRW 도 뺀다(10-19) */
.bfp .item .item_price .strike{ display:none !important; }
@media (max-width:767px){ .bfp .item .item_price .price .unit{ display:none !important; } }
/* 비로그인 박스 */
.bfp-login{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:220px; padding:32px 16px;
  background:var(--ph); border-radius:6px; text-align:center; }
.bfp-login-title{ margin:0; font-size:clamp(15px,1.8vw,17px); font-weight:700; color:var(--ink); }
.bfp-login-desc{ margin:0; font-size:13px; line-height:1.6; color:var(--mut); }
.bfp-login-btn{ margin-top:10px; font-size:13px; font-weight:700; color:var(--ink); text-decoration:none; padding:8px 4px; }
.bfp-login-btn:hover{ text-decoration:underline; text-underline-offset:3px; }
.bfp-login-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ════════ 블프 다크 테마 — 페이지 CSS 맨 끝에 붙인다(앞의 색 지정을 덮어쓴다) ════════
   사뿐위크 CSS 의 색 변수(--bg·--ink·--ph·--sw-*)를 검정 쪽으로 바꾸고, 변수 없이 색을 박아 둔 곳만 따로 덮는다.
   상품 썸네일(흰 배경 사진)은 그대로 둔다 — 검정 위에서 상품이 떠 보이는 게 블프 페이지에 맞다. */
.promotion{
  --bg:#0B0B0C; --ink:#F3F3F4; --mut:#9A9CA3; --tag:#7D8088;
  --ph:#1B1B1E; --ph-b:#2A2A2E; --line:#26262A; --bar:#1E1E21; --bar-dk:#2A2A2E;
  --sw-band:#141416; --sw-ink:#F3F3F4; --sw-sub:#9A9CA3; --sw-accent:#FFFFFF; --sw-sale:#FF4D2E;
  background:var(--bg); color:var(--ink);
}
/* 상단 칩 메뉴 */
.promotion .navbar{ background:var(--bg); }
.promotion .chip{ color:#8A8D95; }
.promotion .chip.on{ color:#FFFFFF; border-bottom-color:#FFFFFF; }
/* 날짜·차수 탭 — 검정 위에서도 보이게 바탕·글자 대비를 올린다. 테두리 대신 안쪽 그림자(높이가 안 변한다) */
.promotion .date, .promotion #catday .date{ background:#1E1E21; color:#D6D7DB; border:0; box-shadow:inset 0 0 0 1px #2E2E33;
  transition-property:background-color,color,box-shadow; transition-duration:.15s; }
.promotion .date:hover, .promotion #catday .date:hover{ background:#2A2A2E; color:#FFFFFF; }
.promotion .date.on, .promotion #catday .date.on{ background:#FFFFFF; color:#0B0B0C; box-shadow:none; font-weight:700; }
/* 섹션 머리 */
.promotion .sec-more{ color:#B9BBC1; }
.promotion .sec-more:hover{ color:#FFFFFF; }
/* 상품 카드 글자 */
.promotion .item .item_txt .name, .promotion #oneday .od-slide .item_txt .name{ color:#D6D7DB; }
.promotion .item .item_price .price, .promotion #oneday .od-slide .item_price .price{ color:#FFFFFF; }
.promotion .item .item_price .strike{ color:#7D8088; }
.promotion .item_more{ background:#141416; border-color:#2A2A2E; color:#B9BBC1; }
/* 좌우 화살표 */
.promotion .rail-arrow{ color:#E6E6E9; }
.promotion .rail-arrow:hover{ color:#FFFFFF; }
.promotion .rail-arrow.disabled, .promotion .rail-arrow.disabled:hover{ color:#45474D; }
/* 원데이 — 오늘이 아닌 카드는 흰 막 대신 검정 막으로 눌러 둔다 */
.promotion #oneday{ background:none; }
.promotion #oneday .od-slide .thumbnail::after{ background:#000000; }
.promotion .od-day b{ color:#FFFFFF; }
/* 카테고리 쿠폰 */
.promotion .cat-coupon{ background:#141416; border-color:#2A2A2E; color:#F3F3F4; }
.promotion .cat-coupon:hover{ border-color:#FFFFFF; }
.promotion .cc-txt b, .promotion .cc-btn{ color:#FFFFFF; }
/* 결제 혜택 */
.promotion .paybenefit{ background:#141416; color:#E6E6E9; }
.promotion .paybenefit_info div{ color:#E6E6E9; }
/* 카운트다운 — 섹션마다 같은 모양: 얇은 테두리 알약 + 빨간 점 + 「종료까지」 + 흰 숫자(자리 고정) */
.promotion .cd-pill{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px 0 26px; border-radius:999px;
  background:radial-gradient(circle at 14px 50%, #FF4D2E 0 3px, transparent 3.5px), rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.promotion .cd-pill::before{ content:"종료까지"; font-size:12px; font-weight:500; color:#9A9CA3; }
.promotion .cd-pill .cd{ color:#FFFFFF; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
@media (max-width:767px){ .promotion .cd-pill{ height:30px; padding:0 12px 0 24px; background:radial-gradient(circle at 13px 50%, #FF4D2E 0 3px, transparent 3.5px), rgba(255,255,255,.05); }
  .promotion .cd-pill .cd{ font-size:14px; } }
/* 개인화 영역(로그인 박스·빈 카드는 --ph 를 따라 자동으로 어두워진다) */
.promotion .bfp .item.bfp-recent .thumbnail::after{ background:rgba(255,255,255,.9); color:#0B0B0C; }


/* ════════ 블프 섹션 (11.16~30) — 쿠폰팩 · 안내 띠 · 4일 한정 · 큐레이션 · 룩북 · 캘린더 ════════ */
.promotion #peak, .promotion #curation, .promotion #bf-cal{ background:var(--sw-band); box-shadow:0 0 0 100vmax var(--sw-band); clip-path:inset(0 -100vmax); }
.promotion .bf-notice{ margin:-4px 0 16px; padding:10px 12px; border-radius:4px; background:#1B1E2A; color:#AFC0FF; font-size:12px; font-weight:600; }
/* 쿠폰팩 */
.promotion .bf-pack{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }   /* 쿠폰 4장 — PC 2×2, 모바일 1열(재훈 11-09) */
@media (max-width:767px){ .promotion .bf-pack{ grid-template-columns:1fr; } }
.promotion .bf-cp{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:0 18px; border-radius:6px; background:#18181B;
  box-shadow:inset 0 0 0 1px #2A2A2E; color:#F3F3F4; text-decoration:none; transition-property:box-shadow; transition-duration:.15s; }
.promotion .bf-cp:hover{ box-shadow:inset 0 0 0 1px #55575E; }
.promotion .bf-cp .t b{ display:block; font-size:15px; font-weight:700; letter-spacing:-.02em; }
.promotion .bf-cp .t em{ display:block; margin-top:2px; font-size:12px; font-style:normal; color:#9A9CA3; font-variant-numeric:tabular-nums; }
.promotion .bf-cp .v{ display:flex; align-items:center; gap:8px; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.promotion .bf-cp.soon{ opacity:.5; pointer-events:none; }
.promotion .bf-caution{ margin-top:10px; font-size:12px; color:#9A9CA3; }
.promotion .bf-caution summary{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; cursor:pointer; list-style:none; }
.promotion .bf-caution summary::-webkit-details-marker{ display:none; }
.promotion .bf-caution summary::after{ content:""; width:6px; height:6px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition-property:transform,margin; transition-duration:.15s; }
.promotion .bf-caution[open] summary::after{ transform:rotate(225deg); margin-top:3px; }
.promotion .bf-caution ul{ margin:4px 0 0; padding:14px 16px 14px 30px; border-radius:4px; background:#18181B; line-height:1.7; list-style:disc; }
/* 한정 특가 — 오픈 전 날짜는 흐리게(미리 보기만), 지난 날짜도 흐리게 */
.promotion #peak .day-panel.soon .item, .promotion #peak .day-panel.ended .item{ opacity:.45; }
/* 큐레이션 카드 */
.promotion .bf-cur{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 24px)/3); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.promotion .bf-cur::-webkit-scrollbar{ display:none; }
.promotion .bf-cc{ display:flex; flex-direction:column; min-width:0; color:#F3F3F4; text-decoration:none; scroll-snap-align:start; }
.promotion .bf-cc .ph{ display:block; aspect-ratio:4/3; overflow:hidden; background:#222; }
.promotion .bf-cc .ph img{ width:100%; height:100%; object-fit:cover; display:block; transition-property:transform; transition-duration:.4s; transition-timing-function:cubic-bezier(.2,0,0,1); }
.promotion .bf-cc:hover .ph img{ transform:scale(1.03); }
.promotion .bf-cc b{ margin-top:12px; font-size:16px; font-weight:700; letter-spacing:-.02em; }
.promotion .bf-cc .d{ margin-top:4px; font-size:13px; color:#9A9CA3; }
.promotion .bf-cc .go{ margin-top:8px; font-size:12px; color:#D6D7DB; text-decoration:underline; text-underline-offset:3px; }
.promotion .bf-cc .go::after{ content:" ›"; }
/* 룩북 — 큰 사진 + 아래 상품 줄 */
.promotion .bf-lb + .bf-lb{ margin-top:clamp(28px,4vw,44px); }
.promotion .bf-lb-img{ position:relative; display:block; aspect-ratio:16/7; overflow:hidden; margin-bottom:14px; color:#fff; text-decoration:none; background:#222; }
.promotion .bf-lb-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.promotion .bf-lb-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 45%); }
.promotion .bf-lb-img .cap{ position:absolute; left:20px; bottom:18px; z-index:2; }
.promotion .bf-lb-img small{ font-size:12px; letter-spacing:.14em; opacity:.85; }
.promotion .bf-lb-img b{ display:block; margin-top:2px; font-size:26px; font-weight:600; letter-spacing:.01em; }
.promotion .bf-lb-img .cap span{ display:block; margin-top:4px; font-size:13px; opacity:.85; }
.promotion .bf-lb-img .cap span::after{ content:" ›"; }
/* 혜택 캘린더 — 날짜 | 내용 줄 목록 */
.promotion .bf-cal{ display:grid; gap:4px; }
.promotion .bf-cal-row{ display:grid; grid-template-columns:minmax(120px,32%) 1fr; min-height:64px; border-radius:4px; overflow:hidden; background:#18181B; }
.promotion .bf-cal-row .dt{ display:flex; align-items:center; padding:0 20px; background:#232327; font-size:18px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; color:#F3F3F4; }
.promotion .bf-cal-row .what{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:12px 20px; font-size:16px; font-weight:600; color:#F3F3F4; }
.promotion .bf-cal-row .what span{ padding:3px 8px; border-radius:3px; background:rgba(255,77,46,.16); color:#FF6B4F; font-size:12px; font-weight:700; }
.promotion .bf-cal-row.now{ box-shadow:inset 0 0 0 1px rgba(255,77,46,.6); }
.promotion .bf-cal-row.now .dt{ background:#FF4D2E; color:#fff; }
.promotion .bf-cal-row.now .dt::after{ content:"진행 중"; margin-left:8px; font-size:11px; font-weight:600; opacity:.9; }
@media (max-width:767px){
  /* 카운트다운 알약 — 기존 모바일 규칙이 padding:0 으로 덮어 「종료까지」가 빨간 점과 겹친다 */
  .promotion #oneday .sec-head .cd-pill, .promotion #catday .sec-head .cd-pill, .promotion #peak .sec-head .cd-pill{ padding:0 12px 0 24px; }
  /* 한정 특가 머리도 원데이·카테고리데이처럼: 제목 | 카운트다운 / 아래 설명 */
  .promotion #peak .sec-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; }
  .promotion #peak .sec-head > div:first-child{ display:contents; }
  .promotion #peak .sec-title{ grid-column:1; grid-row:1; }
  .promotion #peak .sec-head .cd-pill{ grid-column:2; grid-row:1; }
  .promotion #peak .sec-sub{ grid-column:1 / -1; grid-row:2; }
  .promotion .bf-pack{ grid-template-columns:1fr; }
  .promotion .bf-cp{ min-height:56px; padding:0 14px; } .promotion .bf-cp .t b{ font-size:14px; } .promotion .bf-cp .v{ font-size:16px; }
  .promotion .bf-cur{ grid-auto-columns:calc((100% - 8px)/1.4); gap:8px; }
  .promotion .bf-lb-img{ aspect-ratio:4/5; } .promotion .bf-lb-img b{ font-size:22px; }
  .promotion .bf-cal-row{ grid-template-columns:118px 1fr; min-height:56px; }
  .promotion .bf-cal-row .dt{ padding:0 12px; font-size:14px; letter-spacing:-.02em; }
  .promotion .bf-cal-row.now .dt{ flex-direction:column; align-items:flex-start; justify-content:center; }
  .promotion .bf-cal-row.now .dt::after{ margin:2px 0 0; }
  .promotion .bf-cal-row .what{ padding:10px 14px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce){ .promotion .bf-cc .ph img{ transition:none; } }

/* ════════ 룩으로 쇼핑하기 — 3:4 컷 + 흰 점(물결) → 반투명 말풍선(썸네일·이름·가격) ════════ */
.promotion .bf-looks{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:767px){ .promotion .bf-looks{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 6px)/1.35); gap:6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .promotion .bf-looks::-webkit-scrollbar{ display:none; } .promotion .bf-looks > .lbk{ scroll-snap-align:start; } }
.promotion .lbk{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#222; }
.promotion .lbk > img{ width:100%; height:100%; object-fit:cover; display:block; }
.promotion .lbk .pin{ position:absolute; left:var(--x); top:var(--y); z-index:4; width:44px; height:44px; margin:-22px 0 0 -22px; padding:0; border:0; background:none; cursor:pointer; }
.promotion .lbk .pin::before{ content:""; position:absolute; inset:15px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.35); }
.promotion .lbk .pin::after{ content:""; position:absolute; inset:15px; border-radius:50%; border:2px solid rgba(255,255,255,.9); animation:bf-pin-wave 1.8s ease-out infinite; }
.promotion .lbk .pin.on::after{ animation:none; opacity:0; }
.promotion .lbk .pin[hidden], .promotion .lbk .tip[hidden]{ display:none; }
@keyframes bf-pin-wave{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(2.4); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .promotion .lbk .pin::after{ animation:none; opacity:0; } }
.promotion .lbk .tip{ position:absolute; left:0; top:0; z-index:6; display:flex; align-items:center; gap:8px; width:max-content; max-width:calc(100% - 16px); padding:6px 10px 6px 6px; border-radius:4px;
  background:rgba(40,40,40,.84); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; text-decoration:none; opacity:0; visibility:hidden; }
.promotion .lbk .tip.show{ opacity:1; visibility:visible; }
.promotion .lbk .tip img{ flex-shrink:0; width:44px; height:44px; border-radius:2px; object-fit:cover; background:#fff; }
.promotion .lbk .tip .t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.promotion .lbk .tip .tn{ font-size:11px; font-weight:600; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
.promotion .lbk .tip .tp{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; }
.promotion .lbk .tip .tp em{ margin-right:4px; color:#FF4D2E; font-size:11px; font-style:normal; }
.promotion .lbk .tip::before{ content:""; position:absolute; left:var(--cx,50%); width:0; height:0; margin-left:-5px; border:5px solid transparent; }
.promotion .lbk .tip.below::before{ top:-10px; border-bottom-color:rgba(40,40,40,.84); }
.promotion .lbk .tip.above::before{ bottom:-10px; border-top-color:rgba(40,40,40,.84); }

/* ════════ 목업(v3) 맞춤 — 카드 · 칸 수 · 줄 수 · 카운트다운 ════════ */
/* 카드 — 모서리 각지게, 사진 세로 5:6, 상품명 2줄 */
.promotion .item .thumbnail{ border-radius:0; aspect-ratio:1/1; overflow:hidden; }   /* 상품 원본이 840×840 정사각 — 5:6 이면 좌우가 잘려 부츠 앞코·굽이 빠졌다 (재훈 10-20) */
.promotion .item .thumbnail > div, .promotion .item .thumbnail > div > div{ height:100%; }
.promotion .item .thumbnail img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
.promotion .item .item_txt .name{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }   /* 상품명 한 줄 + … (원데이만 두 줄) */
.promotion #oneday .item .item_txt .name{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:clip; }
/* PC 6칸 (원데이는 그대로 4칸) */
/* 상품 진열: PC 5단 · 사진·글자 모두 6px 간격 (재훈 10-20) — 원데이 큰 카드는 제외. 20개 2줄 진열이 10+10 으로 딱 나뉜다 */
.promotion section:not(#oneday) .item_container.custom_scroll{ --g:6px; }
@media (min-width:768px){ .promotion section:not(#oneday) .item_container.custom_scroll{ grid-auto-columns:calc((100% - 4*var(--g))/5); } }
.promotion #bfp-interest .products{ column-gap:6px; }
/* 줄 수 — 랭킹·카테고리데이 2줄, 룩북 상품은 1줄 가로 스와이프 */
.promotion #ranking .item_container.custom_scroll, .promotion #catday .item_container.custom_scroll{ grid-template-rows:repeat(2,auto); }
.promotion #lookbook .item_container.custom_scroll{ grid-template-rows:auto; }
/* 카운트다운 — 제목 옆 빨간 숫자 (JS 가 알약을 제목 안으로 옮긴다) */
.promotion #oneday .sec-title .cd-pill, .promotion #peak .sec-title .cd-pill, .promotion #catday .sec-title .cd-pill{
  display:inline; height:auto; margin-left:8px; padding:0; background:none; box-shadow:none; border:0; vertical-align:baseline; }
.promotion .sec-title .cd-pill::before{ content:none; }
.promotion .sec-title .cd-pill .cd{ color:#FF4D2E; font-size:inherit; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:0; }
.promotion .sec-title .flag{ margin-left:8px; font-size:inherit; font-weight:700; color:#FF4D2E; vertical-align:baseline; }
.promotion .sec-title .flag:empty{ display:none; }
.promotion .bf-cc b{ color:#F3F3F4; }
/* 히어로 아래 페이드 — 22% 구간 직선이라 경계가 띠처럼 보였다. 50% 로 늘리고 여러 단계로 서서히(ease) 옅어지게. 왼쪽 글자 그늘도 같은 방식 */
.promotion .hero-ink::after{
  background:
    linear-gradient(0deg, #0B0B0C 0%, rgba(11,11,12,.86) 8%, rgba(11,11,12,.64) 16%, rgba(11,11,12,.42) 24%, rgba(11,11,12,.24) 32%, rgba(11,11,12,.11) 40%, rgba(11,11,12,.03) 47%, rgba(11,11,12,0) 52%),
    linear-gradient(90deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.30) 20%, rgba(0,0,0,.17) 38%, rgba(0,0,0,.07) 52%, rgba(0,0,0,0) 66%); }
@media (max-width:767px){
  .promotion .hero-ink::after{ background:linear-gradient(0deg, #0B0B0C 0%, rgba(11,11,12,.8) 10%, rgba(11,11,12,.55) 20%, rgba(11,11,12,.33) 32%, rgba(11,11,12,.16) 44%, rgba(11,11,12,.05) 56%, rgba(11,11,12,0) 66%); }
}
/* 띠 배경 — 섹션 순서(쿠폰·원데이·4일·카테고리·룩북·랭킹·룩쇼핑·최근본·관심·역시즌·클리어런스·큐레이션·캘린더)에서 한 칸씩 번갈아 */
.promotion #oneday, .promotion #catday, .promotion #ranking, .promotion #bfp-similar, .promotion #offseason, .promotion #curation{
  background:var(--sw-band); box-shadow:0 0 0 100vmax var(--sw-band); clip-path:inset(0 -100vmax); }
.promotion #bf-coupon, .promotion #peak, .promotion #lookbook, .promotion #bf-looks, .promotion #bfp-interest, .promotion #clearance, .promotion #bf-cal{
  background:none; box-shadow:none; clip-path:none; }
/* 최근 본 상품이 없어 그 섹션이 숨으면, 띠 없는 섹션끼리 붙지 않게 내 관심 상품이 띠를 받는다 */
.promotion #bfp-similar[hidden] + #bfp-interest{ background:var(--sw-band); box-shadow:0 0 0 100vmax var(--sw-band); clip-path:inset(0 -100vmax); }
/* 큐레이션 사진 틀 — 기존 페이지 CSS 의 .ph{padding:8px}(개인화 대기 카드)와 이름이 겹쳐 테두리·흰 줄이 생겼다 */
.promotion .bf-cc .ph, .promotion .bfl-oc .ph{ padding:0; }
/* 모바일 common.css 의 「* { color:#26231d }」 — 색을 따로 안 준 글자가 전부 어두운 갈색이 된다.
   우선순위 0 짜리(:where)로 「부모 색을 따른다」를 깔아, 색을 지정한 규칙은 그대로 두고 나머지만 되살린다 */
:where(.promotion) *{ color:inherit; }
/* 개인화 「최근 본」 배지 — 검정 바탕·흰 글씨, 랭킹 배지처럼 각지게 사진 왼쪽 위에 */
.promotion .bfp .item.bfp-recent .thumbnail::after{ background:#0B0B0C; color:#fff; border-radius:0; top:5px; left:5px; }
/* 랭킹 배지 — 사진 모서리가 각지니 배지도 각지게, 사진 왼쪽 위에 딱 붙인다 */
.promotion #ranking .item::before, .promotion #ranking .item:nth-child(-n+3)::before{ border-radius:0; top:0; left:0; }
/* 큐레이션 — PC 는 3칸×2줄로 6장 다 보이게(화살표 없이 3장만 보여 「3개뿐」으로 보였다). 모바일은 스와이프 그대로 */
@media (min-width:768px){ .promotion .bf-cur{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto; row-gap:28px; overflow:visible; } }   /* 모바일 사이트 CSS 가 b 글자색을 어둡게 덮어쓴다 */
.promotion .cat-coupon svg path{ fill:none; }   /* 사뿐위크 CSS 의 파란 채움 — 선 아이콘이 뭉개진 점처럼 보였다 */
.promotion .cat-coupon .cc-btn{ color:#F3F3F4; }
/* 카테고리 쿠폰 — 어두운 바탕에 #2A2A2E 테두리라 안 보였다. 기본부터 흰 테두리, 호버는 바탕만 살짝 밝게 (재훈 10-20) */
.promotion .cat-coupon{ border-color:#FFFFFF; transition-property:background-color; transition-duration:.15s; transition-timing-function:ease-out; }
.promotion .cat-coupon:hover{ border-color:#FFFFFF; background:#232327; }
/* 룩북 쿠폰 — 카테고리데이 쿠폰과 같은 버튼을 제목 오른쪽에. 모바일은 제목 아래 한 줄 (재훈 10-20) */
/* 룩북 쿠폰 — 카테고리데이처럼 탭과 같은 줄 양끝(탭 왼쪽 · 쿠폰 오른쪽). 모바일은 탭 아래 한 줄 (재훈 10-20) */
/* SUMMER·SPRING 탭 — 쿠폰 없음(재훈 11-06). 숨기되 자리는 남긴다(11-10, js 에서 visibility) */
@media (max-width:767px){ .promotion #lookbook .lb-bar .today-cat{ flex:1 0 100%; } .promotion #lookbook .lb-coupon.on{ display:flex; flex:1 1 100%; } .promotion #lookbook .lb-coupon .cc-btn{ margin-left:auto; } }
/* 룩북 — PC: 왼쪽 세로 화보(그리드 높이에 맞춰 늘어남) + 오른쪽 상품 4×2. 모바일은 화보 4:5 아래 한 줄 스와이프 그대로 (재훈 10-20) */
.promotion #lookbook .bf-lb + .bf-lb{ margin-top:0; }
@media (min-width:768px){
  .promotion #lookbook .bf-lb{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:6px; align-items:stretch; }
  .promotion #lookbook .bf-lb-img{ aspect-ratio:auto; height:100%; min-height:360px; margin-bottom:0; }
  .promotion #lookbook .bf-lb-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .promotion #lookbook .item_container.custom_scroll{ grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; grid-auto-columns:auto; overflow:visible; row-gap:24px; }
  .promotion #lookbook .rail-arrow{ display:none !important; }
}
/* 한정 특가 — 날마다 상품 수가 달라질 수 있어 2줄 격자 대신 한 줄 스와이프(개수와 상관없이 빈칸이 안 생긴다). PC 는 화살표·트랙패드, 모바일은 손가락 (재훈 10-20) */
.promotion #peak .item_container.custom_scroll{ grid-template-rows:auto; overflow-x:auto; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:none; }
.promotion #peak .item_container.custom_scroll > .item{ scroll-snap-align:start; }
/* 쿠폰팩 — 쿠폰 모양: 오른쪽 금액 칸을 점선으로 떼고, 그 자리 위·아래를 반원으로 파낸다 (재훈 10-20) */
.promotion .bf-cp{ --stub:112px; --notch:7px; padding:0 0 0 18px; gap:0; transition-property:background-color; transition-duration:.15s; transition-timing-function:ease-out;
  -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.promotion .bf-cp:hover{ box-shadow:none; background:#232327; }
.promotion .bf-cp .t{ flex:1 1 auto; min-width:0; padding-right:12px; }
.promotion .bf-cp .t b, .promotion .bf-cp .t em{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.promotion .bf-cp .v{ flex:0 0 var(--stub); align-self:stretch; flex-direction:column; justify-content:center; gap:3px; font-size:18px; border-left:1px dashed #3A3A40; }
.promotion .bf-cp .v svg{ width:16px; height:16px; color:#9A9CA3; }
/* 쿠폰팩 — 금액은 앞쪽 맨 앞, 점선 뒤 칸은 받기 아이콘만 (재훈 10-20) */
.promotion .bf-cp{ --stub:64px; }
.promotion .bf-cp .amt{ flex:0 0 auto; align-self:center; margin-right:12px; padding-right:12px; border-right:1px solid #3A3A40; color:#fff; font-size:15px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; white-space:nowrap; }   /* 크기는 쿠폰 이름과 같게, 세로줄로 구분만 */
.promotion .bf-cp .v svg{ width:20px; height:20px; color:#F3F3F4; }
@media (max-width:767px){ .promotion .bf-cp{ --stub:56px; } .promotion .bf-cp .amt{ font-size:14px; margin-right:10px; padding-right:10px; } }
@media (max-width:767px){ .promotion .bf-cp{ --stub:96px; padding-left:14px; } .promotion .bf-cp .v{ font-size:16px; } }

/* 내 관심 상품 — 찜 하트(오른쪽 위). 누르는 자리는 40px, 아이콘은 20px */
.promotion #bfp-interest .icon_wish{ position:absolute; top:0; right:0; z-index:2; display:flex; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; }
.promotion #bfp-interest .icon_wish img{ width:20px; height:20px; object-fit:contain; }
@media (max-width:767px){ .promotion #bfp-interest .icon_wish img{ width:18px; height:18px; } }
/* 사뿐위크 CSS 가 두 번째 그림(채운 하트)을 늘 숨긴다 — 찜한 상품은 채운 하트로 바꿔 보이게 */
.promotion #bfp-interest .icon_wish .my-wish-list img{ display:block; }
.promotion #bfp-interest .icon_wish .my-wish-list img + img{ display:none; }
.promotion #bfp-interest .icon_wish .my-wish-list.wish-on img:first-child{ display:none; }
.promotion #bfp-interest .icon_wish .my-wish-list.wish-on img + img{ display:block; }

/* 최근 본 상품과 비슷한 상품 — 기준 상품 고르기(측면 컷 작은 사진) · 「무엇이 닮았는지」 한 줄 (재훈 10-20) */
.promotion .bfp-anchors{ display:flex; gap:8px; margin:-4px 0 16px; }
.promotion .bfp-anchor{ position:relative; width:52px; height:52px; padding:0; border:0; border-radius:0; background:#fff; cursor:pointer; opacity:.55;
  box-shadow:0 0 0 1px #2A2A2E; transition-property:opacity, box-shadow; transition-duration:.15s; transition-timing-function:ease-out; }
.promotion .bfp-anchor img{ width:100%; height:100%; object-fit:cover; display:block; }
.promotion .bfp-anchor:hover{ opacity:.85; }
.promotion .bfp-anchor.on{ opacity:1; box-shadow:0 0 0 2px #0B0B0C, 0 0 0 3px #fff; }
.promotion .bfp-anchor:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (max-width:767px){ .promotion .bfp-anchor{ width:46px; height:46px; } }
.promotion .bfp .item .item_txt .bfp-why{ margin:0 0 2px; font-size:11px; line-height:1.4; color:#8B8D94; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 내 관심 상품 — 「위시」(찜한 상품) / 「추천」(채워 넣은 상품) 뱃지. 「최근 본」과 같은 모양 (재훈 10-20) */
.promotion #bfp-interest .item.bfp-tag-wish .thumbnail::after, .promotion #bfp-interest .item.bfp-tag-reco .thumbnail::after{
  position:absolute; top:5px; left:5px; z-index:2; height:20px; padding:0 7px; background:#0B0B0C; color:#fff; font-size:11px; font-weight:600; line-height:20px; }
.promotion #bfp-interest .item.bfp-tag-wish .thumbnail::after{ content:'위시'; }
.promotion #bfp-interest .item.bfp-tag-reco .thumbnail::after{ content:'추천'; }

/* 클리어런스 — 「전체 보기」는 탭 줄 오른쪽 하나만(카테고리별 줄은 숨김). 모바일은 탭 아래 오른쪽 (재훈 10-20) */
.promotion #clearance .rail-top{ display:none; }
.promotion #clearance .clear-bar #clearMore{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:767px){ .promotion #clearance .clear-bar{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-bottom:14px; } .promotion #clearance .clear-bar .dates{ align-self:stretch; margin-bottom:0; } }

/* 모바일 헤더 숨김 — 부모(#header)가 아니라 .header_box 자체를 흐리게(사파리에서 뚝 사라지던 것) */
#header.hide{ opacity:1; }
#header .header_box{ transition-property:opacity, transform; transition-duration:.35s; transition-timing-function:ease-out; }
#header.hide .header_box{ opacity:0; transform:translateY(-8px); pointer-events:none; }

/* 모바일 — 한정 특가는 두 줄 스와이프(PC 는 한 줄) · 상품명은 두 줄까지 보이고 그 뒤는 … (재훈 10-20) */
@media (max-width:767px){
  .promotion #peak .item_container.custom_scroll{ grid-template-rows:repeat(2,auto); }
  .promotion .item .item_txt .name, .promotion #oneday .od-slide .item_txt .name{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
  .promotion .item .item_price, .promotion #oneday .od-slide .item_price{ margin-top:2px; }   /* 상품명–가격 사이를 좁게(재훈 10-20) — 두 줄 자리를 미리 비워 두지 않는다 */
}

.promotion .item .item_txt{ margin-left:0; margin-right:0; }   /* 사진 왼쪽 끝 = 글자 시작 */

/* 착용 컷 말풍선 — 룩북(11-04)처럼 점에서 나오고 점으로 들어간다. 기준점 = 꼬리(--cx)에서 16px 떨어진 점.
   transform 은 JS 가 안 쓰지만 scale 속성으로 따로 둬서 겹치지 않게 한다. --d = 처음 한꺼번에 열 때 차례 지연 */
.promotion .lbk .tip.below{ transform-origin:var(--cx,50%) -16px; }
.promotion .lbk .tip.above{ transform-origin:var(--cx,50%) calc(100% + 16px); }
.promotion .lbk .tip.show{ animation:bf-from-dot .32s cubic-bezier(.2,0,0,1) both; animation-delay:var(--d,0ms); }
.promotion .lbk .tip.closing{ visibility:visible; pointer-events:none; animation:bf-to-dot .26s cubic-bezier(.4,0,1,1) both; }
@keyframes bf-from-dot{ from{ opacity:0; scale:.15; } to{ opacity:1; scale:1; } }
@keyframes bf-to-dot{ from{ opacity:1; scale:1; } to{ opacity:0; scale:.15; } }
@media (prefers-reduced-motion:reduce){ .promotion .lbk .tip.show, .promotion .lbk .tip.closing{ animation:none; } .promotion .lbk .tip.closing{ visibility:hidden; } }

@media (max-width:767px){
  .promotion .item_container.custom_scroll, .promotion #peak .item_container.custom_scroll{ scroll-snap-type:x mandatory; }   /* 한정 특가는 PC 쪽 proximity 규칙보다 우선 */
  .promotion .item_container.custom_scroll > .item{ scroll-snap-align:start; }
}

/* 쿠폰 공통 — 회색 티켓 (쿠폰팩 .bf-cp · 진열 쿠폰 .cat-coupon) */
.promotion{ --cp-bg:#2C2C31; --cp-bg-h:#37373D; --cp-line:rgba(255,255,255,.22); --cp-sub:#B4B6BD; }
.promotion .bf-cp{ background:var(--cp-bg); }
.promotion .bf-cp:hover{ background:var(--cp-bg-h); }
.promotion .bf-cp .amt{ border-right-color:var(--cp-line); }
.promotion .bf-cp .t em{ color:var(--cp-sub); }
.promotion .bf-cp .v{ border-left-color:var(--cp-line); }
@media (max-width:767px){ .promotion .bf-cp{ --stub:56px; } }   /* 받기 아이콘만 있는 칸 — 예전 96px 규칙이 뒤에서 덮어쓰고 있었다 */

.promotion .cat-coupon{ --stub:52px; --notch:6px; position:relative; align-items:center; gap:0; min-height:52px; padding:0 0 0 14px; border:0; border-radius:6px;
  background:var(--cp-bg); color:#fff; text-decoration:none; box-shadow:none; transition-property:background-color; transition-duration:.15s; transition-timing-function:ease-out;
  -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.promotion .cat-coupon:hover{ background:var(--cp-bg-h); border:0; box-shadow:none; }
.promotion .cat-coupon .cc-pct{ flex:0 0 auto; margin-right:10px; padding-right:10px; border-right:1px solid var(--cp-line); color:#fff; font-size:15px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.promotion .cat-coupon .cc-txt{ flex:1 1 auto; min-width:0; padding-right:12px; }
.promotion .cat-coupon .cc-txt b{ color:#fff; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.promotion .cat-coupon .cc-txt em{ color:var(--cp-sub); font-size:11px; }
.promotion .cat-coupon .cc-btn{ flex:0 0 var(--stub); width:auto; height:auto; align-self:stretch; margin:0; border-left:1px dashed var(--cp-line); color:#F3F3F4; transform:none; }
.promotion .cat-coupon:hover .cc-btn{ transform:none; }
.promotion .cat-coupon .cc-btn svg{ width:18px; height:18px; }
@media (max-width:767px){ .promotion .cat-coupon .cc-btn, .promotion #lookbook .lb-coupon .cc-btn{ margin-left:0; } }

.promotion .bf-cp .amt, .promotion .cat-coupon .cc-pct{ color:var(--sw-sale, #FF4D2E); }   /* 쿠폰 할인율 = 상품 할인율 색 */

/* 쿠폰 한 번에 받기 (11-10) — 쿠폰팩 아래 꽉 찬 버튼. 쿠폰 카드와 같은 색·호버(재훈 11-10) */
.promotion .bf-cp-all{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; margin-top:8px; border-radius:6px; background:var(--cp-bg); color:#F3F3F4; font-size:15px; font-weight:700; letter-spacing:-.02em; text-decoration:none;
  transition-property:background-color, transform; transition-duration:.15s; transition-timing-function:ease-out; }
.promotion .bf-cp-all:hover{ background:var(--cp-bg-h); color:#F3F3F4; }
.promotion .bf-cp-all:active{ transform:scale(.96); }
@media (max-width:767px){ .promotion .bf-cp-all{ min-height:48px; font-size:14px; } }


/* BASIC css end */