/* =========================================================================
   스마트폰 전용 (2026-10-18) — 아이폰 12 mini(375px)까지
   · 이 파일의 규칙은 모두 화면 폭 767px 이하에서만 동작한다 → PC 화면은 전혀 바뀌지 않는다
   · styles.css 다음에 로드 (같은 선택자면 이 파일이 이긴다)
   ========================================================================= */
@media (max-width:767px){
  /* ---------- 아이폰 Safari 전용 보정 ---------- */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}                 /* 가로로 돌려도 글자가 저절로 커지지 않게 */
  .modal-pnl{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}  /* 아래 도구막대에 대화창 버튼이 가리지 않게 (보이는 높이 기준) */
  .modal-f{padding-bottom:max(10px, env(safe-area-inset-bottom))}           /* 홈 막대 영역 피하기 */
  .sidebar{padding-bottom:env(safe-area-inset-bottom)}
  .toast{bottom:max(28px, calc(env(safe-area-inset-bottom) + 16px))}

  /* ---------- 상단 바 ---------- */
  .topbar{gap:8px;padding:0 10px}
  .crumb{display:none}                                  /* 페이지 제목이 바로 아래 있으므로 숨김 */
  html body .tb-right{gap:6px;min-width:0;margin-left:auto}
  html body .tb-month{padding:5px 9px;font-size:11.5px;gap:4px;max-width:190px;overflow:hidden}
  .icon-btn{width:34px;height:34px}
  .hamb{width:36px;height:36px;flex:0 0 36px}
  .who-menu{right:-4px;width:min(240px,calc(100vw - 20px))}

  /* ---------- 본문 여백 · 제목 ---------- */
  .view{padding:14px 12px 40px}
  .ph{margin-bottom:14px;gap:10px}
  .ph p,.ph .desc{font-size:12px}

  /* ---------- 검색 · 필터: 고르는 칸은 두 개씩, 검색어는 한 줄 ---------- */
  .filters{padding:12px;gap:10px}
  .filters .f{flex:1 1 calc(50% - 5px);min-width:0}
  .filters .f.wide,.filters .f:has(input[type="text"]),.filters .f:has(input[type="search"]){flex:1 1 100%}
  .filters .f label{font-size:11.5px}
  .filters .f select,.filters .f input{width:100%;min-width:0;padding-top:8px;padding-bottom:8px}
  .f-act{gap:6px}
  .f-act .btn{padding:8px 10px;font-size:12.5px}
  html body .f-act{display:flex;flex-wrap:wrap;width:100%;gap:6px}
  html body .f-act .f-lead{width:auto;flex:1 1 auto;margin-right:0;display:flex;gap:6px;flex-wrap:wrap}
  html body .f-act .f-lead .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
  html body .f-act > .btn{flex:1 1 auto;white-space:nowrap}

  /* ---------- 표: 카드 안에서 옆으로 밀어서 보기 ---------- */
  .t-wrap{-webkit-overflow-scrolling:touch}
  .t-top{flex-wrap:wrap;gap:8px;padding-left:12px;padding-right:12px}
  .t-top .r{flex-wrap:wrap;gap:6px;margin-left:auto;justify-content:flex-end;max-width:100%}
  .tbl th,.tbl td{padding-left:10px;padding-right:10px}
  .pg{padding:12px;gap:8px;justify-content:center}

  /* ---------- 카드 · 요약 숫자 ---------- */
  html body .grid.g-4:has(> .kpi),html body .grid.g-3:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px 12px 11px}
  .kpi .k-t{font-size:11.5px;gap:5px}
  .kpi .k-t .ki{width:20px;height:20px;flex:0 0 20px}
  .kpi .k-v{font-size:21px;margin:6px 0 2px}
  .kpi .k-v small{font-size:11.5px}
  .kpi .k-d{font-size:11px;flex-wrap:wrap;gap:3px;line-height:1.4}
  .card-h{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .card-b{padding:14px}

  /* ---------- 대화창 ---------- */
  .modal-h{padding:14px 14px 12px}
  .modal-h h3{font-size:16px}
  .modal-b{padding:14px}
  .modal-f{padding:10px 14px;gap:8px}
  .modal-f .l{flex:1 1 100%;flex-wrap:wrap}
  .fg[style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}   /* 화면 코드에 칸 수를 직접 적은 입력 묶음도 두 칸으로 */
  .fg .fd.full,.fg .full{grid-column:1/-1}
  .fg .fd:has(> .with),.fg .fd:has(> div > select + .btn){grid-column:1/-1}   /* 고르기 + 버튼이 함께 있는 칸은 한 줄 전체 */
  html body .modal-f .r{flex-wrap:wrap;gap:8px}
  html body .modal-f .r .btn{flex:1 1 calc(50% - 4px);min-width:0;padding-left:8px;padding-right:8px;white-space:nowrap}
  html body .modal-f .r .btn:only-child{flex-basis:100%}

  /* ---------- 로그인 · 쇼핑몰 아래 회사 정보: 긴 줄도 접히게 ---------- */
  body > footer span{white-space:normal !important;word-break:keep-all}
  body > footer{overflow-wrap:anywhere}

  /* ---------- 버튼 · 입력: 손가락으로 누르기 쉽게, 아이폰 확대 방지(16px) ---------- */
  input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="date"],select,textarea{font-size:16px}
  .tb-search input{font-size:16px}
}