/* ============================================================================
 * styles-mobile.css — 모바일 전용 (2026-08-07 · 1단계)
 *
 * ★★웹(PC) 영향 0 보장 규칙 — 이 파일을 고칠 때 반드시 지킬 것
 *   1) **모든 선언은 아래 미디어쿼리 블록 안에만.** 블록 밖에 한 줄이라도
 *      쓰면 PC 화면이 바뀐다. 배포 검증에서 grep 으로 잡는다(미디어쿼리 밖 선언 = 버그).
 *   2) 기존 `styles.css` 는 **건드리지 않는다**. 롤백 = index.html 의 link 한 줄 제거.
 *   3) `!important` 는 **인라인 style 을 덮어야 할 때만**(현재 .modal / .slide-panel).
 *      인라인은 우선순위가 더 높아 미디어쿼리로도 못 이긴다.
 *   4) 여기 쓰는 클래스는 **실제 존재하는 것만**. (2026-08-07 전수 확인:
 *      .top-header / .sidebar / .main / .modal / .scrim / .slide-panel / .dg-wrap /
 *      .dg-scroll / .filter-row / .btn / .icon-btn / .input / .select / .grid-N)
 *
 * ★사이드바를 화면 밖으로 밀지 않는 이유 (설계 결정)
 *   여는 버튼 `.sb-toggle` 이 사이드바 **내부**에 position:absolute 로 붙어 있다.
 *   transform 으로 밀어내면 버튼도 같이 사라져 **다시 열 방법이 없다**.
 *   → 기존 '접힘' 상태(64px 아이콘 바)를 모바일 기본으로 삼는다. 버튼이 살아 있어
 *     셀러가 직접 펼칠 수 있고, JSX 를 한 줄도 안 고쳐도 된다.
 * ========================================================================== */

/* ★2026-08-08 폰 '가로 모드' 추가 — 실측 사고
 *   폰을 가로로 돌리면 폭이 ~915px 이 되어 `max-width:768px` 이 **통째로 꺼졌다**.
 *   그러면 PC 레이아웃(.app{height:100vh;overflow:hidden})이 되살아나는데, 세로 높이는
 *   412px 뿐이라 툴바가 화면을 다 먹고 **목록 높이가 0px · 페이지 스크롤도 불가** =
 *   주문이 한 줄도 안 보이는 상태가 된다(2026-08-08 사장님 신고 · 실측 재현).
 *
 *   ★터치 판별에 `pointer: coarse` 를 쓰면 안 된다(2026-08-08 실측 실패):
 *     실제 안드로이드 기기가 `maxTouchPoints=5` 인데도 `pointer:coarse=false /
 *     pointer:fine=true` 로 보고해 조건이 안 걸렸고, 가로 화면이 그대로 잠긴 채였다.
 *     **`hover: none` 은 같은 기기에서 정확히 true** 였으므로 이쪽을 쓴다.
 *     혹시 모를 기기차를 대비해 두 신호를 **각각 별도 쿼리로 나열**(둘 중 하나만 맞아도 적용).
 *
 *   ★PC 영향 0 근거: 마우스를 쓰는 PC·노트북은 `hover: hover` + `pointer: fine` 이라
 *     두 줄 어디에도 걸리지 않는다. 여기에 높이 560px 이하 + 폭 1024px 이하 +
 *     가로방향까지 겹쳐 폰 가로만 남긴다. */
