/* ============================================================
   하동복합 LNG 직배관 사업 대시보드 — 디자인 시스템
   (원본: 광양 제2 LNG터미널 종합현황 대시보드 스타일 계승)
   POSCO INTERNATIONAL · 에너지건설 TF
   ============================================================ */

/* 원본은 Pretendard woff2 를 번들했으나 본 저장소에는 폰트 파일이 없어
   시스템 한글 폰트(Apple SD Gothic Neo / Malgun Gothic 등)로 폴백합니다.
   Pretendard 를 쓰려면 fonts/Pretendard-*.woff2 를 추가하고 아래 @font-face 를 복구하세요. */

/* ============================================================
   POSCO INTERNATIONAL — Executive Dashboard (Preview)
   Light Premium Theme · Pretendard · 1440px+ optimized
   ============================================================ */
:root {
  /* — Surfaces — Bright & airy */
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --surface-3: #f8fafd;
  --surface-elevated: #ffffff;

  /* — Text — */
  --text: #1f2a3d;
  --text-strong: #14213b;
  --text-muted: #56657a;
  --text-soft: #a3acb9;

  /* — Borders — */
  --border: #e6eaf1;
  --border-strong: #d3d9e2;
  --border-soft: #eff2f6;

  /* — Brand / Single accent strategy — 청량한 단일 블루 + 보조 톤 최소화 — */
  --primary: #4a7bd1;
  --primary-hover: #3a68bd;
  --primary-dark: #2c569f;
  --primary-soft: #dbe6f7;
  --primary-tint: #eff4fc;

  --cyan: #6ba8c0;          /* 해상부 — 부드러운 청록 */
  --cyan-soft: #e1edf2;
  --cyan-dark: #4f8a9f;

  --orange: #d49462;        /* 154kV — 톤 ↓ 명도 ↑ */
  --orange-soft: #f5e6d4;
  --orange-dark: #a36b3e;

  --red: #c97070;           /* 강조 — 자극 ↓ */
  --red-soft: #f5e1e1;
  --red-dark: #a14d4d;

  /* — Executive accent — 어두운 네이비 → 가벼운 슬레이트 블루 */
  --navy: #4a6594;
  --navy-2: #5e7caf;
  --navy-soft: #e8edf5;
  --gold: #b09a78;          /* 보조 액센트 — 거의 미사용 */
  --gold-soft: #f4ede0;

  /* — Semantic — */
  --success: #3d9a5b;
  --success-soft: #e1efe4;
  --success-border: #b7d4be;
  --danger: #cf4747;
  --danger-soft: #f5e1e1;
  --danger-border: #e0b6b6;
  --warning: #c69248;
  --warning-soft: #f4e6ce;
  --warning-border: #dec291;

  /* — Effects — */
  --shadow-xs: 0 1px 2px rgba(15, 30, 61, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 30, 61, 0.06), 0 1px 2px rgba(15, 30, 61, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 30, 61, 0.08), 0 2px 4px rgba(15, 30, 61, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 30, 61, 0.12), 0 4px 8px rgba(15, 30, 61, 0.06);
  --shadow-card: inset 0 0 0 1px rgba(15, 30, 61, 0.04), 0 1px 2px rgba(15, 30, 61, 0.04);

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* — Type Scale (semantic tokens) ——————————————————————————————
   * Use these for consistency across panels. Existing inline font-sizes
   * are gradually migrated; new code should reference these tokens.
   */
  --fs-display: 36px;   /* KPI 큰 숫자 (Hero) */
  --fs-h1:      24px;   /* 패널 페이지 타이틀 */
  --fs-h2:      19px;   /* 카드 섹션 타이틀 */
  --fs-h3:      15.5px; /* 카드 서브 타이틀 */
  --fs-body:    14px;   /* 본문 텍스트 */
  --fs-body-sm: 13px;   /* 작은 본문 / 메타 */
  --fs-caption: 13.5px; /* 캡션 / 라벨 */
  --fs-mono-sm: 13px;   /* 작은 숫자 / 코드 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;

  --lh-tight:   1.2;
  --lh-base:    1.45;
  --lh-loose:   1.6;

  /* — Type families — Warm & friendly system —
   * UI/body: Gothic A1 (soft, highly legible, multi-weight)
   * Identity/titles/KPI: Jua (rounded, friendly)
   */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', 'Segoe UI', 'Malgun Gothic', sans-serif;
  --font-round: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', 'Segoe UI', 'Malgun Gothic', sans-serif;
}

/* ============================================================
   가시성 개선 (WCAG AA · 임직원 공용) — handoff 「가시성_개선.css」
   흐리게 보이던 보조 텍스트/상태색을 AA 기준으로 끌어올린다.
   ============================================================ */
:root {
  /* 보조 텍스트 대비 상향 (흰 배경 기준) */
  --text-muted: #5a6677;   /* 5.8:1 */
  --text-soft:  #6b7787;   /* a3acb9(2.3:1, 미달) → 4.6:1, 본문 최저 대비 확보 */

  /* 상태색 — 텍스트로 써도 AA 통과하도록 진하게. 배경(soft)은 유지 */
  --success: #277d44;  --success-dark: #1f6536;
  --danger:  #b3372b;  --danger-dark:  #8f2a20;
  --warning: #a96f1f;  --warning-dark: #7d5113;
}
/* 인라인/클래스로 박혀 있던 옅은 보조 텍스트 색 보정 */
[id$="-asof"], .tt-meta, .panel-head__meta { color: var(--text-muted) !important; font-weight: 600; }
.ov-mini, .pg-sub, .rs-sub, .ql-sub, .ev-sub, .ord-sub { color: var(--text-muted) !important; font-size: 13px !important; }
/* 상태 배지/칩 — 색 + 굵기 (색맹 대응: 색에만 의존하지 않기) */
.badge, .chip, .status, .tag { font-weight: 600; }
/* 키보드 포커스 가시화 (접근성) */
:where(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================
   모션 · 이펙트 (handoff 「모션.css」) — 절제 / ≤300ms / ease-out
   prefers-reduced-motion 환경에서 전부 비활성화.
   ============================================================ */
@keyframes mp-pulse   { 0%,100%{ box-shadow:0 0 0 0 rgba(143,42,32,.34); } 70%{ box-shadow:0 0 0 11px rgba(143,42,32,0); } }
@keyframes mp-shimmer { 0%{ background-position:-260px 0; } 100%{ background-position:260px 0; } }
@keyframes mp-enter   { 0%{ opacity:0; transform:translateY(12px); } 100%{ opacity:1; transform:none; } }
@keyframes mp-bar     { 0%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }
/* 카드 호버 리프트 — 클릭형 카드에 부여 */
.mp-card,
.ov-group-card, .pm-up-card, .biz-str-card, .dm-top-row {
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.mp-card:hover,
.ov-group-card:hover, .pm-up-card:hover, .biz-str-card:hover, .dm-top-row:hover {
  transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,30,61,.13);
}
.mp-bar { transform-origin: left; animation: mp-bar .7s ease-out both; }
.mp-pulse { animation: mp-pulse 2.4s ease-out 3; }   /* 3회 후 정지 */
.mp-skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg,#eef2f8 0%,#dfe6f0 50%,#eef2f8 100%);
  background-size: 260px 100%;
  animation: mp-shimmer 1.3s linear infinite;
}
.mp-enter { animation: mp-enter .26s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .mp-card, .ov-group-card, .pm-up-card, .biz-str-card, .dm-top-row,
  .mp-bar, .mp-pulse, .mp-skeleton, .mp-enter { animation: none !important; transition: none !important; }
  .mp-card:hover, .ov-group-card:hover, .pm-up-card:hover, .biz-str-card:hover, .dm-top-row:hover { transform: none; box-shadow: none; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-sans);
  font-feature-settings: 'tnum' 1;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}

/* ============================================================
   Title Bar — Premium navy gradient with gold accent
   ============================================================ */
.titlebar {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(135deg, #4a6594 0%, #6481b3 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 6px rgba(74,101,148,0.10);
  flex-shrink: 0;
  gap: 16px;
  position: relative;
  -webkit-app-region: drag;
}
.titlebar .title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.titlebar .subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.005em;
}
.titlebar .subtitle b { color: #fff; font-weight: 700; }
.titlebar .subtitle .dot { opacity: 0.55; }
.titlebar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255,255,255,0.18);
}
.titlebar .brand { display: flex; align-items: center; gap: 14px; }
.titlebar .brand .logo {
  height: 30px; width: auto; display: block;
  filter: brightness(0) invert(1);
}
.titlebar .brand .divider {
  width: 1px; height: 22px;
  background: rgba(255,255,255,0.22);
}
.titlebar .menu {
  display: flex; gap: 4px; font-size: 14px;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}
