/* =============================================================
   Google Play × SteelSeries — mobile.css  (v2)
   -------------------------------------------------------------
   반응형(태블릿 / 모바일) 전용 스타일시트.

   ▸ 기존 데스크톱 소스(style.css, 각 페이지 inline <style>)는
     전혀 수정하지 않는다. 이 파일은 각 페이지 <head>의 "맨 마지막"에
     link 되어, 동일 우선순위 규칙을 뒤에서 덮어쓰는 방식으로 동작한다.

   ▸ 브레이크포인트
       1024px 이하 : 태블릿 (그리드 열 수만 축소)
        768px 이하 : 모바일 (앱형 UI — 하단 탭바 / 고정 구매 바 /
                     스와이프 갤러리 / 햄버거 드로어)
        480px 이하 : 소형 단말 (여백 미세 조정)

   ▸ 모바일 전용 컴포넌트 마크업 위치
       하단 탭바(.m-tabbar), 햄버거 드로어  → inc/topper.php
       스와이프 갤러리(.m-gallery)          → product_detail.php
       고정 구매 바(.m-cta-bar)             → product_detail.php, cart.php
   ============================================================= */


/* ──────────────────────────────────────────────
   0. 공통 안전장치 (전 해상도)
   ────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
/* overflow-x:hidden 은 스크롤 컨테이너를 만들어 sticky 헤더를 깨뜨리므로 clip 사용 */
html, body { overflow-x: clip; }
img, video { max-width: 100%; }

/* 모바일 전용 요소는 데스크톱에서 항상 숨김 */
.m-gallery, .m-cta-bar, .hero-img-mo { display: none; }
/* 주의: header 의 `.hero-banner-link img { display:block }` (특이성 0,1,1) 가
   위의 `.hero-img-mo` (0,1,0) 를 이겨버리므로, 더 높은 특이성으로 한 번 더 숨긴다 */
.hero-banner-link .hero-img-mo { display: none; }


/* ══════════════════════════════════════════════
   1. 태블릿 — 1024px 이하
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* 메인 추천 제품 5열 → 3열 */
  .products-grid { grid-template-columns: repeat(3, 1fr); }

  /* 제품 목록: 사이드바 폭 축소 */
  .page-body { padding: 24px 20px; }
  .sidebar { width: 170px; }

  /* 상세: 우측 패널 폭 축소 */
  .detail-top { grid-template-columns: 1fr 280px; }
  .detail-name { font-size: 28px; }

  /* 주문조회: 좌측 카드 폭 축소 */
  .layout { grid-template-columns: 260px 1fr; }
}


