/* ============================================================
   PIND Connected CRM — 컴포넌트 스타일시트
   ------------------------------------------------------------
   ⚠ 색·크기·서체 원시값을 이 파일에 직접 쓰지 않는다.
     모든 값은 assets/tokens.css 의 토큰(var(--…))만 소비한다.
     테마·브랜드 변경 = tokens.css 수정. (docs/06_디자인_시스템.md)
   반응형 분기점: 1199px(태블릿) · 899px(모바일 내비 전환) · 599px(협소)
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);font-size:var(--fs-body-lg);color:var(--text-secondary);
     background:var(--page-bg);display:flex;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}

/* ── AppLayout: Sidebar ── */
/* 화면에 고정 — body 가 flex 라 align-self:flex-start 가 있어야 sticky 가 먹는다(stretch 면 높이가 본문 전체) */
.nav{width:var(--sidebar-width);flex:0 0 var(--sidebar-width);background:var(--sidebar-bg);padding-bottom:var(--sp-4);
     position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;overscroll-behavior:contain}
.nav .brand{height:var(--topbar-height);display:flex;align-items:center;gap:10px;padding:0 18px;margin-bottom:6px}
.nav .brand .logo{width:24px;height:24px;background:url(logo.png) center/contain no-repeat;flex:0 0 24px}
.nav .brand b{color:#fff;font-size:var(--fs-title);font-weight:700;letter-spacing:.2px}
.nav .grp{padding:16px 18px 6px;font-size:11px;color:var(--sidebar-muted);letter-spacing:1px;font-weight:600}
.nav a{display:flex;align-items:center;gap:9px;height:38px;margin:2px 10px;padding:0 12px;color:var(--sidebar-text);
       opacity:.82;font-size:var(--fs-body-lg);font-weight:500;border-radius:var(--radius-button)}
.nav a:hover{text-decoration:none;background:rgba(255,255,255,.07);opacity:1}
.nav a:focus-visible{outline-color:var(--brand)}
.nav a .ic{width:7px;height:7px;border:none;border-radius:50%;background:currentColor;opacity:.5;flex:0 0 7px}
.nav a.on{background:var(--sidebar-active);color:#fff;opacity:1;font-weight:600}
.nav a.on .ic{opacity:1;background:var(--brand)}
.nav a.locked{opacity:.35;pointer-events:none}
.nav a .p2{margin-left:auto;font-size:10px;background:rgba(255,255,255,.14);color:var(--sidebar-text);border-radius:var(--radius-pill);padding:2px 8px}
/* 내비 그룹 컬러 — 관리자가 메뉴 설정에서 그룹별로 고른다(`--navc-*` 토큰).
   그룹 라벨·항목 점·활성 표식에만 입히고 항목 글자는 --sidebar-text 유지(어두운 면 위 대비 보존).
   admin 전용 항목(.adm)은 붉은 표식이 우선하도록 :not(.adm) 로 비켜 간다. */
.gc-teal{--navc:var(--navc-teal)}   .gc-sky{--navc:var(--navc-sky)}
.gc-green{--navc:var(--navc-green)} .gc-amber{--navc:var(--navc-amber)}
.gc-rose{--navc:var(--navc-rose)}   .gc-violet{--navc:var(--navc-violet)}
.gc-slate{--navc:var(--navc-slate)}
.nav .navgrp .grp{color:var(--navc,var(--sidebar-muted))}
.nav .navgrp a:not(.adm) .ic{background:var(--navc,currentColor)}
.nav .navgrp a.on{box-shadow:inset 3px 0 0 var(--navc,transparent)}

/* admin 전용 메뉴 — 붉은 계열 표식 (07 §3) */
.nav a.adm{color:var(--admin-nav)}
.nav a.adm .ic{background:var(--admin-nav)}
.nav a.adm.on{color:var(--admin-nav)}
.nav a.adm.on .ic{background:var(--admin-nav)}

/* ── 모바일 내비 드로어 (CSS-only: #nav-toggle 체크박스) ── */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-scrim{display:none}
.nav-burger{display:none}
.nav-close{display:none}   /* 드로어 내 닫기(✕) — 모바일에서만 노출 */

/* ── AppLayout: TopBar / MainContent ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{height:var(--topbar-height);flex:0 0 var(--topbar-height);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 var(--sp-6);gap:14px;
     position:sticky;top:0;z-index:var(--z-topbar)}
.top .search{flex:1;max-width:420px;height:38px;background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--radius-input);display:flex;align-items:center}
.top .search:focus-within{border-color:var(--focus-ring);box-shadow:var(--focus-shadow)}
.top .search input{width:100%;height:100%;min-width:0;border:0;background:transparent;padding:0 14px;color:var(--text-primary);font-size:var(--fs-body-sm);font-family:inherit;border-radius:var(--radius-input)}
.top .search input:focus{outline:none}
.top .search input::placeholder{color:var(--text-disabled)}
.top .search-ico{display:none}
.top .sp{flex:1}
.rolechip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--radius-pill);background:var(--surface-subtle);border:1px solid var(--border);color:var(--text-secondary);font-size:12.5px;font-weight:600;gap:7px;white-space:nowrap}
.rolechip .dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
/* admin 모드 토글 — admin 전용 기능 노출 스위치(topbar, admin 에게만). OFF=중립, ON=붉은 계열(06 §3.6) */
.adm-toggle-form{display:inline-flex}
.adm-toggle{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 9px;border-radius:var(--radius-pill);background:var(--surface-subtle);border:1px solid var(--border);color:var(--text-muted);font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:none}
.adm-toggle:hover{background:var(--hover);color:var(--text-secondary)}
.adm-toggle .knob{width:24px;height:14px;flex:0 0 auto;border-radius:var(--radius-pill);background:var(--border);position:relative;transition:background .15s}
.adm-toggle .knob::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--surface);transition:transform .15s}
.adm-toggle.on{background:var(--admin-bg);border-color:var(--admin-border);color:var(--admin-accent)}
.adm-toggle.on .knob{background:var(--admin-accent)}
.adm-toggle.on .knob::after{transform:translateX(10px)}
/* 기밀 노트 표시 스위치 — admin 토글과 구분되도록 ON 상태를 보라 계열로 (admin=적색) */
.adm-toggle.sec-toggle.on{background:var(--surface-subtle);border-color:var(--purple);color:var(--purple)}
.adm-toggle.sec-toggle.on .knob{background:var(--purple)}
.top .btn{height:34px;border:none;background:transparent;box-shadow:none;color:var(--text-muted);font-size:var(--fs-body-sm);border-radius:var(--radius-button)}
.top .btn:hover{background:var(--hover);color:var(--text-secondary)}
/* 상단바 전역 CTA(＋ 문서 작성) — .top .btn 의 투명화를 이기고 primary 필 유지 */
.top .btn.doc-new{background:var(--primary);color:#fff;padding:0 14px;font-weight:600;white-space:nowrap}
.top .btn.doc-new:hover{background:var(--primary-hover);color:#fff}
/* 상단바 노트 작성 — 보조 진입(기본 투명 버튼 유지) */
.top .btn.note-new{white-space:nowrap}
.top .user{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body-sm);font-weight:700}
.content{flex:1;padding:var(--sp-6) var(--sp-7);min-width:0}
/* 페이지 성격별 최대 폭 */
.content.w-form{max-width:1280px}
.content.w-detail{max-width:1440px}
.content.w-settings{max-width:1200px}

/* ── Typography ── */
.page-title{font-size:var(--fs-page-title);font-weight:700;color:var(--text-primary);line-height:var(--lh-tight)}
.page-description{font-size:var(--fs-body-lg);color:var(--text-muted);margin-top:6px}
.section-title{font-size:var(--fs-title);font-weight:700;color:var(--text-primary)}
.section-description{font-size:var(--fs-body-sm);color:var(--text-muted);margin-top:3px}
.field-label{font-size:var(--fs-body-sm);font-weight:600;color:var(--text-secondary)}
.helper-text{font-size:var(--fs-caption);color:var(--text-muted)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── PageHeader ── */
.phead{display:flex;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.phead-txt{min-width:0}
.phead-actions{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
/* (레거시 pagehead 잔존 페이지 호환) */
.pagehead{display:flex;align-items:flex-end;gap:14px;margin-bottom:var(--sp-5);flex-wrap:wrap}
.pagehead h1{font-size:var(--fs-page-title);line-height:32px;color:var(--text-primary);font-weight:700}
.pagehead .sub{color:var(--text-muted);font-size:var(--fs-body-sm);margin-bottom:4px}
.pagehead .right{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}

/* ── 버튼 (Primary/Secondary/Ghost/Danger) ── */
.btn{height:var(--btn-height);padding:0 15px;border:1px solid var(--border);border-radius:var(--radius-button);background:var(--surface);color:var(--text-secondary);
     font-family:inherit;font-size:var(--fs-body);font-weight:600;display:inline-flex;align-items:center;gap:7px;
     cursor:pointer;text-decoration:none;transition:all .12s;box-shadow:var(--shadow-card)}
.btn:hover{text-decoration:none;background:var(--surface-subtle);border-color:var(--border-strong);color:var(--text-primary)}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-muted)}
.btn-ghost:hover{background:var(--hover);border-color:transparent;color:var(--text-secondary)}
.btn-pink{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-pink:hover{background:var(--danger-hover);border-color:var(--danger-hover);color:#fff}
.btn-sm{height:31px;padding:0 11px;font-size:12.5px}

/* ── Card / Layout ── */
.row{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.col{flex:1;min-width:320px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--sp-5) 22px;box-shadow:var(--shadow-card)}
.card h3{font-size:var(--fs-title-sm);color:var(--text-primary);font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3 .hr{margin-left:auto}
.mt{margin-top:var(--sp-4)}
/* 세로 분할 열 — 한 열 안에 카드를 5:3 높이로 쌓는다 (데모/평가 상세: STR/문서 : 사용 샘플).
   사용 샘플(.vs-1)은 표가 서너 줄만 보여도 스크롤이 생겨 예전 1/4(25%)에서 1.5배인 37.5% 로 넓혔다.
   카드 제목은 제자리에 두고 본문(.cbody)만 카드 안에서 스크롤 — 화면 세로 공간을 아끼려는 배치다.
   비율은 열이 옆 열 높이만큼 늘어날 때만 성립하므로, 열이 wrap 되는 1199px 이하에서는 아래에서 해제한다. */
.vsplit{display:flex;flex-direction:column;gap:var(--sp-4)}
.vsplit>.card{display:flex;flex-direction:column;min-height:0}
/* 비율은 flex-grow 대신 백분율 basis 로 — grow 는 카드 패딩(border-box 하한)이 균등 분배되어 비율이 어긋난다.
   gap 은 각자의 지분(5/8·3/8)만큼 미리 뺀다. 열 높이가 미정(wrap)일 때 백분율 basis 는 자동 높이로 동작한다. */
.vsplit>.vs-3{flex:0 1 calc(62.5% - var(--sp-4) * 0.625)}
.vsplit>.vs-1{flex:0 1 calc(37.5% - var(--sp-4) * 0.375)}
/* 아래 카드가 렌더되지 않을 때(샘플 조회 권한 없음·조회 실패)는 위 카드가 열을 전부 쓴다 — 비율이 남으면 빈 공간이 생긴다 */
.vsplit>.card:only-child{flex:1 1 auto}
.vsplit .cbody{flex:1;min-height:0;overflow:auto}
/* 좁아진 열에서 표는 열을 찌그러뜨리는 대신 본문 안에서 가로 스크롤 (반응형 표 규칙과 같은 방식).
   셀 줄바꿈을 막아야 열이 min-content 로 눌리지 않고 스크롤로 넘어간다 — 긴 값은 td 의 ellipsis 가 처리. */
.vsplit .cbody table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.vsplit .cbody th,.vsplit .cbody td{white-space:nowrap}
/* 아래(작은) 카드의 빈 상태는 압축 — 큰 아이콘·여백을 줄여 스크롤 없이 읽히게 */
.vsplit>.vs-1 .estate{padding:var(--sp-3) var(--sp-5)}
.vsplit>.vs-1 .estate-ic{display:none}
.kpi{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.kpi .card{flex:1;min-width:180px;padding:18px 20px}
.kpi .lbl{font-size:12.5px;color:var(--text-muted);margin-bottom:10px;font-weight:500}
.kpi .val{font-size:var(--fs-kpi);font-weight:700;color:var(--text-primary);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .val.teal{color:var(--primary-hover)} .kpi .val.pink{color:var(--danger)}
.kpi .delta{font-size:var(--fs-caption);margin-top:8px;color:var(--text-muted)}

/* ── 퍼널/리스트 ── */
.funnel .bar{display:flex;align-items:center;gap:12px;margin:10px 0}
.funnel .bn{width:112px;font-size:var(--fs-body-sm);color:var(--text-secondary)}
.funnel .track{flex:1;height:24px;background:var(--page-bg);border-radius:7px;overflow:hidden}
.funnel .fill{height:100%;background:var(--primary);border-radius:7px;display:flex;align-items:center;justify-content:flex-end;padding-right:9px;color:#fff;font-size:var(--fs-caption);font-weight:700;min-width:28px}
.funnel .fill.purple{background:var(--violet-600)}
.funnel .amt{width:120px;text-align:right;font-size:var(--fs-body-sm);color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums}
.list .it{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);font-size:var(--fs-body-sm)}
.list .it:last-child{border:0}
.src{width:24px;height:24px;border-radius:7px;flex:0 0 24px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.src.cf{background:var(--src-cf)} .src.ji{background:var(--src-ji)} .src.bx{background:var(--src-bx)} .src.web{background:var(--src-web)}
.it .t{flex:1;color:var(--text-secondary);min-width:0} .it .m{color:var(--text-muted);font-size:var(--fs-caption);white-space:nowrap}

/* ── Admin 전용 표식 (붉은 계열) — admin 에게만 허용된 카드·기능 (07 §3) ── */
.card.admin{border-left:3px solid var(--admin-accent)}
.pill.p-admin{background:var(--admin-bg);color:var(--admin-accent);border:1px solid var(--admin-border)}

/* ── 조직/보고 라인 트리 (CH-13 — components.php org_tree) ── */
.orgtree,.orgtree ul{list-style:none;margin:0;padding:0}
.orgtree>li{padding:6px 0;border-bottom:1px solid var(--border)}
.orgtree>li:last-child{border-bottom:0}
.orgtree ul{padding-left:22px;position:relative;margin-top:2px}
.orgtree ul::before{content:'';position:absolute;left:8px;top:0;bottom:14px;width:1px;background:var(--border)}
.orgtree ul li{position:relative;padding:4px 0 0}
.orgtree ul li::before{content:'';position:absolute;left:-14px;top:16px;width:11px;height:1px;background:var(--border)}
.orgtree .node{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--fs-body-sm);color:var(--text-primary)}
.orgtree .node .m{color:var(--text-muted);font-size:var(--fs-caption)}

/* ── Badge / Status ── */
.chip{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:600;margin:2px 4px 2px 0;white-space:nowrap}
.c-prod{background:var(--chip-prod-bg);color:var(--chip-prod-fg)}
.c-part{background:var(--chip-part-bg);color:var(--chip-part-fg)}
.c-app{background:var(--chip-app-bg);color:var(--chip-app-fg)}
.c-stage{background:var(--chip-stage-bg);color:var(--chip-stage-fg)}
.c-doc{background:var(--chip-doc-bg);color:var(--chip-doc-fg)}
.c-oem{background:var(--chip-prod-bg);color:var(--chip-prod-fg)}
.c-dealer{background:var(--chip-app-bg);color:var(--chip-app-fg)}
.c-rel{background:var(--chip-rel-bg);color:var(--chip-rel-fg)}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:600;background:var(--pill-info-bg);color:var(--pill-info-fg)}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:600;white-space:nowrap}
.p-ok{background:var(--pill-ok-bg);color:var(--pill-ok-fg)} .p-warn{background:var(--pill-warn-bg);color:var(--pill-warn-fg)}
.p-bad{background:var(--pill-bad-bg);color:var(--pill-bad-fg)} .p-mut{background:var(--pill-mut-bg);color:var(--pill-mut-fg)}
.p-info{background:var(--pill-info-bg);color:var(--pill-info-fg)} .p-cyan{background:var(--pill-cyan-bg);color:var(--pill-cyan-fg)} .p-purple{background:var(--pill-purple-bg);color:var(--pill-purple-fg)}

/* ── DataTable ── */
table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
th{text-align:left;color:var(--text-muted);font-weight:600;font-size:var(--fs-caption);padding:10px 12px;background:var(--surface-subtle);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--border);color:var(--text-primary);vertical-align:middle;max-width:340px;overflow:hidden;text-overflow:ellipsis}
tr.click{cursor:pointer} tr.click:hover td{background:var(--surface-subtle)}
.fields .f{display:flex;padding:11px 0;border-bottom:1px solid var(--border);font-size:var(--fs-body)}
.fields .f .k{width:130px;color:var(--text-muted);flex:0 0 130px} .fields .f .v{flex:1;color:var(--text-primary);font-weight:600}
.note{font-size:var(--fs-caption);color:var(--text-muted);margin-top:10px;line-height:var(--lh-body)}
.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary)}
.cap{font-size:var(--fs-caption)}
.prefix{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--radius-chip);font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:700;background:var(--sidebar-bg);color:var(--sidebar-text);letter-spacing:.4px}

/* ── 칸반 보드 ── */
.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
.kcol{flex:1;min-width:200px;background:var(--surface-subtle);border:1px solid var(--border);border-radius:12px;padding:12px}
.kcol h4{font-size:var(--fs-body-lg);color:var(--text-primary);font-weight:700;margin-bottom:4px;display:flex;justify-content:space-between}
.kcol .ksum{font-size:var(--fs-caption);color:var(--text-muted);margin-bottom:12px}
.dcard{display:block;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:8px;color:var(--text-secondary);box-shadow:var(--shadow-card);transition:all .12s}
.dcard:hover{text-decoration:none;border-color:var(--primary);box-shadow:var(--shadow-popover)}
.dcard .co{font-size:var(--fs-body-lg);font-weight:700;color:var(--text-primary)}
.dcard .vv{font-size:var(--fs-body-lg);font-weight:700;color:var(--primary-hover);margin:5px 0;font-variant-numeric:tabular-nums}
.dcard .meta{font-size:var(--fs-caption);color:var(--text-muted)}
.dcard.won{border-left:3px solid var(--success)}
.dcard.stale{border-left:3px solid var(--danger)}
.filterbar{display:flex;gap:10px;margin-bottom:var(--sp-4);flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-card)}