.titlebar .menu span {
  cursor: pointer; padding: 6px 12px;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.titlebar .menu span:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.titlebar .title {
  font-family: var(--font-sans);
  font-size: 21px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.titlebar .controls { display: none; }
.titlebar .controls span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}
.titlebar .controls .min { background: #fbbf24; }
.titlebar .controls .max { background: #34d399; }
.titlebar .controls .close { background: #f87171; }

/* ----- Auth bar (Cloudflare Access 사용자 표시 / 로그아웃) ----- */
/* 윈도우 컨트롤 점(min/max/close) 좌측에 배치한다. */
.titlebar .auth-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.92);
  margin-right: 6px;
  -webkit-app-region: no-drag; /* 클릭 가능 영역 */
  white-space: nowrap;
  min-height: 22px;
}
.titlebar .auth-bar:empty { display: none; }
.titlebar .auth-bar__user b {
  color: #fff;
  font-weight: 600;
  margin-left: 4px;
}
.titlebar .auth-bar__sep {
  color: rgba(255,255,255,0.35);
  font-weight: 300;
}
.titlebar .auth-bar__logout {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.titlebar .auth-bar__logout:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.titlebar .auth-bar__dev {
  background: rgba(255, 213, 79, 0.18);
  color: #fff3c4;
  border: 1px solid rgba(255, 213, 79, 0.45);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12.5px;
}

/* ============================================================
   Main Layout
   ============================================================ */
.layout { flex: 1; display: flex; min-height: 0; }

/* ============================================================
   Activity Bar (kept for compat — not used in current DOM)
   ============================================================ */
.activitybar {
  width: 56px;
  background: var(--navy);
  border-right: 1px solid rgba(0,0,0,0.18);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 14px;
  flex-shrink: 0;
}
.activitybar .ab-icon {
  width: 40px; height: 40px;
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 20px;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  transition: 0.15s;
}
.activitybar .ab-icon:hover { color: #fff; background: rgba(255,255,255,0.06); }
.activitybar .ab-icon.active { color: #fff; background: rgba(255,255,255,0.10); }
.activitybar .ab-icon.active::before {
  content: ''; position: absolute;
  left: -1px; top: 8px; bottom: 8px; width: 3px;
  background: var(--gold); border-radius: 0 2px 2px 0;
}
.activitybar .ab-icon[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: 52px; top: 50%;
  transform: translateY(-50%);
  background: var(--text); color: #fff;
  padding: 6px 10px; font-size: 12px;
  white-space: nowrap; z-index: 1000;
  border-radius: 6px; box-shadow: var(--shadow-md);
}

/* ============================================================
   Sidebar — Project explorer
   ============================================================ */
.sidebar {
  width: 210px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-header {
  height: 58px;
  padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-strong);
  letter-spacing: 0;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, #f4f7fc 100%);
  position: relative;
  white-space: nowrap;
}
.sidebar-header::after { display: none; }
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.sidebar-content {
  flex: 1; overflow-y: auto;
  padding: 12px 8px;
}
.menu-item {
  padding: 10px 12px 10px 14px;
  margin-bottom: 1px;
  font-size: 15.5px;
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  user-select: none;
  position: relative;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  font-weight: 500;
  letter-spacing: 0;
}
.menu-item::before {
  content: ''; position: absolute;
  left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 20px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
  transition: transform 0.18s;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.active {
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 700;
}
.menu-item.active::before { transform: translateY(-50%) scaleY(1); }
.menu-item .ic { display: none; }

/* ─ Collapsible Section (Accordion) ─ */
.menu-section { margin-bottom: 4px; }
.menu-section + .menu-section { margin-top: 2px; }
.menu-group {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 13px 10px 10px 16px;
  font-size: 15px;
  color: #14213b;
  letter-spacing: 0.005em;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 5px;
  transition: background 0.15s;
  text-align: left;
  font-family: inherit;
}
.menu-group:hover { background: var(--surface-2); }
.menu-section:first-child .menu-group { padding-top: 8px; }
.menu-group .mg-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #4a7bd1, #2c569f);
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(44, 86, 159, 0.22);
  min-width: 30px;
}
.menu-group .mg-label { flex: 1; }
.menu-group .mg-caret {
  font-size: 12px;
  color: #7a8694;
  transition: transform 0.18s;
  margin-left: auto;
}
.menu-section.collapsed .mg-caret { transform: rotate(-90deg); }
.menu-items {
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease;
  max-height: 800px;
  opacity: 1;
  padding-left: 10px;   /* 하위 섹션 좌측 공백 (그룹 헤더 대비 들여쓰기) */
}
.menu-section.collapsed .menu-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   Editor area / Tabs / Panels
   ============================================================ */
.editor {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; background: var(--bg);
}
.tabs {
  background: var(--surface);
  height: 46px;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0 10px;
  align-items: center;
}
.tab {
  padding: 0 18px; height: 34px;
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 15.5px;
  color: var(--text-muted);
  white-space: nowrap;
  border-radius: 6px;
  margin: 0 1px;
  transition: 0.15s;
  position: relative;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active {
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 600;
}
.tab.active::after {
  content: '';
  position: absolute; left: 16px; right: 16px; bottom: -1px;
  height: 2px; background: var(--primary);
  border-radius: 2px 2px 0 0;
}
.tab .close-btn {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: transparent;
  transition: 0.15s;
}
.tab.active .close-btn, .tab:hover .close-btn { color: var(--text-muted); }
.tab .close-btn:hover { background: var(--border-strong); color: var(--text); }

.panels { flex: 1; overflow: auto; }
.panel {
  display: none;
  padding: 14px 18px;
  max-width: 1860px;
  margin: 0 auto;
}
.panel.active { display: block; }
/* ── Executive cleanup: remove decorative emoji, refined priority dots ── */
.ui-emoji { display: none !important; }
.menu-item { gap: 0; }
.tab > span:first-child:empty { display: none; }
.ov-action { font-size: 14.5px !important; }
.ov-action-prio {
  width: 9px !important; height: 9px;
  border-radius: 50%;
  font-size: 0 !important;
  flex-shrink: 0;
  margin-top: 6px;
  background: var(--text-soft);
}
.ov-action.high .ov-action-prio { background: var(--danger); }
.ov-action.mid  .ov-action-prio { background: var(--warning); }
.ov-action.low  .ov-action-prio { background: var(--success); }
/* ── Titlebar: 로고 + 프로젝트 제목 표시 ── */
.titlebar .controls { display: none !important; }
.titlebar .title-block { display: flex !important; flex-direction: row !important; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.titlebar .title-block .subtitle { margin: 0; }
.titlebar .brand .divider { display: block; }
.titlebar .brand .logo { height: 28px; }
.titlebar .nav-toggle { color: #fff; }
/* ── 탭 바 제거 (사이드바로 네비게이션 일원화, 상단 공간 회수) ── */
.tabs, #tabs { display: none !important; }
/* ── Unified section / card titles across all tabs ── */
.card h3, .ord-card-title, .ev-card-title, .pm-title, .ql-title, .pg-title,
.biz-title, .ov-sub-title, .ov-group-title, .editor-section .section-header h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
/* ── Unified panel page-header — 모든 하위 탭(공정·사업관리 등) 최상단 일체화 ──
   폰트 크기(--fs-h1)·색상(--primary-dark)·시작 위치(18px, 패널 좌측 여백)를 통일 */
/* Option A 통일 규격 — 좌측 액센트 바 · 전 탭 제목 시작점 동일 */
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 16px;
  padding: 0;
  min-height: 30px;
  flex-wrap: wrap;
}
.panel-head::before {
  content: "";
  width: 4px;
  height: 22px;
  background: var(--primary-dark);
  border-radius: 2px;
  margin-right: 4px;
  flex: none;
}
.panel-head__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
  flex: 0 0 auto;
}
.panel-head__meta {
  margin-left: auto;
  font-size: var(--fs-body);
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 간트형 패널(.ms-wrap)에서는 헤더를 더 컴팩트하게 */
/* 간트 탭(schedule/process/monthly)은 패널 zoom이 1.0이라, 헤더만 1.05로 보정해
   다른 데이터 탭(공정·자원·품질·마일스톤 등 zoom 1.05)과 제목 크기·액센트 바를 통일 */
.ms-wrap > .panel-head { margin: 0 0 7px; padding-bottom: 7px; flex: 0 0 auto; zoom: 1.05; }
/* ── 가독성 향상: 주요 데이터 탭 비례 확대(디자인 유지) — 안전/사업정보 탭의 기존 정책과 동일 방식 ── */
.panel[data-tab="progress"],
.panel[data-tab="resource"],
.panel[data-tab="quality"],
.panel[data-tab="permits"],
.panel[data-tab="orders"],
.panel[data-tab="milestones"],
.panel[data-tab="photos"],
.panel[data-tab="info"] {
  zoom: 1.05;
  max-width: 1770px;
}
html.is-mobile .panel[data-tab="progress"],
html.is-mobile .panel[data-tab="resource"],
html.is-mobile .panel[data-tab="quality"],
html.is-mobile .panel[data-tab="permits"],
html.is-mobile .panel[data-tab="orders"],
html.is-mobile .panel[data-tab="milestones"],
html.is-mobile .panel[data-tab="photos"],
html.is-mobile .panel[data-tab="info"] {
  zoom: 1;
  max-width: none;
}
/* ── 편집 바(데이터 편집 토글 + 인라인 편집 영역)를 각 데이터 탭 하단으로 이동 ──
   상단 공간을 회수해 본문(page-head)이 화면 최상단에서 시작하도록. */
.panel[data-tab="progress"].active,
.panel[data-tab="resource"].active,
.panel[data-tab="safety"].active,
.panel[data-tab="quality"].active,
.panel[data-tab="permits"].active,
.panel[data-tab="orders"].active {
  display: flex;
  flex-direction: column;
}
.panel[data-tab="progress"] > .tab-toolbar,
.panel[data-tab="resource"] > .tab-toolbar,
.panel[data-tab="safety"] > .tab-toolbar,
.panel[data-tab="quality"] > .tab-toolbar,
.panel[data-tab="permits"] > .tab-toolbar,
.panel[data-tab="orders"] > .tab-toolbar {
  order: 90;
  margin: 20px 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.panel[data-tab="progress"] > .inline-edit-area,
.panel[data-tab="resource"] > .inline-edit-area,
.panel[data-tab="safety"] > .inline-edit-area,
.panel[data-tab="quality"] > .inline-edit-area,
.panel[data-tab="permits"] > .inline-edit-area,
.panel[data-tab="orders"] > .inline-edit-area {
  order: 91;
}
/* ── KPI 카드 최소화 (마일스톤·안전) — 색칠 블록 제거, 라벨+숫자만 컴팩트하게 ── */
.panel[data-tab="milestones"] .grid > .card.col-3,
.panel[data-tab="safety"] .grid > .card.col-3 {
  padding: 9px 13px;
}
.panel[data-tab="milestones"] .grid > .card.col-3 > h3,
.panel[data-tab="safety"] .grid > .card.col-3 > h3 {
  font-size: 13px;
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--text-muted);
}
.panel[data-tab="milestones"] .grid > .card.col-3 > h3::before,
.panel[data-tab="safety"] .grid > .card.col-3 > h3::before {
  height: 12px;
}
.panel[data-tab="milestones"] .grid > .card.col-3 > .kpi,
.panel[data-tab="safety"] .grid > .card.col-3 > .kpi {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
.panel[data-tab="milestones"] .grid > .card.col-3 > .kpi::before,
.panel[data-tab="milestones"] .grid > .card.col-3 > .kpi::after,
.panel[data-tab="safety"] .grid > .card.col-3 > .kpi::before,
.panel[data-tab="safety"] .grid > .card.col-3 > .kpi::after { display: none !important; }
.panel[data-tab="milestones"] .grid > .card.col-3 > .kpi .v,
.panel[data-tab="safety"] .grid > .card.col-3 > .kpi .v {
  font-size: 26px !important;
  line-height: 1.05 !important;
}
.panel[data-tab="milestones"] .grid > .card.col-3 > .kpi .l,
.panel[data-tab="safety"] .grid > .card.col-3 > .kpi .l {
  font-size: 11.5px !important;
  margin-top: 2px !important;
}
/* 마일스톤 주요 Event KPI 카드 최소화 */
.panel[data-tab="milestones"] #ms-event-root .ev-card { padding: 10px 14px !important; }
.panel[data-tab="milestones"] #ms-event-root .ev-kpi-val { font-size: 25px !important; margin-top: 1px !important; }
.panel[data-tab="milestones"] #ms-event-root .ev-kpi-lbl { font-size: 13px !important; }
.panel[data-tab="milestones"] #ms-event-root .ev-kpi-sub { font-size: 12px !important; margin-top: 3px !important; }
.panel[data-tab="milestones"] #ms-event-root .ev-kpi-grid { margin-bottom: 10px !important; gap: 10px !important; }
/* ── 시공/자원관리 · 품질 이행관리 Hero KPI 간략화+구조화 (좌측 컬러 액센트) ── */
#rs-root .rs-card.col-4 {
  padding: 11px 15px !important;
}
#rs-root .rs-card.col-4 .rs-hero { font-size: 12.5px !important; }
#rs-root .rs-card.col-4 .rs-val { font-size: 25px !important; }
#rs-root .rs-card.col-4 .rs-sublabel { font-size: 12px !important; }
#ql-root .ql-card.col-3 {
  padding: 11px 15px !important;
}
#ql-root .ql-card.col-3 .ql-kpi { gap: 3px !important; }
#ql-root .ql-card.col-3 .ql-kpi .lbl { font-size: 12.5px !important; }
#ql-root .ql-card.col-3 .ql-kpi .val { font-size: 25px !important; }
#ql-root .ql-card.col-3 .ql-kpi .sub { font-size: 12px !important; }
/* 공정 관리 Hero KPI — 동일 컴팩트+구조화 통일 */
#pg-root .pg-card.col-3 {
  padding: 11px 15px !important;
}
#pg-root .pg-card.col-3 .pg-kpi { gap: 3px !important; }
#pg-root .pg-card.col-3 .pg-kpi .lbl { font-size: 12.5px !important; }
#pg-root .pg-card.col-3 .pg-kpi .val { font-size: 25px !important; }
#pg-root .pg-card.col-3 .pg-kpi .sub { font-size: 12px !important; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Status Bar — Premium navy
   ============================================================ */
.statusbar {
  height: 32px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 100%);
  color: rgba(255,255,255,0.95);
  display: flex; align-items: center;
  padding: 0 22px;
  font-size: 14px;
  gap: 22px;
  flex-shrink: 0;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.statusbar .right { margin-left: auto; display: flex; gap: 20px; }
.statusbar > span { display: flex; align-items: center; gap: 4px; opacity: 0.92; }
.statusbar > span:first-child::before {
  content: '●';
  color: #8ab2d6;
  font-size: 10px;
  animation: pulse 2.4s ease-in-out infinite;
  margin-right: 2px;
}

/* ============================================================
   Common: Grid / Card / Headings
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  transition: 0.2s ease;
  position: relative;
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.card h3 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0;
}
.card h3::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* ============================================================
   Gauge — Executive style
   ============================================================ */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; }
.gauge-value {
  font-size: 52px;
  font-weight: 800;
  color: var(--primary-dark);
  margin-top: -60px;
  z-index: 2;
  position: relative;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.gauge-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 500;
}
.gauge-sub {
  display: flex; justify-content: space-around;
  width: 100%; margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.gauge-sub-item { text-align: center; }
.gauge-sub-item .v {
  font-size: 23px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.gauge-sub-item .l {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* ============================================================
   KPI Cards — Executive emphasis
   ============================================================ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.kpi {
  background: var(--surface);
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  text-align: left;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: 0.18s;
}
.kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
}
.kpi::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(74,123,209,0.04), transparent 60%);
  pointer-events: none;
}
.kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.kpi .v {
  font-size: 33px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi .l {
  font-size: 14.5px;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.kpi.green::before { background: var(--success); }
.kpi.green::after { background: radial-gradient(circle at top right, rgba(86,160,106,0.05), transparent 60%); }
.kpi.green .v { color: var(--success); }
.kpi.red::before { background: var(--red); }
.kpi.red::after { background: radial-gradient(circle at top right, rgba(194,86,86,0.05), transparent 60%); }
.kpi.red .v { color: var(--red); }
.kpi.orange::before { background: var(--orange); }
.kpi.orange::after { background: radial-gradient(circle at top right, rgba(212,148,98,0.05), transparent 60%); }
.kpi.orange .v { color: var(--orange-dark); }

/* ============================================================
   Table — Refined with sticky header
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
table th {
  background: linear-gradient(180deg, #fafbfd 0%, #eef2f8 100%);
  color: var(--text-muted);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
  z-index: 1;
}
table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}
table tr:hover td { background: var(--surface-3); }
table tr:last-child td { border-bottom: none; }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.badge::before { font-size: 11px; line-height: 1; }
.badge-done { background: var(--success-soft); color: var(--success); }
.badge-done::before { content: '✓'; }
.badge-start { background: var(--primary-soft); color: var(--primary-dark); }
.badge-start::before { content: ''; font-size: 9px; }
.badge-plan { background: var(--warning-soft); color: var(--warning); }
.badge-plan::before { content: '●'; font-size: 8px; }
.badge-progress { background: #fff4d6; color: #b48000; }
.badge-progress::before { content: '◐'; }

/* ============================================================
   Charts
   ============================================================ */
.chart-container { position: relative; height: 220px; }
.chart-tall { height: 200px; }
.chart-short { height: 180px; }
.chart-mini { height: 200px; }

/* ============================================================
   Half gauges
   ============================================================ */
.halfgauge-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.halfgauge {
  position: relative;
  height: 118px;
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 6px 6px;
  text-align: center;
  overflow: hidden;
}
.halfgauge canvas { width: 100% !important; height: 100% !important; }
.halfgauge-num {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.halfgauge-lbl {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ============================================================
   Edu table
   ============================================================ */
.edu-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.edu-table th, .edu-table td {
  padding: 8px 10px; border: 1px solid var(--border); text-align: right;
}
.edu-table th {
  background: linear-gradient(180deg, #fafbfd 0%, #eef2f8 100%);
  color: var(--text); font-weight: 700;
  text-transform: none; letter-spacing: 0;
  font-size: 13px; position: static;
}
.edu-table td:first-child, .edu-table th:first-child {
  text-align: left; font-weight: 600;
}
.edu-table tr:nth-child(even) td { background: var(--surface-3); }
.edu-table .total-col {
  background: var(--gold-soft) !important;
  font-weight: 800;
  color: #92400e;
}
.edu-table .empty-cell { color: var(--text-soft); }

/* ============================================================
   Scrollbars
   ============================================================ */
.scroll-table { max-height: 340px; overflow-y: auto; border-radius: 6px; }
.scroll-table::-webkit-scrollbar,
.panels::-webkit-scrollbar,
.sidebar-content::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-table::-webkit-scrollbar-thumb,
.panels::-webkit-scrollbar-thumb,
.sidebar-content::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
}
.scroll-table::-webkit-scrollbar-thumb:hover,
.panels::-webkit-scrollbar-thumb:hover,
.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-soft);
}

/* ============================================================
   Info list
   ============================================================ */
.info-list { list-style: none; font-size: 15px; color: var(--text); }
.info-list li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  padding-left: 22px;
  position: relative;
  line-height: 1.55;
}
.info-list li::before {
  content: '▸';
  position: absolute;
  left: 0; color: var(--primary);
  font-weight: 700;
}
.info-list li:last-child { border-bottom: none; }

/* ============================================================
   Photo Gallery
   ============================================================ */
.photo-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.photo-toolbar button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  transition: 0.15s;
}
.photo-toolbar button:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.photo-toolbar button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(74,123,209,0.25);
}
.photo-section { margin-bottom: 32px; }
.photo-section h2 {
  font-size: 14.5px;
  color: var(--text-strong);
  margin-bottom: 16px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: -0.015em;
  box-shadow: var(--shadow-xs);
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.photo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: 0.2s;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.photo-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}
.photo-card .thumb {
  width: 100%; height: 188px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.photo-card .thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.photo-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.photo-card:hover .thumb img { transform: scale(1.04); }
.photo-card .caption {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  min-height: 50px;
  position: relative;
  border-top: 1px solid var(--border);
}
.photo-card .caption-text { display: block; padding-right: 30px; word-break: break-word; }
.photo-card .caption-edit-btn {
  position: absolute; top: 10px; right: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px; height: 26px;
  border-radius: 5px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; padding: 0;
  opacity: 0; transition: 0.15s;
}
.photo-card:hover .caption-edit-btn { opacity: 1; }
.photo-card .caption-edit-btn:hover {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.photo-card .caption-input {
  width: 100%; background: var(--surface);
  border: 1px solid var(--primary); color: var(--text);
  padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  border-radius: 6px; resize: vertical; min-height: 50px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(74,123,209,0.12);
}
.photo-card .caption-actions { margin-top: 8px; display: flex; gap: 6px; }
.photo-card .caption-actions button {
  background: var(--primary); border: none; color: #fff;
  padding: 6px 13px; border-radius: 4px;
  cursor: pointer; font-size: 12.5px; font-family: inherit;
  font-weight: 600;
}
.photo-card .caption-actions button:hover { background: var(--primary-hover); }
.photo-card .caption-actions button.cancel {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
}
.photo-card .caption-actions button.cancel:hover { background: var(--surface-3); }
.photo-card .delete-btn {
  position: absolute; top: 10px; left: 10px;
  background: rgba(194,86,86,0.92); color: #fff;
  border: none; width: 30px; height: 30px;
  border-radius: 6px; cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: 0.15s;
  z-index: 2; box-shadow: var(--shadow-sm);
}
.photo-card:hover .delete-btn { opacity: 1; }
.photo-card .delete-btn:hover { background: var(--red-dark); }

/* ============================================================
   Upload panel
   ============================================================ */
.upload-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.upload-form h3 {
  font-size: 15px; color: var(--text-strong);
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; letter-spacing: -0.015em;
}
.upload-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.upload-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.upload-field label {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.upload-field select, .upload-field input[type="text"] {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 13px; border-radius: 6px;
  font-size: 13px; font-family: inherit;
  transition: 0.15s;
}
.upload-field select:focus, .upload-field input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,123,209,0.12);
}
.drop-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 42px 16px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: 0.18s;
  margin-bottom: 14px;
  background: var(--surface-3);
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary-dark);
}
.drop-zone .dz-icon { font-size: 44px; margin-bottom: 8px; }
.drop-zone .dz-hint { font-size: 12px; color: var(--text-soft); margin-top: 6px; }
.upload-queue { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.upload-queue-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.upload-queue-item img {
  width: 60px; height: 60px;
  object-fit: cover; border-radius: 6px; flex-shrink: 0;
}
.upload-queue-item .meta { flex: 1; min-width: 0; }
.upload-queue-item .fname {
  font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.upload-queue-item input[type="text"] {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); color: var(--text);
  padding: 6px 10px; border-radius: 4px;
  font-size: 12px; font-family: inherit; margin-top: 6px;
}
.upload-queue-item input[type="text"]:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,123,209,0.12);
}
.upload-queue-item .remove-q {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger-border);
  padding: 6px 12px; border-radius: 6px;
  cursor: pointer; font-size: 12px; font-weight: 600;
}
.upload-queue-item .remove-q:hover { background: var(--danger); color: #fff; }
.upload-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.upload-actions button {
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
  padding: 9px 18px; border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px; font-family: inherit;
  font-weight: 700; transition: 0.15s;
}
.upload-actions button:hover { background: var(--success); color: #fff; }
.upload-actions button.secondary {
  background: var(--surface-2); border-color: var(--border); color: var(--text);
}
.upload-actions button.secondary:hover {
  background: var(--surface-3); border-color: var(--border-strong);
}
.upload-actions button.danger {
  background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger);
}
.upload-actions button.danger:hover { background: var(--danger); color: #fff; }
.upload-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.upload-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.upload-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
.upload-stat::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
}
.upload-stat .v {
  font-size: 24px; font-weight: 800;
  color: var(--text-strong); letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.upload-stat .l {
  font-size: 12px; color: var(--text-muted);
  margin-top: 4px; font-weight: 600;
}

/* ============================================================
   Lightbox (premium dark)
   ============================================================ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.96);
  z-index: 9999;
  align-items: center; justify-content: center;
  flex-direction: column;
  backdrop-filter: blur(10px);
}
.lightbox.show { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.lightbox .lb-caption {
  color: #fff;
  font-size: 14.5px;
  margin-top: 22px;
  max-width: 80vw;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: rgba(0,0,0,0.4);
  padding: 8px 18px;
  border-radius: 6px;
}
.lightbox .lb-close {
  position: absolute; top: 24px; right: 32px;
  color: #fff; font-size: 24px; cursor: pointer;
  user-select: none;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  transition: background 0.15s;
}
.lightbox .lb-close:hover { background: rgba(255,255,255,0.22); }
.lightbox .lb-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  color: #fff; font-size: 48px;
  cursor: pointer; user-select: none;
  padding: 16px;
  opacity: 0.7; transition: opacity 0.15s;
}
.lightbox .lb-nav:hover { opacity: 1; }
.lightbox .lb-prev { left: 20px; }
.lightbox .lb-next { right: 20px; }

/* ============================================================
   Editor toolbar / Editable tables / Editor sections
   ============================================================ */
.editor-toolbar {
  display: flex; gap: 8px; margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: center;
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}
.editor-toolbar button {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px; font-family: inherit;
  font-weight: 700; transition: 0.15s;
}
.editor-toolbar button:hover { background: var(--primary-hover); }
.editor-toolbar button.secondary {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.editor-toolbar button.secondary:hover {
  background: var(--surface-3); border-color: var(--border-strong);
}
.editor-toolbar button.danger {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.editor-toolbar button.danger:hover { background: var(--red-dark); }
.editor-toolbar .info {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: auto; font-weight: 500;
}

table.editable td input, table.editable td select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 9px;
  font-family: inherit;
  font-size: 12.5px;
  width: 100%;
  border-radius: 4px;
  transition: 0.15s;
}
table.editable td input:focus, table.editable td select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,123,209,0.12);
}
table.editable td.num input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.row-action {
  display: inline-block;
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.row-action:hover { background: var(--danger); color: #fff; }

.editor-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.editor-section .section-header {
  background: linear-gradient(180deg, #fafbfc 0%, #f1f3f7 100%);
  padding: 13px 18px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.editor-section .section-header:hover { background: var(--surface-3); }
.editor-section .section-header h3 {
  font-size: 13px; color: var(--text-strong); font-weight: 700;
  letter-spacing: 0;
}
.editor-section .section-header .arrow {
  color: var(--text-muted); transition: transform 0.18s; font-weight: 700;
}
.editor-section.collapsed .section-header .arrow { transform: rotate(-90deg); }
.editor-section.collapsed .section-body { display: none; }
.editor-section .section-body { padding: 16px; }
.editor-section .add-btn {
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
  padding: 8px 16px; border-radius: 6px;
  cursor: pointer; font-size: 12px;
  margin-top: 10px;
  font-family: inherit; font-weight: 700;
}
.editor-section .add-btn:hover { background: var(--success); color: #fff; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  bottom: 52px; right: 28px;
  background: var(--surface);
  color: var(--text);
  padding: 13px 22px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  z-index: 10000;
  opacity: 0;
  transition: 0.2s;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(8px);
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ============================================================
   Tab toolbar / inline editor
   ============================================================ */
.tab-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 6px 4px 8px;
  margin: 0 0 10px;
  box-shadow: none;
}
.tab-toolbar.has-edit-on {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  box-shadow: var(--shadow-xs);
}
.tab-toolbar .label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-right: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tab-toolbar button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  transition: 0.15s;
}
.tab-toolbar button:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.tab-toolbar button.on {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 2px 8px rgba(74,123,209,0.2);
}
.tab-toolbar button.primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.tab-toolbar button.primary:hover {
  background: var(--primary-hover); border-color: var(--primary-hover);
}
.tab-toolbar button.secondary {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.tab-toolbar button.secondary:hover {
  background: var(--surface-3); border-color: var(--border-strong);
}
.tab-toolbar .info {
  color: var(--text-muted); font-size: var(--fs-caption);
  margin-left: auto; font-weight: 500;
  display: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60ch;
}
.tab-toolbar.has-edit-on .info { display: inline; }
.inline-edit-area { display: none; }
.inline-edit-area.active { display: block; }
.inline-edit-area .editor-section { margin-top: 0; }

/* ============================================================
   Emoji visibility toggle — wrap emojis in <span class="ui-emoji">
   then add body.no-emoji to suppress them globally (옵션 A).
   ============================================================ */
.ui-emoji { display: inline; }
body.no-emoji .ui-emoji { display: none; }
body.no-emoji .ui-emoji + * { margin-left: 0; }

/* ============================================================
   Print styles — Executive A4
   ============================================================ */
@media print {
  html, body { overflow: visible; height: auto; }
  .titlebar, .activitybar, .sidebar, .tabs, .statusbar,
  .editor-toolbar, .tab-toolbar, .upload-form { display: none !important; }
  .editor, .panels { overflow: visible; }
  .panel { display: block !important; padding: 0; max-width: 100%; }
  .grid { gap: 10px; }
  .card {
    box-shadow: none !important;
    page-break-inside: avoid;
    border: 1px solid #ccc;
  }
  .card:hover { box-shadow: none !important; }
  body { background: #fff; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
  .sidebar { width: 240px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .panel { padding: 16px; }
  .grid { gap: 12px; }
}

/* ============================================================
   Mobile (≤ 768px) — 데스크탑 레이아웃 스케일 다운 정책
   ----------------------------------------------------------------
   사용자 요청: 모바일에서도 웹 디자인을 절대 수정하지 않고,
   전체 화면을 축소시켜 한 화면에 보이게 한다.
   ⇒ viewport meta `width=1440` 으로 모바일 브라우저가
     데스크탑 너비(1440)로 렌더 후 디바이스 폭에 맞춰 축소.
   ⇒ 아래 모바일 reflow 규칙은 비활성화 (선택자 매칭 차단)
   ============================================================ */
@media (max-width: 0px) {
  /* 사이드바: 햄버거 토글 (CSS-only). body에 .sb-open 클래스 토글 */
  body { font-size: 14.5px; }
  .titlebar { padding: 0 12px; flex-wrap: wrap; gap: 8px; height: auto; min-height: 48px; }
  .titlebar .brand .divider { display: none; }
  .titlebar .brand-sub { display: none; }
  .titlebar .actions { gap: 6px; }
  /* 햄버거 버튼 (JS로 생성) */
  .nav-toggle {
    display: inline-flex !important;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; font-size: 22px; color: var(--text-strong);
  }
  .sidebar {
    position: fixed; top: 48px; left: 0; bottom: 0;
    width: 260px !important; z-index: 999;
    transform: translateX(-110%); transition: transform 0.22s ease;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  }
  body.sb-open .sidebar { transform: translateX(0); }
  body.sb-open .sb-backdrop {
    position: fixed; inset: 48px 0 0 0; background: rgba(15,30,61,0.45);
    z-index: 998; cursor: pointer;
  }

  /* 메인 컨테이너: 사이드바 폭 무시 + 풀폭 */
  .app-content, .main, .panels, .panel { padding: 10px 12px !important; }
  .grid, .ov-grid, .pg-grid, .ql-grid, .ev-grid, .rs-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    gap: 12px !important;
  }
  /* 모든 카드/콘텐츠는 자연 스크롤 허용 */
  .panel, .panels { height: auto !important; overflow: visible !important; }
  .panels:has(.panel[data-tab="overview"].active) { overflow: visible !important; }
  .panel[data-tab="overview"], .panel { height: auto !important; }
  .ov-col, .ov-group-card { height: auto !important; min-height: 0 !important; }
  .ov-group-body { grid-template-rows: auto auto !important; gap: 14px !important; }

  /* Hero 배너 — 모바일 wrap */
  .panel[data-tab="overview"] .ov-hero,
  .ov-hero { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 16px !important; }
  .ov-hero > div[style*="width:1px"] { display: none !important; }
  .ov-hero > div[style*="margin-left:auto"] { margin-left: 0 !important; flex-wrap: wrap; }

  /* 차트 높이 모바일에 맞춤 (한 화면 강제 해제 → 충분한 높이) */
  .ec-chart { height: 280px !important; min-height: 280px !important; }
  .ec-chart[id="pg-pstatus-bars"] { height: 540px !important; }
  .ec-chart[id="pg-tm-eng"], .ec-chart[id="pg-tm-proc"], .ec-chart[id="pg-tm-cons"] {
    height: 320px !important;
  }
  #pg-treemap-charts { grid-template-columns: 1fr !important; }

  /* 표/리스트는 가로 스크롤 허용 */
  table { font-size: 12.5px !important; }
  .ev-card, .pg-card, .ql-card, .rs-card { padding: 10px 12px !important; }

  /* 제목/서브 텍스트 축소 */
  .pg-title, .ql-title, .ev-card-title { font-size: 15px !important; }
  .pg-sub, .ql-sub, .ev-sub { font-size: 12.5px !important; display: block !important; margin-top: 2px; }

  /* 카드 헤더의 좌우 split 정보 */
  .panel[data-tab="overview"] .ov-group-title { font-size: 17px !important; }
  .panel[data-tab="overview"] .ov-group-title .ov-mini { font-size: 12px !important; }
  .panel[data-tab="overview"] .ov-sub-title { font-size: 14px !important; }
}

/* ============================================================
   Small mobile (≤ 480px) — (비활성화: 데스크탑 스케일 다운 정책)
   ============================================================ */
@media (max-width: 0px) {
  /* Hero 배너 - 작은 화면에서 더 컴팩트 */
  .ov-hero > div span[style*="font-size:28px"] { font-size: 22px !important; }
  .ec-chart { height: 240px !important; min-height: 240px !important; }
  body { font-size: 13.5px; }
  .panel { padding: 8px 10px !important; }
  /* 통합 카드 그리드 (품질 요약 등) */
  #ql-text-summary { grid-template-columns: 1fr !important; }
  #ev-dev-summary { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* ============================================================
   모바일 전용 (html.is-mobile · JS 감지) — 데스크탑 영향 없음
   ----------------------------------------------------------------
   정책:
   1) viewport width=1900 으로 추가 스케일다운 (head 스크립트)
   2) 짜잘한 보조 텍스트 숨김 (ov-mini · sub 라벨 · 메타 · tagline 등)
   3) 큰 KPI 폰트 살짝 축소 → 깨짐 방지
   데스크탑(html:not(.is-mobile))은 절대 건드리지 않음
   ============================================================ */
html.is-mobile .ov-mini,
html.is-mobile .pg-sub,
html.is-mobile .ql-sub,
html.is-mobile .ev-sub,
html.is-mobile .rs-sub,
html.is-mobile .pm-sub,
html.is-mobile .pm-tagline,
html.is-mobile .dm-headline-sub,
html.is-mobile .dm-field-foot,
html.is-mobile .dm-field-name-en,
html.is-mobile .ord-sub,
html.is-mobile #pg-treemap-legend > span:nth-child(n+6),
html.is-mobile #pg-pstatus-meta,
html.is-mobile .ov-ms-item-cat,
html.is-mobile .scroll-table .ms-toolbar > strong + span,
html.is-mobile .panel[data-tab="overview"] .ov-group-title .ov-mini,
html.is-mobile .panel[data-tab="overview"] .ov-sub-title .ov-mini {
  display: none !important;
}
html.is-mobile .ov-gauge-value { font-size: 44px !important; }
html.is-mobile .dm-headline-value { font-size: 26px !important; }
html.is-mobile .dm-headline-unit { font-size: 14px !important; }
html.is-mobile .ov-gauge-sub-item .v { font-size: 18px !important; }
html.is-mobile .ov-gauge-sub-item .l { font-size: 12px !important; }
html.is-mobile .panel[data-tab="overview"] .ov-group-title { font-size: 17px !important; }
html.is-mobile .panel[data-tab="overview"] .ov-sub-title { font-size: 13.5px !important; }
html.is-mobile .ov-pill .pv { font-size: 17px !important; }
html.is-mobile .pg-title, html.is-mobile .ql-title, html.is-mobile .pm-title, html.is-mobile .rs-title, html.is-mobile .ev-card-title { font-size: 15px !important; }
html.is-mobile h2 { font-size: 18px !important; }
/* 큰 KPI 카드의 값(.val) 살짝 축소 */
html.is-mobile #ql-root .ql-kpi .val,
html.is-mobile #pg-root .val,
html.is-mobile #rs-root .rs-val { font-size: 24px !important; }
html.is-mobile #ql-root .ql-kpi .lbl,
html.is-mobile #pg-root .lbl,
html.is-mobile #rs-root .rs-hero { font-size: 12.5px !important; }
/* 모바일에서 표 폰트 살짝 축소 (가독성 유지) */
html.is-mobile table { font-size: 12.5px !important; }
html.is-mobile .badge { font-size: 11px !important; padding: 2px 8px !important; }

/* 모바일: 종합현황 탭은 강제 fixed-height 정책 해제 → 자연 스크롤 + 1열 적층 (한 화면 강제 해제) */
html.is-mobile .panels:has(.panel[data-tab="overview"].active) { overflow: auto !important; }
html.is-mobile .panel[data-tab="overview"] {
  height: auto !important;
  min-height: 100% !important;
  padding: 8px 10px !important;
}
html.is-mobile .panel[data-tab="overview"] .ov-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  height: auto !important;
  gap: 10px !important;
}
html.is-mobile .panel[data-tab="overview"] .ov-col,
html.is-mobile .panel[data-tab="overview"] .ov-group-card {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html.is-mobile .panel[data-tab="overview"] .ov-group-body {
  grid-template-rows: auto auto !important;
  height: auto !important;
}
html.is-mobile .panel[data-tab="overview"] .ov-delay-host,
html.is-mobile .panel[data-tab="overview"] .dm-top,
html.is-mobile .panel[data-tab="overview"] .ov-action-list { overflow: visible !important; }
/* 모바일 종합현황: hero 배너 wrap + 컴팩트 */
html.is-mobile .panel[data-tab="overview"] .ov-hero { flex-wrap: wrap !important; gap: 10px !important; padding: 12px 14px !important; }
html.is-mobile .panel[data-tab="overview"] .ov-hero > div[style*="width:1px"] { display: none !important; }

/* ============================================================
   모바일 v2 — 전면 개선 (햄버거·터치타깃·가독성)
   ----------------------------------------------------------------
   - viewport 1280 (head 스크립트) 로 가독성 회복
   - 사이드바: 햄버거 토글 + 슬라이드인 오버레이 (좁은 화면 폭 회복)
   - 터치 타깃 44px 이상
   - 탭바·드롭다운·테이블 등 모바일 가독성 보강
   데스크탑(html:not(.is-mobile))은 일절 건드리지 않음
   ============================================================ */

/* 햄버거 버튼 — 모바일에서만 노출 (JS 가 inline style 로 display 토글) */
html.is-mobile .nav-toggle {
  width: 44px; height: 44px; flex-shrink: 0;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; margin-right: 6px;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  /* 타이틀바 -webkit-app-region:drag 가 클릭을 가로채지 않도록 명시 (Teams/PWA 대응) */
  -webkit-app-region: no-drag;
  app-region: no-drag;
  position: relative;
  z-index: 10001;
  pointer-events: auto;
  touch-action: manipulation;
}
html.is-mobile .nav-toggle:active { background: rgba(255,255,255,0.22); }

/* 사이드바: 슬라이드인 오버레이 */
html.is-mobile .sidebar {
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: 320px !important; max-width: 80vw;
  z-index: 9999;
  transform: translateX(-105%);
  transition: transform 0.22s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 10px 36px rgba(0,0,0,0.28);
  background: var(--surface) !important;
}
html.is-mobile body.sb-open .sidebar { transform: translateX(0); }

/* 백드롭 (햄버거 열림 시) — JS 가 생성한 .sb-backdrop div 사용 */
html.is-mobile .sb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,30,61,0.45);
  z-index: 9998;
  cursor: pointer;
}

/* 사이드바 내 터치 타깃 확대 */
html.is-mobile .menu-item {
  padding: 13px 14px 13px 16px !important;
  font-size: 16px !important;
  min-height: 48px;
  line-height: 1.3;
}
html.is-mobile .menu-item .ic { font-size: 19px; width: 26px; }
html.is-mobile .menu-group {
  padding: 12px 12px !important;
  min-height: 46px;
  font-size: 13.5px !important;
}
html.is-mobile .sidebar-header {
  height: 56px; font-size: 14.5px; padding: 0 16px;
}

/* 사이드바는 fixed 라 flow 에서 빠짐 → .editor 가 layout 전체 폭/높이 차지 */
html.is-mobile .editor { min-width: 0; flex: 1 1 auto; }

/* 타이틀바 보조 텍스트 컴팩트 (모바일 한정) */
html.is-mobile .titlebar { padding: 0 10px; min-height: 52px; }
html.is-mobile .titlebar .brand-sub { display: none !important; }
html.is-mobile .titlebar .title { font-size: 16px !important; }
html.is-mobile .titlebar .brand .divider { display: none !important; }
html.is-mobile .titlebar .controls { display: none !important; }
html.is-mobile .titlebar .auth-bar { font-size: 12.5px; flex-shrink: 1; min-width: 0; overflow: hidden; }

/* 탭바 — 가로 스크롤 허용 (모바일에서 탭이 많을 때) */
html.is-mobile .tabs {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.is-mobile .tabs::-webkit-scrollbar { display: none; }
html.is-mobile .tabs .tab {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px !important;
  font-size: 14px !important;
}

/* 드롭다운/select 터치 타깃 확대 */
html.is-mobile select,
html.is-mobile .sched-dropdown,
html.is-mobile input[type=text],
html.is-mobile input[type=search],
html.is-mobile input[type=number] {
  min-height: 40px !important;
  font-size: 14.5px !important;
  padding: 6px 10px !important;
}
html.is-mobile button,
html.is-mobile .ms-cat-btn,
html.is-mobile .ev-btn,
html.is-mobile .ms-nav {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 13.5px;
}

/* 표 — 스크롤 가능 컨테이너로 (가로 폭이 부족할 때) */
html.is-mobile .scroll-table,
html.is-mobile .table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
html.is-mobile table { font-size: 13px !important; }
html.is-mobile table th,
html.is-mobile table td { padding: 8px 10px !important; }

/* 종합현황 외 패널: 가로 max-width 풀고 자연 폭 사용 */
html.is-mobile .panel { max-width: none !important; }

/* 통계바 (statusbar) — 모바일에서 한 줄로 압축 + 좁으면 숨김 */
html.is-mobile .statusbar { font-size: 11.5px; padding: 4px 10px; }
html.is-mobile .statusbar > span:not(.right):not(:first-child) { display: none; }

/* Master Schedule / Process / Monthly 상단 컨트롤 — wrap 강제 */
html.is-mobile .ms-wrap > div[style*="display:flex"] {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html.is-mobile .ms-cat-tabs { gap: 6px !important; }
html.is-mobile .ms-cat-btn {
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 8px;
}

/* 사진 갤러리 — 한 줄에 2장 (모바일) */
html.is-mobile .photo-gallery,
html.is-mobile #photos-grid,
html.is-mobile .pg-photo-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

/* 인허가 매트릭스 등 와이드 콘텐츠 — 가로 스크롤 가능하게 */
html.is-mobile .permits-matrix,
html.is-mobile .pm-matrix,
html.is-mobile .ord-matrix {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 안전관리 zoom 1.08 → 모바일은 1 로 유지 (이미 있음) — 명시적으로 max-width 도 풀어둠 */
html.is-mobile .panel[data-tab="safety"] { max-width: none !important; }

/* 모바일 폰트 추가 보정 (가독성↑) */
html.is-mobile { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-mobile body { font-size: 14px; }

/* ─────────────────────────────────────────────────────────────
   모바일 종합현황 — '전체 공정률' 게이지 화면 왜곡 해결
   원인: 부모(.ov-sub-body) 가 auto 높이가 되면 flex:1 인 캔버스 wrapper 가 무너짐
   해결: 캔버스 wrapper 에 명시적 높이/비율 부여, 하위 KPI 3분할은 그대로 유지하되 폰트 정리
   ───────────────────────────────────────────────────────────── */
html.is-mobile .panel[data-tab="overview"] .ov-gauge-stack {
  display: block !important;        /* flex 해제 → 자연 흐름 */
  flex: 0 0 auto !important;
  width: 100%;
}
html.is-mobile .panel[data-tab="overview"] .ov-gauge-canvas-wrap {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;          /* 명시 높이로 캔버스 안정화 */
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
html.is-mobile .panel[data-tab="overview"] .ov-gauge-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 220px;
}
html.is-mobile .panel[data-tab="overview"] .ov-gauge-value {
  font-size: 40px !important;
  bottom: 8% !important;
}
html.is-mobile .panel[data-tab="overview"] .ov-gauge-label {
  font-size: 14px !important;
  margin-top: 8px !important;
}
html.is-mobile .panel[data-tab="overview"] .ov-gauge-sub {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
}
html.is-mobile .panel[data-tab="overview"] .ov-gauge-sub-item { padding: 4px 2px !important; }
html.is-mobile .panel[data-tab="overview"] .ov-gauge-sub-item .v { font-size: 17px !important; }
html.is-mobile .panel[data-tab="overview"] .ov-gauge-sub-item .l { font-size: 11.5px !important; line-height: 1.25; }

/* hero 배너 — 모바일에서 한 줄 가로 흐름이 깨지는 문제 정리: column stack */
html.is-mobile .panel[data-tab="overview"] .ov-hero {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 12px 14px !important;
}
html.is-mobile .panel[data-tab="overview"] .ov-hero > div { width: 100%; }
html.is-mobile .panel[data-tab="overview"] .ov-hero > div[style*="width:1px"] { display: none !important; }
html.is-mobile .panel[data-tab="overview"] .ov-hero > div[style*="margin-left:auto"] { margin-left: 0 !important; }

/* ═════════════════════════════════════════════════════════════════
   모바일 — 전체 탭 통일 디자인 (Universal Mobile Pass)
   ─────────────────────────────────────────────────────────────────
   모든 탭(progress/quality/orders/permits/resource/safety/photos/...)이
   동일한 카드·타이포·간격·표 처리·차트 높이로 보이도록 통일.
   html.is-mobile 한정 → 데스크탑 비영향
   ═════════════════════════════════════════════════════════════════ */

/* 패널 공통 — 좌우 여백 + 자연 스크롤 */
html.is-mobile .panel {
  padding: 12px 12px 24px !important;
  max-width: none !important;
}
html.is-mobile .panels { overflow: auto !important; -webkit-overflow-scrolling: touch; }

/* 12-grid → 1열 적층 (col-* span 12) */
html.is-mobile .col-2,
html.is-mobile .col-3,
html.is-mobile .col-4,
html.is-mobile .col-5,
html.is-mobile .col-6,
html.is-mobile .col-7,
html.is-mobile .col-8,
html.is-mobile .col-9,
html.is-mobile .col-10,
html.is-mobile .col-11 { grid-column: span 12 !important; }
/* KPI 4개 같은 작은 카드는 2열 유지 (col-3 만 2열로) */
html.is-mobile .grid .col-3,
html.is-mobile .pg-grid .col-3,
html.is-mobile .ql-grid .col-3,
html.is-mobile .ev-grid .col-3,
html.is-mobile .rs-grid .col-3 { grid-column: span 6 !important; }

/* 모든 grid 컨테이너 — gap 통일 */
html.is-mobile .grid,
html.is-mobile .pg-grid,
html.is-mobile .ql-grid,
html.is-mobile .ev-grid,
html.is-mobile .rs-grid,
html.is-mobile .pm-grid,
html.is-mobile .ord-grid,
html.is-mobile .sf-grid {
  gap: 12px !important;
  height: auto !important;
  grid-auto-rows: min-content !important;
}

/* 카드 — 패딩·라운드·그림자 통일 */
html.is-mobile .card,
html.is-mobile .pg-card,
html.is-mobile .ql-card,
html.is-mobile .ev-card,
html.is-mobile .rs-card,
html.is-mobile .pm-card,
html.is-mobile .ord-card,
html.is-mobile .sf-card,
html.is-mobile .ov-group-card {
  padding: 14px 14px !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(20,30,60,0.05) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* 카드 타이틀 — 통일된 헤더 룩 */
html.is-mobile .pg-title,
html.is-mobile .ql-title,
html.is-mobile .ev-card-title,
html.is-mobile .rs-title,
html.is-mobile .pm-title,
html.is-mobile .ord-title,
html.is-mobile .sf-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border);
  color: var(--text-strong);
}

/* 차트 — 모바일 최소 높이 통일 (ECharts 컨테이너만 대상) */
/* canvas[id^=...] 식 일괄 선택자는 사용 금지: ord-donut(160x160) 등
   고정 크기 도넛을 강제로 늘려 비율을 망가뜨림. */
html.is-mobile .ec-chart {
  min-height: 260px !important;
  max-height: 380px !important;
  height: 260px !important;
  width: 100% !important;
}
/* 큰 분포 차트는 별도 height (treemap, pstatus 등) */
html.is-mobile .ec-chart[id="pg-pstatus-bars"] { height: 480px !important; max-height: 480px !important; }
html.is-mobile .ec-chart[id^="pg-tm-"] { height: 280px !important; }
html.is-mobile .ec-chart[id="rs-mp-pie"] { height: 320px !important; max-height: 320px !important; }

/* sf-incident(Chart.js, 다중 시리즈 라인) 은 데스크탑 크기 유지 — Chart.js 가 컨테이너 기반으로 자동 비율 처리 */
html.is-mobile .chart-container { min-height: 240px; }
html.is-mobile #sf-incident { max-height: 320px !important; }

/* 고정 크기 작은 도넛/차트 (Canvas 직접 그리는 것) — 비율 보존, 절대 강제 사이즈 안 함 */
html.is-mobile canvas#ord-donut {
  width: 160px !important;
  height: 160px !important;
  display: block;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   orders / permits — 인라인 grid-template-columns 모바일 1열 강제
   사유: 인라인 style 의 grid 가 모바일에서도 살아남아 카드가 짓눌리고
   funnel·도넛·KPI 가 폭 부족으로 왜곡되어 보임.
   ───────────────────────────────────────────────────────────── */
html.is-mobile #ord-funnel-disc-row,
html.is-mobile #ord-root [style*="grid-template-columns:1fr 1fr"],
html.is-mobile #ord-root [style*="grid-template-columns:repeat(2"],
html.is-mobile #pm-root [style*="grid-template-columns:1fr 1fr"],
html.is-mobile #pm-root [style*="grid-template-columns:repeat(2"] {
  grid-template-columns: 1fr !important;
}

/* orders KPI 6칸 → 모바일 2열 */
html.is-mobile #ord-root .ord-kpi-row {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
html.is-mobile #ord-root .ord-kpi { padding: 12px 14px !important; }
html.is-mobile #ord-root .ord-kpi-val { font-size: 24px !important; }
html.is-mobile #ord-root .ord-kpi-lbl { font-size: 12.5px !important; }

/* orders Funnel 5단계 원 — 모바일에서 줄어들지 않게 가로 스크롤 + 원 축소 */
html.is-mobile #ord-funnel .ord-card > div[style*="justify-content:space-between"] {
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
}
html.is-mobile #ord-funnel .ord-card > div[style*="justify-content:space-between"] > div {
  flex: 1 0 60px !important;
  min-width: 60px;
}
html.is-mobile #ord-funnel .ord-card > div[style*="justify-content:space-between"] > div > div:first-child {
  width: 46px !important; height: 46px !important; font-size: 15px !important;
}
/* 단계 사이 연결선 숨김 (작아지면 의미 없음) */
html.is-mobile #ord-funnel .ord-card > div[style*="justify-content:space-between"] > div[style*="position:absolute"] { display: none !important; }

/* orders 미입고 분포: 라벨 + 화살표 + 도넛 → 모바일에서 column 스택 (화살표 숨김) */
html.is-mobile #ord-funnel .ord-card > div[style*="grid-template-columns:1fr auto auto"] {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
html.is-mobile #ord-funnel .ord-card > div[style*="grid-template-columns:1fr auto auto"] > div:nth-child(2) { display: none !important; } /* 화살표 */
html.is-mobile #ord-funnel .ord-card > div[style*="grid-template-columns:1fr auto auto"] > div:nth-child(3) { justify-self: center; } /* 도넛 가운데 */

/* permits 5-Phase Strip — 모바일 2열 */
html.is-mobile #pm-root .pm-phase-strip {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
html.is-mobile #pm-root .pm-phase::after { display: none !important; }

/* permits hero — 모바일 column 스택 */
html.is-mobile #pm-root .pm-hero {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 14px 16px !important;
}
html.is-mobile #pm-root .pm-hero .h-div { display: none !important; }
html.is-mobile #pm-root .pm-hero .h-v { font-size: 22px !important; }

