/* ==========================================================================
   dukwootrading.com — 모바일 사용성 공통 보정 (2026-09-04)
   --------------------------------------------------------------------------
   왜 별도 파일인가:
     이 사이트는 692장 전 페이지가 각자 <style> 블록을 인라인으로 들고 있다.
     같은 수정을 692곳에 복붙하면 다음 수정 때 또 692곳을 고쳐야 하므로
     모바일 보정만 이 한 장으로 모으고 각 페이지 <head> 에서 링크만 건다.

   왜 !important 인가:
     <link> 는 폰트 링크 바로 뒤(= 페이지 <style> 앞)에 들어간다.
     동일 특정도면 뒤에 오는 인라인 <style> 이 이기므로, 여기서 이기려면
     !important 가 필요하다. 남용을 막기 위해 아래 규칙은 전부
     @media (max-width:768px) 안에서만, 손대는 속성만 지정한다.
     데스크톱(769px 이상)은 이 파일의 영향을 전혀 받지 않는다.

   고치는 것:
     A. 입력칸 16px 미만 → iOS 가 포커스 때 화면을 확대해버린다
     B. 체크박스 탭 영역 → 줄 전체(label)를 44px 로
     C. 브레드크럼 링크 탭 영역
     D. 푸터·품번·카드 링크 등 높이 19~25px 짜리 탭 영역
     E. 본문 글자 최소 14px (뱃지·캡션 같은 의도적 소형 글자는 제외)
   ========================================================================== */

@media (max-width: 768px) {

  /* ---- A. iOS 자동 확대 방지 -------------------------------------------
     iOS Safari 는 폰트가 16px 미만인 입력칸에 포커스가 가면 페이지를 확대하고
     빠져나오지 않는다. 값만 16px 로 올리고 나머지 스타일은 건드리지 않는다. */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* 검색·수량칸이 16px 로 커지면서 좁아 보이지 않게 최소 높이만 맞춘다 */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], select, textarea {
    min-height: 44px !important;
  }
  textarea { min-height: 120px !important; }
  /* 허니팟(스팸 트랩)은 화면 밖에 숨어 있어야 하므로 위 규칙에서 되돌린다 */
  .inq-hp, .inq-hp input {
    min-height: 0 !important;
    height: 1px !important;
  }
  /* 수량칸은 폭이 88px 로 고정돼 있어 16px 글자가 들어가도록만 넓힌다.
     너무 넓히면 옆의 품목명이 줄바꿈되므로 96px 까지만. */
  .bulk-item input[type="number"] { width: 96px !important; }

  /* ---- B. 체크박스: 줄 전체를 탭 영역으로 --------------------------------
     체크박스 자체는 보이는 크기를 유지하되 패딩으로 24px 상자를 만들고,
     실제 탭은 label(줄 전체)에서 받는다. */
  .inq-check,
  .inq-agree {
    min-height: 44px !important;
    align-items: center !important;
  }
  /* ⚠️ 네이티브 체크박스는 padding 을 무시한다(크롬 실측: content-box 로 바꿔도
     computed padding 이 0). 그래서 컨트롤 자체를 22px 로 키운다.
     실제 탭은 아래 label(줄 전체 44px)에서 받는다. */
  .inq-check input[type="checkbox"],
  .inq-agree input[type="checkbox"],
  .bulk-item input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    margin-top: 0 !important;
  }
  .bulk-item { min-height: 44px !important; }
  .bulk-item label {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  /* ---- C. 브레드크럼 ----------------------------------------------------
     「홈」 이 13x23px 라 손가락으로 못 누른다. 링크를 44x44 블록으로 만든다.
     .breadcrumb 는 flex 라 링크만 키우면 줄 높이만 늘고 배치는 그대로다. */
  .breadcrumb {
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
  }
  .breadcrumb a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 6px !important;
  }

  /* ---- D. 탭 영역 44px 확보 ---------------------------------------------
     D-1. 흐름을 바꿔도 되는 블록형 링크·버튼: 최소 높이를 준다. */
  .nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
  /* ⚠️ .hamburger 는 display 를 건드리면 안 된다 — 안에 든 막대 3개(span)가
     block 으로 쌓여 있어서 flex 로 바꾸면 가로로 나란히 서 버린다.
     box-sizing 이 border-box 라 width/height 만 주면 정확히 44x44 가 된다. */
  .hamburger {
    width: 44px !important;
    height: 44px !important;
    padding: 11px !important;
  }
  .card-link,
  .see-all {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
  .filter-tab,
  .bulk-tab,
  .bulk-hint-btn,
  .bulk-add-btn,
  .icnbtn,
  .ghostbtn,
  .storebtn,
  .xbtn,
  .more,
  .cart-continue {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .xbtn { min-width: 44px !important; }
  .bulk-del {
    width: 44px !important;
    height: 44px !important;
  }
  /* 삭제 버튼이 커진 만큼 줄 안에서 줄어들지 않게 */
  .bulk-item .bulk-del { flex-shrink: 0 !important; }

  /* D-2. 알약(pill) 형태 링크 — 인라인 style 로 padding 이 박혀 있어 덮어쓴다 */
  .brand-links a,
  .brand-nav a {
    padding: 12px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  /* D-3. 글 흐름 안의 링크 — 음수 마진으로 보이는 위치는 그대로 두고
          탭 영역만 위아래로 넓힌다(보이는 레이아웃은 변하지 않는다). */
  .popular-links a,
  .footer-links a,
  .biz-strip a,
  .cat-note a,
  .bulk-note a,
  .inline-cta,
  p > a,
  li > a,
  a[href^="mailto:"],
  a[href^="tel:"] {
    display: inline-block !important;
    padding: 14px 6px !important;
    margin: -14px -2px !important;
    min-width: 44px !important;
    text-align: center !important;
  }
  /* 위 규칙에서 되돌릴 것 — 이미 블록형 탭 영역을 가진 링크들 */
  p > a.card-link, li > a.card-link,
  p > a.see-all, li > a.see-all,
  p > a.storebtn, li > a.storebtn,
  p > a.product-card, li > a.product-card {
    padding: 0 !important;
    margin: 0 !important;
  }
  /* 푸터 링크는 세로로 겹치면 오탭이 나므로 음수 마진 대신 줄 간격을 준다 */
  .footer-links {
    line-height: 1.2 !important;
  }
  .footer-links a {
    margin: 2px -2px !important;
  }

  /* ---- E. 본문 글자 최소 14px -------------------------------------------
     아래 선택자는 전부 현재 14px 미만으로 확인된 "본문" 만 골랐다.
     뱃지(.brand-badge 11.2px) · 카드 분류칩(.product-type) ·
     보조설명(.bi-sub) · 아이브로우 라벨(.section-label 등)은
     의도적으로 작은 UI 라 손대지 않는다. */
  .bulk-note,
  .cat-note,
  .step-note,
  .faq-a,
  .card ul li,
  .card-link,
  .cross-card p,
  .map-card-header p,
  .office-info p,
  .product-card p,
  .step-card p,
  .store-cta-banner .cta-text p,
  .store-feature p,
  .strength-card p,
  .brand-c .bs,
  .tb-c .s,
  .form-row label,
  .product-name,
  .brand-nav a,
  .popular-links,
  .popular-links a,
  .footer-links,
  .footer-links a,
  footer p,
  .foot-b {
    font-size: 14px !important;
  }
}