/* ── 목록 화면: 고정 서브바(탭·필터·등록) + 탭 + 고정 표 헤더 + 페이지네이션 ──
   .stickybar 는 톱바 바로 아래에 붙고, .tbl-sticky 의 표 헤더는 그 바로 아래에 붙는다.
   두 오프셋이 맞물리도록 서브바의 실제 높이를 app.js 가 --stickybar-h 에 반영한다
   (필터가 많으면 두세 줄이 된다 — 스크립트가 없어도 토큰 기본값 60px 로 한 줄 기준은 성립).
   ≤899px 는 표가 자체 스크롤 컨테이너가 되어 헤더 고정이 성립하지 않으므로 둘 다 해제한다. */
.stickybar{position:sticky;top:var(--topbar-height);z-index:var(--z-subbar);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:var(--sp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card)}
/* 필터가 많은 화면(데모/평가 보고서 등)에서는 폼이 한 줄에 안 들어간다 —
   여유가 있으면 지금처럼 내용 폭을 그대로 쓰고(grow 0), 좁아지면 줄여 접히게 한다(shrink 1 + wrap).
   flex:none 이면 내용 폭에 고정되어 본문 가로 스크롤(=버그)이 생긴다. */
.stickybar form{display:flex;align-items:center;gap:10px;flex:0 1 auto;flex-wrap:wrap}
.stickybar .sp{flex:1;min-width:10px}

