/* ═════════════════════════════════════════════════
   PFM · Apple Layer  (2026-09-26, 원장: "애플 스타일로 쫙 변신, 색도")
   ─────────────────────────────────────────────────
   맨 마지막에 로드되는 최종 레이어. 앞의 6겹(style·design-system·glassmorphism·bento·polish·ops)을 덮는다.
   - 바탕 #f5f5f7, 흰 카드(그림자만, 테두리 거의 없음), 모서리 18px
   - 서체: 애플 시스템 서체(SF · Apple SD Gothic Neo) → Pretendard → Noto Sans KR
   - 강조색 하나: 애플 블루 #0071e3. 상태색은 애플 시스템 색(초록·주황·빨강)
   - 밝은 반투명 사이드바(맥 설정 앱 느낌), 반투명 상단바
   - 걷어내는 것: 배경 그라데이션·노이즈, 유리 광택, 빛나는 그림자, 굵은 색 띠, 빗금, 3D 기울기, 떠다니는 원
   인라인 색(모듈 JS)은 빌드 단계 scripts/apple-palette.cjs 가 애플 색으로 치환한다.
   ═════════════════════════════════════════════════ */

:root {
  --ap-blue: #0071e3;
  --ap-blue-hover: #0077ed;
  --ap-blue-press: #006edb;
  --ap-blue-soft: rgba(0, 113, 227, 0.10);
  --ap-green: #34c759;  --ap-green-ink: #248a3d;  --ap-green-soft: rgba(52, 199, 89, 0.12);
  --ap-orange: #ff9f0a; --ap-orange-ink: #c26a00; --ap-orange-soft: rgba(255, 159, 10, 0.14);
  --ap-red: #ff3b30;    --ap-red-ink: #d70015;    --ap-red-soft: rgba(255, 59, 48, 0.10);
  --ap-ink: #1d1d1f;
  --ap-ink-2: #424245;
  --ap-ink-3: #6e6e73;
  --ap-ink-4: #86868b;
  --ap-page: #f5f5f7;
  --ap-card: #ffffff;
  --ap-fill: rgba(0, 0, 0, 0.04);
  --ap-fill-2: rgba(0, 0, 0, 0.06);
  --ap-line: rgba(0, 0, 0, 0.08);
  --ap-line-2: rgba(0, 0, 0, 0.12);
  --ap-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
  --ap-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.08);
  --ap-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  --ap-radius: 18px;
  --ap-radius-sm: 12px;
  --ap-radius-xs: 8px;
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, "Segoe UI", sans-serif;
  --ap-sidebar: rgba(246, 246, 248, 0.82);
  --ap-glass: rgba(255, 255, 255, 0.72);

  /* 기존 토큰을 애플 값으로 */
  --primary: var(--ap-blue); --primary-light: var(--ap-blue-hover); --primary-dark: #0058b0; --primary-bg: #f2f7fe;
  --secondary: #5856d6; --secondary-light: #7d7aff; --accent: var(--ap-orange);
  --success: var(--ap-green); --warning: var(--ap-orange); --danger: var(--ap-red); --info: #007aff;
  --bg: var(--ap-page); --bg-card: var(--ap-card); --bg-secondary: #f5f5f7;
  --text: var(--ap-ink); --text-secondary: var(--ap-ink-3); --text-muted: var(--ap-ink-4);
  --border: var(--ap-line); --border-light: rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow: var(--ap-shadow); --shadow-md: var(--ap-shadow); --shadow-lg: var(--ap-shadow-hover);
  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 22px;

  --brand-50: #f2f7fe; --brand-100: #e5f0fd; --brand-200: #b3d7ff; --brand-300: #6cb4ff; --brand-400: #409cff;
  --brand-500: #0077ed; --brand-600: #0071e3; --brand-700: #0066cc; --brand-800: #0058b0; --brand-900: #003f7f; --brand-950: #002a55;
  --neutral-50: #fafafc; --neutral-100: #f5f5f7; --neutral-150: #ebebf0; --neutral-200: #e5e5ea; --neutral-300: #d2d2d7;
  --neutral-400: #86868b; --neutral-500: #6e6e73; --neutral-600: #424245; --neutral-700: #3a3a3c; --neutral-800: #1d1d1f; --neutral-900: #1d1d1f;
  --surface-page: var(--ap-page); --surface-card: var(--ap-card); --surface-raised: var(--ap-card); --surface-sunken: #f5f5f7;
  --surface-overlay: rgba(0, 0, 0, 0.32);
  --text-strong: var(--ap-ink); --text-primary: var(--ap-ink); --text-body: var(--ap-ink-2); --text-subtle: var(--ap-ink-4);
  --border-subtle: rgba(0,0,0,.05); --border-default: var(--ap-line); --border-strong: var(--ap-line-2);
  --border-brand: var(--ap-blue); --border-focus: var(--ap-blue);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-xl: var(--ap-shadow-pop);
  --shadow-brand: none; --shadow-brand-lg: none;
  --radius-md: 12px; --radius-2xl: 22px;
  --font-display: var(--ap-font); --font-body: var(--ap-font);

  --sidebar-bg: var(--ap-sidebar); --sidebar-surface: rgba(0,0,0,.03); --sidebar-hover: rgba(0,0,0,.05);
  --sidebar-active-bg: var(--ap-blue-soft); --sidebar-border: var(--ap-line);
  --sidebar-text: var(--ap-ink); --sidebar-text-dim: var(--ap-ink-4); --sidebar-text-active: var(--ap-blue);

  --glass-bg: var(--ap-card); --glass-bg-strong: var(--ap-card); --glass-bg-raised: var(--ap-card);
  --glass-border: var(--ap-line); --glass-border-subtle: var(--ap-line);
  --glass-shadow-sm: var(--ap-shadow); --glass-shadow-md: var(--ap-shadow); --glass-shadow-lg: var(--ap-shadow-hover); --glass-shadow-xl: var(--ap-shadow-pop);
  --glass-inset-light: none;

  --ops-core: var(--ap-blue); --ops-core-2: var(--ap-blue); --ops-core-soft: #e5f0fd; --ops-core-ink: #0058b0;
  --ops-side: var(--ap-ink-3);
  --ops-warn: var(--ap-red-ink); --ops-warn-soft: #fff2f1; --ops-warn-line: rgba(255, 59, 48, 0.22);
  --ops-ok: var(--ap-green-ink); --ops-ok-soft: #f1fbf3; --ops-ok-line: rgba(52, 199, 89, 0.28);
  --ops-off: var(--ap-ink-4); --ops-off-soft: #f5f5f7; --ops-off-line: var(--ap-line);
  --ops-paper: var(--ap-card); --ops-paper-line: var(--ap-line);
  --ops-radius: var(--ap-radius);
}