/* permits Facility Swimlane — 모바일에서는 가로 스크롤 (210px+5col+140px 유지) */
html.is-mobile #pm-root .pm-fac-head-row,
html.is-mobile #pm-root .pm-fac-row {
  grid-template-columns: 150px repeat(5, minmax(110px, 1fr)) 100px !important;
  min-width: 880px;
}
html.is-mobile #pm-root .pm-fac-list-wrap,
html.is-mobile #pm-root .pm-fac-row-wrap,
html.is-mobile #pm-root #pm-fac-host {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* permits Agency 매트릭스 — 가로 스크롤 (이미 적용되어 있음 강화) */
html.is-mobile #pm-root .pm-heat,
html.is-mobile #pm-root .pm-heat-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 작은 명의변경 도넛 (64x64 conic-gradient) — 원형 유지 */
html.is-mobile #pm-root div[style*="background:conic-gradient"] {
  flex-shrink: 0 !important;
}

/* 표 — 가로 스크롤 보존 + 폰트 통일 */
html.is-mobile .scroll-table,
html.is-mobile .table-wrap,
html.is-mobile .pg-table-wrap,
html.is-mobile .ql-table-wrap,
html.is-mobile .ev-table-wrap,
html.is-mobile .rs-table-wrap,
html.is-mobile .pm-table-wrap,
html.is-mobile .ord-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border);
}
html.is-mobile table { font-size: 13px !important; min-width: max-content; }
html.is-mobile table th { background: var(--surface-2); position: sticky; top: 0; }
html.is-mobile table th,
html.is-mobile table td { padding: 9px 12px !important; white-space: nowrap; }