.tabs{display:inline-flex;gap:4px;flex:none;background:var(--surface-subtle);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:3px}
.tabs a{display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:var(--radius-pill);
  font-size:var(--fs-body-sm);font-weight:600;color:var(--text-muted);white-space:nowrap}
.tabs a:hover{text-decoration:none;color:var(--text-secondary)}
.tabs a.on{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-card)}
.tabs a .n{margin-left:6px;font-weight:500;font-variant-numeric:tabular-nums}
.tabs a.on .n{color:var(--primary)}

/* border-collapse:collapse 에서는 고정된 셀의 테두리가 따라오지 않아 inset 그림자로 밑줄을 대신한다 */
.tbl-sticky thead th{position:sticky;top:calc(var(--topbar-height) + var(--stickybar-h));z-index:var(--z-sticky);
  box-shadow:inset 0 -1px 0 var(--border)}

.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.pager .pinfo{font-size:var(--fs-caption);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ── 일괄 편집 툴바 (주소록 국가·언어) ── */
.bulkbar{display:flex;gap:10px;margin-bottom:var(--sp-4);flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-card)}
.bulkbar-idle,.bulkbar-active{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%}
.bulkbar-label{font-size:var(--fs-body-sm);font-weight:700;color:var(--text-secondary)}
.bulkbar-count{font-size:var(--fs-body-sm);color:var(--text-secondary)}
.bulkbar-count b{color:var(--primary)}
.bulkbar-hint{font-size:var(--fs-caption)}
.bulk-col{display:none;width:34px;text-align:center}
.bulkform.bulk-on .bulk-col{display:table-cell}
.bulkform input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px;cursor:pointer;vertical-align:middle}
/* 항상 노출되는 선택 열 (삭제 대기 연락처 등) */
.chk-col{width:34px;text-align:center}
.chk-col input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px;cursor:pointer;vertical-align:middle}