@media (max-width: 768px),
       (max-height: 560px) and (max-width: 1024px) and (orientation: landscape) and (hover: none),
       (max-height: 560px) and (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {

  /* ── 앱 셸 ────────────────────────────────────────────────────────────── */
  :root {
    --header-h: 48px;          /* 56 → 48 */
    --sidebar-w: 64px;         /* 아이콘 바 기본 (펼치면 아래 규칙으로 232px) */
  }

  .sidebar { width: 64px; min-width: 64px; padding: 12px 6px; }

  /* 펼침 상태 — 본문을 밀지 않고 화면 위에 겹쳐 뜬다(좁은 화면 보존) */
  .sidebar:not(.sb-collapsed) {
    position: fixed; left: 0; top: var(--header-h);
    width: 232px; min-width: 232px;
    height: calc(100vh - var(--header-h));
    z-index: 900;
    padding: 16px 12px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, .18);
  }

  /* 900px 에서 숨기던 토글을 모바일에선 되살린다 — 유일한 여는 수단 */
  .sb-toggle { display: inline-flex; width: 34px; height: 34px; }

  .main { padding: 12px 12px 40px; gap: 12px; }
  .top-header { padding-left: 10px; padding-right: 10px; }

  /* ★헬퍼 버전 배지 숨김 (2026-08-07 지시) — 헬퍼는 **PC 전용 프로그램**이라
   *   폰에서는 설치/업데이트가 불가능하다. 배지를 눌러도 127.0.0.1 로컬서버가 없어
   *   아무 일도 안 일어나고, 좁은 헤더 폭만 차지한다. */
  .helper-ver-badge { display: none !important; }

  /* ── 좁은 폰(≤380px) 헤더 넘침 방지 (2026-08-08 실측) ────────────────────
   *  360px 기기에서 헤더 내용이 394px 이라 34px 넘쳐 **사용자명이 잘렸다**.
   *  기능을 없애지 않고 여백·간격만 줄이고, 이름은 말줄임으로 접는다.
   *  393px 이상(요즘 대부분의 폰)에서는 원래도 안 넘쳤으므로 380px 이하에만 적용. */
  .top-header { padding-left: 10px; padding-right: 10px; gap: 8px; }

  /* ── 모달 — 하단 시트 형태 전체폭 (인라인 width 를 덮어야 해 !important) ── */
  .scrim { align-items: flex-end; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
  .modal-body { max-height: calc(92vh - 116px); overflow-y: auto; }
  .modal-footer { position: sticky; bottom: 0; background: var(--surface); }

  /* ── 슬라이드 패널(주문 상세) — 전체 폭 ───────────────────────────────── */
  .slide-panel { width: 100% !important; max-width: 100% !important; }

  /* ── 터치 타겟 ────────────────────────────────────────────────────────── */
  .btn { min-height: 40px; }
  .icon-btn { min-width: 36px; min-height: 36px; }
  /* font-size 16px = iOS Safari 가 입력 시 자동 확대하지 않는 최소값 */
  .input, .select, .textarea { min-height: 40px; font-size: 16px; }

  /* ── 필터/툴바 줄바꿈 ─────────────────────────────────────────────────── */
  .filter-row { flex-wrap: wrap; gap: 8px; }
  .filter-row .input, .filter-row .select { min-width: 0; flex: 1 1 140px; }
  .filter-row .input.long { min-width: 0; flex: 1 1 100%; }

  /* ── 다단 그리드 → 1컬럼 ──────────────────────────────────────────────── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* ── 표 가로 스크롤 — 전수 대응 (2026-08-07 실측) ────────────────────── */
  /*  실측: JSX 의 <table> 38개 중 스크롤 래퍼(.dg-scroll 등)가 있는 건 25개뿐.
   *  나머지 13개는 폰에서 오른쪽 열이 **그냥 잘려** 안 보였다(마켓설정 화면 신고).
   *  또 상당수 표가 인라인 `style={{width:'100%'}}` 를 갖고 있어 CSS 로는 못 이긴다.
   *  → 두 경우로 나눠 처리한다. */

  /* A. 스크롤 래퍼가 **있는** 표 — 컨테이너가 스크롤하므로 표를 일부러 넓혀 넘치게 만든다.
   *    (table.dg 의 width:100% 때문에 표가 압축돼 넘치지 않았고 = 스크롤이 안 생겼다) */
  .dg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dg-scroll table.dg { width: auto !important; min-width: max-content; }

  /* B. 스크롤 래퍼가 **없는** 표 — 표 자신을 스크롤 컨테이너로 만든다.
   *    display:block 이면 표가 블록 박스가 되고 내부 행이 넘칠 때 스스로 스크롤한다.
   *    JSX 에 래퍼 div 를 13곳 넣는 것보다 안전하다(DOM 구조 무변경). */
  .main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 이미 스크롤 래퍼가 있는 표는 B 를 되돌린다 — 이중 스크롤·sticky 헤더 깨짐 방지 */
  .dg-scroll table,
  .sjk-msg-gridwrap table,
  .srcx-scroll table {
    display: table;
    max-width: none;
    overflow: visible;
  }

  /* sticky 좌측 고정열 — 가로 스크롤 시 뒤 내용이 비쳐 겹치지 않게 불투명 유지 */
  table.dg thead th.sticky-l,
  table.dg thead th.sticky-l-2 { background: var(--surface); }

  /* ── 상품관리 등 '뷰포트 고정높이' 화면 — 모바일에선 잠금 해제 ──────────── */
  /*  기존(PC): 상품관리 진입 시 JS 가 .app 에 app-grid-scroll, .main 에 main-grid-scroll 을
   *  붙여 `height:100vh; overflow:hidden` 으로 페이지를 잠그고, 목록(.dg-scroll)만 내부
   *  스크롤시킨다(툴바 고정 + 컬럼헤더 sticky = 큰 화면에선 유용).
   *  ★폰에서는 이게 독이다(2026-08-07 신고): 상단 툴바·필터가 화면 절반 이상을 먹고
   *    상품 목록은 남은 좁은 창에 갇혀 몇 줄만 보인다. 페이지 전체가 스크롤돼야 한다.
   *  → 고정높이·overflow 잠금을 풀어 **문서 흐름대로 페이지가 스크롤**되게 한다.
   *    (JS 가 붙이는 클래스는 그대로 두고 CSS 로만 무력화 — JSX 무변경) */
  .app-grid-scroll { height: auto !important; overflow: visible !important; }
  .main-grid-scroll { overflow: visible !important; }
  .prod-screen, .prod-grid-fill { min-height: 0; }
  .prod-grid-fill .dg-wrap { display: block; }
  /* 목록은 세로로 자유롭게 늘어나고(페이지가 스크롤), 가로만 스크롤 */
  .prod-grid-fill .dg-scroll {
    flex: none;
    overflow-y: visible;
    max-height: none;
  }
  /* 상품관리에서 숨기던 푸터를 되살릴 필요는 없다(그대로 숨김 유지) */

  /* ── 화면 상단(제목·설명) 압축 (2026-08-08) ──────────────────────────────
   *  실측: 주문/CS 화면은 툴바(제목+설명+탭+기간+수집진행+버튼+검색)가 970px 를 먹어
   *  세로 915px 폰에서 **첫 화면에 주문이 한 줄도 안 보였다**(사장님 신고).
   *  목록 자체는 스크롤로 도달하지만, 매번 화면 한 장을 밀어야 하는 건 실사용에서 불편하다.
   *  → 폰에서는 설명문(caption)을 숨기고 제목·여백을 줄인다. 기능은 하나도 안 없앤다.
   *  ★.page-header .titles .caption 만 겨냥한다 — 다른 곳의 .caption(값 설명·배지)은 그대로. */
  .page-header { margin-bottom: 8px; }
  .page-header .titles .caption { display: none; }
  .page-header .titles .h2 { font-size: 19px; line-height: 1.25; }

  /* ── 푸터 ─────────────────────────────────────────────────────────────── */
  .footer, .site-footer { padding: 12px 14px; font-size: 10.5px; }

  /* ── 로그인/회원가입 — 좌우 2단 → 상하 1단 ───────────────────────────── */
  /*  기존: .auth-shell { grid-template-columns: 1fr 1fr }  (좌 브랜드 / 우 폼)
   *  폰에서는 좌우로 쪼개면 양쪽 다 못 쓴다 → 위(브랜드 요약) / 아래(로그인 폼).
   *  ★상세설명(.auth-desc)·기능목록(.auth-features)은 숨긴다(2026-08-07 지시) —
   *    폰에서 스크롤을 밀어내 정작 로그인 입력이 화면 밖으로 나간다. */
  .auth-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .auth-visual {
    padding: 20px 18px;
    gap: 10px;
  }
  .auth-title { font-size: 24px !important; line-height: 1.25 !important; }
  .auth-desc { display: none; }
  .auth-features { display: none; }
  /* 배경 장식 원 — 작은 화면에선 과해서 축소 */
  .auth-visual::before { width: 220px; height: 220px; top: -90px; right: -80px; }
  .auth-visual::after  { width: 140px; height: 140px; bottom: -50px; left: -50px; }

  .auth-form-wrap { padding: 16px 14px 28px; align-items: flex-start; }
  /* .auth-card 는 인라인 transform: scale(1.3) 이 걸려 있어 폰에서 넘친다 → 무력화 */
  .auth-card {
    transform: none !important;
    max-width: 100%;
    padding: 22px 18px;
  }
}

/* ★소형 폰 전용(≤380px) — 위 블록과 별개. 헤더가 물리적으로 못 들어가는 폭에서만. */
@media (max-width: 380px) {
  .top-header { padding-left: 8px; padding-right: 8px; gap: 6px; }
  /* '사용자 가이드' 라벨만 접어 ~90px 확보 — 버튼은 남아 있어 그대로 눌린다 */
  .top-header .guide-btn { padding-left: 10px; padding-right: 10px; }
  .top-header .guide-btn .guide-btn-label { display: none; }
}