/* css/mobile.css — quality_dashboard.html <style> 에서 분리(2026-10-03). 링크 순서 4/7 */
  /* ══ 모바일 리뉴얼 (2026-09-18) — 하단 탭바 · 터치 타깃 · 헤더 · 표→카드 ══ */
  .mtab { display: none; }
  @media (max-width: 900px) {
    .mtab { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
    .mtab button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 46px; padding: 4px 0 2px; font: 600 10.5px/1.2 var(--font-sans); color: var(--ink-3); cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
    .mtab button i { font-size: 22px; line-height: 1; display: block; height: 22px; }
    .mtab button.on { color: var(--brand-700); }
    .mtab button.on i { color: var(--brand); }
    .mtab button:active { background: var(--brand-50); }
    .content { padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
    .dh-selbar { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
    #gaj-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
    .sidebar { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    /* 터치 타깃: 버튼·입력칸 최소 36~40px, 글자 13px+ */
    .dh-btn { height: 40px; font-size: 13px; padding: 0 14px; }
    .dh-seg button { padding: 8px 12px; font-size: 13px; min-height: 36px; }
    .claim-year-btn { padding: 8px 12px !important; font-size: 13px !important; min-height: 36px; }
    .gj-toggle, .gj-filter .gj-toggle, .cdb-filters .gj-toggle { height: 36px !important; font-size: 13px !important; }
    .dh-select, .gj-filter .dh-select, .cdb-filters .dh-select, .wl-f .dh-select { height: 40px !important; font-size: 14px !important; }
    .dh-search { height: 40px; } .dh-search input { font-size: 15px !important; }
    .cl-ic { width: 36px; height: 36px; font-size: 16px; }
    .gj-st, .gj-gdate, #gajebon-table .gj-st, #gajebon-table .gj-gdate, .gj-tbl select.gj-st, .gj-tbl input.gj-gdate { height: 36px !important; min-height: 36px; font-size: 13px; }
    .dh-seg .gajebon-sheet-btn, .dh-seg .kpi-reg-tab-btn { padding: 8px 12px; font-size: 13px; min-height: 36px; }
    .btn, .btn-sm, .btn-secondary, .btn-primary, .doc-filter { min-height: 38px; font-size: 13px; }
    .dh-link { font-size: 13px; padding: 6px 0; }
    .dh-tag, .ul-tag, .wl-shift { font-size: 11px; }
    .dh-kbd, .dh-kbd-hint { display: none !important; }
    .content input:not([type=checkbox]):not([type=radio]):not(.gj-gdate), .content textarea,
    #tab-register input:not([type=file]):not([type=checkbox]), #tab-register select, #tab-register textarea, #tab-kpi-reg input, #tab-kpi-reg select, #tab-kpi-reg textarea { font-size: 15px !important; min-height: 40px; }
    .content textarea { min-height: 72px; }
    .rs-take.dh-btn, .rs-more.dh-btn { height: 36px; }
    .content input[type=checkbox] { width: 22px; height: 22px; }
    #dash-refresh-btn, .section-header button, .wip-head, .core-tile button, #tab-core .card button, .dh-cal-tbl td { min-height: 40px; }
    .wip-head { align-items: center; }
    .dh-cal-i { display: none; } .dh-cal-n { font-size: 11px; }
    .chev, .dh-caret { font-size: 12px; }
    .content [style*="font-size:10px"], .content [style*="font-size: 10px"], .content [style*="font-size:10.5px"], .content [style*="font-size:9"] { font-size: 11px !important; }
    .core-page-header > .cph-period > .dh-seg, .content span[style*="inline-flex"] { flex-wrap: wrap; flex-shrink: 1; row-gap: 6px; }
    .dh-order { min-height: 32px; display: inline-flex; align-items: center; padding: 0 8px; }
    #tab-core button, .dh-rowcopy { min-height: 40px; min-width: 40px; }
    .section-title { white-space: normal; flex-wrap: wrap; line-height: 1.3; }
    .section-title > small { display: block; white-space: normal; margin-top: 2px; }
    /* 핵심지표 헤더: 고정 4행 높이 해제, 연도탭은 가로 스크롤, 기간 컨트롤은 줄바꿈 */
    .core-page-header { grid-template-rows: auto; min-height: 0; row-gap: 8px; }
    .core-page-header > .cph-title { flex-wrap: wrap; }
    .core-page-header > .cph-title .section-title { font-size: 18px; white-space: normal; line-height: 1.3; }
    .core-page-header > .cph-desc { white-space: normal; line-height: 1.45; }
    .core-page-header > .cph-years { height: auto; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
    .gj-tabs.dh-seg { max-width: 100%; }
    .core-page-header > .cph-years::-webkit-scrollbar { display: none; }
    .core-page-header > .cph-years .claim-year-btn { flex-shrink: 0; }
    .core-page-header > .cph-period { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
    .core-page-header > .cph-period select, .cph-actions select, .content select:not(.gj-st) { min-height: 40px !important; padding: 6px 10px !important; font-size: 14px !important; }
    .sc-head { flex-wrap: wrap; } .sc-head .dh-actions { width: 100%; }
    /* 모달·대화상자는 아래에서 올라오는 시트로 */
    .sc-modal { align-items: flex-end; padding: 0; }
    .sc-modal-box { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    #health-panel { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; }
  }
  @media (max-width: 720px) {
    .dh-toolbar .dh-seg { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .dh-toolbar .dh-seg::-webkit-scrollbar { display: none; }
    /* 취합대장 표 → 카드 */
    .cl-tbl { table-layout: auto !important; min-width: 0 !important; width: 100%; display: block; }
    .cl-tbl colgroup, .cl-tbl thead { display: none; }
    .cl-tbl tbody { display: block; }
    .cl-tbl tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
    .cl-tbl tbody tr:last-child { border-bottom: 0; }
    .cl-tbl tbody td { display: block; padding: 0 !important; border: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
    .cl-tbl td.cl-year { display: none; }
    .cl-tbl td.cl-date { order: 1; font-size: 11.5px; color: var(--ink-3); }
    .cl-tbl td.cl-client { order: 2; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 2px 8px !important; }
    .cl-tbl td.cl-act { order: 3; margin-left: auto; display: flex; gap: 2px; }
    .cl-tbl td.cl-prod { order: 4; flex-basis: 100%; font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.35; }
    .cl-tbl td.cl-qtype { order: 5; } .cl-tbl td.cl-dtype { order: 6; font-size: 12px; color: var(--ink-2); }
    .cl-tbl td.cl-cost { order: 7; margin-left: auto; font-weight: 600; color: var(--ink); font-size: 12.5px; }
    .cl-tbl td.cl-cost:not(:empty)::before { content: '자사 '; font-weight: 500; color: var(--ink-3); font-size: 11px; }
    .cl-tbl td.cl-desc { order: 8; flex-basis: 100%; font-size: 12px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
    .cl-tbl td[colspan] { flex-basis: 100%; }
    /* 가제본 표 → 카드 (열 순서: 날짜·주문번호·거래처·담당자·제품명·요청·설비·진행상태·구성…) */
    #gajebon-table { min-width: 0 !important; width: 100%; table-layout: auto !important; display: block; }
    #gajebon-table thead { display: none; }
    #gajebon-table tbody { display: block; }
    #gajebon-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
    #gajebon-table tbody td { display: block; padding: 0 !important; border: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; width: auto !important; background: transparent !important; }
    .gj-tbl tr.gj-done-row { background: #FFF8DC; }
    #gajebon-table td:nth-child(1) { order: 1; font-size: 11.5px; color: var(--ink-3); }
    #gajebon-table td:nth-child(2) { order: 2; } #gajebon-table .gj-order { font-size: 11px; }
    #gajebon-table td:nth-child(3) { order: 3; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2) !important; border-radius: 999px; padding: 2px 8px !important; }
    #gajebon-table td:nth-child(4) { order: 4; font-size: 11.5px; color: var(--ink-3); }
    #gajebon-table td:nth-child(5) { order: 5; flex-basis: 100%; font-weight: 600 !important; font-size: 13.5px !important; color: var(--ink); line-height: 1.35; }
    #gajebon-table td:nth-child(6), #gajebon-table td:nth-child(7) { order: 6; font-size: 12px; color: var(--ink-3); }
    #gajebon-table td:nth-child(6):not(:empty)::before { content: '요청 '; color: var(--ink-3); font-weight: 600; font-size: 11px; }
    #gajebon-table td:nth-child(7):not(:empty)::before { content: '설비 '; color: var(--ink-3); font-weight: 600; font-size: 11px; }
    #gajebon-table td:nth-child(8) { order: 7; flex-basis: 100%; }
    #gajebon-table .gj-stcell { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
    #gajebon-table td:nth-child(n+9) { order: 8; border: 1px solid var(--border) !important; border-radius: 8px; padding: 4px 6px !important; min-width: 72px; text-align: center; background: #fff !important; font-size: 11px; }
    #gajebon-table td:nth-child(n+9):empty { display: none; }
    #gajebon-table td:nth-child(n+9) input { width: auto !important; min-width: 120px; height: 34px; font-size: 13px !important; }
    #gajebon-table td:nth-child(n+9) input[type=number] { min-width: 72px; }
    #gajebon-table td[data-lbl] { display: flex !important; align-items: center; gap: 6px; text-align: left; }
    #gajebon-table td[data-lbl]::before { content: attr(data-lbl); font-size: 11px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
    #gajebon-table td[data-lbl="요청"] { flex-basis: 100%; } #gajebon-table td[data-lbl="요청"] input { flex: 1; }
    .gj-count { flex-wrap: wrap; }
  }

  @media (max-width: 720px) {
    .wl-tbl { table-layout: auto; } .wl-tbl col { width: auto !important; }
    .wl-tbl th:nth-child(2), .wl-tbl td:nth-child(2), .wl-tbl th:nth-child(4), .wl-tbl td:nth-child(4) { display: none; }
    .wl-tbl td { padding: 7px 6px; white-space: normal; }
    .wl-time { display: block; margin-left: 0; } .wl-item { white-space: normal; } .wl-eq { font-size: 11.5px; }
    .wl-filters { gap: 8px; } .wl-f { width: 100%; }
  }