/* ══════════════════════════════════════════════
   2. 모바일 — 768px 이하
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 2-1. 레이아웃 & 터치 기본기 ─────────── */
  .page-wrapper      { padding: 0 16px; }
  .page-body         { padding: 20px 16px; max-width: 100%; display: block; }
  .section           { padding: 28px 16px; }
  .navbar-inner      { padding: 0 14px; height: 54px; }
  .info-bar-inner,
  .service-bar-inner { padding: 0 16px; }

  /* 모든 버튼: 터치 타깃 최소 높이 확보 */
  .btn { min-height: 48px; }
  button, a { -webkit-tap-highlight-color: rgba(240,78,35,.12); }

  /* iOS 자동 확대 방지 : 입력 폰트 16px 이상 */
  .form-input,
  .gate-input,
  .sort-select,
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select { font-size: 16px; }
  .form-input { padding: 13px 14px; }

  /* ── 2-2. 상단 네비게이션 ─────────────────── */
  /* 데스크톱 메뉴 숨김 → 햄버거 드로어 + 하단 탭바로 대체 (inc/topper.php) */
  .navbar-links { display: none; }
  .navbar-logo  { height: 22px; }
  .navbar-icons { margin-left: 4px; gap: 0; }
  .navbar-icons button { width: 42px; height: 42px; font-size: 19px; }

  /* ── 2-3. 메인 : 히어로 ───────────────────── */
  /* 모바일 전용 이미지 준비 전까지는 PC 이미지 그대로 사용.
     모바일 이미지가 준비되면 index.php 주석 참조 (has-mobile 클래스) */
  .hero-inner { max-width: 100%; }
  .hero-banner-link.has-mobile .hero-img-pc { display: none; }
  .hero-banner-link.has-mobile .hero-img-mo { display: block; }

  /* ── 2-4. 메인 : 혜택 바 ──────────────────── */
  .info-bar-inner { flex-wrap: wrap; }
  .info-bar-item {
    flex: 1 1 100%; padding: 14px 4px; gap: 10px;
    border-right: none; border-bottom: 1px solid #2a2a2a;
  }
  .info-bar-item:last-child { border-bottom: none; }

  /* ── 2-5. 메인 : 섹션 헤더 ────────────────── */
  .section-header { margin-bottom: 16px; }
  .section-title  { font-size: 18px; }
  .section-header .btn-xs { font-size: 14px !important; padding: 8px 14px; min-height: 0; }

  /* ── 2-6. 제품 카드 그리드 (메인/목록 공통) ── */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 28px;
  }
  .product-card       { padding: 12px 12px 14px; border-radius: 10px; }
  .product-card:hover { transform: none; }          /* 터치에서 hover 부양 제거 */
  .product-card-img   { margin-bottom: 10px; border-radius: 8px; }
  .product-card-name  { font-size: 13.5px; line-height: 1.35; }
  .product-card-sub   {
    font-size: 11.5px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card-option{ font-size: 10.5px; margin-bottom: 6px; }
  .product-card-orig  { font-size: 11px; }
  .product-card-header { gap: 6px; }
  .tier-badge-sm { flex-shrink: 0; }
  .tier-price-row,
  .tier-row { flex-wrap: wrap; gap: 2px 6px; font-size: 11px; }
  .tier-price-row .price-blue,
  .tier-price-row .price-purple,
  .tier-price-row .price-red,
  .tier-row .price-blue,
  .tier-row .price-purple,
  .tier-row .price-red { font-size: 16px; }
  .tier { font-size: 10px; padding: 2px 5px; }

  /* ── 2-7. 메인 : 서비스 바 (2 x 2) ────────── */
  .service-bar-inner { flex-wrap: wrap; }
  .service-item {
    flex: 0 0 50%; max-width: 50%;
    padding: 16px 8px; gap: 10px;
    border-right: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
  }
  .service-item:nth-child(2n)        { border-right: none; }
  .service-item:nth-last-child(-n+2) { border-bottom: none; }
  .service-icon        { font-size: 22px; }
  .service-text strong { font-size: 13px; }
  .service-text span   { font-size: 11px; }

  /* ── 2-8. 제품 목록 : 사이드바 → 가로 스크롤 칩 ── */
  .sidebar {
    width: 100%; margin-bottom: 14px;
    position: sticky; top: 54px; z-index: 100;
    background: var(--white);
    padding: 10px 0 6px;
    border-bottom: 1px solid var(--gray-200);
  }
  .sidebar-section       { margin-bottom: 0; position: relative; }
  .sidebar-section-title { display: none; }

  /* 1단계: 카테고리 칩 */
  .cat-list {
    display: flex; gap: 8px; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .cat-list::-webkit-scrollbar { display: none; }
  .cat-list > li { flex: 0 0 auto; }
  .cat-list > li > a {
    padding: 10px 16px; border-radius: 999px;
    border: 1px solid var(--gray-200); background: var(--white);
    font-size: 13.5px; white-space: nowrap;
  }
  .cat-list > li > a.active {
    background: var(--orange); border-color: var(--orange);
    color: var(--white); font-weight: 700;
  }

  /* 2단계: 서브 카테고리 칩
     카테고리 칩 줄은 가로 스크롤(nowrap)이므로, 서브 목록은 기본적으로 감추고
     "선택된 카테고리"의 것만 카테고리 줄 아래에 두 번째 줄로 펼친다.
     (:has 미지원 구형 브라우저에서는 카테고리 칩만 노출 — 기능상 문제 없음) */
  .subcat-list { display: none; margin: 0; }
  .subcat-list li { flex: 0 0 auto; }
  .subcat-list li a {
    display: block; padding: 9px 14px; border-radius: 999px;
    border: 1px solid var(--gray-200); background: var(--gray-50);
    font-size: 12.5px; white-space: nowrap; color: var(--gray-600);
  }
  .subcat-list li a::before { display: none; }
  .subcat-list li a.active {
    background: #ffeee9; border-color: var(--orange);
    color: var(--orange); font-weight: 700;
  }

  @supports selector(:has(*)) {
    /* 서브 목록이 펼쳐질 자리(2번째 줄) 확보 */
    .sidebar-section:has(.cat-list > li > a.active + .subcat-list),
    .sidebar-section:has(.subcat-list a.active) { padding-bottom: 48px; }

    .cat-list > li > a.active + .subcat-list,
    .cat-list > li:has(.subcat-list a.active) > .subcat-list {
      display: flex; gap: 6px; flex-wrap: nowrap;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      position: absolute; left: 0; right: 0; bottom: 4px;
    }
    .subcat-list::-webkit-scrollbar { display: none; }
  }

  .main { width: 100%; }
  .list-header { margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  .list-count  { font-size: 15px; }
  .sort-select { font-size: 13px; padding: 10px 32px 10px 12px; }

  /* 페이지네이션 */
  .pagination { flex-wrap: wrap; }
  .page-btn { width: 40px; height: 40px; }

  /* ── 2-9. 제품 상세 ───────────────────────── */
  /* grid 를 유지하면 자식의 min-content 폭 때문에 가로 넘침이 생기므로 block 으로 전환 */
  .detail-top  { display: block; margin-bottom: 24px; }
  .detail-left { display: block; }

  /* 데스크톱용 썸네일/메인이미지 숨김 → 스와이프 갤러리로 대체 */
  .thumbs, .main-image { display: none; }

  /* 스와이프 갤러리 (scroll-snap) */
  .m-gallery { display: block; position: relative; margin: 0 -16px; }
  .m-gallery-track {
    display: flex;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .m-gallery-track::-webkit-scrollbar { display: none; }
  .m-gallery-slide {
    flex: 0 0 100%; scroll-snap-align: center;
    aspect-ratio: 1 / 1; background: var(--gray-50);
    display: flex; align-items: center; justify-content: center;
  }
  .m-gallery-slide img { width: 100%; height: 100%; object-fit: contain; }
  .m-gallery-dots {
    position: absolute; left: 0; right: 0; bottom: 12px;
    display: flex; justify-content: center; gap: 6px;
    pointer-events: none;
  }
  .m-gallery-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(0,0,0,.18); transition: all .2s;
  }
  .m-gallery-dots span.on { background: var(--orange); width: 18px; border-radius: 4px; }

  .detail-right { position: static; margin-top: 18px; }
  .detail-name  { font-size: 22px; line-height: 1.3; }
  .detail-desc  { font-size: 14px; }
  .detail-label { font-size: 12px; margin-bottom: 14px; }
  .price-main   { font-size: 26px; }
  .price-main-row { flex-wrap: wrap; gap: 8px; }
  .discount-badge { font-size: 11.5px; }

  .purchase-panel { padding: 18px 16px; border-radius: 12px; }
  .final-amount   { font-size: 24px; }
  /* 패널 내 구매 버튼은 하단 고정 바(.m-cta-bar)가 대신하므로 숨김 */
  .purchase-panel form { display: none; }
  .purchase-panel .divider { display: none; }

  .detail-sequence { margin: 24px -16px 0; }

  /* ── 2-10. 하단 고정 구매 바 (상세/장바구니 공통) ── */
  .m-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 290;
    display: flex; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  }
  .m-cta-bar form { flex: 1; display: flex; margin: 0; }
  .m-cta-bar .btn {
    flex: 1; width: 100%;
    padding: 14px 0; font-size: 15px; border-radius: 8px;
    white-space: nowrap;
  }
  .m-cta-bar form:first-child,
  .m-cta-bar > a:first-child { flex: 0 0 34%; }

  /* ── 2-11. 장바구니 ───────────────────────── */
  .cart-title { font-size: 19px; margin-bottom: 16px; }
  /* flex-wrap 은 줄바꿈 위치가 내용 폭에 따라 흔들려 깨져 보이므로
     명시적 grid 로 재배치:
       [이미지 | 상품정보           ]   (삭제 ✕ 는 우상단 절대배치)
       [이미지 | 수량      | 가격   ]                                */
  .cart-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "img meta meta"
      "img qty  price";
    gap: 2px 12px;
    align-items: start;
    position: relative;
    padding: 16px 30px 16px 0;
  }
  .cart-item > form { position: absolute; top: 12px; right: -6px; }
  .cart-item-remove { width: 34px; height: 34px; }
  .cart-item-img   { grid-area: img; width: 72px; height: 72px; }
  .cart-item-meta  { grid-area: meta; min-width: 0; }
  .cart-item-name  { font-size: 14px; padding-right: 4px; }
  .cart-item-label { font-size: 11.5px; }
  .cart-item-tier  { font-size: 11.5px; }
  .cart-item-qty-fixed {
    grid-area: qty; align-self: end;
    font-size: 12px;
  }
  .cart-item-price {
    grid-area: price; align-self: end;
    width: auto; text-align: right;
  }
  .cart-item-final { font-size: 15.5px; }

  .cart-summary { padding: 18px 16px; border-radius: 12px; }
  .summary-row  { font-size: 13.5px; }
  .summary-total .amount { font-size: 22px; }
  /* 데스크톱용 하단 버튼 → 고정 구매 바로 대체 */
  .cart-actions { display: none; }

  /* ── 2-12. 결제(checkout) ─────────────────── */
  /* .page-body 는 2-1에서 display:block → 2열 grid 해제, 세로 배치 */
  .section-title-right { font-size: 16px; margin-bottom: 14px; margin-top: 32px; }
  .order-item  { gap: 12px; padding-bottom: 16px; margin-bottom: 16px; }
  .order-img   { width: 64px; height: 64px; font-size: 30px; }
  .order-name  { font-size: 14px; }
  .order-sub   { font-size: 12px; }
  .order-qty   { font-size: 12px; }
  .order-price { font-size: 14px; }
  .total-amount { font-size: 22px; }

  .address-row { flex-wrap: nowrap; }
  .address-row .zonecode-input { width: auto; flex: 1 1 auto; min-width: 0; }
  .btn-addr-search { flex: 0 0 auto; padding: 12px 14px; font-size: 13px; }

  .input-with-btn { flex-wrap: nowrap; }
  .btn-send { padding: 12px 13px; font-size: 13px; }

  /* 결제 버튼: 하단 고정 (탭바는 자동 숨김 — inc/topper.php 참조) */
  .pay-btn {
    position: fixed; left: 12px; right: 12px; z-index: 290;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto; margin-bottom: 0;
    font-size: 16px; padding: 16px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(240,78,35,.35);
  }
  .pay-notice { display: none; }

  /* ── 2-13. 주문 완료 ──────────────────────── */
  .complete-head  { margin-bottom: 24px; }
  .complete-icon  { font-size: 44px; }
  .complete-title { font-size: 20px; }
  .complete-card  { padding: 18px 16px; border-radius: 12px; }
  .info-row       { font-size: 13px; gap: 12px; }
  .info-row .val  { text-align: right; }
  .complete-btns  { flex-direction: column; gap: 8px; }
  .btn-track, .btn-home { padding: 16px; }

  /* ── 2-14. 주문/배송 조회 ─────────────────── */
  .page-title    { font-size: 21px; }
  .page-subtitle { font-size: 13px; margin-bottom: 20px; }
  .layout        { grid-template-columns: 1fr; gap: 14px; }
  .left-card,
  .right-card    { padding: 18px 16px; border-radius: 12px; }
  .btn-search    { padding: 15px; min-height: 48px; }

  .steps { margin-bottom: 20px; }
  .step-circle { width: 42px; height: 42px; font-size: 18px; }
  .step-label  { font-size: 11px; word-break: keep-all; text-align: center; }
  .step-line   { max-width: 28px; margin-bottom: 30px; }

  .bottom-grid { grid-template-columns: 1fr; gap: 12px; }
  .ship-info-box,
  .order-summary-box { padding: 16px 14px; }
  .ship-row { font-size: 12.5px; gap: 12px; }

  .help-box {
    flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 18px 16px;
  }
  .help-cs { margin-left: 0; text-align: left; }

  /* ── 2-15. 쿠폰 게이트 ────────────────────── */
  .gate-wrap   { padding: 32px 16px; }
  .gate-logos  { margin-bottom: 28px; max-width: 100%; }
  .gate-logos img { max-width: 240px; height: auto; }
  .gate-card   { padding: 28px 20px; }
  .gate-title  { font-size: 18px; }
  .gate-input  { padding: 15px 16px; }
  .gate-submit { padding: 16px; min-height: 50px; }
  .gate-notice { padding: 16px; }

  /* ── 2-16. 결제 실패 페이지 ───────────────── */
  .fail-card  { padding: 36px 20px; }
  .fail-title { font-size: 18px; }
  .fail-msg   { font-size: 13.5px; }
  .fail-btn   { display: block; padding: 16px; }

  /* ── 2-17. 푸터 ───────────────────────────── */
  .site-footer { margin-top: 32px; }
  /* 메인처럼 service-bar 바로 다음에 푸터가 오면 사이 여백 제거
     (둘 다 자체 구분선이 있어 시각적으로 자연스럽게 이어진다) */
  .service-bar + .site-footer { margin-top: 0; }

  /* 정책 링크 6개: 2열 정렬은 유지하되, 버튼이 아닌 낮은 톤의 텍스트 링크로 */
  .footer-top-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
    padding: 10px 16px 12px;
  }
  .footer-top-inner a,
  .footer-top-inner a:first-child,
  .footer-top-inner a:last-child {
    display: block; padding: 7px 0;
    font-size: 12px; font-weight: 500; color: var(--gray-600);
    text-align: left; background: none;
    border: none; border-radius: 0;
    white-space: nowrap;
  }
  .footer-top-inner a.highlight { color: var(--orange); font-weight: 600; }

  .footer-main {
    grid-template-columns: 1fr; gap: 24px;
    padding: 24px 16px;
  }
  .footer-brand img { max-width: 160px; height: auto; }
  .footer-info-row { flex-direction: column; gap: 2px; }
  .footer-info-row .fi-item + .fi-item::before { content: none; margin: 0; }
  .footer-info-row .fi-item { align-items: flex-start; }
  .footer-info-row strong { flex-shrink: 0; white-space: nowrap; }
  .footer-cs { text-align: left; }
  .footer-cs-tel { font-size: 22px; }
  .footer-cs-btns { justify-content: flex-start; }
  .footer-bottom-inner { padding: 12px 16px; }
  .footer-bottom-inner p { font-size: 10.5px; }
}