[data-theme="dark"] {
  --ap-blue: #0a84ff; --ap-blue-hover: #409cff; --ap-blue-soft: rgba(10, 132, 255, 0.18);
  --ap-green-ink: #30d158; --ap-orange-ink: #ff9f0a; --ap-red-ink: #ff453a;
  --ap-ink: #f5f5f7; --ap-ink-2: #d1d1d6; --ap-ink-3: #a1a1a6; --ap-ink-4: #8e8e93;
  --ap-page: #000000; --ap-card: #1c1c1e;
  --ap-fill: rgba(255,255,255,.06); --ap-fill-2: rgba(255,255,255,.09);
  --ap-line: rgba(255,255,255,.10); --ap-line-2: rgba(255,255,255,.16);
  --ap-shadow: 0 0 0 1px rgba(255,255,255,.06); --ap-shadow-hover: 0 0 0 1px rgba(255,255,255,.10), 0 8px 24px rgba(0,0,0,.5);
  --ap-sidebar: rgba(28, 28, 30, 0.82); --ap-glass: rgba(28, 28, 30, 0.72);
  --bg-secondary: #2c2c2e; --surface-sunken: #2c2c2e; --neutral-100: #2c2c2e;
  --sidebar-hover: rgba(255,255,255,.06); --sidebar-surface: rgba(255,255,255,.04);
  --ops-core-soft: rgba(10,132,255,.18); --ops-core-ink: #409cff;
  --ops-warn-soft: rgba(255,69,58,.14); --ops-ok-soft: rgba(48,209,88,.14); --ops-off-soft: #2c2c2e;
}

/* ─────────────────────────────────────────────
   0. 바탕 · 서체
   ───────────────────────────────────────────── */
html, body { font-family: var(--ap-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body, body.app-loaded { background: var(--ap-page) !important; color: var(--ap-ink); letter-spacing: -0.01em; }
body::before, body::after { display: none !important; content: none !important; }
button, input, select, textarea { font-family: inherit !important; }
h1, h2, h3, h4 { letter-spacing: -0.02em; color: var(--ap-ink); }
::selection { background: rgba(0, 113, 227, 0.22); }
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18) !important; border-radius: 10px; border: 3px solid transparent; background-clip: content-box !important; backdrop-filter: none !important; }
::-webkit-scrollbar-track { background: transparent; }

/* ─────────────────────────────────────────────
   1. 사이드바 — 밝은 반투명(맥 설정 앱)
   ───────────────────────────────────────────── */