/* KPI 통일 — pg/ql/ev/rs/ord 의 .val/.lbl 같은 큰 수치 카드 */
html.is-mobile .pg-kpi .val,
html.is-mobile .ql-kpi .val,
html.is-mobile .ev-kpi .val,
html.is-mobile .rs-kpi .val,
html.is-mobile .rs-val {
  font-size: 26px !important;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
html.is-mobile .pg-kpi .lbl,
html.is-mobile .ql-kpi .lbl,
html.is-mobile .ev-kpi .lbl,
html.is-mobile .rs-kpi .lbl,
html.is-mobile .rs-hero {
  font-size: 12.5px !important;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 필터/툴바 wrap 통일 */
html.is-mobile .pg-toolbar,
html.is-mobile .ql-toolbar,
html.is-mobile .ev-toolbar,
html.is-mobile .rs-toolbar,
html.is-mobile .pm-toolbar,
html.is-mobile .ord-toolbar,
html.is-mobile .ms-toolbar,
html.is-mobile .tab-toolbar {
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px !important;
  align-items: center !important;
}

/* 사진 갤러리 — 2열 통일 */
html.is-mobile .photo-gallery,
html.is-mobile #photos-grid,
html.is-mobile .pg-photo-grid,
html.is-mobile .gallery-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

/* Lightbox — 모바일에서도 풀폭 */
html.is-mobile #lightbox img,
html.is-mobile .lb-img { max-width: 96vw !important; max-height: 78vh !important; }

/* Master Schedule 등 간트 — 모바일에서 적정 높이 */
html.is-mobile .ms-host,
html.is-mobile #ms-host,
html.is-mobile #process-host,
html.is-mobile #monthly-host { min-height: 520px !important; height: 520px !important; }
html.is-mobile .ms-grid { font-size: 12.5px; }

/* 인허가/발주 매트릭스 — 가로 스크롤 보장 */
html.is-mobile .permits-matrix,
html.is-mobile .pm-matrix,
html.is-mobile .ord-matrix,
html.is-mobile .pm-mat-wrap,
html.is-mobile .ord-mat-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* 토스트/모달 — 모바일에서 폭 맞춤 */
html.is-mobile .toast { left: 12px !important; right: 12px !important; max-width: none !important; font-size: 14px; }
html.is-mobile .modal-content,
html.is-mobile .dialog,
html.is-mobile .lb-content { width: 92vw !important; max-width: 600px; }

/* ============================================================
   Overview · 육상부 안전교육 누적 인원 — KPI + 컴팩트 표
   ============================================================ */
.edu-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.edu-kpi {
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-3) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.edu-kpi::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--c, var(--primary)) 8%, transparent), transparent 60%);
  pointer-events: none;
}
.edu-kpi-l {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.edu-kpi-v {
  font-size: 30px;
  font-weight: 800;
  color: var(--c, var(--primary));
  margin-top: 4px;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.edu-kpi-d {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.edu-kpi-d.pos { color: var(--success); }
.edu-kpi-d.neg { color: var(--danger); }
.edu-kpi-d .muted { color: var(--text-soft); font-weight: 500; margin-left: 4px; }
.edu-table.compact { margin-top: 10px; font-size: 12.5px; }
.edu-table.compact th, .edu-table.compact td { padding: 6px 8px; }
.edu-table.compact th { font-size: 12px; }

/* ============================================================
   Editor · Month-Slider Editor (좌우 슬라이드 바)
   ============================================================ */
.ms-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-3) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs);
}
.ms-nav {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s;
  padding: 0;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  flex-shrink: 0;
}
.ms-nav:hover {
  background: var(--ms-accent, var(--primary));
  color: #fff;
  border-color: var(--ms-accent, var(--primary));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ms-accent, var(--primary)) 30%, transparent);
}
.ms-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--text-muted);
}
.ms-range {
  flex: 1;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, var(--ms-accent, var(--primary)) 0%, var(--ms-accent, var(--primary)) var(--pct, 0%), var(--border-strong) var(--pct, 0%), var(--border-strong) 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.ms-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ms-accent, var(--primary));
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.15s;
}
.ms-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ms-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ms-accent, var(--primary));
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.ms-month {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong);
  min-width: 145px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.ms-month .ms-pos {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  margin-left: 6px;
}
.ms-month .ms-pos.gap { color: var(--warning); }

