/* ══════════════════════════════
   MOBILE RESPONSIVE · 한국형 아기자기
══════════════════════════════ */

/* ── HAMBURGER BUTTON ── */
.gnb-hamburger{
  display:none;width:32px;height:32px;border-radius:7px;
  border:1px solid var(--border);background:var(--bg2);
  align-items:center;justify-content:center;
  cursor:pointer;color:var(--text2);font-size:18px;
  transition:all .13s;flex-shrink:0;
}
.gnb-hamburger:hover{background:var(--bg3);border-color:var(--border2)}

/* ── MOBILE SIDEBAR OVERLAY ── */
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.4);backdrop-filter:blur(3px);
  z-index:150;opacity:0;pointer-events:none;transition:opacity .2s;
}
[data-theme="dark"] .sidebar-overlay{background:rgba(0,0,0,.55)}
.sidebar-overlay.on{opacity:1;pointer-events:all}

/* ══════════════════════════════
   TABLET (≤900px)
══════════════════════════════ */
@media(max-width:900px){
  .gnb-hamburger{display:flex}

  /* 사이드바: 모바일에서 슬라이드 오버레이 */
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:220px;z-index:160;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    height:100vh;top:0;
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:block}

  /* GNB 네비 숨김 */
  .gnb-nav{display:none}

  /* GNB 간결화 */
  .gnb{padding:0 12px;gap:8px}
  .gnb-logo{margin-right:auto}
  .gnb-logo-sub{display:none}
  .gnb-right{gap:6px}
  .gnb-uname{display:none}
  .gnb-company{display:none}
  .gnb-user svg{display:none}

  /* 메인 콘텐츠 */
  .page{padding:16px}
  .portal-wrap{min-height:calc(100vh - 48px)}

  /* 홈 카드 그리드 */
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }

  /* 즐겨찾기 카드 그리드 */
  [style*="repeat(3,1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* 트래킹 카드 4열 → 2열 */
  [style*="repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* 테이블 카드 헤더 내 검색/필터 */
  .card-hd{flex-wrap:wrap;gap:6px;padding:10px 14px}
  .card-hd [style*="margin-left:auto"]{
    margin-left:0!important;width:100%;flex-wrap:wrap;
  }

  /* 모달 */
  .modal{width:100%;border-radius:12px}
  .modal-hd{padding:14px 16px 12px}
  .modal-bd{padding:14px 16px}
  .modal-ft{padding:12px 16px}
}

/* ══════════════════════════════
   MOBILE (≤600px) - 아기자기 핵심
══════════════════════════════ */
@media(max-width:600px){
  /* 기본 폰트 약간 줄임 */
  body{font-size:13px}

  /* GNB 더 컴팩트 */
  .gnb{height:48px;padding:0 10px;gap:6px}
  .gnb-logo-icon{width:26px;height:26px;font-size:13px;border-radius:6px}
  .gnb-logo-text{font-size:12.5px}
  .gnb-noti{width:28px;height:28px;border-radius:6px}
  .gnb-noti svg{width:13px;height:13px}
  .gnb-avatar{width:24px;height:24px;font-size:10px;border-radius:6px}
  .gnb-user{padding:4px 8px 4px 4px;border-radius:6px}
  .theme-toggle{width:28px;height:28px;border-radius:6px;font-size:13px}
  .btn-login{padding:11px;font-size:13.5px}

  /* 페이지 여백 최소화 */
  .page{padding:12px 10px}
  .portal-wrap{min-height:calc(100vh - 48px)}

  /* 로그인 */
  #scr-login{padding:12px}
  .login-box{border-radius:12px}
  .login-top{padding:22px 20px 18px}
  .login-logo{font-size:26px;margin-bottom:6px}
  .login-brand{font-size:17px}
  .login-tagline{font-size:12px}
  .login-body{padding:20px 18px 22px}
  .login-welcome{font-size:14.5px}
  .login-desc{font-size:12px;margin-bottom:16px}
  .login-opts{font-size:11.5px;margin-bottom:14px}
  .login-footer{font-size:11px;margin-top:12px}

  /* 페이지 헤더 */
  .ph{flex-direction:column;gap:10px;margin-bottom:14px}
  .ph-title{font-size:16px}
  .ph-desc{font-size:12px;margin-top:1px}
  .ph-actions{width:100%;justify-content:flex-start;gap:6px}
  .ph-actions .btn{font-size:12px;padding:7px 12px}

  /* stat 카드 - 2열 컴팩트 */
  .stat-row{grid-template-columns:repeat(2,1fr)!important;gap:8px;margin-bottom:12px}
  .stat{padding:10px 12px;border-radius:8px}
  .stat-lbl{font-size:11px;margin-bottom:4px}
  .stat-val{font-size:18px}
  .stat-delta{font-size:10.5px;margin-top:3px}
  .stat-icon{font-size:18px}

  /* 카드 컴팩트 */
  .card{border-radius:8px}
  .card-hd{padding:10px 12px;gap:6px}
  .card-title{font-size:13px}
  .card-body{padding:12px}

  /* 테이블 컴팩트 */
  .tbl thead th{padding:7px 10px;font-size:10.5px;letter-spacing:.2px}
  .tbl td{padding:9px 10px;font-size:12.5px}
  .tbl{min-width:500px}
  .td-mono{font-size:11px}
  .td-sub{font-size:10.5px}

  /* 필터바 컴팩트 */
  .filter-bar{padding:8px 10px;gap:4px}
  .chip{padding:3px 9px;font-size:11px;border-radius:16px}

  /* 페이지네이션 */
  .pg{padding:8px 10px}
  .pg-info{font-size:11px}
  .pgb{width:26px;height:26px;font-size:11px;border-radius:5px}

  /* 버튼 */
  .btn{padding:7px 13px;font-size:12.5px;border-radius:6px}
  .btn-sm{padding:5px 10px;font-size:11.5px}
  .btn-xs{padding:3px 8px;font-size:11px}

  /* 배지 */
  .badge{padding:2px 7px;font-size:10.5px;border-radius:3px}
  .badge::before{width:4px;height:4px}

  /* 태그 */
  .tag{padding:1px 6px;font-size:11px}

  /* 폼 컴팩트 */
  .form-grid{grid-template-columns:1fr;gap:12px}
  .form-row.fr2{grid-template-columns:1fr}
  .form-row.fr3{grid-template-columns:1fr}
  .form-input,.form-select,.form-textarea{padding:8px 10px;font-size:13px;border-radius:6px}
  .form-label{font-size:11.5px}
  .form-group{gap:4px}

  /* 홈 그리드 1열 */
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  [style*="gap:14px;margin-bottom:16px"]{
    gap:10px!important;margin-bottom:12px!important;
  }

  /* 홈 주문 목록 아이템 컴팩트 */
  [style*="padding:13px 16px"]{padding:10px 12px!important}
  [style*="padding:12px 16px"]{padding:9px 12px!important}

  /* 즐겨찾기 2열 */
  [style*="repeat(3,1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
  }

  /* 트래킹 카드 정보 2열→1열 */
  [style*="repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr!important;
  }

  /* 트래킹 맵 높이 줄임 */
  .track-map{height:130px}
  .track-label-start,.track-label-end{font-size:9px;padding:2px 5px}

  /* 발주 등록 - 상품 행 컴팩트 */
  .prod-row{padding:8px 10px;gap:8px;flex-wrap:wrap}
  .prod-img{width:34px;height:34px;font-size:17px;border-radius:6px}
  .prod-name{font-size:12.5px}
  .prod-sku{font-size:10px}
  .prod-price{padding:0 8px;font-size:12px}
  .qty-ctrl{border-radius:6px}
  .qty-btn{width:26px;height:26px;font-size:14px}
  .qty-inp{width:38px;height:26px;font-size:12px}
  .del-btn{width:24px;height:24px;font-size:13px}
  .add-prod-btn{padding:8px;font-size:12.5px;margin:8px 10px;width:calc(100% - 20px);border-radius:7px}

  /* 발주 요약 */
  .sum-row{padding:7px 0;font-size:12.5px}
  .sum-total{font-size:13px}
  .sum-total .amt{font-size:17px}
  .note-box{padding:10px 12px;font-size:11px;border-radius:7px;margin-top:10px}

  /* 세금계산서 행 */
  .invoice-row{padding:10px 12px;gap:10px}
  .invoice-icon{width:32px;height:32px;font-size:15px;border-radius:6px}
  .invoice-title{font-size:12.5px}
  .invoice-meta{font-size:10.5px}

  /* 다운로드 목록 */
  .dl-item{padding:10px 12px;gap:10px}
  .dl-icon{width:30px;height:30px;font-size:14px;border-radius:6px}
  .dl-title{font-size:12.5px}
  .dl-meta{font-size:10.5px}

  /* 마이페이지 */
  .my-layout{grid-template-columns:1fr;gap:12px}
  .my-profile{padding:16px 14px;border-radius:8px}
  .my-avatar{width:56px;height:56px;font-size:22px;border-radius:12px;margin-bottom:10px}
  .my-name{font-size:14.5px}
  .my-company{font-size:11.5px}
  .my-divider{margin:10px 0}
  .my-row{font-size:11.5px;padding:2px 0}

  /* FAQ */
  .faq-item{border-radius:6px;margin-bottom:6px}
  .faq-q{padding:10px 12px;font-size:12.5px}
  .faq-a{font-size:12px}
  .faq-a.open{padding:10px 12px}
  .contact-box{padding:14px;gap:12px;border-radius:8px;flex-direction:column;text-align:center}

  /* 디테일 그리드 */
  .dg{grid-template-columns:1fr}
  .di{padding:7px 0;gap:10px}
  .dk{font-size:11px;width:75px}
  .dv{font-size:12.5px}

  /* 프로그레스 트래커 */
  .tracker{margin:14px 0}
  .tr-dot{width:26px;height:26px;font-size:10px;margin-bottom:4px}
  .tr-lbl{font-size:10px}
  .tr-date{font-size:9.5px}
  .tr-step.cur .tr-dot{box-shadow:0 0 0 3px rgba(29,78,216,.12)}

  /* 타임라인 */
  .tl-item{gap:8px;padding-bottom:14px}
  .tl-dot{width:26px;height:26px;font-size:11px}
  .tl-item:not(:last-child)::before{left:13px;top:26px}
  .tl-title{font-size:12.5px}
  .tl-time{font-size:10.5px}
  .tl-desc{font-size:11.5px}

  /* 모달 최적화 */
  .overlay{padding:8px}
  .modal{border-radius:10px;max-height:95vh}
  .modal-hd{padding:12px 14px 10px}
  .modal-title{font-size:14.5px}
  .modal-sub{font-size:11px}
  .modal-close{width:26px;height:26px;border-radius:6px;font-size:13px}
  .modal-bd{padding:12px 14px}
  .modal-ft{padding:10px 14px;gap:6px}

  /* 토스트 */
  .toast{bottom:12px;right:12px;left:12px;min-width:auto;padding:10px 14px;border-radius:8px;gap:10px}
  .toast-icon{font-size:18px}
  .toast-t{font-size:13px}
  .toast-m{font-size:11px}

  /* 공지사항 배너 */
  [style*="padding:14px 18px;display:flex;align-items:center;gap:12px"]{
    padding:10px 12px!important;gap:8px!important;border-radius:8px!important;
  }

  /* 빠른 재주문 카드 내 버튼 */
  .btn-primary.btn-xs{padding:4px 10px;font-size:11px}

  /* 카드 내부 인라인 스타일 간격 조정 */
  [style*="padding:14px 18px;border-bottom"]{padding:10px 12px!important}
  [style*="padding:14px 18px;display:grid"]{padding:10px 8px!important}
  [style*="padding:8px 14px;border-right"]{padding:6px 8px!important}
  [style*="padding:8px 14px"]:last-child{padding:6px 8px!important}

  /* 발주 상태 flex 카드 */
  [style*="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap"] .stat{
    min-width:0!important;
  }

  /* 스크롤바 숨기기 (모바일에서 불필요) */
  ::-webkit-scrollbar{width:3px;height:3px}

  /* empty 상태 */
  .empty{padding:40px 16px}
  .empty .icon{font-size:32px;margin-bottom:8px}
  .empty .msg{font-size:12.5px}

  /* divider */
  .divider{margin:10px 0}

  /* 별점 */
  .star,.star-empty{font-size:12px}
}

/* ══════════════════════════════
   EXTRA SMALL (≤380px) - 아주 작은 화면
══════════════════════════════ */
@media(max-width:380px){
  .page{padding:10px 8px}
  .gnb{padding:0 8px}
  .gnb-logo-text{font-size:11.5px}
  .gnb-logo-icon{width:24px;height:24px;font-size:12px}

  .stat-row{gap:6px}
  .stat{padding:8px 10px}
  .stat-val{font-size:16px}
  .stat-lbl{font-size:10.5px}

  .ph-title{font-size:15px}

  /* 즐겨찾기 1열 */
  [style*="repeat(3,1fr)"]{
    grid-template-columns:1fr!important;
  }
  [style*="repeat(2,1fr)"]{
    grid-template-columns:1fr!important;
  }

  .sum-total .amt{font-size:15px}

  .modal-title{font-size:13.5px}
}