/* ── Form ── */
.formcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.fsec{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border)}
.fsec:last-of-type{border-bottom:none}
.fsec-head{margin-bottom:var(--sp-4)}
.in, select.in, textarea.in{height:var(--input-height);border:1px solid var(--border);border-radius:var(--radius-input);
    background:var(--field);padding:0 13px;font-size:var(--fs-body);color:var(--text-primary);font-family:inherit;width:100%;transition:border .12s, box-shadow .12s}
.in::placeholder{color:var(--text-disabled)}
.in:disabled{background:var(--surface-subtle);color:var(--text-muted)}
textarea.in{height:auto;min-height:80px;padding:11px 13px;resize:vertical}
/* 큰 입력창 — 결과 기록의 고객 피드백처럼 서술이 긴 본문 (기본 높이의 2배) */
textarea.in.ta-lg{min-height:160px}
/* 접이식 텍스트영역 — 접힘 시 한 줄 입력 높이, .open(포커스/내용 있음) 시 확장 */
textarea.in.ta-grow{min-height:var(--input-height);height:var(--input-height);padding:8px 13px;overflow:hidden;resize:none}
textarea.in.ta-grow.open{min-height:140px;height:auto;overflow:auto;resize:vertical}
.in:focus, select.in:focus, textarea.in:focus{outline:none;border-color:var(--focus-ring);box-shadow:var(--focus-shadow)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 22px}
.fld{display:flex;flex-direction:column;min-width:0}
.fld>label{order:0}
.fld>.in,.fld>select,.fld>input,.fld>textarea,.fld>.checks{order:1}
.fld>.hint{order:2}
.fld>.ferr{order:3}
.fld label{display:block;font-size:var(--fs-body-sm);color:var(--text-secondary);margin-bottom:7px;font-weight:600}
.fld .req{color:var(--danger);font-weight:700}
.ferr{font-size:var(--fs-caption);color:var(--danger);margin-top:5px;font-weight:500}
.checks{display:flex;gap:var(--sp-4);flex-wrap:wrap;padding-top:8px}
.checks label{font-size:var(--fs-body);display:inline-flex;align-items:center;gap:7px;font-weight:500;color:var(--text-secondary)}
.checks input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px}
/* 항목마다 설명·배지가 붙는 체크 목록 — 한 줄에 하나씩 세로로 쌓는다 */
.checks.checks-col{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
.checks.checks-col label{align-items:flex-start;gap:var(--sp-2);line-height:var(--lh-body)}
.checks.checks-col input[type=checkbox]{flex:0 0 auto;margin-top:3px}
/* Tag 자동완성 입력 — 다중 선택(칩 + 인라인 검색). 거래 폼 응용 분야. */
.tagfield{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-height:var(--input-height);
    border:1px solid var(--border);border-radius:var(--radius-input);background:var(--field);
    padding:6px 10px;transition:border .12s, box-shadow .12s}
.tagfield:focus-within{border-color:var(--focus-ring);box-shadow:var(--focus-shadow)}
.tagfield .chip{margin:0}
.tagfield .tag-x{width:18px;height:18px;margin-left:6px;padding:0;border:none;border-radius:var(--radius-pill);
    background:transparent;color:inherit;font-size:var(--fs-body);line-height:1;cursor:pointer;opacity:.65}
.tagfield .tag-x:hover{opacity:1}
.tagfield-input{flex:1;min-width:150px;height:28px;border:none;background:transparent;padding:0;
    font-size:var(--fs-body);color:var(--text-primary);font-family:inherit}
.tagfield-input:focus{outline:none}
.tagfield-input::placeholder{color:var(--text-disabled)}
.factions{display:flex;gap:var(--sp-2);margin-top:0;justify-content:flex-end;padding:var(--sp-4) var(--sp-6);background:var(--surface-subtle);border-top:1px solid var(--border)}
.card .factions{background:transparent;border-top:none;padding:0;margin-top:22px}
.sel-sm{height:34px;border:1px solid var(--border);border-radius:var(--radius-input);background:var(--surface);padding:0 10px;font-size:var(--fs-body-sm);color:var(--text-secondary);font-family:inherit}
.sel-sm:focus{outline:none;border-color:var(--focus-ring);box-shadow:var(--focus-shadow)}

/* ── InfoTooltip ── */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
     background:var(--border);color:var(--text-muted);font-size:10px;font-weight:700;cursor:help;vertical-align:middle;font-style:normal}
