/* ═══════════════════════════════════════════════════════════════
   PFM · Ops Layer v6 "퍼널 오퍼레이팅"  (2026-09-14)
   ───────────────────────────────────────────────────────────────
   핵심(실장 강의 8자리 · 퍼널 오퍼레이팅)과 부가 기능을 화면 구조로
   분리하는 셸 디자인 레이어. 마지막에 로드된다.
   - 사이드바: 핵심 존(번호 레일 + 상태점) / 부가 존(접힘·저채도)
   - 헤더: 존 칩(핵심 / 부가) + 제목
   - 모바일: 하단 탭바(보드·전화·노쇼·상담·팀·더보기)
   - 홈: 오늘 스트립 → 8자리 보드 → 지금 할 일 → 주간 한 장 → 부가(접힘)
   모듈 내부 화면(34개)은 건드리지 않는다 — 셸과 홈만.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ops-core: #0f766e;
  --ops-core-2: #14b8a6;
  --ops-core-soft: #ccfbf1;
  --ops-core-ink: #134e4a;
  --ops-side: #64748b;
  --ops-warn: #dc2626;
  --ops-warn-soft: #fef2f2;
  --ops-warn-line: #fecaca;
  --ops-ok: #16a34a;
  --ops-ok-soft: #f0fdf4;
  --ops-ok-line: #bbf7d0;
  --ops-off: #94a3b8;
  --ops-off-soft: #f8fafc;
  --ops-off-line: #e2e8f0;
  --ops-paper: #fffdf7;
  --ops-paper-line: #e7e0c9;
  --ops-radius: 16px;
  --ops-tabs-h: 64px;
}
[data-theme="dark"] {
  --ops-core-soft: rgba(20,184,166,.16);
  --ops-warn-soft: rgba(220,38,38,.12);
  --ops-warn-line: rgba(248,113,113,.35);
  --ops-ok-soft: rgba(22,163,74,.12);
  --ops-ok-line: rgba(74,222,128,.3);
  --ops-off-soft: rgba(148,163,184,.06);
  --ops-off-line: rgba(148,163,184,.18);
  --ops-paper: #1a1f2b;
  --ops-paper-line: rgba(231,224,201,.18);
}

/* ─────────────────────────────────────────────
   1. 사이드바 — 두 존
   ───────────────────────────────────────────── */
.sidebar-nav .nav-section { padding: 0; }
.sidebar-nav .nav-section-title { display: none; }

