/* =====================================================================
 * ONE 플랫폼 공통 모바일 대응 (서브 시스템용)
 *
 * 각 시스템 폴더에 이 파일을 복사해 두고, 자기 CSS **뒤에** 링크한다.
 *   <link href="css/style.css" rel="stylesheet">
 *   <link href="css/one-mobile.css" rel="stylesheet">   ← 반드시 뒤
 *
 * [원칙]
 * PC 화면은 한 줄도 바꾸지 않는다. 이 파일의 규칙은 전부 max-width 미디어쿼리
 * 안에만 있다. 그래서 잘못 넣어도 데스크톱은 안전하다.
 *
 * [설계 방침 — 첫 판에서 배운 것]
 * 좁은 화면에서 넘치는 내용을 **자르지 않는다**. 잘라 놓으면 화면 밖 내용에
 * 아예 손이 닿지 않는다(실제로 KPI 상세 화면 왼쪽이 통째로 잘려 보였다).
 * 대신 두 가지로 해결한다.
 *   ① 눌려서는 안 되는 것(버튼·탭·툴바)은 폭을 지키고 그 줄을 가로 스크롤시킨다.
 *   ② 표처럼 원래 넓은 것은 자기 스크롤 상자를 만들어 준다.
 *
 * 특히 버튼 안 글자가 "새\n로\n고\n침" 처럼 세로로 쌓이는 건 flex 아이템이
 * 짓눌렸다는 신호다. flex-shrink:0 + white-space:nowrap 이 그 해결책이다.
 * ===================================================================== */

/* ── 태블릿 (≤1024px) ── */
@media (max-width: 1024px) {
  img, video, canvas, svg { max-width: 100%; height: auto; }

  /* 2열 폼·그리드를 1열로. 좁은 화면에서 2열은 글자가 잘린다 */
  .form-grid,
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

  /* 여백은 여기서 건드리지 않는다.
     .page / .container 는 대개 패딩이 없는 껍데기라, 여기에 16px 을 '주면'
     안쪽 카드의 패딩과 겹쳐 오히려 여백이 두 배가 된다(실제로 KPI·업무지원이
     그렇게 좁아졌다). 여백 축소는 각 시스템이 자기 실제 값을 줄이는 식으로 한다. */
}