.tip .tipbox{display:none;position:absolute;bottom:135%;left:50%;transform:translateX(-50%);width:250px;
     background:var(--text-primary);color:#fff;font-size:var(--fs-caption);font-weight:400;line-height:var(--lh-body);padding:9px 11px;border-radius:8px;z-index:var(--z-popover);box-shadow:var(--shadow-popover);white-space:normal}
.tip:hover .tipbox,.tip:focus .tipbox{display:block}

/* ── 상세: Summary strip · Stage timeline ── */
.sumstrip{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);margin-bottom:var(--sp-4);overflow:hidden}
.sumitem{flex:1;min-width:140px;padding:14px 18px;border-right:1px solid var(--border)}
.sumitem:last-child{border-right:none}
/* 링크형 요약 카드 — 탭·필터 바로가기(계약·견적 목록). 현재 보고 있는 조합은 .on 으로 밑줄 표시 */
a.sumitem{color:inherit;transition:background .12s}
a.sumitem:hover{text-decoration:none;background:var(--hover)}
a.sumitem.on{box-shadow:inset 0 -3px 0 var(--primary)}
.sumitem .sl{font-size:11.5px;color:var(--text-muted);margin-bottom:6px;font-weight:500}
.sumitem .sv{font-size:var(--fs-title);font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.stagebar{display:flex;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px 18px 12px;margin-bottom:var(--sp-4);overflow-x:auto}
.stagebar .step{flex:1;min-width:80px;text-align:center;position:relative;padding-top:4px}
.stagebar .step::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--border)}
.stagebar .step:first-child::before{display:none}
.stagebar .step .dot{position:relative;z-index:1;display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong)}
.stagebar .step .nm{display:block;margin-top:6px;font-size:var(--fs-caption);color:var(--text-muted)}
.stagebar .step .dt{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--text-muted);opacity:.75;font-variant-numeric:tabular-nums}
.stagebar .step.done .dt,.stagebar .step.cur .dt{color:var(--text-secondary);opacity:1}
.stagebar .step.lost .dt{color:var(--danger)}
.stagebar .step.done::before,.stagebar .step.cur::before{background:var(--primary)}
.stagebar .step.done .dot{background:var(--primary);border-color:var(--primary)}
.stagebar .step.cur .dot{background:var(--surface);border-color:var(--primary);box-shadow:var(--focus-shadow)}
.stagebar .step.done .nm{color:var(--text-secondary)}
.stagebar .step.cur .nm{color:var(--primary-dark);font-weight:700}
.stagebar .step.lost .dot{background:var(--danger);border-color:var(--danger)}
.stagebar .step.lost .nm{color:var(--danger);font-weight:700}
.stagebar .step.lost::before{background:var(--danger)}
/* 단계 그래프 날짜 인라인 편집 — 코너 연필 토글 → .stageform.editing 에서 date 입력 노출 */
.stagewrap{position:relative}
.stage-edit-toggle{position:absolute;top:8px;right:10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--radius-button);background:var(--surface);color:var(--text-muted);font-size:var(--fs-body);line-height:1;cursor:pointer}
.stage-edit-toggle:hover{color:var(--primary);border-color:var(--primary)}
.stage-dt-in{display:none;margin:4px auto 0;width:100%;max-width:132px;height:30px;padding:0 6px}
.stage-edit-actions{display:none;align-items:center;gap:8px;padding:2px 2px 12px}
.stage-edit-hint{font-size:var(--fs-caption)}
.stageform.editing .stage-edit-toggle{display:none}
.stageform.editing .stagebar{margin-bottom:var(--sp-2)}
.stageform.editing .stagebar .step{min-width:118px}
.stageform.editing .stagebar .dt{display:none}
.stageform.editing .stage-dt-in{display:block}
.stageform.editing .stage-edit-actions{display:flex}

/* ── EmptyState ── */
.estate{text-align:center;padding:44px 20px}
.estate-ic{font-size:30px;margin-bottom:10px;opacity:.7}
.estate-title{font-size:var(--fs-title-sm);font-weight:700;color:var(--text-primary)}
.estate-desc{font-size:var(--fs-body-sm);color:var(--text-muted);margin-top:6px}
.estate-act{margin-top:var(--sp-4);display:flex;justify-content:center;gap:var(--sp-2)}