.sidebar {
  background: var(--ap-sidebar) !important;
  backdrop-filter: saturate(180%) blur(30px) !important; -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
  border-right: 1px solid var(--ap-line) !important; box-shadow: none !important;
  color: var(--ap-ink) !important;
}
.sidebar-header { border-bottom: 0 !important; padding: 18px 16px 10px !important; }
.sidebar-logo {
  background: linear-gradient(180deg, #2a8cf5 0%, #0071e3 100%) !important; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
  border-radius: 10px !important; backdrop-filter: none !important;
}
.sidebar-title h2 { color: var(--ap-ink) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.sidebar-title small { color: var(--ap-ink-4) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; }
.nav-search-wrap { padding: 0 12px 8px !important; }
.nav-search {
  background: var(--ap-fill-2) !important; border: 0 !important; box-shadow: none !important; border-radius: 9px !important;
  color: var(--ap-ink-3) !important; backdrop-filter: none !important;
}
.nav-search-label, .nav-search kbd { color: var(--ap-ink-4) !important; background: transparent !important; border-color: var(--ap-line) !important; }

.sidebar-item, .nav-item {
  color: var(--ap-ink) !important; border-radius: 8px !important; padding: 7px 10px !important; margin-bottom: 1px !important;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; transform: none !important;
  box-shadow: none !important; opacity: 1 !important;
}
.sidebar-item:hover, .nav-item:hover { background: var(--sidebar-hover) !important; color: var(--ap-ink) !important; transform: none !important; }
.sidebar-item.active, .nav-item.active { background: var(--ap-blue-soft) !important; color: var(--ap-blue) !important; font-weight: 600 !important; box-shadow: none !important; }
.sidebar-item.active::before, .nav-item.active::before { display: none !important; }
.nav-item svg { color: var(--ap-blue); opacity: .9 !important; }
.nav-item.active svg { color: var(--ap-blue); opacity: 1 !important; }

.ops-zone { padding: 4px 10px 8px !important; }
.ops-zone + .ops-zone { border-top: 1px solid var(--ap-line) !important; }
.ops-zone-title, .ops-zone-core .ops-zone-title { color: var(--ap-ink-4) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 8px 10px 6px !important; }
.ops-zone-title .ops-zone-line { display: none; }
.ops-home { background: transparent !important; font-weight: 600 !important; }
.ops-home.active { background: var(--ap-blue-soft) !important; }
.ops-rail::before { background: var(--ap-line) !important; width: 1.5px !important; }
.ops-no {
  background: var(--ap-card) !important; border: 1.5px solid var(--ap-line-2) !important; color: var(--ap-ink-3) !important;
  font-weight: 700 !important; box-shadow: none !important;
}
.ops-core-item.active .ops-no { background: var(--ap-blue) !important; border-color: var(--ap-blue) !important; color: #fff !important; }
.ops-core-label b { font-weight: 600 !important; }
.ops-core-label small { color: var(--ap-ink-4) !important; opacity: 1 !important; }
.nav-item.active .ops-core-label small { color: var(--ap-blue) !important; opacity: .75 !important; }
.ops-dot.ok { background: var(--ap-green) !important; box-shadow: none !important; }
.ops-dot.warn { background: var(--ap-red) !important; box-shadow: 0 0 0 3px rgba(255,59,48,.16) !important; }
.ops-dot.off { background: rgba(0,0,0,.14) !important; }
.ops-zone-side .nav-item { opacity: 1 !important; color: var(--ap-ink-2) !important; }
.ops-zone-side .nav-item svg { opacity: .7 !important; color: var(--ap-ink-3); }
.ops-zone-foot { border-top: 1px solid var(--ap-line) !important; }

.sidebar-footer { border-top: 1px solid var(--ap-line) !important; background: transparent !important; }
.sidebar-user { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important; backdrop-filter: none !important; }
.sidebar-user:hover { background: var(--sidebar-hover) !important; }
.sidebar-user-avatar { background: linear-gradient(180deg, #8e8e93, #6e6e73) !important; color: #fff !important; box-shadow: none !important; }
.sidebar-user-name { color: var(--ap-ink) !important; }
.sidebar-user-role { color: var(--ap-ink-4) !important; }
.user-popup-menu { background: var(--ap-glass) !important; backdrop-filter: saturate(180%) blur(30px) !important; border: 1px solid var(--ap-line) !important; border-radius: 14px !important; box-shadow: var(--ap-shadow-pop) !important; }
.user-popup-item { color: var(--ap-ink) !important; border-radius: 8px !important; }
.user-popup-item:hover { background: var(--ap-blue) !important; color: #fff !important; }
.sidebar-backdrop { background: rgba(0,0,0,.25) !important; backdrop-filter: blur(4px); }

/* ─────────────────────────────────────────────
   2. 상단바 — 반투명
   ───────────────────────────────────────────── */
.main-content { background: transparent !important; }
.main-header {
  background: rgba(245, 245, 247, 0.72) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--ap-line) !important; box-shadow: none !important;
}
[data-theme="dark"] .main-header { background: rgba(0, 0, 0, 0.72) !important; }
.main-header-title { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.022em !important; color: var(--ap-ink) !important; }
.main-header-title svg { display: none; }
.ops-zone-chip, .ops-zone-chip[data-zone="core"], .ops-zone-chip[data-zone="side"] {
  background: var(--ap-fill-2) !important; color: var(--ap-ink-3) !important; border: 0 !important; font-weight: 600 !important; letter-spacing: 0 !important;
}
.ops-zone-chip::before { background: var(--ap-blue) !important; }
.ops-zone-chip[data-zone="side"]::before { background: var(--ap-ink-4) !important; }
.chat-header-btn, .btn-icon { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ap-blue) !important; border-radius: 8px !important; }
.chat-header-btn:hover, .btn-icon:hover { background: var(--ap-fill-2) !important; }
.main-body { background: transparent !important; }

/* 모듈 상단 요약 헤더(핵심 6화면) */
.ops-slothead-zone { background: var(--ap-card) !important; border-bottom: 1px solid var(--ap-line) !important; }
.ops-slothead::before { display: none !important; }
.ops-hd-no { background: var(--ap-green) !important; box-shadow: none !important; }
.ops-slothead--warn .ops-hd-no { background: var(--ap-red) !important; }
.ops-slothead--off .ops-hd-no { background: #c7c7cc !important; }
.ops-hd-no--team { background: #5856d6 !important; }
.ops-hd-title { font-weight: 700 !important; letter-spacing: -0.015em; }
.ops-hd-chip { background: var(--ap-page) !important; border: 0 !important; border-radius: 10px !important; }
.ops-hd-tag, .ops-slot-tag, .ops-flag, .pf-src { border: 0 !important; font-weight: 600 !important; }

/* ─────────────────────────────────────────────
   3. 카드 — 흰 판 + 부드러운 그림자, 색 띠 없음
   ───────────────────────────────────────────── */
.card, .stat-card, .page-header, .material-card, .explore-card, .ops-today, .ops-board, .pf-shape, .ops-weekly, .ops-rhythm,
.bento-tile, .bento-tile:not([class*="tone-"]), .aha-insight-card, .fb-thread, .empty-state-card {
  background: var(--ap-card) !important; border: 0 !important; box-shadow: var(--ap-shadow) !important;
  border-radius: var(--ap-radius) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.card:hover, .stat-card:hover { box-shadow: var(--ap-shadow-hover) !important; transform: none !important; }
.ops-board::before, .pf-shape::before, .ops-slot::before, .stat-card::before, .card::before, .bento-tile::before, .bento-tile::after { display: none !important; }
.ops-board, .pf-shape { padding: 22px 24px 20px !important; }
.ops-today { padding: 14px 20px !important; }
.ops-today-title, .ops-board-title, .pf-shape-title { font-weight: 700 !important; letter-spacing: -0.025em !important; color: var(--ap-ink) !important; }
.ops-board-title, .pf-shape-title { font-size: 22px !important; }
.ops-eyebrow, .pf-shape-kicker { color: var(--ap-ink-4) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; font-size: 12px !important; }

/* 8자리 보드 칸 */
.ops-slot, .ops-slot--warn, .ops-slot--off {
  background: var(--ap-page) !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important;
}
.ops-slot--warn { background: #fff2f1 !important; box-shadow: inset 0 0 0 1px rgba(255,59,48,.18) !important; }
[data-theme="dark"] .ops-slot, [data-theme="dark"] .ops-slot--off { background: #2c2c2e !important; }
[data-theme="dark"] .ops-slot--warn { background: rgba(255,69,58,.14) !important; }
.ops-slot[data-goto]:hover { transform: none !important; background: #ececf0 !important; box-shadow: none !important; }
.ops-slot-no { background: var(--ap-blue) !important; font-weight: 700 !important; }
.ops-slot--warn .ops-slot-no { background: var(--ap-red) !important; }
.ops-slot--off .ops-slot-no { background: #c7c7cc !important; }
.ops-slot-role { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.ops-seed, .pf-zone { background: var(--ap-page) !important; border: 0 !important; border-radius: 14px !important; }
[data-theme="dark"] .ops-seed, [data-theme="dark"] .pf-zone { background: #2c2c2e !important; }
.ops-seed-val, .pf-zone-val, .pf-score-num { font-weight: 700 !important; letter-spacing: -0.02em !important; }

/* 퍼널 막대 — 빗금 대신 차분한 회색, 색 띠 제거 */
.pf-band-bar { background: var(--ap-blue) !important; opacity: 1 !important; border-radius: 8px !important; text-shadow: none !important; font-weight: 600 !important; }
.pf-band--warn .pf-band-bar { background: var(--ap-red) !important; }
.pf-band--off .pf-band-bar { background: #e8e8ed !important; color: var(--ap-ink-4) !important; }
[data-theme="dark"] .pf-band--off .pf-band-bar { background: #2c2c2e !important; }
.pf-band-zone { display: none !important; }
.pf-row-no b { font-weight: 700 !important; }
.pf-eval { background: var(--ap-page) !important; border: 0 !important; border-radius: 16px !important; }
[data-theme="dark"] .pf-eval { background: #2c2c2e !important; }
.pf-score-grade { background: var(--ap-blue-soft) !important; color: var(--ap-blue) !important; font-weight: 600 !important; }
.pf-leak { background: #fff2f1 !important; border: 0 !important; border-radius: 14px !important; }
.pf-src { background: var(--ap-fill) !important; color: var(--ap-ink-3) !important; }
.pf-src.on { background: var(--ap-green-soft) !important; color: var(--ap-green-ink) !important; }

/* 지금 할 일 리듬 */
.rhythm-item { background: var(--ap-page) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }
.rhythm-item.off { opacity: .7 !important; }

/* 벤토 — 3D·떠다니는 원 제거 */
.bento-tile { transform: none !important; min-height: 120px; }
.bento-tile .bento-orb, .bento-orb { display: none !important; }
.tilt-enabled { transform: none !important; }
.bento-tile:hover { box-shadow: var(--ap-shadow-hover) !important; }
.bento-icon { background: var(--ap-page) !important; box-shadow: none !important; border-radius: 10px !important; }
.bento-value { font-weight: 700 !important; letter-spacing: -0.025em !important; }
.bento-label, .bento-caption { color: var(--ap-ink-3) !important; }

/* ─────────────────────────────────────────────
   4. 버튼 — 알약형, 광택·그림자 없음
   ───────────────────────────────────────────── */
.btn {
  border-radius: 980px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; box-shadow: none !important;
  transition: background .15s ease, color .15s ease, opacity .15s ease !important; transform: none !important;
}
.btn:hover { transform: none !important; }
.btn:active { opacity: .82; }
.btn-primary, .btn.btn-primary { background: var(--ap-blue) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
.btn-primary:hover { background: var(--ap-blue-hover) !important; box-shadow: none !important; }
.btn-primary::after, .btn-primary::before { display: none !important; }
.btn-secondary, .btn-outline, .btn-ghost, .btn-default {
  background: var(--ap-fill-2) !important; color: var(--ap-blue) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
.btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover, .btn-default:hover { background: rgba(0,0,0,.09) !important; }
.btn-danger { background: var(--ap-red) !important; color: #fff !important; border: 0 !important; }
.btn-success { background: var(--ap-green) !important; color: #fff !important; border: 0 !important; }
.btn-sm { padding: 6px 14px !important; font-size: 12.5px !important; }
.ops-btn { border-radius: 980px !important; border: 0 !important; background: var(--ap-fill-2) !important; color: var(--ap-blue) !important; font-weight: 500 !important; }
.ops-btn:hover { background: rgba(0,0,0,.09) !important; }
.ops-btn.primary { background: var(--ap-blue) !important; color: #fff !important; }
.ops-btn.primary:hover { background: var(--ap-blue-hover) !important; }

/* 세그먼트 컨트롤 (iOS) */
.ops-seg, .tab-list, .tabs, .fb-tabs {
  background: rgba(118, 118, 128, 0.12) !important; border: 0 !important; border-radius: 9px !important; padding: 2px !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
.ops-seg button { border-radius: 7px !important; color: var(--ap-ink) !important; font-weight: 500 !important; }
.ops-seg button.active { background: var(--ap-card) !important; color: var(--ap-ink) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04) !important; font-weight: 600 !important; }
[data-theme="dark"] .ops-seg button.active { background: #636366 !important; }

/* ─────────────────────────────────────────────
   5. 입력칸
   ───────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"],
input[type="search"], input[type="url"], input:not([type]), textarea, select, .form-input, .input-sm {
  background: var(--ap-card) !important; border: 1px solid var(--ap-line-2) !important; border-radius: 10px !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--ap-ink) !important;
}
input:focus, textarea:focus, select:focus, .form-input:focus {
  border-color: var(--ap-blue) !important; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16) !important; outline: none !important;
}
input::placeholder, textarea::placeholder { color: #aeaeb2 !important; }
.nav-search input, .nav-search input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ap-blue); }
label, .form-label { color: var(--ap-ink-2); font-weight: 500; }

/* ─────────────────────────────────────────────
   6. 표·목록
   ───────────────────────────────────────────── */
table { border-collapse: separate; border-spacing: 0; }
th { color: var(--ap-ink-4) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; background: transparent !important; border-bottom: 1px solid var(--ap-line) !important; }
td { border-color: rgba(0,0,0,.05) !important; }
tbody tr:hover { background: rgba(0,0,0,.025) !important; }

/* ─────────────────────────────────────────────
   7. 진료보드(칸반)
   ───────────────────────────────────────────── */
.kb-board { gap: 14px !important; }
.kb-col { background: rgba(0,0,0,.035) !important; border: 0 !important; border-radius: 18px !important; box-shadow: none !important; }
[data-theme="dark"] .kb-col { background: #1c1c1e !important; }
.kb-col.drag-over, .kb-col.kb-drag-over { background: var(--ap-blue-soft) !important; }
.kb-card {
  background: var(--ap-card) !important; border: 0 !important; border-left: 3px solid var(--accent, var(--ap-blue)) !important;
  border-radius: 12px !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.03) !important;
}
[data-theme="dark"] .kb-card { background: #2c2c2e !important; }
.kb-card:hover { transform: none !important; box-shadow: var(--ap-shadow-hover) !important; }
.kb-card-badge { border-radius: 6px !important; font-weight: 600 !important; }
.kb-card-info { background: var(--ap-page) !important; border-radius: 6px !important; color: var(--ap-ink-3) !important; }
.tb-doctor-bar > div, .tb-staff-bar > div { background: var(--ap-card) !important; border: 0 !important; box-shadow: var(--ap-shadow) !important; border-radius: var(--ap-radius) !important; }
[data-theme="dark"] .tb-doctor-bar > div, [data-theme="dark"] .tb-staff-bar > div { background: #1c1c1e !important; }

/* ─────────────────────────────────────────────
   8. 모달·토스트·팝오버
   ───────────────────────────────────────────── */
#modalOverlay, .modal-overlay { background: rgba(0, 0, 0, 0.28) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
.modal, .modal-content, .aha-modal {
  background: var(--ap-card) !important; border: 0 !important; border-radius: 22px !important; box-shadow: var(--ap-shadow-pop) !important;
  backdrop-filter: none !important;
}
.modal-header, .modal-footer { background: transparent !important; border-color: var(--ap-line) !important; backdrop-filter: none !important; }
.toast {
  background: rgba(29, 29, 31, 0.92) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.22) !important; backdrop-filter: saturate(180%) blur(20px) !important; font-weight: 500 !important;
}
.toast * { color: inherit !important; }
.context-menu { background: var(--ap-glass) !important; backdrop-filter: saturate(180%) blur(30px) !important; border: 1px solid var(--ap-line) !important; border-radius: 12px !important; box-shadow: var(--ap-shadow-pop) !important; }

/* 배지·알약 */
.badge, .pill, .ops-hd-tag, .ops-slot-tag { border-radius: 980px !important; font-weight: 600 !important; }
.loading-spinner { border-color: rgba(0,0,0,.1) !important; border-top-color: var(--ap-ink-3) !important; }

/* ─────────────────────────────────────────────
   9. 모바일 탭바 — iOS
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .ops-tabs { background: rgba(249, 249, 249, 0.86) !important; backdrop-filter: saturate(180%) blur(20px) !important; border-top: 1px solid var(--ap-line) !important; }
  [data-theme="dark"] .ops-tabs { background: rgba(22, 22, 23, 0.86) !important; }
  .ops-tab { color: #8e8e93 !important; }
  .ops-tab.active { color: var(--ap-blue) !important; }
  .ops-tab.active .ops-tab-ico { background: transparent !important; }
}

/* ─────────────────────────────────────────────
   10. 로그인 화면 — 흰 바탕, 검은 글자, 파란 강조
   ───────────────────────────────────────────── */
.auth-screen { background: var(--ap-page) !important; }
.auth-screen::before, .auth-screen::after { display: none !important; content: none !important; }
.auth-story, .auth-story * { color: var(--ap-ink) !important; text-shadow: none !important; }
.auth-story-headline { font-weight: 700 !important; letter-spacing: -0.035em !important; line-height: 1.12 !important; }
.auth-story-headline .highlight, .auth-story h2 .highlight { color: var(--ap-blue) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.auth-story-sub, .auth-story .subtitle, .auth-feature-desc { color: var(--ap-ink-3) !important; }
.auth-brand-mark { background: linear-gradient(180deg, #2a8cf5, #0071e3) !important; color: #fff !important; box-shadow: none !important; border: 0 !important; }
.auth-brand-mark * { color: #fff !important; }
.auth-feature-card { background: var(--ap-card) !important; border: 0 !important; box-shadow: var(--ap-shadow) !important; border-radius: 18px !important; backdrop-filter: none !important; transform: none !important; }
.auth-feature-title { font-weight: 600 !important; }
.auth-story a[href="/api/auth/hub"] {
  background: var(--ap-ink) !important; color: #fff !important; border: 0 !important; border-radius: 980px !important;
  backdrop-filter: none !important; font-weight: 600 !important; box-shadow: none !important;
}
.auth-story a[href="/api/auth/hub"] * { color: #fff !important; }
#hubSsoPrimary a[href="/api/auth/hub"] {
  background: var(--ap-blue) !important; box-shadow: none !important; border-radius: 980px !important; font-weight: 600 !important; font-size: 16px !important; transform: none !important;
}
#hubSsoPrimary a[href="/api/auth/hub"]:hover { background: var(--ap-blue-hover) !important; }
.auth-card { background: var(--ap-card) !important; border: 0 !important; box-shadow: var(--ap-shadow-pop) !important; border-radius: 24px !important; backdrop-filter: none !important; }
.auth-card::before, .auth-card::after { display: none !important; }
.auth-card h1, .auth-card h2, .auth-card h3, .auth-card label, .auth-card .form-label { color: var(--ap-ink) !important; text-shadow: none !important; }
.auth-card h1 { font-weight: 700 !important; letter-spacing: -0.03em !important; }
.auth-card p, .auth-card small, .auth-card .hint, .auth-card .muted { color: var(--ap-ink-3) !important; }
.auth-card input, .auth-card textarea, .auth-card select { color: var(--ap-ink) !important; background: var(--ap-card) !important; }
.auth-card input::placeholder { color: #aeaeb2 !important; }
.auth-logo-icon { background: linear-gradient(180deg, #2a8cf5, #0071e3) !important; box-shadow: none !important; border-radius: 16px !important; }
.auth-form .btn-primary, #authSubmitBtn { background: var(--ap-blue) !important; border-radius: 980px !important; box-shadow: none !important; font-weight: 600 !important; }
.auth-tabs { background: rgba(118, 118, 128, 0.12) !important; border: 0 !important; border-radius: 9px !important; padding: 2px !important; }
.auth-tab { color: var(--ap-ink) !important; border-radius: 7px !important; font-weight: 500 !important; background: transparent !important; box-shadow: none !important; }
.auth-tab.active { background: var(--ap-card) !important; color: var(--ap-ink) !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; }
.auth-trust-bar, .auth-trust-bar * { background: transparent !important; border: 0 !important; color: var(--ap-ink-4) !important; box-shadow: none !important; }
.auth-demo-banner { background: var(--ap-page) !important; border: 0 !important; backdrop-filter: none !important; color: var(--ap-ink-2) !important; }
.auth-demo-banner * { color: inherit; }
.auth-error { background: #fff2f1 !important; color: var(--ap-red-ink) !important; border: 0 !important; border-radius: 12px !important; }
.boot-logo { background: linear-gradient(180deg, #2a8cf5, #0071e3) !important; box-shadow: none !important; backdrop-filter: none !important; }

/* 설치 배너 */
.pfm-install-banner { background: var(--ap-glass) !important; backdrop-filter: saturate(180%) blur(30px) !important; border: 1px solid var(--ap-line) !important; border-radius: 18px !important; box-shadow: var(--ap-shadow-pop) !important; }

/* ─────────────────────────────────────────────
   11. 홈 '퍼널 오퍼레이팅 투어' 카드 (2026-09-26)
   ───────────────────────────────────────────── */
.explore-card { padding: 22px 24px 16px !important; }
.explore-card h3 { font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; }
.explore-accent { color: var(--ap-blue); }
.explore-card-header p { color: var(--ap-ink-3) !important; font-size: 13px !important; line-height: 1.5; }
.explore-progress-bar { height: 4px !important; background: var(--ap-fill-2) !important; border-radius: 980px !important; }
.explore-progress-bar > div { background: var(--ap-blue) !important; border-radius: 980px !important; }
.explore-progress-text { color: var(--ap-ink-3) !important; font-weight: 600 !important; }
.explore-tasks { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
@media (max-width: 1100px) { .explore-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .explore-tasks { grid-template-columns: 1fr !important; } }
.explore-task {
  background: var(--ap-page) !important; border: 0 !important; border-radius: 14px !important; padding: 14px 14px !important;
  box-shadow: none !important; transform: none !important; gap: 12px !important;
}
.explore-task:hover { background: #ececf0 !important; transform: none !important; box-shadow: none !important; }
[data-theme="dark"] .explore-task { background: #2c2c2e !important; }
.explore-check {
  width: 26px; height: 26px; border-radius: 980px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px !important; font-weight: 700; color: var(--ap-blue); background: var(--ap-card); box-shadow: inset 0 0 0 1.5px var(--ap-blue);
  font-variant-numeric: tabular-nums;
}
.explore-task.done { background: var(--ap-page) !important; opacity: 1 !important; }
.explore-task.done .explore-check { background: var(--ap-green); color: #fff; box-shadow: none; }
.explore-task.done .explore-title { color: var(--ap-ink-3) !important; }
.explore-title { font-weight: 600 !important; font-size: 13.5px !important; color: var(--ap-ink) !important; letter-spacing: -0.015em; }
.explore-desc { color: var(--ap-ink-3) !important; font-size: 12px !important; }
.explore-arrow { color: #c7c7cc !important; transform: none !important; }
.explore-task:hover .explore-arrow { color: var(--ap-blue) !important; transform: none !important; }
#exploreDismiss { color: var(--ap-ink-4) !important; background: transparent !important; }

/* ─────────────────────────────────────────────
   12. 2026-09-26 구성 정리분 — 오늘 스트립 진료보드 요약 · ① 전화 탭
   ───────────────────────────────────────────── */
.ops-today-link { cursor: pointer; color: var(--ap-ink-3) !important; text-decoration: none; border-left: 1px solid var(--ap-line); padding-left: 14px; }
.ops-today-link:hover { color: var(--ap-blue) !important; }
.ops-today-link b { color: var(--ap-ink); }
.calls-seg { display: inline-flex !important; }
.calls-seg button { border: 0; background: transparent; padding: 6px 16px; font-size: 13px; cursor: pointer; }

/* 막힌 버튼은 흐리게 (2026-09-26 개선 제안 쓰기 — 익명·기명 고르기 전) */
.btn:disabled, .btn[disabled], .btn-primary:disabled { opacity: .38 !important; cursor: not-allowed !important; }
#modalContent .form-input { padding: 9px 12px !important; font-size: 14px !important; width: 100%; box-sizing: border-box; }

/* ─────────────────────────────────────────────
   13. 2026-09-26 페이션트 퍼널 메인 — 사이드바 구간 · 단계 선택 · 단계 상세
   ───────────────────────────────────────────── */
.ops-fz-title { font-size: 11px; font-weight: 600; color: var(--ap-ink-4); padding: 10px 10px 4px; }
.ops-st {
  min-width: 26px; height: 20px; padding: 0 6px; border-radius: 980px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ap-ink-3); background: var(--ap-fill-2);
}
.nav-item.active .ops-st { background: var(--ap-blue); color: #fff; }
.pf-row[data-stage] { cursor: pointer; }
.pf-row[data-stage]:hover .pf-band-bar { filter: brightness(1.08); }
.pf-row.sel .pf-row-no b { color: var(--ap-blue); }
.pf-row.sel .pf-band { box-shadow: 0 0 0 2px var(--ap-blue); border-radius: 9px; }

.pf-stage { background: var(--ap-card); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); padding: 20px 24px; margin-bottom: 16px; }
.pf-stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pf-stage-kicker { font-size: 12px; color: var(--ap-ink-4); font-weight: 600; }
.pf-stage-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-stage-sub { font-size: 12.5px; color: var(--ap-ink-3); margin-top: 3px; }
.pf-stage-tag { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 980px; letter-spacing: 0; }
.pf-stage-tag.warn { background: #fff2f1; color: var(--ap-red-ink); }
.pf-stage-tag.ok { background: var(--ap-green-soft); color: var(--ap-green-ink); }
.pf-stage-tag.off { background: var(--ap-fill-2); color: var(--ap-ink-3); }
.pf-stage-nav { display: flex; gap: 6px; }
.pf-stage-nav .ops-btn:disabled { opacity: .35; }
.pf-stage-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 10px; }
.pf-kpi { background: var(--ap-page); border-radius: 14px; padding: 12px 14px; }
.pf-kpi small { display: block; font-size: 11.5px; color: var(--ap-ink-4); }
.pf-kpi b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pf-kpi b i { font-size: 12px; font-style: normal; color: var(--ap-ink-4); font-weight: 600; }
.pf-stage-note { font-size: 12.5px; color: var(--ap-ink-3); margin-bottom: 8px; }
.pf-stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 8px; }
@media (max-width: 900px) { .pf-stage-grid { grid-template-columns: 1fr; } .pf-stage-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-stage-h { font-size: 13px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.pf-stage-m { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ap-line); font-size: 13px; }
.pf-stage-m .l { color: var(--ap-ink-2); }
.pf-stage-m .v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-stage-off { font-size: 12.5px; color: var(--ap-ink-4); padding: 8px 0; }
.pf-stage-todo { font-size: 13px; line-height: 1.6; background: var(--ap-page); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.pf-stage-act { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; background: transparent; padding: 9px 2px; border-bottom: 1px solid var(--ap-line); cursor: pointer; font-size: 13px; text-align: left; color: var(--ap-ink); }
.pf-stage-act:hover .l { color: var(--ap-blue); }
.pf-stage-act .v { font-weight: 700; white-space: nowrap; }
.pf-stage-act.warn .v { color: var(--ap-red-ink); }
.pf-stage-act.ok .v { color: var(--ap-green-ink); }
.pf-stage-act.off .v { color: var(--ap-ink-4); }
.pf-stage-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ops-today-alerts { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-today-alert { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 980px; background: #fff2f1; color: var(--ap-red-ink) !important; cursor: pointer; text-decoration: none; }

/* ─────────────────────────────────────────────
   14. 2026-09-26 퍼널 시각화 v2 + 액션 플랜
   ───────────────────────────────────────────── */
.ops-layer-title { margin-top: 10px; }
.ops-layer b { font-weight: 600 !important; }
.pf-band-bar { color: #fff; font-size: 11.5px; font-weight: 700 !important; justify-content: flex-end !important; padding-right: 8px; }
.pf-band--off .pf-band-bar { justify-content: center !important; }
.pf-spark { display: inline-block; margin-left: 6px; vertical-align: middle; }
.pf-row-side { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.pf-row-side > b { margin-right: 2px; }
.pf-mx { padding: 9px 0; border-bottom: 1px solid var(--ap-line); }
.pf-mx-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.pf-mx-top .l { color: var(--ap-ink-2); }
.pf-mx-top .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-mx-bar { height: 5px; border-radius: 980px; background: var(--ap-fill-2); margin: 6px 0 4px; overflow: hidden; }
.pf-mx-bar span { display: block; height: 100%; border-radius: 980px; background: var(--ap-blue); }
.pf-mx-bar span.warn { background: var(--ap-red); }
.pf-mx-bar span.ok { background: var(--ap-green); }
.pf-mx-sub { font-size: 11.5px; color: var(--ap-ink-4); }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pl-card { background: var(--ap-card); border-radius: 16px; box-shadow: var(--ap-shadow); padding: 16px 18px; }
.pf-stage .pl-card { box-shadow: none; background: var(--ap-page); }
.pl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-stage { font-size: 12px; font-weight: 700; color: var(--ap-blue); }
.pl-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 980px; }
.pl-tag.run { background: var(--ap-blue-soft); color: var(--ap-blue); }
.pl-tag.warn { background: #fff2f1; color: var(--ap-red-ink); }
.pl-tag.ok { background: var(--ap-green-soft); color: var(--ap-green-ink); }
.pl-tag.off { background: var(--ap-fill-2); color: var(--ap-ink-3); }
.pl-meta { font-size: 11.5px; color: var(--ap-ink-4); }
.pl-title { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; margin-top: 8px; }
.pl-metric { font-size: 12px; color: var(--ap-ink-3); margin-top: 2px; }
.pl-prog { margin: 12px 0 6px; }
.pl-prog-track { position: relative; height: 8px; border-radius: 980px; background: var(--ap-fill-2); }
.pl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 980px; background: var(--ap-blue); }
.pl-mark { position: absolute; top: -4px; width: 2px; height: 16px; border-radius: 2px; transform: translateX(-1px); z-index: 1; }
.pl-mark.base { background: var(--ap-ink-4); }
.pl-mark.target { background: var(--ap-green); }
.pl-prog-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ap-ink-3); margin-top: 6px; }
.pl-prog-legend b { color: var(--ap-ink); font-variant-numeric: tabular-nums; }
.pl-tasks { margin-top: 10px; display: grid; gap: 2px; }
.pl-task { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--ap-line); cursor: pointer; }
.pl-task .t { flex: 1; }
.pl-task .a { font-size: 11px; color: var(--ap-ink-4); background: var(--ap-fill); padding: 1px 7px; border-radius: 980px; }
.pl-task.done .t { color: var(--ap-ink-4); text-decoration: line-through; }
.pl-task-sum { font-size: 11.5px; color: var(--ap-ink-4); margin-top: 4px; }
.pl-note { font-size: 12.5px; color: var(--ap-ink-2); background: var(--ap-page); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.pl-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pl-empty { display: grid; gap: 8px; font-size: 13px; color: var(--ap-ink-2); background: var(--ap-page); border-radius: 14px; padding: 14px; }
.pl-empty .btn { justify-self: start; }
.pl-lbl { font-size: 12.5px; font-weight: 600; }
.pl-rx { display: grid; grid-template-columns: auto 1fr 90px; align-items: center; gap: 8px; font-size: 13px; }
.pl-rx .form-input { padding: 5px 8px !important; font-size: 12px !important; }

/* ═════════════════════════════════════════════════
   12. 【2026-09-30】모바일(375)·PC(1440/1920) 화면 최적화 — 원장 "모든 서비스 모바일·PC 각각 최적화"
   ─────────────────────────────────────────────────
   기능·문구는 그대로, 배치만. 모든 화면 공통 규칙을 이 최종 레이어에서 처리한다.
   ═════════════════════════════════════════════════ */

/* 12-1. PC 넓은 화면: 본문 최대 폭 1320px 가운데 정렬 (1440 에선 본문이 1180px 이라 변화 없음, 1920 에서만 적용) */
@media (min-width: 1600px) {
  /* 자식마다 auto 여백을 주면 좁은 탭 묶음(.ops-seg)이 가운데로 가 버리므로, 본문 좌우 안쪽 여백으로 폭을 제한 */
  .main-body { padding-left: max(24px, calc((100% - 1320px) / 2)) !important; padding-right: max(24px, calc((100% - 1320px) / 2)) !important; }
  .ops-slothead { padding-left: max(20px, calc((100% - 1328px) / 2)); padding-right: max(20px, calc((100% - 1328px) / 2)); }
}

/* 12-2. 모듈이 머리·본문 없이 채우는 모달(#modalContent 직접 채움)은 안쪽 여백이 0 이라 글자가 가장자리에 붙었다 → 여백 부여 */
#modalContent:not(:has(> .modal-header)):not(:has(> .modal-body)) { padding: 22px 24px 18px; }
@media (max-width: 768px) {
  #modalContent:not(:has(> .modal-header)):not(:has(> .modal-body)) { padding: 16px 16px 14px; }
}

@media (max-width: 768px) {
  /* 12-3. 표: style.css 의 모바일 규칙(table{display:block} + thead/tbody/tr{display:table;table-layout:fixed})이
     줄마다 따로 폭을 계산해 열이 어긋나고 글자가 겹쳤다(환자 DB 연락처·진료영역 등).
     → 줄·열 구조는 정상 표로 되돌리고, 표 자체(또는 감싼 상자)가 가로 스크롤을 맡는다. */
  table thead { display: table-header-group; width: auto; table-layout: auto; }
  table tbody { display: table-row-group; width: auto; table-layout: auto; }
  table tfoot { display: table-footer-group; }
  table tr { display: table-row; width: auto; table-layout: auto; }
  /* 이미 가로 스크롤 상자에 들어 있는 표는 원래 표 그대로(폭 100%·min-width 존중) */
  :is(div[style*="overflow-x:auto"], div[style*="overflow-x: auto"], div[style*="overflow:auto"], div[style*="overflow: auto"], .table-wrap, .table-container, .table-responsive) > table { display: table; }

  /* 12-4. 입력칸 글자 16px (iOS 초점 확대 방지) — .input-sm·검색칸·날짜칸 포함 */
  /* :not(#pfm-x) = 아이디 단위 우선순위 — .btn-sm 등 !important 클래스 규칙·인라인 글자 크기 규칙보다 앞서게 */
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):not(#pfm-x) { font-size: 16px !important; }
  .nav-search input { font-size: 16px !important; }
  /* 2열 입력 격자에서 날짜칸(16px)이 고유 폭 때문에 칸·모달 밖으로 삐져나왔다 → 격자 칸 최소폭 0, 입력칸 최대폭 100% */
  :is(.main-body, #modalContent) [style*="grid-template-columns"] > * { min-width: 0; }
  :is(.main-body, #modalContent) :is(input, select, textarea) { max-width: 100%; }
  :is(.main-body, #modalContent) input[type="date"], :is(.main-body, #modalContent) input[type="time"] { min-width: 0; }

  /* 12-5. 상단 헤더: 버튼이 많은 화면(진료보드 등)에서 제목이 사라지고 버튼이 잘렸다 → 제목 최소 폭 + 버튼 줄 가로 스크롤 */
  .main-header-title { flex: 0 1 auto; min-width: 72px; }
  /* justify-content:flex-end 로 넘치면 왼쪽 끝이 스크롤로도 안 보인다 → 첫 칸 margin-left:auto 로 오른쪽 정렬 */
  .main-header-actions { min-width: 0; flex: 1 1 auto; justify-content: flex-start !important; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .main-header-actions > :first-child { margin-left: auto; }
  /* 게시판 머리 검색칸이 180px 이라 '글쓰기'가 화면 밖으로 밀렸다 */
  #postSearchInput { width: 100px !important; }
  .main-header-actions::-webkit-scrollbar { display: none; }
  .main-header-actions > * { flex-shrink: 0; }
  .chat-header-btn { flex-shrink: 0; width: 40px !important; height: 40px !important; min-width: 40px; }

  /* 12-6. 누르는 영역 40px 이상 */
  .ops-hd-btn { min-height: 36px; padding: 6px 12px; font-size: 12.5px; }
  .ops-slothead .ops-hd-btn + .ops-hd-btn { margin-left: 4px; }
  .pf-period, .ops-seg > button { min-height: 40px; padding-left: 12px; padding-right: 12px; font-size: 13px; }
  .ops-btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .funnel-tab-btn, .pfm-subtab-btn { min-height: 40px; }
  .psc-intro-x { min-width: 40px; min-height: 40px; }
  .btn-sm { min-width: 40px !important; }
  a[href^="#help-"] { min-height: 40px; display: inline-flex !important; align-items: center; }
  label:has(> .check-item), label:has(> .my-sched-day), label:has(> .oh-day-toggle) { min-height: 40px; }
  /* 게시판 표(공지·자유 등): 6칸 고정폭 합이 화면보다 넓어 제목 칸이 0 이 되고 '조회'가 잘렸다 → 모바일은 제목·작성자·날짜만 */
  .post-table-header, .post-row { grid-template-columns: minmax(0, 1fr) 64px 72px !important; gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .post-table-header > :nth-child(1), .post-row > :nth-child(1), .post-table-header > :nth-child(4), .post-row > :nth-child(4),
  .post-table-header > :nth-child(5), .post-row > :nth-child(5) { display: none !important; }
  .pagination button, .pagination a, #calPrev, #calNext { min-width: 40px; }
  .modal-close-btn { min-width: 40px; min-height: 40px; }
  #forgotPasswordLink { display: inline-block; padding: 10px 2px; }
  .auth-demo-banner [style*="cursor:pointer"], .auth-demo-banner [style*="cursor: pointer"] { display: inline-block; padding: 10px 0; }
  .auth-demo-banner span { font-size: 12px !important; }
  .psc-intro-go, .pf-stage-act, #secondaryToggle { min-height: 40px; }
  /* 소개 갤럭시: 탭 4개가 한 줄에 눌려 두 줄로 깨지던 것 → 2열 */
  .rfx-header .flex.gap-2 { flex-wrap: wrap; width: 100%; }
  .rfx-header .flex.gap-2 > button { flex: 1 1 calc(50% - 4px); white-space: nowrap; min-height: 44px; }
  .referrals-page .text-xs, .pf-score-grade, .chip, #secondaryToggle, .explore-progress-text { font-size: 12px !important; }
  /* 서랍 메뉴(더보기) 보조 글자 */
  .sidebar small, .ops-fz-title, .sidebar-user-role, .ops-st { font-size: 12px !important; }

  /* 12-7. 글자 12px 이상 — 공통 부품 */
  .ops-hd-tag, .ops-hd small, .ops-slothead small, .ops-slothead i, .ops-hd-d { font-size: 12px !important; }
  .ops-hd-next { font-size: 13px; }
  .ops-tab, .ops-tab > span:not(.ops-tab-ico) { font-size: 12px !important; }
  .kb-card-badge, .kb-card-info, .kb-card-desc, .content-card-badge, .cal-event-chip, .live-indicator,
  .pl-tag, .pl-meta, .pl-task .a, .pl-task-sum, .pl-prog-legend, .auth-trust-bar, .auth-trust-bar *, .trust-item,
  .pf-bench, .bench, .off, .ops-zone-title, th,
  .pf-row-no, .pf-row-side, .pf-row-side .pf-sub, .pf-zone-label, .pf-zone-val small, .pf-shape-kicker, .pf-score-note, .pf-leak-k, .pf-src,
  .pf-stage-tag, .pf-band-bar, .pf-mx-sub, .mod-muted-xs, .mod-muted-sm, .mod-muted-sm-bold, .main-body small { font-size: 12px !important; }
  /* 모듈 JS 인라인 9~11.5px 글자 → 12px (본문·모달 안만) */
  :is(.main-body, #modalContent, .ops-slothead-zone, .auth-screen) :is([style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:10px"], [style*="font-size: 10px"],
    [style*="font-size:10.5px"], [style*="font-size: 10.5px"], [style*="font-size:11px"], [style*="font-size: 11px"], [style*="font-size:11.5px"], [style*="font-size: 11.5px"]) { font-size: 12px !important; }
}

/* 【2026-10-01】허브 연결 병원의 병원명 칸 잠금(설정 → 병원 기본정보) — 위 입력칸 !important 흰 배경보다 뒤에서 흐리게 */
.form-input.hub-locked { background: var(--ap-page) !important; color: var(--ap-ink-3) !important; cursor: not-allowed !important; }
.form-input.hub-locked:focus { border-color: var(--ap-line-2) !important; box-shadow: none !important; }