/* responsive.css — 반응형 오버레이
   원본은 min-width 1280px 와이드 데스크톱 전용 설계(분기 1919/1469px)라
   1280px 미만은 이 파일이 담당한다. ≥1280px에서는 아무 규칙도 적용되지 않는다.

   구조
   - ≤1279px : 원본의 고정 최소폭(min-width:1280px 등) 해제 + 컨테이너 유동화
   - ≤1024px : GNB → 햄버거 드로어, 상품 그리드 4→3열, 상세페이지 세로 스택
   - ≤767px  : 2열 그리드, 메인 CMS 컴포넌트는 원본 [data-device=MOBILE] 스타일로 전환
               (속성 스위치는 common.js가 matchMedia로 처리) */

@charset "UTF-8";

/* =========================================================
   ≤1279px — 최소폭 해제 & 유동화
   ========================================================= */
@media (max-width: 1279.98px) {
  html, body { overflow-x: clip; } /* sticky를 깨지 않는 clip 사용 */
  body { min-width: 0; }

  /* 컨테이너 유동화 */
  .container { width: auto; }
  .container,
  .container-fixed,
  .container-fixed-sm,
  .container-fixed-md,
  .container-fixed-wide,
  .container-616,
  .container-824 {
    min-width: 0 !important;
    max-width: 100%;
  }
  .container-fixed,
  .container-fixed-sm { padding-left: 24px; padding-right: 24px; }
  #top-banner .banner-container { width: auto !important; min-width: 0 !important; }
  #footer { min-width: 0; }

  /* 헤더 */
  .global-header { min-width: 0 !important; }
  .global-header .header-container { width: 100%; min-width: 0 !important; padding-left: 16px; padding-right: 16px; }
  .global-header .header-search { flex: 1 1 auto; min-width: 0; }
  .global-header .header-search .text-input-box { width: 100%; min-width: 0; }

  /* 메인 CMS 섹션 (원본 PC 최소폭 해제) */
  ._cms_root_6ft8l_5,
  ._cms_root_1gd01_6,
  ._cms_root_1nl20_25,
  ._cms_root_xqldc_10,
  ._cms_root_eq5lt_9,
  ._cms_root_14tok_5,
  ._cms_root_19bul_12,
  ._cms_root_1wzis_14,
  ._cms_root_1iy01_10 {
    width: 100% !important;
    min-width: 0 !important;
  }
  .keyvisual-carousel-inner { width: 100% !important; min-width: 0 !important; }
  .keyvisual-indicator-player { width: 100% !important; min-width: 0 !important; }
  .lb-frame { width: 100% !important; }
  .lb-img { min-width: 0 !important; }
  .cmpt-curation-carousel,
  .cmpt-weekly-carousel { width: 100% !important; min-width: 0 !important; }
  ._root_1c6cz_1.shared-heading,
  ._root_efo32_17.shared-button-more { min-width: 0 !important; }
  .navigator.st-magazine + .container-fixed-sm { min-width: 0 !important; }

  /* 브랜드 카드: 한 줄 12개 → 줄바꿈 */
  .brand-row { flex-wrap: wrap; row-gap: 24px; }
  .brand-col { flex: 1 1 120px; max-width: 168px; }

  /* 특가 카드 */
  .cmpt-special-list { flex-wrap: wrap; }

  /* 상세페이지 고정폭 완화 */
  .view-goods-start { max-width: 100%; }
}

/* =========================================================
   ≤1024px — 내비게이션 전환 & 레이아웃 축소
   ========================================================= */
@media (max-width: 1024.98px) {
  /* GNB 숨기고 햄버거 표시 (드로어는 common.js가 생성) */
  .global-header .header-nav { display: none; }
  .mobile-menu-button { display: inline-flex; }

  /* 카테고리 상품 그리드 6열 → 3열 */
  .row-cols-lg-6 > * { width: 33.333% !important; }

  /* 상세페이지: 갤러리 + 구매영역 세로 스택 */
  .view-goods-top { flex-direction: column; }
  .view-goods-start,
  .view-goods-end { width: 100% !important; }
  .view-goods-end { max-width: 520px; margin: 32px auto 0; }
  .view-goods-hero .carousel .carousel-item { width: 320px; }

  /* 카테고리 유틸 바 줄바꿈 */
  .catalog-utility { flex-wrap: wrap; row-gap: 12px; }
}