/* ── Composer (활동 등록) ── */
.composer{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:18px 20px;box-shadow:var(--shadow-card)}
.typesel{display:flex;gap:var(--sp-2);margin-bottom:12px;flex-wrap:wrap}
.typesel input{display:none}
.typesel label{height:30px;padding:0 13px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);font-size:var(--fs-body-sm);font-weight:500;color:var(--text-secondary);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .12s}
.typesel label:hover{background:var(--surface-subtle);border-color:var(--border-strong)}
.typesel input:checked+label{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.crow{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pathcell{display:flex;flex-direction:column;gap:var(--sp-1);min-width:150px}
.pathid{font-family:var(--font-mono);font-size:var(--fs-caption);word-break:break-all}
.atype{width:26px;height:26px;border-radius:7px;flex:0 0 26px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.a-call{background:var(--act-call)} .a-email{background:var(--act-email)} .a-meeting{background:var(--act-meeting)} .a-visit{background:var(--act-visit)} .a-note{background:var(--act-note)}

/* ── 알림 (flash) ── */
.flash{border-radius:10px;padding:13px 16px;font-size:var(--fs-body);margin-bottom:var(--sp-4);font-weight:500;border:1px solid}
.flash.ok{background:var(--green-50);border-color:var(--green-200);color:var(--green-800)}
.flash.err{background:var(--red-50);border-color:var(--red-200);color:var(--red-700)}
.flash a{color:inherit;text-decoration:underline;font-weight:600}

/* details 팝오버 */
details.dd{position:relative;display:inline-block}
details.dd summary{list-style:none;cursor:pointer}
details.dd summary::-webkit-details-marker{display:none}
details.dd .pop{position:absolute;right:0;top:44px;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-popover);padding:16px;width:300px}
/* 넓은 팝오버 — 긴 본문 입력(조치 기록 등)이 들어가는 경우. 여는 쪽 details 에 .dd-wide 를 함께 준다.
   기본 팝오버는 우측 정렬이라 폭을 키우면 왼쪽(사이드바 쪽)으로 잘린다 — 넓은 팝오버는 좌측 정렬로
   펼치고, ≤899px 에서는 부유 대신 카드 안에 흐르게 한다(.dd-wide 규칙, 좁은 화면 가로 넘침 방지). */
details.dd .pop.pop-wide{left:0;right:auto;width:min(440px, calc(100vw - 40px))}
/* 아주 넓은 입력 패널 — 결과·고객 피드백처럼 서술을 길게 적는 입력. 900px 급 폭은 부유시키면
   화면 밖으로 나가 가로 스크롤을 만든다 → 열렸을 때만 카드 안 한 줄을 차지하고 제자리에 펼친다.
   여는 쪽 details 에 .dd-xwide 를 함께 준다. */
details.dd.dd-xwide[open]{display:block;width:100%}
details.dd.dd-xwide .pop.pop-xwide{position:static;width:auto;top:auto;left:auto;right:auto;margin-top:var(--sp-3)}
details.dd .pop .fld + .fld{margin-top:var(--sp-4)}   /* 팝오버 안 필드가 둘 이상일 때 간격 */

/* 접근권한 매트릭스 */
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left;font-weight:600;color:var(--text-primary)}
.accbtn{border:0;background:none;cursor:pointer;font-weight:700;font-size:var(--fs-body-sm);font-family:inherit}
.acc-e{color:var(--success)} .acc-v{color:var(--primary-hover)} .acc-n{color:var(--border-strong)}
.acc-i{opacity:.4}   /* 그룹 상속 — 색(권한 수준)은 그대로 두고 흐리게만: 진하면 개별 지정, 흐리면 상속 */

/* 메뉴 설정 — 그룹 섹션 + ▲▼ 로 재정렬하는 항목 목록 (드래그 없음: 키보드·터치에서도 같게 동작) */
.msec + .msec{margin-top:var(--sp-4)}
.msec .mhead{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.mrows{list-style:none;margin:var(--sp-3) 0 0;padding:0}
.mrow{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;border-top:1px solid var(--border)}
.mrow:first-child{border-top:0}
.mrow .mname{flex:1 1 auto;min-width:0;font-size:var(--fs-body)}
.mrow .mv,.msec .mv{min-width:32px;padding:0 var(--sp-2)}
.mrows:empty::after{content:'항목 없음';display:block;padding:var(--sp-3) 0;color:var(--text-muted);font-size:var(--fs-body-sm)}
.navsw{display:inline-block;width:14px;height:14px;border-radius:50%;flex:0 0 14px;
       background:var(--navc,var(--border-strong));border:1px solid var(--border-strong)}
.matrix tr.mgrp td{background:var(--surface-subtle);font-weight:700;border-top:2px solid var(--border)}
.matrix td.sub{padding-left:var(--sp-4);font-weight:400;color:var(--text-secondary)}

/* ── 로그인 ── */
.authwrap{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--sidebar-bg);padding:var(--sp-4)}
.authcard{width:400px;max-width:100%;background:var(--surface);border-radius:16px;padding:34px;box-shadow:var(--shadow-drawer)}
.authcard .logo{width:42px;height:42px;background:url(logo.png) center/contain no-repeat;margin-bottom:16px}
.authcard h1{font-size:21px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.authcard .sub{font-size:var(--fs-body-sm);color:var(--text-muted);margin-bottom:22px}
.authcard .fld{margin-bottom:14px}
.authcard .btn{width:100%;justify-content:center;margin-top:8px}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 2px;color:var(--text-muted);font-size:var(--fs-body-sm)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}
.btn-ms svg{flex:none}

/* ── 힌트 · 안내 배너 ── */
.hint{font-size:var(--fs-caption);color:var(--text-muted);line-height:var(--lh-body);margin:6px 0 0;font-weight:400}
.hint b{color:var(--text-secondary);font-weight:600}
.helpbar{display:flex;align-items:flex-start;gap:10px;background:var(--tint);border:1px solid var(--teal-200);border-radius:10px;padding:13px 16px;font-size:var(--fs-body-sm);color:var(--primary-dark);margin-bottom:var(--sp-5);line-height:1.6}
.helpbar .i{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;font-style:normal;margin-top:1px}
.helpbar b{color:var(--primary-dark);font-weight:700}

/* ── Contact 메모 팝오버 (native Popover API) ── */
.memo-btn{gap:4px}
.memo-pop{margin:auto;border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-popover);padding:0;max-width:min(440px,92vw);width:max-content;
  background:var(--surface);color:var(--text-secondary)}
.memo-pop::backdrop{background:rgba(16,24,40,.32)}
.memo-pop-h{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;
  font-size:var(--fs-body);color:var(--text-primary)}
