/* ═══ Soft Daylight 공통 컴포넌트 (v1.675) — 신규 모듈 디자인 통일 ═══ */
.sd-card{background:#fff;border:1px solid #e8ecf1;border-radius:18px;box-shadow:0 5px 16px rgba(30,41,59,.05)}
.sd-card-lg{background:#fff;border:1px solid #e8ecf1;border-radius:20px;box-shadow:0 8px 24px rgba(30,41,59,.07),0 1px 4px rgba(30,41,59,.04);padding:18px 20px}
.sd-ov{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:var(--z-overlay-top);display:flex;align-items:center;justify-content:center;padding:20px;font-family:inherit}
.sd-mbox{background:#eef1f5;border-radius:22px;max-width:960px;width:100%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.sd-btn{border:1px solid var(--gray-200);background:#fff;color:var(--gray-600);padding:7px 13px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:.12s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sd-btn:hover{filter:brightness(.98)}
.sd-btn-pri{background:var(--mx-acc-teal,#0e7490);color:#fff;border:1px solid var(--mx-acc-teal,#0e7490)}   /* v2.587 U6: 토큰화 */
.sd-btn-pri:hover{background:var(--mx-acc-teal-d,#155e75)}
.sd-btn-navy{background:var(--mx-acc-teal,#0e7490);color:#fff;border:1px solid var(--mx-acc-teal,#0e7490)}
.sd-btn-purple{background:#7c3aed;color:#fff;border:1px solid #7c3aed}
.sd-btn-green{background:#15803d;color:#fff;border:1px solid #15803d}
.sd-btn-danger{background:#fff;border:1px solid var(--red-border);color:var(--red-strong)}   /* v2.590 U5a: 삭제/반려용 변형 */
.sd-btn-sm{padding:5px 10px;font-size:11px;border-radius:var(--r-md)}
.sd-btn-x{width:34px;height:34px;padding:0;border-radius:10px;justify-content:center;font-size:18px;color:var(--gray-500)}
.sd-inp{padding:8px 12px;border:1.5px solid var(--gray-200);border-radius:11px;font-size:13px;font-family:inherit;box-sizing:border-box;outline:none}
.sd-inp:focus{border-color:var(--mx-acc-teal,#0e7490)}
.sd-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:10px;font-weight:800}
.sd-kpi{background:#fff;border:1px solid #e8ecf1;border-radius:18px;box-shadow:0 5px 16px rgba(30,41,59,.05);padding:10px 14px;flex:1;min-width:110px;text-align:center}
.sd-kpi .v{font-size:18px;font-weight:800;color:#0f172a}
.sd-kpi .l{font-size:10px;color:var(--gray-400)}
.sd-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sd-title{font-size:18px;font-weight:800;color:#0f172a}
.sd-sub{font-size:12px;color:var(--gray-500);margin-top:2px}
/* v2.493: WOFF2 우선(TTF 폴백) · 실사용 5 weight만(400~800). 미사용 100/200/300/900 제거 → font-display:swap이 근사 weight로 폴백. 폰트 11MB→2MB */
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-4Regular.woff2') format('woff2'),url('fonts/Paperlogy-4Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-5Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-7Bold.woff2') format('woff2'),url('fonts/Paperlogy-7Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('fonts/Paperlogy-8ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
:root{
  /* ── z-index 계층 (계층 충돌 방지 표준 · v2.332 재정비) ──
     낮음→높음. 모듈 인라인 하드코딩 z-index가 최대 ~100002까지 난립 →
     popover/toast를 그 위에 둬 "토스트·드롭다운이 모달 뒤로 가는" 버그를 앱 전역에서 완화.
     (toast 호스트·cmdk 백드롭이 토큰을 쓰므로 값만 올리면 즉시 반영) */
  --z-base:0;
  --z-content:1;          /* in-flow 상승: 표 sticky th·차트 바 */
  --z-panel-sticky:10;    /* 패널/모달 내부 sticky 헤더 */
  --z-raised:60;          /* 리사이저·패널 로딩 오버레이 */
  --z-nav:100;            /* 앱 상단 sticky 바(헤더/서브내비/퀵내비) */
  --z-drawer:210;         /* 사이드 드로어 + 백드롭 */
  --z-overlay:2000;       /* 모달 백드롭(기본) */
  --z-modal:9000;         /* 모달/패널 */
  --z-overlay-top:10100;  /* 상위 오버레이(첨부 팝업·사이드 오버레이) */
  --z-modal-top:10500;    /* 앱 최상위 모달(사용자 편집 등) */
  --z-popover:150000;     /* 드롭다운·팝오버·커맨드팔레트 — 인라인 모달 상한 위 */
  --z-toast:200000;       /* 토스트 — 항상 최상위 */
  --z-print:99999;        /* @media print 전용 */
  /* 하위호환 별칭(구 토큰명 — 현재 미사용이나 보호) */
  --z-dropdown:var(--z-popover);
  --z-sticky:var(--z-nav);
  --z-header:var(--z-nav);
  /* ── 네이비 계열 ── */
  --navy-900:#0d2340;
  --navy-800:#1e3a5f;
  --navy-700:#1e5ca8;
  --navy-600:#2563eb;
  --navy-500:#3b82f6;
  /* ── 중립 계열 ── */
  --gray-50:#f8fafc;
  --gray-100:#f1f5f9;
  --gray-200:#e2e8f0;
  --gray-300:#cbd5e1;
  --gray-400:#94a3b8;
  --gray-500:#64748b;
  --gray-600:#475569;
  --gray-700:#374151;
  --gray-900:#1a202c;
  /* ── 상태 색상 ── */
  --green:#10b981;   --green-bg:#d1fae5;  --green-text:#065f46;
  --yellow:#f59e0b;  --yellow-bg:#fef3c7; --yellow-text:#92400e; --yellow-border:#fde68a;
  --red:#ef4444;     --red-bg:#fee2e2;    --red-text:#991b1b;    --red-strong:#dc2626;  --red-border:#fecaca;
  --orange:#e85420;
  --blue-bg:#dbeafe; --blue-text:#1d4ed8; --blue-border:#bfdbfe; --blue-300:#93c5fd;
  --green-strong:#16a34a; --green-700:#059669; --green-300:#86efac; --green-50:#f0fdf4;
  --green-text-dark:#166534; --green-bg-soft:#dcfce7;
  /* 보라 (특수/실험적/AI 강조) */
  --purple:#7c3aed; --purple-bg:#faf5ff; --purple-text:#5b21b6;
  /* 옅은 네이비 (tint bg) */
  --navy-50:#eff6ff;
  /* 보조 */
  --cyan:#0891b2;
  --pink:#ec4899;
  /* ── 시맨틱 ── */
  --bg:var(--gray-50);
  --surface:#fff;
  /* v2.580 U2: gap 토큰 신설 — 하드코딩 최다 반복값의 정식 토큰화 */
  --text-strong:#0f172a;      /* 제목·강조 텍스트 (모듈 295회 하드코딩분) */
  --gray-75:#eef1f5;          /* 스켈레톤·최옅은 구분 bg (gray-50과 100 사이) */
  --yellow-bg-soft:#fffbeb;   /* amber 옅은 bg (green-bg-soft 네이밍 정합) */
  --border:var(--gray-200);
  --border-strong:var(--gray-300);
  --text:var(--gray-900);
  --text-2:var(--gray-500);
  --text-3:var(--gray-400);
  /* 2026-07-25 정본 단일화(디자인 감사 docs/DESIGN_AUDIT_2026-07-25): 주 액센트 = New Design 블루 #465fff. 단일 진실원천. */
  --primary:#465fff;
  --primary-dark:#2f45d8;
  --primary-hover:#5b72ff;
  --brand:var(--primary); --brand-600:#3b56f0; --brand-700:#2f45d8;   /* --brand는 --primary 별칭 */
  /* ── 간격 ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;   /* v2.333 D1: 큰 간격(8px 리듬) */
  /* 레이아웃 (v2.333 D1) — content-max: 와이드 모니터 콘텐츠 폭 제한 / gutter: 좌우 여백 */
  --content-max:1440px; --gutter:24px; --sidebar-w:190px;
  /* 표준 브레이크포인트(참조용 — @media에는 직접 못 씀, JS/문서 기준) */
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
  /* ── 타이포 스케일 (v1.347+ 디자인 토큰) ── */
  --fs-3xs:10px;  /* v2.580 U2: 마이크로 라벨·배지 (8.5~10.5px 흡수) — 기존 무토큰 구간 */
  --fs-2xs:11px;  /* 라벨·캡션 (8~11px 흡수) */
  --fs-xs:12px;   /* 보조 텍스트·표 (11.5~12.5px 흡수) */
  --fs-sm:14px;   /* 본문 (13~14px 흡수) */
  --fs-md:16px;   /* 카드 제목 (15~17px 흡수) */
  --fs-lg:20px;   /* 섹션 제목 (18~22px 흡수) */
  --fs-xl:28px;   /* KPI 대형 수치 (24~28px 흡수) */
  --fs-2xl:36px;  /* 히어로 수치 (30~38px 흡수) */
  --fs-hero:48px; /* 디스플레이 (40~54px 흡수) */
  /* ── 반경 4단계 (v1.347+ 디자인 토큰) ── */
  --r-sm:4px;     /* 칩·뱃지 (3~5px 흡수) */
  --r-md:8px;     /* 버튼·입력 (6~9px 흡수) */
  --r-lg:12px;    /* 카드 (10~14px 흡수) */
  --r-xl:16px;    /* 모달·패널 (16px+ 흡수) */
  --r-xs:var(--r-sm); /* 하위호환 alias */
  /* ── 그림자 ── */
  --shadow-xs:0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:0 2px 8px rgba(30,92,168,.08),0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(30,92,168,.1),0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 32px rgba(30,92,168,.14),0 2px 8px rgba(0,0,0,.06);
  /* ── 하위 호환 ── */
  --blue:var(--navy-700);--blue2:var(--navy-600);
  --panel:var(--surface);--brd:var(--gray-200);
  --txt:var(--gray-900);--txt2:var(--gray-500);--txt3:var(--gray-400);
  --mono:'SF Mono','Fira Code',monospace;
  --radius:var(--r-lg);

  /* ═══════ MX DS v1 — 신 디자인 시스템 토큰 (v1.619~) ═══════ */
  /* 사용 원칙: 새로 작성하는 컴포넌트는 --mx-* 사용. 옛 변수는 그대로 유지. */
  /* 마이그된 모듈 추적: grep -l "mx-" modules/*.js */

  /* ── 베이스 ── */
  --mx-bg:#fbfaf6;          /* 페이지 (따뜻한 종이) */
  --mx-paper:#ffffff;       /* 카드 베이스 */
  --mx-paper-2:#fdfdfb;     /* 카드 보조 (살짝 어두운) */
  --mx-hover:#f4f2eb;       /* hover 회색 (Notion DB row 톤) */
  --mx-code-bg:#eee8d4;     /* inline code 배경 (tag chip 공용) */

  /* ── 잉크 (네이비 5단계) ── */
  --mx-ink:#1b2a44;         /* 본문 잉크 */
  --mx-ink-2:#3e4a63;
  --mx-ink-3:#6d7891;
  --mx-ink-4:#9aa2b3;
  --mx-ink-5:#c8ccd5;

  /* ── 헤어라인 ── */
  --mx-line:#ebe7da;
  --mx-line-strong:#d8d3c0;

  /* ── 액센트 ── */
  --mx-teal:#117a70;        /* 수주 · 좋은 페이스 */
  --mx-teal-soft:#e3f1ee;
  --mx-rose:#b91845;        /* 주의 · 손실 */
  --mx-rose-soft:#f8e1ea;
  --mx-amber:#b46a08;       /* 알림 */
  --mx-amber-soft:#f8ead2;
  --mx-gold:#a17422;        /* 단가계약 강조 (마리넥스 매출 65%) */
  --mx-gold-soft:#f6efd9;

  /* ── v2.230: 모듈 공용 액센트 토큰 (현재 모듈들이 박아 쓰는 hex 그대로 — 점진 통일용·시각 동일) ── */
  /*   목적: 흩어진 색 하드코딩을 1곳으로 모음. 값이 같아 외형 변화 없음. 추후 이 변수만 바꾸면 전역 테마 변경. */
  --mx-acc-teal:var(--primary); --mx-acc-teal-d:var(--primary-dark);   /* 2026-07-25: 정본 단일화 — 레거시 teal 이름을 --primary 별칭으로(구 #0e7490 청록 단일화 결정 대체). 액센트 테마 변형(.theme-*)은 아래에서 계속 오버라이드. */
  --mx-acc-navy:#1e40af; --mx-acc-navy2:#1e5ca8;
  --mx-acc-purple:#6d28d9; --mx-acc-sky:#0369a1;
  --mx-acc-amber:#b45309; --mx-acc-green:#15803d;
  --mx-acc-red:#dc2626;  --mx-acc-red-d:#b91c1c;

  /* ── 차트 색 (지표별 고정) ── */
  --mx-c-quote:#7c4cd0;     /* 견적 (보라) */
  --mx-c-quote-soft:#ede5fa;
  --mx-c-order:var(--mx-teal);  /* 수주 (틸) */
  --mx-c-revenue:#3e5a96;       /* 매출 (네이비 블루) */
  --mx-c-revenue-soft:#dde5f3;

  /* ── 타이포 (MX DS 전용 스케일) ── */
  --mx-fs-cap:11px;
  --mx-fs-xs:12px;
  --mx-fs-sm:13.5px;
  --mx-fs-md:14.5px;
  --mx-fs-lg:16px;
  --mx-fs-xl:19px;
  --mx-fs-2xl:26px;
  --mx-fs-3xl:36px;
  --mx-fs-4xl:52px;

  /* ── 반경 (Notion 톤) ── */
  --mx-r-xs:3px;
  --mx-r-sm:4px;
  --mx-r-md:6px;
  --mx-r-lg:8px;

  /* ── 그림자 (절제) ── */
  --mx-shadow-1:0 1px 2px rgba(27,42,68,.04);
  --mx-shadow-2:0 4px 12px rgba(27,42,68,.06);
}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-50px) scale(1.08)}66%{transform:translate(-30px,30px) scale(.95)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-50px,35px) scale(1.06)}66%{transform:translate(30px,-40px) scale(.97)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,40px) scale(1.04)}}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pinPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
*{margin:0;padding:0;box-sizing:border-box}
/* v2.349 D4: 본문·입력·표 기본 폰트 = Pretendard(UI·데이터 최적화). Paperlogy는 폴백 + 제목류가 명시 사용. */
body,input,textarea,select,button{font-family:'Pretendard','Paperlogy','Apple SD Gothic Neo',-apple-system,sans-serif}
body{font-family:'Pretendard','Paperlogy','Apple SD Gothic Neo',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
/* HEADER */
.hdr{background:linear-gradient(110deg,#0d2645 0%,var(--navy-700) 55%,#2563b0 100%);color:var(--surface);padding:0 24px;display:flex;align-items:center;height:56px;gap:16px;position:sticky;top:0;z-index:100;box-shadow:0 4px 24px rgba(10,30,70,.32);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr-logo{height:52px;object-fit:contain}
.hdr-sep{width:1px;height:32px;background:rgba(255,255,255,.18)}
.hdr-home-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;flex-shrink:0;transition:.15s;border-radius:var(--r-md)}
.hdr-home-btn:hover{filter:drop-shadow(0 0 8px rgba(255,255,255,.45));opacity:.88}
.hdr-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hdr-title{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.5px;white-space:nowrap;line-height:1;background:linear-gradient(90deg,var(--surface) 60%,rgba(255,255,255,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hdr-ver-badge{font-size:var(--fs-2xs);font-weight:800;color:rgba(255,255,255,.8);background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-lg);padding:2px 8px;letter-spacing:.3px;white-space:nowrap}
.hdr-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.tab-nav{display:flex;gap:3px;flex:1}
.tab-btn.perma-hidden{display:none!important} /* v1.825: 권한토글과 무관하게 영구 숨김 (예: projmgmt — CRM 소메뉴로 이동) */
/* v1.882: 빠른 네비 — 헤더 아래 최근 모듈 칩 */
#quick-nav{display:flex;gap:6px;align-items:center;padding:6px 16px;background:var(--surface,#fff);border-bottom:1px solid var(--gray-200,#e5e9f0);overflow-x:auto;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.04);scrollbar-width:thin;position:sticky;top:56px;z-index:99} /* v1.882: 헤더(56px) 아래 고정 — 스크롤해도 안 가려짐 */
#quick-nav::-webkit-scrollbar{height:5px}
#quick-nav::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}
#quick-nav .qnav-lbl{font-size:10px;font-weight:700;color:var(--gray-400,var(--gray-400));flex:none;margin-right:2px}
.qnav-chip{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border:1px solid var(--gray-200,#e5e9f0);background:var(--gray-50,var(--gray-50));border-radius:999px;font-size:11.5px;font-weight:600;color:var(--gray-600,var(--gray-600));cursor:pointer;font-family:inherit;transition:.12s}
.qnav-chip:hover{background:#eef4ff;border-color:#c7d8f0;color:var(--navy-700,#1e5ca8)}
.qnav-chip.active{background:var(--navy-700,#1e5ca8);border-color:var(--navy-700,#1e5ca8);color:#fff}
.qnav-chip .qnav-x{opacity:.4;font-size:12px;margin-left:1px}
.qnav-chip .qnav-x:hover{opacity:1;color:var(--red-strong,#dc2626)}
.tab-btn{background:transparent;border:none;color:rgba(255,255,255,.6);font-size:var(--fs-sm);font-weight:600;padding:6px 16px;border-radius:var(--r-md);cursor:pointer;transition:.12s}
.tab-btn:hover{background:rgba(255,255,255,.12);color:var(--surface)}
.tab-btn.active{background:rgba(255,255,255,.2);color:var(--surface)}
.hdr-date{font-size:var(--fs-xs);color:rgba(255,255,255,.55);white-space:nowrap}
/* MAIN */
/* v2.171: 전체 모듈 — 사이드바와 일체감 (중앙정렬 박스 제거 + 간격 축소, 풀폭) */
/* v2.333 D1: 콘텐츠 폭 제한 — 와이드 모니터에서 끝까지 늘어지지 않게 중앙 정렬(max 1440px).
   메일/서비스 등 풀폭 필요 화면은 아래 body.*-active 규칙 및 .main.full 로 예외(none) 유지. */
.main{padding:14px 16px;max-width:var(--content-max);margin:0 auto}
.main.full{max-width:none;margin:0}
/* 옵트인 페이지 래퍼(개별 화면에서 콘텐츠를 감싸 여백·폭 통일하고 싶을 때) */
.page-inner{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter);box-sizing:border-box}
.tab-panel{display:none}.tab-panel.active{display:block}#tab-crm.active{display:flex}
/* ── 통합 모달 (native <dialog>) · v2.335 D3 ── top layer 렌더 → z-index 무관 항상 최상위 */
/* position/inset/margin:auto — 전역 *{margin:0}이 <dialog> 기본 중앙정렬(margin:auto)을 덮어써 좌상단에 뜨던 것 교정 */
dialog.mxd{padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;color:var(--text-1,#0f172a);position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content}
dialog.mxd::backdrop{background:rgba(13,30,58,.42);backdrop-filter:blur(2px)}
dialog.mxd-nobd::backdrop{background:transparent;backdrop-filter:none} /* v2.476: 자체 dim 콘텐츠용 */
dialog.mxd .mxd-card{background:var(--surface,#fff);border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(10,30,70,.28);display:flex;flex-direction:column;max-height:90vh;overflow:hidden;width:min(92vw,var(--_mxd-w,560px));font-family:inherit}
dialog.mxd-sm .mxd-card{--_mxd-w:400px}
dialog.mxd-md .mxd-card{--_mxd-w:560px}
dialog.mxd-lg .mxd-card{--_mxd-w:760px}
dialog.mxd-xl .mxd-card{--_mxd-w:960px}
dialog.mxd-full .mxd-card{--_mxd-w:96vw;max-height:94vh}
/* v2.343 D3: pm-proj 프로젝트 상세 — 원 박스 치수(980px·고정높이·2단 flex) 복원. mxd-body 패딩 제거·flex 컬럼 */
dialog.mxd-pmproj .mxd-card{width:min(980px,97vw);max-width:none;height:min(92vh,880px);background:var(--gray-100)}
dialog.mxd-pmproj .mxd-body{padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
dialog.mxd .mxd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px;background:linear-gradient(110deg,#0d2645,var(--navy-700,#1e3a5f));color:var(--surface,#fff);flex:none}
dialog.mxd .mxd-title{font-size:var(--fs-md,16px);font-weight:800}
dialog.mxd .mxd-x{background:rgba(255,255,255,.14);border:none;color:#fff;width:30px;height:30px;border-radius:var(--r-md);font-size:18px;line-height:1;cursor:pointer;flex:none}
dialog.mxd .mxd-x:hover{background:rgba(255,255,255,.26)}
dialog.mxd .mxd-body{padding:18px;overflow:auto;flex:1}
dialog.mxd .mxd-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--gray-200,#e2e8f0);background:var(--gray-50,#f8fafc);flex:none}
dialog.mxd .mxd-btn{padding:8px 16px;border-radius:var(--r-md);font-size:var(--fs-sm,14px);font-weight:700;cursor:pointer;font-family:inherit;border:1px solid var(--gray-300,#cbd5e1);background:#fff;color:var(--gray-700,#374151)}
dialog.mxd .mxd-btn:hover{filter:brightness(.97)}
dialog.mxd .mxd-btn-primary{background:var(--navy-700,#1e3a5f);color:#fff;border-color:var(--navy-700,#1e3a5f)}
dialog.mxd .mxd-btn-danger{background:var(--mx-acc-red,#dc2626);color:#fff;border-color:var(--mx-acc-red,#dc2626)}
@media (prefers-reduced-motion:no-preference){dialog.mxd[open] .mxd-card{animation:mxdIn .16s cubic-bezier(.22,.68,0,1.2) both}dialog.mxd[open]::backdrop{animation:mxdBd .16s ease-out both}}
@keyframes mxdIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mxdBd{from{opacity:0}to{opacity:1}}
/* UPLOAD BAR */
.up-bar{background:linear-gradient(135deg,var(--surface),var(--gray-50));border:1px solid var(--brd);border-radius:var(--radius);padding:12px 18px;margin-bottom:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
.up-lbl{font-size:var(--fs-2xs);font-weight:600;color:var(--txt2);white-space:nowrap}
.up-btn{font-size:var(--fs-2xs);padding:5px 12px;background:var(--blue);color:var(--surface);border:none;border-radius:var(--r-md);cursor:pointer;font-weight:600;transition:.12s}
.up-btn:hover{background:var(--blue2)}
.up-stat{font-size:var(--fs-2xs);color:var(--green);font-weight:600;min-width:60px}
.up-sep{width:1px;height:24px;background:var(--brd);flex-shrink:0}
input[type=file]{display:none}
.tgt-wrap{display:flex;align-items:center;gap:6px;margin-left:auto}
.tgt-wrap label{font-size:var(--fs-xs);font-weight:600;color:var(--txt2)}
.tgt-inp{font-size:var(--fs-sm);font-weight:600;padding:4px 10px;border:1px solid var(--brd);border-radius:var(--r-md);width:110px;text-align:right}
.tgt-inp:focus{outline:none;border-color:var(--blue)}
.tgt-unit{font-size:var(--fs-xs);color:var(--txt3)}
/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--brd);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;cursor:default;position:relative}
.kpi.clickable{cursor:pointer}
.kpi.clickable:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,23,42,.1);border-color:var(--blue-border)}
.kpi.clickable::after{content:'↗';position:absolute;top:8px;right:10px;font-size:var(--fs-2xs);color:var(--gray-400);opacity:0;transition:.2s}
.kpi.clickable:hover::after{opacity:.8}
.rank-row.clickable{cursor:pointer;transition:.15s}
.rank-row.clickable:hover{background:var(--navy-50)!important}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.kpi.b-blue{border-top:3px solid var(--primary);background:linear-gradient(160deg,rgba(30,92,168,.04) 0%,var(--surface) 100%)}
.kpi.b-orange{border-top:3px solid var(--orange);background:linear-gradient(160deg,rgba(232,84,32,.04) 0%,var(--surface) 100%)}
.kpi.b-green{border-top:3px solid var(--green);background:linear-gradient(160deg,rgba(16,185,129,.04) 0%,var(--surface) 100%)}
.kpi.b-red{border-top:3px solid var(--red);background:linear-gradient(160deg,rgba(239,68,68,.04) 0%,var(--surface) 100%)}
.kpi.b-yellow{border-top:3px solid var(--yellow);background:linear-gradient(160deg,rgba(245,158,11,.04) 0%,var(--surface) 100%)}
.kpi-lbl{font-size:var(--fs-2xs);font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.kpi-val{font-size:var(--fs-xl);font-weight:800;color:var(--txt);line-height:1.1}
.kpi-sub{font-size:var(--fs-2xs);color:var(--txt3);margin-top:5px}
/* ── 독립 스크롤 레이아웃 ── */
/* ── main padding-top(20px) 상쇄: 스크롤 끝까지 닿도록 ── */
#tab-crm,#tab-service,#tab-dbmgmt,#tab-projmgmt,#tab-board{margin-top:-20px}
#tab-crm{height:calc(100vh - 88px);overflow:hidden}
#tab-service.active{display:flex;flex-direction:column;height:calc(100vh - 88px);overflow:hidden}
.sv-kpi-panel{flex-shrink:0}
#sv-pane-area{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
#sv-pane-area>div{flex:1;min-height:0;overflow:hidden;box-sizing:border-box}
#sv-pane-calendar{display:flex;flex-direction:column}
#sv-pane-calendar .sv-wrap{flex:1;min-height:0;overflow-y:auto}
#sv-pane-overview{overflow-y:auto!important}
#sv-pane-stats{overflow-y:auto!important}
#sv-pane-mgmt{flex:1;min-height:0;flex-direction:column;overflow:hidden!important}
#sv-pane-engineers{flex:1;min-height:0;overflow-y:auto}
#sv-pane-closing{flex:1;min-height:0;overflow-y:auto}
#sv-pane-vessels{min-height:unset!important}
.sv-kpi-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.sv-kpi-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:11px 14px;box-shadow:0 1px 4px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden;transition:box-shadow .18s,transform .18s}
.sv-kpi-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.sv-kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--r-xl) 16px 0 0}
.sv-kpi-card--navy::before{background:linear-gradient(90deg,var(--navy-800),var(--navy-600))}
.sv-kpi-card--green::before{background:linear-gradient(90deg,var(--green-text),var(--green-700))}
.sv-kpi-card--blue::before{background:linear-gradient(90deg,#1e40af,#0ea5e9)}
.sv-kpi-card-title{font-size:var(--fs-2xs);font-weight:800;color:var(--gray-400);letter-spacing:.6px;text-transform:uppercase;margin-bottom:7px}
.sv-kpi-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.sv-kpi-row:last-child{margin-bottom:0}
.sv-kpi-lbl{font-size:var(--fs-xs);font-weight:600;color:var(--gray-500);white-space:nowrap}
.sv-kpi-num{font-size:var(--fs-lg);font-weight:800;color:#1e293b;letter-spacing:-.5px;line-height:1}
.sv-kpi-num--lg{font-size:var(--fs-lg)}
.sv-kpi-num--sm{font-size:var(--fs-md);color:var(--gray-600)}
.sv-kpi-unit{font-size:var(--fs-xs);font-weight:600;color:var(--gray-400);margin-left:2px}
.sv-kpi-divider{height:1px;background:var(--gray-100);margin:6px 0}
@media(max-width:900px){.sv-kpi-panel{grid-template-columns:1fr}}
.prog{background:var(--gray-200);border-radius:var(--r-sm);height:5px;margin-top:7px;overflow:hidden}
.prog-bar{height:5px;border-radius:var(--r-sm);transition:width .6s}
/* CHARTS */
.cg2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.sec-hdr{display:flex;align-items:center;gap:16px;margin:28px 0 14px;padding-bottom:12px;border-bottom:2px solid currentColor}
.sec-hdr .sec-num{font-size:var(--fs-2xl);font-weight:800;opacity:.12;line-height:1;flex-shrink:0;font-variant-numeric:tabular-nums}
.sec-hdr .sec-title{font-size:var(--fs-md);font-weight:800;letter-spacing:-.4px;line-height:1.2}
.sec-hdr .sec-sub{font-size:var(--fs-2xs);margin-top:3px;opacity:.55;font-weight:400}
.sec-quote{color:var(--navy-700)}.sec-order{color:var(--orange)}.sec-revenue{color:var(--red-strong)}
/* SALES SUB-TABS */
.stab-nav{display:flex;gap:10px;padding:18px 0 20px;margin-bottom:4px;flex-wrap:wrap;align-items:stretch}
.stab-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:14px 20px;border:1.5px solid var(--gray-200);background:var(--surface);
  font-family:'Paperlogy',sans-serif;cursor:pointer;border-radius:var(--r-lg);
  transition:all .18s cubic-bezier(.4,0,.2,1);white-space:nowrap;min-width:100px;
  position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.stab-icon{font-size:var(--fs-lg);line-height:1;display:block}
.stab-lbl{font-size:var(--fs-xs);font-weight:600;color:var(--gray-600);display:block;margin-top:2px}
.stab-desc{font-size:var(--fs-2xs);font-weight:400;color:var(--gray-400);display:block;margin-top:1px}
.stab-btn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:transparent;border-radius:0 0 3px 3px;transition:background .18s}
.stab-btn:hover{border-color:#c7d8f0;background:#f7faff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,92,168,.1)}
.stab-btn:hover .stab-lbl{color:var(--navy-700)}
.stab-btn.active{border-color:var(--navy-700);background:linear-gradient(160deg,#eef4ff 0%,#f5f9ff 100%);box-shadow:0 4px 16px rgba(30,92,168,.15);transform:translateY(-2px)}
.stab-btn.active::after{background:var(--navy-700)}
.stab-btn[data-tab=quote].active{border-color:#0369a1;background:linear-gradient(160deg,#e0f2fe,#f0f9ff)}
.stab-btn[data-tab=quote].active::after,.stab-btn[data-tab=quote].active .stab-lbl{background:transparent;color:#0369a1}
.stab-btn[data-tab=quote].active::after{background:#0369a1}
.stab-btn[data-tab=order].active{border-color:var(--orange);background:linear-gradient(160deg,#fff3ee,#fff8f5)}
.stab-btn[data-tab=order].active::after{background:var(--orange)}
.stab-btn[data-tab=order].active .stab-lbl{color:var(--orange)}
.stab-btn[data-tab=revenue].active{border-color:var(--red-strong);background:linear-gradient(160deg,#fff0f0,#fff7f7)}
.stab-btn[data-tab=revenue].active::after{background:var(--red-strong)}
.stab-btn[data-tab=revenue].active .stab-lbl{color:var(--red-strong)}
.stab-btn[data-tab=detail].active{border-color:#6366f1;background:linear-gradient(160deg,#f0f0ff,#f7f7ff)}
.stab-btn[data-tab=detail].active::after{background:#6366f1}
.stab-btn[data-tab=detail].active .stab-lbl{color:#6366f1}
.stab-btn[data-tab=summary].active .stab-lbl{color:var(--navy-700)}
.stab-btn[data-tab=purchase].active{border-color:var(--green-700);background:linear-gradient(160deg,#ecfdf5,#f0fff8)}
.stab-btn[data-tab=purchase].active::after{background:var(--green-700)}
.stab-btn[data-tab=purchase].active .stab-lbl{color:var(--green-700)}
.stab-pane{display:none}.stab-pane.active{display:block}
#st-qlines.stab-pane.active{display:block;width:100%;max-width:none;padding:0 4px}
#st-qlines #qlines-content{width:100%;max-width:none}
#st-qlines .qline-chk{flex-shrink:0}
#st-salesintel.stab-pane.active{display:block;width:100%;max-width:none;padding:0 4px}
#st-salesintel #salesintel-content{width:100%;max-width:none}
#st-ordtrack.stab-pane.active{display:block;width:100%;max-width:none;padding:0 4px}
#st-ordtrack #ordtrack-content{width:100%;max-width:none}
#st-rfq.stab-pane.active{display:block;width:100%;max-width:none;padding:0 4px}
#st-rfq #rfq-content{width:100%;max-width:none}
#st-rfq-mod.stab-pane.active{display:block;width:100%;max-width:none;padding:0 4px}
#st-rfq-mod #rfq-mod-root{width:100%;max-width:none}
/* v1.888: My Desk(My Today·우리 사무실·내 일정) CSS 제거 — _archive/mydesk_v1.888_backup.md 백업 */
#st-email.stab-pane.active{display:block;width:100%;max-width:none;padding:0 4px}
#st-email #email-content{width:100%;max-width:none}
#st-tasks.stab-pane.active{display:block;width:100%;max-width:none;padding:0 4px}
#st-tasks #tasks-content{width:100%;max-width:none}
/* ── 프로젝트 대시보드 ── */
#pj-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s}
#pj-overlay.open{opacity:1;pointer-events:auto}
#pj-drawer{position:fixed;top:0;right:0;height:100%;width:560px;max-width:97vw;background:var(--surface);z-index:201;
  box-shadow:-6px 0 32px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden}
#pj-drawer.open{transform:translateX(0)}
#pj-dhead{padding:20px 24px 16px;border-bottom:1px solid var(--gray-200);flex-shrink:0;background:linear-gradient(135deg,#0f2744,var(--navy-700))}
#pj-dbody{flex:1;overflow-y:auto;padding:20px 24px}
.pj-field{margin-bottom:14px}
.pj-label{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-600);margin-bottom:5px;display:block}
.pj-inp{width:100%;border:1.5px solid var(--border);border-radius:var(--r-md);padding:9px 12px;font-family:'Paperlogy',sans-serif;font-size:var(--fs-sm);color:var(--text);outline:none;transition:border-color .15s;box-sizing:border-box}
.pj-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.pj-inp[type=date]{color:var(--gray-600)}
.pj-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pj-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pj-btn-row{display:flex;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-200)}
.pj-save-btn{flex:1;padding:12px;background:var(--navy-700);color:var(--surface);border:none;border-radius:var(--r-md);font-family:'Paperlogy',sans-serif;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .15s}
.pj-save-btn:hover{background:#1a4f94}
.pj-cancel-btn{padding:12px 20px;background:#f7f9fc;color:var(--gray-600);border:1px solid var(--gray-200);border-radius:var(--r-md);font-family:'Paperlogy',sans-serif;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
/* 프로젝트 테이블 */
.pj-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.pj-add-btn{padding:9px 18px;background:var(--navy-700);color:var(--surface);border:none;border-radius:var(--r-md);font-family:'Paperlogy',sans-serif;font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.pj-add-btn:hover{background:#1a4f94}
.pj-sel{border:1px solid var(--gray-200);border-radius:var(--r-md);padding:7px 10px;font-family:'Paperlogy',sans-serif;font-size:var(--fs-xs);color:var(--gray-600);background:var(--surface);outline:none}
.pj-search{border:1px solid var(--gray-200);border-radius:var(--r-md);padding:7px 12px;font-family:'Paperlogy',sans-serif;font-size:var(--fs-xs);color:var(--gray-900);outline:none;flex:1;min-width:140px}
.pj-search:focus{border-color:var(--navy-700)}
.pj-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.pj-tbl th{padding:9px 10px;text-align:left;font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);background:#f7f9fc;border-bottom:2px solid var(--gray-200);white-space:nowrap}
.pj-tbl td{padding:10px 10px;border-bottom:1px solid #f0f4f9;vertical-align:middle}
.pj-tbl tr:hover td{background:#f7f9ff}
.pj-status{font-size:var(--fs-2xs);font-weight:600;padding:3px 9px;border-radius:var(--r-xl);white-space:nowrap}
.pj-act-btn{font-size:var(--fs-2xs);padding:4px 10px;border-radius:var(--r-md);border:1px solid var(--gray-200);cursor:pointer;font-family:'Paperlogy',sans-serif;font-weight:600;background:var(--surface);color:var(--gray-600);transition:all .12s}
.pj-act-btn:hover{background:#f0f4f9}
.pj-act-del{color:var(--red);border-color:var(--red-border)}
.pj-act-del:hover{background:#fff5f5}
.pj-dday{font-size:var(--fs-2xs);font-weight:800;padding:2px 8px;border-radius:var(--r-lg);white-space:nowrap}
/* ── 전략 툴 공통 ── */
.tool-card{background:var(--surface);border:1px solid var(--brd);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px}
.tool-title{font-size:var(--fs-sm);font-weight:800;color:var(--gray-900);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tool-badge{font-size:var(--fs-2xs);font-weight:600;padding:2px 9px;border-radius:var(--r-xl);border:none;cursor:default}
/* ① 액션 알림 */
/* ② RFM */
.rfm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rfm-card{border-radius:var(--r-lg);padding:12px 14px;border:1px solid transparent}
.rfm-key{background:var(--navy-50);border-color:var(--blue-border)}.rfm-grow{background:var(--green-50);border-color:#bbf7d0}
.rfm-risk{background:#fffbeb;border-color:var(--yellow-border)}.rfm-sleep{background:var(--gray-50);border-color:var(--gray-200)}
.rfm-name{font-size:var(--fs-sm);font-weight:600;color:var(--gray-900);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rfm-meta{font-size:var(--fs-2xs);color:var(--gray-500);display:flex;gap:10px;flex-wrap:wrap}
/* ③ Follow-up */
.fu-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.fu-table th{padding:8px 10px;text-align:left;font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);background:#f7f9fc;border-bottom:1px solid var(--gray-200)}
.fu-table td{padding:9px 10px;border-bottom:1px solid #f5f7fa;vertical-align:middle}
.day-badge{font-size:var(--fs-2xs);font-weight:800;padding:3px 9px;border-radius:var(--r-xl);white-space:nowrap}
/* ④ 담당자 목표 */
.ptgt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ptgt-card{border:1px solid var(--brd);border-radius:var(--r-lg);padding:14px 16px}
.ptgt-name{font-size:var(--fs-sm);font-weight:800;color:var(--gray-900);margin-bottom:10px}
.ptgt-inp{width:100%;border:1px solid var(--gray-200);border-radius:var(--r-md);padding:6px 10px;font-family:'Paperlogy',sans-serif;font-size:var(--fs-xs);outline:none;margin-bottom:10px}
.ptgt-inp:focus{border-color:var(--navy-700)}
.ptgt-bar-wrap{height:8px;background:#eef2f7;border-radius:var(--r-sm);overflow:hidden;margin-bottom:6px}
.ptgt-bar{height:100%;border-radius:var(--r-sm);transition:width .4s}
.ptgt-meta{font-size:var(--fs-2xs);color:var(--gray-500);display:flex;justify-content:space-between}
/* ⑤ 품목 성과 */
.ipm-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.ipm-table th{padding:8px 10px;font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);background:#f7f9fc;border-bottom:1px solid var(--gray-200);text-align:left}
.ipm-table td{padding:9px 10px;border-bottom:1px solid #f5f7fa}
.ipm-bar-wrap{height:6px;background:#eef2f7;border-radius:var(--r-sm);overflow:hidden;min-width:80px}
.ipm-bar{height:100%;border-radius:var(--r-sm)}
/* SUMMARY GRID */
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
@media(max-width:900px){.sum-grid{grid-template-columns:1fr}}
.sum-col{background:var(--surface);border:1px solid var(--brd);border-radius:var(--r-lg);padding:18px 20px}
.sum-col-title{font-size:var(--fs-sm);font-weight:800;color:var(--txt);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sum-col-title span{font-size:var(--fs-2xs);font-weight:400;color:var(--txt3)}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #f0f4f9;font-size:var(--fs-sm)}
.sum-row:last-child{border-bottom:none}
.sum-val{font-weight:600;color:var(--txt)}
.sum-lbl{color:var(--txt3);font-size:var(--fs-xs)}
.sum-badge{font-size:var(--fs-2xs);font-weight:600;padding:2px 8px;border-radius:var(--r-lg)}
/* SUMMARY REDESIGN */
.sm-hero{background:linear-gradient(135deg,#1e3a6e 0%,var(--navy-700) 60%,#2a6dc4 100%);border-radius:var(--r-xl);padding:24px 28px;margin-bottom:18px;color:var(--surface);display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.sm-hero-main{flex:1;min-width:200px}
.sm-hero-pct{font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1}
.sm-hero-sub{font-size:var(--fs-sm);opacity:.7;margin-top:4px}
.sm-hero-bar{flex:2;min-width:200px}
.sm-hero-bar-track{height:12px;background:rgba(255,255,255,.18);border-radius:var(--r-md);overflow:hidden;margin:8px 0}
.sm-hero-bar-fill{height:100%;border-radius:var(--r-md);background:linear-gradient(90deg,#34d399,var(--green));transition:width .6s}
.sm-hero-stats{display:flex;gap:20px;flex-wrap:wrap}
/* v1.411: 월간/연간 토글 */
.sm-hero-toggle{display:inline-flex;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:2px;backdrop-filter:blur(4px)}
.sm-hero-toggle-btn{padding:3px 10px;border:none;background:transparent;color:rgba(255,255,255,.65);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;border-radius:999px;font-family:inherit;transition:.15s;letter-spacing:.2px}
.sm-hero-toggle-btn:hover{color:var(--surface)}
.sm-hero-toggle-btn.on{background:var(--surface);color:var(--navy-700);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.sm-hstat{text-align:center}
.sm-hstat-val{font-size:var(--fs-lg);font-weight:800}
.sm-hstat-lbl{font-size:var(--fs-2xs);opacity:.65;margin-top:2px}
.sm-2col{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:18px}
@media(max-width:860px){.sm-2col{grid-template-columns:1fr}}
.sm-panel{background:var(--surface);border:1px solid var(--brd);border-radius:var(--r-lg);padding:18px 20px}
.sm-panel-title{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-400);letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.sm-stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f5f7fa;font-size:var(--fs-sm)}
.sm-stat-row:last-child{border:none}
.sm-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
@media(max-width:860px){.sm-3col{grid-template-columns:1fr}}
.sm-kpi{background:var(--surface);border:1px solid var(--brd);border-radius:var(--r-lg);padding:16px 18px}
.sm-kpi-lbl{font-size:var(--fs-2xs);color:var(--gray-400);font-weight:600;margin-bottom:6px}
.sm-kpi-val{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.5px;line-height:1.1}
.sm-kpi-sub{font-size:var(--fs-2xs);color:var(--gray-500);margin-top:5px}
.sm-person-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f5f7fa}
.sm-person-row:last-child{border:none}
.sm-pbar-wrap{flex:1;height:6px;background:#eef2f7;border-radius:var(--r-sm);overflow:hidden}
.sm-pbar{height:100%;border-radius:var(--r-sm);transition:width .4s}
.sm-ar-alert{background:linear-gradient(135deg,#fff5f5,var(--surface));border:1px solid var(--red-border);border-radius:var(--r-lg);padding:16px 20px}
.sm-ar-alert.ok{background:linear-gradient(135deg,var(--green-50),var(--surface));border-color:#bbf7d0}
.cg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.ccard{background:var(--panel);border:1px solid var(--brd);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow-sm);transition:box-shadow .18s}
.ccard:hover{box-shadow:var(--shadow-md)}
.ctitle{font-size:var(--fs-xs);font-weight:800;color:var(--txt);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.cwrap{position:relative;height:230px}
/* TABLE */
.tcard{background:var(--panel);border:1px solid var(--brd);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.thdr{padding:12px 16px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--brd);gap:8px;flex-wrap:wrap}
.ttitle{font-size:var(--fs-xs);font-weight:600}
.tcnt{font-size:var(--fs-2xs);color:var(--txt3);font-family:var(--mono)}
.twrap{max-height:360px;overflow-y:auto}
/* 상세 테이블 — 화면 전체 활용 */
#st-detail .twrap{max-height:calc(100vh - 240px);min-height:480px}
#st-detail .tcard{margin-bottom:0}
table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
th{background:#f7fafc;font-size:var(--fs-2xs);font-weight:600;color:var(--txt3);text-align:left;padding:7px 11px;border-bottom:1px solid var(--brd);white-space:nowrap;position:sticky;top:0}
td{padding:6px 11px;border-bottom:1px solid #f0f4f8;color:var(--txt);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#f7fafc}
.row-danger td{background:rgba(239,68,68,.06)!important}
.row-warning td{background:rgba(245,158,11,.06)!important}
/* BADGE */
.badge{display:inline-block;font-size:var(--fs-2xs);font-weight:600;padding:2px 7px;border-radius:var(--r-xl);white-space:nowrap}
.b-ord{background:rgba(16,185,129,.12);color:var(--green-700)}
.b-cnf{background:rgba(59,130,246,.12);color:var(--navy-600)}
.b-etc{background:rgba(113,128,150,.12);color:var(--gray-500)}
.b-red{background:rgba(239,68,68,.12);color:var(--red)}
.b-yel{background:rgba(245,158,11,.12);color:#d97706}
.b-sale{background:rgba(16,185,129,.2);color:var(--green-text)}
/* SELECTS */
select{font-size:var(--fs-2xs);padding:4px 8px;border:1px solid var(--brd);border-radius:var(--r-sm);background:var(--panel)}
/* COLUMN FILTER */
.cf{width:100%;font-size:var(--fs-2xs);padding:2px 6px;border:1px solid var(--brd);border-radius:var(--r-sm);background:var(--surface);color:var(--txt);box-sizing:border-box}
.cf:focus{outline:none;border-color:var(--blue)}
/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--brd);border-radius:var(--r-sm)}
/* PERSON DRAWER */
#pd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s}
#pd-overlay.open{opacity:1;pointer-events:auto}
/* 통합 영업 드로워 (sd-) — 모바일 풀스크린 */
@media (max-width:768px){
  #sd-drawer{width:100vw!important;max-width:100vw!important}
}
#pd-drawer{position:fixed;top:0;right:0;height:100%;width:520px;max-width:96vw;background:var(--surface);z-index:201;
  box-shadow:-6px 0 32px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden}
#pd-drawer.open{transform:translateX(0)}
#pd-head{padding:20px 22px 16px;border-bottom:1px solid var(--gray-200);flex-shrink:0;background:linear-gradient(135deg,var(--navy-700),#2a6dc4)}
#pd-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:20px}
.pd-sec-title{font-size:var(--fs-xs);font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}

/* ── 매출현황 ─────────────────────────────────────── */
.rv-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:700px){.rv-kpi-row{grid-template-columns:repeat(2,1fr)}}
.rv-kpi{background:var(--surface);border-radius:var(--r-lg);padding:18px 20px;border:1px solid #e8edf5;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.rv-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r-lg) 14px 0 0}
.rv-kpi.c-blue::before{background:linear-gradient(90deg,var(--navy-700),var(--navy-500))}
.rv-kpi.c-green::before{background:linear-gradient(90deg,var(--green),#34d399)}
.rv-kpi.c-red::before{background:linear-gradient(90deg,var(--red-strong),var(--red))}
.rv-kpi.c-orange::before{background:linear-gradient(90deg,var(--yellow),#fbbf24)}
.rv-kpi-icon{font-size:var(--fs-xl);margin-bottom:6px}
.rv-kpi-lbl{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);letter-spacing:.4px;text-transform:uppercase;margin-bottom:5px}
.rv-kpi-val{font-size:var(--fs-lg);font-weight:800;color:var(--gray-900);line-height:1.1;margin-bottom:4px;font-variant-numeric:tabular-nums}
.rv-kpi-sub{font-size:var(--fs-2xs);color:var(--gray-400);font-weight:600}
.ar-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.ar-tbl th{padding:9px 12px;font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);background:#f7f9fc;border-bottom:2px solid var(--gray-200);white-space:nowrap;position:sticky;top:0;z-index:var(--z-content)}
.ar-tbl td{padding:9px 12px;border-bottom:1px solid #f5f7fa;vertical-align:middle}
.ar-tbl tbody tr:hover td{background:#fafbff}
.rv-cg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:800px){.rv-cg3{grid-template-columns:1fr}}
/* ── Top5 품목 패널 ── */
.top5-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid #f0f4f8;cursor:pointer;border-radius:var(--r-md);transition:background .12s}
.sv-vdd-item{padding:8px 13px;cursor:pointer;font-size:var(--fs-xs);border-bottom:1px solid #f0f4f8;display:flex;align-items:center;flex-wrap:wrap;gap:2px;transition:background .1s}
.sv-vdd-item:last-child{border-bottom:none}
.sv-vdd-item:hover{background:#f0f5ff}
.top5-row:hover{background:#f0f5ff}
.top5-row.active{background:#eef4ff;border-color:#c7d8f0}
.top5-items-panel{overflow:hidden;transition:max-height .3s ease,opacity .3s;max-height:0;opacity:0}
.top5-items-panel.open{max-height:600px;opacity:1}
/* ── 설정 모달 ── */
#settings-backdrop{display:none;position:fixed;inset:0;background:rgba(10,18,40,.45);backdrop-filter:blur(4px);z-index:3100;align-items:center;justify-content:center}
#settings-backdrop.open{display:flex}
#settings-box{background:var(--surface);border-radius:var(--r-xl);width:1380px;max-width:96vw;height:88vh;max-height:88vh;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.04);display:flex;flex-direction:column;animation:adminSlide .25s cubic-bezier(.34,1.56,.64,1)}
.stg-head{padding:18px 24px 14px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--surface);border-radius:var(--r-xl) 20px 0 0;}
.stg-head h3{font-size:var(--fs-md);font-weight:800;color:var(--gray-900);margin:0}
.stg-close{background:none;border:none;font-size:var(--fs-lg);cursor:pointer;color:var(--gray-400);padding:2px 6px;border-radius:var(--r-md)}
.stg-close:hover{background:#f7f9fc;color:var(--gray-600)}
.stg-body{padding:18px 22px;display:flex;flex-direction:column;gap:22px;flex:1;min-height:0;overflow-y:auto;}
.stg-section{}
.stg-sect-title{font-size:var(--fs-2xs);font-weight:800;color:var(--gray-500);letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}
.stg-sect-desc{font-size:var(--fs-xs);color:var(--gray-400);margin-bottom:10px;line-height:1.5}
.stg-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;min-height:28px}
.stg-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;padding:5px 10px 5px 12px;border-radius:var(--r-xl);background:#eef4ff;color:var(--blue-text);border:1.5px solid var(--blue-border)}
.stg-chip-del{background:none;border:none;cursor:pointer;font-size:var(--fs-sm);color:#60a5fa;padding:0;line-height:1;transition:.1s}
.stg-chip-del:hover{color:var(--red-strong)}
.stg-chip.green{background:#ecfdf5;color:var(--green-text);border-color:#6ee7b7}
.stg-chip.green .stg-chip-del{color:#34d399}
.stg-chip.green .stg-chip-del:hover{color:var(--red-strong)}
.stg-add-row{display:flex;gap:8px;align-items:center}
.stg-inp{flex:1;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;outline:none;transition:.15s}
.stg-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.stg-add-btn{padding:8px 14px;background:var(--primary);color:var(--surface);border:none;border-radius:var(--r-lg);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;white-space:nowrap;transition:.15s}
.stg-add-btn:hover{background:var(--primary-dark)}
.stg-divider{border:none;border-top:1px solid #f0f4f8;margin:0}
/* 헤더 설정 버튼 */
#admin-settings-btn{display:none!important}
/* ── 영업 헤더 서브네비 ── */
.subnav-bar{position:sticky;top:56px;z-index:98;background:linear-gradient(90deg,#0d2c5c 0%,#1a5faf 60%,#1e69c4 100%);padding:0 20px;display:none;align-items:center;gap:2px;box-shadow:0 4px 16px rgba(0,0,0,.28);border-bottom:1px solid rgba(255,255,255,.08)}
/* 실험적 메뉴 — 관리자만 표시. 활성화는 설정 → 실험적 메뉴에서 토글
   기본 숨김. applyExperimentalVisibility()가 admin & enabled 항목만 노출 */
body:not(.admin-unlocked) .subnav-experimental, body:not(.admin-unlocked) [data-svtab="mgmt"]{display:none!important}
.subnav-experimental{display:none}
.subnav-experimental{display:flex;align-items:center;gap:4px;padding:4px 8px 4px 10px;border:1.5px dashed rgba(251,191,36,.45);border-radius:var(--r-lg);background:rgba(120,53,15,.18);margin-right:6px}
.subnav-experimental-label{font-size:var(--fs-2xs);font-weight:800;color:#fcd34d;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.subnav-btn.experimental{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3)}
.subnav-btn.experimental.active{background:rgba(251,191,36,.95);color:#78350f;border-color:#fcd34d}
body.sales-active #sales-subnav{display:flex}
body.projmgmt-active #projmgmt-subnav{display:flex}
body.crm-active #crm-subnav{display:flex}
.subnav-btn{background:transparent;border:none;border-bottom:3px solid transparent;color:rgba(255,255,255,.58);font-size:var(--fs-xs);font-weight:600;padding:9px 16px 7px;cursor:pointer;transition:.15s;white-space:nowrap;font-family:'Paperlogy',sans-serif;display:flex;align-items:center;gap:6px;letter-spacing:.1px}
.subnav-btn:hover{color:var(--surface);background:rgba(255,255,255,.08);border-radius:var(--r-sm) 4px 0 0}
.subnav-btn.active{color:var(--surface);border-bottom-color:var(--surface);text-shadow:0 0 12px rgba(255,255,255,.4)}
.subnav-sep{width:1px;height:20px;background:rgba(255,255,255,.15);margin:0 4px;flex-shrink:0}
.crm-type-tab{padding:4px 10px;border-radius:var(--r-xl);border:1px solid var(--gray-200);background:var(--surface);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;color:var(--gray-500);transition:.15s;font-family:'Paperlogy',sans-serif}
.crm-type-tab.active{background:var(--navy-700);color:var(--surface);border-color:var(--navy-700)}
.crm-type-tab:hover:not(.active){background:var(--navy-50);color:var(--navy-700)}
.crm-co-row{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--gray-100);transition:.12s;display:flex;align-items:center;gap:8px}
.crm-co-row:hover{background:#f0f5ff}
.crm-co-row.active{background:var(--navy-50);border-left:3px solid var(--navy-700)}
.crm-type-badge{font-size:var(--fs-2xs);font-weight:800;padding:2px 7px;border-radius:var(--r-lg);white-space:nowrap;flex-shrink:0}
.crm-badge-선주사{background:var(--blue-bg);color:var(--blue-text)}
.crm-badge-관리사{background:var(--green-bg);color:var(--green-text)}
.crm-badge-선주+관리{background:#ede9fe;color:var(--purple-text)}
.crm-badge-유통사{background:#fef3c7;color:#b45309}
.crm-badge-제조사{background:var(--yellow-bg);color:#c2410c}
.crm-badge-BWMS-Maker{background:#ede9fe;color:#6d28d9}
.crm-badge-조선소{background:var(--red-bg);color:var(--red-text)}
.crm-badge-기타{background:var(--gray-100);color:var(--gray-600)}
.crm-badge-고객사{background:#e0f2fe;color:#0369a1}
.crm-vs-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:8px;padding:9px 12px;border-bottom:1px solid var(--gray-100);align-items:center;font-size:var(--fs-xs);cursor:pointer;transition:.12s}
.crm-vs-row:hover{background:#f0f5ff}
.crm-vs-row.hdr{font-weight:800;color:var(--gray-500);font-size:var(--fs-2xs);background:var(--gray-50);position:sticky;top:0;cursor:default}
.crm-vs-row.hdr:hover{background:var(--gray-50)}
.crm-mtg-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:10px;cursor:pointer;transition:.12s;display:flex;gap:14px;align-items:flex-start}
.crm-mtg-card:hover{border-color:var(--blue-border);box-shadow:0 4px 16px rgba(30,92,168,.08)}
.crm-mtg-card.fu-overdue{border-left:4px solid #f87171}
.crm-mtg-card.fu-pending{border-left:4px solid #fbbf24}
.crm-mtg-card.fu-done{border-left:4px solid #34d399}
.mtg-fu-badge{font-size:var(--fs-2xs);font-weight:800;padding:2px 8px;border-radius:var(--r-md);white-space:nowrap}
.mtg-fu-pending{background:var(--yellow-bg);color:#b45309}
.mtg-fu-done{background:var(--green-bg);color:var(--green-text)}
.mtg-fu-overdue{background:var(--red-bg);color:var(--red-text)}
.mtg-our-chip{display:inline-flex;align-items:center;gap:4px;background:var(--navy-50);border:1px solid var(--blue-border);color:var(--blue-text);border-radius:var(--r-xl);padding:3px 10px;font-size:var(--fs-xs);font-weight:600}
.mtg-our-chip button{background:none;border:none;cursor:pointer;font-size:var(--fs-sm);color:var(--blue-300);padding:0 0 0 2px;line-height:1}
.mtg-cust-chip{display:inline-flex;align-items:center;gap:4px;background:var(--green-bg);border:1px solid #6ee7b7;color:var(--green-text);border-radius:var(--r-xl);padding:3px 10px;font-size:var(--fs-xs);font-weight:600}
.mtg-cust-chip button{background:none;border:none;cursor:pointer;font-size:var(--fs-sm);color:#6ee7b7;padding:0 0 0 2px;line-height:1}
#crm-mtg-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center}
#crm-mtg-modal.open{display:flex}
.crm-mtg-form{background:var(--surface);border-radius:var(--r-xl);padding:28px 32px;width:680px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
/* ── 로그인 전용 페이지 ── */
#login-page{display:flex;position:fixed;inset:0;z-index:4500;background:radial-gradient(120% 90% at 80% 6%,rgba(61,139,255,.16),transparent 54%),radial-gradient(95% 75% at 10% 98%,rgba(255,106,43,.09),transparent 52%),#06070A;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
body.logged-in #login-page{display:none}
/* 배경 orb */
.lp-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.lp-orb1{width:560px;height:560px;background:radial-gradient(circle,rgba(61,139,255,.42) 0%,transparent 66%);top:-150px;left:-170px;animation:orbFloat1 18s infinite}
.lp-orb2{width:460px;height:460px;background:radial-gradient(circle,rgba(255,106,43,.28) 0%,transparent 66%);bottom:-110px;right:-120px;animation:orbFloat2 22s infinite}
.lp-orb3{width:300px;height:300px;background:radial-gradient(circle,rgba(61,139,255,.2) 0%,transparent 66%);top:52%;left:58%;animation:orbFloat3 15s infinite}
/* 격자 패턴 */
#login-page::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
/* 카드 */
.lp-card{background:rgba(255,255,255,.07);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);padding:36px 38px 28px;width:380px;max-width:93vw;box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset;position:relative;animation:cardIn .55s cubic-bezier(.22,.68,0,1.2) both}
/* 카드 상단 glow line */
.lp-card::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);border-radius:50%}
.lp-logo{height:64px;display:block;margin:0 auto 16px}
.lp-brand-area{text-align:center;margin-bottom:24px}
.lp-title{font-size:var(--fs-lg);font-weight:800;color:var(--surface);letter-spacing:-.4px;font-family:'Paperlogy',sans-serif;line-height:1.2}
.lp-dsub{font-size:var(--fs-2xs);color:rgba(255,255,255,.35);margin-top:3px;font-family:'Paperlogy',sans-serif;letter-spacing:.3px}
/* 단계 레이블 */
.lp-step-label{font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,.5);text-align:center;margin-bottom:10px;font-family:'Paperlogy',sans-serif;letter-spacing:.2px}
/* 유저 목록 */
.lp-user-list{display:flex;flex-direction:column;gap:6px;max-height:290px;overflow-y:auto;padding-right:2px}
.lp-user-list::-webkit-scrollbar{width:3px}
.lp-user-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:var(--r-sm)}
.lp-user-btn{padding:11px 14px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);background:rgba(255,255,255,.06);cursor:pointer;text-align:left;font-size:var(--fs-sm);font-weight:600;color:var(--surface);font-family:'Paperlogy',sans-serif;transition:all .18s;display:flex;align-items:center;gap:12px;width:100%;position:relative;overflow:hidden}
.lp-user-btn::after{content:'›';position:absolute;right:14px;font-size:var(--fs-lg);opacity:.35;transition:.18s}
.lp-user-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);transform:translateX(3px)}
.lp-user-btn:hover::after{opacity:.8;right:10px}
/* 아바타 */
.lp-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:800;flex-shrink:0;color:var(--surface);font-family:'Paperlogy',sans-serif}
.lp-role{font-size:var(--fs-2xs);font-weight:600;padding:2px 8px;border-radius:var(--r-lg);background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);white-space:nowrap}
.lp-role.admin{background:rgba(251,191,36,.25);color:#fcd34d;border:1px solid rgba(251,191,36,.3)}
/* PIN 단계 */
.lp-pin-step{display:none;flex-direction:column;align-items:center;width:100%;animation:fadeUp .3s ease both}
.lp-pin-step.on{display:flex}
.lp-pin-label{font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.75);text-align:center;margin-bottom:18px;font-family:'Paperlogy',sans-serif}
/* PIN 입력 커스텀 — 로그인 페이지 전용 (어두운 배경) */
#login-page .admin-pin input{width:52px;height:58px;border:2px solid rgba(255,255,255,.18);border-radius:var(--r-lg);font-size:var(--fs-xl);font-weight:800;text-align:center;font-family:'Paperlogy',sans-serif;outline:none;transition:all .18s;-webkit-text-security:disc;background:rgba(255,255,255,.08);color:var(--surface);backdrop-filter:blur(8px)}
#login-page .admin-pin input:focus{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(255,255,255,.08),0 0 20px rgba(255,255,255,.06)}
.lp-err{color:#fca5a5;font-size:var(--fs-xs);min-height:18px;text-align:center;margin:8px 0 2px;font-family:'Paperlogy',sans-serif}
.lp-submit{width:100%;padding:13px;background:linear-gradient(90deg,var(--navy-700),var(--navy-600));color:var(--surface);border:none;border-radius:var(--r-lg);font-size:var(--fs-sm);font-weight:800;cursor:pointer;font-family:'Paperlogy',sans-serif;margin-top:12px;transition:all .18s;box-shadow:0 4px 20px rgba(30,92,168,.45),0 1px 3px rgba(0,0,0,.2)}
.lp-submit:hover{filter:brightness(1.12);box-shadow:0 6px 28px rgba(30,92,168,.6);transform:translateY(-1px)}
.lp-submit:active{transform:translateY(0)}
.lp-back{font-size:var(--fs-xs);color:rgba(255,255,255,.35);background:none;border:none;cursor:pointer;font-family:'Paperlogy',sans-serif;margin-top:12px;padding:4px 8px;transition:.15s;border-radius:var(--r-md)}
.lp-back:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.lp-admin-sep{border:none;border-top:1px solid rgba(255,255,255,.08);margin:20px 0 14px}
.lp-admin-enter{width:100%;background:none;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);color:rgba(255,255,255,.4);font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif;cursor:pointer;padding:9px 12px;transition:.18s;letter-spacing:.2px}
.lp-admin-enter:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.25)}
/* 로그인 페이지 푸터 */
.lp-footer{position:absolute;bottom:24px;font-size:var(--fs-2xs);color:rgba(255,255,255,.2);font-family:'Paperlogy',sans-serif;letter-spacing:.5px}
#lp-quote-wrap{text-align:center;max-width:540px;padding:0 28px;margin-bottom:26px;position:relative;z-index:var(--z-content);animation:cardIn .7s cubic-bezier(.22,.68,0,1.2) both}
#lp-quote-text{font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.82);line-height:1.75;letter-spacing:-.1px;font-style:italic}
#lp-quote-author{font-size:var(--fs-xs);color:rgba(255,255,255,.42);margin-top:9px;font-weight:600;letter-spacing:.3px}
/* ── v3.225: 로그인 Split Command (좌 브랜드 패널 + 우 폼) ── */
#login-page .lp-split{position:relative;z-index:var(--z-content,2);width:864px;max-width:94vw;display:grid;grid-template-columns:1.06fr .94fr;
  border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%);
  box-shadow:0 44px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04) inset;animation:cardIn .55s cubic-bezier(.22,.68,0,1.15) both}
#login-page .lp-brandcol{position:relative;padding:40px 34px 34px;display:flex;flex-direction:column;gap:20px;
  background:linear-gradient(168deg,rgba(70,95,255,.18),rgba(30,92,168,.05) 60%,transparent),rgba(255,255,255,.012);border-right:1px solid rgba(255,255,255,.1)}
/* 좌측: 홈페이지 상단과 동일한 로고 구성(마크 이미지 + Marinex 워드마크) */
#login-page .lp-homelogo{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff;font-family:'Paperlogy',sans-serif;text-decoration:none;cursor:default}
#login-page .lp-homelogo img{width:28px;height:28px;display:block}
#login-page .lp-homelogo .sep-tag{font-family:'Paperlogy',sans-serif;font-size:11px;font-weight:800;letter-spacing:.06em;color:#ff7a3c;border:1px solid rgba(255,106,43,.42);border-radius:999px;padding:2px 9px;margin-left:1px}
/* 좌측 명언(마리넥스 포함 명언은 JS에서 제외) — 크게, 오렌지 라인 */
#login-page .lp-brandcol #lp-quote-wrap{position:static;margin:auto 0;max-width:none;padding:2px 4px 2px 16px;text-align:left;border-left:3px solid rgba(255,122,60,.55);animation:none}
#login-page .lp-brandcol #lp-quote-text{font-size:18px;font-weight:600;line-height:1.55;color:#fff;font-style:normal}
#login-page .lp-brandcol #lp-quote-author{font-size:12px;color:rgba(255,255,255,.55);margin-top:12px;font-style:normal;font-weight:600}
/* 우측 폼 컬럼 = 기존 .lp-card 재활용 (컨테이너가 카드 역할이라 자체 테두리·블러 제거) */
#login-page .lp-split>.lp-card{width:auto;max-width:none;border:none;border-radius:0;background:rgba(255,255,255,.02);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:34px 34px 30px;animation:none}
#login-page .lp-split>.lp-card::before{display:none}
#login-page .lp-split>.lp-card .lp-logo{display:none}   /* 좌측 브랜드가 로고 역할 → 우측 중복 로고 숨김 */
#login-page .lp-split>.lp-card .lp-brand-area{text-align:left;margin-bottom:18px}
@media(max-width:720px){
  #login-page .lp-split{grid-template-columns:1fr;width:400px}
  #login-page .lp-brandcol{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);padding:26px 26px 20px;gap:14px}
  #login-page .lp-tagline{font-size:23px}
  #login-page .lp-lead{max-width:none}
  #login-page .lp-brandcol #lp-quote-wrap{display:none}
  #login-page .lp-flow{gap:6px}
}
/* ── 설정 모달 탭 ── */
.stg-tab-bar{display:flex;gap:2px;flex:1}
.stg-tab-btn{background:none;border:none;border-bottom:2.5px solid transparent;color:var(--gray-400);font-size:var(--fs-sm);font-weight:600;padding:8px 18px 7px;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s;white-space:nowrap}
.stg-tab-btn:hover{color:#2d3748}
.stg-tab-btn.active{color:var(--navy-700);border-bottom-color:var(--navy-700)}
.stg-my-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-lg);margin-bottom:18px}
.stg-my-avatar{font-size:var(--fs-2xl);line-height:1}
.stg-my-name{font-size:var(--fs-md);font-weight:800;color:var(--gray-900);margin-bottom:2px}
.stg-my-role{font-size:var(--fs-2xs);color:var(--gray-500)}
/* ── 설정 모달 개선 ── */
.stg-upload-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stg-upload-card{border:1.5px solid var(--gray-200);border-radius:var(--r-xl);padding:18px 16px;background:var(--surface);display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,.05);transition:.2s}
.stg-upload-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);border-color:var(--blue-300);transform:translateY(-2px)}
.stg-upload-card-top{display:flex;align-items:center;gap:10px}
.stg-upload-card-icon{font-size:var(--fs-xl);line-height:1}
.stg-upload-card-title{font-size:var(--fs-sm);font-weight:800;color:var(--navy-800);line-height:1.35}
.stg-upload-card-stat{font-size:var(--fs-2xs);color:var(--gray-500);line-height:1.65;min-height:44px;padding:9px 11px;background:var(--gray-50);border-radius:var(--r-md);border:1px solid #f0f4f8;flex:1}
.stg-upload-card-btn{padding:10px 0;background:linear-gradient(135deg,var(--navy-800),var(--navy-600));color:var(--surface);border:none;border-radius:var(--r-lg);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s;text-align:center;width:100%}
.stg-upload-card-btn:hover{filter:brightness(1.12)}
.stg-sync-bar{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--navy-50);border:1.5px solid var(--blue-border);border-radius:var(--r-lg);margin-top:4px}
.stg-sync-bar-txt{font-size:var(--fs-xs);color:var(--blue-text);font-weight:600}
.stg-sync-bar-btn{padding:8px 18px;background:var(--navy-600);color:var(--surface);border:none;border-radius:var(--r-md);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s}
.stg-sync-bar-btn:hover{filter:brightness(1.1)}
.stg-tgt-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-lg)}
.stg-tgt-bar label{font-size:var(--fs-xs);font-weight:600;color:var(--gray-700)}
.stg-tgt-bar input{width:120px;padding:6px 10px;border:1.5px solid var(--gray-200);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;font-family:'Paperlogy',sans-serif;outline:none;text-align:right;transition:.15s}
.stg-tgt-bar input:focus{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.stg-tgt-bar span{font-size:var(--fs-xs);color:var(--gray-500);font-weight:600}
.stg-card-sect{background:var(--gray-50);border:1px solid #edf2f7;border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.stg-card-sect .stg-sect-title{margin-bottom:2px}
.stg-card-sect .stg-sect-desc{margin-bottom:2px}
/* ── 게시판 ── */
#tab-board{display:none;height:calc(100vh - 56px);overflow:hidden;padding:0}
#tab-board.active{display:flex}
.bb-layout{display:flex;width:100%;height:100%;overflow:hidden}
.bb-sidebar{width:210px;min-width:190px;background:var(--gray-50);border-right:1.5px solid var(--gray-200);display:flex;flex-direction:column;overflow:hidden}
.bb-sidebar-head{padding:14px 14px 10px;border-bottom:1.5px solid #e8edf2}
.bb-sidebar-title{font-size:var(--fs-sm);font-weight:800;color:var(--navy-800);font-family:'Paperlogy',sans-serif;letter-spacing:-.3px}
.bb-sidebar-add{margin-top:8px;width:100%;padding:7px 0;background:linear-gradient(135deg,var(--navy-800),var(--navy-600));color:var(--surface);border:none;border-radius:var(--r-md);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s}
.bb-sidebar-add:hover{filter:brightness(1.1)}
.bb-board-list{flex:1;overflow-y:auto;padding:6px 0}
.bb-board-item{display:flex;align-items:center;gap:7px;padding:9px 14px;cursor:pointer;transition:.13s;position:relative}
.bb-board-item:hover{background:#eef2f8}
.bb-board-item.active{background:#e8f0fe}
.bb-board-item.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--navy-800);border-radius:0 3px 3px 0}
.bb-board-emoji{font-size:var(--fs-sm);flex-shrink:0}
.bb-board-name{font-size:var(--fs-xs);color:var(--gray-700);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-board-item.active .bb-board-name{color:var(--navy-800);font-weight:800}
.bb-board-cfg{background:none;border:none;font-size:var(--fs-2xs);color:var(--gray-400);cursor:pointer;padding:2px 4px;border-radius:var(--r-sm);opacity:0;transition:.12s}
.bb-board-item:hover .bb-board-cfg{opacity:1}
.bb-board-cfg:hover{background:var(--blue-bg);color:#1e40af}
.bb-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.bb-main-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1.5px solid var(--gray-200);flex-shrink:0}
.bb-main-title{font-size:var(--fs-md);font-weight:800;color:var(--navy-800);font-family:'Paperlogy',sans-serif}
.bb-write-btn{padding:7px 15px;background:linear-gradient(135deg,var(--navy-800),var(--navy-600));color:var(--surface);border:none;border-radius:var(--r-md);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s}
.bb-write-btn:hover{filter:brightness(1.1)}
.bb-main-search{padding:9px 18px;border-bottom:1px solid #f0f4f8;flex-shrink:0}
.bb-search-inp{width:100%;box-sizing:border-box;padding:7px 13px;border:1.5px solid var(--gray-200);border-radius:var(--r-md);font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif;outline:none;transition:.15s}
.bb-search-inp:focus{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.bb-main-body{flex:1;overflow-y:auto}
.bb-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.bb-table thead th{background:var(--gray-50);color:var(--gray-500);font-size:var(--fs-2xs);font-weight:600;padding:8px 12px;text-align:left;border-bottom:1.5px solid var(--gray-200);white-space:nowrap;letter-spacing:.3px}
.bb-table thead th.th-num{width:60px;text-align:center}
.bb-table thead th.th-author{width:90px}
.bb-table thead th.th-date{width:72px;text-align:center}
.bb-table thead th.th-view{width:48px;text-align:center}
.bb-table tbody tr{border-bottom:1px solid #f0f4f8;cursor:pointer;transition:.1s}
.bb-table tbody tr:hover{background:#f5f8ff}
.bb-table tbody tr.bb-tr-pin{background:#fffbeb}
.bb-table tbody tr.bb-tr-pin:hover{background:var(--yellow-bg)}
.bb-table td{padding:9px 12px;vertical-align:middle}
.bb-td-num{text-align:center;color:var(--gray-400);font-size:var(--fs-xs);font-weight:600}
.bb-td-pin-badge{display:inline-block;background:var(--yellow);color:var(--surface);font-size:var(--fs-2xs);font-weight:800;padding:2px 7px;border-radius:var(--r-sm)}
.bb-td-title{color:#1e293b;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}
.bb-td-cmt{font-size:var(--fs-2xs);color:var(--navy-600);font-weight:600;margin-left:4px}
.bb-td-author{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--gray-700);font-weight:600;white-space:nowrap}
.bb-td-date{text-align:center;font-size:var(--fs-2xs);color:var(--gray-400);white-space:nowrap}
.bb-td-view{text-align:center;font-size:var(--fs-2xs);color:var(--gray-400)}
.bb-empty{text-align:center;padding:50px 20px;color:var(--gray-400);font-size:var(--fs-sm)}
#bb-detail-view{display:none;flex-direction:column;height:100%;overflow:hidden}
#bb-detail-view.on{display:flex}
.bb-back{display:flex;align-items:center;gap:6px;background:var(--gray-50);border:none;border-bottom:1px solid #f0f4f8;font-size:var(--fs-xs);font-weight:600;color:var(--gray-500);cursor:pointer;padding:11px 18px;font-family:'Paperlogy',sans-serif;transition:.15s;flex-shrink:0;width:100%;box-sizing:border-box}
.bb-back:hover{background:#eef2f8;color:var(--navy-800)}
.bb-detail-scroll{flex:1;overflow-y:auto;padding:20px 26px}
.bb-detail-title{font-size:var(--fs-lg);font-weight:800;color:var(--navy-800);line-height:1.4;margin-bottom:12px;font-family:'Paperlogy',sans-serif}
.bb-detail-meta{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--gray-500);font-weight:600;padding-bottom:14px;border-bottom:1.5px solid #f0f4f8;margin-bottom:18px;flex-wrap:wrap}
.bb-detail-body{font-size:var(--fs-sm);color:var(--gray-700);line-height:1.85;white-space:pre-wrap;word-break:break-word;min-height:100px}
.bb-detail-divider{border:none;border-top:1.5px solid #f0f4f8;margin:22px 0}
.bb-cmt-title{font-size:var(--fs-sm);font-weight:800;color:var(--gray-700);margin-bottom:12px}
.bb-cmt-form{display:flex;gap:8px;margin-bottom:16px}
.bb-cmt-inp{flex:1;padding:9px 13px;border:1.5px solid var(--gray-200);border-radius:var(--r-lg);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;outline:none;resize:none;min-height:42px;transition:.15s}
.bb-cmt-inp:focus{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.bb-cmt-submit{padding:9px 16px;background:var(--navy-800);color:var(--surface);border:none;border-radius:var(--r-lg);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;white-space:nowrap;align-self:flex-end;transition:.15s}
.bb-cmt-submit:hover{filter:brightness(1.12)}
.bb-cmt-list{display:flex;flex-direction:column;gap:8px}
.bb-cmt{background:var(--gray-50);border-radius:var(--r-lg);padding:11px 13px;position:relative}
.bb-cmt-meta{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.bb-cmt-avatar{font-size:var(--fs-md);line-height:1}
.bb-cmt-name{font-size:var(--fs-xs);font-weight:600;color:var(--gray-700)}
.bb-cmt-time{font-size:var(--fs-2xs);color:var(--gray-400);margin-left:auto}
.bb-cmt-body{font-size:var(--fs-sm);color:#4b5563;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.bb-del-btn{background:none;border:none;font-size:var(--fs-2xs);color:var(--gray-400);cursor:pointer;padding:2px 6px;border-radius:var(--r-md);transition:.12s;font-family:'Paperlogy',sans-serif}
.bb-del-btn:hover{background:var(--red-bg);color:var(--red-strong)}
/* v2.346 D3: bb-write 통합모달(MxDialog). 카드=투명(내부 .bb-modal-box가 실제 박스), 본문 패딩0. 최대화=dialog.mxd-bbmax */
dialog.mxd-bbwrite .mxd-card{width:auto;max-width:none;background:transparent;box-shadow:none;overflow:visible}
dialog.mxd-bbwrite .mxd-body{padding:0;overflow:visible}
dialog.mxd-bbmax .mxd-card{width:96vw;height:94vh}
/* v2.345 D3: #bb-mgmt-modal/.bb-mgmt-box 죽은 CSS 제거(MxDialog 이전). .bb-modal-box는 bb-write가 아직 사용해 유지 */
.bb-modal-box{background:var(--surface);border-radius:var(--r-xl);width:1180px;max-width:96vw;max-height:92vh;overflow-y:auto;padding:26px 30px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:adminSlide .22s cubic-bezier(.34,1.56,.64,1)}
.bb-modal-title{font-size:var(--fs-md);font-weight:800;color:var(--navy-800);margin-bottom:16px;font-family:'Paperlogy',sans-serif}
.bb-modal-inp{width:100%;box-sizing:border-box;padding:9px 13px;border:1.5px solid var(--gray-200);border-radius:var(--r-lg);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;outline:none;transition:.15s;margin-bottom:9px}
.bb-modal-inp:focus{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.bb-modal-sel{width:100%;box-sizing:border-box;padding:9px 13px;border:1.5px solid var(--gray-200);border-radius:var(--r-lg);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;outline:none;transition:.15s;margin-bottom:9px;background:var(--surface);cursor:pointer}
.bb-modal-sel:focus{border-color:var(--navy-700)}
.bb-modal-body{width:100%;box-sizing:border-box;padding:9px 13px;border:1.5px solid var(--gray-200);border-radius:var(--r-lg);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;outline:none;resize:vertical;min-height:180px;transition:.15s;margin-bottom:12px;line-height:1.7}
.bb-modal-body:focus{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.bb-modal-footer{display:flex;gap:8px;justify-content:flex-end}
/* v1.651: 게시판 작성 모달 — 최대화 / 드래그오버 */
.bb-attach-zone.bb-dragover{border-color:var(--navy-600)!important;background:rgba(30,92,168,.07)!important}
dialog.mxd-bbmax .bb-modal-box{width:100%!important;max-width:100%!important;height:100%;max-height:100%;display:flex;flex-direction:column;overflow-y:auto}
dialog.mxd-bbmax #bb-post-body{flex:1;min-height:240px}
.bb-modal-cancel{padding:9px 18px;background:var(--gray-100);color:var(--gray-500);border:none;border-radius:var(--r-lg);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif}
/* v1.882: 게시판 서식 툴바 + contenteditable 에디터 */
.bb-toolbar{display:flex;flex-wrap:wrap;gap:3px;align-items:center;padding:6px;background:var(--gray-50);border:1px solid var(--gray-200);border-bottom:none;border-radius:var(--r-md) 8px 0 0}
.bb-toolbar button,.bb-toolbar select{height:28px;min-width:28px;padding:0 7px;border:1px solid var(--gray-200);background:var(--surface);border-radius:6px;cursor:pointer;font-size:13px;color:var(--gray-700);font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:3px}
.bb-toolbar button:hover,.bb-toolbar select:hover{background:#eef4ff;border-color:#c7d8f0}
#bb-post-body[contenteditable]{min-height:340px;max-height:60vh;overflow-y:auto;border-radius:0 0 8px 8px;line-height:1.65;text-align:left;white-space:normal}
#bb-post-body[contenteditable]:empty:before{content:attr(data-ph);color:var(--gray-400);pointer-events:none}
#bb-post-body[contenteditable] img{max-width:100%;border-radius:var(--r-md);margin:6px 0}
#bb-post-body[contenteditable] table,.bb-detail-body table{border-collapse:collapse;margin:8px 0}
#bb-post-body[contenteditable] td,#bb-post-body[contenteditable] th,.bb-detail-body td,.bb-detail-body th{border:1px solid var(--gray-400);padding:5px 9px;min-width:50px}
.bb-modal-submit{padding:9px 22px;background:linear-gradient(135deg,var(--navy-800),var(--navy-600));color:var(--surface);border:none;border-radius:var(--r-lg);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s}
.bb-modal-submit:hover{filter:brightness(1.1)}
.bb-mgmt-board-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:var(--r-lg);margin-bottom:7px}
.bb-mgmt-board-name{flex:1;font-size:var(--fs-sm);font-weight:600;color:var(--navy-800)}
.bb-mgmt-del{background:none;border:none;font-size:var(--fs-2xs);color:var(--gray-400);cursor:pointer;padding:3px 8px;border-radius:var(--r-md);transition:.12s;font-family:'Paperlogy',sans-serif}
.bb-mgmt-del:hover{background:var(--red-bg);color:var(--red-strong)}
/* 이모지 피커 */
.stg-emoji-current{font-size:52px;text-align:center;padding:12px 0 6px;line-height:1;cursor:default;user-select:none}
.stg-emoji-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:4px}
.stg-emoji-btn{font-size:var(--fs-lg);padding:7px 4px;border:2px solid transparent;border-radius:var(--r-md);background:none;cursor:pointer;transition:.12s;line-height:1;text-align:center}
.stg-emoji-btn:hover{background:#f0f4f8;border-color:var(--gray-200);transform:scale(1.15)}
.stg-emoji-btn.sel{background:var(--navy-50);border-color:var(--blue-300);box-shadow:0 0 0 2px rgba(59,130,246,.15)}
/* ── 로그인 / 출퇴근 ── */
#login-area{display:flex;align-items:center;gap:6px;flex-shrink:0}
#login-btn{font-size:var(--fs-2xs);font-weight:600;padding:5px 14px;border-radius:var(--r-xl);border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:var(--surface);cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s;white-space:nowrap}
#login-btn:hover{background:rgba(255,255,255,.22)}
.hdr-user-wrap{display:none;align-items:center;gap:8px}
.hdr-user-wrap.on{display:flex}
/* v1.350: M-캘린더 헤더 빠른 진입 */
#hdr-mcal-btn{display:none;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;padding:6px 12px;border-radius:var(--r-xl);border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:var(--surface);cursor:pointer;font-family:'Paperlogy',sans-serif;white-space:nowrap;margin-right:6px}
#hdr-mcal-btn:hover{background:rgba(255,255,255,.28)}
body.logged-in #hdr-mcal-btn{display:inline-flex}

/* v1.355: 메일 unread 배지 */
.hdr-unread-badge{display:inline-block;background:#ef4444;color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center;margin-left:4px;line-height:1.4}

/* v1.355: 메일 모듈 3분할 레이아웃 */
#tab-mail{display:none;height:calc(100vh - 130px);min-height:560px}
#tab-mail.active{display:flex}
/* v1.406: 사이드바 컴팩트화 — 좌측 여백 축소, 폭 220px, 패딩 8/4 */
.mail-app{display:grid;grid-template-columns:220px var(--mail-listw,410px) 1fr;gap:0;width:100%;height:100%;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--gray-200)}
.mail-list-pane{position:relative}
.mail-list-resizer{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:var(--z-raised)}
.mail-list-resizer:hover,.mail-list-resizer.drag{background:linear-gradient(90deg,transparent,rgba(14,116,144,.28),transparent)}
/* v2.169: 메일 풀블리드 — 사이드바와 밀착 일체화 (여백·카드 테두리·하단공백 제거) */
body.mail-active .main{padding:0;max-width:none}
body.mail-active #tab-mail{height:calc(100vh - 56px)}
body.mail-active .mail-app{border:none;border-radius:0;border-left:1px solid var(--sb-line)}
/* v2.168/169: 메일 폴더 레일 — 사이드바와 동일 테마 + 한 톤 밝게(위계) */
.mail-sidebar{background:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.045)),var(--sb-bg);border-right:1px solid var(--sb-line);overflow-y:auto;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.mail-list-pane{border-right:1px solid var(--gray-200);overflow-y:auto;background:var(--surface)}
.mail-detail-pane{background:var(--surface);overflow-y:auto;padding:0}
.mail-sidebar-section{font-size:10px;font-weight:800;color:var(--sb-sec);text-transform:uppercase;padding:4px 8px;margin-top:6px;letter-spacing:.4px}
/* v1.406: 폴더 버튼 패딩 7/12 → 5/8, 좌측 들여쓰기 좁게 */
.mail-folder-btn{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;border-radius:var(--r-sm);background:transparent;border:none;color:var(--sb-fg);font-size:var(--fs-xs);font-weight:600;cursor:pointer;text-align:left;font-family:inherit;width:100%}
.mail-folder-btn:hover{background:var(--sb-hover);color:var(--sb-fg-h)}
.mail-folder-btn.active{background:var(--sb-hover);color:var(--sb-on);font-weight:800;box-shadow:inset 3px 0 0 var(--sb-acc)}
.mail-folder-btn .badge{background:var(--sb-hover);color:var(--sb-subfg);font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--r-md);min-width:18px;text-align:center}
.mail-folder-btn.active .badge{background:var(--sb-acc);color:#fff}
/* v2.816: 드래그앤드롭 메일 이동 시각 피드백 — 드래그 중인 행 + 드롭 대상 폴더 강조 */
.mail-list-row.mail-dragging{opacity:.45}
.mail-folder-btn.mail-drop-target{background:var(--mx-acc-teal,#0d9488)!important;color:#fff!important;box-shadow:inset 3px 0 0 #fff, 0 0 0 2px var(--mx-acc-teal,#0d9488);outline:2px dashed #fff;outline-offset:-4px}
.mail-drop-target{background:rgba(13,148,136,.14)!important;outline:2px dashed var(--mx-acc-teal,#0d9488);outline-offset:-3px}
/* v1.406: 계정 그룹 헤더 — 활성 계정 좌측 강조 바 */
.mail-folder-btn.mail-acc-active{box-shadow:inset 3px 0 0 var(--sb-acc)}
/* v1.406: 드래그 hover 시 드롭 가능 표시 */
.mail-folder-btn.mail-drop-target{background:#dbeafe!important;box-shadow:inset 0 0 0 2px #3b82f6;color:#1e40af}
.mail-list-row[draggable="true"]{user-select:none}
.mail-list-row.mail-dragging{opacity:.4}
.mail-compose-btn{margin:0 6px 8px;padding:10px 14px;border-radius:var(--r-md);background:var(--sb-acc);color:#fff;border:none;font-size:var(--fs-xs);font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit}
.mail-compose-btn:hover{filter:brightness(1.1)}
/* v1.450: 영업 인텔리전스 정렬 토글 (기본/매출↓/매출↑) */
.si-sort-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--gray-300);border-radius:var(--r-md);padding:2px;gap:2px}
.si-sort-btn{padding:5px 10px;border:none;background:transparent;color:var(--gray-500);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;border-radius:var(--r-sm);font-family:inherit;transition:.15s;letter-spacing:.2px}
.si-sort-btn:hover{color:var(--navy-700);background:var(--gray-50)}
.si-sort-btn.on{background:var(--navy-700);color:var(--surface)}

/* v1.450: 첨부 chip 클릭 시 동작 선택 팝업 (새창 열기 / 다른 이름으로 저장) */
.mail-attach-popup{position:fixed;z-index:var(--z-overlay-top);background:var(--surface);border:1px solid var(--gray-300);border-radius:var(--r-md);box-shadow:0 10px 32px rgba(15,23,42,.18);padding:4px;display:flex;flex-direction:column;gap:2px;min-width:180px;animation:mailAttachPopFade .12s ease-out}
.mail-attach-popup button{display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:none;color:var(--gray-700);font-size:var(--fs-xs);font-weight:600;cursor:pointer;border-radius:var(--r-sm);font-family:inherit;text-align:left;transition:.1s}
.mail-attach-popup button:hover{background:var(--navy-700);color:var(--surface)}
.mail-attach-popup .ti{font-size:14px;flex-shrink:0}
@keyframes mailAttachPopFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* v1.450: 첨부 chip — 확장자 아이콘 + 파일명 + 크기 */
.mail-attach-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:var(--blue-bg);color:var(--blue-text);border:1px solid var(--blue-border);border-radius:var(--r-md);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;font-family:inherit;max-width:280px;transition:.15s}
.mail-attach-chip:hover{background:var(--blue-text);color:var(--surface);border-color:var(--blue-text)}
.mail-attach-chip .ti{font-size:14px;flex-shrink:0}
.mail-attach-chip .mail-attach-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}

/* v1.411: 검색 + 새로받기 가로 배치 (메일 모듈 상단 툴바) */
.mail-search-wrap{padding:10px 12px;border-bottom:1px solid var(--gray-200);background:var(--gray-50);display:flex;align-items:center;gap:8px}
.mail-search-inp{flex:1;min-width:0;padding:8px 12px;border:1px solid var(--gray-300);border-radius:var(--r-md);font-size:var(--fs-xs);background:var(--surface);font-family:inherit}
.mail-toolbar-poll-btn{flex-shrink:0;padding:8px 12px;border:1px solid var(--navy-700);background:var(--navy-700);color:var(--surface);border-radius:var(--r-md);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:.15s}
.mail-toolbar-poll-btn:hover{background:var(--navy-800);border-color:var(--navy-800)}
.mail-toolbar-poll-btn:disabled{opacity:.55;cursor:wait}
/* v2.167: 메일 리스트 — Compact Power(밀집 단일행). 단일클릭=미리보기 / 더블클릭=모달 */
.mail-list-row{display:flex;align-items:center;gap:7px;padding:7px 12px;border-bottom:1px solid var(--gray-100);cursor:pointer;font-size:11.5px;line-height:1.3;transition:background .12s;white-space:nowrap}
.mail-list-row:hover{background:#f0f9ff}
.mail-list-row.unread{background:#fbfdff}
.mail-list-row.active{background:#e0f2fe;box-shadow:inset 3px 0 0 var(--sb-acc)}
.mail-list-cb{flex:none;width:14px;height:14px;cursor:pointer;accent-color:var(--sb-acc)}
.mail-list-dot{flex:none;width:6px;height:6px;border-radius:99px;background:var(--sb-acc);visibility:hidden}
.mail-list-row.unread .mail-list-dot{visibility:visible}
.mail-list-main{flex:1;min-width:0;display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap}
.mail-list-from{flex:none;width:104px;font-size:11.5px;font-weight:600;color:var(--navy-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-list-row.unread .mail-list-from{font-weight:800}
.mail-list-mid{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gray-500)}
.mail-list-subj{color:var(--navy-800);font-weight:600}
.mail-list-row.unread .mail-list-subj{font-weight:800}
.mail-list-snip{color:var(--gray-500)}
.mail-list-row.unread .mail-list-mid{color:var(--gray-600)}
.mail-list-sep{color:var(--gray-300);font-weight:400}
/* v2.211: 아웃룩식 넓게 보기 — 발신/제목/내용 다줄 */
.mail-app.ml-cozy .mail-list-row{align-items:flex-start;padding:9px 12px}
.mail-app.ml-cozy .mail-list-main{flex-direction:column;align-items:stretch;gap:3px;white-space:normal}
.mail-app.ml-cozy .mail-list-from{width:auto;max-width:100%;font-size:12px}
.mail-app.ml-cozy .mail-list-mid{white-space:normal;overflow:visible;text-overflow:clip}
.mail-app.ml-cozy .mail-list-subj{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-app.ml-cozy .mail-list-sep{display:none}
.mail-app.ml-cozy .mail-list-snip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;font-size:11px;line-height:1.45;color:var(--gray-500)}
.mail-app.ml-cozy .mail-list-time{align-self:flex-start;margin-top:1px}
.mail-list-time{flex:none;font-size:10px;color:var(--gray-400);white-space:nowrap;min-width:40px;text-align:right}
.mail-list-ico{flex:none;font-size:12px}
.mail-star{flex:none;cursor:pointer;background:none;border:none;font-size:13px;color:var(--gray-300);padding:0;line-height:1}
.mail-star.starred{color:#f59e0b}
.mail-detail-hd{padding:18px 22px;border-bottom:1px solid var(--gray-200)}
.mail-detail-subject{font-size:var(--fs-md);font-weight:800;color:var(--navy-800);margin-bottom:8px}
.mail-detail-meta{font-size:var(--fs-2xs);color:var(--gray-600);display:flex;flex-direction:column;gap:3px}
.mail-detail-body{padding:0}
.mail-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--gray-400);font-size:var(--fs-sm);flex-direction:column;gap:10px}
@media (max-width: 1100px){
  .mail-app{grid-template-columns:200px 1fr 0}
  .mail-detail-pane{display:none}
  .mail-detail-pane.open{display:block;position:fixed;inset:0;background:var(--surface);z-index:var(--z-modal)}
}
#hdr-user-btn{font-size:var(--fs-xs);font-weight:600;padding:6px 14px;border-radius:var(--r-xl);border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:var(--surface);cursor:pointer;font-family:'Paperlogy',sans-serif;white-space:nowrap;display:flex;align-items:center;gap:5px}
#hdr-user-btn:hover{background:rgba(255,255,255,.25)}
#hdr-clocktime{display:none}
/* 사용자 드롭다운 */
.usr-menu-wrap{position:relative;}
.usr-dropdown{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border-radius:var(--r-lg);box-shadow:0 10px 40px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.06);padding:6px;min-width:176px;z-index:500;}
.usr-dropdown.open{display:block;}
.usr-dd-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border:none;background:none;font-size:var(--fs-xs);font-weight:600;color:var(--gray-700);cursor:pointer;border-radius:var(--r-md);text-align:left;font-family:'Paperlogy',sans-serif;white-space:nowrap;transition:.1s;}
.usr-dd-item:hover{background:#f3f4f6;}
.usr-dd-item.danger{color:var(--red);}
.usr-dd-item:disabled{opacity:.4;cursor:default;}
.usr-dd-sep{border:none;border-top:1px solid var(--gray-100);margin:4px 0;}
.usr-dd-status{padding:4px 12px 6px;font-size:var(--fs-2xs);color:var(--gray-400);font-weight:600;border-bottom:1px solid var(--gray-100);margin-bottom:4px;}
/* 팀원 편집 모달 */
/* v2.580 U1: 99999!important → 모달 대역(9500). 메일작성(14000) 최상위 원칙 위반·--z-print(99999) 충돌 해소 */
#usr-edit-backdrop, #usr-add-backdrop{display:flex;position:fixed;inset:0;z-index:9500;background:rgba(15,23,42,0);visibility:hidden;pointer-events:none;transition:background 0.25s, visibility 0.25s;backdrop-filter:blur(2px);align-items:center;justify-content:center;}
#usr-edit-backdrop.open, #usr-add-backdrop.open{visibility:visible;pointer-events:auto;background:rgba(15,23,42,0.35);}
.usr-edit-box{position:relative;z-index:12001;display:flex;flex-direction:column;transition:transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s;transform:scale(0.95);opacity:0;box-sizing:border-box;}
#usr-edit-backdrop.open .usr-edit-box, #usr-add-backdrop.open .usr-edit-box{transform:scale(1);opacity:1;}

/* ── 직원관리 리빌딩 스타일 ── */
.stg-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
  margin-bottom: 20px;
}
.stg-user-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.stg-user-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  border-color: var(--navy-300);
}
.stg-user-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.stg-user-card-emoji {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.stg-user-card-status {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.stg-user-card-status.active {
  background: #dcfce7;
  color: #15803d;
}
.stg-user-card-status.off {
  background: var(--gray-100);
  color: var(--gray-500);
}
.stg-user-card-name {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--navy-800);
}
.stg-user-card-key {
  font-family: monospace;
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 1px;
}
.stg-user-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
  flex: 1;
}
.stg-user-card-kpi {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--gray-100);
  margin-top: 12px;
  padding-top: 8px;
}
.stg-user-card-kpi-item {
  text-align: center;
  flex: 1;
}
.stg-user-card-kpi-num {
  font-weight: 800;
  font-size: var(--fs-xs);
  color: var(--navy-700);
}
.stg-user-card-kpi-lbl {
  font-size: 9px;
  color: var(--gray-400);
}
.stg-user-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
}
.stg-user-card-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  transition: color 0.15s;
}
.stg-user-card-btn:hover {
  color: var(--navy-700);
}
.stg-user-card-btn.del:hover {
  color: var(--red-text);
}

/* ── 직원관리 필터 & 헤더 ── */
.stg-user-summary-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.stg-user-summary-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: var(--fs-2xs);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 6px;
}
.stg-user-summary-card b {
  font-size: var(--fs-xs);
  color: var(--navy-800);
  font-weight: 800;
}
.stg-user-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.stg-user-filter-btn {
  background: none;
  border: 1px solid transparent;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--gray-500);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.stg-user-filter-btn:hover {
  background: var(--gray-50);
  color: var(--gray-700);
}
.stg-user-filter-btn.active {
  background: var(--navy-50);
  border-color: var(--blue-border);
  color: var(--navy-700);
}
.usr-edit-box{background:var(--surface);border-radius:var(--r-xl);padding:26px 30px;width:760px;max-width:95vw;min-height:84vh;max-height:92vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.22);} /* v1.882: 모달 세로 꽉차게(min-height 84vh)+폭 760px — 권한 트리 가시성 */
.usr-edit-title{font-size:var(--fs-md);font-weight:800;color:var(--navy-800);margin-bottom:16px;}
.usr-edit-row{margin-bottom:10px;}
.usr-edit-label{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);margin-bottom:3px;display:block;}
/* 로그인 모달 */
#login-backdrop{display:none;position:fixed;inset:0;background:rgba(10,18,40,.55);backdrop-filter:blur(4px);z-index:3200;align-items:center;justify-content:center}
#login-backdrop.open{display:flex}
#login-box{background:var(--surface);border-radius:var(--r-xl);padding:32px 36px;width:340px;max-width:92vw;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:adminSlide .25s cubic-bezier(.34,1.56,.64,1)}
.login-title{font-size:var(--fs-md);font-weight:800;color:var(--gray-900);margin-bottom:4px;text-align:center}
.login-sub{font-size:var(--fs-xs);color:var(--gray-400);margin-bottom:20px;text-align:center}
.login-user-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;max-height:280px;overflow-y:auto}
.login-user-btn{padding:11px 14px;border:2px solid var(--gray-200);border-radius:var(--r-lg);background:var(--gray-50);cursor:pointer;text-align:left;font-size:var(--fs-sm);font-weight:600;color:#2d3748;font-family:'Paperlogy',sans-serif;transition:.15s;display:flex;align-items:center;gap:10px}
.login-user-btn:hover{border-color:var(--navy-700);background:#eef4ff;color:var(--navy-700)}
.lu-role{font-size:var(--fs-2xs);font-weight:600;padding:2px 7px;border-radius:var(--r-lg);background:var(--gray-200);color:var(--gray-500);margin-left:auto}
.lu-role.admin{background:var(--yellow-bg);color:var(--yellow-text)}
.login-pin-step{display:none;flex-direction:column;align-items:center}
.login-pin-step.on{display:flex}
.login-back{font-size:var(--fs-xs);color:var(--gray-400);background:none;border:none;cursor:pointer;text-decoration:underline;font-family:'Paperlogy',sans-serif;margin-top:8px}
/* 내 현황 */
.my-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:700px){.my-kpi-grid{grid-template-columns:repeat(2,1fr)}}
.my-kpi{background:var(--surface);border-radius:var(--r-xl);padding:20px;border:1px solid var(--brd);box-shadow:var(--shadow-sm);text-align:center;transition:transform .18s,box-shadow .18s}
.my-kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.my-kpi-val{font-size:var(--fs-xl);font-weight:800;color:var(--gray-900);line-height:1;margin-bottom:7px}
.my-kpi-lbl{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);letter-spacing:.4px;text-transform:uppercase}
.my-attend-row{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--green-50),#ecfdf5);border:1px solid #6ee7b7;border-radius:var(--r-lg);padding:14px 18px;margin-bottom:18px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(16,185,129,.08)}
.login-required{text-align:center;padding:60px 20px;color:var(--gray-400)}
.login-required .lr-icon{font-size:var(--fs-hero);margin-bottom:12px}
.login-required .lr-title{font-size:var(--fs-md);font-weight:600;color:var(--gray-600);margin-bottom:6px}
.login-required button{margin-top:16px;padding:10px 24px;background:var(--navy-700);color:var(--surface);border:none;border-radius:var(--r-lg);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif}
/* 관리자 좌우 레이아웃 */
.adm-layout{display:flex;flex:1;min-height:0;overflow:hidden;}
.adm-nav{width:152px;flex-shrink:0;border-right:1px solid var(--gray-200);padding:12px 0 20px;background:var(--gray-50);overflow-y:auto;}
.adm-nav-group{margin-bottom:18px;}
.adm-nav-label{font-size:var(--fs-2xs);font-weight:800;color:var(--gray-400);letter-spacing:.8px;text-transform:uppercase;padding:0 12px 4px;display:block;}
.adm-nav-item{display:flex;align-items:center;gap:6px;width:100%;padding:7px 12px;border:none;background:none;font-size:var(--fs-xs);font-weight:600;color:var(--gray-600);cursor:pointer;text-align:left;transition:.1s;font-family:'Paperlogy',sans-serif;white-space:nowrap;}
.adm-nav-item:hover{background:var(--navy-50);color:var(--navy-800);}
.adm-nav-item.active{background:var(--navy-50);color:var(--navy-800);font-weight:800;box-shadow:inset -2px 0 0 var(--navy-700);}
.adm-content{flex:1;padding:20px 24px;min-width:0;min-height:0;overflow-y:auto;}
/* 팀 권한 프리셋 */
.perm-preset-box{background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:4px;}
.perm-preset-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.adm-pane{display:none;}
.adm-pane.active{display:block;}
/* 권한 트리 */
.perm-user-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:10px;}
.perm-user-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.perm-user-nm{font-size:var(--fs-sm);font-weight:800;color:var(--navy-800);flex:1;}
.perm-user-role{font-size:var(--fs-2xs);font-weight:600;padding:2px 7px;border-radius:var(--r-md);background:var(--gray-200);color:var(--gray-500)}
.perm-user-role.admin{background:var(--yellow-bg);color:var(--yellow-text)}
.perm-all-badge{font-size:var(--fs-2xs);background:var(--green-bg-soft);color:var(--green-text-dark);border-radius:var(--r-md);padding:2px 8px;font-weight:600;}
.perm-tree{display:flex;flex-direction:column;gap:5px;}
.perm-main-row{border:1px solid var(--gray-200);border-radius:var(--r-md);overflow:hidden;}
.perm-main-label{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--gray-50);font-size:var(--fs-xs);font-weight:600;color:var(--navy-800);cursor:pointer;user-select:none;}
.perm-main-label input{accent-color:var(--navy-700);width:14px;height:14px;flex-shrink:0;}
.perm-sub-list{padding:5px 8px 8px 30px;display:flex;flex-wrap:wrap;gap:4px 16px;}
.perm-sub-label{display:flex;align-items:center;gap:5px;font-size:var(--fs-2xs);color:var(--gray-600);cursor:pointer;user-select:none;min-width:120px;}
.perm-sub-label input{accent-color:var(--navy-700);width:13px;height:13px;flex-shrink:0;}
.perm-cbs{display:flex;gap:14px;flex-wrap:wrap}
.perm-label{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;color:var(--gray-600);cursor:pointer;user-select:none;padding:4px 8px;border-radius:var(--r-md);border:1.5px solid var(--gray-200);background:var(--surface);transition:.12s}
.perm-label:hover{border-color:var(--blue-300);background:var(--navy-50)}
.perm-label input[type=checkbox]{width:14px;height:14px;accent-color:var(--navy-700);cursor:pointer;flex-shrink:0}
.perm-label.checked{border-color:var(--navy-700);background:#eef4ff;color:var(--navy-700)}
/* 팀원 관리 */
.stg-user-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-md);background:var(--gray-50);border:1px solid var(--gray-200);font-size:var(--fs-xs);transition:border-color 0.15s, background 0.15s;cursor:pointer}
.stg-user-row:hover{border-color:var(--navy-300);background:var(--navy-50)}
.stg-user-name{font-weight:600;color:#2d3748;min-width:70px}
.stg-user-key{font-size:var(--fs-2xs);color:var(--gray-500);flex:1}
.stg-user-del{background:none;border:none;cursor:pointer;color:#e53e3e;font-size:var(--fs-sm);padding:0 4px;flex-shrink:0}
.stg-3col{display:grid;grid-template-columns:1fr 1fr 80px;gap:6px;margin-bottom:8px}
.stg-user-list{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;max-height:600px;overflow-y:auto}
/* ── 설정 내 목표 설정 ── */
.stg-ptgt-row{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:8px}
.stg-ptgt-name{font-size:var(--fs-sm);font-weight:800;color:var(--gray-900)}
/* ── 내 현황 목표 바 ── */
.my-target-card{background:linear-gradient(135deg,#0d2645,var(--navy-700));border-radius:var(--r-xl);padding:18px 22px;margin-bottom:16px;color:var(--surface);position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(30,92,168,.35)}
.my-target-card::after{content:'🎯';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:var(--fs-hero);opacity:.12;pointer-events:none}
.my-target-label{font-size:var(--fs-2xs);font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
.my-target-nums{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.my-target-pct{font-size:var(--fs-2xl);font-weight:800;line-height:1}
.my-target-detail{font-size:var(--fs-xs);color:rgba(255,255,255,.6);margin-left:4px}
.my-target-bar-bg{height:8px;background:rgba(255,255,255,.15);border-radius:var(--r-sm);overflow:hidden;margin-bottom:10px}
.my-target-bar-fill{height:100%;border-radius:var(--r-sm);transition:width .6s cubic-bezier(.22,.68,0,1.2)}
.my-target-meta{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:rgba(255,255,255,.55)}
.my-target-notset{background:rgba(255,255,255,.06);border:1.5px dashed rgba(255,255,255,.18);border-radius:var(--r-xl);padding:14px 20px;margin-bottom:16px;text-align:center;font-size:var(--fs-xs);color:rgba(255,255,255,.35);font-style:italic}
/* ── 관리자 전용 요소 기본 숨김 ── */
.admin-only{display:none}
body.admin-unlocked button.admin-only{display:inline-block}
body.admin-unlocked .tgt-wrap.admin-only{display:flex}
/* ── 프로젝트 관리 탭 ── */
#tab-projmgmt{display:none;flex-direction:column;height:calc(100vh - 88px);overflow:hidden}
#tab-projmgmt.active{display:flex}
.pm-toolbar{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--gray-200);flex-wrap:wrap;flex-shrink:0}
.pm-new-btn{background:linear-gradient(135deg,var(--navy-800),var(--navy-600));color:var(--surface);border:none;border-radius:var(--r-lg);padding:8px 16px;font-size:var(--fs-sm);font-weight:600;font-family:'Paperlogy',sans-serif;cursor:pointer;transition:.15s;white-space:nowrap}
.pm-new-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,92,168,.3)}
.pm-search{flex:1;min-width:140px;border:1.5px solid var(--gray-200);border-radius:var(--r-lg);padding:7px 12px;font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;outline:none;transition:.15s}
.pm-search:focus{border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.pm-filters{display:flex;gap:5px;flex-wrap:wrap}
.pm-filter{border:1.5px solid var(--gray-200);border-radius:var(--r-xl);padding:4px 12px;font-size:var(--fs-xs);font-weight:600;font-family:'Paperlogy',sans-serif;background:var(--surface);color:var(--gray-500);cursor:pointer;transition:.12s}
.pm-filter.active{border-color:var(--navy-700);background:#eef4ff;color:var(--navy-700)}
.pm-filter:hover:not(.active){border-color:var(--blue-300);color:var(--navy-500)}
.pm-body{display:flex;flex:1;overflow:hidden;min-height:0}
.pm-list-wrap{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:9px;min-width:0}
.pm-card{background:var(--surface);border:1.5px solid #e8edf5;border-radius:var(--r-lg);padding:15px 17px;cursor:pointer;transition:.18s;position:relative}
.pm-card:hover{border-color:var(--blue-300);transform:translateY(-2px);box-shadow:0 6px 20px rgba(30,92,168,.1)}
.pm-card.selected{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.pm-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px;gap:8px}
.pm-card-name{font-size:var(--fs-sm);font-weight:800;color:var(--gray-900);flex:1;line-height:1.3}
.pm-sbadge{font-size:var(--fs-2xs);font-weight:600;padding:3px 8px;border-radius:var(--r-md);white-space:nowrap;flex-shrink:0}
.pm-sbadge.in_progress{background:var(--blue-bg);color:var(--blue-text)}
.pm-sbadge.completed{background:var(--green-bg);color:var(--green-text)}
.pm-sbadge.hold{background:var(--yellow-bg);color:var(--yellow-text)}
.pm-card-meta{display:flex;gap:10px;font-size:var(--fs-xs);color:var(--gray-500);margin-bottom:9px;flex-wrap:wrap}
.pm-prog-bg{height:5px;background:var(--gray-200);border-radius:var(--r-sm);overflow:hidden}
.pm-prog-fill{height:100%;border-radius:var(--r-sm);transition:width .5s cubic-bezier(.22,.68,0,1.2)}
.pm-detail-panel{width:400px;flex-shrink:0;border-left:1px solid var(--gray-200);overflow-y:auto;background:var(--gray-50);display:flex;flex-direction:column;transition:width .2s}
.pm-detail-panel.hidden{width:0;border-left:none;overflow:hidden}
.pm-detail-head{padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:var(--z-panel-sticky)}
.pm-detail-title{font-size:var(--fs-sm);font-weight:800;color:var(--gray-900);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-detail-close{background:none;border:none;font-size:var(--fs-lg);cursor:pointer;color:var(--gray-400);padding:2px 6px;line-height:1;border-radius:var(--r-md);transition:.12s}
.pm-detail-close:hover{background:#f0f4f8;color:var(--gray-600)}
.pm-detail-body{padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.pm-sect-title{font-size:var(--fs-2xs);font-weight:800;color:var(--gray-400);letter-spacing:.7px;text-transform:uppercase;margin-bottom:7px}
.pm-inp{border:1.5px solid var(--border);border-radius:var(--r-md);padding:7px 10px;font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;outline:none;width:100%;transition:.12s;background:var(--surface);box-sizing:border-box}
.pm-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.pm-inp-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
.pm-milestone-row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #f0f4f8}
.pm-milestone-row:last-child{border-bottom:none}
.pm-ms-check{width:16px;height:16px;accent-color:var(--navy-700);cursor:pointer;flex-shrink:0}
.pm-ms-title{flex:1;font-size:var(--fs-sm);font-weight:600;color:#2d3748}
.pm-ms-title.done{text-decoration:line-through;color:var(--gray-400)}
.pm-ms-date{font-size:var(--fs-2xs);color:var(--gray-400);white-space:nowrap}
.pm-ms-del,.pm-task-del{background:none;border:none;color:#e53e3e;cursor:pointer;font-size:var(--fs-sm);padding:2px 4px;opacity:.75;transition:.12s;flex-shrink:0}
.pm-ms-del:hover,.pm-task-del:hover{opacity:1;transform:scale(1.1)}
.pm-task-row{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid #f0f4f8}
.pm-task-row:last-child{border-bottom:none}
.pm-task-check{width:15px;height:15px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
.pm-task-title{flex:1;font-size:var(--fs-xs);color:#2d3748}
.pm-task-title.done{text-decoration:line-through;color:var(--gray-400)}
.pm-add-row{display:flex;gap:6px;margin-top:8px}
.pm-add-inp{flex:1;border:1.5px dashed #cbd5e0;border-radius:var(--r-md);padding:6px 10px;font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif;outline:none;background:var(--gray-50);transition:.12s;min-width:0}
.pm-add-inp:focus{border-color:var(--navy-500);border-style:solid;background:var(--surface)}
.pm-add-btn{background:var(--navy-700);color:var(--surface);border:none;border-radius:var(--r-md);padding:6px 12px;font-size:var(--fs-xs);font-weight:600;font-family:'Paperlogy',sans-serif;cursor:pointer;transition:.12s;white-space:nowrap;flex-shrink:0}
.pm-add-btn:hover{background:#1a4f8f}
.pm-memo{width:100%;border:1.5px solid var(--gray-200);border-radius:var(--r-lg);padding:9px 11px;font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif;resize:vertical;min-height:80px;outline:none;transition:.12s;background:var(--surface);box-sizing:border-box;line-height:1.5}
.pm-memo:focus{border-color:var(--navy-500)}
.pm-btns{display:flex;gap:7px;justify-content:flex-end;margin-top:4px}
.pm-del-btn{background:var(--surface);border:1.5px solid #fed7d7;border-radius:var(--r-md);padding:6px 13px;font-size:var(--fs-xs);font-weight:600;color:#e53e3e;cursor:pointer;transition:.12s;font-family:'Paperlogy',sans-serif}
.pm-del-btn:hover{background:#fff5f5}
.pm-save-btn{background:linear-gradient(135deg,var(--navy-800),var(--navy-600));color:var(--surface);border:none;border-radius:var(--r-md);padding:7px 16px;font-size:var(--fs-xs);font-weight:600;font-family:'Paperlogy',sans-serif;cursor:pointer;transition:.15s}
.pm-save-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,92,168,.25)}
.pm-empty,.empty-state-msg{text-align:center;padding:60px 20px;color:var(--text-3);font-size:var(--fs-sm);line-height:2}
.pm-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#cbd5e0;font-size:var(--fs-sm);gap:10px;padding:40px;text-align:center}
.pm-pct-bar{display:flex;align-items:center;gap:10px;margin-top:4px}
.pm-pct-bg{flex:1;height:9px;background:var(--gray-200);border-radius:var(--r-sm);overflow:hidden}
.pm-pct-fill{height:100%;border-radius:var(--r-sm);transition:width .5s cubic-bezier(.22,.68,0,1.2)}
/* ── 프로젝트 관리 소메뉴 ── */




.pm-pane{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
/* 회사/담당자 카드 */
.co-card{background:var(--surface);border:1.5px solid #e8edf5;border-radius:var(--r-lg);padding:14px 16px;transition:.15s;display:flex;flex-direction:column;gap:8px}
.co-card:hover{border-color:var(--blue-300);box-shadow:0 4px 16px rgba(30,92,168,.1)}
.co-card-head{display:flex;align-items:flex-start;gap:8px}
.co-card-name{font-size:var(--fs-sm);font-weight:800;color:var(--gray-900);margin-bottom:3px}
.co-card-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--gray-500)}
.co-contacts-mini{font-size:var(--fs-2xs);color:var(--gray-600);background:#f0f7ff;border-radius:var(--r-md);padding:4px 8px}
.co-memo{font-size:var(--fs-xs);color:var(--gray-400);font-style:italic;line-height:1.4}
/* 회사/담당자 모달 — v2.341 D3: MxDialog로 이전(#co-modal-backdrop/-box 죽은 CSS 제거, #co-modal-body는 숨김 스테이징) */
/* 그리드 목록 */
.co-grid{overflow-y:auto;padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;align-content:start;flex:1;min-height:0}
/* ── 프로젝트 상세 모달 ── */
/* v2.345 D3: #pm-proj-modal 죽은 CSS 제거(MxDialog 이전, 치수는 dialog.mxd-pmproj로 복원). .pm-mhd/.pm-mcols 등은 dialog 본문서 사용 */
.pm-mhd{padding:14px 22px;background:var(--surface);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:12px;flex-shrink:0}
.pm-mhd-title{font-size:var(--fs-md);font-weight:800;color:var(--gray-900);flex:1}
.pm-mhd-badge{font-size:var(--fs-2xs);font-weight:600;padding:4px 10px;border-radius:var(--r-md)}
.pm-mhd-close{background:none;border:none;font-size:var(--fs-lg);cursor:pointer;color:var(--gray-400);padding:4px 8px;border-radius:var(--r-md);line-height:1;transition:.12s}
.pm-mhd-close:hover{background:#f0f4f8;color:var(--gray-600)}
.pm-mcols{flex:1;overflow:hidden;display:grid;grid-template-columns:1fr 360px;min-height:0}
.pm-mleft{overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.pm-mright{overflow-y:auto;padding:18px 20px;background:var(--surface);border-left:1px solid var(--gray-200);display:flex;flex-direction:column;gap:12px}
/* 이벤트 */
.ev-add-box{background:var(--gray-50);border:1.5px dashed #cbd5e0;border-radius:var(--r-lg);padding:14px}
.ev-type-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ev-type-btn{border:1.5px solid var(--gray-200);border-radius:var(--r-md);padding:4px 11px;font-size:var(--fs-xs);font-weight:600;font-family:'Paperlogy',sans-serif;background:var(--surface);color:var(--gray-500);cursor:pointer;transition:.12s}
.ev-type-btn.sel,.ev-type-btn:hover{border-color:var(--navy-700);background:#eef4ff;color:var(--navy-700)}
.ev-row{border-left:3px solid #cbd5e0;padding:9px 12px 9px 14px;border-radius:0 10px 10px 0;background:var(--gray-50);position:relative;margin-bottom:8px}
.ev-row[data-t="견적요청"]{border-left-color:var(--navy-700);background:var(--navy-50)}
.ev-row[data-t="기술문의"]{border-left-color:var(--green-700);background:var(--green-50)}
.ev-row[data-t="미팅"]{border-left-color:var(--purple);background:var(--purple-bg)}
.ev-row[data-t="기타"]{border-left-color:#d97706;background:#fffbeb}
.ev-tag{font-size:var(--fs-2xs);font-weight:800;padding:2px 7px;border-radius:var(--r-sm);display:inline-block;margin-bottom:5px}
.ev-tag[data-t="견적요청"]{background:var(--blue-bg);color:var(--blue-text)}
.ev-tag[data-t="기술문의"]{background:var(--green-bg);color:var(--green-text)}
.ev-tag[data-t="미팅"]{background:#ede9fe;color:var(--purple-text)}
.ev-tag[data-t="기타"]{background:var(--yellow-bg);color:var(--yellow-text)}
.ev-title{font-size:var(--fs-sm);font-weight:600;color:var(--gray-900);margin-bottom:4px}
.ev-dates{font-size:var(--fs-xs);color:var(--gray-500);display:flex;gap:12px;flex-wrap:wrap}
.ev-due-hi{color:var(--orange);font-weight:600}
.ev-del{position:absolute;top:9px;right:10px;background:none;border:none;color:#fc8181;cursor:pointer;opacity:.4;font-size:var(--fs-sm);transition:.12s;line-height:1}
.ev-del:hover{opacity:1}
.pm-next-ev{margin-top:5px;font-size:var(--fs-2xs);color:var(--navy-700);background:#eef4ff;border-radius:var(--r-md);padding:3px 8px;display:inline-flex;align-items:center;gap:5px;font-weight:600}
.pm-next-ev.overdue{color:var(--red-strong);background:var(--red-bg)}

/* ═══════ 서비스 대시보드 ═══════ */
body.service-active #service-subnav{display:flex}
/* 서비스 탭에서는 .main의 max-width만 해제 — 전체 폭 활용 (padding은 유지해서 header와 시각 분리) */
body.service-active .main{max-width:none}
.sv-wrap{padding:20px 24px;overflow-y:auto;flex:1}
.sv-cal-hdr{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.sv-cal-title{font-size:var(--fs-md);font-weight:800;color:var(--navy-800);flex:1;text-align:center}
.sv-cal-nav{background:var(--gray-100);border:none;border-radius:var(--r-md);width:34px;height:34px;font-size:var(--fs-md);cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s}
.sv-cal-nav:hover{background:var(--gray-200)}
.sv-grid{display:flex;flex-direction:column;gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--gray-200)}
.sv-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--gray-200)}
.sv-week-row{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--gray-200);position:relative}
.sv-span-bar{position:absolute;height:20px;line-height:20px;border-radius:var(--r-sm);font-size:var(--fs-2xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 7px;cursor:pointer;z-index:var(--z-content);box-shadow:0 1px 3px rgba(0,0,0,.1);transition:transform .12s,opacity .12s}
.sv-span-bar-title{font-weight:800}
.sv-span-bar-sub{font-size:var(--fs-2xs);font-weight:600;opacity:.85;margin-left:4px}
.sv-span-bar[draggable="true"]{cursor:grab}
.sv-span-bar[draggable="true"]:active{cursor:grabbing}
.sv-span-bar.dragging{opacity:.4;transform:scale(.95)}
.sv-chip[draggable="true"]{cursor:grab}
.sv-chip[draggable="true"]:active{cursor:grabbing}
.sv-chip.dragging{opacity:.4}
.sv-day.drag-over{background:var(--blue-bg) !important;outline:2px dashed var(--navy-700);outline-offset:-3px}
.sv-day.drag-conflict{background:var(--red-bg) !important;outline:2px dashed var(--red-strong);outline-offset:-3px}
.sv-span-bar:hover{filter:brightness(.92)}
.sv-dow{background:var(--gray-50);text-align:center;padding:7px 0;font-size:var(--fs-2xs);font-weight:800;color:var(--gray-500);letter-spacing:.4px}
.sv-dow:first-child{color:var(--red)}.sv-dow:last-child{color:var(--navy-500)}
.sv-day{background:var(--surface);min-height:90px;padding:6px 5px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;overflow:hidden}
/* v3.486: M-Calendar 수동 일정 미니 칩 */
.mcal-note{font-size:9.5px;line-height:1.35;background:var(--brand-50,#f5f7ff);color:var(--brand,#465fff);border:1px solid var(--brand-100,#e0e7ff);border-radius:5px;padding:1px 4px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcal-note b{font-weight:800}
.mcal-note-more{font-size:9px;color:var(--gray-400,#94a3b8);padding:1px 4px}
.sv-day:hover{background:#f0f7ff}
.sv-day.today{background:var(--navy-50)}
.sv-day.other-month{background:#fafafa}
.sv-day-num{font-size:var(--fs-xs);font-weight:600;color:var(--gray-700);margin-bottom:3px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.sv-day-num.sun{color:var(--red)}.sv-day-num.sat{color:var(--navy-500)}
.sv-day.today .sv-day-num{background:var(--navy-700);color:var(--surface)}
.sv-day.other-month .sv-day-num{color:var(--gray-300)}
.sv-chip{font-size:var(--fs-2xs);padding:2px 6px;border-radius:var(--r-sm);margin-bottom:2px;overflow:hidden;font-weight:600;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
.sv-chip-title{font-weight:800}
.sv-chip-info{font-size:var(--fs-2xs);font-weight:600;opacity:.8;margin-left:3px}
.sv-chip.방선{background:var(--blue-bg);color:var(--blue-text)}
.sv-chip.칼리브레이션{background:var(--blue-bg);color:var(--blue-text)}
.sv-chip.수리{background:var(--yellow-bg);color:#b45309}
.sv-chip.점검{background:var(--green-bg);color:var(--green-text)}
.sv-chip.헬스체크{background:var(--green-bg);color:var(--green-text)}
.sv-chip.기타{background:var(--gray-100);color:var(--gray-600)}
.sv-status-요청{background:#fef9c3;color:#854d0e;border:1px solid #fde047}
.sv-status-확정{background:var(--green-bg-soft);color:var(--green-text-dark);border:1px solid var(--green-300)}
.sv-status-취소{background:var(--red-bg);color:var(--red-text);border:1px solid #fca5a5}
.sv-span-bar.st-요청{background:var(--yellow-border);color:var(--yellow-text)}
.sv-span-bar.st-확정{background:#6ee7b7;color:var(--green-text)}
.sv-span-bar.st-취소{background:#fca5a5;color:#7f1d1d}
/* 서비스 데이 모달 */
/* v2.345 D3: #sv-day-modal 죽은 CSS 제거(MxDialog 이전). .sv-mhd/.sv-mbody는 dialog 본문서 사용 */
.sv-mhd{padding:16px 20px 12px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:10px}
.sv-mhd-title{font-size:var(--fs-md);font-weight:800;color:var(--navy-800);flex:1}
.sv-mclose{background:none;border:none;font-size:var(--fs-lg);cursor:pointer;color:var(--gray-400);padding:2px 6px;border-radius:var(--r-md);line-height:1}
.sv-mclose:hover{background:var(--gray-100);color:var(--gray-700)}
.sv-mbody{flex:1;overflow-y:auto;padding:14px 20px 18px}
.sv-rec-card{border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:10px;position:relative;background:#fafafa}
.sv-rec-row{font-size:var(--fs-xs);color:var(--gray-600);margin-bottom:3px}
.sv-rec-row b{color:var(--navy-800)}
.sv-rec-actions{position:absolute;top:10px;right:10px;display:flex;gap:5px}
.sv-add-form{border:2px dashed var(--blue-border);border-radius:var(--r-lg);padding:15px;margin-top:12px;background:#f8fbff}
.sv-add-title{font-size:var(--fs-sm);font-weight:600;color:var(--navy-700);margin-bottom:12px}
.sv-frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.sv-frow.full{grid-template-columns:1fr}
.sv-flab{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-600);margin-bottom:5px;letter-spacing:-.1px}
/* 전체폭일 때 폼 그리드를 3열까지 확장 */
@media (min-width: 1280px){
  .arr-tab-body .sv-frow:not(.full){grid-template-columns:1fr 1fr 1fr}
  .arr-tab-body .sv-frow:not(.full) > div:nth-child(n+4){grid-column:1/-1}
}
.sv-finp{width:100%;padding:7px 9px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;box-sizing:border-box}
.sv-finp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.sv-fact{display:flex;gap:7px;justify-content:flex-end;margin-top:11px}
.sv-btn{padding:7px 15px;border:none;border-radius:var(--r-md);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.13s}
.sv-btn.primary{background:var(--primary);color:var(--surface)}.sv-btn.primary:hover{background:var(--primary-dark)}
.sv-btn.ghost{background:var(--gray-100);color:var(--gray-700)}.sv-btn.ghost:hover{background:var(--gray-200)}
.sv-btn.danger{background:var(--red-bg);color:var(--red-text)}.sv-btn.danger:hover{background:var(--red-border)}
.sv-btn.sm{padding:4px 10px;font-size:var(--fs-2xs)}
/* 인력 현황 */
.sv-eng-toolbar{padding:16px 24px 10px;display:flex;align-items:center;gap:12px}
.sv-eng-ttl{font-size:var(--fs-md);font-weight:800;color:var(--navy-800)}
.sv-eng-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;padding:0 24px 24px}
.sv-eng-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:16px;position:relative;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.sv-eng-name{font-size:var(--fs-md);font-weight:800;color:var(--navy-800);margin-bottom:5px}
.sv-eng-badge{display:inline-block;padding:2px 9px;border-radius:var(--r-lg);font-size:var(--fs-2xs);font-weight:600;background:var(--blue-bg);color:var(--blue-text);margin-bottom:8px}
.sv-eng-info{font-size:var(--fs-xs);color:var(--gray-500);line-height:1.9}
.sv-eng-salary{font-size:var(--fs-sm);font-weight:600;color:var(--green-text);margin-top:6px}
.sv-eng-actions{position:absolute;top:12px;right:12px;display:flex;gap:5px}

/* 통화 배지 */
.pm-cur-badge{display:inline-block;padding:1px 7px;border-radius:var(--r-md);font-size:var(--fs-2xs);font-weight:800;background:var(--blue-bg);color:var(--blue-text);margin-left:4px;letter-spacing:.3px}

/* 마감 테이블 */
.sv-cl-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.sv-cl-table th{padding:7px 8px;background:var(--gray-50);font-weight:600;color:var(--gray-700);border-bottom:2px solid var(--gray-200);white-space:nowrap;font-size:var(--fs-2xs)}
.sv-cl-table td{padding:6px 8px;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.sv-cl-table tr:last-child td{border-bottom:none}
.sv-cl-table .inp--sm{padding:3px 6px}
.sv-cl-sum td{background:#f0f9ff;font-weight:800;border-top:2px solid var(--blue-border)}
.sv-cl-actual td{background:#fef9f0}
.sv-cl-inp{width:90px;padding:5px 7px;border:1px solid #d1d5db;border-radius:var(--r-md);text-align:right;font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif}
.sv-type-chip{padding:5px 13px;border:1.5px solid #d1d5db;border-radius:var(--r-xl);font-size:var(--fs-xs);font-weight:600;cursor:pointer;background:var(--surface);color:var(--gray-500);transition:background .15s,color .15s,border-color .15s;font-family:'Paperlogy',sans-serif}
.sv-type-chip.sel{background:var(--navy-800);color:var(--surface);border-color:var(--navy-800)}
.sv-cl-inp:focus{outline:none;border-color:var(--navy-500)}
.sv-cl-inp:disabled{background:var(--gray-50);color:var(--gray-400)}
.sv-status-badge{display:inline-block;padding:3px 10px;border-radius:var(--r-xl);font-size:var(--fs-2xs);font-weight:600}
.sv-status-open{background:var(--blue-bg);color:var(--blue-text)}
.sv-status-closed{background:var(--green-bg);color:var(--green-text)}
.sv-month-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}

/* DB 메뉴 */
body.dbmgmt-active #dbmgmt-subnav{display:flex}
#tab-dbmgmt{display:none;flex-direction:column;height:calc(100vh - 88px);overflow:hidden}
#tab-dbmgmt.active{display:flex}
/* 선박 카드 */
.vessel-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer;transition:.15s}
.vessel-card:hover{box-shadow:0 4px 16px rgba(30,92,168,.12);transform:translateY(-1px)}
.vessel-name{font-size:var(--fs-md);font-weight:800;color:var(--navy-800);margin-bottom:6px}
.vessel-info{font-size:var(--fs-xs);color:var(--gray-500);line-height:1.7}
.vessel-actions{display:flex;gap:6px;margin-top:10px;justify-content:flex-end}
/* KPI 통화 토글 */
.sv-curr-toggle{display:flex;gap:4px;align-items:center}
.sv-curr-btn{padding:3px 12px;border-radius:var(--r-lg);border:1.5px solid var(--gray-200);background:var(--surface);font-size:var(--fs-xs);font-weight:600;cursor:pointer;color:var(--gray-500);transition:.15s}
.sv-curr-btn.active{background:var(--navy-800);color:var(--surface);border-color:var(--navy-800)}
/* 선박 이력 pane */
.sv-vessel-list-item{padding:10px 12px;border-radius:var(--r-md);cursor:pointer;border:1px solid var(--gray-200);margin-bottom:6px;background:var(--surface);transition:.15s}
.sv-vessel-list-item:hover,.sv-vessel-list-item.active{border-color:var(--navy-800);background:#eef4ff}
.sv-vessel-list-name{font-weight:800;color:var(--navy-800);font-size:var(--fs-sm)}
.sv-vessel-list-cnt{font-size:var(--fs-2xs);color:var(--gray-500);margin-top:2px}

/* 칩 서브라인 */
.sv-chip-sub{font-size:var(--fs-2xs);color:var(--gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;line-height:1.3;margin-bottom:1px}
/* 완료 보고서 모달 */
/* v2.580 U1: 2000(--z-overlay 대역) → 모달 대역(9000). 다른 모달에 깔리던 문제 해소 */
#sv-report-modal{display:none;position:fixed;inset:0;background:rgba(10,20,50,.65);z-index:9000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#sv-report-modal.open{display:flex}
#sv-report-box{background:var(--surface);border-radius:var(--r-xl);width:min(780px,96vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.sv-rpt-header{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));padding:20px 28px;flex-shrink:0;display:flex;justify-content:space-between;align-items:flex-start}
.sv-rpt-title{font-size:var(--fs-lg);font-weight:800;color:var(--surface);letter-spacing:.3px}
.sv-rpt-sub{font-size:var(--fs-sm);color:rgba(255,255,255,.75);margin-top:5px}
.sv-rpt-body{flex:1;overflow-y:auto;padding:22px 28px;display:flex;flex-direction:column;gap:18px}
.sv-rpt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sv-rpt-field{display:flex;flex-direction:column;gap:7px}
.sv-rpt-label{font-size:var(--fs-sm);font-weight:800;color:var(--navy-800)}
.sv-rpt-inp{padding:11px 14px;border:2px solid var(--gray-200);border-radius:var(--r-lg);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;transition:.15s;width:100%;box-sizing:border-box}
.sv-rpt-inp:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.12)}
.sv-rpt-ta{padding:12px 14px;border:2px solid var(--gray-200);border-radius:var(--r-lg);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;resize:vertical;line-height:1.7;transition:.15s;width:100%;box-sizing:border-box}
.sv-rpt-ta:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.12)}
.sv-rpt-actions{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--gray-100);flex-shrink:0}
.sv-rpt-submit{background:linear-gradient(135deg,var(--navy-700),var(--blue-text));color:var(--surface);border:none;padding:14px 36px;border-radius:var(--r-lg);font-size:var(--fs-md);font-weight:800;cursor:pointer;font-family:'Paperlogy',sans-serif;letter-spacing:.3px;box-shadow:0 4px 16px rgba(30,92,168,.3);transition:.15s}
.sv-rpt-draft{background:var(--surface);color:var(--navy-700);border:1.5px solid var(--navy-200,#c7d2e8);padding:14px 26px;border-radius:var(--r-lg);font-size:var(--fs-md);font-weight:800;cursor:pointer;font-family:'Paperlogy',sans-serif;letter-spacing:.3px;transition:.15s}
.sv-rpt-draft:hover{background:var(--gray-50);border-color:var(--navy-700)}
.sv-rpt-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(30,92,168,.4)}
/* v1.776: 보고서 — 전체폭 리스트 → 들어가서 보기(미팅록 패턴). 사이드 320 분할 폐기 */
#sv-pane-report-write{display:none;overflow:hidden}
#sv-pane-report-write.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
#sv-pane-report-done{display:none;overflow:hidden}
#sv-pane-report-done.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
.sv-rpt-pending-col{flex:1;overflow-y:scroll;background:var(--gray-50);padding:18px 24px 44px;min-height:0;scrollbar-gutter:stable}
.sv-rpt-form-col{flex:1;overflow-y:auto;padding:14px 24px 48px;background:var(--surface);min-height:0}
#sv-pane-report-write .sv-rpt-form-col,#sv-pane-report-done .sv-rpt-form-col{display:none}
#sv-pane-report-write.show-detail .sv-rpt-pending-col,#sv-pane-report-done.show-detail .sv-rpt-pending-col{display:none}
#sv-pane-report-write.show-detail .sv-rpt-form-col,#sv-pane-report-done.show-detail .sv-rpt-form-col{display:block}
.sv-rpt-back-bar{position:sticky;top:0;z-index:var(--z-panel-sticky);background:var(--surface);padding:4px 0 12px;margin-bottom:8px;border-bottom:1px solid var(--gray-100)}
.sv-rpt-back-bar button{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:7px 14px;color:var(--gray-600);font-weight:700;font-size:var(--fs-xs);cursor:pointer;font-family:inherit}
.sv-eng-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--r-xl);border:2px solid var(--gray-200);background:var(--gray-50);font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:.15s;color:var(--gray-600);margin:4px}
.sv-eng-chip:hover{border-color:var(--navy-700);color:var(--navy-700)}
.sv-eng-chip.selected{background:var(--navy-700);border-color:var(--navy-700);color:var(--surface)}
.sv-rpt-list-item.selected{background:var(--navy-50);border-left:3px solid var(--navy-700)}
.rpt-photo-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.rpt-photo-thumb{position:relative;width:100px;height:80px;border-radius:var(--r-md);overflow:hidden;border:2px solid var(--gray-200);cursor:pointer}
.rpt-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rpt-photo-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);color:var(--surface);border:none;border-radius:50%;width:20px;height:20px;font-size:var(--fs-2xs);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.rpt-photo-add{width:100px;height:80px;border:2px dashed var(--gray-300);border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--gray-400);font-size:var(--fs-2xs);gap:4px;background:var(--gray-50);transition:.15s}
.rpt-photo-add:hover{border-color:var(--navy-700);color:var(--navy-700);background:var(--navy-50)}
.sv-badge-done{background:var(--green-bg);color:var(--green-text);font-size:var(--fs-2xs);font-weight:600;padding:2px 9px;border-radius:var(--r-lg);display:inline-block}
.sv-badge-pending{background:#fff7ed;color:#c2410c;font-size:var(--fs-2xs);font-weight:600;padding:2px 9px;border-radius:var(--r-lg);display:inline-block}
.sv-office-badge{display:inline-block;padding:2px 8px;border-radius:var(--r-md);font-size:var(--fs-2xs);font-weight:600;background:#e0f2fe;color:#0369a1}
/* 어레인지 패널 — v1.297 리디자인 */
#sv-pane-arrange{display:none;height:100%;overflow:hidden;background:#fafbfc}
/* v1.782: 방선 — 전체폭 리스트 → 들어가서 상세(미팅록/보고서 패턴). 사이드 340 분할 폐기 */
.arr-layout{display:flex;height:100%;overflow:hidden}
.arr-list-col{flex:1;min-width:0;background:var(--gray-50);display:flex;flex-direction:column;overflow:hidden}
.arr-layout.show-detail .arr-list-col{display:none}
.arr-list-top{padding:14px 14px 10px;border-bottom:1px solid var(--gray-200);display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.arr-chips{display:flex;flex-wrap:wrap;gap:5px}
.arr-chip{padding:4px 11px;border-radius:var(--r-lg);border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s;letter-spacing:-.2px}
.arr-chip:hover{border-color:var(--primary);color:var(--primary)}
.arr-chip.active{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));border-color:var(--navy-800);color:var(--surface);box-shadow:0 2px 8px rgba(30,58,95,.25)}
.arr-list-body{flex:1;overflow-y:scroll;padding:10px;scrollbar-width:thin;scrollbar-gutter:stable}
.arr-list-body::-webkit-scrollbar{width:5px}
.arr-list-body::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--r-sm)}
.arr-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;overflow:hidden}
.arr-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:.15s}
.arr-card:hover{border-color:var(--primary);background:#f8fbff;transform:translateX(2px);box-shadow:0 3px 12px rgba(30,92,168,.08)}
.arr-card:hover::before{background:var(--primary)}
.arr-card.selected{border-color:var(--primary);background:var(--navy-50);box-shadow:0 2px 12px rgba(30,92,168,.15),0 0 0 2px rgba(30,92,168,.1)}
.arr-card.bulk-selected{border-color:var(--navy-700);background:var(--navy-50);outline:2px solid var(--blue-300);outline-offset:-2px}
.arr-card.bulk-selected::before{background:var(--navy-700) !important}
.arr-card.selected::before{background:linear-gradient(180deg,var(--primary),var(--navy-600))}
.arr-card-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.arr-card-date{font-size:var(--fs-2xs);color:var(--gray-400);font-weight:600;font-variant-numeric:tabular-nums}
.arr-card-vessel{font-size:var(--fs-sm);font-weight:800;color:var(--navy-800);flex:1;letter-spacing:-.2px}
.arr-status{display:inline-block;padding:3px 9px;border-radius:var(--r-lg);font-size:var(--fs-2xs);font-weight:800;letter-spacing:-.2px;border:1px solid transparent}
.arr-status-접수{background:var(--gray-100);color:var(--gray-600);border-color:var(--gray-200)}
.arr-status-어레인지중{background:var(--yellow-bg);color:var(--yellow-text);border-color:var(--yellow-border)}
.arr-status-출발확정{background:var(--blue-bg);color:#1e40af;border-color:var(--blue-border)}
.arr-status-진행중{background:var(--green-bg);color:var(--green-text);border-color:#a7f3d0}
.arr-status-완료{background:var(--green-50);color:#15803d;border-color:#bbf7d0}
.arr-status-마감{background:linear-gradient(135deg,var(--gray-200),var(--gray-300));color:var(--gray-700);border-color:var(--gray-300)}
.arr-status-취소{background:var(--red-bg);color:var(--red-text);border-color:var(--red-border)}
.arr-flow-btn.dim{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}
.arr-detail-col{flex:1;overflow-y:auto;background:var(--surface);padding:0}
.arr-sec{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.arr-sec-ttl{font-size:var(--fs-xs);font-weight:800;color:var(--navy-800);margin-bottom:12px;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}
.arr-flow-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.arr-flow-btn{padding:6px 14px;border-radius:var(--r-lg);border:1.5px solid var(--gray-200);background:var(--surface);color:var(--gray-500);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s;letter-spacing:-.2px}
.arr-flow-btn.cur{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));border-color:var(--navy-800);color:var(--surface);box-shadow:0 2px 8px rgba(30,58,95,.25)}
.arr-flow-btn.done{background:var(--green-50);border-color:#bbf7d0;color:var(--green-text-dark)}
.arr-flow-btn:hover:not(.cur):not(.done):not(.dim){border-color:var(--navy-700);color:var(--navy-700);background:var(--navy-50)}
.arr-eng-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--gray-200);border-radius:var(--r-md);background:var(--surface);margin-bottom:6px;font-size:var(--fs-xs)}
.arr-cost-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.arr-cost-table th{background:var(--gray-100);padding:6px 8px;text-align:left;font-size:var(--fs-2xs);font-weight:600;color:var(--gray-600);border-bottom:1.5px solid var(--gray-200)}
.arr-cost-table td{padding:6px 8px;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.arr-cost-table tr:last-child td{border-bottom:none}
.arr-cost-inp{width:80px;padding:4px 6px;border:1px solid #d1d5db;border-radius:var(--r-md);font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif;text-align:right}
.arr-cost-inp:focus{outline:none;border-color:var(--navy-500)}
/* 어레인지 내부 탭 */
.arr-detail-col{flex:1;overflow:hidden;background:#fafbfc;display:flex;flex-direction:column;padding:0}
/* v1.782: 상세는 show-detail 일 때만 (전체폭 토글) */
.arr-detail-col{display:none}
.arr-layout.show-detail .arr-detail-col{display:flex}
.arr-detail-hdr{padding:18px 28px;border-bottom:1px solid var(--gray-200);background:linear-gradient(180deg,var(--surface) 0%,var(--gray-50) 100%);flex-shrink:0}
/* 섹션 anchor 네비 — 헤더 바로 아래 고정 */
.arr-anchor-nav{flex-shrink:0;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--gray-200);padding:8px 28px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.arr-anchor-btn{padding:5px 12px;border-radius:var(--r-lg);border:1.5px solid transparent;background:transparent;color:var(--gray-500);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.15s;display:inline-flex;align-items:center;gap:4px;letter-spacing:-.2px}
.arr-anchor-btn:hover{background:var(--gray-100);color:var(--navy-800)}
.arr-anchor-btn.active{background:linear-gradient(135deg,var(--navy-50),var(--blue-bg));border-color:var(--blue-border);color:#1e40af;box-shadow:0 1px 3px rgba(30,92,168,.12)}
.arr-anchor-btn.locked{opacity:.45;color:var(--gray-400)}
.arr-anchor-btn.locked:hover{background:transparent;color:var(--gray-400);cursor:not-allowed}
.arr-tab-body{flex:1;padding:20px 28px 60px;max-width:1400px;width:100%;margin:0 auto;box-sizing:border-box}
.arr-section-target{scroll-margin-top:130px;animation:secFadeIn .3s ease}
@keyframes secFadeIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (min-width: 1600px) {
  .arr-tab-body{max-width:1500px}
}
.arr-inner-tabbar{display:flex;border-bottom:2px solid var(--gray-200);background:var(--gray-50);flex-shrink:0}
.arr-inner-tab{padding:8px 14px;border:none;background:none;font-size:var(--fs-xs);font-weight:600;color:var(--gray-500);cursor:pointer;font-family:'Paperlogy',sans-serif;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.12s;white-space:nowrap}
.arr-inner-tab.active{color:var(--navy-800);border-bottom-color:var(--navy-800);background:var(--surface)}
.arr-tab-body{flex:1;overflow-y:auto;min-height:0}
.arr-inner-pane{display:none;padding:16px 20px 60px}
.arr-inner-pane.active{display:block}

/* 보고서 섹션 */
.sv-rec-report{background:var(--green-50);border:1px solid #bbf7d0;border-radius:var(--r-lg);padding:12px 14px;margin-top:10px}
.sv-rec-report-ttl{font-size:var(--fs-xs);font-weight:800;color:var(--green-text);margin-bottom:8px;letter-spacing:.2px}
.sv-rec-report pre{white-space:pre-wrap;font-family:'Paperlogy',sans-serif;font-size:var(--fs-xs);color:var(--gray-700);margin:3px 0 0 0;line-height:1.6}
/* 등록 모달 */
/* v2.345 D3: #sv-reg-modal 죽은 CSS 제거(MxDialog 이전) */

/* 엔지니어 멀티셀렉 칩 */
.sv-eng-chip{padding:5px 12px;border-radius:var(--r-lg);border:1.5px solid var(--gray-200);background:var(--surface);font-size:var(--fs-xs);font-weight:600;cursor:pointer;color:var(--gray-700);transition:.12s;font-family:'Paperlogy',sans-serif}
.sv-eng-chip:hover{border-color:var(--blue-300);background:var(--navy-50)}
.sv-eng-chip.active{background:var(--navy-800);color:var(--surface);border-color:var(--navy-800)}

/* ── 운영 관리 inner tab ──────────────────────────── */
.sv-inner-tab{background:transparent;border:none;border-bottom:3px solid transparent;color:var(--gray-500);font-size:var(--fs-sm);font-weight:600;padding:11px 18px 9px;cursor:pointer;transition:.15s;font-family:'Paperlogy',sans-serif}
.sv-inner-tab.active{color:var(--navy-700);border-bottom-color:var(--navy-700)}
.sv-inner-tab:hover{color:var(--navy-800);background:var(--gray-100)}
/* ── DB view toggle ───────────────────────────────── */
.pm-view-btn{background:var(--gray-100);border:1.5px solid var(--gray-200);border-radius:var(--r-md);padding:4px 10px;font-size:var(--fs-sm);cursor:pointer;color:var(--gray-500);font-weight:600;transition:.15s}
.pm-view-btn.active{background:var(--navy-800);color:var(--surface);border-color:var(--navy-800)}
/* ── DB list table ────────────────────────────────── */
.co-list-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.co-list-table th{background:var(--gray-50);padding:8px 12px;text-align:left;font-weight:600;color:var(--gray-500);border-bottom:1px solid var(--border);font-size:var(--fs-xs)}
.co-list-table td{padding:9px 12px;border-bottom:1px solid var(--gray-100);color:#1e293b;vertical-align:middle}
.co-list-table tr:hover td{background:var(--gray-50)}
/* ── 부품 DB ──────────────────────────────────────── */
.parts-layout{display:flex;height:calc(100vh - 148px);overflow:hidden}
#tab-dbmgmt .parts-layout{height:100%}
.parts-sidebar{width:240px;min-width:200px;border-right:1.5px solid var(--gray-200);display:flex;flex-direction:column;background:var(--gray-50);overflow:hidden}
.parts-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;flex-shrink:0;border-bottom:1px solid var(--gray-200)}
.parts-cat-header{padding:5px 12px 3px;font-size:var(--fs-2xs);font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--gray-400);background:var(--gray-100);border-top:1px solid var(--gray-200);margin-top:2px}
.parts-cat-header:first-child{margin-top:0;border-top:none}
.parts-major-item{display:flex;align-items:center;gap:6px;padding:9px 12px;cursor:pointer;border-left:3px solid transparent;transition:.12s;font-size:var(--fs-sm);font-weight:600;color:var(--gray-700)}
.parts-major-item:hover{background:var(--gray-100)}
.parts-major-item.active{background:var(--navy-50);border-left-color:var(--navy-700);color:var(--navy-800)}
.parts-major-item .pm-acts{margin-left:auto;display:flex;gap:4px}
.parts-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.parts-main-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 10px;flex-shrink:0;border-bottom:1px solid var(--gray-100)}
.parts-minor-wrap{flex:1;overflow-y:auto;padding:12px 20px}
.parts-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.parts-tbl th{background:var(--gray-50);font-weight:800;color:var(--gray-600);font-size:var(--fs-xs);padding:9px 12px;border-bottom:1.5px solid var(--gray-200);text-align:left}
.parts-tbl td{padding:9px 12px;border-bottom:1px solid var(--gray-100);vertical-align:middle;color:var(--gray-700)}
.parts-tbl tr:last-child td{border-bottom:none}
.parts-tbl tr:hover td{background:var(--gray-50)}
.parts-part-no{font-size:var(--fs-xs);font-family:monospace;color:var(--gray-500);background:var(--gray-100);padding:2px 7px;border-radius:var(--r-sm)}
/* 부품 모달 — v2.338 D3: parts-major/minor 상주 div 제거로 ID 규칙(오버레이·.open) 삭제(죽은 CSS). .parts-modal-row/-lbl/-grid/-checks는 MxDialog 본문에서 계속 사용 */
.parts-modal-box{background:var(--surface);border-radius:var(--r-xl);width:min(420px,94vw);box-shadow:0 16px 48px rgba(0,0,0,.25);overflow:hidden}
.parts-modal-hd{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.parts-modal-hd-title{font-size:var(--fs-md);font-weight:800;color:var(--surface)}
.parts-modal-close{background:rgba(255,255,255,.15);border:none;color:var(--surface);width:30px;height:30px;border-radius:var(--r-md);cursor:pointer;font-size:var(--fs-md);display:flex;align-items:center;justify-content:center}
.parts-modal-body{padding:20px}
.parts-modal-row{margin-bottom:14px}
.parts-modal-lbl{font-size:var(--fs-xs);font-weight:800;color:var(--navy-800);margin-bottom:6px}
.parts-modal-inp{width:100%;box-sizing:border-box;padding:10px 13px;border:2px solid var(--gray-200);border-radius:var(--r-md);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;transition:.15s;outline:none}
.parts-modal-inp:focus{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.parts-modal-ft{display:flex;justify-content:flex-end;gap:8px;padding:0 20px 18px}

/* 부품 DB 확장 */
.parts-img-thumb{width:52px;height:40px;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--gray-200);cursor:pointer}
.parts-img-placeholder{width:52px;height:40px;border-radius:var(--r-md);border:1.5px dashed var(--gray-300);display:flex;align-items:center;justify-content:center;color:var(--gray-300);font-size:var(--fs-md)}
.parts-xt-badge,.parts-ex-badge{display:inline-block;font-size:var(--fs-2xs);font-weight:800;padding:2px 6px;border-radius:var(--r-sm);line-height:1.6}
.parts-xt-badge{background:var(--blue-bg);color:var(--blue-text)}
.parts-ex-badge{background:#fce7f3;color:#be185d}
.parts-img-upload-area{border:2px dashed var(--gray-300);border-radius:var(--r-lg);padding:16px;text-align:center;cursor:pointer;transition:.15s;background:#fafafa}
.parts-img-upload-area:hover{border-color:var(--blue-300);background:var(--navy-50)}
.parts-img-preview-box{position:relative;display:inline-block}
.parts-img-preview-box img{max-height:140px;max-width:100%;border-radius:var(--r-md);border:1px solid var(--gray-200)}
.parts-img-del-btn{position:absolute;top:-6px;right:-6px;background:var(--red);color:var(--surface);border:none;border-radius:50%;width:20px;height:20px;font-size:var(--fs-xs);cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.parts-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.parts-modal-checks{display:flex;gap:16px;align-items:center;padding:10px 0 4px}

/* ── 보고서 자재 피커 ─────────────────────────────── */
.rpt-parts-picker{background:var(--gray-50);border:1.5px solid var(--gray-200);border-radius:var(--r-lg);padding:14px 16px}
.rpt-parts-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rpt-parts-sel{flex:1;min-width:120px;padding:9px 12px;border:1.5px solid var(--gray-200);border-radius:var(--r-md);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;background:var(--surface);cursor:pointer;outline:none;transition:.15s}
.rpt-parts-sel:focus{border-color:var(--navy-700)}
.rpt-parts-qty{width:64px;padding:9px 10px;border:1.5px solid var(--gray-200);border-radius:var(--r-md);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;text-align:center;outline:none;transition:.15s}
.rpt-parts-qty:focus{border-color:var(--navy-700)}
.rpt-parts-add{background:var(--navy-700);color:var(--surface);border:none;padding:9px 18px;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:800;cursor:pointer;white-space:nowrap;font-family:'Paperlogy',sans-serif;transition:.15s}
.rpt-parts-add:hover{background:var(--blue-text)}
.rpt-parts-list{display:flex;flex-wrap:wrap;gap:6px;min-height:28px}
.rpt-part-chip{display:flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--blue-border);border-radius:var(--r-md);padding:5px 10px;font-size:var(--fs-xs)}
.rpt-part-chip-name{font-weight:600;color:var(--navy-800)}
.rpt-part-chip-no{color:var(--gray-400);font-family:monospace;font-size:var(--fs-2xs)}
.rpt-part-chip-maker{font-size:var(--fs-2xs);color:var(--gray-500);background:var(--gray-100);border-radius:var(--r-sm);padding:1px 5px}
.rpt-part-chip-qty{background:var(--blue-bg);color:var(--blue-text);border-radius:var(--r-sm);padding:1px 7px;font-weight:800;font-size:var(--fs-2xs)}
.rpt-part-chip-del{background:none;border:none;color:var(--gray-400);cursor:pointer;font-size:var(--fs-sm);padding:0;line-height:1;margin-left:2px}
.rpt-part-chip-del:hover{color:var(--red-strong)}
.rpt-fault-sel{width:100%;padding:11px 14px;border:2px solid var(--gray-200);border-radius:var(--r-lg);font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;cursor:pointer;outline:none;transition:.15s;background:var(--surface)}
.rpt-fault-sel:focus{border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(30,92,168,.12)}

/* ── 서비스 백과 ──────────────────────────────────── */
.wiki-layout{display:flex;flex-direction:column;height:100%;overflow:hidden}
.wiki-tab-bar{display:flex;background:var(--gray-50);border-bottom:2px solid var(--gray-200);padding:0 20px;flex-shrink:0}
.wiki-tab{background:none;border:none;border-bottom:3px solid transparent;padding:11px 20px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;color:var(--gray-500);margin-bottom:-2px;transition:.15s;font-family:'Paperlogy',sans-serif}
.wiki-tab:hover{color:var(--navy-800);background:var(--gray-100)}
.wiki-tab.active{color:var(--navy-700);border-bottom-color:var(--navy-700)}
.wiki-content{flex:1;overflow-y:auto;padding:18px 24px;display:none}
.wiki-content.active{display:block}
.wiki-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;padding:12px 16px;background:var(--gray-50);border-radius:var(--r-lg);border:1px solid var(--gray-200)}
.wiki-fsel{padding:7px 10px;border:1.5px solid var(--gray-200);border-radius:var(--r-md);font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif;cursor:pointer;background:var(--surface);outline:none}
.wiki-finp{padding:7px 10px;border:1.5px solid var(--gray-200);border-radius:var(--r-md);font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif;outline:none;background:var(--surface)}
.wiki-finp:focus,.wiki-fsel:focus{border-color:var(--navy-700)}
.wiki-kpi-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.wiki-kpi{background:var(--surface);border:1.5px solid var(--gray-200);border-radius:var(--r-lg);padding:14px 20px;flex:1;min-width:120px;text-align:center}
.wiki-kpi-lbl{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.wiki-kpi-val{font-size:var(--fs-xl);font-weight:800;color:var(--navy-800);line-height:1}
.wiki-kpi-sub{font-size:var(--fs-2xs);color:var(--gray-400);margin-top:4px}
.wiki-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.wiki-tbl th{background:var(--gray-50);font-weight:800;color:var(--gray-600);font-size:var(--fs-xs);padding:8px 12px;border-bottom:1.5px solid var(--gray-200);text-align:left;white-space:nowrap;position:sticky;top:0}
.wiki-tbl td{padding:9px 12px;border-bottom:1px solid var(--gray-100);vertical-align:middle;color:var(--gray-700)}
.wiki-tbl tr:hover td{background:var(--gray-50);cursor:pointer}
.wiki-card{background:var(--surface);border:1.5px solid var(--gray-200);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:12px;transition:.15s}
.wiki-card:hover{border-color:var(--blue-300);box-shadow:0 2px 16px rgba(30,92,168,.08);cursor:pointer}
.wiki-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.wiki-card-body{font-size:var(--fs-xs);color:var(--gray-700);line-height:1.7}
.wiki-card-field{margin-top:8px}
.wiki-card-field-lbl{font-size:var(--fs-2xs);font-weight:800;color:var(--gray-400);margin-bottom:2px}
.wiki-hl{background:#fef9c3;border-radius:2px;padding:0 2px}
.wiki-fault-badge{display:inline-block;background:var(--gray-100);border-radius:var(--r-sm);padding:2px 9px;font-size:var(--fs-xs);font-weight:600;color:var(--gray-600)}
.wiki-part-chip-sm{display:inline-block;background:var(--navy-50);border:1px solid var(--blue-border);border-radius:var(--r-sm);padding:2px 7px;font-size:var(--fs-2xs);margin:2px 2px 0 0}
/* Phase 2 — 보고서 추가 필드 */
.sv-rpt-grid-3{display:grid;grid-template-columns:1fr 1fr auto;gap:14px}
.qt-list-item{background:var(--surface);border:1.5px solid var(--gray-200);border-radius:var(--r-lg);padding:13px 16px;margin-bottom:8px;cursor:pointer;transition:.15s}
.qt-list-item:hover,.qt-list-item.selected{border-color:var(--navy-700);background:var(--navy-50)}
.qt-status{display:inline-block;padding:2px 9px;border-radius:var(--r-lg);font-size:var(--fs-2xs);font-weight:800}
.qt-status.견적{background:#fef9c3;color:var(--yellow-text)}
.qt-status.검토중{background:var(--blue-bg);color:#1e40af}
.qt-status.수주{background:var(--green-bg-soft);color:var(--green-text-dark)}
.qt-status.실패{background:var(--red-bg);color:var(--red-text)}
.qt-item-row{display:grid;grid-template-columns:3fr 1fr 1fr 110px;gap:8px;align-items:center;margin-bottom:6px}
.qt-item-inp{border:1px solid #d1d5db;border-radius:var(--r-md);padding:5px 8px;font-size:var(--fs-xs);font-family:'Paperlogy',sans-serif;outline:none;width:100%;box-sizing:border-box}
.qt-total-box{background:var(--navy-50);border:1.5px solid var(--blue-300);border-radius:var(--r-md);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.sv-sch-wrap{overflow-x:auto;padding:0 4px 16px}
.sv-sch-table{border-collapse:collapse;min-width:700px;width:100%}
.sv-sch-table th{background:var(--navy-800);color:var(--surface);font-size:var(--fs-2xs);font-weight:600;padding:8px 6px;text-align:center;white-space:nowrap;border:1px solid var(--navy-700)}
.sv-sch-table td{vertical-align:top;border:1px solid var(--gray-200);padding:4px 5px;min-width:90px;min-height:52px;font-size:var(--fs-2xs);background:var(--surface)}
.sv-sch-table td.today-col{background:var(--navy-50)}
.sv-sch-table td.conflict{background:#fff1f2!important}
.sv-sch-name-col{background:var(--gray-50)!important;font-weight:600;color:var(--navy-800);font-size:var(--fs-xs);white-space:nowrap;text-align:left;padding:6px 10px!important;min-width:80px}
.sv-sch-chip{display:block;background:var(--blue-bg);color:#1e40af;border-radius:var(--r-sm);padding:2px 5px;margin-bottom:2px;font-size:var(--fs-2xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.sv-sch-chip.확정{background:var(--green-bg-soft);color:var(--green-text-dark)}
.sv-sch-chip.취소{background:var(--red-bg);color:var(--red-text)}
.bwts-status-card{background:linear-gradient(135deg,var(--navy-50),var(--blue-bg));border:1.5px solid var(--blue-300);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px}
.bwts-dday{display:inline-block;padding:3px 10px;border-radius:var(--r-lg);font-size:var(--fs-2xs);font-weight:800;margin-left:8px}
.bwts-dday.ok{background:var(--green-bg-soft);color:var(--green-text-dark)}
.bwts-dday.warn{background:#fef9c3;color:var(--yellow-text)}
.bwts-dday.over{background:var(--red-bg);color:var(--red-text)}
.bwts-timeline-item{display:flex;gap:12px;margin-bottom:14px}
.bwts-tl-icon{width:32px;height:32px;border-radius:50%;background:var(--navy-50);border:2px solid var(--blue-300);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);flex-shrink:0}
.bwts-tl-body{flex:1;background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-md);padding:9px 13px}
/* ── v1.163 인쇄 스타일 ── */
#sv-print-area{display:none}
@media print{
  *{visibility:hidden!important}
  #sv-print-area,#sv-print-area *{visibility:visible!important}
  #sv-print-area{display:block!important;position:fixed!important;top:0!important;left:0!important;width:100%!important;z-index:99999!important}
  @page{size:A4 portrait;margin:18mm 15mm 20mm}
  .prn-page{font-family:'Paperlogy','Noto Sans KR',Arial,sans-serif;font-size:var(--fs-xs);color:#1e293b;line-height:1.55}
  .prn-hdr{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:2.5px solid var(--navy-800);padding-bottom:12px;margin-bottom:14px}
  .prn-logo{height:44px;object-fit:contain}
  .prn-title{font-size:var(--fs-lg);font-weight:800;color:var(--navy-800);letter-spacing:-.5px;margin-top:4px}
  .prn-sub{font-size:var(--fs-2xs);color:var(--gray-500);text-align:right;margin-top:6px;line-height:1.6}
  .prn-letterhead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px double var(--navy-800);padding-bottom:14px;margin-bottom:18px}
  .prn-letterhead-left{flex:0 0 auto;max-width:55%}
  .prn-letterhead-left .prn-logo{height:54px;display:block;margin-bottom:6px}
  .prn-company-name{font-size:var(--fs-lg);font-weight:800;color:var(--navy-800);letter-spacing:-.3px;line-height:1.1}
  .prn-company-tag{font-size:10pt;color:var(--gray-500);font-weight:600;letter-spacing:.4px;margin-top:2px}
  .prn-letterhead-right{flex:0 0 auto;max-width:42%;text-align:right}
  .prn-cost-confidential{background:#fffbeb;border:1.5px dashed var(--yellow);border-radius:var(--r-md);padding:10px 12px}
  .prn-sign-name{font-size:11pt;font-weight:600;color:var(--navy-800);text-align:center;margin-top:6px;min-height:18px}
  .prn-info{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-md);padding:11px 14px;margin-bottom:14px;font-size:var(--fs-xs)}
  .prn-info-row{display:flex;gap:6px}
  .prn-info-lbl{color:var(--gray-500);font-weight:600;min-width:72px;flex-shrink:0}
  .prn-info-val{font-weight:600;color:#1e293b}
  .prn-section{margin-bottom:13px}
  .prn-sec-title{font-size:var(--fs-xs);font-weight:800;color:var(--navy-800);border-left:4px solid var(--navy-700);padding-left:8px;margin-bottom:6px}
  .prn-sec-body{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-md);padding:9px 12px;white-space:pre-wrap;font-size:var(--fs-xs);line-height:1.6}
  .prn-parts-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-2xs);margin-top:2px}
  .prn-parts-tbl th{background:var(--navy-800);color:var(--surface);padding:6px 9px;text-align:left;font-weight:600}
  .prn-parts-tbl td{padding:5px 9px;border-bottom:1px solid var(--gray-100)}
  .prn-parts-tbl tr:nth-child(even) td{background:var(--gray-50)}
  .prn-sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;padding-top:14px;border-top:1.5px solid var(--gray-200)}
  .prn-sign-box{border:1px solid var(--gray-200);border-radius:var(--r-md);padding:12px;text-align:center}
  .prn-sign-title{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);margin-bottom:28px}
  .prn-sign-line{border-top:1px solid var(--gray-400);margin:0 16px;margin-top:10px;padding-top:5px;font-size:var(--fs-2xs);color:var(--gray-400)}
  .prn-footer{text-align:center;font-size:var(--fs-2xs);color:var(--gray-400);margin-top:20px;padding-top:10px;border-top:1px solid var(--gray-100)}
}

/* ════════════════════════════════════════════════
   DESIGN SYSTEM v1.185 — 통합 컴포넌트
════════════════════════════════════════════════ */

/* ── 버튼 시스템 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 16px;border:none;border-radius:10px;font-size:var(--fs-sm);font-weight:600;font-family:'Pretendard','Paperlogy',sans-serif;cursor:pointer;transition:background .15s,box-shadow .15s,transform .12s;white-space:nowrap;line-height:1.3;text-decoration:none;box-sizing:border-box}
.btn:active{transform:translateY(1px)}   /* v2.348 D4: 누름 피드백(모든 버튼) */
.btn--primary{background:var(--primary);color:var(--surface)}
.btn--primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(30,92,168,.25)}
.btn--navy{background:var(--navy-800);color:var(--surface)}
.btn--navy:hover{background:var(--navy-900)}
.btn--ghost{background:var(--gray-100);color:var(--gray-700);border:1.5px solid var(--border)}
.btn--ghost:hover{background:var(--gray-200)}
.btn--danger{background:var(--red-bg);color:var(--red-text)}
.btn--danger:hover{background:var(--red-border)}
.btn--outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn--outline:hover{background:var(--bg)}
.btn--green{background:var(--green-bg);color:var(--green-text)}
.btn--green:hover{background:#bbf7d0}
.btn--sm{padding:4px 10px;font-size:var(--fs-xs);border-radius:8px}
.btn--lg{padding:11px 24px;font-size:var(--fs-sm)}
.btn--full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── 인풋 시스템 ── */
.inp{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:10px;font-size:var(--fs-sm);font-family:'Pretendard','Paperlogy',sans-serif;color:var(--text);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,92,168,.1)}
.inp::placeholder{color:var(--text-3)}
.inp--sm{padding:5px 9px;font-size:var(--fs-xs)}
.inp--lg{padding:11px 14px;font-size:var(--fs-sm)}
textarea.inp{resize:vertical;min-height:80px;line-height:1.6}
select.inp{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}

/* ── 카드 시스템 ── */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-xs)}
.card--tight{padding:var(--sp-3) var(--sp-4)}
.card--flush{padding:0;overflow:hidden}
.card--hover{transition:box-shadow .18s,transform .18s;cursor:pointer}
.card--hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card--colored{position:relative}
.card--colored::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.card--blue::before{background:linear-gradient(90deg,var(--navy-800),var(--navy-600))}
.card--green::before{background:linear-gradient(90deg,var(--green-text),var(--green-700))}
.card--orange::before{background:linear-gradient(90deg,#c2410c,var(--orange))}
.card--red::before{background:linear-gradient(90deg,var(--red-text),var(--red))}

/* ── 테이블 시스템 ── */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{background:var(--gray-50);padding:8px 12px;font-size:var(--fs-2xs);font-weight:600;color:var(--text-2);border-bottom:1.5px solid var(--border);white-space:nowrap;text-align:left;position:sticky;top:0;z-index:var(--z-content)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--gray-100);color:var(--text);vertical-align:middle;font-variant-numeric:tabular-nums}   /* v2.348 D4: 숫자 고정폭 정렬(지원 폰트 시 자릿수 정렬) */
.tbl tbody tr:last-child td{border-bottom:none}
/* v2.347 D4: 줄무늬(zebra) — 짝수 행 옅은 음영으로 행 구분 가독성↑. 인라인 배경 행은 그대로(인라인 우선). hover가 이기도록 아래에 hover 규칙 뒤. */
.tbl tbody tr:nth-child(even) td{background:var(--gray-50)}
.tbl tbody tr:hover td{background:#eaf1ff}
.tbl--sm th{padding:6px 10px;font-size:var(--fs-2xs)}
.tbl--sm td{padding:7px 10px;font-size:var(--fs-xs)}
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1.5px solid var(--border);overflow:hidden}

/* ── 배지 시스템 ── */
.badge{display:inline-block;font-size:var(--fs-2xs);font-weight:600;padding:2px 8px;border-radius:var(--r-xl);white-space:nowrap;line-height:1.5}
.badge--blue{background:var(--blue-bg);color:var(--blue-text)}
.badge--green{background:var(--green-bg);color:var(--green-text)}
.badge--yellow{background:var(--yellow-bg);color:var(--yellow-text)}
.badge--red{background:var(--red-bg);color:var(--red-text)}
.badge--gray{background:var(--gray-100);color:var(--gray-500)}
.badge--navy{background:#e0e7ff;color:var(--navy-800)}

/* ── 섹션 제목 ── */
.sect-hdr{font-size:var(--fs-xs);font-weight:800;color:var(--navy-800);border-bottom:2px solid var(--border);padding-bottom:var(--sp-2);margin-bottom:var(--sp-3);margin-top:var(--sp-5);display:flex;align-items:center;gap:var(--sp-2)}
.sect-hdr:first-child,.sect-hdr--notop{margin-top:0}
.sect-hdr--lg{font-size:var(--fs-sm);border-bottom-width:2px}
.sect-sub{font-size:var(--fs-2xs);color:var(--text-2);margin-top:calc(-1*var(--sp-2));margin-bottom:var(--sp-3);line-height:1.55}

/* ── 2단 패널 레이아웃 ── */
.panel-layout{display:flex;height:100%;overflow:hidden}
.panel-list{width:280px;flex-shrink:0;border-right:1.5px solid var(--border);overflow:hidden;background:var(--gray-50);display:flex;flex-direction:column}
.panel-list-head{padding:var(--sp-3);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:var(--sp-2);flex-shrink:0}
.panel-list-body{flex:1;overflow-y:auto;padding:var(--sp-2)}
.panel-detail{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-6);background:var(--surface)}
.panel-detail--flush{padding:0;overflow:hidden}

/* ── 리스트 아이템 공통 ── */
.list-item{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);cursor:pointer;transition:background .12s,border-color .12s;border:1.5px solid transparent;background:var(--surface);margin-bottom:var(--sp-2)}
.list-item:hover{background:#f0f5ff;border-color:rgba(30,92,168,.15)}
.list-item.is-active{background:var(--navy-50);border-color:var(--primary);box-shadow:0 0 0 1px rgba(30,92,168,.1)}

/* ── 빈 상태 ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-3);text-align:center;gap:var(--sp-3)}
.empty-state-icon{font-size:var(--fs-hero);opacity:.5;line-height:1}
.empty-state-title{font-size:var(--fs-sm);font-weight:600;color:var(--text-2);margin:0}
.empty-state-desc{font-size:var(--fs-xs);line-height:1.65;margin:0}

/* ── 폼 ── */
.form-label{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-600);margin-bottom:var(--sp-1);display:block;letter-spacing:.1px}
.form-row{margin-bottom:var(--sp-3)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-3)}

/* ── 툴바 ── */
.toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.toolbar-title{font-size:var(--fs-sm);font-weight:800;color:var(--navy-800)}
.toolbar-spacer{flex:1}

/* ── 필터 칩 ── */
.filter-chip{padding:3px 10px;border-radius:var(--r-xl);border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.12s}
.filter-chip.is-active{background:var(--navy-800);border-color:var(--navy-800);color:var(--surface)}
.filter-chip:hover:not(.is-active){border-color:var(--primary);color:var(--primary)}

/* ── 스탯 행 ── */
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-2) 0;border-bottom:1px solid var(--gray-100);font-size:var(--fs-sm)}
.stat-row:last-child{border-bottom:none}
.stat-val{font-weight:600;color:var(--text)}
.stat-lbl{color:var(--text-2);font-size:var(--fs-xs)}

/* ── v1.186 SIDEBAR LAYOUT ── */
.tab-nav{display:none!important}
.subnav-bar{display:none!important}
.app-body{display:flex;height:calc(100vh - 56px);overflow:hidden}
.app-content{flex:1;min-height:0;overflow-y:auto;position:relative}
/* ═══════════ 사이드바 — Editorial Minimal + 테마(CSS변수) v2.166 ═══════════ */
.sidebar{
  --sb-bg:#1b1e24; --sb-fg:#9aa3b2; --sb-fg-h:#e6e9ef; --sb-on:#ffffff;
  --sb-acc:#5ea9ff; --sb-ico:#5b6675; --sb-line:rgba(255,255,255,.06);
  --sb-sec:#5b6675; --sb-subfg:#71798a; --sb-hover:rgba(255,255,255,.045);
  --sb-tgbg:rgba(255,255,255,.06); --sb-tgfg:rgba(255,255,255,.62); --sb-scroll:rgba(255,255,255,.18);
  width:232px;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;background:var(--sb-bg);display:flex;flex-direction:column;transition:width .22s cubic-bezier(.4,0,.2,1)}
.sidebar.collapsed{width:60px}
/* v2.168: 테마 변수를 body에도 공유 → 메일 등 다른 모듈이 동일 테마 자동 적용 (기본=slate) */
body{--sb-bg:#1b1e24;--sb-fg:#9aa3b2;--sb-fg-h:#e6e9ef;--sb-on:#ffffff;--sb-acc:#5ea9ff;--sb-ico:#5b6675;--sb-line:rgba(255,255,255,.06);--sb-sec:#5b6675;--sb-subfg:#71798a;--sb-hover:rgba(255,255,255,.045);--sb-tgbg:rgba(255,255,255,.06);--sb-tgfg:rgba(255,255,255,.62);--sb-scroll:rgba(255,255,255,.18)}
/* 테마 5종 (관리자가 설정에서 지정 → 전 계정 공통 · 사이드바+메일 동시 적용) */
.sidebar.sbtheme-harbor,body.sbtheme-harbor{--sb-bg:linear-gradient(180deg,#0a1a30 0%,#11243f 60%,#0d1f38 100%);--sb-fg:#aebbce;--sb-fg-h:#fff;--sb-on:#fff;--sb-acc:#60a5fa;--sb-ico:#7e8ea8;--sb-line:rgba(255,255,255,.06);--sb-sec:#6e85a8;--sb-subfg:#8595ab;--sb-hover:rgba(255,255,255,.05);--sb-tgbg:rgba(255,255,255,.08);--sb-tgfg:rgba(255,255,255,.72);--sb-scroll:rgba(255,255,255,.2)}
.sidebar.sbtheme-brass,body.sbtheme-brass{--sb-bg:#16181c;--sb-fg:#9d978c;--sb-fg-h:#f0ead9;--sb-on:#f5efe0;--sb-acc:#d8b56f;--sb-ico:#7d776c;--sb-line:rgba(201,169,106,.13);--sb-sec:rgba(201,169,106,.62);--sb-subfg:#837d72;--sb-hover:rgba(201,169,106,.06);--sb-tgbg:rgba(201,169,106,.1);--sb-tgfg:#cbc6bd;--sb-scroll:rgba(201,169,106,.25)}
.sidebar.sbtheme-pearl,body.sbtheme-pearl{--sb-bg:#f4f7fa;--sb-fg:#5b6573;--sb-fg-h:#0f172a;--sb-on:#0f172a;--sb-acc:#0e7490;--sb-ico:#9aa6b4;--sb-line:#e6ecf1;--sb-sec:#94a3b8;--sb-subfg:#6b7686;--sb-hover:#eaeff4;--sb-tgbg:#eaeff4;--sb-tgfg:#5b6573;--sb-scroll:rgba(15,23,42,.18)}
.sidebar.sbtheme-tide,body.sbtheme-tide{--sb-bg:linear-gradient(165deg,#063a40 0%,#0a585c 60%,#076b6b 100%);--sb-fg:#9fd2cd;--sb-fg-h:#fff;--sb-on:#fff;--sb-acc:#5eead4;--sb-ico:#6fa8a3;--sb-line:rgba(255,255,255,.08);--sb-sec:#5eead4;--sb-subfg:#84bdb8;--sb-hover:rgba(255,255,255,.06);--sb-tgbg:rgba(255,255,255,.1);--sb-tgfg:#c5e7e4;--sb-scroll:rgba(94,234,212,.3)}
/* 브랜드 헤더 */
.sb-hdr{padding:14px 16px 8px;flex-shrink:0}
.sb-brand{display:flex;align-items:baseline;gap:7px;padding:0 2px 12px;margin-bottom:8px;border-bottom:1px solid var(--sb-line)}
.sb-brand-wm{font-size:15px;font-weight:800;letter-spacing:2.5px;color:var(--sb-on);line-height:1}
.sb-brand-tag{font-size:9px;font-weight:700;letter-spacing:2.5px;color:var(--sb-acc)}
.sidebar.collapsed .sb-brand{display:none}
.sb-toggle{width:100%;display:flex;align-items:center;gap:9px;background:var(--sb-tgbg);border:none;border-radius:10px;padding:8px 11px;cursor:pointer;color:var(--sb-tgfg);font-family:'Paperlogy',sans-serif;font-size:var(--fs-xs);font-weight:600;transition:filter .15s}
.sb-toggle:hover{filter:brightness(1.25)}
.sb-toggle-icon{font-size:var(--fs-sm);flex-shrink:0;width:18px;text-align:center}
.sb-toggle-lbl{white-space:nowrap;overflow:hidden}
.sidebar.collapsed .sb-toggle-lbl{display:none}
.sb-nav{flex:1;padding:2px 0 8px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.sb-nav::-webkit-scrollbar{width:3px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--sb-scroll);border-radius:2px}
.sb-group{margin-bottom:0}
/* 섹션 라벨 */
.sb-seclbl{font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--sb-sec);opacity:.85;padding:18px 18px 5px}
.sidebar.collapsed .sb-seclbl{display:none}
/* Level 1 대메뉴 — 타이포 중심 · 헤어라인 · 아이콘 우측정렬 */
.sb-item-btn{position:relative;width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:none;border-bottom:1px solid var(--sb-line);color:var(--sb-fg);font-size:13.5px;font-weight:500;padding:12px 18px;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:color .14s,background .14s;text-align:left;white-space:nowrap;overflow:hidden;letter-spacing:-.2px}
.sb-item-btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sb-acc);transition:width .15s}
.sb-item-btn:hover{background:var(--sb-hover);color:var(--sb-fg-h)}
.sb-item-btn:hover .sb-icon{color:var(--sb-fg-h)}
.sb-item-btn.active,.sb-item-btn.open{color:var(--sb-on);font-weight:700}
.sb-item-btn.active::before,.sb-item-btn.open::before{width:3px}
.sb-item-btn.active .sb-icon,.sb-item-btn.open .sb-icon{color:var(--sb-acc)}
.sb-label{order:1;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar.collapsed .sb-label{display:none}
.sb-arrow{order:2;font-size:11px;font-weight:600;transition:transform .25s ease,opacity .15s;flex-shrink:0;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--sb-ico);background:none;line-height:1;opacity:.65}
.sidebar.collapsed .sb-arrow{display:none}
.sb-item-btn:hover .sb-arrow{opacity:1}
.sb-item-btn.open .sb-arrow{transform:rotate(180deg);opacity:1;color:var(--sb-acc)}
.sb-icon{order:3;font-size:16px;flex-shrink:0;width:18px;text-align:center;line-height:1;color:var(--sb-ico);opacity:.9}
/* 하위 펼침 */
.sb-sub{overflow:hidden;max-height:0;transition:max-height .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.sb-sub.open{max-height:1600px;padding:2px 0 6px}
.sidebar.collapsed .sb-sub{display:none}
/* Level 3 상세메뉴 */
.sb-sub-btn{position:relative;width:100%;display:flex;align-items:center;gap:9px;background:transparent;border:none;color:var(--sb-subfg);font-size:12px;font-weight:500;padding:7px 16px 7px 30px;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:background .12s,color .12s;text-align:left;white-space:nowrap;letter-spacing:-.1px}
.sb-sub-btn:hover{color:var(--sb-fg-h)}
.sb-sub-btn.active{color:var(--sb-acc);font-weight:700}
.sb-sub-btn.active::before{content:'';position:absolute;left:18px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:99px;background:var(--sb-acc)}
.sb-sub-btn-ico{flex-shrink:0;width:18px;text-align:center;font-size:14px;opacity:.7;color:var(--sb-ico)}
.sb-sub-btn:hover .sb-sub-btn-ico,.sb-sub-btn.active .sb-sub-btn-ico{color:var(--sb-acc);opacity:1}
/* 메뉴 트리 편집기 드래그 (기존 유지) */
.mt-ghost{opacity:.4;background:var(--blue-bg)!important;border:2px dashed var(--navy-700)!important}
.mt-chosen{background:var(--navy-50)!important;border-color:var(--navy-700)!important;box-shadow:0 4px 12px rgba(30,92,168,.18)}
.mt-grab{user-select:none}
.mt-items:empty::after{content:'(여기로 항목을 끌어 놓기)';display:block;text-align:center;padding:10px;color:var(--gray-300);font-size:var(--fs-2xs);font-style:italic}
/* Level 2 그룹 헤더 */
.sb-sub-group{display:flex;flex-direction:column;margin-top:4px;position:relative}
.sb-sub-group+.sb-sub-group{margin-top:6px;border-top:1px solid var(--sb-line);padding-top:4px}
.sb-sub-group-hdr{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--sb-sec);font-size:10px;font-weight:800;padding:7px 16px 5px 18px;cursor:pointer;text-align:left;letter-spacing:.4px;text-transform:uppercase;transition:color .15s;font-family:'Paperlogy',sans-serif}
.sb-sub-group-hdr:hover{color:var(--sb-fg-h)}
.sb-sub-group-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;font-size:var(--fs-sm);opacity:.9;color:var(--sb-sec)}
.sb-sub-group-name{flex:1}
.sb-sub-group-chev{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s;font-size:9px;width:12px;height:12px;opacity:.6;font-weight:800;color:var(--sb-sec)}
.sb-sub-group-hdr:hover .sb-sub-group-chev{opacity:1;color:var(--sb-acc)}
.sb-sub-group.collapsed .sb-sub-group-chev{transform:rotate(-90deg)}
.sb-sub-group.collapsed .sb-sub-group-items{max-height:0;overflow:hidden}
.sb-sub-group-items{display:flex;flex-direction:column;gap:1px;transition:max-height .25s ease;position:relative}
.sb-sub-group-items::before{content:'';position:absolute;left:25px;top:2px;bottom:2px;width:1px;background:var(--sb-line)}
.sb-sub-group.is-admin-only .sb-sub-group-hdr{color:rgba(252,211,77,.6)}
.sb-sub-group.is-experimental .sb-sub-group-hdr{color:rgba(251,191,36,.6)}
.sb-sub-btn.experimental-item{color:rgba(252,211,77,.78)}
.sb-sub-btn.experimental-item::after{content:'EXP';margin-left:auto;margin-right:6px;font-size:var(--fs-2xs);font-weight:600;opacity:.7;letter-spacing:.3px}
.sidebar.collapsed .sb-sub-group-hdr{display:none}
.sidebar.collapsed .sb-sub-group-items{max-height:none!important}
.sb-footer{border-top:1px solid var(--sb-line);padding:10px 8px;flex-shrink:0}
.sb-footer .js-app-version{color:var(--sb-sec)!important;opacity:.7}
.sidebar.collapsed .sb-item-btn{padding:12px;justify-content:center}
/* 설정 — 사이드바 테마 피커 스와치 */
.sbtheme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.sbtheme-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 6px;background:var(--surface);border:1.5px solid var(--gray-200);border-radius:11px;cursor:pointer;font-family:'Paperlogy',sans-serif;transition:.14s}
.sbtheme-swatch:hover:not([disabled]){border-color:#60a5fa;transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,92,168,.12)}
.sbtheme-swatch[disabled]{cursor:not-allowed;opacity:.6}
.sbtheme-swatch .sw-prev{width:100%;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:flex-start;padding-left:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sbtheme-swatch .sw-prev i{width:10px;height:10px;border-radius:99px;display:block}
.sbtheme-swatch .sw-nm{font-size:10.5px;font-weight:700;color:var(--gray-600);text-align:center;line-height:1.2}
.sbtheme-swatch.on{border-color:var(--navy-700);background:var(--navy-50);box-shadow:0 0 0 2px rgba(30,92,168,.18)}
.sbtheme-swatch.on .sw-nm{color:var(--navy-800)}
.sbtheme-note{grid-column:1/-1;font-size:var(--fs-2xs);color:var(--gray-500);margin-top:2px}
/* 높이 계산 갱신: subnav 제거로 88px→56px */
#tab-crm{height:calc(100vh - 56px)!important}
#tab-service.active{height:calc(100vh - 56px)!important}
#tab-projmgmt{height:calc(100vh - 56px)!important}
#tab-dbmgmt{height:calc(100vh - 56px)!important}

/* ── v1.187 메뉴 관리 ── */
.sb-nav{display:flex;flex-direction:column}
.sb-sub{display:flex;flex-direction:column}
.mx-toggle-wrap{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.mx-toggle-inp{display:none}
.mx-toggle-track{width:34px;height:18px;background:var(--gray-300);border-radius:var(--r-md);position:relative;transition:background .18s;flex-shrink:0}
.mx-toggle-inp:checked + .mx-toggle-track{background:var(--navy-700)}
.mx-toggle-track::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--surface);border-radius:50%;transition:transform .18s ease;box-shadow:0 1px 3px rgba(0,0,0,.18);will-change:transform}
.mx-toggle-inp:checked + .mx-toggle-track::after{transform:translateX(16px)}
.menu-mgmt-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-md);background:var(--gray-50);border:1px solid var(--gray-200);margin-bottom:5px}
.menu-mgmt-row:hover{background:var(--gray-100)}
.menu-mgmt-row.sub{margin-left:22px;background:var(--surface);padding:6px 10px;font-size:var(--fs-xs)}
.menu-mgmt-icon{font-size:var(--fs-md);width:22px;text-align:center;flex-shrink:0}
.menu-mgmt-label{flex:1;font-size:var(--fs-sm);font-weight:600;color:#1e293b}
.menu-mgmt-row.sub .menu-mgmt-label{font-size:var(--fs-xs);font-weight:600;color:var(--gray-600)}
.menu-order-btn{background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--r-sm);cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-2xs);color:var(--gray-500);transition:.12s;flex-shrink:0}
.menu-order-btn:hover{background:var(--gray-200);color:#1e293b}
.menu-order-btn:disabled{opacity:.35;cursor:default}
.menu-mgmt-section{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden}
.menu-mgmt-main-hdr{padding:10px 12px;background:var(--surface);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:8px}
.menu-mgmt-subs{padding:8px 10px;display:flex;flex-direction:column;gap:4px}

/* ── v1.188 팀 시스템 ── */
.team-badge{display:inline-block;padding:2px 8px;border-radius:var(--r-lg);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.2px}
.team-list-row{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-md);margin-bottom:4px}
.team-color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.team-list-name{flex:1;font-size:var(--fs-sm);font-weight:600;color:#1e293b}
.team-list-cnt{font-size:var(--fs-2xs);color:var(--gray-400)}
.team-del-btn{background:none;border:none;cursor:pointer;color:var(--red);font-size:var(--fs-sm);padding:2px 6px;border-radius:var(--r-sm);transition:.12s}
.team-del-btn:hover{background:var(--red-bg)}
.stg-user-row{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-md);border:1px solid var(--gray-200);background:var(--gray-50)}
.stg-user-name{font-weight:600;font-size:var(--fs-xs);min-width:60px}
.stg-user-key{font-size:var(--fs-2xs);color:var(--gray-400);flex:1}
.stg-user-del{background:none;border:none;cursor:pointer;color:var(--red);font-size:var(--fs-sm);padding:2px 5px}
.team-sel{border:1.5px solid var(--border);border-radius:var(--r-md);padding:7px 10px;font-family:'Paperlogy',sans-serif;font-size:var(--fs-xs);background:var(--surface);color:var(--text);outline:none;flex:1}
.team-sel:focus{border-color:var(--primary)}

/* ── v1.189 로그인 재설계 ── */
.lp-field-wrap{margin-bottom:12px}
.lp-field-label{font-size:var(--fs-2xs);font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.3px;margin-bottom:5px;display:block;font-family:'Paperlogy',sans-serif}
.lp-field{width:100%;height:48px;padding:0 14px;border:1.5px solid rgba(255,255,255,.18);border-radius:var(--r-lg);background:rgba(255,255,255,.08);color:var(--surface);font-family:'Paperlogy',sans-serif;font-size:var(--fs-sm);font-weight:600;outline:none;transition:.18s;backdrop-filter:blur(4px);box-sizing:border-box}
.lp-field:focus{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.13);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.lp-field::placeholder{color:rgba(255,255,255,.28)}
.lp-field option{background:#0d2645;color:var(--surface)}
.lp-pw-wrap{position:relative}
.lp-pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:rgba(255,255,255,.4);font-size:var(--fs-sm);padding:4px;transition:.12s}
.lp-pw-eye:hover{color:rgba(255,255,255,.8)}
.session-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:600;padding:2px 8px;border-radius:var(--r-lg);background:var(--green-bg);color:var(--green-text)}
/* 비밀번호 변경 폼 */
.pw-change-form{display:flex;flex-direction:column;gap:8px}
.pw-change-form .inp{width:100%}

/* ── v1.203 권한 런타임 / 내 설정 개선 ── */
.session-info-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--green-50);border:1px solid #bbf7d0;border-radius:var(--r-md);font-size:var(--fs-2xs);color:var(--green-text);margin-top:8px}
.session-exp-warn{background:#fffbeb;border-color:var(--yellow-border);color:var(--yellow-text)}
.perm-all-badge{display:inline-block;padding:1px 8px;border-radius:var(--r-md);background:var(--blue-bg);color:var(--blue-text);font-size:var(--fs-2xs);font-weight:600;margin-left:6px}

/* ═══════════════════════════════════════════════════════
   비용 등록 폼 — 엔지니어 다중 선택 칩
   ═══════════════════════════════════════════════════════ */
.arr-cost-eng-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1.5px solid var(--border);border-radius:var(--r-xl);background:var(--surface);cursor:pointer;font-size:var(--fs-xs);font-weight:600;color:var(--gray-600);transition:.12s;user-select:none}
.arr-cost-eng-chip:hover{border-color:var(--primary);background:var(--navy-50)}
.arr-cost-eng-chip input[type="checkbox"]{margin:0;cursor:pointer}
.arr-cost-eng-chip:has(input:checked){background:var(--primary);border-color:var(--primary);color:var(--surface)}
.arr-cost-eng-chip:has(input:checked) span{color:var(--surface)}

/* ═══════════════════════════════════════════════════════
   서비스 현황 — 어레인지 진행상태 보드
   ═══════════════════════════════════════════════════════ */
.sv-flow-period-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:3px 10px;cursor:pointer;font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);font-family:'Paperlogy',sans-serif;transition:.15s}
.sv-flow-period-btn.active{background:var(--primary);border-color:var(--primary);color:var(--surface)}
.sv-flow-period-btn:hover:not(.active){background:var(--gray-100)}
.sv-flow-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:10px 12px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.sv-flow-card:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-md)}
.sv-flow-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.sv-flow-card[data-st="접수"]::before{background:var(--gray-400)}
.sv-flow-card[data-st="어레인지중"]::before{background:var(--yellow)}
.sv-flow-card[data-st="출발확정"]::before{background:var(--navy-500)}
.sv-flow-card[data-st="진행중"]::before{background:var(--green)}
.sv-flow-card[data-st="완료"]::before{background:#22c55e}
.sv-flow-card[data-st="마감"]::before{background:var(--gray-600)}
.sv-flow-card-lbl{font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);display:flex;align-items:center;gap:4px;margin-top:2px}
.sv-flow-card-cnt{font-size:var(--fs-xl);font-weight:800;color:var(--navy-800);line-height:1;letter-spacing:-.5px}
.sv-flow-card-sub{font-size:var(--fs-2xs);color:var(--gray-400);font-weight:600}
@media (max-width: 1024px){#sv-arr-flow-cards{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width: 480px){#sv-arr-flow-cards{grid-template-columns:repeat(2,1fr)!important}}

/* ═══════════════════════════════════════════════════════
   엔지니어 카드 뱃지 (등급/코디네이터/계정연결)
   ═══════════════════════════════════════════════════════ */
.sv-eng-card{cursor:pointer;transition:transform .12s, box-shadow .12s, border-color .12s}
.sv-eng-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)}
.sv-eng-card.coord{background:linear-gradient(135deg,#fffbeb 0%,var(--surface) 60%);border-color:var(--yellow-border)}
.sv-eng-grade-badge{display:inline-block;padding:2px 8px;border-radius:var(--r-lg);background:var(--navy-50);color:#1e40af;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.2px;border:1px solid var(--blue-border)}
.sv-eng-coord-badge{display:inline-block;padding:2px 8px;border-radius:var(--r-lg);background:var(--yellow-bg);color:var(--yellow-text);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.2px;border:1px solid var(--yellow-border)}
.sv-eng-acct-badge{display:inline-block;padding:2px 7px;border-radius:var(--r-md);background:var(--green-50);color:var(--green-text);font-size:var(--fs-2xs);font-weight:600;border:1px solid #bbf7d0}
.sv-eng-name-link{color:var(--navy-800);font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.sv-eng-name-link:hover{text-decoration:underline;text-decoration-color:var(--primary)}

/* 엔지니어 월별 드릴다운 드로어 */
#eng-detail-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:var(--z-modal);display:none;animation:fadeIn .15s}
#eng-detail-drawer{position:fixed;top:0;right:0;bottom:0;width:680px;max-width:96vw;background:var(--surface);z-index:var(--z-modal);display:none;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.18);animation:slideInRight .22s cubic-bezier(.22,1,.36,1)}
@keyframes slideInRight{from{transform:translateX(40px);opacity:.4}to{transform:translateX(0);opacity:1}}
#eng-detail-drawer.open, #eng-detail-overlay.open{display:flex}
.engd-head{padding:18px 22px;background:linear-gradient(135deg,#0d2645 0%,var(--navy-700) 100%);color:var(--surface);flex-shrink:0}
.engd-head-name{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.5px}
.engd-head-sub{font-size:var(--fs-xs);opacity:.78;margin-top:3px}
.engd-head-badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.engd-body{flex:1;overflow-y:auto;padding:16px 22px 60px}
.engd-month-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:8px 12px;background:var(--gray-100);border-radius:var(--r-md)}
.engd-month-bar button{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:3px 10px;cursor:pointer;font-size:var(--fs-sm);font-family:'Paperlogy',sans-serif;color:var(--gray-600)}
.engd-month-bar button:hover{background:var(--primary);color:var(--surface);border-color:var(--primary)}
.engd-month-lbl{font-weight:800;color:var(--navy-800);font-size:var(--fs-sm);flex:1;text-align:center}
.engd-kpi-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.engd-kpi{background:var(--gray-50);border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 12px}
.engd-kpi-lbl{font-size:var(--fs-2xs);color:var(--gray-400);font-weight:600}
.engd-kpi-val{font-size:var(--fs-lg);color:var(--navy-800);font-weight:800;margin-top:2px;letter-spacing:-.4px}
.engd-rec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:10px}
.engd-rec-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.engd-rec-vessel{font-size:var(--fs-sm);font-weight:800;color:var(--navy-800)}
.engd-rec-date{font-size:var(--fs-2xs);color:var(--gray-400);font-weight:600}
.engd-rec-meta{font-size:var(--fs-2xs);color:var(--gray-500);margin-bottom:8px}
.engd-cost-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.engd-cost-table th{background:var(--gray-100);padding:5px 8px;text-align:left;font-size:var(--fs-2xs);font-weight:600;color:var(--gray-500);border-bottom:1px solid var(--gray-200)}
.engd-cost-table td{padding:5px 8px;border-bottom:1px solid var(--gray-100)}
.engd-cost-trip{color:#1e40af;font-weight:600}
.engd-cost-inc{color:var(--yellow-text);font-weight:600}
.engd-rec-total{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--gray-50);border-radius:var(--r-md);margin-top:4px;font-size:var(--fs-xs);font-weight:600;color:var(--navy-800)}

/* ═══════════════════════════════════════════════════════
   Phase 2 — Toast 알림 / 키보드 포커스 / 모달 베이스
   ═══════════════════════════════════════════════════════ */
#mx-toast-host{position:fixed;inset:auto;top:74px;right:20px;margin:0;border:0;padding:0;background:transparent;overflow:visible;width:auto;height:auto;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:380px} /* v2.574: inset/margin 리셋 = Popover 승격(top-layer) 시 UA 중앙정렬 무력화 — 우상단 고정 유지 */
.mx-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:11px 14px 11px 12px;border-radius:var(--r-lg);background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md);font-size:var(--fs-sm);color:var(--text);min-width:240px;animation:mxToastIn .22s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.mx-toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.mx-toast.ok::before{background:var(--green)}
.mx-toast.ok{background:var(--green-50);border-color:#bbf7d0}
.mx-toast.warn::before{background:var(--yellow)}
.mx-toast.warn{background:#fffbeb;border-color:var(--yellow-border)}
.mx-toast.err::before{background:var(--red)}
.mx-toast.err{background:#fef2f2;border-color:var(--red-border)}
.mx-toast.info::before{background:var(--navy-600)}
.mx-toast-icon{font-size:var(--fs-md);line-height:1.2;flex-shrink:0}
.mx-toast-body{flex:1;line-height:1.45;word-break:break-word;padding-right:4px}
.mx-toast-title{font-weight:800;color:var(--navy-800);font-size:var(--fs-xs);margin-bottom:1px;letter-spacing:-.2px}
.mx-toast-x{background:none;border:none;color:var(--text-3);font-size:var(--fs-md);cursor:pointer;padding:2px 4px;line-height:1;flex-shrink:0;border-radius:var(--r-sm)}
.mx-toast-x:hover{background:rgba(0,0,0,.06);color:var(--text)}
.mx-toast.leaving{animation:mxToastOut .2s ease forwards}
@keyframes mxToastIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes mxToastOut{to{opacity:0;transform:translateX(40px) scale(.96)}}

/* 키보드 포커스 표시 — 모든 인터랙티브 요소 통일 */
*:focus{outline:none}
.btn:focus-visible,button:focus-visible,.inp:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.tab-btn:focus-visible,.subnav-btn:focus-visible,.sb-item-btn:focus-visible,.sb-sub-btn:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px;border-radius:var(--r-md)}
.arr-card:focus-visible,.pj-card:focus-visible{outline:2px solid var(--navy-600);outline-offset:-2px}

/* 반응형 보강 — 태블릿 / 모바일 */
@media (max-width: 1024px){
  .main{padding:14px 16px}
  .tab-btn{padding:6px 10px;font-size:var(--fs-xs)}
  .hdr-date{display:none}
  #mx-toast-host{top:64px;right:12px;max-width:calc(100vw - 24px)}
  /* 마진 KPI 5개 → 3열 */
  #sv-pane-margin .sv-kpi-card{padding:9px 11px}
  /* Spotlight — 1024 이하부터 단축키 숨김 */
  .spotlight-kbd{display:none}
}
@media (max-width: 720px){
  /* Spotlight — 모바일에서 라벨 숨기고 아이콘만 */
  .spotlight-lbl{display:none}
}
@media (max-width: 768px){
  .hdr{padding:0 12px;gap:8px;height:52px}
  .hdr-title{font-size:var(--fs-md)}
  .hdr-ver-badge{display:none}
  .tab-btn{padding:5px 8px;font-size:var(--fs-xs)}
  .main{padding:10px 10px}
  /* 서비스 sub-nav 가로 스크롤 */
  #service-subnav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  #service-subnav::-webkit-scrollbar{display:none}
  #service-subnav .subnav-btn{flex-shrink:0;font-size:var(--fs-xs);padding:6px 10px}
  /* 서비스 현황 KPI 4개 → 2열 */
  #sv-pane-overview > div[style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  /* 진행상태 보드 6개 → 3열 */
  #sv-arr-flow-cards{grid-template-columns:repeat(3,1fr)!important}
  /* 마진 KPI 5개 → 2열 */
  #sv-pane-margin div[style*="repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  /* 마진 차트 영역 1열 */
  #sv-pane-margin div[style*="2fr 1fr"]{grid-template-columns:1fr!important}
  #sv-pane-margin div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  /* 어레인지 — 모바일 풀스크린 토글 (좌 목록 / 우 상세) */
  .arr-layout{flex-direction:column}
  .arr-list-col{width:100%;max-height:50vh;border-right:none;border-bottom:1px solid var(--border)}
  body.arr-detail-mobile .arr-list-col{display:none}
  body.arr-detail-mobile .arr-detail-col{height:calc(100vh - 56px)}
  body.arr-detail-mobile .arr-back-mobile{display:inline-flex!important}
  .arr-tab-body{padding:14px 16px 60px}
  .arr-detail-hdr{padding:12px 16px}
  .arr-anchor-nav{padding:6px 16px}
  /* 폼 그리드 1열 */
  .sv-frow{grid-template-columns:1fr;gap:8px}
  /* 비용 등록 폼 그리드 */
  .arr-cost-form div[style*="grid-template-columns:120px 1fr 90px"]{grid-template-columns:1fr 1fr 1fr!important}
  /* 월별 마감 테이블 — 가로 스크롤 유지 */
  .sv-cl-table{font-size:var(--fs-2xs)}
  /* 모바일 입력 높이 키우기 (터치 친화) */
  .inp,.inp--sm,input[type="text"],input[type="number"],input[type="date"],select,textarea{min-height:36px;font-size:var(--fs-sm)}
  .btn,.sv-btn{min-height:36px}
  /* KPI 카드 폰트 약간 줄임 */
  .sv-kpi-card-title{font-size:var(--fs-2xs)}
}
@media (max-width: 480px){
  .hdr-title{font-size:var(--fs-sm);letter-spacing:-.3px}
  .tab-btn{padding:5px 7px;font-size:var(--fs-2xs)}
  .mx-toast{font-size:var(--fs-xs);padding:9px 12px}
  .mx-toast-title{font-size:var(--fs-xs)}
  /* 서비스 KPI / 진행상태 1열 */
  #sv-pane-overview > div[style*="repeat(4,1fr)"]{grid-template-columns:1fr!important}
  #sv-arr-flow-cards{grid-template-columns:repeat(2,1fr)!important}
  #sv-pane-margin div[style*="repeat(5,1fr)"]{grid-template-columns:1fr!important}
  /* 어레인지 목록 — 더 컴팩트 */
  .arr-list-top{padding:10px 10px 8px}
  .arr-card{padding:10px 11px}
  .arr-card-vessel{font-size:var(--fs-xs)}
  /* 비용 등록 폼 — 모바일 1열 */
  .arr-cost-form div[style*="grid-template-columns:120px 1fr 90px"]{grid-template-columns:1fr!important}
  .arr-cost-form div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  /* 모달 풀스크린 */
  #pd-drawer,#eng-detail-drawer{width:100vw!important;max-width:100vw}
  /* 알림 패널 풀폭 */
  #notif-panel{width:calc(100vw - 24px)!important;right:12px!important}
  /* 헤더 종 + 사용자 버튼 컴팩트 */
  #hdr-user-name{display:none}
  /* 모바일 가로 스크롤 명시 */
  .sv-cl-table-wrap,div[style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch}
}

/* iOS Safari — input zoom 방지 (16px 미만이면 자동 zoom) */
@media (max-width: 768px){
  input,select,textarea{font-size:var(--fs-md)!important}
  .inp--sm{font-size:var(--fs-sm)!important}
}
/* v1.451: 로고 분리 — 마리넥스/index.html은 .no-logos 적용, deploy/는 자동 토글 해제 */
.no-logos .hdr-logo,
.no-logos .lp-logo,
.no-logos #login-page .lp-card .lp-logo{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MX DS v1 — Marinex Design System (v1.619~)
   시제품: prototypes/marinex-cards-v4.html → 추출
   사용 원칙: 새로 작성하는 컴포넌트는 .mx-* 클래스 + var(--mx-*) 토큰 사용
   ═══════════════════════════════════════════════════════════════════════ */

/* v1.619: 다크 모드 제거 (사용자 피드백) */

/* ── RFQ 모달 details 토글 (v1.619 — 피드백 #2 어수선함 정리) ── */
.rfq-details{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--r-md);overflow:hidden}
.rfq-details > summary{cursor:pointer;list-style:none;padding:11px 15px;font-weight:700;color:var(--navy-800);font-size:var(--fs-sm);display:flex;align-items:center;gap:8px;user-select:none;background:linear-gradient(135deg,#fafaf9,var(--surface));border-bottom:1px solid transparent;transition:background .12s ease}
.rfq-details > summary::-webkit-details-marker{display:none}
.rfq-details > summary::before{content:'▸';font-size:11px;color:var(--gray-400);transition:transform .18s ease;display:inline-block;width:12px;flex-shrink:0}
.rfq-details[open] > summary::before{transform:rotate(90deg);color:var(--navy-700)}
.rfq-details[open] > summary{border-bottom-color:var(--gray-200)}
.rfq-details > summary:hover{background:#f3f4f6}
.rfq-details > .rfq-details-body{padding:13px 15px;display:flex;flex-direction:column;gap:11px}
.rfq-details > summary .rfq-det-count{margin-left:auto;font-size:10px;font-weight:600;color:var(--gray-500);background:var(--gray-100);padding:2px 7px;border-radius:999px}

/* ── 로딩 스켈레톤 — 펄스 애니메이션 ── */
@keyframes mxPulse{0%,100%{opacity:0.65}50%{opacity:0.35}}
.mx-skel{background:var(--mx-hover);border-radius:var(--mx-r-md);animation:mxPulse 1.4s ease-in-out infinite}
.mx-skel-wrap{padding:24px;display:flex;flex-direction:column;gap:12px}
.mx-skel-wrap .mx-skel.h-line{height:14px;width:60%}
.mx-skel-wrap .mx-skel.h-title{height:36px;width:40%;margin-bottom:8px}
.mx-skel-wrap .mx-skel.h-prop{height:18px;width:80%}
.mx-skel-wrap .mx-skel.h-block{height:60px}
.mx-skel-wrap .mx-skel.h-tall{height:280px}
.mx-skel-msg{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;color:var(--mx-ink-3);font-size:var(--mx-fs-sm);font-weight:500}
.mx-skel-msg::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--mx-teal);animation:mxPulse 1s ease-in-out infinite}

/* ── Default Page Loading / Error (모든 페이지 공통 대기 화면) ── */
.page-loader{min-height:160px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--gray-500);font-size:var(--fs-sm);padding:32px 20px;text-align:center}
/* v2.172: 통합 처리중 오버레이 (모달·컨테이너) — MXLoad.overlay */
.mxload-overlay{position:absolute;inset:0;background:rgba(255,255,255,.74);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);display:flex;align-items:center;justify-content:center;z-index:var(--z-raised);border-radius:inherit}
.mxload-overlay .page-loader{min-height:0;padding:0}
/* v2.176: 진입 로더 — 파랑새 + 인디터미닛 진행바(통일) */
.mxload-prog{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:36px 20px;min-height:160px}
.mxload-prog .page-loader{min-height:0;padding:0}
.mxload-bar{width:300px;max-width:70%;height:7px;background:var(--gray-200);border-radius:99px;overflow:hidden}
.mxload-bar-fill{height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--mx-acc-teal,#0e7490),#0891b2);animation:mxload-indet 1.15s ease-in-out infinite}
@keyframes mxload-indet{0%{margin-left:-40%}50%{margin-left:60%}100%{margin-left:100%}}
.page-loader .ti{font-size:22px;opacity:.6}
/* v1.896: 전역 로딩 — 움직이는 파랑새 (인라인 SVG+CSS only, 외부요청·이미지 0. 숨김 시 DOM 미존재라 idle 비용 0) */
.mxl-bird{width:48px;height:42px;display:block;animation:mxl-bob 1.05s ease-in-out infinite;will-change:transform}
@keyframes mxl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mxl-bird .wing{transform-box:fill-box;transform-origin:left center;animation:mxl-flap .42s ease-in-out infinite}
@keyframes mxl-flap{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-36deg)}}
.mxl-bird .shadow{animation:mxl-sh 1.05s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mxl-sh{0%,100%{transform:scaleX(1);opacity:.18}50%{transform:scaleX(.7);opacity:.1}}
.pl-dots::after{display:inline-block;width:14px;text-align:left;content:'';animation:mxl-dots 1.2s steps(4,end) infinite}
@keyframes mxl-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
/* v1.898: 소형 인라인 로더(테이블 셀·작은 영역용) */
.mxl-inline{display:inline-flex;align-items:center;gap:6px;color:#1e5ca8;font-size:12px;font-weight:600}
.mxl-bird.mxl-sm{width:20px;height:18px;display:inline-block;vertical-align:middle}
.page-error{min-height:120px;padding:24px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;color:#9a3412;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;gap:12px}

/* ── 진입 애니메이션 ── */
@keyframes mxRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes mxBarGrow{to{transform:scaleX(1)}}
@keyframes mxDrawLine{to{stroke-dashoffset:0}}
@keyframes mxInsightPulse{0%{transform:scale(0.6);opacity:.22}100%{transform:scale(1.6);opacity:0}}
.mx-rise{animation:mxRise .55s cubic-bezier(.22,.61,.36,1) both}
@media(prefers-reduced-motion:reduce){
  .mx-rise,.mx-kpi::before,.mx-pc-fill,.mx-cust-share-bar span,.cc-spark path.is-line{animation:none!important;transition:none!important}
}

/* ── 헤더 영역 ── */
.mx-breadcrumb{font-size:var(--mx-fs-xs);color:var(--mx-ink-4);font-weight:500;margin-bottom:18px;display:flex;align-items:center;gap:6px}
.mx-breadcrumb a{color:var(--mx-ink-3);text-decoration:none;padding:2px 4px;border-radius:var(--mx-r-xs);transition:background .12s ease}
.mx-breadcrumb a:hover{background:var(--mx-hover);color:var(--mx-ink)}
.mx-breadcrumb .sep{color:var(--mx-ink-5)}
.mx-page-head{margin-bottom:36px}
.mx-page-emoji{font-size:36px;display:block;margin-bottom:8px;line-height:1;user-select:none}
.mx-page-title{font-size:var(--mx-fs-3xl);font-weight:800;letter-spacing:-0.045em;margin-bottom:8px;line-height:1.15;color:var(--mx-ink)}
.mx-page-desc{font-size:var(--mx-fs-sm);color:var(--mx-ink-3);font-weight:500;line-height:1.6}
.mx-page-desc code,.mx-callout code,.mx-h2-sub code{background:var(--mx-code-bg);font-family:ui-monospace,'SF Mono',monospace;font-size:11.5px;padding:1px 5px;border-radius:var(--mx-r-xs);color:var(--mx-ink)}

/* DB property row (Notion 스타일) */
.mx-props{margin:18px 0 32px;display:flex;flex-wrap:wrap;gap:16px 28px;font-size:var(--mx-fs-xs);color:var(--mx-ink-3)}
.mx-props .prop{display:flex;align-items:center;gap:8px}
.mx-props .pk{color:var(--mx-ink-4);font-weight:500;min-width:56px}
.mx-props .pv{color:var(--mx-ink);font-weight:600;display:flex;align-items:center;gap:6px}
.mx-tag-chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:var(--mx-r-xs);font-size:var(--mx-fs-xs);font-weight:600;letter-spacing:-0.005em;background:var(--mx-code-bg);color:var(--mx-ink-2)}
.mx-tag-chip.is-teal{background:var(--mx-teal-soft);color:var(--mx-teal)}
.mx-tag-chip.is-gold{background:var(--mx-gold-soft);color:var(--mx-gold)}
.mx-tag-chip.is-rose{background:var(--mx-rose-soft);color:var(--mx-rose)}

.mx-divider{border:0;border-top:1px solid var(--mx-line);margin:36px 0 28px}
.mx-h2{font-size:var(--mx-fs-xl);font-weight:800;letter-spacing:-0.03em;margin-bottom:4px;display:flex;align-items:center;gap:8px;color:var(--mx-ink)}
.mx-h2 .h2-num{font-size:var(--mx-fs-cap);font-weight:700;color:var(--mx-ink-4);background:var(--mx-hover);padding:2px 6px;border-radius:var(--mx-r-xs);letter-spacing:0.04em}
.mx-h2-sub{font-size:var(--mx-fs-sm);color:var(--mx-ink-3);font-weight:500;margin-bottom:16px}

/* ── ① KPI 카드 ── */
.mx-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mx-kpi{background:var(--mx-paper);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);padding:14px 16px 16px;position:relative;overflow:hidden;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.mx-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--mx-teal);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.mx-kpi:hover{border-color:var(--mx-line-strong);transform:translateY(-1px);box-shadow:var(--mx-shadow-2)}
.mx-kpi:hover::before{transform:scaleX(1)}
/* 의미별 색 모디파이어 (평소 18% 라인, hover 100%) */
.mx-kpi.is-quote::before{background:var(--mx-c-quote);transform:scaleX(0.18)}
.mx-kpi.is-order::before{background:var(--mx-c-order);transform:scaleX(0.18)}
.mx-kpi.is-revenue::before{background:var(--mx-c-revenue);transform:scaleX(0.18)}
.mx-kpi.is-loss::before{background:var(--mx-rose);transform:scaleX(0.18)}
.mx-kpi.is-warn::before{background:var(--mx-amber);transform:scaleX(0.18)}
.mx-kpi.is-gold::before{background:var(--mx-gold);transform:scaleX(0.18)}
.mx-kpi.clickable{cursor:pointer}
.mx-kpi-label{font-size:var(--mx-fs-xs);color:var(--mx-ink-3);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mx-kpi-label .ti{font-size:13px;color:var(--mx-ink-4)}
.mx-kpi-num{font-size:var(--mx-fs-2xl);font-weight:700;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--mx-ink)}
.mx-kpi-num .u{font-size:0.45em;color:var(--mx-ink-3);margin-left:3px;font-weight:500;letter-spacing:-0.01em}
.mx-kpi-meta{margin-top:10px;display:flex;align-items:center;gap:6px;font-size:var(--mx-fs-xs);color:var(--mx-ink-3);font-weight:500}
.mx-delta{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:var(--mx-fs-xs);font-variant-numeric:tabular-nums}
.mx-delta.is-up{color:var(--mx-teal)}
.mx-delta.is-down{color:var(--mx-rose)}
.mx-delta.is-up::before{content:'↑';font-size:11px}
.mx-delta.is-down::before{content:'↓';font-size:11px}

/* ── ② 진척 카드 ── */
.mx-progress-card{background:var(--mx-paper);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);padding:22px 26px 20px}
.mx-pc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.mx-pc-title{font-size:var(--mx-fs-md);font-weight:700;color:var(--mx-ink);letter-spacing:-0.015em}
.mx-pc-sub{font-size:var(--mx-fs-xs);color:var(--mx-ink-3);font-weight:500;margin-top:2px}
.mx-pc-pct{font-size:var(--mx-fs-2xl);font-weight:700;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--mx-ink)}
.mx-pc-pct .u{font-size:0.5em;color:var(--mx-ink-3);margin-left:2px;font-weight:500}
.mx-pc-track{height:5px;background:#f0ecdb;border-radius:999px;position:relative;margin:12px 0 10px}
.mx-pc-fill{height:100%;background:linear-gradient(90deg,var(--mx-c-revenue) 0%,var(--mx-teal) 100%);border-radius:999px;width:0;box-shadow:0 0 10px rgba(17,122,112,.32)}
.mx-pc-fill.is-animated{animation:mxPcFill 1.1s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:.35s}
@keyframes mxPcFill{to{width:var(--mx-pc-w,76.7%)}}
.mx-pc-pace{position:absolute;top:-3px;width:2px;height:11px;background:var(--mx-ink-3)}
.mx-pc-pace::after{content:attr(data-label);position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--mx-ink-3);white-space:nowrap;font-weight:500}
.mx-pc-foot{display:flex;align-items:center;justify-content:space-between;font-size:var(--mx-fs-xs);color:var(--mx-ink-3);font-weight:500}
.mx-pc-foot .good{color:var(--mx-teal);font-weight:700}
.mx-pc-foot .warn{color:var(--mx-rose);font-weight:700}

/* ── ③ 작은 차트 카드 (sparkline) ── */
.mx-chart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mx-chart-card{background:var(--mx-paper);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);padding:14px 16px 14px;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.mx-chart-card:hover{border-color:var(--mx-line-strong);transform:translateY(-1px);box-shadow:var(--mx-shadow-2)}
.mx-cc-head{font-size:var(--mx-fs-xs);color:var(--mx-ink-3);font-weight:600;margin-bottom:4px}
.mx-cc-num{font-size:var(--mx-fs-xl);font-weight:700;letter-spacing:-0.035em;line-height:1.1;margin:2px 0 8px;font-variant-numeric:tabular-nums;color:var(--mx-ink)}
.mx-cc-num .u{font-size:0.5em;color:var(--mx-ink-3);margin-left:3px;font-weight:500}
.mx-cc-num.is-quote{color:var(--mx-c-quote)}
.mx-cc-num.is-order{color:var(--mx-c-order)}
.mx-cc-num.is-revenue{color:var(--mx-c-revenue)}
.mx-cc-spark{width:100%;height:48px;display:block}
.mx-cc-spark path.is-line{stroke-dasharray:600;stroke-dashoffset:600;animation:mxDrawLine 1.2s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:.35s}
.mx-cc-foot{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--mx-ink-4);font-weight:500;font-variant-numeric:tabular-nums}
.mx-cc-foot .now{color:var(--mx-teal);font-weight:700}
.mx-cc-foot .now.is-quote{color:var(--mx-c-quote)}
.mx-cc-foot .now.is-revenue{color:var(--mx-c-revenue)}

/* ── ④ 거래처 DB 표 (Notion DB row) ── */
.mx-cust-db{border:1px solid var(--mx-line);border-radius:var(--mx-r-md);background:var(--mx-paper);overflow:hidden}
.mx-cust-db-head{display:grid;grid-template-columns:36px 1fr 130px 90px 80px;gap:12px;padding:8px 14px;background:var(--mx-hover);border-bottom:1px solid var(--mx-line);font-size:10.5px;color:var(--mx-ink-3);font-weight:600;letter-spacing:0.06em;text-transform:uppercase}
.mx-cust-row{display:grid;grid-template-columns:36px 1fr 130px 90px 80px;gap:12px;padding:10px 14px;align-items:center;border-bottom:1px solid var(--mx-line);transition:background .1s ease;cursor:pointer}
.mx-cust-row:last-child{border-bottom:none}
.mx-cust-row:hover{background:var(--mx-hover)}
.mx-cust-row.is-attn{background:var(--mx-rose-soft)}
.mx-cust-row.is-attn:hover{background:#f4d8e2}
.mx-cust-icon{width:28px;height:28px;background:var(--mx-code-bg);border-radius:var(--mx-r-sm);display:flex;align-items:center;justify-content:center;font-size:14px;user-select:none}
.mx-cust-icon.is-contract{background:var(--mx-gold-soft)}
.mx-cust-icon.is-attn{background:var(--mx-rose-soft)}
.mx-cust-name{font-size:var(--mx-fs-sm);font-weight:700;color:var(--mx-ink);letter-spacing:-0.015em;display:flex;align-items:center;gap:8px}
.mx-mention{font-size:var(--mx-fs-xs);font-weight:500;color:var(--mx-ink-3)}
.mx-mention::before{content:'@';opacity:0.6}
.mx-cust-tag-row{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--mx-r-xs);background:var(--mx-code-bg);color:var(--mx-ink-2);letter-spacing:-0.005em}
.mx-cust-tag-row.is-contract{background:var(--mx-gold-soft);color:var(--mx-gold)}
.mx-cust-tag-row.is-attn{background:var(--mx-rose-soft);color:var(--mx-rose)}
.mx-cust-amt{font-size:var(--mx-fs-md);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.mx-cust-amt .u{font-size:0.7em;color:var(--mx-ink-3);margin-left:2px;font-weight:500}
.mx-cust-share{font-size:var(--mx-fs-xs);color:var(--mx-ink-3);font-weight:600;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.mx-cust-share-bar{flex:1;height:3px;background:var(--mx-line);border-radius:999px;overflow:hidden}
.mx-cust-share-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--mx-c-revenue) 0%,var(--mx-teal) 100%);transform-origin:left;animation:mxBarGrow .9s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:.45s;transform:scaleX(0)}
.mx-cust-row.is-attn .mx-cust-share-bar span{background:var(--mx-rose)}

/* ── ⑤ 인사이트 / 알림 카드 ── */
.mx-insight-grid{display:flex;flex-direction:column;gap:6px}
.mx-insight{background:var(--mx-paper);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);padding:14px 16px 14px 14px;display:flex;gap:12px;align-items:flex-start;transition:background .12s ease}
.mx-insight:hover{background:var(--mx-hover);border-color:var(--mx-line-strong)}
.mx-insight.is-attn{border-color:var(--mx-rose-soft);background:var(--mx-rose-soft)}
.mx-insight.is-attn:hover{background:#f4d8e2}
.mx-insight.is-good{border-color:var(--mx-teal-soft);background:var(--mx-teal-soft)}
.mx-insight.is-good:hover{background:#d5ebe6}
.mx-insight.is-warn{border-color:var(--mx-amber-soft);background:var(--mx-amber-soft)}
.mx-insight.is-warn:hover{background:#f1e3c8}
.mx-insight-emoji{font-size:18px;line-height:1.3;flex-shrink:0;user-select:none;position:relative}
.mx-insight.is-attn .mx-insight-emoji::after{content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--mx-rose);opacity:0;animation:mxInsightPulse 2.4s ease-in-out infinite;pointer-events:none}
.mx-insight-body{flex:1}
.mx-insight-title{font-size:var(--mx-fs-md);font-weight:700;color:var(--mx-ink);letter-spacing:-0.018em;margin-bottom:2px;line-height:1.4}
.mx-insight-text{font-size:var(--mx-fs-sm);color:var(--mx-ink-2);font-weight:500;line-height:1.55}
.mx-insight-text strong{color:var(--mx-ink);font-weight:700}
.mx-insight-text .mx-mention{color:var(--mx-ink-2);background:rgba(0,0,0,.06);padding:0 4px;border-radius:var(--mx-r-xs);font-weight:600}
.mx-insight-actions{margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}

/* ── 회색 callout (Notion) ── */
.mx-callout{background:var(--mx-hover);border-radius:var(--mx-r-md);padding:14px 16px 14px 14px;display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;font-size:var(--mx-fs-sm);color:var(--mx-ink-2);font-weight:500;line-height:1.55;border:1px solid transparent}
.mx-callout .co-emoji{font-size:16px;line-height:1.3;flex-shrink:0;user-select:none}
.mx-callout strong{color:var(--mx-ink);font-weight:700}

/* ── 토글 (▾ details) ── */
.mx-toggle{margin:14px 0 0;border-radius:var(--mx-r-sm)}
.mx-toggle summary{cursor:pointer;padding:6px 8px;font-size:var(--mx-fs-sm);font-weight:600;color:var(--mx-ink-2);border-radius:var(--mx-r-sm);list-style:none;display:flex;align-items:center;gap:6px;transition:background .12s ease}
.mx-toggle summary::-webkit-details-marker{display:none}
.mx-toggle summary::before{content:'▸';font-size:10px;color:var(--mx-ink-4);transition:transform .15s ease}
.mx-toggle[open] summary::before{transform:rotate(90deg)}
.mx-toggle summary:hover{background:var(--mx-hover)}
.mx-toggle-body{padding:8px 8px 6px 22px;font-size:var(--mx-fs-sm);color:var(--mx-ink-2);line-height:1.6}
.mx-toggle-body strong{color:var(--mx-ink);font-weight:700}

/* ── 인라인 액션 버튼 (밑줄) ── */
.mx-btn-link{background:transparent;border:none;font-family:inherit;font-size:var(--mx-fs-sm);font-weight:600;color:var(--mx-ink);cursor:pointer;padding:0 0 1px;letter-spacing:-0.01em;border-bottom:1px solid var(--mx-ink);transition:opacity .12s ease}
.mx-btn-link:hover{opacity:.6}
.mx-btn-link.is-ghost{color:var(--mx-ink-3);border-bottom-color:var(--mx-line-strong);font-weight:500}
.mx-btn-link.is-teal{color:var(--mx-teal);border-bottom-color:var(--mx-teal)}
.mx-btn-link.is-rose{color:var(--mx-rose);border-bottom-color:var(--mx-rose)}

/* ── 기간 토글 (주 / 월 / 분기 / 연) ── */
.mx-period-toggle{display:inline-flex;background:var(--mx-paper);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);padding:2px;gap:0}
.mx-period-toggle button{background:transparent;border:none;font-family:inherit;font-size:var(--mx-fs-xs);font-weight:600;color:var(--mx-ink-3);padding:5px 12px;border-radius:var(--mx-r-sm);cursor:pointer;letter-spacing:-0.01em;transition:background .12s ease,color .12s ease}
.mx-period-toggle button:hover{color:var(--mx-ink)}
.mx-period-toggle button.is-on{background:var(--mx-ink);color:var(--mx-paper)}

/* ── 명령 팔레트 (cmd+K) ── */
.mx-cmdk-bd{position:fixed;inset:0;background:rgba(13,30,58,.35);backdrop-filter:blur(2px);z-index:var(--z-popover);opacity:0;pointer-events:none;transition:opacity .15s ease;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}
.mx-cmdk-bd.is-open{opacity:1;pointer-events:auto}
.mx-cmdk{background:var(--mx-paper);border:1px solid var(--mx-line);border-radius:12px;box-shadow:0 24px 64px rgba(13,30,58,.20);width:640px;max-width:92vw;max-height:60vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(-6px);transition:transform .15s ease}
.mx-cmdk-bd.is-open .mx-cmdk{transform:translateY(0)}
.mx-cmdk-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--mx-line)}
.mx-cmdk-head .ti{font-size:18px;color:var(--mx-ink-4)}
.mx-cmdk-input{flex:1;background:transparent;border:none;font-family:inherit;font-size:var(--mx-fs-lg);font-weight:500;color:var(--mx-ink);outline:none;letter-spacing:-0.01em}
.mx-cmdk-input::placeholder{color:var(--mx-ink-4)}
.mx-cmdk-kbd{font-size:10px;font-weight:700;color:var(--mx-ink-3);background:var(--mx-hover);border:1px solid var(--mx-line);padding:2px 6px;border-radius:var(--mx-r-xs);font-family:ui-monospace,monospace}
.mx-cmdk-body{flex:1;overflow-y:auto;padding:6px 0}
.mx-cmdk-section{padding:6px 0}
.mx-cmdk-section-head{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;color:var(--mx-ink-4);padding:6px 18px 4px}
.mx-cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 18px;cursor:pointer;font-size:var(--mx-fs-sm);color:var(--mx-ink);font-weight:500;transition:background .08s ease}
.mx-cmdk-item:hover,.mx-cmdk-item.is-active{background:var(--mx-hover)}
.mx-cmdk-item .ic{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--mx-code-bg);border-radius:var(--mx-r-xs);flex-shrink:0;user-select:none}
.mx-cmdk-item .lbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mx-cmdk-item .lbl .t{font-weight:600;color:var(--mx-ink);letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-cmdk-item .lbl .s{font-size:11.5px;color:var(--mx-ink-3);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-cmdk-item .arrow{font-size:11px;color:var(--mx-ink-4);font-weight:600;opacity:0;transition:opacity .12s ease}
.mx-cmdk-item.is-active .arrow{opacity:1}
.mx-cmdk-foot{display:flex;align-items:center;gap:14px;padding:8px 18px;border-top:1px solid var(--mx-line);background:var(--mx-paper-2);font-size:10.5px;color:var(--mx-ink-3);font-weight:500}
.mx-cmdk-foot .hint{display:inline-flex;align-items:center;gap:5px}
.mx-cmdk-foot .mx-cmdk-kbd{font-size:9px}
.mx-cmdk-empty{padding:32px 18px;text-align:center;color:var(--mx-ink-3);font-size:var(--mx-fs-sm)}

/* ── 우측 Drawer (Notion 페이지 미리보기 패턴) ── */
.mx-drawer-backdrop{position:fixed;inset:0;background:rgba(13,30,58,.25);backdrop-filter:blur(2px);z-index:var(--z-overlay);opacity:0;pointer-events:none;transition:opacity .2s ease}
.mx-drawer-backdrop.is-open{opacity:1;pointer-events:auto}
.mx-drawer{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:92vw;background:var(--mx-paper);border-left:1px solid var(--mx-line);box-shadow:-8px 0 32px rgba(13,30,58,.10);z-index:var(--z-modal);transform:translateX(100%);transition:transform .25s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;overflow:hidden}
.mx-drawer.is-open{transform:translateX(0)}
.mx-drawer-head{display:flex;align-items:center;gap:12px;padding:18px 24px 14px;border-bottom:1px solid var(--mx-line);flex-shrink:0}
.mx-drawer-emoji{font-size:24px;line-height:1;user-select:none}
.mx-drawer-titles{flex:1;min-width:0}
.mx-drawer-title{font-size:var(--mx-fs-lg);font-weight:800;letter-spacing:-0.025em;color:var(--mx-ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-drawer-sub{font-size:var(--mx-fs-xs);color:var(--mx-ink-3);font-weight:500;margin-top:2px}
.mx-drawer-close{background:transparent;border:1px solid var(--mx-line);color:var(--mx-ink-3);width:28px;height:28px;border-radius:var(--mx-r-sm);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s ease;font-family:inherit}
.mx-drawer-close:hover{background:var(--mx-hover);color:var(--mx-ink);border-color:var(--mx-line-strong)}
.mx-drawer-body{flex:1;overflow-y:auto;padding:20px 24px 24px}
.mx-drawer-body > section{margin-bottom:24px}
.mx-drawer-body > section:last-child{margin-bottom:0}
.mx-drawer-sect-head{font-size:var(--mx-fs-cap);letter-spacing:0.12em;text-transform:uppercase;font-weight:700;color:var(--mx-ink-3);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mx-drawer-actions{display:flex;gap:10px;padding:14px 24px;border-top:1px solid var(--mx-line);background:var(--mx-paper-2);flex-shrink:0}
.mx-drawer-actions .mx-btn-link{font-size:var(--mx-fs-md)}

/* drawer 내 작은 stats 그리드 */
.mx-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mx-stat{background:var(--mx-paper-2);border:1px solid var(--mx-line);border-radius:var(--mx-r-sm);padding:10px 12px}
.mx-stat-label{font-size:var(--mx-fs-cap);color:var(--mx-ink-3);font-weight:600;margin-bottom:4px}
.mx-stat-val{font-size:var(--mx-fs-xl);font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1}
.mx-stat-val .u{font-size:0.5em;color:var(--mx-ink-3);margin-left:2px;font-weight:500}
.mx-stat-meta{font-size:11px;color:var(--mx-ink-3);font-weight:500;margin-top:4px}

/* drawer 내 mini 거래 행 */
.mx-mini-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--mx-line);font-size:var(--mx-fs-sm)}
.mx-mini-row:last-child{border-bottom:none}
.mx-mini-date{color:var(--mx-ink-3);font-weight:500;font-variant-numeric:tabular-nums;font-size:11.5px}
.mx-mini-name{font-weight:600;color:var(--mx-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-mini-amt{font-weight:700;font-variant-numeric:tabular-nums;color:var(--mx-ink)}

/* ── 반응형 ── */
@media(max-width:900px){
  .mx-kpi-grid{grid-template-columns:1fr 1fr}
  .mx-chart-grid{grid-template-columns:1fr}
  .mx-cust-db-head{display:none}
  .mx-cust-row{grid-template-columns:32px 1fr 80px;gap:8px}
  .mx-cust-row > *:nth-child(3),.mx-cust-row > *:nth-child(5){display:none}
  .mx-drawer{width:100%}
}

/* ════════════ v2.231: 앱 테마 7종 — 주 액센트(--mx-acc-*) 재정의로 전체 스타일 전환 ════════════ */
/*   기본(daylight)은 :root 값. body.mxtheme-<id> 가 액센트만 덮어씀(상태색 red/green/amber는 의미 유지). */
body.mxtheme-ocean{
  --mx-acc-teal:#0284c7; --mx-acc-teal-d:#0369a1; --mx-acc-navy:#1e3a8a; --mx-acc-navy2:#1d4ed8; --mx-acc-purple:#4f46e5; --mx-acc-sky:#0ea5e9;
}
body.mxtheme-forest{
  --mx-acc-teal:#059669; --mx-acc-teal-d:#047857; --mx-acc-navy:#155e63; --mx-acc-navy2:#0f766e; --mx-acc-purple:#0d9488; --mx-acc-sky:#0891b2;
}
body.mxtheme-slate{
  --mx-acc-teal:#475569; --mx-acc-teal-d:#334155; --mx-acc-navy:#1e293b; --mx-acc-navy2:#334155; --mx-acc-purple:#64748b; --mx-acc-sky:#0f766e;
}
body.mxtheme-sunset{
  --mx-acc-teal:#ea580c; --mx-acc-teal-d:#c2410c; --mx-acc-navy:#9a3412; --mx-acc-navy2:#b45309; --mx-acc-purple:#db2777; --mx-acc-sky:#f59e0b;
}
body.mxtheme-berry{
  --mx-acc-teal:#7c3aed; --mx-acc-teal-d:#6d28d9; --mx-acc-navy:#4c1d95; --mx-acc-navy2:#6d28d9; --mx-acc-purple:#a21caf; --mx-acc-sky:#8b5cf6;
}
body.mxtheme-rose{
  --mx-acc-teal:#e11d48; --mx-acc-teal-d:#be123c; --mx-acc-navy:#9f1239; --mx-acc-navy2:#be123c; --mx-acc-purple:#db2777; --mx-acc-sky:#f43f5e;
}
/* 테마 피커 점 */
.mxtheme-dot{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--gray-300);cursor:pointer;padding:0;transition:transform .1s}
.mxtheme-dot:hover{transform:scale(1.15)}
.mxtheme-dot.on{box-shadow:0 0 0 2px var(--gray-800)}

/* ── v2.651 P1: 사이드바 잠금 메뉴(무권한 — 보이되 🔒, 클릭=승인요청) ── */
.sb-sub-btn.sb-locked{ opacity:.45; }
.sb-sub-btn.sb-locked:hover{ opacity:.75; }
.sb-sub-btn .sb-lock-ico{ margin-left:auto; font-size:10px; opacity:.85; flex:none; }

/* ══════════════════════════════════════════════════════════════════════════
   v3.363 브랜드 알림창 (MxNotifyStyle) — 우측 하단, 마리넥스 오렌지↔블루.
   상태 토스트(.mx-toast, 우상단)와 별개다: 저기는 의미 색(초록/노랑/빨강)이 신호라
   브랜드 그라데이션을 씌우면 오류의 빨강이 약해진다. 여기는 "사람이 보낸 소식"용.
   스타일 6종은 설정 > 표시·개인화에서 개인별 선택(기본 fusion).
   ══════════════════════════════════════════════════════════════════════════ */
#mx-ntf-host{
  position:fixed; inset:auto; right:20px; bottom:20px; margin:0; border:0; padding:0;
  background:transparent; overflow:visible; width:auto; height:auto;
  z-index:var(--z-toast); display:flex; flex-direction:column-reverse; gap:10px;
  pointer-events:none; max-width:min(320px, calc(100vw - 40px));
}
.mxntf{
  --mxntf-o:#f79009; --mxntf-b:#465fff; --mxntf-ms:5200ms;
  pointer-events:auto; width:298px; max-width:100%; display:flex; gap:11px; align-items:flex-start;
  padding:12px 13px; border-radius:13px; position:relative; overflow:hidden;
  font-size:12.5px; text-align:left; animation:mxntfIn .26s cubic-bezier(.22,1,.36,1);
}
.mxntf.is-link{ cursor:pointer; }
.mxntf.leaving{ animation:mxntfOut .2s ease forwards; }
.mxntf-ava{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; flex:none; }
.mxntf-b{ flex:1; min-width:0; }
.mxntf-t{ font-size:10.5px; font-weight:800; letter-spacing:.05em; margin-bottom:3px; }
.mxntf-who{ font-weight:800; }
.mxntf-msg{ margin-top:2px; line-height:1.45; word-break:break-word; }
.mxntf-x{ background:none; border:0; cursor:pointer; font-size:14px; line-height:1; padding:2px; flex:none; opacity:.5; color:inherit; }
.mxntf-x:hover{ opacity:1; }
.mxntf-x:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

/* ① 흐르는 테두리 */
.mxntf--edge{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-md); }
.mxntf--edge::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.6px;
  background:linear-gradient(115deg, var(--mxntf-o), var(--mxntf-b), var(--mxntf-o));
  background-size:220% 100%; animation:mxntfSlide 5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; pointer-events:none;
}
.mxntf--edge .mxntf-t{ color:var(--mxntf-b); }
.mxntf--edge .mxntf-ava{ background:linear-gradient(135deg, rgba(247,144,9,.18), rgba(70,95,255,.18)); }
.mxntf--edge .mxntf-msg{ color:var(--text-2,#5b6573); }

/* ② 그라데이션 본체 */
.mxntf--solid{
  color:#fff; box-shadow:0 12px 30px rgba(70,95,255,.34);
  background:linear-gradient(115deg, var(--mxntf-o), var(--mxntf-b), var(--mxntf-o));
  background-size:220% 100%; animation:mxntfIn .26s cubic-bezier(.22,1,.36,1), mxntfSlide 7s linear infinite;
}
.mxntf--solid .mxntf-t{ color:rgba(255,255,255,.82); }
.mxntf--solid .mxntf-msg{ color:rgba(255,255,255,.93); }
.mxntf--solid .mxntf-ava{ background:rgba(255,255,255,.2); }

/* ③ 흐르는 레일 */
.mxntf--rail{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-md); border:1px solid var(--border); padding-left:16px; }
.mxntf--rail::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--mxntf-o), var(--mxntf-b), var(--mxntf-o));
  background-size:100% 220%; animation:mxntfSlideY 4s linear infinite;
}
.mxntf--rail .mxntf-t{ color:#dd7802; }
.mxntf--rail .mxntf-ava{ background:rgba(247,144,9,.13); }
.mxntf--rail .mxntf-msg{ color:var(--text-2,#5b6573); }

/* ④ 야간 글로우 */
.mxntf--glow{ background:#141a2b; color:#eef1f8; box-shadow:0 14px 36px rgba(0,0,0,.44); }
.mxntf--glow::after{
  content:''; position:absolute; inset:-52%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(247,144,9,.42), transparent 72%),
             radial-gradient(closest-side, rgba(70,95,255,.46), transparent 72%);
  background-position:14% 120%, 88% -22%; background-size:64% 150%, 64% 150%; background-repeat:no-repeat;
  filter:blur(11px); opacity:.62; animation:mxntfBreathe 6s ease-in-out infinite;
}
.mxntf--glow > *{ position:relative; z-index:1; }
.mxntf--glow .mxntf-t{ color:#ffb457; }
.mxntf--glow .mxntf-msg{ color:#b9c2d8; }
.mxntf--glow .mxntf-ava{ background:rgba(255,255,255,.11); }

/* ⑤ 남은 시간 바 */
.mxntf--bar{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-md); border:1px solid var(--border); padding-bottom:14px; }
.mxntf--bar::after{
  content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left;
  background:linear-gradient(90deg, var(--mxntf-o), var(--mxntf-b));
  animation:mxntfDrain var(--mxntf-ms) linear forwards;
}
.mxntf--bar .mxntf-t{ color:var(--gray-400,#94a3b8); }
.mxntf--bar .mxntf-ava{ background:linear-gradient(135deg, var(--mxntf-o), var(--mxntf-b)); color:#fff; }
.mxntf--bar .mxntf-msg{ color:var(--text-2,#5b6573); }

/* ⑥ 그라데이션 본체 + 남은 시간 (기본) */
.mxntf--fusion{
  color:#fff; box-shadow:0 12px 30px rgba(70,95,255,.34); padding-bottom:15px;
  background:linear-gradient(115deg, var(--mxntf-o), var(--mxntf-b), var(--mxntf-o));
  background-size:220% 100%;
  animation:mxntfIn .26s cubic-bezier(.22,1,.36,1), mxntfSlide 9s linear infinite;   /* ②보다 느리게 — 바와 경쟁하지 않도록 */
}
.mxntf--fusion .mxntf-t{ color:rgba(255,255,255,.82); }
.mxntf--fusion .mxntf-msg{ color:rgba(255,255,255,.93); }
.mxntf--fusion .mxntf-ava{ background:rgba(255,255,255,.2); }
.mxntf--fusion::before{ content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.26); }
.mxntf--fusion::after{
  content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left;
  background:rgba(255,255,255,.95);   /* 그라데이션 위에서 또렷한 건 흰색뿐 */
  animation:mxntfDrain var(--mxntf-ms) linear forwards;
}

@keyframes mxntfSlide{ to{ background-position:220% 0; } }
@keyframes mxntfSlideY{ to{ background-position:0 220%; } }
@keyframes mxntfBreathe{ 0%,100%{ opacity:.45; } 50%{ opacity:.78; } }
@keyframes mxntfDrain{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
@keyframes mxntfIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes mxntfOut{ to{ opacity:0; transform:translateY(14px) scale(.97); } }

@media (max-width:520px){
  #mx-ntf-host{ right:12px; bottom:12px; }
}
@media (prefers-reduced-motion: reduce){
  .mxntf, .mxntf::before, .mxntf::after{ animation:none !important; }
  .mxntf--bar::after, .mxntf--fusion::after{ transform:scaleX(.35); }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.366 Marinex 로딩 화면 (MxLoader) — 로고만, 파도처럼 일렁이거나 바다가 차오른다.
   강아지 webp 로더를 대체. A(전역)·B(문서)·C(인라인) 각 5종, 설정에서 개인 선택.
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --mxl-logo:url("Marinex%20Logo%20mark.png"); --mxl-ar:4.348; --mxl-sea:#0ea5e9; --mxl-sea-deep:#1e5ca8; }

.mxl-logo{ display:block; background:var(--mxl-logo) no-repeat center/contain; aspect-ratio:var(--mxl-ar); flex:none; }
.mxl-mask{ -webkit-mask:var(--mxl-logo) no-repeat center/contain; mask:var(--mxl-logo) no-repeat center/contain; background:none; }

/* 파도 일렁임 3단 (필터는 MxLoader.ensureFilters 가 심고, JS(rAF)가 물결을 흘린다)
   ★CSS 흔들림을 함께 건다 — Windows Chrome 등에서 SVG 필터가 무시돼도 최소한의 일렁임은 남는다.
     아주 약하게(0.55deg) 걸어 필터가 살아 있는 환경에서 겹쳐도 과하지 않다. */
/* ★v3.401(성능): 필터를 쓰는 건 전역·문서 로더뿐이다(화면에 하나). 인라인은 .mxl-sway 로 CSS 만.
   feTurbulence 는 픽셀 단위 연산이라, 목록마다 뜨는 인라인 로더에 걸면 Windows Chrome 이 눈에 띄게 느려진다. */
.mxl-sway{ animation:mxlSway 6s ease-in-out infinite; }
.mxl-w1,.mxl-w2,.mxl-w3{ will-change:filter; animation:mxlSway 5.5s ease-in-out infinite; }
.mxl-w1{ filter:url(#mxlwave1); }
.mxl-w2{ filter:url(#mxlwave2); animation-duration:7s; }
.mxl-w3{ filter:url(#mxlwave3); animation-duration:9.5s; }
@keyframes mxlSway{
  0%,100%{ transform:skewY(0) scaleY(1); }
  25%{ transform:skewY(-.55deg) scaleY(1.012); }
  75%{ transform:skewY(.55deg) scaleY(.99); }
}
.mxl-pulse{ animation:mxlPulse 2s ease-in-out infinite; }
@keyframes mxlPulse{ 0%,100%{ opacity:.38; } 50%{ opacity:1; } }

/* 바다가 차오름 — 로고를 마스크로 쓰고 안에서 물결이 돈다 */
.mxl-fill{ position:relative; overflow:hidden; background:rgba(100,116,139,.16); }
.mxl-sea{ position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(180deg,var(--mxl-sea),var(--mxl-sea-deep)); transition:height .45s ease; }
.mxl-sea::before, .mxl-sea::after{ content:''; position:absolute; left:50%; bottom:calc(100% - 10px); width:300%; aspect-ratio:1; border-radius:44%; transform:translateX(-50%); }
.mxl-sea::before{ background:var(--mxl-sea); opacity:.9;  animation:mxlSpin 6s linear infinite; }
.mxl-sea::after{  background:var(--mxl-sea); opacity:.45; animation:mxlSpin 9.5s linear infinite reverse; }
@keyframes mxlSpin{ to{ transform:translateX(-50%) rotate(360deg); } }

.mxl-bar{ height:4px; border-radius:99px; background:rgba(100,116,139,.18); overflow:hidden; width:100%; }
.mxl-bar>i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--orange,#f79009),var(--brand,#465fff)); transition:width .45s ease; }
.mxl-pct{ font:800 12px/1 ui-monospace,monospace; color:var(--text-2,#5b6573); font-variant-numeric:tabular-nums; }

/* 전역 오버레이 */
.mxl-ov{ position:fixed; inset:0; z-index:var(--z-toast,200000); display:grid; place-items:center;
  background:color-mix(in srgb, var(--surface,#fff) 90%, transparent); backdrop-filter:blur(3px); animation:mxlFade .18s ease; }
.mxl-ov.is-out{ animation:mxlFade .18s ease reverse forwards; }
@keyframes mxlFade{ from{ opacity:0; } }
.mxl-ov-in{ display:flex; flex-direction:column; align-items:center; gap:16px; width:min(300px,78vw); }

/* 문서 생성 창 */
.mxl-doc{ background:var(--surface,#fff); border:1px solid var(--border,#e2e7f1); border-radius:15px; box-shadow:var(--shadow-md);
  padding:19px 20px; width:min(330px,84vw); display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; }
.mxl-doc-t{ font-size:13.5px; font-weight:800; margin:0; color:var(--text-strong,#0f172a); }
.mxl-doc-s{ font-size:11.5px; color:var(--gray-400,#94a3b8); margin:1px 0 0; }
.mxl-docrow{ display:flex; align-items:center; gap:9px; width:100%; }
.mxl-steps{ display:flex; flex-direction:column; gap:5px; width:100%; text-align:left; }
.mxl-step{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--gray-400,#94a3b8); }
.mxl-step.is-on{ color:var(--text-strong,#0f172a); font-weight:700; }
.mxl-step.is-done{ color:var(--text-2,#5b6573); }
.mxl-step i{ width:14px; height:14px; border-radius:99px; border:1.5px solid currentColor; flex:none; display:grid; place-items:center; font-style:normal; font-size:8px; }
.mxl-step.is-on i{ border-color:var(--brand,#465fff); color:var(--brand,#465fff); }
.mxl-step.is-done i{ background:var(--brand,#465fff); border-color:var(--brand,#465fff); color:#fff; }
.mxl-doc--bstep .mxl-steps, .mxl-doc--bwave .mxl-steps, .mxl-doc--bfill .mxl-steps{ text-align:left; }

.mxl-ring{ position:relative; width:132px; height:132px; display:grid; place-items:center; }
.mxl-ring svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.mxl-ring circle{ fill:none; stroke-width:6; }
.mxl-ring-bg{ stroke:currentColor; opacity:.12; }
.mxl-ring-fg{ stroke:var(--brand,#465fff); stroke-linecap:round; transition:stroke-dashoffset .45s ease; }

/* 인라인 */
.mxl-inline-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:22px 12px; width:100%; }
.mxl-inline-wrap.is-compact{ padding:14px 10px; gap:8px; }
.mxl-skel{ width:100%; display:flex; flex-direction:column; gap:7px; }
.mxl-skel div{ height:11px; border-radius:5px; width:100%;
  background:linear-gradient(90deg, rgba(100,116,139,.10) 25%, rgba(100,116,139,.19) 37%, rgba(100,116,139,.10) 63%);
  background-size:400% 100%; animation:mxlShimmer 1.4s linear infinite; }
@keyframes mxlShimmer{ to{ background-position:-135% 0; } }

@media (prefers-reduced-motion: reduce){
  .mxl-w1,.mxl-w2,.mxl-w3{ filter:none; }
  .mxl-logo,.mxl-sea,.mxl-sea::before,.mxl-sea::after,.mxl-skel div,.mxl-ov,.mxl-w1,.mxl-w2,.mxl-w3,.mxl-sway{ animation:none !important; transform:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.407 마리넥스 챗 — 플로팅 · 1:1 · 안 읽음 배지
   계획: docs/PLAN_MX_CHAT_2026-08.md
   ══════════════════════════════════════════════════════════════════════════ */
/* ★popover 승격 시 UA 기본 스타일(inset:0·margin:auto·테두리·배경)이 붙어 레이아웃이 깨진다 → 전부 리셋.
   mx-toast(#mx-toast-host)와 같은 처방. z-index 는 미지원 브라우저 폴백용으로 남긴다. */
#mxchat{
  position:fixed; inset:auto; right:22px; bottom:22px;
  margin:0; border:0; padding:0; background:transparent; overflow:visible;
  width:auto; height:auto; z-index:var(--z-toast,200000); font-size:13px;
  /* ★v3.413: 컨테이너는 클릭을 통과시키고, 실제 요소만 받는다.
     popover 로 승격되면 UA 가 박스를 예상보다 크게 잡는 경우가 있어
     투명한 영역이 뒤 버튼을 가로막거나 반대로 히트가 어긋난다(mx-toast 와 같은 처방). */
  pointer-events:none;
}
#mxchat > *{ pointer-events:auto; }
#mxchat:popover-open{ inset:auto; right:22px; bottom:22px; margin:0; }
.mxc-fab{
  pointer-events:auto;
  width:54px; height:54px; border-radius:99px; border:none; cursor:pointer; position:relative;
  background:linear-gradient(135deg,var(--orange,#f79009),var(--brand,#465fff)); color:#fff; font-size:22px;
  box-shadow:0 10px 26px rgba(70,95,255,.40); display:grid; place-items:center;
  transition:transform .16s; font-family:inherit;
}
.mxc-fab:hover{ transform:translateY(-2px); }
.mxc-fab:focus-visible{ outline:3px solid var(--brand,#465fff); outline-offset:3px; }
.mxc-fab-badge{
  position:absolute; top:-3px; right:-3px; min-width:21px; height:21px; padding:0 6px; border-radius:99px;
  background:var(--red,#ef4444); color:#fff; font:800 11.5px/21px ui-monospace,monospace; text-align:center;
  box-shadow:0 0 0 2.5px var(--surface,#fff);
}
.mxc-fab-badge[hidden]{ display:none; }

.mxc-panel{
  pointer-events:auto;
  /* v3.441: 좌우 2단(목록+대화)이 되면서 넓어졌다 */
  position:absolute; right:0; bottom:68px; width:min(720px, calc(100vw - 44px));
  height:min(620px, calc(100vh - 130px));
  background:var(--surface,#fff); border:1px solid var(--border,#e2e7f1); border-radius:17px;
  box-shadow:0 18px 50px rgba(20,28,52,.22), 0 4px 12px rgba(20,28,52,.10);
  display:flex; flex-direction:column; overflow:hidden;
}
.mxc-panel[hidden]{ display:none; }
.mxc-hd{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--border,#e2e7f1); flex:none; }
.mxc-hd h3{ font-size:14px; font-weight:800; margin:0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-strong,#0f172a); }
.mxc-ico{ width:28px; height:28px; border-radius:8px; border:1px solid var(--border,#e2e7f1); background:var(--surface,#fff);
  color:var(--gray-500,#64748b); cursor:pointer; display:grid; place-items:center; font-size:14px; flex:none; font-family:inherit; }
.mxc-ico:hover{ background:var(--gray-50,#f8fafc); }

.mxc-rooms{ overflow-y:auto; flex:1; }
.mxc-room{ display:flex; gap:10px; align-items:center; padding:10px 13px; cursor:pointer; border-bottom:1px solid var(--gray-100,#f1f5f9); }
.mxc-room:hover{ background:var(--gray-50,#f8fafc); }
/* v3.462: 방 목록 행 삭제(✕) — 평소 숨김, 행 hover 시 노출 */
.mxc-rdel{ flex:none; margin-left:4px; width:22px; height:22px; border:none; background:transparent; color:var(--gray-400,#94a3b8);
  border-radius:7px; font-size:12px; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s, background .12s, color .12s; }
.mxc-room:hover .mxc-rdel{ opacity:1; }
.mxc-rdel:hover{ background:var(--red-bg,#fee2e2); color:var(--red,#ef4444); }
@media (hover:none){ .mxc-rdel{ opacity:.55; } }   /* 터치 기기: 항상 살짝 보이게 */
.mxc-av{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:16px; flex:none; background:rgba(70,95,255,.12); }
.mxc-av.is-prj{ background:rgba(247,144,9,.15); }
.mxc-av.is-case{ background:rgba(16,185,129,.15); }
.mxc-rmid{ flex:1; min-width:0; }
.mxc-rtop{ display:flex; align-items:baseline; gap:6px; }
.mxc-rname{ font-weight:800; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-strong,#0f172a); }
.mxc-rtime{ font-size:10.5px; color:var(--gray-400,#94a3b8); margin-left:auto; flex:none; }
.mxc-rlast{ font-size:11.5px; color:var(--text-2,#5b6573); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mxc-rbadge{ min-width:19px; height:19px; padding:0 6px; border-radius:99px; background:var(--red,#ef4444); color:#fff;
  font:800 10.5px/19px ui-monospace,monospace; text-align:center; flex:none; }

.mxc-msgs{ flex:1; overflow-y:auto; padding:12px 13px; display:flex; flex-direction:column; gap:9px; }
.mxc-m{ display:flex; gap:7px; align-items:flex-end; max-width:86%; }
.mxc-m.is-me{ align-self:flex-end; flex-direction:row-reverse; }
.mxc-bub{ background:var(--gray-50,#f8fafc); border:1px solid var(--gray-100,#f1f5f9); border-radius:12px;
  padding:7px 11px; font-size:12.5px; color:var(--text-strong,#1e293b); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.mxc-m.is-me .mxc-bub{ background:rgba(70,95,255,.10); border-color:rgba(70,95,255,.24); }
.mxc-nm{ font-size:10px; font-weight:800; color:var(--gray-400,#94a3b8); margin-bottom:2px; }
.mxc-mt{ font-size:9.5px; color:var(--gray-400,#94a3b8); flex:none; align-self:flex-end; }
/* v3.463: 메시지 이모지 반응(텔레그램식) */
.mxc-mwrap{ min-width:0; display:flex; flex-direction:column; }
.mxc-brow{ display:flex; align-items:center; gap:4px; }
.mxc-m.is-me .mxc-brow{ flex-direction:row-reverse; }
/* v3.476: 마우스 오버한 메시지에서만 반응 버튼을 보인다(모든 글자에 상시 표시 X).
   단, 재렌더(상대 타이핑·읽음·실시간)로 CSS :hover 가 풀려 사라지는 걸 막으려고
   JS 가 오버 중인 메시지에 .is-hover 를 다시 붙여 유지한다(mx-chat _applyHover). */
.mxc-react-btn{ flex:none; border:none; background:transparent; color:var(--gray-400,#94a3b8); cursor:pointer;
  width:22px; height:22px; border-radius:50%; font-size:12px; line-height:1; padding:0; opacity:0; transition:opacity .12s, background .12s, color .12s; }
.mxc-react-btn sup{ font-size:8px; }
.mxc-m:hover .mxc-react-btn, .mxc-m.is-hover .mxc-react-btn{ opacity:1; }
.mxc-react-btn:hover{ background:var(--gray-100,#f1f5f9); color:var(--brand,#465fff); }
@media (hover:none){ .mxc-react-btn{ opacity:.5; } }   /* 터치 기기는 호버가 없으니 은은히 상시 */
.mxc-rx{ display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.mxc-m.is-me .mxc-rx{ justify-content:flex-end; }
.mxc-rx-chip{ display:inline-flex; align-items:center; gap:3px; border:1px solid var(--gray-200,#e2e8f0); background:var(--surface,#fff);
  border-radius:999px; padding:1px 7px; font-size:11px; cursor:pointer; font-family:inherit; line-height:1.5; color:var(--text-strong,#1e293b); }
.mxc-rx-chip span{ font-size:10px; font-weight:800; color:var(--gray-500,#64748b); }
.mxc-rx-chip:hover{ border-color:var(--brand,#465fff); }
.mxc-rx-chip.is-mine{ background:rgba(70,95,255,.12); border-color:rgba(70,95,255,.4); }
.mxc-rx-chip.is-mine span{ color:var(--brand,#465fff); }
.mxc-rx-pop{ position:fixed; z-index:var(--z-toast,200000); display:flex; gap:2px; padding:5px 7px; background:var(--surface,#fff);
  border:1px solid var(--gray-200,#e2e8f0); border-radius:999px; box-shadow:0 12px 34px rgba(15,23,42,.22); }
.mxc-rx-pop button{ border:none; background:transparent; cursor:pointer; font-size:19px; line-height:1; padding:3px; border-radius:50%; transition:transform .1s, background .1s; }
.mxc-rx-pop button:hover{ transform:scale(1.28); background:var(--gray-100,#f1f5f9); }
.mxc-empty{ padding:34px 16px; text-align:center; color:var(--gray-400,#94a3b8); font-size:12.5px; line-height:1.7; }

/* v3.441: 좌우 2단 — 왼쪽은 대화 목록(늘 보인다), 오른쪽은 대화 */
.mxc-shell{ display:flex; height:100%; min-height:0; }
.mxc-side{ width:236px; flex:none; display:flex; flex-direction:column; min-height:0;
  border-right:1px solid var(--border,#e2e7f1); background:var(--gray-50,#f8fafc); }
.mxc-main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }
.mxc-side .mxc-hd{ padding:12px 12px; }
.mxc-room.is-on{ background:rgba(70,95,255,.10); }
.mxc-onlynarrow{ display:none; }   /* 2단에서는 '목록으로' 버튼이 필요 없다 */

/* ── v3.478: 조직원 상태창(왼쪽 상시 컬럼) ── */
.mxc-panel:has(.mxc-shell.has-roster){ width:min(940px, calc(100vw - 44px)); }   /* 상태창 열리면 패널 넓힘 */
.mxc-roster{ width:214px; flex:none; display:flex; flex-direction:column; min-height:0;
  border-right:1px solid var(--border,#e2e7f1); background:var(--gray-50,#f8fafc); }
.mxc-rhd{ display:flex; align-items:center; gap:7px; padding:13px 12px 11px; border-bottom:1px solid var(--line-soft,#eef1f5); flex:none; }
.mxc-rt{ font-size:13px; font-weight:850; flex:1; color:var(--text-strong,#0f172a); }
.mxc-rcnt{ font-size:10.5px; font-weight:800; color:#16a34a; }
.mxc-rcol{ width:24px; height:24px; }
.mxc-rlist{ overflow-y:auto; flex:1; }
.mxc-grp{ display:flex; align-items:center; gap:7px; padding:11px 12px 4px; font-size:10.5px; font-weight:850;
  letter-spacing:.04em; color:var(--gray-400,#94a3b8); text-transform:uppercase; }
.mxc-gdot{ width:7px; height:7px; border-radius:50%; flex:none; }
.mxc-gdot.online{ background:#22c55e; } .mxc-gdot.away{ background:#f59e0b; } .mxc-gdot.offline{ background:#a3adba; }
.mxc-person{ display:flex; align-items:center; gap:9px; padding:7px 12px; cursor:pointer; position:relative; }
.mxc-person:hover{ background:var(--surface,#fff); }
.mxc-pav{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; background:rgba(70,95,255,.10);
  display:grid; place-items:center; font-size:15px; }
.mxc-pav.off{ filter:grayscale(.55); opacity:.7; }
.mxc-pdot{ position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; border:2.4px solid var(--gray-50,#f8fafc); }
.mxc-person:hover .mxc-pdot{ border-color:var(--surface,#fff); }
.mxc-pdot.online{ background:#22c55e; } .mxc-pdot.away{ background:#f59e0b; } .mxc-pdot.offline{ background:#a3adba; }
.mxc-pmid{ flex:1; min-width:0; }
.mxc-pnm{ font-size:12.5px; font-weight:750; color:var(--text-strong,#0f172a); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mxc-pst{ font-size:10.5px; color:var(--gray-500,#64748b); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mxc-pst.muted{ color:var(--gray-400,#94a3b8); font-style:normal; }
.mxc-pdm{ position:absolute; right:10px; opacity:0; font-size:13px; transition:opacity .12s; }
.mxc-person:hover .mxc-pdm{ opacity:.85; }
.mxc-me{ flex:none; border-top:1px solid var(--line-soft,#eef1f5); background:linear-gradient(180deg,transparent,rgba(70,95,255,.08));
  padding:10px 11px; display:flex; align-items:center; gap:9px; }
.mxc-me .mxc-pav{ background:rgba(70,95,255,.14); }
.mxc-me .mxc-pdot{ border-color:var(--surface,#fff); }
.mxc-mnm{ font-size:12.5px; font-weight:850; color:var(--text-strong,#0f172a); }
.mxc-metag{ font-size:9px; font-weight:700; color:var(--gray-400,#94a3b8); }
.mxc-mline{ display:flex; align-items:center; gap:5px; margin-top:1px; }
.mxc-mst{ font-size:10.5px; color:var(--gray-500,#64748b); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.mxc-mst.muted{ color:var(--gray-400,#94a3b8); font-style:normal; }
.mxc-med{ font-size:10px; color:var(--brand,#465fff); cursor:pointer; flex:none; }
.mxc-msel{ flex:none; font-size:10px; font-weight:800; color:var(--gray-600,#475569); border:1px solid var(--border,#e2e7f1);
  border-radius:8px; padding:2px 7px; background:var(--surface,#fff); cursor:pointer; font-family:inherit; }
.mxc-msel:hover{ border-color:var(--brand,#465fff); color:var(--brand,#465fff); }
.mxc-roster .mxc-dot{ border-color:var(--gray-50,#f8fafc); }
/* v3.479: 팀별 그룹(접힘/펼침) */
.mxc-tgrp{ display:flex; align-items:center; gap:6px; padding:9px 12px 5px; cursor:pointer; user-select:none; }
.mxc-tgrp:hover{ background:var(--surface,#fff); }
.mxc-caret{ font-size:9px; color:var(--gray-400,#94a3b8); width:10px; flex:none; }
.mxc-tlbl{ font-size:11px; font-weight:850; letter-spacing:.02em; color:var(--text-strong,#0f172a); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mxc-tcnt{ font-size:10px; font-weight:800; color:var(--gray-400,#94a3b8); font-variant-numeric:tabular-nums; flex:none; }
.mxc-tgrp.is-ceo .mxc-tlbl{ color:#b45309; } .mxc-tgrp.is-dev .mxc-tlbl{ color:var(--brand,#465fff); }
.mxc-tempty{ font-size:11px; color:var(--gray-400,#94a3b8); padding:4px 12px 8px 28px; }
/* 메신저 설정 */
.mxc-setbody{ padding:4px 0 12px; }
.mxc-sect{ font-size:11px; font-weight:850; color:var(--text-strong,#0f172a); padding:14px 12px 6px; letter-spacing:.02em; }
.mxc-hint{ display:block; font-size:10px; font-weight:600; color:var(--gray-400,#94a3b8); margin-top:2px; }
.mxc-setrow{ display:flex; align-items:center; gap:8px; padding:6px 12px; }
.mxc-setnm{ flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--text-strong,#0f172a); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mxc-setmv{ display:inline-flex; gap:3px; flex:none; }
.mxc-setmv button{ width:24px; height:22px; border:1px solid var(--border,#e2e7f1); background:var(--surface,#fff); color:var(--gray-500,#64748b);
  border-radius:7px; font-size:10px; cursor:pointer; font-family:inherit; }
.mxc-setmv button:hover:not(:disabled){ border-color:var(--brand,#465fff); color:var(--brand,#465fff); }
.mxc-setmv button:disabled{ opacity:.35; cursor:default; }
.mxc-opt{ display:flex; align-items:center; gap:8px; padding:4px 12px; font-size:12px; color:var(--text-strong,#0f172a); cursor:pointer; }
.mxc-opt input{ width:15px; height:15px; }
.mxc-acct{ display:flex; align-items:center; gap:9px; padding:5px 12px; font-size:12px; cursor:pointer; }
.mxc-acct:hover{ background:var(--surface,#fff); }
.mxc-acct input{ width:15px; height:15px; flex:none; }
.mxc-anm{ flex:1; min-width:0; font-weight:700; color:var(--text-strong,#0f172a); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mxc-acct.off .mxc-anm{ color:var(--gray-400,#94a3b8); font-weight:600; text-decoration:line-through; }
.mxc-arole{ font-size:9.5px; font-weight:800; color:var(--gray-500,#64748b); background:var(--surface,#fff); border:1px solid var(--line-soft,#eef1f5);
  border-radius:99px; padding:1px 7px; flex:none; }

/* 좁은 화면 — 예전처럼 한 쪽씩 */
@media (max-width:700px){
  .mxc-shell .mxc-side{ width:100%; border-right:none; }
  .mxc-shell.is-room .mxc-side{ display:none; }
  .mxc-shell:not(.is-room) .mxc-main{ display:none; }
  .mxc-roster{ display:none; }   /* v3.478: 좁은 화면에선 상태창 숨김(공간 우선) */
  .mxc-panel:has(.mxc-shell.has-roster){ width:calc(100vw - 28px); }
  .mxc-onlynarrow{ display:grid; }
}

/* 이모지 — 자주 쓰는 것만, 입력줄 바로 위에 펼쳐진다 */
.mxc-emoji{ display:flex; flex-wrap:wrap; gap:2px; padding:8px 10px; max-height:132px; overflow-y:auto;
  border-top:1px solid var(--border,#e2e7f1); background:var(--gray-50,#f8fafc); flex:none; }
.mxc-emoji[hidden]{ display:none; }
.mxc-emoji button{ width:30px; height:30px; border:none; background:none; border-radius:8px; cursor:pointer;
  font-size:17px; line-height:1; display:grid; place-items:center; font-family:inherit; }
.mxc-emoji button:hover{ background:rgba(70,95,255,.12); }

/* 보낸 파일(휘발성) */
.mxc-file{ margin-top:4px; display:flex; align-items:center; gap:9px; text-decoration:none;
  border:1px solid var(--border,#e2e7f1); border-radius:12px; padding:9px 12px; background:var(--surface,#fff);
  max-width:250px; }
.mxc-file:hover{ background:var(--gray-50,#f8fafc); }
.mxc-file-i{ font-size:19px; flex:none; }
.mxc-file-b{ min-width:0; display:flex; flex-direction:column; }
.mxc-file-b b{ font-size:12px; color:var(--text-strong,#0f172a); font-weight:700; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mxc-file-b i{ font-size:10px; color:var(--gray-400,#94a3b8); font-style:normal; margin-top:1px; }
.mxc-m.is-me .mxc-file{ margin-left:auto; }

/* v3.470: 새 버전 알림 띠 — 화면 맨 위, 모달보다도 위에 뜬다(모두가 봐야 한다) */
.mxupd-bar{ position:fixed; left:0; right:0; top:0; z-index:2147483000;
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:linear-gradient(135deg,var(--brand,#465fff),#2f45d6); color:#fff;
  font-size:12.5px; font-family:inherit; box-shadow:0 4px 16px rgba(20,28,52,.25); }
.mxupd-bar.is-wait{ background:linear-gradient(135deg,var(--mx-acc-amber,#d97706),#b45309); }
.mxupd-t{ font-weight:800; flex:none; }
.mxupd-t i{ font-style:normal; font-weight:600; opacity:.85; }
.mxupd-s{ flex:1; min-width:0; opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mxupd-bar button{ flex:none; height:30px; padding:0 14px; border-radius:8px; border:none; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--brand,#465fff); font-size:12px; font-weight:800; font-family:inherit; }
.mxupd-bar button.mxupd-x{ width:30px; padding:0; background:rgba(255,255,255,.18); color:#fff; font-weight:700; }
@media (max-width:640px){ .mxupd-s{ display:none } }

/* v3.447: 접속 표시 — 초록은 접속 중, 빨강은 아님. 아바타 우하단에 붙는다.
   ★모르는 상태(실시간 연결 전)에는 아예 안 붙인다 — 접속한 사람이 빨간 점으로 보이면 없느니만 못하다 */
.mxc-avwrap{ position:relative; display:inline-flex; flex:none; }
.mxc-dot{ position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%;
  background:var(--mx-acc-red,#dc2626); border:2px solid var(--surface,#fff); box-sizing:content-box; }
.mxc-dot.is-on{ background:var(--green,#10b981); }
.mxc-side .mxc-dot{ border-color:var(--gray-50,#f8fafc); }   /* 왼쪽 칸은 배경이 다르다 */

/* v3.445: 사람 고르기 — 별도 모달이 아니라 챗 왼쪽 칸에 잠깐 들어왔다 나간다.
   ★모달로 띄우면 챗이 top-layer 에 있어 오히려 챗 뒤로 깔린다. 위치를 겨루는 대신 안으로 들인다. */
.mxc-pkbox{ flex:1; min-height:0; overflow-y:auto; padding:10px 11px; display:flex; flex-direction:column; gap:7px; }
.mxc-pk-help{ font-size:11px; color:var(--gray-500,#64748b); line-height:1.5; }
.mxc-pk-in{ height:32px; flex:none; border-radius:9px; border:1px solid var(--border,#e2e7f1);
  background:var(--surface,#fff); color:var(--text,#0f172a); padding:0 10px; font-size:12px;
  font-family:inherit; box-sizing:border-box; width:100%; }
.mxc-pk-in:focus{ outline:2px solid rgba(70,95,255,.4); outline-offset:-1px; }
.mxc-pk-list{ display:flex; flex-direction:column; gap:3px; }
.mxc-pk{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:9px; cursor:pointer;
  background:var(--surface,#fff); border:1px solid transparent; }
.mxc-pk:hover{ border-color:var(--border,#e2e7f1); }
.mxc-pk input{ width:14px; height:14px; cursor:pointer; accent-color:var(--brand,#465fff); flex:none; }
.mxc-pk-av{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  background:var(--brand-50,#eef1ff); font-size:12px; flex:none; }
.mxc-pk-nm{ font-size:12px; font-weight:700; color:var(--text-strong,#0f172a); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mxc-pk-go{ height:34px; flex:none; border:none; border-radius:9px; background:var(--brand,#465fff);
  color:#fff; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; margin-top:2px; }
.mxc-pk-out{ height:32px; flex:none; border:1px solid var(--red-border,#fecaca); border-radius:9px;
  background:transparent; color:var(--mx-acc-red,#dc2626); font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit; margin-top:8px; }
.mxc-pk-note{ font-size:10px; color:var(--gray-400,#94a3b8); line-height:1.5; }

/* v3.437: 읽음 표시 — 내가 보낸 말풍선 옆에만. 읽으면 잦아들고, 안 읽었으면 눈에 띈다 */
.mxc-read{ display:block; font-size:9.5px; font-weight:800; line-height:1.3; letter-spacing:-.2px;
  color:var(--brand,#465fff); margin-bottom:1px; }
.mxc-read.is-read{ color:var(--gray-400,#94a3b8); font-weight:600; }
/* is-me 는 row-reverse 라 시각 칸이 말풍선 왼쪽에 온다 — 읽음/시각을 오른쪽으로 모아 붙인다 */
.mxc-m.is-me .mxc-mt{ text-align:right; }

/* v3.428: 보낸 화면(휘발성) — 저장되지 않는다는 것을 카드에서 말한다 */
.mxc-shot{ margin-top:4px; border:1px solid var(--border,#e2e7f1); border-radius:12px; overflow:hidden;
  cursor:zoom-in; background:var(--gray-50,#f8fafc); max-width:230px; }
.mxc-shot img{ display:block; width:100%; height:auto; max-height:170px; object-fit:cover; object-position:top left; }
.mxc-shot-t{ padding:5px 9px; font-size:10.5px; color:var(--gray-500,#64748b); border-top:1px dashed var(--border,#e2e7f1);
  background:var(--surface,#fff); letter-spacing:-.1px; }
.mxc-m.is-me .mxc-shot{ margin-left:auto; }

/* v3.427: 입력 중… — 상대가 치고 있다는 신호. 자리를 차지하지 않다가(높이 0) 켜질 때만 열린다 */
.mxc-typing{ height:0; overflow:hidden; padding:0 13px; font-size:11.5px; color:var(--gray-400,#94a3b8);
  display:flex; align-items:center; gap:6px; transition:height .14s ease, padding .14s ease; }
.mxc-typing.on{ height:22px; padding:0 13px 3px; }
.mxc-dots{ display:inline-flex; gap:3px; }
.mxc-dots i{ width:4px; height:4px; border-radius:50%; background:var(--gray-400,#94a3b8); display:block;
  animation:mxc-bounce 1.05s infinite ease-in-out; }
.mxc-dots i:nth-child(2){ animation-delay:.16s; }
.mxc-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes mxc-bounce{ 0%,66%,100%{ transform:translateY(0); opacity:.45 } 33%{ transform:translateY(-3px); opacity:1 } }
/* 성능 라이트 모드·동작 줄이기에서는 점만 두고 움직이지 않는다 */
html.mx-perf-lite .mxc-dots i, .mxc-typing[data-static] i{ animation:none; opacity:.6; }
@media (prefers-reduced-motion: reduce){ .mxc-dots i{ animation:none; opacity:.6 } .mxc-typing{ transition:none } }

.mxc-in{ border-top:1px solid var(--border,#e2e7f1); padding:9px 11px; display:flex; gap:7px; align-items:center; flex:none; }
.mxc-in input{ flex:1; min-width:0; height:35px; border-radius:10px; border:1px solid var(--border,#e2e7f1);
  background:var(--gray-50,#f8fafc); color:var(--text,#0f172a); padding:0 12px; font-size:12.5px; font-family:inherit; box-sizing:border-box; }
.mxc-in input:focus{ outline:2px solid rgba(70,95,255,.45); outline-offset:-1px; }
.mxc-snd{ width:35px; height:35px; border-radius:10px; border:none; background:var(--brand,#465fff); color:#fff;
  cursor:pointer; font-size:15px; flex:none; font-family:inherit; }

@media (max-width:520px){
  #mxchat, #mxchat:popover-open{ right:14px; bottom:14px; }
  .mxc-panel{ width:calc(100vw - 28px); height:min(70vh, calc(100vh - 120px)); }
}
@media (prefers-reduced-motion: reduce){ .mxc-fab{ transition:none; } }

/* ══════════════════════════════════════════════════════════════════════════════
   브라우저 성능 표준화 — .mx-perf-lite (v3.408)
   Safari(Mac)는 GPU 가속하는 효과(큰 blur·backdrop-filter·paint 무한 애니메이션)를
   Windows Chrome/Edge는 매 프레임 CPU로 재래스터 → 같은 앱인데 체감 성능이 갈린다.
   비-Safari(또는 OS '동작 줄이기')면 html.mx-perf-lite 자동 부여(index.html 초기 스크립트),
   설정 ▸ 표시·개인화에서 자동/항상켬/항상끔 수동 토글 가능. Safari는 기본 풀 비주얼 유지.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ① 배경 orb — 560~820px에 blur(70~90px)+무한 애니메이션 = Windows에서 최악(매 프레임 재블러). 블러 축소+정지 */
html.mx-perf-lite .lp-orb{ filter:blur(24px)!important; animation:none!important; will-change:auto!important; }
html.mx-perf-lite .lp-orb1,
html.mx-perf-lite .lp-orb2,
html.mx-perf-lite .lp-orb3{ animation:none!important; }
html.mx-perf-lite body.nd-theme .lp-orb{ filter:blur(28px)!important; animation:none!important; }   /* ND 테마 orb는 blur(90px)!important라 더 높은 specificity로 덮음 */
/* ② backdrop-filter(뒤 배경 실시간 블러) — 스크롤 고정바·모달 dim·로그인 입력: 솔리드/무효로 (스크롤·모달 프레임마다 재블러 제거) */
html.mx-perf-lite .arr-anchor-nav{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:rgba(255,255,255,.98)!important; }
html.mx-perf-lite dialog.mxd::backdrop{ backdrop-filter:none!important; }
html.mx-perf-lite #settings-backdrop,
html.mx-perf-lite #login-backdrop,
html.mx-perf-lite #sv-report-modal,
html.mx-perf-lite #usr-edit-backdrop,
html.mx-perf-lite #usr-add-backdrop{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
html.mx-perf-lite .lp-card{ backdrop-filter:blur(6px)!important; -webkit-backdrop-filter:blur(6px)!important; }
html.mx-perf-lite .sm-hero-toggle,
html.mx-perf-lite #login-page .admin-pin input{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
/* ③ 알림 장식(그라데 흐름·글로우) — paint-bound 무한 애니메이션 정지(기능 무관 장식) */
html.mx-perf-lite .mxntf--edge::before{ animation:none!important; }
html.mx-perf-lite [class*="mxntf"]{ animation-name:none!important; }
html.mx-perf-lite [class*="mxntf"]::before,
html.mx-perf-lite [class*="mxntf"]::after{ animation:none!important; }

/* 전역 접근성 — OS '동작 줄이기(prefers-reduced-motion)'면 모든 애니메이션·전환을 사실상 정지
   (기존엔 10곳만 개별 대응 → 전역화). 입력·스크롤 지연 없이 즉시 표시. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .lp-orb{ animation:none !important; }
}

/* v3.410 챗 — 화면 붙이기 카드 · 전송 상태 */
.mxc-att{ width:35px; height:35px; border-radius:10px; flex:none; cursor:pointer; font-size:14px; font-family:inherit;
  background:transparent; color:var(--brand,#465fff); border:1px dashed rgba(70,95,255,.42); }
.mxc-att:hover{ background:rgba(70,95,255,.08); }
.mxc-link{ margin-top:6px; border:1px solid rgba(70,95,255,.26); border-radius:9px; background:rgba(70,95,255,.06); padding:6px 9px; }
.mxc-link.is-go{ cursor:pointer; }
.mxc-link.is-go:hover{ background:rgba(70,95,255,.13); }
.mxc-link-t{ font-size:10px; font-weight:800; color:var(--brand,#465fff); }
.mxc-link-d{ font-size:11px; color:var(--text-2,#5b6573); margin-top:2px; word-break:break-word; }
.mxc-bub.is-pending{ opacity:.62; }
.mxc-bub.is-failed{ border-color:var(--red-border,#fecaca); background:var(--red-bg,#fee2e2); }
.mxc-fail{ display:block; font-size:9.5px; font-weight:800; color:var(--mx-acc-red-d,#b91c1c); margin-top:3px; }