/* 📱 모바일·좁은 화면 레이아웃 (2026-10-21 사장님 휴대폰 캡처 3장)
 *
 * 무엇이 어색했나(원인):
 *  ① 상단 메뉴가 1199px 아래에선 아이콘만 보였다(.svc-tab-lb display:none) — "아이콘만으로는 의미가 없다, 반드시 메뉴명".
 *  ② 표가 좁은 칸에서 한국어를 한 글자씩 꺾었다('정/순/옥/난/청…', '단/위', '1/회') — 칸을 넘치게 둘 곳(가로 스크롤)이 없어서.
 *  ③ 본문 좌우 여백이 데스크톱 값(32px)이라 휴대폰에서 글이 가운데로 쪼그라들었다.
 *
 * 이 파일은 마지막에 불러온다(index.html) — 데스크톱 규칙은 건드리지 않고 좁은 화면만 덮는다.
 */

/* ── ① 상단 탭바: 1199px 이하 = 2단 ─────────────────────────────
 *   1줄: ☰ · 브랜드 · (요금제 · 크레딧 · 계정)
 *   2줄: 서비스 메뉴 — 글자만(아이콘 없음), 가로로 밀어서 보기. 지금 서비스는 가운데로 자동 이동(bootstrap centerActiveSvcTab).
 *   여러 줄로 감싸면 탭 13개가 3줄(약 120px)을 고정 머리로 차지해 본문이 가려진다 → 한 줄 가로 스크롤이 낫다. */
@media (max-width: 1199px) {
  .svc-bar-in { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 6px; padding-bottom: 0; }
  .svc-bar-menu { order: 0; }
  .svc-bar-brand { order: 1; }
  .svc-bar-right { order: 2; margin-left: auto; }
  .svc-tabs {
    order: 3; flex: 1 0 100%; margin: 6px 0 0; padding: 0 0 8px; gap: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .svc-tab-ic { display: none; }
  .svc-tab-lb, .svc-tab.active .svc-tab-lb { display: inline; }
  .svc-tab { flex-direction: row; height: 32px; padding: 0 13px; font-size: 13px; line-height: 1; letter-spacing: -.01em;
             border: 1px solid #eceef2; border-radius: 999px; background: #fafafb; }
  .svc-bar-right .svc-tab { height: 30px; padding: 0 11px; font-size: 12.5px; }
  .sidebar-expand-fab { top: 104px; }
}
@media (max-width: 720px) {
  .svc-bar-in { padding: 6px 10px 0; }
  .svc-bar-brand { font-size: 14px; }
  .svc-bar-credit { height: 30px; padding: 0 10px; font-size: 12px; }
}

/* ── ② 표: 글자를 한 자씩 꺾지 말고, 넘치면 표만 가로로 민다 ───────── */
@media screen and (max-width: 720px) {
  .content table, .input-wrap table, .mri-shell table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  th, td { word-break: keep-all; overflow-wrap: break-word; }
}

/* ── ③ 본문 여백: 휴대폰 폭을 글에 돌려준다 ─────────────────────── */
@media screen and (max-width: 720px) {
  .content { padding: 14px 10px 44px !important; }
  .mri-shell { gap: 14px; }
  .card { padding-left: 14px; padding-right: 14px; }
}

/* ── ④ 사이드바: 960px 이하에선 본문 위에 통째로 쌓여 화면 한 장을 먹었다 → 기본 닫힘, 상단 ☰ 로 화면을 덮는 패널로 연다 ──
 *   본문 흐름에 끼우면 스크롤 유지 장치가 연 메뉴를 화면 밖(위)으로 밀었다 → position:fixed 패널. 닫기는 패널 안 '사이드바 접기'·메뉴 선택(화면 이동 시 자동). */
@media (max-width: 960px) {
  .app:not(.m-open) .sidebar { display: none; }
  .app.m-open .sidebar {
    display: flex !important; position: fixed; inset: 0; z-index: 90;
    overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 14px; box-shadow: none;
  }
  .sidebar-expand-fab { display: none !important; }
}