.memo-pop-b{padding:14px 16px;font-size:var(--fs-body);line-height:1.6;white-space:normal;
  max-height:60vh;overflow:auto}

/* ── 삭제 확인 모달 (type-to-confirm) — assets/app.js 가 렌더·제어 ── */
.confirm-del{margin:auto;border:none;padding:0;background:transparent;
  max-width:min(440px,92vw);width:100%;color:var(--text-secondary)}
.confirm-del::backdrop{background:rgba(16,24,40,.44)}
.confirm-del-box{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-drawer);padding:var(--sp-6)}
.confirm-del-h{font-size:var(--fs-h2);font-weight:700;color:var(--danger);margin-bottom:var(--sp-3)}
.confirm-del-msg{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary);margin:0 0 var(--sp-5)}
.confirm-del-lab{display:block;font-size:var(--fs-body-sm);color:var(--text-secondary);margin-bottom:var(--sp-2)}
.confirm-del-lab b{color:var(--danger);font-weight:700}
.confirm-del-in{width:100%}
.confirm-del-act{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-5)}
.confirm-del-ok[disabled]{opacity:.45;cursor:not-allowed}

/* ── 선택 팝업 (picker) — 자동완성 검색 + 분류 필터로 목록에서 1건을 골라 폼에 담는다.
     native <dialog> 는 최상위 레이어라 카드 안(내부 스크롤 .cbody 옆)에 두어도 잘리지 않는다.
     동작은 assets/app.js '선택 팝업' 모듈(위임 이벤트)이 담당한다. ── */
.picker{margin:auto;border:none;padding:0;background:transparent;
  max-width:min(620px,94vw);width:100%;color:var(--text-secondary)}
.picker::backdrop{background:rgba(16,24,40,.44)}
.picker-box{display:flex;flex-direction:column;gap:var(--sp-3);max-height:min(84vh,660px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-drawer);padding:var(--sp-5)}
.picker-h{font-size:var(--fs-title);font-weight:700;color:var(--text-primary)}
.picker-desc{margin:0;font-size:var(--fs-body-sm);color:var(--text-secondary);line-height:var(--lh-body)}
.picker-filters{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.picker-filters .in{flex:1 1 240px;min-width:0}
.picker-filters select.in{flex:0 1 180px}
/* 후보 목록 — 면은 흰색으로 두고 hover 를 옅은 면으로 (muted 메타 텍스트의 대비 4.5:1 유지) */
.picker-list{flex:1 1 auto;min-height:140px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-input)}
.picker-item{display:block;width:100%;padding:9px 12px;border:0;border-bottom:1px solid var(--border);
  background:none;font:inherit;font-size:var(--fs-body-sm);color:var(--text-secondary);
  text-align:left;cursor:pointer}
/* display 를 지정한 클래스가 UA 의 [hidden]{display:none} 을 이긴다 — 검색에서 걸러진 항목이 그대로 보인다 */
.picker-item[hidden],.picker-empty[hidden]{display:none}
/* 마지막 '보이는' 항목의 구분선은 app.js 가 .last 로 지운다 (필터로 뒤쪽이 숨으면 :last-of-type 이 안 맞는다) */
.picker-item:last-of-type,.picker-item.last{border-bottom:0}
.picker-item:hover,.picker-item.active{background:var(--surface-subtle)}
.picker-item.on{background:var(--brand-soft);color:var(--primary-dark)}
.picker-item .t{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.picker-item .m{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--text-muted)}
.picker-item.on .m{color:var(--primary)}
.picker-empty{padding:var(--sp-6) var(--sp-5);text-align:center;
  font-size:var(--fs-body-sm);color:var(--text-muted)}
.picker-act{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.picker-act .sp{flex:1}
.picker-act .hint{margin:0}
.picker-act .btn[disabled]{opacity:.45;cursor:not-allowed}

/* ============================================================
   반응형 — 1199px(태블릿) · 899px(모바일) · 599px(협소)
   ============================================================ */
@media (max-width:1199px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .content{padding:var(--sp-5)}
  /* 열이 한 줄로 쌓이면 높이 기준(옆 열)이 사라진다 — 3:1 비율·내부 스크롤 해제하고 자연 높이로 */
  .vsplit>.vs-3,.vsplit>.vs-1{flex:0 0 auto}
  .vsplit .cbody{overflow:visible}
}

@media (max-width:899px){
  /* 사이드바 → 오프캔버스 드로어 */
  .nav{position:fixed;top:0;left:0;bottom:0;z-index:var(--z-nav);
       width:var(--sidebar-width-mobile);min-height:0;overflow-y:auto;
       transform:translateX(-102%);transition:transform .22s ease;box-shadow:none}
  .nav-toggle:checked ~ .nav{transform:translateX(0);box-shadow:var(--shadow-drawer)}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:var(--z-scrim);
       background:rgba(16,24,40,.44);opacity:0;pointer-events:none;transition:opacity .22s ease}
  .nav-toggle:checked ~ .nav-scrim{opacity:1;pointer-events:auto}
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
       width:40px;height:40px;padding:0 9px;border-radius:var(--radius-button);cursor:pointer;flex:0 0 40px}
  .nav-burger:hover{background:var(--hover)}
  .nav-burger span,.nav-burger::before,.nav-burger::after{content:"";display:block;height:2px;border-radius:2px;background:var(--text-secondary)}
  /* 드로어 헤더의 닫기(✕) — 브랜드 우측 */
  .nav-close{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;flex:0 0 auto;
       width:34px;height:34px;border-radius:var(--radius-button);cursor:pointer;color:var(--sidebar-text);
       font-size:16px;line-height:1}
  .nav-close:hover{background:rgba(255,255,255,.1)}
  /* 드로어 열림 시 배경(본문) 스크롤 잠금 */
  body.nav-open{overflow:hidden}

  .top{padding:0 var(--sp-4);gap:10px}
  .top .search{max-width:none}
  .content{padding:var(--sp-4)}

  /* 폼 1열 + 풀폭 액션 */
  .fgrid{grid-template-columns:1fr}
  .factions{flex-direction:column-reverse}
  .factions .btn{width:100%;justify-content:center}
  .phead-actions{width:100%;margin-left:0}
  .sumitem{min-width:45%}

  /* 테이블: 컨테이너 내 가로 스크롤 (열 찌그러짐 방지) */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 표가 자체 스크롤 컨테이너가 되면 헤더 고정의 기준이 뷰포트가 아니게 된다 — 해제 */
  .tbl-sticky thead th{position:static;box-shadow:none}
  /* 서브바는 줄바꿈 허용(가로 스크롤 대신) — 높이가 가변이라 고정도 함께 해제 */
  .stickybar{position:static}

  /* 넓은 팝오버: 부유 대신 카드 안에서 한 줄 차지 — 좁은 화면에서 잘리거나 넘치지 않게 */
  details.dd.dd-wide{display:block;width:100%}
  details.dd.dd-wide .pop.pop-wide{position:static;width:auto;top:auto;right:auto;
       padding:var(--sp-3) 0 0;border:0;background:none;box-shadow:none}

  /* 선택 팝업: 필터를 각각 한 줄로 펴고(좁은 폭에서 입력칸이 눌리지 않게) 높이는 화면에 맞춘다 */
  .picker-filters .in,.picker-filters select.in{flex:1 1 100%}
  .picker-box{max-height:88vh}

  /* 터치 타깃 확대 */
  .btn{height:var(--btn-height-mobile)}
  .btn-sm{height:36px}
  .in, select.in{height:var(--input-height-mobile)}
  .nav a{height:44px}
}

