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


.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: #000;}
.intro_container .intro_t3 {font-size: 14px;color: #000;}
 
/* 사뿐위크: 카테고리데이 4-카테고리 패널(활성만 노출) + PC(768+) 1줄 */
.cat-panel{ display:none; }
.cat-panel.on{ display:block; }
@media (min-width:768px){
  #catday .item_container.custom_scroll { grid-template-rows:auto;overflow-x:hidden; }
  
  #26su .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 {transition: opacity 0.5s ease;opacity: 1;}
#hdWrap.hide, #headerBanner.hide {opacity: 0;pointer-events: none;}
 

 :root{
    --wf-max: 1180px;
    --wf-pad: clamp(16px, 4vw, 28px);
    --ph:#17181b; --ph-b:#2c2e33; --line:#202227;
    --ink:#f3f3f5; --mut:#8b9099; --tag:#5a5d63; --bg:#000;
    --on:#3ad08b;
    --bar:#26282d; --bar-dk:#3a3d44;
  }
  *{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:#000;  }
  .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:var(--mut); text-decoration:none; user-select:none; cursor:pointer; }
  .chip.on{ color:#fff; border-bottom-color:#fff; }

  /* 날짜칩 */
  .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 var(--ph-b); background:var(--ph);
    color:var(--mut); font-size:12px; font-weight:700; display:flex; align-items:center; gap:5px; user-select:none; white-space:nowrap; cursor:pointer; }
  .date.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .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:#0b0b0d; }
  .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); }
  .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:#16171a; border:1px solid var(--ph-b); 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; }

  /* 원데이특가 단일상품 */
  .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; }
  @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: #17181b;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:#161719; border:2px solid #444444; box-shadow:0 3px 12px rgba(0,0,0,.5); 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:#202125; }
  }

  /* ── 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_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:#fff; font-weight:600; font-size:14px; }
  .item .item_price .unit{ font-size:.78em; font-weight:400; opacity:.8; }
  .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 한정) */
  #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;}
  }
  .cat-coupon{ display: none;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: #111;
    font-size: 14px; 
    text-decoration: none;
    white-space: nowrap;
    background: #f0f5fa;
    padding: 10px 15px;
    border-radius: 3px;}
  .cat-coupon div {font-size: 12px; }
  .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;
}
 
/* BASIC css end */