.ops-zone { padding: 6px 10px 10px; }
.ops-zone + .ops-zone { border-top: 1px solid rgba(148,163,184,.12); margin-top: 6px; padding-top: 12px; }
.ops-zone-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 8px 8px; color: var(--sidebar-text-dim, #94a3b8);
}
.ops-zone-core .ops-zone-title { color: #5eead4; }
.ops-zone-title .ops-zone-line { flex: 1; height: 1px; background: currentColor; opacity: .25; }
.ops-zone-title small { font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .7; }

/* 핵심 존: 홈 + 번호 레일 */
.ops-zone-core .nav-item { border-radius: 10px; padding: 8px 10px; gap: 10px; }
.ops-zone-core .nav-item svg { width: 16px; height: 16px; }
.ops-home { margin-bottom: 4px; font-weight: 800 !important; background: rgba(20,184,166,.08); }
.ops-home.active { background: var(--sidebar-active-bg, rgba(20,184,166,.18)) !important; }
.ops-rail { position: relative; margin: 2px 0 4px; }
.ops-rail::before { content: ''; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, rgba(94,234,212,.35), rgba(94,234,212,.08)); border-radius: 2px; }
.ops-core-item { position: relative; }
.ops-no {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums;
  background: #0b1220; border: 2px solid rgba(94,234,212,.45); color: #5eead4; position: relative; z-index: 1;
}
.ops-core-item.active .ops-no { background: var(--ops-core-2); border-color: var(--ops-core-2); color: #042f2e; }
.ops-core-label { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ops-core-label b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-core-label small { font-size: 10.5px; opacity: .6; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 999px; background: transparent; flex-shrink: 0; box-shadow: 0 0 0 2px transparent; }
.ops-dot.ok   { background: #4ade80; }
.ops-dot.warn { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.25); }
.ops-dot.off  { background: rgba(148,163,184,.35); }
.ops-team { margin-top: 4px; }

/* 부가 존: 저채도 아코디언 */
.ops-zone-side .nav-item { padding: 6px 10px; font-size: 12.5px; opacity: .82; border-radius: 8px; }
.ops-zone-side .nav-item svg { width: 14px; height: 14px; opacity: .6; }
.ops-zone-side .nav-item:hover { opacity: 1; }
.ops-zone-side .nav-item[data-group] { font-weight: 600; }
.ops-zone-side .nav-group-children .nav-item { font-size: 12px; padding: 5px 10px 5px 30px; }
.ops-zone-side .nav-group-children .nav-item.active { opacity: 1; }
.ops-zone-foot { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(148,163,184,.15); }

/* ─────────────────────────────────────────────
   2. 헤더 — 존 칩
   ───────────────────────────────────────────── */
.main-header { position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(160%) blur(8px); background: color-mix(in srgb, var(--bg-card, #fff) 88%, transparent); }
.ops-zone-chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.ops-zone-chip::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.ops-zone-chip[data-zone="core"] { color: var(--ops-core-ink); background: var(--ops-core-soft); border-color: rgba(20,184,166,.35); }
.ops-zone-chip[data-zone="side"] { color: var(--ops-side); background: var(--ops-off-soft); border-color: var(--ops-off-line); }
[data-theme="dark"] .ops-zone-chip[data-zone="core"] { color: #5eead4; }
body[data-zone="side"] .main-header-title { font-weight: 600; }
.main-header-title { font-size: 17px; letter-spacing: -.01em; }
@media (max-width: 480px) { .ops-zone-chip span { display: none; } .ops-zone-chip { padding: 4px 7px; } }

/* ─────────────────────────────────────────────
   3. 모바일 하단 탭바
   ───────────────────────────────────────────── */
.ops-tabs { display: none; }
@media (max-width: 768px) {
  .ops-tabs {
    display: grid; grid-template-columns: repeat(6, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--ops-tabs-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg-card, #fff) 92%, transparent); backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--border, #e2e8f0); z-index: 90;
  }
  .ops-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; color: var(--text-muted, #64748b); font-size: 10.5px; font-weight: 700; cursor: pointer; padding: 6px 0; }
  .ops-tab .ops-tab-ico { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: transparent; position: relative; }
  .ops-tab.active { color: var(--ops-core); }
  .ops-tab.active .ops-tab-ico { background: var(--ops-core-soft); }
  .ops-tab .ops-dot { position: absolute; top: 2px; right: 2px; margin: 0; }
  #menuToggle { display: none !important; }
  /* 설치 배너·토스트가 탭바를 가리지 않게 위로 */
  .pfm-install-banner { bottom: calc(var(--ops-tabs-h) + 10px + env(safe-area-inset-bottom, 0px)) !important; }
  .toast-container { bottom: calc(var(--ops-tabs-h) + 10px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ─────────────────────────────────────────────
   4. 홈 — 오늘 스트립
   ───────────────────────────────────────────── */
.ops-today {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 18px; margin-bottom: 16px;
  border-radius: var(--ops-radius); background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e8f0);
}
.ops-today-date { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.ops-today-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.ops-today-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary, #475569); }
.ops-today-meta b { color: var(--text, #0f172a); }
.ops-today-actions { margin-left: auto; display: flex; gap: 6px; }
.ops-btn { border: 1px solid var(--border, #e2e8f0); background: var(--bg-card, #fff); color: var(--text, #0f172a); border-radius: 10px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.ops-btn:hover { border-color: var(--ops-core-2); background: var(--ops-core-soft); }
.ops-btn.primary { background: var(--ops-core); border-color: var(--ops-core); color: #fff; }
.ops-btn.primary:hover { background: var(--ops-core-ink); }
.ops-btn:disabled { opacity: .6; cursor: default; }
.ops-seg { display: inline-flex; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; overflow: hidden; background: var(--bg-card, #fff); }
.ops-seg button { border: 0; background: transparent; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.ops-seg button.active { background: var(--ops-core); color: #fff; }

/* ─────────────────────────────────────────────
   5. 홈 — 8자리 보드
   ───────────────────────────────────────────── */
.ops-board { border-radius: var(--ops-radius); background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e8f0); padding: 18px 20px 16px; margin-bottom: 16px; position: relative; overflow: hidden; }
.ops-board::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--ops-core-2), var(--ops-core)); }
.ops-board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; margin-bottom: 12px; }
.ops-eyebrow { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ops-core); }
.ops-board-title { font-size: 20px; font-weight: 900; letter-spacing: -.02em; margin-top: 2px; line-height: 1.2; }
.ops-board-title .leak { color: var(--ops-warn); }
.ops-board-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ops-board-ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.ops-seeds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.ops-seed { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 9px 12px; background: var(--bg-secondary, #f8fafc); }
.ops-seed-label { font-size: 11px; color: var(--text-muted); }
.ops-seed-val { font-size: 18px; font-weight: 800; margin-top: 1px; font-variant-numeric: tabular-nums; }
.ops-seed-d { font-size: 11px; margin-top: 1px; color: var(--text-muted); }
.ops-up { color: var(--ops-ok); font-weight: 700; } .ops-down { color: var(--ops-warn); font-weight: 700; } .ops-flat { color: var(--ops-off); }

.ops-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; margin: 4px 0 10px; }
.ops-flags .lbl { color: var(--text-muted); margin-right: 2px; }
.ops-flag { border-radius: 999px; padding: 2px 10px; font-weight: 700; border: 1px solid; }
.ops-flag.warn { background: var(--ops-warn-soft); color: var(--ops-warn); border-color: var(--ops-warn-line); }
.ops-flag.ok { background: var(--ops-ok-soft); color: var(--ops-ok); border-color: var(--ops-ok-line); }

.ops-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ops-slot { position: relative; border: 1.5px solid var(--ops-ok-line); background: var(--bg-card, #fff); border-radius: 14px; padding: 12px 12px 10px 14px; min-height: 128px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.ops-slot::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ops-ok); }
.ops-slot--warn { border-color: var(--ops-warn-line); background: var(--ops-warn-soft); } .ops-slot--warn::before { background: var(--ops-warn); }
.ops-slot--off { border-color: var(--ops-off-line); background: var(--ops-off-soft); } .ops-slot--off::before { background: var(--ops-off); }
.ops-slot--off .ops-slot-role, .ops-slot--off .ops-metric { opacity: .55; }
.ops-slot[data-goto] { cursor: pointer; } .ops-slot[data-goto]:hover { transform: translateY(-1px); box-shadow: var(--shadow-md, 0 4px 12px rgba(15,23,42,.08)); }
.ops-slot-top { display: flex; align-items: center; gap: 8px; }
.ops-slot-no { width: 22px; height: 22px; border-radius: 999px; background: var(--ops-core); color: #fff; font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ops-slot--warn .ops-slot-no { background: var(--ops-warn); } .ops-slot--off .ops-slot-no { background: var(--ops-off); }
.ops-slot-stage { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-slot-tag { margin-left: auto; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 8px; border: 1px solid; white-space: nowrap; }
.ops-slot--warn .ops-slot-tag { color: var(--ops-warn); border-color: var(--ops-warn-line); background: var(--bg-card, #fff); }
.ops-slot--off .ops-slot-tag { color: var(--ops-off); border-color: var(--ops-off-line); background: var(--bg-card, #fff); }
.ops-slot-role { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ops-slot-role small { font-weight: 500; color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.ops-metrics { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.ops-metric { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ops-metric-l { font-size: 12px; color: var(--text-secondary, #475569); min-width: 0; }
.ops-metric-l .n { color: var(--ops-off); font-size: 10px; }
.ops-metric-v { font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ops-metric:first-child .ops-metric-v { font-size: 20px; }
.ops-metric-d { font-size: 11px; font-weight: 600; margin-left: 4px; }
.ops-slot-note { font-size: 11px; color: var(--ops-off); margin-top: auto; line-height: 1.4; }
.ops-board-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 11px; color: var(--text-muted); margin-top: 12px; }
.ops-board-foot .warn { color: #b45309; } .ops-board-foot .err { color: var(--ops-warn); }
.ops-board-foot a { color: var(--ops-core); font-weight: 700; }

/* ─────────────────────────────────────────────
   6. 홈 — 지금 할 일 (리듬)
   ───────────────────────────────────────────── */
.ops-rhythm { border-radius: var(--ops-radius); background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e8f0); padding: 14px 18px 14px; margin-bottom: 16px; }
.ops-rhythm-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 10px; }
.ops-rhythm-head b { font-size: 15px; font-weight: 800; }
.ops-rhythm-head small { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.ops-rhythm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.rhythm-item { border: 1.5px solid var(--ops-ok-line); background: var(--ops-ok-soft); border-radius: 12px; padding: 10px 12px; transition: transform .15s; }
.rhythm-item[data-goto], .rhythm-item[data-scroll], .rhythm-item[data-click], .rhythm-item[data-href] { cursor: pointer; }
.rhythm-item:hover { transform: translateY(-1px); }
.rhythm-item.warn { border-color: var(--ops-warn-line); background: var(--ops-warn-soft); }
.rhythm-item.off { border-color: var(--ops-off-line); background: var(--ops-off-soft); opacity: .75; }
.rhythm-item .l { font-size: 11px; color: var(--text-muted); }
.rhythm-item .v { font-size: 15px; font-weight: 800; margin-top: 2px; }
.rhythm-item.warn .v { color: var(--ops-warn); }

/* ─────────────────────────────────────────────
   7. 홈 — 주간 한 장 (종이)
   ───────────────────────────────────────────── */
.ops-weekly { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--ops-paper-line); border-radius: 12px; background: var(--ops-paper); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.ops-weekly-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 8px; }
.ops-weekly-head b { font-size: 13px; font-weight: 800; }
.ops-weekly-head small { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.ops-weekly-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; align-items: end; }
.ops-weekly-form label { font-size: 11px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; }
.ops-weekly-form .input-sm, .ops-weekly-form select, .ops-weekly-form input { width: 100%; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 7px 9px; font-size: 13px; background: var(--bg-card, #fff); color: var(--text, #0f172a); }
.ops-weekly-cur { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 13px; }
.ops-weekly-cur .muted { font-size: 12px; color: var(--text-muted); }
.ops-weekly-prev { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.ops-weekly-prev > div { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; padding: 4px 0; border-top: 1px dashed var(--ops-paper-line); }
.ops-weekly-prev .t { color: var(--text, #0f172a); }

/* ─────────────────────────────────────────────
   8. 홈 — 부가 기능 구역
   ───────────────────────────────────────────── */
.ops-side-section { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding-top: 14px; border-top: 1px dashed var(--border, #e2e8f0); }
.ops-side-section .chip { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ops-side); background: var(--ops-off-soft); border: 1px solid var(--ops-off-line); border-radius: 999px; padding: 3px 10px; }
.ops-side-section .desc { font-size: 12px; color: var(--text-muted); }
.ops-side-section .ops-btn { margin-left: auto; padding: 4px 10px; font-size: 11px; }
#secondaryZone { animation: pageEnter .25s ease both; }

/* ─────────────────────────────────────────────
   9. 반응형
   ───────────────────────────────────────────── */
@media (max-width: 1180px) { .ops-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ops-seeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .main-body { padding: 14px !important; }
  .ops-board, .ops-rhythm { padding: 14px 14px 12px; border-radius: 14px; }
  .ops-board-title { font-size: 17px; }
  .ops-today { padding: 10px 14px; }
  .ops-today-actions { margin-left: 0; width: 100%; }
  .ops-slot { min-height: 0; padding: 10px 10px 9px 12px; }
  .ops-metric:first-child .ops-metric-v { font-size: 18px; }
}
@media (max-width: 520px) {
  .ops-slots { grid-template-columns: 1fr; }
  .ops-seeds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .sidebar, .main-header, .ops-tabs, .ops-side-section, #secondaryZone, .ops-board-ctl, .ops-today-actions { display: none !important; }
  .ops-board, .ops-rhythm, .ops-weekly { break-inside: avoid; border-color: #999; }
}
@media (max-width: 768px) {
  .main-body { padding-bottom: calc(var(--ops-tabs-h) + 28px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (min-width: 769px) { #menuToggle { display: none !important; } }
/* 모바일 드로어: 기존 레이어에서 .sidebar z-index 가 2 로 떨어져 백드롭(199) 뒤에 숨던 문제 */
@media (max-width: 768px) {
  .sidebar { z-index: 220 !important; box-shadow: 0 0 0 1px rgba(148,163,184,.12), 12px 0 40px rgba(0,0,0,.35); }
  .sidebar-backdrop { z-index: 210 !important; }
}

/* ─────────────────────────────────────────────
   10. 핵심 화면 상단 요약 헤더 (v6.1)
   ───────────────────────────────────────────── */
.ops-slothead-zone { flex-shrink: 0; background: var(--bg-secondary, #f8fafc); border-bottom: 1px solid var(--border, #e2e8f0); }
.ops-slothead-zone:empty { display: none; }
.ops-slothead { display: flex; align-items: center; gap: 12px; padding: 10px 20px; position: relative; }
.ops-slothead::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ops-ok); }
.ops-slothead--warn::before { background: var(--ops-warn); } .ops-slothead--off::before { background: var(--ops-off); }
.ops-slothead--loading { color: var(--text-muted); font-size: 12px; }
.ops-hd-no { width: 26px; height: 26px; border-radius: 999px; background: var(--ops-core); color: #fff; font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ops-slothead--warn .ops-hd-no { background: var(--ops-warn); } .ops-slothead--off .ops-hd-no { background: var(--ops-off); }
.ops-hd-no--team { background: #4f46e5; }
.ops-hd-main { min-width: 0; flex: 0 1 auto; }
.ops-hd-title { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.ops-hd-title small { font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.ops-hd-tag { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px; border: 1px solid; }
.ops-hd-tag.warn { color: var(--ops-warn); border-color: var(--ops-warn-line); background: var(--ops-warn-soft); }
.ops-hd-tag.ok { color: var(--ops-ok); border-color: var(--ops-ok-line); background: var(--ops-ok-soft); }
.ops-hd-tag.off { color: var(--ops-off); border-color: var(--ops-off-line); background: var(--ops-off-soft); }
.ops-hd-next { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.ops-hd-chips { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.ops-hd-chips::-webkit-scrollbar { display: none; }
.ops-hd-chip { display: inline-flex; flex-direction: column; gap: 1px; padding: 5px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background: var(--bg-card, #fff); white-space: nowrap; line-height: 1.15; }
.ops-hd-chip small { font-size: 10px; color: var(--text-muted); }
.ops-hd-chip b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ops-hd-chip.warn { border-color: var(--ops-warn-line); background: var(--ops-warn-soft); } .ops-hd-chip.warn b { color: var(--ops-warn); }
.ops-hd-chip.ok { border-color: var(--ops-ok-line); background: var(--ops-ok-soft); }
.ops-hd-chip.off { opacity: .7; }
.ops-hd-d { font-style: normal; font-size: 10px; font-weight: 700; margin-left: 4px; } .ops-hd-d.good { color: var(--ops-ok); } .ops-hd-d.bad { color: var(--ops-warn); } .ops-hd-d.flat { color: var(--ops-off); }
.ops-hd-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ops-hd-period { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ops-hd-btn { border: 1px solid var(--border, #e2e8f0); background: var(--bg-card, #fff); border-radius: 8px; padding: 4px 9px; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--text, #0f172a); }
.ops-hd-btn:hover { border-color: var(--ops-core-2); }
.ops-slothead.is-collapsed .ops-hd-chips, .ops-slothead.is-collapsed .ops-hd-next, .ops-slothead.is-collapsed .ops-hd-period { display: none; }
.ops-slothead.is-collapsed { padding: 6px 20px; }
@media (max-width: 768px) {
  .ops-slothead { flex-wrap: wrap; padding: 8px 14px; gap: 8px 10px; }
  .ops-hd-main { flex: 1 1 60%; } .ops-hd-next { max-width: none; white-space: normal; }
  .ops-hd-chips { flex-basis: 100%; order: 3; margin-left: 0; }
  .ops-hd-period { display: none; }
}

/* ─── 11. 30초 브리핑 카드 (진료보드 상세) ─── */
.tb-brief { border: 1.5px solid var(--ops-core-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; background: var(--ops-core-soft); }
.tb-brief-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ops-core-ink); margin-bottom: 8px; }
.tb-brief-head small { font-weight: 500; color: var(--text-muted); font-size: 11px; } .tb-brief-head a { margin-left: auto; font-size: 11px; color: var(--ops-core); }
.tb-brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tb-brief-cell { background: var(--bg-card, #fff); border-radius: 9px; padding: 7px 9px; font-size: 12px; min-height: 54px; }
.tb-brief-cell b { display: block; font-size: 11px; color: var(--ops-core); margin-bottom: 3px; }
.tb-brief-cell ul { margin: 0; padding-left: 14px; } .tb-brief-cell li { margin: 1px 0; line-height: 1.4; }
.tb-brief-empty { color: var(--ops-off); font-size: 11px; }
.tb-brief-temp { display: inline-block; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; margin-bottom: 3px; }
/* ─── 12. 리콜: 명단 4층 · 골든타임 ─── */
.rc-block { border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; background: var(--bg-card, #fff); }
.rc-block--golden { border-color: var(--ops-warn-line); }
.rc-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; } .rc-block-head b { font-size: 14px; font-weight: 800; } .rc-block-head small { font-size: 11px; color: var(--text-muted); }
.rc-recovery { margin-left: auto; font-size: 12px; } .rc-recovery b { color: var(--ops-core); }
.rc-layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rc-layer { border: 1.5px solid var(--border, #e2e8f0); border-left: 4px solid var(--c); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.rc-layer-top { display: flex; justify-content: space-between; align-items: baseline; } .rc-layer-top span { font-size: 12px; font-weight: 700; } .rc-layer-top b { font-size: 18px; font-weight: 900; color: var(--c); }
.rc-layer small { display: block; font-size: 10.5px; color: var(--text-muted); }
.rc-layer-sample { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; } .rc-layer-sample span { font-size: 10.5px; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; } .rc-layer-sample i { font-style: normal; color: var(--text-muted); }
.rc-golden-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border, #e2e8f0); font-size: 13px; } .rc-golden-row:first-of-type { border-top: 0; } .rc-golden-row small { font-size: 11px; color: var(--text-muted); }
.rc-golden-row > div { flex: 1; min-width: 0; } .rc-golden-row .btn { flex-shrink: 0; background: var(--ops-warn); color: #fff; border: 0; }
.rc-golden-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .rc-golden-tags span { font-size: 10.5px; border: 1px solid var(--ops-warn-line); background: var(--ops-warn-soft); color: var(--ops-warn); border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.rc-golden-tags span.off { border-color: var(--ops-off-line); background: var(--ops-off-soft); color: var(--ops-off); } .rc-golden-tags span.ok { border-color: var(--ops-ok-line); background: var(--ops-ok-soft); color: var(--ops-ok); }
.rc-golden-empty { font-size: 12px; color: var(--text-muted); padding: 6px 0; }
@media (max-width: 768px) { .rc-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-brief-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   2026-09-20 · 퍼널의 형상화 + 평가 (PFM 최우선 목적)
   홈 최상단: 10단계 깔때기(폭 = 전환율 누적) + 점수·구간·새는 곳
   ═══════════════════════════════════════════════════════════════ */
.pf-shape { border-radius: var(--ops-radius); background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e8f0); padding: 18px 20px 16px; margin-bottom: 16px; position: relative; overflow: hidden; }
.pf-shape::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #f59e0b, var(--ops-core)); }
.pf-shape-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; margin-bottom: 14px; }
.pf-shape-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ops-core); }
.pf-shape-title { font-size: 20px; font-weight: 900; letter-spacing: -.02em; margin-top: 2px; line-height: 1.2; }
.pf-shape-title .leak { color: var(--ops-warn); }
.pf-shape-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.pf-shape-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .pf-shape-grid { grid-template-columns: 1fr; } }
.pf-funnel { display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px; gap: 0 10px; align-items: center; }
.pf-row { display: contents; }
.pf-row-no { font-size: 11px; font-weight: 800; color: var(--text-muted); text-align: right; line-height: 1.15; padding: 5px 0; }
.pf-row-no b { display: block; font-size: 13px; color: var(--text-primary, #0f172a); }
.pf-band { position: relative; height: 34px; margin: 2px 0; display: flex; justify-content: center; }
.pf-band-bar { height: 100%; border-radius: 6px; background: var(--ops-core-2); opacity: .92; min-width: 6px; transition: width .6s cubic-bezier(.2,.8,.2,1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pf-band--warn .pf-band-bar { background: var(--ops-warn); }
.pf-band--off .pf-band-bar { background: repeating-linear-gradient(135deg, #cbd5e1 0 6px, #e2e8f0 6px 12px); color: #475569; text-shadow: none; }
.pf-band-zone { position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; border-radius: 2px; }
.pf-row-side { font-size: 11px; line-height: 1.3; color: var(--text-muted); padding: 3px 0; min-width: 0; }
.pf-row-side b { display: block; font-size: 12.5px; color: var(--text-primary, #0f172a); font-variant-numeric: tabular-nums; }
.pf-row-side .bench { opacity: .8; }
.pf-row-side .off { color: var(--ops-off); font-style: italic; }
.pf-zones { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
.pf-zone { flex: 1; min-width: 120px; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 9px 12px; background: var(--bg-secondary, #f8fafc); }
.pf-zone-label { font-size: 11px; color: var(--text-muted); }
.pf-zone-val { font-size: 16px; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pf-zone-val small { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.pf-eval { border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 16px; background: var(--ops-paper); border-color: var(--ops-paper-line); }
.pf-score { display: flex; align-items: center; gap: 14px; }
.pf-score-ring { width: 84px; height: 84px; flex: none; }
.pf-score-num { font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.pf-score-num small { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
.pf-score-grade { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ops-core-soft); color: var(--ops-core-ink); font-size: 11px; font-weight: 800; }
.pf-score-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.pf-leak { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ops-warn-soft); border: 1px solid var(--ops-warn-line); }
.pf-leak-k { font-size: 11px; font-weight: 800; color: var(--ops-warn); letter-spacing: .06em; }
.pf-leak-m { font-size: 13px; font-weight: 700; margin-top: 3px; line-height: 1.4; }
.pf-leak .ops-btn { margin-top: 8px; }
.pf-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pf-src { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border, #e2e8f0); color: var(--text-muted); }
.pf-src.on { background: var(--ops-ok-soft); border-color: var(--ops-ok-line); color: var(--ops-ok); }
.pf-shape-ctl { display: flex; gap: 6px; align-items: center; }
.pf-shape-ctl .ops-seg { display: inline-flex; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; overflow: hidden; }
.pf-shape-ctl .ops-seg button { padding: 6px 10px; font-size: 12px; font-weight: 700; background: transparent; color: var(--text-muted); border: 0; cursor: pointer; }
.pf-shape-ctl .ops-seg button.active { background: var(--ops-core); color: #fff; }

/* 2026-09-21 외부 출처 보조 한 줄 (폼·커넥트·리치) */
.pf-row-side .pf-sub{display:block;font-style:normal;font-size:11px;line-height:1.3;color:var(--text-muted,#6b7280);margin-top:2px;opacity:.9}