/* ══════════════════════════════════════════════
   3. 소형 단말 — 480px 이하
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {

  .section { padding: 22px 12px; }
  .page-body { padding: 16px 12px; }
  .navbar-inner { padding: 0 10px; }

  /* 제품 카드 2열 유지 + 여백 축소 */
  .products-grid { gap: 9px; }
  .product-card  { padding: 10px 10px 12px; }
  .product-card-name { font-size: 12.5px; }
  .product-card-sub  { font-size: 10.5px; }
  .tier-price-row .price-blue,
  .tier-price-row .price-purple,
  .tier-price-row .price-red,
  .tier-row .price-blue,
  .tier-row .price-purple,
  .tier-row .price-red { font-size: 14.5px; }

  /* 서비스 바 : 소형 단말에서도 2열(2x2) 유지 — 여백/폰트만 축소 */
  .service-item { padding: 14px 6px; gap: 8px; }
  .service-icon { font-size: 20px; }
  .service-text strong { font-size: 12.5px; }
  .service-text span   { font-size: 10.5px; }

  /* 상세 갤러리/시퀀스 풀블리드 유지 */
  .m-gallery       { margin: 0 -12px; }
  .detail-sequence { margin: 24px -12px 0; }
  .detail-name { font-size: 20px; }
  .price-main  { font-size: 23px; }

  /* 장바구니 */
  .cart-item-img { width: 64px; height: 64px; }

  /* 배송 단계 */
  .step-circle { width: 36px; height: 36px; font-size: 15px; }
  .step-label  { font-size: 10px; }
  .step-line   { max-width: 14px; margin-bottom: 26px; }

  /* 게이트 */
  .gate-card  { padding: 24px 16px; }
  .gate-title { font-size: 16.5px; }
}