/* ==========================================================================
   PMS 공통 모바일 보정  —  pms_mobile.css
   [2026-10-09] 아이폰 PWA 에서 화면이 "옆으로 밀리는" 문제 일괄 해결.

   왜 밀렸나 (실측으로 찾은 진짜 원인):
     grid / flex 안에 들어간 칸은 기본값이 min-width:auto 라서, 안에 든 내용이
     줄어들기를 거부하면 칸 자체가 화면보다 넓어진다. 1fr 로 잡아놔도 소용없다.
     실제로 NAS관제 카드는 화면이 371px 인데 404px 로 벌어져 있었다.
   그래서:
     ① 칸이 줄어들 수 있게 풀어주고(min-width:0)
     ② 표는 '표 안에서만' 옆으로 넘기게 가두고(문서 전체는 안 밀림)
     ③ 긴 글자는 줄을 바꾸게 한다.
   화면 폭 900px 이하에서만 적용되므로 PC 화면에는 영향이 없다.
   각 페이지의 자체 <style> 이 이 파일보다 뒤에 오므로, 페이지 고유 디자인이 이긴다.
   ========================================================================== */
@media (max-width: 900px) {

  /* ① 문서가 통째로 옆으로 밀리는 것 금지 */
  html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

  /* ② 칸이 화면보다 커지지 못하게 — 이게 핵심 */
  * { min-width: 0; }

  /* ③ 여러 열 배치는 모바일에서 한 줄로 */
  .grid, [class*="grid"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* ④ 폭을 직접 지정한 껍데기들 풀기 */
  .wrap, .container, .content, .card, .box, .panel, main, section { max-width: 100% !important; }

  /* ⑤ 표는 '표 안에서만' 좌우로 넘긴다 (문서 전체는 고정) */
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ⑥ 그림·그래프가 화면을 밀지 않게 */
  img, svg, video, canvas, iframe { max-width: 100%; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* ⑦ 긴 파일명·경로 때문에 글자가 뒤틀리던 것 — 한글은 단어 유지, 경로는 어디서든 줄바꿈 */
  div, span, b, strong, td, th, p, li, summary, label, a { overflow-wrap: anywhere; word-break: keep-all; }

  /* ⑧ 입력칸 16px — 아이폰에서 탭할 때 화면이 확대되는 것 방지 */
  input, select, textarea { max-width: 100%; font-size: 16px; }

  /* ⑨ 탭 줄·칩 줄이 폭에 눌려 "관제" 가 "관/제" 로 세로로 쪼개지던 문제.
        (사장님이 말한 "글자가 위아래 뒤틀린다" 가 정확히 이것이다 — 실측 탭줄 높이 80px → 41px)
        띠 안의 항목은 줄어들지 않게 자연 폭을 유지하고, 넘치는 만큼은 띠 안에서만 옆으로 넘긴다. */
  .tabs, .cfgtabs, .filter-pills, .nastab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs > *, .cfgtabs > * { flex: 0 0 auto !important; min-width: auto; }
  button, .btn, .tab, .pill, .chip, .tabs *, .cfgtabs * { overflow-wrap: normal !important; word-break: keep-all !important; }
}


/* ======================================================================
   [2026-10-09] 모바일 디자인 기준 (PMS UI v1)
   그동안 화면마다 색·간격·글자크기를 그때그때 정해서 붙였다. 그래서 같은 앱인데
   화면마다 다른 앱처럼 보였다. 여기서 기준을 한 번만 정하고 전 화면이 이걸 쓴다.

   간격  : 4 / 8 / 12 / 16 / 24  (이 다섯 개만 쓴다)
   글자  : 11 / 13 / 15 / 20 / 26  (이 다섯 개만 쓴다)
   색    : ★색은 '의미'가 있을 때만 쓴다.
           빨강=문제, 주황=주의, 초록=정상, 그 외 전부 남색/회색.
           예쁘게 보이려고 쓰는 색은 없앤다(무지개처럼 보이던 원인).
   ====================================================================== */
:root{
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:20px; --fs-xl:26px;
  --ink:#0f172a;          /* 본문 */
  --ink2:#475569;         /* 보조 */
  --ink3:#94a3b8;         /* 흐린 설명 */
  --line:#e2e8f0;         /* 선 */
  --surface:#fff;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.05);
}

/* ── 섹션 제목: 화면마다 제각각이던 제목 모양을 하나로 ── */
.ui-sec{font-size:var(--fs-sm);font-weight:700;color:var(--ink2);
        margin:var(--sp5) var(--sp1) var(--sp2);letter-spacing:-.2px}
.ui-sec:first-child{margin-top:0}

/* ── 지표 묶음: 숫자 3~4개를 한 카드 안에 나란히 (칸 나누는 선 하나로 통일) ── */
.ui-stats{display:flex;background:var(--surface);border:1px solid var(--line);
          border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.ui-stats>div{flex:1;padding:var(--sp3) var(--sp2);text-align:center;
              border-left:1px solid var(--line);min-width:0}
.ui-stats>div:first-child{border-left:0}
.ui-stats .n{font-size:var(--fs-lg);font-weight:800;line-height:1.1;
             color:var(--ink);font-variant-numeric:tabular-nums}
.ui-stats .l{font-size:var(--fs-xs);color:var(--ink3);margin-top:var(--sp1);
             font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-stats .n.bad{color:#dc2626}       /* 문제 */
.ui-stats .n.warn{color:#d97706}      /* 주의 */
.ui-stats .n.good{color:#15803d}      /* 정상 */

/* ── 줄 배너: '정기점검', '카운터 청구' 처럼 눌러서 넘어가는 줄 ──
      예전엔 보라 그라데이션·민트 그라데이션으로 서로 달랐다. 하나로 맞춘다. */
.ui-bar{display:flex;align-items:center;gap:var(--sp2);background:var(--surface);
        border:1px solid var(--line);border-radius:var(--radius);
        padding:var(--sp3) var(--sp4);box-shadow:var(--shadow);margin-top:var(--sp2)}
/* 숫자가 함께 있는 줄은 제목/숫자를 위아래로 나눈다 — 한 줄에 다 넣으면 비좁다 */
.ui-bar.has-nums{display:block}
.ui-bar.has-nums .nums{margin:var(--sp3) 0 0;display:flex;gap:var(--sp2)}
.ui-bar.has-nums .nums span{flex:1;text-align:center}
.ui-bar .t{font-size:var(--fs-md);font-weight:700;color:var(--ink);
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-bar .go{margin-left:auto;font-size:var(--fs-sm);color:var(--ink3);flex:none}
.ui-bar:active{background:#f8fafc}
.ui-bar .nums{display:flex;gap:var(--sp3);margin-left:auto;flex:none}
.ui-bar .nums span{font-size:var(--fs-xs);color:var(--ink3);font-weight:600;text-align:right}
.ui-bar .nums b{display:block;font-size:var(--fs-md);color:var(--ink);font-weight:800;
                font-variant-numeric:tabular-nums}
.ui-bar .nums .bad b{color:#dc2626}
.ui-bar .nums .warn b{color:#d97706}
.ui-bar .nums .good b{color:#15803d}

/* ── 바로가기 타일: 4칸 × 2줄. 전부 같은 크기·같은 색. 글자는 반드시 한 줄 ──
      예전엔 7개가 3열에 들어가 마지막 한 개가 혼자 남고, 타일마다 테두리색이
      전부 달랐다(빨강·파랑·노랑·초록·보라·민트). 의미 없는 색은 전부 걷어냈다. */
.ui-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp2)}
.ui-tiles button{background:var(--surface);border:1px solid var(--line);
                 border-radius:var(--radius);box-shadow:var(--shadow);
                 padding:var(--sp3) var(--sp1) var(--sp2);
                 display:flex;flex-direction:column;align-items:center;gap:var(--sp1);
                 min-height:66px;cursor:pointer;position:relative}
.ui-tiles button:active{background:#f8fafc}
.ui-tiles .ic{font-size:19px;line-height:1}
.ui-tiles .lb{font-size:var(--fs-xs);font-weight:700;color:var(--ink2);
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 숫자 배지 — 0 이면 아예 안 보인다(있을 때만 빨강 = 의미가 있는 색) */
.ui-tiles .bdg{position:absolute;top:5px;right:6px;min-width:17px;height:17px;
               border-radius:999px;background:#dc2626;color:#fff;font-size:10px;
               font-weight:800;line-height:17px;text-align:center;padding:0 4px}