.ms-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.ms-field {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: 0.15s;
  position: relative;
}
.ms-field:hover {
  border-color: var(--fc, var(--primary));
  box-shadow: var(--shadow-sm);
}
.ms-field label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.ms-field input {
  width: 100%;
  padding: 9px 12px;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-strong);
  transition: 0.15s;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.ms-field input:focus {
  outline: none;
  border-color: var(--fc, var(--primary));
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc, var(--primary)) 18%, transparent);
}
.ms-field input::placeholder { color: var(--text-soft); font-weight: 500; }
.ms-field .ms-prev {
  font-size: 10.5px;
  color: var(--text-soft);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ms-empty {
  padding: 18px; text-align: center;
  color: var(--text-muted); font-size: 12px;
  background: var(--surface-3);
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
}

/* ============================================================
   Safety 탭 — 전체 폰트 1.08배 (디자인은 그대로, 모든 inline-style font 포함 비례 확대)
   zoom 은 webkit/blink/gecko(v126+) 광범위 지원, 레이아웃·계산까지 함께 스케일.
   .panel max-width 1860 → 2009 (1.08×) 로 1900 viewport 초과 방지를 위해
   safety 패널 max-width 를 미리 줄여둠.
   ============================================================ */
.panel[data-tab="safety"] { zoom: 1.08; max-width: 1720px; }
/* 모바일은 zoom 비활성화 (이미 viewport=1900 + .is-mobile 폰트 정책 적용) */
html.is-mobile .panel[data-tab="safety"] { zoom: 1; max-width: none; }

/* 사업 정보 — 가독성 향상을 위한 비례 확대 (디자인 유지) */
.panel[data-tab="business"] { zoom: 1.12; max-width: 1660px; }
html.is-mobile .panel[data-tab="business"] { zoom: 1; max-width: none; }

/* 마일스톤 — 타 탭 대비 글씨/디자인이 작게 보여 비례 확대 (안전 탭과 동일 정책) */
.panel[data-tab="milestones"] { zoom: 1.1; max-width: 1690px; }
html.is-mobile .panel[data-tab="milestones"] { zoom: 1; max-width: none; }

/* ============================================================
   Schedule / Process — 패널 고정 높이 (드롭다운 깊이 변경 시 콘텐츠 축소 → .panels.scrollTop clamp 점프 차단)
   내부 .ms-wrap 이 flex 컬럼으로 host 영역에서 자체 스크롤하도록 설계되어 있으므로 panels 스크롤은 닫음.
   ============================================================ */
.panels:has(.panel[data-tab="schedule"].active),
.panels:has(.panel[data-tab="process"].active),
.panels:has(.panel[data-tab="monthly"].active) { overflow: hidden; }
.panel[data-tab="schedule"],
.panel[data-tab="process"],
.panel[data-tab="monthly"] {
  height: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   Overview — Executive 3-column layout (no-scroll, grouped)
   ============================================================ */
.panels:has(.panel[data-tab="overview"].active) { overflow: hidden; }
.panel[data-tab="overview"] {
  height: 100%;
  max-width: none;
  padding: 12px 14px;
  margin: 0;
}
.panel[data-tab="overview"] .ov-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 0.95fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  height: 100%;
  min-height: 0;
}
/* Hero 핵심 진행 배너 (재설계 — flex 1줄) */
.panel[data-tab="overview"] .ov-hero {
  margin-bottom: 0;
}
.panel[data-tab="overview"] .ov-header {
  grid-column: 1 / -1;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 0;
}
/* 컬럼 = 1개의 그룹 카드만 보유 */
.panel[data-tab="overview"] .ov-col {
  display: flex;
  min-height: 0;
  min-width: 0;
}
/* 6-섹션 분리 정책: group-card 는 투명한 컨테이너, ov-sub 각각이 독립 사각 카드 */
.panel[data-tab="overview"] .ov-group-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  box-shadow: none;
  width: 100%;
  flex: 1;
}
.panel[data-tab="overview"] .ov-group-title { display: none; }
.panel[data-tab="overview"] .ov-group-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
/* 각 ov-sub 를 독립 카드로 (6개 섹션) — 좌측 컬러바 없음 (단정한 사각 카드) */
.panel[data-tab="overview"] .ov-sub {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 13px 11px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
/* 마일스톤 컬럼도 다른 컬럼과 동일한 1fr/1fr 비율 (6-섹션 시각 균형) */
.panel[data-tab="overview"] .ov-col-ms .ov-group-body {
  grid-template-rows: 1fr 1fr;
}
/* 마일스톤 리스트는 max-height + overflow로 길어지면 스크롤 */
.panel[data-tab="overview"] .ov-sub-ms .ov-ms-list {
  max-height: 100%;
  overflow-y: auto;
}
.panel[data-tab="overview"] .ov-sub {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.panel[data-tab="overview"] .ov-sub + .ov-sub {
  /* 각 카드 독립 — 위쪽 점선/여백 제거 (이미 .ov-sub 에 자체 padding) */
  padding-top: 10px;
  border-top: none;
}
.panel[data-tab="overview"] .ov-sub-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: -0.01em;
}
.panel[data-tab="overview"] .ov-sub-title .ov-mini {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-soft);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.panel[data-tab="overview"] .ov-sub-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.panel[data-tab="overview"] .ov-chart {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.panel[data-tab="overview"] .ov-chart canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Gauge — stacked (직전 버전 복원) */
.ov-gauge-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  gap: 4px;
}
.ov-gauge-canvas-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ov-gauge-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.ov-gauge-value {
  position: absolute;
  bottom: 6%;
  font-size: 56px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}
.ov-gauge-label {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
  flex-shrink: 0;
}
.ov-gauge-label b.pos { color: var(--success); }
.ov-gauge-label b.neg { color: var(--danger); }
.ov-gauge-sub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  flex-shrink: 0;
}
.ov-gauge-sub-item {
  text-align: center;
  padding: 6px 2px;
}
.ov-gauge-sub-item .v {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ov-gauge-sub-item .l {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 3px;
  line-height: 1.25;
}

/* Milestone tabs + 3-line summary */
.ov-ms-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 7px;
  flex-shrink: 0;
}
.ov-sub-ms .ov-ms-list { gap: 4px; }
.ov-sub-ms .ov-ms-item { padding: 5px 10px 6px; }
.ov-sub-ms .ov-ms-item-title { font-size: 13px; line-height: 1.3; }

