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

*{box-sizing:border-box;margin:0;padding:0}
/* 앱 셸 — 헤더/사이드바를 화면에 고정하고 .content 만 스크롤시킨다(페이지 전체 스크롤 아님) */
body{font-family:var(--font-sans);font-size:var(--fs-body-lg);color:var(--text-secondary);
     background:var(--page-bg);display:flex;height:100vh;overflow:hidden;-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 ── */
.nav{width:var(--sidebar-width);flex:0 0 var(--sidebar-width);background:var(--sidebar-bg);height:100vh;overflow-y:auto;padding-bottom:var(--sp-4)}
.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}
/* 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;height:100vh;min-height: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}
.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)}
.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)}
.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;min-height:0;overflow-y:auto;overflow-x:hidden}

/* 상단 컨트롤 고정 — 페이지 헤더·필터·등록 버튼 묶음. .content 스크롤 최상단에 붙는다.
   좌우 여백을 음수 마진으로 상쇄해 배경이 스크롤 영역 전폭을 덮게 한다(뒤 내용 비침 방지). */
.stickybar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--page-bg);
  margin:calc(var(--sp-6) * -1) calc(var(--sp-7) * -1) var(--sp-4);
  padding:var(--sp-6) var(--sp-7) var(--sp-3)}
.stickybar > :last-child{margin-bottom:0}
/* sticky 요소는 컨테이닝 블록(=.content 의 content box) 위로 올라가지 못해 상단 패딩만큼 틈이 남고
   그 사이로 스크롤되는 내용이 비친다. 배경을 위로 연장해 가린다. */
.stickybar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--sp-6);background:var(--page-bg)}
/* 테이블 헤더 고정 — 위의 .stickybar 아래에 붙도록 오프셋을 준다(값은 app.js 가 측정해 주입). */
thead th{position:sticky;top:var(--sticky-offset,0px);z-index:1}

/* 페이지네이션 */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:var(--sp-4)}
.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;
  border:1px solid var(--border);border-radius:var(--radius-button);background:var(--surface);
  color:var(--text-secondary);font-size:var(--fs-body-sm);font-weight:600}
.pager .pg:hover{background:var(--hover);text-decoration:none}
.pager .pg.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pager .pg.off{opacity:.4;pointer-events:none}
.pager .gap{color:var(--text-muted);padding:0 2px}
/* 페이지 성격별 최대 폭 */
.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)}
.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}
.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)}
.nowrap{white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary)}
.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)}

/* ── 일괄 편집 툴바 (주소록 국가·언어) ── */
.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.admin{border-left:3px solid var(--admin-accent)}
.bulkbar-label{font-size:var(--fs-body-sm);font-weight:700;color:var(--text-secondary)}
.bulkbar.admin .bulkbar-label{color:var(--admin-accent)}
.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}

/* ── 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}
.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}
.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}
.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}
.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 기반, 룩앤필은 팝오버 계승 ── */
.acf{position:relative;display:inline-block}
.acf > summary{list-style:none;cursor:pointer}
.acf > summary::-webkit-details-marker{display:none}
.acf-trigger{display:inline-flex;align-items:center;gap:8px;min-width:220px;height:40px;padding:0 12px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);color:var(--text-secondary);font-size:var(--fs-body-sm);font-weight:600}
.acf-trigger:hover{border-color:var(--border-strong)}
.acf[open] .acf-trigger{border-color:var(--primary)}
.acf-trigger .acf-lead{color:var(--text-muted)}
.acf-trigger .acf-caret{margin-left:auto;color:var(--text-muted);transition:transform .15s}
.acf[open] .acf-trigger .acf-caret{transform:rotate(180deg)}
.acf-pop{position:absolute;left:0;top:46px;z-index:60;width:400px;max-width:92vw;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-popover);overflow:hidden}
.acf-head{padding:14px 16px 12px;border-bottom:1px solid var(--border)}
.acf-title{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--text-primary)}
.acf-x{border:0;background:none;cursor:pointer;color:var(--text-muted);font-size:20px;line-height:1;font-family:inherit;padding:0}
.acf-sub{color:var(--text-muted);font-size:var(--fs-caption);margin:2px 0 10px}
.acf-all{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);font-weight:600;color:var(--text-secondary);cursor:pointer}
.acf-all .acf-selcount{margin-left:auto;color:var(--text-muted);font-weight:400;font-size:var(--fs-caption)}
.acf-list{max-height:300px;overflow-y:auto;padding:4px 0}
.acf-grp{padding:8px 16px 4px;font-size:var(--fs-caption);font-weight:700;color:var(--text-muted)}
.acf-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer}
.acf-item:hover{background:var(--hover)}
.acf-item > input{flex:0 0 auto;margin:0}
.acf-item .acf-txt{display:flex;flex-direction:column;min-width:0;gap:1px}
.acf-item .acf-name{font-size:var(--fs-body-sm);color:var(--text-primary);font-weight:600}
.acf-item .acf-desc{font-size:var(--fs-caption);color:var(--text-muted)}
.acf-item .acf-cnt{margin-left:auto;flex:0 0 auto;font-size:var(--fs-caption);color:var(--text-muted);font-variant-numeric:tabular-nums}
.acf-empty{padding:18px 16px;color:var(--text-muted);font-size:var(--fs-body-sm);text-align:center}
.acf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-subtle)}
.acf-reset{border:0;background:none;cursor:pointer;color:var(--text-muted);font-weight:600;font-size:var(--fs-body-sm);font-family:inherit;padding:0}
.acf-reset:hover{color:var(--text-secondary)}
/* 선택된 액션 칩 */
.acf-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 10px;border-radius:var(--radius-pill);
  background:var(--surface-subtle);border:1px solid var(--border);color:var(--text-secondary);font-size:var(--fs-caption);font-weight:600;text-decoration:none}
.acf-chip:hover{border-color:var(--border-strong)}
.acf-chip .x{display:inline-flex;color:var(--text-muted);font-size:14px;line-height:1}

/* 접근권한 매트릭스 */
.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)}

/* ── 로그인 ── */
.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}

/* ============================================================
   반응형 — 1199px(태블릿) · 899px(모바일) · 599px(협소)
   ============================================================ */
@media (max-width:1199px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .content{padding:var(--sp-5)}
  .stickybar{margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-3)}
  .stickybar::before{height:var(--sp-5)}
}

@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}
  /* display:block 이면 table 자체가 스크롤 컨테이너라 sticky thead 기준이 어긋난다 → 모바일은 해제 */
  thead th{position:static}
  .stickybar{margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-2)}
  .stickybar::before{height:var(--sp-4)}

  /* 터치 타깃 확대 */
  .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}
  /* 통합 검색: 폼 대신 아이콘 링크(검색 화면에서 재검색) — 터치 타깃 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)}
  .kpi .card{min-width:calc(50% - var(--sp-4))}
  .funnel .amt{width:88px}
  .funnel .bn{width:84px}
}

/* ── 인쇄 (보고·공유용) ── */
@media print{
  body{display:block;background:#fff}
  .nav,.top,.nav-scrim,.nav-burger,.phead-actions,.factions,.filterbar{display:none !important}
  .content{padding:0;max-width:none}
  .card,.formcard,.sumstrip,.stagebar{box-shadow:none;border-color:#ccc;break-inside:avoid}
  a{color:inherit;text-decoration:none}
}

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