@media (max-width:599px){
  .rolechip{display:none}
  /* 메뉴 설정: 항목 이름을 한 줄 통째로 주고 게이트·그룹·▲▼ 를 아랫줄로 — 한 줄에 다 넣으면 배지가 3줄로 접힌다 */
  .mrow{flex-wrap:wrap}
  .mrow .mname{flex:1 1 100%}
  /* 통합 검색: 폼 대신 아이콘 링크(검색 화면에서 재검색) — 터치 타깃 42px */
  .top .search{display:none}
  .top .search-ico{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;
       border-radius:var(--radius-button);font-size:17px;text-decoration:none;color:var(--text-secondary)}
  .top .search-ico:hover{background:var(--hover)}
  /* 상단바 CTA: 좁은 화면에선 레이블 접고 ＋ 아이콘만(혼잡·가로 스크롤 방지) */
  .top .btn.doc-new .doc-new-t{display:none}
  .top .btn.doc-new{padding:0 12px}
  .top .btn.note-new .doc-new-t{display:none}
  .top .btn.note-new{padding:0 12px}
  .kpi .card{min-width:calc(50% - var(--sp-4))}
  .funnel .amt{width:88px}
  .funnel .bn{width:84px}
  /* 탭: 좁은 화면에선 한 줄에 못 들어간다 — flex:none 을 풀어 서브바 안에서 접히게 한다
     (가로 스크롤 대신 줄바꿈 = .stickybar 규약. 실제 높이는 app.js 가 --stickybar-h 에 반영) */
  .tabs{display:flex;flex-wrap:wrap;flex:1 1 100%}
}

/* ── 노트 마크다운 렌더 (note_md — 노트 카드·전체 목록 본문) ── */
.note-md{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-secondary)}
.note-md>:first-child{margin-top:0}
.note-md>:last-child{margin-bottom:0}
.note-md-p{margin:0 0 var(--sp-2)}
.note-md-h{margin:var(--sp-3) 0 var(--sp-1);font-weight:700;color:var(--text-primary);line-height:1.35}
h4.note-md-h{font-size:var(--fs-body-lg)}
h5.note-md-h,h6.note-md-h{font-size:var(--fs-body)}
.note-md-ul,.note-md-ol{margin:0 0 var(--sp-2);padding-left:1.35em}
.note-md-ul .note-md-ul,.note-md-ul .note-md-ol,.note-md-ol .note-md-ul,.note-md-ol .note-md-ol{margin-bottom:0}
.note-md-ul li,.note-md-ol li{margin:1px 0}
.note-md-q{margin:0 0 var(--sp-2);padding:2px 0 2px 10px;border-left:3px solid var(--border-strong);color:var(--text-muted)}
.note-md code{font-family:var(--font-mono);font-size:.92em;background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--radius-chip);padding:1px 5px}
.note-md-pre{margin:0 0 var(--sp-2);padding:10px 12px;background:var(--surface-subtle);border:1px solid var(--border);border-radius:var(--radius-input);overflow-x:auto}
.note-md-pre code{font-family:var(--font-mono);font-size:var(--fs-caption);background:none;border:0;padding:0;white-space:pre}
.note-md-hr{border:0;border-top:1px solid var(--border);margin:var(--sp-3) 0}
.note-md a{word-break:break-word}

/* ── 노트 딥링크 (#note-<id>) — 링크 복사 버튼 + 링크로 열린 노트 행 강조 ── */
/* 스크롤 여백: 고정 톱바 아래에 행이 숨지 않게 (JS 가 없을 때의 네이티브 앵커 점프도 이 값을 쓴다) */
.noterow{scroll-margin-top:calc(var(--topbar-height) + var(--sp-6))}
.noterow>td{transition:background .45s ease, box-shadow .45s ease}
.noterow.note-hit>td{background:var(--warning-bg)}
.noterow.note-hit>td:first-child{box-shadow:inset 3px 0 0 var(--warning-strong)}
.note-copy{padding:0 8px;min-width:36px;justify-content:center}   /* 아이콘 하나짜리 버튼 — 옆 ✎/× 와 같은 타깃 크기 */
.note-copy.copied{color:var(--success)}

/* ── 인쇄 (보고·공유용) ── */
@media print{
  body{display:block;background:#fff}
  .nav,.top,.nav-scrim,.nav-burger,.phead-actions,.factions,.filterbar,.stickybar,.pager,.note-copy{display:none !important}
  .content{padding:0;max-width:none}
  .card,.formcard,.sumstrip,.stagebar{box-shadow:none;border-color:#ccc;break-inside:avoid}
  /* 고정 요소는 인쇄에서 해제 — 매 페이지에 겹쳐 찍히는 것을 막는다 */
  .tbl-sticky thead th{position:static}
  a{color:inherit;text-decoration:none}
}

/* ── 모션 최소화 선호 존중 ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}