/* =========================================================
   ≤767px — 모바일
   메인 CMS 컴포넌트는 common.js가 data-device="MOBILE"로 전환하며
   원본 자체 모바일 스타일(pages/main.css 내 74건)이 적용된다.
   ========================================================= */
@media (max-width: 767.98px) {
  .container-fixed,
  .container-fixed-sm { padding-left: 16px; padding-right: 16px; }

  /* 헤더 */
  .global-header .header-gateway { display: none; }

  /* 그리드 2열 */
  .row-cols-lg-6 > * { width: 50% !important; }
  .brand-row { row-gap: 16px; }
  .brand-col { flex: 1 1 30%; max-width: none; }

  /* 타이포 축소 */
  .heading.st-xlg { font-size: 24px; line-height: 32px; }
  .heading.st-lg { font-size: 20px; line-height: 28px; }
  .heading.st-sm { font-size: 18px; line-height: 26px; }
  .checkout-title { font-size: 24px; line-height: 32px; }

  /* 카테고리: 하위 카테고리 칩 가로 스크롤 */
  .navigator.st-pill .navigator-list { flex-wrap: nowrap; overflow-x: auto; }
  .page-utility .breadcrumb { overflow-x: auto; }

  /* 상세: 갤러리 1장 꽉 차게, 상세설명 이미지 유동화 */
  .view-goods-hero .carousel .carousel-item { width: 100%; }
  .speedycat-container { max-width: 100% !important; }
  .speedycat-container img { max-width: 100%; height: auto; }

  /* 모달이 화면을 벗어나지 않게 */
  .modal .modal-default { width: calc(100vw - 32px) !important; max-width: 434px; }

  /* 브랜드 카드/키워드 그리드: MOBILE 전환 시 유실되는 flex 레이아웃 복구 */
  .brand-row { display: flex !important; flex-wrap: wrap; column-gap: 8px; }
  .brand-col { flex: 0 0 31% !important; max-width: none; }
  .hotkw-grid { display: flex !important; }
  .hotkw-grid-list { display: flex !important; flex-wrap: wrap; gap: 16px !important; justify-content: center; }
  .hotkw-grid-item { flex: 0 0 calc(50% - 8px); }
  .cmpt-special-list { display: flex !important; flex-wrap: wrap; gap: 16px; }
  .cmpt-special-card { flex: 1 1 100% !important; max-width: 100% !important; }
}

/* =========================================================
   모바일 드로어 (≤1024px에서만 노출 — common.js가 마크업 생성)
   ========================================================= */
.mobile-menu-button {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mobile-menu-button::before,
.mobile-menu-button::after,
.mobile-menu-button i {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  border-radius: 1px;
  background: #000;
}
.mobile-menu-button::before { top: 12px; }
.mobile-menu-button i { top: 19px; }
.mobile-menu-button::after { top: 26px; }

.mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.4);
}
.mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: min(360px, 86vw);
  background: #fff;
  transform: translateX(-105%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.drawer-open .mobile-drawer { transform: translateX(0); }
body.drawer-open .mobile-drawer-overlay { display: block; }
body.drawer-open { overflow: hidden; }

.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
}
.mobile-drawer__close {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: #000;
  cursor: pointer;
  padding: 8px;
}
.drawer-list { margin: 0; padding: 0; list-style: none; }
.drawer-item { border-bottom: 1px solid #eee; }
.drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  text-align: left;
  cursor: pointer;
}
.drawer-toggle .drawer-arrow { font-style: normal; font-size: 12px; color: #999; transition: transform 0.2s; }
.drawer-item.st-open .drawer-toggle .drawer-arrow { transform: rotate(180deg); }
.drawer-sub { display: none; padding: 0 16px 12px; }
.drawer-item.st-open .drawer-sub { display: block; }
.drawer-sub a {
  display: block;
  padding: 8px 0;
  font-size: 13px;
  color: #666;
  text-decoration: none;
}
.drawer-gateway {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid #eee;
}
.drawer-gateway a {
  flex: 1;
  padding: 12px;
  border: 1px solid #eee;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 1024.98px) {
  .mobile-menu-button { display: inline-flex; align-self: center; }
}