/* ── 종합현황(Overview) — Overview 성격에 맞춰 폰트 최대 확대 ──
   탭 바 제거로 확보된 상단 공간을 활용. no-scroll 유지(차트는 flex 로 자동 축소). */
.panel[data-tab="overview"] .ov-header { font-size: 16px !important; }
.panel[data-tab="overview"] .ov-sub-title { font-size: 18px !important; }
.panel[data-tab="overview"] .ov-sub-title .ov-mini { font-size: 13.5px !important; }
.panel[data-tab="overview"] .ov-pill .pl { font-size: 17px !important; }
.panel[data-tab="overview"] .ov-pill .pv { font-size: 27px !important; }
.panel[data-tab="overview"] .ov-action { font-size: 16.5px !important; }
.panel[data-tab="overview"] .ov-gauge-label { font-size: 18px !important; }
.panel[data-tab="overview"] .ov-gauge-sub-item .v { font-size: 27px !important; }
.panel[data-tab="overview"] .ov-gauge-sub-item .l { font-size: 14.5px !important; }
.panel[data-tab="overview"] .ov-sc .sc-l { font-size: 15px !important; }
.panel[data-tab="overview"] .ov-sc .sc-unit { font-size: 14.5px !important; }
.panel[data-tab="overview"] .ov-sub-ms .ov-ms-item-title { font-size: 15px !important; }
.panel[data-tab="overview"] .ov-ms-item-meta,
.panel[data-tab="overview"] .ov-ms-item-date { font-size: 13px !important; }
/* 시공 지연 모니터 — 폰트 소폭 확대 */
.panel[data-tab="overview"] .dm-field-name { font-size: 13.5px !important; }
.panel[data-tab="overview"] .dm-field-gap  { font-size: 13.5px !important; }
.panel[data-tab="overview"] .dm-field-foot { font-size: 11.5px !important; }
.panel[data-tab="overview"] .dm-top-title  { font-size: 15px !important; }
.panel[data-tab="overview"] .dm-top-name   { font-size: 14px !important; }
.panel[data-tab="overview"] .dm-top-gap    { font-size: 14px !important; }
.panel[data-tab="overview"] .dm-pair-l     { font-size: 13px !important; }
.panel[data-tab="overview"] .dm-pair-v     { font-size: 15px !important; }
.panel[data-tab="overview"] .dm-headline-label { font-size: 13px !important; }
.ov-ms-tab {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 15.5px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
  font-family: inherit;
}
.ov-ms-tab:hover { background: var(--surface-3); color: var(--text); }
.ov-ms-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ov-ms-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 4px;
}
.ov-ms-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px 10px 7px;
  background: var(--surface-3);
}
.ov-ms-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.ov-ms-item-cat {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ov-ms-item.ok .ov-ms-item-cat { background: var(--success-soft); color: var(--success); }
.ov-ms-item.warn .ov-ms-item-cat { background: var(--warning-soft); color: var(--warning); }
.ov-ms-item.risk .ov-ms-item-cat { background: var(--danger-soft); color: var(--danger); }
.ov-ms-item-date {
  font-size: 12.5px;
  color: var(--text-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.ov-ms-item-title {
  font-size: 13.5px;
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.35;
}
.ov-ms-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ov-ms-empty {
  padding: 14px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  background: var(--surface-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

/* ============================================================
   시공 지연 모니터 — 재디자인 (좌측 컬럼)
   ============================================================ */
.ov-delay-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}
.dm-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid;
  gap: 12px;
  flex-shrink: 0;
}
.dm-headline-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dm-headline-sub {
  font-size: 11.5px;
  color: var(--text-soft);
  font-weight: 500;
  text-transform: none;
  margin-left: 4px;
}
.dm-headline-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.dm-headline-unit { font-size: 16px; font-weight: 700; margin-left: 2px; }
.dm-headline-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  border-left: 1px dashed rgba(20,30,60,0.12);
  padding-left: 12px;
}
.dm-headline-pair {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
}
.dm-pair-l { font-size: 12px; color: var(--text-muted); font-weight: 600; min-width: 42px; text-align: left; }
.dm-pair-v { font-size: 14px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.dm-pair-v.muted { color: var(--text-soft); font-weight: 600; }
.dm-pair-u { font-size: 11.5px; font-weight: 600; margin-left: 1px; }

.dm-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex-shrink: 0;
}
.dm-field {
  background: #fafbfd;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 9px 6px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dm-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.dm-field-name { font-size: 12px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.dm-field-name-en { display: none; }
.dm-field-gap { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-bar-frame { position: relative; height: 6px; background: #e9eef5; border-radius: 4px; overflow: visible; }
.dm-bar-fill { height: 100%; border-radius: 4px; transition: width .25s; }
.dm-bar-target { position: absolute; top: -2px; width: 2px; height: 10px; background: #28323e; opacity: .55; }
.dm-field-foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 3px; font-variant-numeric: tabular-nums; gap: 4px; }
.dm-field-foot > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dm-wf-cap { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin: 4px 0 2px; }
.dm-wf-cap b { color: var(--text-strong); font-weight: 800; }
.dm-waterfall { flex: 1; min-height: 160px; margin: 2px 0 6px; }
html.is-mobile .dm-waterfall { height: 130px; }
.dm-top { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 2px; overflow: hidden; }
.dm-top-title { font-size: 13px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; flex-shrink: 0; }
.dm-top-row {
  display: grid;
  grid-template-columns: 1fr 90px 60px;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}
.dm-top-row:last-child { border-bottom: none; }
.dm-top-name {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-top-bar { height: 8px; background: #f1e3e3; border-radius: 4px; overflow: hidden; }
.dm-top-bar-fill { height: 100%; background: linear-gradient(90deg, #d49462, #c25656); }
.dm-top-gap { font-size: 12.5px; font-weight: 700; color: var(--danger); text-align: right; font-variant-numeric: tabular-nums; }
.dm-top-pct { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-left: 4px; }
.dm-top-empty {
  padding: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--success);
  background: var(--success-soft);
  border: 1px dashed var(--success-border);
  border-radius: var(--radius-sm);
}

/* ============================================================
   현장 전경 타임라인 갤러리
   ============================================================ */
.ov-pano-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.ov-pano-track {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 8px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.ov-pano-track::-webkit-scrollbar { height: 8px; }
.ov-pano-track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.ov-pano-card {
  /* 한 화면에 사진 1장이 거의 꽉 차도록 카드 폭 확대 */
  flex: 0 0 min(94%, 520px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
}
.ov-pano-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.ov-pano-img-wrap {
  aspect-ratio: 4 / 3;
  background: #1a2331;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ov-pano-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ov-pano-cap { padding: 8px 10px; border-top: 1px solid var(--border-soft); }
.ov-pano-ym {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ov-pano-cap-text {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-pano-nav {
  flex: 0 0 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}
.ov-pano-nav:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* 현장 전경 — 컴팩트 타임슬라이더 (우측 컬럼 유지, v2) */
.ov-pano-slider { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ov-pano-stage {
  position: relative; flex: 1; min-height: 180px; border-radius: var(--radius);
  overflow: hidden; background: #1a2331; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
}
.ov-pano-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-pano-mbadge {
  position: absolute; top: 10px; left: 10px; background: rgba(15,22,36,.62); color: #fff;
  font-size: 15px; font-weight: 800; padding: 4px 11px; border-radius: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; backdrop-filter: blur(4px);
}
.ov-pano-capbar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 9px;
  background: linear-gradient(180deg, transparent, rgba(15,22,36,.8));
  color: rgba(255,255,255,.94); font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-pano-arw {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(15,22,36,.4);
  color: #fff; font-size: 22px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); z-index: 2;
}
.ov-pano-arw:hover { background: rgba(15,22,36,.72); }
.ov-pano-arw.prev { left: 8px; }
.ov-pano-arw.next { right: 8px; }
.ov-pano-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
  background: var(--border-strong); outline: none; cursor: pointer; flex-shrink: 0;
}
.ov-pano-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.ov-pano-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--primary);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.ov-pano-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }

/* 라이트박스 */
.ov-pano-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 36, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40px;
}
.ov-pano-lightbox .lb-close,
.ov-pano-lightbox .lb-nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.ov-pano-lightbox .lb-close { top: 24px; right: 24px; font-size: 24px; }
.ov-pano-lightbox .lb-nav { top: 50%; transform: translateY(-50%); }
.ov-pano-lightbox .lb-prev { left: 24px; }
.ov-pano-lightbox .lb-next { right: 24px; }
.ov-pano-lightbox .lb-close:hover,
.ov-pano-lightbox .lb-nav:hover { background: rgba(255,255,255,0.22); }
.ov-pano-lightbox .lb-stage {
  max-width: 88vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ov-pano-lightbox .lb-stage img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.4);
}
.ov-pano-lightbox .lb-caption {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.ov-pano-lightbox .lb-ym { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ov-pano-lightbox .lb-text { font-size: 14px; color: rgba(255,255,255,0.9); }
.ov-pano-lightbox .lb-counter { font-size: 12px; color: rgba(255,255,255,0.65); margin-left: auto; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.2); }

/* Mini timeline */
.ov-timeline {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: auto;
  padding-top: 2px;
}
.ov-timeline-row {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
}
.ov-timeline-row.today {
  background: var(--primary-tint);
  font-weight: 600;
}
.ov-timeline-row .lbl {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ov-timeline-row.today .lbl { color: var(--primary-dark); }
.ov-timeline-row .bar {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  min-height: 14px;
}
.ov-tl-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--success);
}
.ov-tl-dot.start { background: var(--orange); }
.ov-tl-dot.plan {
  background: transparent;
  border: 1.5px solid var(--text-soft);
  width: 8px;
  height: 8px;
}
.ov-tl-cnt {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 700;
}
.ov-tl-legend {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
  flex-shrink: 0;
  justify-content: center;
}
.ov-tl-legend > span { display: inline-flex; align-items: center; gap: 5px; }

/* 특이사항 (구 액션 아이템) */
.ov-action-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: auto;
  padding-right: 2px;
}
.ov-action {
  display: flex;
  gap: 9px;
  padding: 7px 11px 8px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text);
  align-items: flex-start;
}
.ov-action-prio {
  display: inline-block;
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1.3;
}
.ov-action-text {
  line-height: 1.45;
  flex: 1;
  color: var(--text-strong);
  font-weight: 500;
}

/* 특이사항 — 심각도 그룹 카드 (v2 재디자인, KPI 좌측 색깔띠 미적용) */
.ov-act-sh {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-strong);
  margin: 11px 0 6px; padding-left: 11px; position: relative;
}
.ov-act-sh:first-child { margin-top: 0; }
.ov-act-sh::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: var(--text-soft);
}
.ov-act-sh.d::before { background: var(--danger); }
.ov-act-sh.w::before { background: var(--warning); }
.ov-act-sh.s::before { background: var(--success); }
.ov-act-cnt { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ov-act-group {
  display: flex; flex-direction: column; gap: 6px;
  padding-left: 11px; border-left: 1px dashed var(--border); margin: 0 0 6px 5px;
}
.ov-act-item {
  padding: 9px 12px; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s;
}
.ov-act-item:hover { background: var(--surface); border-color: var(--border-strong); }
.ov-act-item .ov-act-text { font-size: 13.5px; line-height: 1.5; color: var(--text-strong); font-weight: 500; }
/* 개요 특이사항 — 스크롤 없이 한 화면에 맞도록 컴팩트화 */
.panel[data-tab="overview"] .ov-act-item { padding: 6px 10px; }
.panel[data-tab="overview"] .ov-act-item .ov-act-text { font-size: 13px; line-height: 1.4; }
.panel[data-tab="overview"] .ov-act-sh { font-size: 13px; margin: 7px 0 5px; }
.panel[data-tab="overview"] .ov-act-group { gap: 5px; margin-bottom: 5px; }
.panel[data-tab="overview"] .ov-action-list { overflow: hidden; }

/* Safety summary — enhanced (progress + delta) */
.ov-safety-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 콘텐츠 무관 3등분 강제 */
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.ov-sc {
  display: flex;
  flex-direction: column;
  padding: 11px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  min-height: 0;
  overflow: hidden;
  gap: 4px;
}
.ov-sc .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
}
.ov-sc .sc-l {
  font-size: 17px;
  color: var(--text-strong);
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-sc .sc-badge {
  font-size: 13px;
  padding: 4px 11px;
  background: var(--success);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  flex-shrink: 0;
}
.ov-sc .sc-badge.warn { background: var(--warning); }
.ov-sc.complete .sc-badge { background: var(--primary); }
.ov-sc .sc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 0 4px;
  min-height: 0;
}
.ov-sc .sc-v {
  font-size: 52px;
  font-weight: 800;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.025em;
}
.ov-sc.complete .sc-v { font-size: 34px; color: var(--primary-dark); }
.ov-sc .sc-unit {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.ov-sc .sc-foot { flex-shrink: 0; }
.ov-sc .sc-progress {
  width: 100%;
  height: 6px;
  background: var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.ov-sc .sc-progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ov-sc.complete .sc-progress-bar { background: var(--success); }
.ov-sc .sc-goal {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 7px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.005em;
}

/* 안전 현황 요약 — 3셀 크기 일관화 (동일 높이·값 크기·badge 폭·하단 정렬) */
.ov-safety-grid { align-items: stretch; }
.ov-sc { min-height: 172px; }
.ov-sc .sc-head { min-height: 28px; align-items: flex-start; }
.ov-sc .sc-badge { min-width: 66px; justify-content: center; text-align: center; }
.ov-sc .sc-v { font-size: 46px; }
.ov-sc .sc-body { min-height: 78px; }
.ov-sc .sc-foot { margin-top: auto; }
/* 다음 목표 진척 — 한 줄 라벨 + D-day 칩 + (바 + %) 로 의미를 분리해 표기 */
.ov-sc .sc-goal-row {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
  margin-bottom: 7px; white-space: nowrap;
}
.ov-sc .sc-goal-row .sc-goal-label b { color: var(--text-strong); font-weight: 800; }
.ov-sc .sc-dday {
  background: var(--primary-tint); color: var(--primary-dark);
  border: 1px solid var(--primary-soft);
  padding: 1px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ov-sc .sc-progress-line { display: flex; align-items: center; gap: 8px; }
.ov-sc .sc-progress-line .sc-progress { flex: 1; }
.ov-sc .sc-progress-line .sc-pct {
  font-size: 12.5px; font-weight: 800; color: var(--text-strong);
  font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 34px; text-align: right;
}

.ov-safety-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 카드와 동일: 콘텐츠 무관 3등분 → 열 경계 정확 정렬 */
  gap: 8px;                 /* 상단 카드(.ov-safety-grid)와 동일 간격 */
  flex-shrink: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ov-pill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.ov-pill .pi {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: var(--surface-2);
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.ov-pill .pi svg { width: 16px; height: 16px; }
.ov-pill.green .pi  { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.ov-pill.orange .pi { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.ov-pill .pl {
  font-size: 15.5px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
/* '재해 누적'처럼 폭이 넓은 라벨만 자간·크기를 살짝 줄여 1줄 유지 */
.ov-pill .pl.pl-tight { font-size: 14px; letter-spacing: -0.3px; }
.panel[data-tab="overview"] .ov-pill .pl.pl-tight { font-size: 15px !important; letter-spacing: -0.3px; }
.ov-pill .pv {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  line-height: 1;
}
/* 절제된 톤 — 색상은 수치(.pv)와 보더만 살짝 강조, 배경 블록은 사용하지 않음 */
.ov-pill.green { border-color: var(--success-border); }
.ov-pill.green .pv { color: var(--success); }
.ov-pill.orange { border-color: var(--warning-border); }
.ov-pill.orange .pv { color: var(--warning); }
.ov-pill.gray .pv { color: var(--text); }
/* 3등분 강제(minmax 0) 후 좁아진 열에 'Near Miss 10'까지 안전하게 수용 — 여백·아이콘·폰트 압축 */
.panel[data-tab="overview"] .ov-pill { padding: 9px 8px; gap: 5px; }
.panel[data-tab="overview"] .ov-pill .pi { width: 24px; height: 24px; }
.panel[data-tab="overview"] .ov-pill .pl { font-size: 13px; letter-spacing: -0.2px; }
.panel[data-tab="overview"] .ov-pill .pl.pl-tight { font-size: 13px !important; letter-spacing: -0.2px; }
.panel[data-tab="overview"] .ov-pill .pv { font-size: 19px; }

/* ============================================================
   Editor — Auth banner (lock indicator at top)
   ============================================================ */
.ed-auth-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 14px;
  border: 1.5px solid;
}
.ed-auth-banner.locked {
  background: linear-gradient(90deg, #fff5e6 0%, #fef3e0 100%);
  border-color: var(--warning-border);
  color: var(--warning);
}
.ed-auth-banner.unlocked {
  background: linear-gradient(90deg, #e6f7ee 0%, #dff0e7 100%);
  border-color: var(--success-border);
  color: var(--success);
}
.ed-auth-banner-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.ed-auth-banner-text {
  flex: 1;
  color: var(--text-strong);
  font-weight: 500;
  font-size: 13.5px;
}
.ed-auth-banner-text b { color: var(--warning); }
.ed-auth-banner.unlocked .ed-auth-banner-text b { color: var(--success); }
.ed-auth-banner-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ed-auth-banner-btn:hover { background: var(--primary-hover); }
.ed-auth-banner-btn.lock {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}
.ed-auth-banner-btn.lock:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

/* 읽기 전용 모드: 입력 시각 처리 */
.ed-readonly input,
.ed-readonly select,
.ed-readonly textarea {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  border-color: var(--border) !important;
}

/* Modal-style auth dialog */
.ed-auth-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 61, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.ed-auth-modal-back .ed-auth-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 36px 26px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.2s ease;
}
.ed-auth-modal-back .ed-auth-btn.secondary {
  background: var(--surface-2);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
}
.ed-auth-modal-back .ed-auth-btn.secondary:hover {
  background: var(--surface-3);
}

/* (legacy) gate styles kept for fallback */
.ed-auth-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 24px;
}
.ed-auth-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px 30px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.ed-auth-icon {
  font-size: 36px;
  margin-bottom: 10px;
  line-height: 1;
}
.ed-auth-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ed-auth-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.55;
}
.ed-auth-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  outline: none;
  margin-bottom: 12px;
  letter-spacing: 0.12em;
  text-align: center;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.ed-auth-input:focus {
  border-color: var(--primary);
  background: var(--surface);
}
.ed-auth-btn {
  width: 100%;
  padding: 11px 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.ed-auth-btn:hover { background: var(--primary-hover); }
.ed-auth-btn:disabled {
  background: var(--text-soft);
  cursor: not-allowed;
}
.ed-auth-error {
  color: var(--danger);
  font-size: 12px;
  margin-top: 10px;
  min-height: 18px;
  font-weight: 600;
}
.ed-auth-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-soft);
}

/* ============================================================
   미니멀 라이트 리디자인 (2026-07)
   방향: 화이트 헤더 · 그라디언트 제거 · 단일 블루 액센트 ·
         보더 중심(그림자 최소화) · 여백 확대 · 타이포 정돈
   ※ 차트(ECharts)는 JS 하드코딩 색이라 --primary 계열은 유지.
   ============================================================ */
:root {
  --bg: #f7f8fa;              /* 블루끼 제거한 뉴트럴 그레이 */
  --surface-2: #f1f3f6;
  --surface-3: #f9fafb;
  --border: #e6e8ee;
  --border-strong: #d6dae2;
  --border-soft: #eef0f4;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-card: none;
}

/* ── 타이틀바: 네이비 그라디언트 → 화이트 ── */
.titlebar {
  background: #fff;
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  height: 56px;
}
.titlebar::after { display: none; }
.titlebar .brand .logo { filter: none; }
.titlebar .brand .divider { background: var(--border-strong); }
.titlebar .title { color: var(--text-strong); font-size: 18px; letter-spacing: -0.012em; }
.titlebar .subtitle { color: var(--text-muted); }
.titlebar .subtitle b { color: var(--text-strong); }
.titlebar .subtitle .dot { opacity: 0.45; }
.titlebar .menu { color: var(--text-muted); }
.titlebar .menu span:hover { background: var(--surface-2); color: var(--text); }
.titlebar .nav-toggle { color: var(--text-strong); }
.titlebar .auth-bar { color: var(--text-muted); }
.titlebar .auth-bar__user b { color: var(--text-strong); }
.titlebar .auth-bar__sep { color: var(--border-strong); }
.titlebar .auth-bar__logout { color: var(--text-muted); }
.titlebar .auth-bar__logout:hover { background: var(--surface-2); color: var(--text); }
.titlebar .auth-bar__dev {
  background: var(--warning-soft);
  color: var(--warning-dark);
  border-color: var(--warning-border);
}

/* ── 상태바: 네이비 → 라이트 ── */
.statusbar {
  background: #fff;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.statusbar > span:first-child::before { color: var(--success); }

/* ── 사이드바: 정돈된 라이트 그레이 + 미니멀 그룹 라벨 ── */
.sidebar { background: var(--surface-3); }
.menu-group {
  border-bottom: 0;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.menu-group .mg-n {
  background: var(--surface-2);
  color: var(--text-muted);
  box-shadow: none;
  font-weight: 700;
}
.menu-group .mg-caret { color: var(--text-soft); }
.menu-item {
  font-size: 14px;
  padding: 8px 10px 8px 12px;
  border-radius: 8px;
  color: var(--text-muted);
}
.menu-item::before { display: none; }   /* 좌측 바 제거 — 배경 필로 상태 표현 */
.menu-item:hover { color: var(--text); }
.menu-item.active { background: var(--primary-soft); color: var(--primary-dark); }
/* 하위 항목 계층감: 그룹 라벨 아래로 확실히 들여쓰고 세로 가이드 라인 부여 */
.menu-items {
  margin-left: 22px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.menu-section { margin-bottom: 10px; }
.menu-section.collapsed .menu-items { border-left-color: transparent; }

/* ── 카드: 그림자 제거 · 보더 중심 · 여백 확대 ── */
.grid { gap: 14px; }
.panel { padding: 20px 26px; }
.card {
  box-shadow: none;
  border-color: var(--border);
  padding: 18px 20px;
}
.card:hover { box-shadow: var(--shadow-xs); border-color: var(--border-strong); }
.card h3 {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 10px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.card h3::before { display: none; }     /* 장식 액센트 바 제거 */

/* ── 패널 헤더: 액센트 바 제거, 제목은 본문 강조색으로 ── */
.panel-head::before { display: none; }
.panel-head__title { color: var(--text-strong); letter-spacing: -0.015em; }

/* ── 호버 리프트 완화 (미니멀: 과한 플로팅 억제) ── */
.mp-card:hover,
.ov-group-card:hover, .pm-up-card:hover, .biz-str-card:hover, .dm-top-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15,30,61,.08);
}