/* ── 모바일 (≤640px) ── */
@media (max-width: 640px) {

  /* ① 눌리면 안 되는 것들 — 글자가 세로로 쌓이는 걸 막는다.
     버튼·셀렉트·탭은 제 폭을 지키고, 대신 담고 있는 줄이 옆으로 스크롤된다. */
  button, .btn, select, .badge, .chip, .tag,
  .nav-action, .sidebar-item, .tab, .tab-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 그 버튼들을 담는 줄 — 줄바꿈 대신 가로 스크롤.
     wrap 으로 접으면 글자가 세로로 쌓여 오히려 읽기 어려워진다. */
  .navbar, .app-navbar, .toolbar, .tabs, .tab-bar, .nav-tabs,
  .admin-tabs, .filters, .btn-row, .actions, .header-actions {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* 얇은 화면에서 스크롤바가 자리를 먹지 않게 */
  }
  .navbar::-webkit-scrollbar, .app-navbar::-webkit-scrollbar,
  .toolbar::-webkit-scrollbar, .tabs::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar { display: none; }

  /* ② 표는 자기 스크롤 상자를 갖는다.
     감싸는 요소가 있으면 그쪽을, 없으면 표 자신을 스크롤시킨다.
     (전역으로 min-width 를 주면 페이지 전체가 밀려 왼쪽이 잘린다 — 하지 않는다) */
  .table-wrap, .admin-table-wrap, .table-scroll, .tbl-wrap, .table-responsive {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  table { max-width: none; }
  /* 감싸는 상자가 있을 때만 표에 최소 폭을 준다(전역으로 주면 페이지가 밀린다).
     이게 없으면 칸이 좁아져 'ID/KPI명/카테고리' 같은 머리글이 세로로 쌓인다. */
  .table-wrap > table, .admin-table-wrap > table, .table-scroll > table,
  .tbl-wrap > table, .table-responsive > table { min-width: 620px; }

  /* ③ 입력은 손가락 크기에 맞춘다.
     16px 미만이면 iOS 사파리가 입력할 때 화면을 확대해 버린다 — 그걸 막는 값이다. */
  input, select, textarea { font-size: 16px !important; }
  input, textarea { min-height: 38px; }
  button, .btn { min-height: 38px; }

  /* ④ 카드 그리드는 한 줄에 하나. 다만 숫자만 있는 통계 카드는 두 개씩이 낫다
     (하나씩 쌓으면 스크롤만 길어진다) */
  .cards, .card-grid, .bento { grid-template-columns: 1fr !important; }
  .stat-strip, .stats, .kpi-cards, .summary-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ⑤ 모달은 화면을 거의 다 쓴다(작으면 오히려 읽기 힘들다).
     그리고 세로로 길면 안쪽이 스크롤되어야 한다 — 아니면 버튼에 손이 안 닿는다. */
  .modal-dialog, .modal-card, .modal-panel {
    max-width: 100% !important; width: auto !important; margin: 8px !important;
  }
  .modal-body { max-height: 70vh; overflow-y: auto; }

  /* ⑥ 고정 사이드바가 있는 시스템 — 화면 위쪽 가로 메뉴로 눕힌다.
     서브 시스템은 쉘 안에서 열리므로 서랍까지는 필요 없다. */
  .layout { flex-direction: column !important; height: auto !important; overflow: visible !important; }
  .sidebar {
    width: 100% !important; min-width: 0 !important; height: auto !important;
    flex-direction: row !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: 0 !important; border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 8px !important; gap: 6px;
  }
  .sidebar-nav { flex-direction: row !important; gap: 6px; flex-wrap: nowrap; }
  .sidebar-item, .sidebar .nav-item { width: auto !important; }
}

/* =====================================================================
 *  KPI(Prism) 고유 보강
 *  부서/기준연도 셀렉트와 "새로고침" 버튼이 눌려 글자가 세로로 쌓였다.
 *  실제 클래스는 .topbar-right / .page-toolbar / .toolbar-right 다
 *  (스타일이 index.html 안 <style> 에 있어 처음엔 이름을 잘못 짚었다).
 * ===================================================================== */
@media (max-width: 640px) {
  /* 상단 줄 — 줄바꿈 대신 가로 스크롤. 안쪽 항목도 눌리지 않게 한다.
     바깥(.topbar > *)만 막으면 정작 셀렉트·버튼은 그대로 짓눌린다. */
  .topbar, .topbar-right, .page-toolbar, .toolbar-right {
    display: flex; flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px;
    scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar, .topbar-right::-webkit-scrollbar,
  .page-toolbar::-webkit-scrollbar, .toolbar-right::-webkit-scrollbar { display: none; }
  .topbar > *, .topbar-right > *, .page-toolbar > *, .toolbar-right > * {
    flex-shrink: 0; white-space: nowrap;
  }
  .topbar-right label { flex-shrink: 0; white-space: nowrap; }
  .topbar select, .topbar-right select { min-width: 92px; }
  .page-toolbar h2 { font-size: 15px; }
  /* 검색창이 기본 200px 라 툴바가 화면을 65px 넘겼다 — 좁히면 한 화면에 들어온다 */
  .search-input { width: 132px !important; min-width: 0 !important; }
  .updated-at { display: none; }        /* 좁은 화면에선 갱신 시각까지는 무리다 */

  /* 요약 카드 2열 — 하나씩 쌓으면 스크롤만 길어진다 */
  .dash-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  /* 2열이면 칸이 151px 라 아이콘 42px + 여백에 밀려 '전체 프로젝
트' 로 잘린다.
     아이콘과 여백을 줄여 라벨이 한 줄에 들어오게 한다. */
  .stat-card { padding: 12px 10px !important; gap: 8px !important; }
  .stat-icon { font-size: 20px; width: 26px; }
  .stat-num  { font-size: 24px; }
  .stat-lbl  { font-size: 10.5px; white-space: nowrap; }

  /* 본문 카드 줄은 세로로 쌓는다.
     .dash-row-3 은 2fr 1fr 2fr 라 375px 에서 각 칸이 150/75/150px 밖에 안 된다.
     그 좁은 칸에 '담당자별 업무 현황' 을 넣으니 글자가 세로로 쌓이고,
     옆으로 밀어야 나머지 카드가 보였다. 아래로 스크롤해서 보는 편이 맞다. */
  .dash-row, .dash-row-2, .dash-row-3 { grid-template-columns: 1fr !important; }
  .page-mini { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 표는 자기 스크롤 상자 안에서만 넓어진다(페이지를 밀지 않는다) */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* 상세 패널 — display 로 숨기는 게 아니라 화면 밖(right:-480px)으로 밀어 둔다.
     여기서 right:0 을 강제하면 "닫혀 있어야 할 빈 패널"이 화면 전체를 덮어
     KPI 가 통째로 백지로 보인다(실제로 그렇게 만들어 놓고 한 번 깨뜨렸다).
     여는 방식은 건드리지 말고, 폭만 화면에 맞추고 닫힘 위치도 그 폭만큼 민다. */
  .detail-panel { width: 100%; right: -100%; }
  .detail-panel.open { right: 0; }
  .detail-grid { grid-template-columns: 1fr !important; }

  /* 모달은 기본 560px 라 폰에서 넘친다 (.modal-overlay 가 display:none 이라 숨김은 그대로) */
  .modal { width: 100%; max-width: calc(100vw - 20px); max-height: 88vh; }
}

/* =====================================================================
 *  KPI 여백·비율 보정 (2차)
 *  .content 가 20px, 그 안 카드가 또 패딩을 가져 실제 본문이 295px 밖에 안 됐다.
 * ===================================================================== */
@media (max-width: 640px) {
  .content { padding: 14px 10px !important; }

  /* 진행중 프로젝트: 2열이면 카드 하나가 150px 라 제목이 3줄로 접힌다 */
  .proj-grid { grid-template-columns: 1fr !important; padding: 8px !important; gap: 8px !important; }

  /* 카드 안쪽 여백도 줄여 본문 폭을 확보한다 */
  .dash-card-hdr { padding: 10px 12px !important; }
  .dash-card-body { padding: 10px 12px !important; }
  .section { border-radius: 10px; }
}