:root{
    --font-apple-sd:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
    --navy:#1c2b46; --navy2:#26395c; --red:#b91c1c; --red-soft:#fdecec;
    --beige:#e9e4db; --line:#e2e5ea; --bg:#f4f6f9; --ink:#1f2733; --muted:#6b7686;
    --ok:#15803d; --ok-soft:#e7f5ec; --warn:#b45309; --amber:#f59e0b;
  }
  *{box-sizing:border-box;}
  button,input,select,textarea{font-family:var(--font-apple-sd);}
  /* 본문을 최소 한 화면 높이로 세우고 세로로 쌓는다 — 전체 조망 맨 아래 범례(.legend)를 화면 바닥에
     붙이기 위해서다(2026-09-28). 종전에는 카드가 몇 장 없는 날 범례가 화면 한복판, 카드 바로 밑에
     떠 있었다. 팝업·알림함·토스트는 전부 position:fixed 라 이 배치 밖에 있다. */
  body{margin:0;font-family:var(--font-apple-sd);
       background:var(--bg);color:var(--ink);font-size:13px;
       min-height:100vh;display:flex;flex-direction:column;}
  header.toolbar, .tabsbar{flex:0 0 auto;}
  /* 전체 조망만 남은 자리를 다 차지한다 — 그래야 범례를 margin-top:auto 로 바닥까지 밀 수 있다 */
  #view-board{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
  #view-board .board{flex:0 0 auto;}
  /* ── 상단 한 줄(로고·제목 + 툴바) ──
     종전에는 베이지 제목 띠(58px) + 흰 툴바(60px) 두 줄이었다. 전체 조망을 종일 띄워 두는
     화면이라 위쪽 고정 영역을 한 줄(≈44px)로 줄였다(2026-09-24). 로고·제목은 왼쪽 끝,
     나머지 버튼은 종전 순서 그대로. 폭이 모자라면 줄바꿈으로 흘러내린다(숨기지 않는다). */
  header.toolbar{display:flex;align-items:center;gap:10px;padding:9px 16px;background:#fff;
       border-bottom:1px solid var(--line);flex-wrap:wrap;min-height:54px;}
  header .brand{display:flex;align-items:baseline;gap:9px;margin-right:6px;white-space:nowrap;
       border-right:1px solid var(--line);padding-right:12px;}
  header .brand h1{font-size:15px;margin:0;font-weight:800;color:var(--navy);}
  header .logo{font-family:var(--font-apple-sd);font-size:18px;font-weight:700;color:var(--navy);letter-spacing:.5px;line-height:1;}
  header .logo sup{font-size:9px;letter-spacing:2px;}
  .toolbar .role{display:flex;align-items:center;gap:6px;}
  .toolbar select,.toolbar input,.toolbar button{font-family:inherit;font-size:12.5px;border:1px solid var(--line);
       border-radius:6px;padding:7px 10px;background:#fff;color:var(--ink);}
  .toolbar select{cursor:pointer;}
  /* 행세 부서 선택 — 배경색은 JS가 그 부서 색으로 칠한다(오른쪽 색 알약을 대신한다) */
  .toolbar select.deptswitch{color:#fff;font-weight:800;border-color:transparent;padding:7px 9px;
       text-align:center;text-align-last:center;}
  .toolbar select.deptswitch option{background:#fff;color:var(--ink);font-weight:700;text-align:left;}
  button{cursor:pointer;}
  .btn-primary{background:var(--navy);color:#fff;border:none!important;font-weight:600;}
  .btn-primary:hover{background:var(--navy2);}
  .btn-ghost{background:#fff;}
  .btn-ghost:hover{background:#f1f3f6;}
  .spacer{flex:1;}
  .deptpill{font-weight:800;padding:5px 11px;border-radius:20px;color:#fff;font-size:12px;letter-spacing:.3px;}
  .bell{position:relative;border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 10px;font-weight:600;}
  .bell .cnt{position:absolute;top:-7px;right:-7px;background:var(--red);color:#fff;border-radius:11px;
       min-width:18px;height:18px;font-size:11px;line-height:18px;text-align:center;padding:0 4px;font-weight:700;}
  /* ── tabs ── */
  .tabsbar{display:flex;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);}
  /* 탭 줄 36px → 43px(+20%, 2026-09-24). 글자 크기는 그대로, 위 여백·탭 위아래 패딩만 늘렸다. */
  .tabs{display:flex;gap:3px;padding:6px 14px 0;flex:1 1 auto;min-width:0;
       overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{--tc:#64748b;--tcs:#f1f3f6;   /* --tc 성격별 색 · --tcs 그 색의 옅은 배경 */
       flex:0 0 auto;white-space:nowrap;border:1px solid var(--line);border-bottom:none;background:var(--tcs);
       color:var(--tc);font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:8px 8px 0 0;}
  .tab:hover{filter:brightness(.96);}
  .tab.active{background:#fff;color:var(--tc);
       box-shadow:0 3px 0 var(--tc) inset, 0 -2.5px 0 var(--tc) inset;}   /* 위·아래 색띠 */
  /* 탭 성격별 색 구분. 무채색(회색/검정)은 마스터 전용 탭에만 쓴다 — 색이 빠져 있으면
     "일반 사용자에게는 안 보이는 관리 영역"이라는 뜻이 되게. 나머지는 하는 일에 맞춰 나눈다.
     core 핵심운영 · time 일정/이력 · data 원장조회 · side 보조·참고 · admin 마스터전용 */
  .tab.t-core  {--tc:#1d4ed8;--tcs:#dce7fe;font-weight:800;}   /* 제일 자주 쓰는 3개 — 가장 선명하게 */
  .tab.t-core:not(.active){box-shadow:0 3px 0 var(--tc) inset;}   /* 비활성일 때도 윗줄을 남겨 눈에 띄게 */
  .tab.t-time  {--tc:#14722f;--tcs:#e7f5ec;}
  .tab.t-data  {--tc:#0e7490;--tcs:#e2f1f6;}
  .tab.t-side  {--tc:#6d28d9;--tcs:#f0e9fd;}   /* 수정요청·처리 분석·설명서 — 업무 처리가 아닌 보조/참고 3개 */
  .tab.t-admin {--tc:#3f3f46;--tcs:#e8e8ea;}   /* 마스터 전용 4개 — 유일한 무채색(색 기운 없는 순회색) */
  /* 탭이 폭을 넘칠 때만 나타나는 좌우 스크롤 화살표 */
  .tabnav{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:26px;padding:6px 0 0;
       border:none;background:#fff;color:var(--muted);font-size:17px;font-weight:800;line-height:1;cursor:pointer;}
  .tabnav.show{display:flex;}
  .tabnav:hover{color:var(--navy);}
  .tabnav.prev{padding-left:6px;}
  .tabnav.next{padding-right:6px;}
  /* ── summary ── */
  .sum{padding:18px 22px 34px;}
  /* 칸 수가 늘어도 마지막 줄에 한 칸만 남지 않게 auto-fit — 8칸 고정이었다 */
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-bottom:6px;}
  .kpi{background:#fff;border:1px solid var(--line);border-top:3px solid #ccc;border-radius:10px;padding:12px 13px;}
  .kpi .v{font-size:23px;font-weight:800;line-height:1;}
  .kpi .l{font-size:11px;color:var(--muted);margin-top:6px;}
  .kpi.click{cursor:pointer;transition:.12s;}
  .kpi.click:hover{box-shadow:0 3px 10px rgba(20,30,50,.12);transform:translateY(-1px);}
  /* 완료 보관 범위 안내 줄 — 부서별 처리의 +지난 완료 버튼과 같은 토글을 여기에도 둔다 */
  .sum-scope{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-bottom:12px;}
  .sum-none{color:var(--muted);font-size:12.5px;padding:10px 0;}
  .sum-note{color:var(--muted);font-size:11.5px;margin-top:2px;}
  .fold{display:inline-block;width:12px;color:var(--muted);font-size:10px;}
  .foldable{cursor:pointer;}
  .foldable:hover{background:#eef2f7;}
  .dcount{margin-left:auto;color:var(--muted);font-weight:600;font-size:11.5px;}
  .dategrp.folded .datehd{border-bottom:none;}
  .drow{cursor:pointer;}
  .drow:hover{background:#f7f9fb;}
  .drow.done{opacity:.6;}
  .actday.folded{padding-bottom:10px;}
  .actday.folded .actchips{margin-bottom:0;}
  .actlist li.more{color:var(--muted);font-style:italic;}
  .sum h3{font-size:14px;margin:24px 0 10px;display:flex;align-items:center;gap:9px;}
  .sum h3 .hint{font-weight:400;font-size:11.5px;color:var(--muted);}
  .distbar{display:flex;height:32px;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
  .distbar div{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;}
  .dategrp{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden;background:#fff;}
  .datehd{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#f7f9fb;border-bottom:1px solid var(--line);font-weight:800;font-size:13px;}
  .datehd .dd{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:#eef1f5;color:var(--muted);}
  .datehd .dd.over{background:var(--red-soft);color:var(--red);}
  .datehd .dd.soon{background:#fef3c7;color:var(--warn);}
  .drow{display:grid;grid-template-columns:1.5fr 1.3fr 1fr 1.3fr;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid #eef1f5;font-size:12.5px;}
  .drow:last-child{border-bottom:none;}
  .drow .cust{font-weight:700;}
  .stage-chip{font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;color:#fff;display:inline-block;}
  .pbar{height:8px;border-radius:5px;background:#eef1f5;overflow:hidden;}
  .pbar i{display:block;height:100%;background:var(--ok);}
  .pct{font-size:10.5px;color:var(--muted);margin-top:3px;}
  .actday{border-left:2px solid var(--line);padding:0 0 2px 16px;margin-left:9px;position:relative;}
  .actday::before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--navy);}
  .actday .ad{font-weight:800;font-size:13px;margin-bottom:7px;}
  .actchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
  .achip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;background:#eef1f5;color:var(--ink);}
  .actlist{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:4px;}
  .actlist li{font-size:12px;color:var(--muted);}
  .actlist li b{color:var(--ink);}
  /* ── 월별 완료 조망 ── */
  .mtoolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .mtoolbar select{font-family:inherit;font-size:13px;border:1px solid var(--line);border-radius:7px;padding:7px 10px;background:#fff;cursor:pointer;}
  .mcols,.mrec>summary{display:grid;grid-template-columns:1.4fr .85fr .85fr 1.1fr 1.1fr .72fr .66fr 1.05fr;gap:10px;align-items:center;}
  .mcols{padding:4px 13px;font-size:11px;color:var(--muted);font-weight:700;}
  /* 계약금액 — 억 단위 열한 자리가 들어오는 칸이라 자릿수를 눈으로 맞출 수 있게
     오른쪽 정렬 + 고정폭 숫자. 값이 없는 업무구분은 빈칸이라 따로 손댈 게 없다. */
  /* 오른쪽 여백 — 오른쪽 정렬한 숫자 끝과 왼쪽 정렬한 완료일시가 칸 사이 간격(10px)만으로는
     붙어 읽힌다. 머리글에도 같이 줘야 열이 어긋나지 않는다. */
  .mcols .amt,.mrec .amt{text-align:right;font-variant-numeric:tabular-nums;padding-right:9px;}
  .mrec .amt{font-size:12px;font-weight:600;letter-spacing:-.2px;}
  .mrec{border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:7px;overflow:hidden;}
  .mrec>summary{list-style:none;cursor:pointer;padding:10px 13px;font-size:12.5px;}
  .mrec>summary::-webkit-details-marker{display:none;}
  .mrec[open]>summary{background:#f7f9fb;border-bottom:1px solid var(--line);}
  .mrec .cust{font-weight:700;display:flex;align-items:center;gap:6px;}
  .mrec .met-ok{color:var(--ok);font-weight:700;}
  .mrec .met-no{color:var(--red);font-weight:700;}
  .mrec .rmk-badge{font-size:10px;font-weight:700;color:var(--warn);background:#fef3c7;border-radius:5px;padding:1px 5px;}
  .mtl{padding:11px 15px 14px;background:#fcfdfe;}
  .mtl .note0{font-size:12px;color:#7f1d1d;background:var(--red-soft);border:1px solid #f3c4c4;border-radius:7px;padding:7px 10px;margin-bottom:9px;}
  .mtl .step{display:flex;gap:11px;padding:6px 0;font-size:12px;border-bottom:1px dashed #eef1f5;}
  .mtl .step:last-child{border-bottom:none;}
  .mtl .step .tm{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:96px;}
  .mtl .step .rk{color:var(--muted);}
  .mtl .step .rk b{color:var(--ink);}
  /* ── 부서별 처리 보드 ── */
  .deptboard{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:16px 22px 4px;align-items:start;}
  .dcol{background:#eef1f5;border:1px solid var(--line);border-radius:10px;}
  .dcol-h{display:flex;align-items:center;gap:8px;padding:11px 13px;color:#fff;font-weight:800;font-size:13px;border-radius:10px 10px 0 0;}
  .dcol-h .dn{margin-left:auto;background:rgba(255,255,255,.25);border-radius:10px;padding:1px 9px;font-size:11px;font-weight:700;}
  .dcells{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:50px;}
  .dcell{background:#fff;border:1px solid var(--line);border-left:4px solid #ccc;border-radius:8px;padding:9px 10px;cursor:pointer;transition:.12s;}
  .dcell:hover{box-shadow:0 4px 12px rgba(20,30,50,.12);transform:translateY(-1px);}
  .dcell.turn{border-left-color:var(--ok);}
  .dcell.wait{border-left-color:var(--amber);}
  .dcell.done{background:#f3f4f6;opacity:.65;border-left-color:#cbd5e1;}
  .dc-top{font-weight:800;font-size:12.5px;margin-bottom:4px;}
  .dc-sub{font-size:11.5px;color:var(--muted);margin-bottom:6px;}
  .dc-fund{font-family:inherit;color:var(--ink);}
  .dc-foot{display:flex;align-items:center;gap:6px;}
  .dtag{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:5px;}
  .dtag.turn{background:var(--ok-soft);color:var(--ok);}
  .dtag.wait{background:#fef3c7;color:var(--warn);}
  .dtag.done{background:#e5e7eb;color:#6b7280;}
  .dc-stage{margin-left:auto;font-size:10.5px;color:var(--muted);}
  /* 고객 행 고정 그리드 */
  .dsort{display:flex;align-items:center;gap:6px;padding:14px 22px 0;flex-wrap:wrap;}
  .dsort-l{font-size:12px;color:var(--muted);font-weight:700;margin-right:4px;}
  .dsbtn{border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:700;font-size:12px;padding:6px 12px;border-radius:7px;}
  .dsbtn:hover{background:#f1f3f6;}
  .dsbtn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
  .dsort-hint{font-size:11.5px;color:var(--muted);margin-left:8px;}
  .dgrid{display:grid;grid-template-columns:1.7fr repeat(5,1fr);gap:5px;padding:14px 22px 4px;align-items:stretch;}
  .dg-head{font-weight:800;font-size:12px;color:#fff;padding:9px 10px;border-radius:8px;display:flex;flex-direction:column;gap:1px;justify-content:center;}
  .dg-head.cust{background:#1c2b46;}
  .dg-head small{font-weight:500;font-size:10px;opacity:.85;}
  /* 행 높이 — 접힌 상태에서 한 행 ≈41px(종전 62px의 2/3). 위아래 여백·줄간격을 조인 것이라
     글자 크기는 거의 그대로다. 📋 펼침(.gcell.exp) 상태는 내용 길이가 높이를 정하므로 해당 없음. */
  /* min-width:0 — 그리드 항목의 기본값 auto 는 min-content(= 안쪽 nowrap 글자의 전체 폭)라,
     고객명이 길면 칸이 줄지 않고 열 자체가 벌어져 보드가 통째로 가로로 늘어난다.
     0 으로 낮춰야 아래 .dc-name/.dc-sub 의 말줄임이 실제로 걸린다. */
  .dg-cust{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer;min-width:0;}
  .dg-cust:hover{box-shadow:0 3px 10px rgba(20,30,50,.1);}
  .dg-cust.done{background:#f3f4f6;opacity:.66;}
  /* 마감 경과·임박 — 왼쪽 띠는 inset 그림자로 넣는다(테두리로 넣으면 글자가 밀려 행이 어긋난다) */
  .dg-cust.late{box-shadow:inset 3px 0 0 var(--red);}
  .dg-cust.soon{box-shadow:inset 3px 0 0 var(--amber);}
  .dg-cust.late:hover{box-shadow:inset 3px 0 0 var(--red),0 3px 10px rgba(20,30,50,.1);}
  .dg-cust.soon:hover{box-shadow:inset 3px 0 0 var(--amber),0 3px 10px rgba(20,30,50,.1);}
  .dg-cust .dc-top{font-weight:800;font-size:12px;line-height:1.25;margin-bottom:0;display:flex;align-items:center;}
  /* min-width:0 이 없으면 플렉스 항목이 min-content(=nowrap 전체 폭) 밑으로 안 줄어
     말줄임이 안 걸리고 긴 고객명이 옆 부서 칸으로 넘친다. */
  .dg-cust .dc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dg-dd{margin-left:auto;padding-left:6px;font-size:9.5px;font-weight:800;color:var(--muted);white-space:nowrap;}
  .dg-dd.over{color:var(--red);}
  .dg-dd.soon{color:var(--warn);}
  /* nowrap+말줄임 — 보조줄이 길어져도 두 줄로 접히지 않게(접히면 행 높이가 도로 늘어난다) */
  .dg-cust .dc-sub{font-size:10.5px;color:var(--muted);line-height:1.25;margin-top:1px;margin-bottom:0;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .dg-cust .dc-act{color:var(--navy);font-weight:700;}   /* ↻ 최근 활동 = 이 화면의 정렬 기준 */
  .gcell{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;}
  .gcell:hover{filter:brightness(.97);}
  .gcell.done{background:#f3f4f6;color:#6b7280;}
  .gcell.turn{background:var(--ok-soft);color:var(--ok);}
  .gcell.wait{background:#fff7ed;color:var(--warn);}
  .gcell.na{background:#fafafa;color:#cbd5e1;cursor:default;border-style:dashed;}
  .gcell .gt{font-family:inherit;font-weight:600;margin-left:3px;}
  /* 체크리스트 펼침(📋 토글) — 셀이 가운데 정렬 한 줄에서 위에서부터 쌓는 목록으로 바뀐다 */
  .gcell.exp{flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;padding:8px;}
  .gck-top{font-weight:700;text-align:center;}
  .gck-box{margin-top:6px;border-top:1px dashed rgba(0,0,0,.12);padding-top:5px;display:flex;flex-direction:column;gap:2px;}
  .gck-stage{font-size:10px;font-weight:800;color:var(--muted);margin-top:3px;letter-spacing:.02em;}
  .gck-line{font-size:10.5px;font-weight:600;color:#9aa3b0;line-height:1.45;word-break:keep-all;}
  .gck-line.on{color:var(--ink);}
  .gck-line b{color:var(--navy);font-weight:800;}
  .gck-none{font-size:10.5px;color:#9aa3b0;font-weight:600;}
  .gck-none span{font-weight:500;}
  .dsbtn.ckbtn{margin-left:10px;}
  .dsbtn.oldbtn{margin-left:6px;}
  .dg-empty{padding:24px;text-align:center;color:var(--muted);}
  /* ── 비고 / 반려 팝업 / 시간 ── */
  /* 카드 셋째 줄 비고란(2026-09-28) — 수수료납부·주의 정보를 항목마다 칸 하나씩 같은 줄에 늘어놓는다.
     종전에는 주의 정보 둘이 한 칸 안에서 | 로만 갈려 있어 둘 다 뜨면 끊어 읽기 어려웠다.
     칸이 넘치면 다음 줄로 흐른다(자르지 않는다 — 카드에서 놓치면 안 되는 값들이다). */
  .card .chips{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 4px;}
  .card .chip{font-size:10.5px;font-weight:700;line-height:1.5;border-radius:5px;
    padding:1px 7px;border:1px solid transparent;white-space:nowrap;}
  .card .chip b{font-weight:800;}
  .card .chip.alert{color:var(--red);background:var(--red-soft);border-color:#f5c2c2;}
  .card .chip.feepay{color:#3730a3;background:#eef2ff;border-color:#e0e7ff;}
  .rmk{margin-bottom:4px;}
  .rmk label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;}
  .rmk-chip{flex-basis:100%;font-size:11px;color:#3730a3;background:#eef2ff;border:1px solid #e0e7ff;border-radius:5px;padding:3px 8px;margin-top:3px;}
  .rj-note{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:11px 13px;font-size:12.5px;color:#7c2d12;line-height:1.65;}
  .rj-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
  .rj-list li{border:1px solid var(--line);border-radius:8px;padding:9px 11px;}
  .rj-list li:hover{background:#fafbfc;}
  .rj-list label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;}
  .rj-list input{width:16px;height:16px;cursor:pointer;}
  .rj-dep{font-weight:800;}
  .rj-stage{background:#eef1f5;color:var(--muted);font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;}
  .rj-meta{margin-left:auto;color:var(--muted);font-size:11px;}
  .atm{font-family:inherit;color:var(--ink);font-weight:600;font-size:11px;}
  /* ── board ── */
  /* 2026-09-24 — 위쪽 여백·칸 간격·머리글을 조였다. 카드가 한 화면에 더 들어오게 하는 게 목적이라
     칸 4개 구조·색은 그대로다. */
  /* 칸 사이 간격 20px(2026-09-28, 종전 10px) — 칸 안 카드 사이가 8px 이라, 묶음 사이는 그보다
     확실히 넓어야 어디까지가 한 단계인지 눈이 먼저 가른다(근접성). 2.5배를 잡았다.
     폭 1500px 기준 칸 하나가 360 에서 353 으로 7px 줄 뿐이라 카드 내용에는 영향이 없다. */
  .board{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:8px 14px 12px;align-items:start;}
  .col{background:#eef1f5;border:1px solid var(--line);border-radius:9px;min-height:120px;}
  .col h2{margin:0;padding:8px 12px;font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:8px;
       border-bottom:1px solid #dde2e9;border-radius:9px 9px 0 0;color:#fff;}
  .col h2 .n{margin-left:auto;background:rgba(255,255,255,.25);border-radius:10px;padding:1px 8px;font-size:11px;}
  .col[data-stage="요청대기"] h2{background:#64748b;}
  .col[data-stage="처리중"]   h2{background:#2563eb;}
  .col[data-stage="처리완료"] h2{background:#0891b2;}
  .col[data-stage="운용개시"] h2{background:#15803d;}
  .col .arrow{padding:3px 11px;font-size:10.5px;color:var(--muted);border-bottom:1px dashed #d6dbe3;background:#fff;}
  .cards{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:40px;}
  /* ── card ── */
  /* 왼쪽 띠 8px — 업무구분 그룹 5색을 색만 보고 갈라내려면 5px 로는 얇다. 색이 파스텔(흰 배경
     대비 2:1 안팎)이라 원색일 때보다 면적이 더 필요하다(BIZ_GROUPS 참고) */
  /* 카드 한 장(2026-09-27): ① 업무구분 ·승인부서 배지·라벨 | 펀드코드·고객명 (좌우 한 줄, 큰 글자)
     ② 상품·운용역·증권사(한 줄) ③ 🕐등록 mm-dd hh:mm | ⚠마감 mm-dd · D-day.
     위가 주인공, 아래는 각주 띠 — 아래는 글자를 한 단계 작고 옅게, 줄 간격·여백을 좁혀 눈이 위에 먼저 가게 한다.
     아래에서 색이 남는 건 ⚠·🔴 D-day 뿐이다.
     업무번호는 머리 줄 오른쪽에서 등록시각 뒤 순번으로 옮겼다 — #0923-07 의 0923 이 등록 09-23 과 겹쳐 보였다.
     종전(2026-09-24) 5줄 구성: ① ●업무구분·번호 ② 펀드코드·고객 ③ 상품줄 ④ 등록|마감 ⑤ 배지. */
  .card{background:#fff;border:1px solid var(--line);border-left:8px solid #ccc;border-radius:7px;padding:10px 12px 8px;line-height:1.5;overflow:hidden;
        cursor:pointer;transition:.12s;box-shadow:0 1px 2px rgba(20,30,50,.04);}
  .card:hover{box-shadow:0 4px 12px rgba(20,30,50,.12);transform:translateY(-1px);}
  .card.hl{border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft);}
  .card.dim{opacity:.42;filter:grayscale(.4);}
  /* 체크리스트 작성중(임시저장) — 왼쪽 상태바를 주황으로 굵게 (색은 cardEl 에서 인라인 지정).
     그룹 색은 파스텔뿐이라 원색 주황이 색으로도 갈리지만, 폭까지 벌려 두 번 표시한다. */
  .card.inprog{border-left-width:12px;}
  /* 머리 줄(2026-09-28) — 왼쪽에 업무구분·펀드코드·고객명을 한 덩어리로(한 문장처럼 이어 읽는다),
     오른쪽 끝에 승인부서 배지. 종전에는 배지가 업무구분 옆이고 고객명이 오른쪽 끝이라, 무슨 업무인지
     읽고 누구 건인지 보려면 줄 가운데를 건너뛰어야 했다. 오른쪽에 모인 배지는 아래 줄의 마감 D-day 와
     세로로 서서, 오른쪽 가장자리만 훑어도 "누가 잡고 있고 언제까지"가 읽힌다.
     폭이 정말 모자라면 배지 덩어리만 다음 줄로 내려가되 오른쪽 정렬은 지킨다. */
  .card .top{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;padding:2px 0 1px;flex-wrap:wrap;}
  .card .top .tl{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap;}
  .card .top .tags{display:flex;gap:3px;flex-wrap:wrap;align-items:center;margin-left:auto;}
  /* 위 구간 — 넓은 행간. 카드 전체가 흰 바탕이고(2026-09-28 아래 음영 제거), 위아래는 가로 구분선
     하나로만 갈린다. 위가 앞에 오는 근거는 이제 바탕색이 아니라 글자 크기(13.5 대 11.5)와 굵기다. */
  .card .chead{padding:3px 0 12px;}
  /* 아래 구간 — 바탕 없이 위 구분선만(2026-09-28). 회색 음영을 깔았더니 카드마다 띠가 생겨
     칸반을 훑을 때 줄무늬처럼 읽혔다. 구분선은 카드 안쪽 여백만큼 음수 마진으로 가장자리까지 늘린다. */
  .card .cbody{background:transparent;margin:0 -12px -8px;padding:0 12px 5px;color:#5f6a7a;}
  /* 업무구분·펀드코드·고객명 — 카드에서 제일 큰 글자(12.5/13 → 14.5 → 13.5px, 2026-09-27). 줄 높이도 같이 키웠다. */
  /* 업무구분 칸(2026-09-28) — 5자 기준 고정 폭의 옅은 회색 칸에 가운데 정렬.
     폭을 고정하는 이유: 업무구분이 2자(증액)에서 6자(기타요청사항)까지라 그냥 두면 뒤따르는
     펀드코드의 시작 위치가 카드마다 어긋난다 — 6자리 고정 값이라 세로로 줄이 서야 눈으로 비교된다.
     칸으로 감싸는 이유: 짧은 업무구분(해지)일 때 남는 자리가 허공이 아니라 칸 안쪽 여백으로 읽힌다.
     테두리는 일부러 뺐다 — 오른쪽 승인부서 배지가 이미 테두리 있는 상자라, 양쪽 다 상자면 어느 쪽이
     상태 표시인지 헷갈린다. 글자 크기가 13.5px 대 10px 로 확연히 달라 배경만으로 충분히 갈린다.
     색은 옅은 남색 한 가지(#e3eaf5) — 글자와 같은 남색 계열이라 칸 하나가 한 덩어리로 읽힌다.
     빨강·주황·초록은 이 화면에서 각각 반려·작성중·승인을 뜻해서 쓸 수 없고, 남색은 상단 제목·로고에
     쓰는 식별 색이라 상태로 오해되지 않는다. 남색 글자 대비 11.7:1 이라 작은 글씨도 또렷하다. */
  .card .btype{font-weight:800;font-size:13.5px;line-height:1.55;color:var(--navy);white-space:nowrap;
       flex:0 0 auto;width:82px;text-align:center;background:#e3eaf5;border-radius:6px;padding:1px 4px;}
  /* 6자(고객운용지시·기타요청사항)만 한 단계 줄여 같은 칸에 넣는다. 5자까지는 원래 크기 그대로다 —
     6자 두 종 때문에 칸을 더 넓히면 2자 종류의 빈자리가 그만큼 늘어난다. */
  .card .btype.long{font-size:11.5px;letter-spacing:-.2px;}
  /* 펀드코드·고객명 — 업무구분 바로 뒤. 구분점(·) 대신 색·굵기로 끊어 읽히게 한다: 코드는 검정,
     고객명은 한 단계 옅게. 왼쪽에 값 셋이 붙는 만큼 서로 섞여 읽히지 않게 하는 것이 중요하다. */
  .card .client{font-weight:800;font-size:13.5px;margin:0;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
       white-space:nowrap;line-height:1.55;color:#4a5566;min-width:0;}
  .card .cname .cut{cursor:help;}   /* 앞 5자만 보이는 긴 고객명 — 전문은 툴팁 */
  /* 상품명 · 운용역 · 증권사 — 반드시 한 줄. 폭이 모자라면 운용역(여러 명이면 길다)만 …로 줄이고
     상품명·증권사는 끝까지 보인다. 전문은 title 툴팁으로. */
  /* 구분선은 이 줄 아래(2026-09-28) — 상품명까지가 그 건을 알아보는 값이고, 그 아래 비고란·등록·마감은
     열어보기 전 참고값이다. 선은 음수 마진으로 카드 좌우 끝까지 늘린다. */
  .card .prodline{font-size:11.5px;color:#5f6a7a;line-height:1.65;
       margin:0 -12px 5px;padding:0 12px 5px;border-bottom:1px solid var(--line);
       display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;min-width:0;}
  /* 상품명 — 아래 구간에서 유일하게 검정(2026-09-27). 나머지(운용역·증권사·등록·마감)는 옅은 회색이라
     상품명 하나만 앞으로 나온다. 굵기는 800에서 700으로 낮춰 머리 줄의 업무구분(800)보다는 가볍게. */
  .card .prodline .prod{color:var(--ink);font-weight:700;font-size:12.5px;flex:0 0 auto;}
  .card .prodline .mgr{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  /* 증권사는 같은 줄 끝에 붙되 한 덩어리로(이름 중간에서 끊기지 않도록) */
  .card .prodline .broker{white-space:nowrap;flex:0 0 auto;}
  .card .sep{color:#c3cad4;font-weight:600;}
  /* ④ 등록시각 | 마감 — 한 줄. 왼쪽 🕐 등록, 오른쪽 마감 D-day */
  .card .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#5f6a7a;font-size:11.5px;
       line-height:1.65;margin:0;padding:0;}
  /* 등록 줄 — 크기·색은 .meta 를 그대로 물려받는다(2026-09-28). 예전 7줄 카드 시절의 규칙이
     .card .regt 로 11px·진한 회색을 덮어써서, 같은 줄의 마감(10.5px)보다 크고 진했다. */
  .card .meta .regt{margin:0;white-space:nowrap;}
  .card .meta .due{white-space:nowrap;}
  .flag.test{background:#ede9fe;color:#6d28d9;}
  .card .fund{font-family:inherit;color:var(--ink);font-weight:800;}
  /* 마감 D-day — 오늘 마감만 빨갛게 튀게 하고(🔴), 아직 남은 건은 회색으로 죽여
     카드를 훑을 때 '오늘 쳐야 할 카드'가 먼저 눈에 들어오게 한다. */
  /* 마감 줄 — 등록 줄과 같은 서식(보통 굵기·옅은 회색, 2026-09-27). 굵기로 강조하지 않고 색만 쓴다:
     오늘 마감 🔴 빨강, 내일 주황, 지난 건은 앞의 ⚠ 만 빨강. */
  .card .dday{font-weight:400;}
  .card .dday.today{color:var(--red);}
  /* 지난 건 — 글자는 회색 그대로, 앞의 ⚠ 만 빨강(눈이 너무 많이 가서 2026-09-24 낮춤). 정렬은 여전히 칸 위쪽. */
  .card .dday.over{color:#5f6a7a;}
  .card .dday.over .warn{font-style:normal;color:var(--red);}
  .card .dday.soft{color:#5f6a7a;}
  .card .dday.soon{color:var(--warn);}   /* 내일 마감 — 카드 테두리가 빨개지는 이유를 숫자 옆에서도 */
  /* 승인부서 배지 — 머리 줄에 들어가므로 업무구분 글자보다 작게(2026-09-24) */
  /* 승인부서 배지 — 업무구분 오른쪽에 2×2 격자(2026-09-27). 1개면 좌상, 2개면 윗줄, 3개면 윗줄 2+아랫줄 1, 4개면 2×2.
     열 폭은 그 열에서 가장 넓은 배지에 맞춰 표처럼 줄이 선다. 두 줄 높이가 업무구분 글자 높이와 비슷하게 배지를 낮췄다. */
  .card .deps{display:grid;grid-template-columns:repeat(2,auto);gap:1px 3px;align-items:center;justify-items:stretch;}
  .card .deps .dep-badge{font-size:10px;line-height:1.2;padding:0 4px;text-align:center;white-space:nowrap;}
  /* 승인부서가 3~4곳이라 배지가 두 줄이 되는 카드(2026-09-28) — 머리 줄의 위아래 여백을 걷어
     두 줄을 한 줄 높이 안에 눌러 담는다. 이렇게 해야 승인부서 수와 상관없이 카드 높이가 같다:
     배지 두 줄 29px + 여백 1·11 = 41px, 한 줄짜리는 업무구분 칸 22.9px + 여백 3·12 = 40.9px.
     여백을 줄이는 쪽을 택한 이유는 배지 글자를 더 줄이면 두 글자 약어가 읽히지 않기 때문이다. */
  .card.deps2 .top{padding:0;}
  .card.deps2 .chead{padding:1px 0 11px;}
  .dep-badge{font-size:9px;font-weight:800;border-radius:4px;padding:0 4px;border:1px solid #dde2e9;color:var(--muted);background:#fbfcfd;letter-spacing:.2px;line-height:1.55;}
  .dep-badge.done{background:var(--ok-soft);color:var(--ok);border-color:#bfe3cb;}
  .dep-badge.draft{background:#fef3c7;color:var(--warn);border-color:#fcd34d;}   /* △ 체크리스트 임시저장(작성중) */
  .card .flags{margin-top:4px;display:flex;gap:4px;flex-wrap:wrap;}
  .card .tags .flag{font-size:9px;padding:0 4px;line-height:1.55;}   /* 배지 줄에 얹히므로 배지와 같은 크기로 */
  .flag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;}
  .flag.rej{background:var(--red-soft);color:var(--red);}
  .flag.due{background:#fef3c7;color:var(--warn);}
  .flag.done{background:var(--ok-soft);color:var(--ok);}
  .empty{color:#9aa3b0;font-size:12px;text-align:center;padding:12px 0;}
  /* ── modal ── */
  .overlay{position:fixed;inset:0;background:rgba(18,26,40,.5);display:none;align-items:flex-start;justify-content:center;
           padding:40px 16px;z-index:50;overflow:auto;}
  .overlay.show{display:flex;}
  .modal{background:#fff;border-radius:12px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
  .modal .mhead{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;}
  .modal .mhead .btype{font-size:17px;font-weight:800;}
  .modal .mhead .x{margin-left:auto;border:none;background:#f1f3f6;border-radius:7px;width:30px;height:30px;font-size:16px;}
  .modal .mbody{padding:18px 20px;}
  .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
  .info-grid .cell{background:#f7f9fb;border:1px solid var(--line);border-radius:8px;padding:9px 11px;}
  .info-grid .cell label{display:block;color:var(--muted);font-size:11px;margin-bottom:3px;}
  .info-grid .cell b{font-size:13.5px;}
  .rej-box{background:var(--red-soft);border:1px solid #f3c4c4;border-radius:8px;padding:10px 12px;margin-bottom:16px;color:#7f1d1d;}
  .rej-box b{display:block;margin-bottom:3px;}
  .stepper{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px;}
  .step{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:flex-start;}
  .step:last-child{border-bottom:none;}
  .step.cur{background:#eff6ff;}
  .step.done{background:#f6fbf7;}
  .step .ic{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
            font-size:12px;font-weight:800;color:#fff;background:#cbd5e1;}
  .step.done .ic{background:var(--ok);}
  .step.cur .ic{background:#2563eb;}
  .step .sttl{font-weight:800;font-size:13px;}
  .step .sub{color:var(--muted);font-size:11.5px;margin-top:3px;display:flex;gap:5px;flex-wrap:wrap;}
  .approver{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:#eef1f5;color:var(--muted);}
  .approver.ok{background:var(--ok-soft);color:var(--ok);}
  .approver.draft{background:#fef3c7;color:var(--warn);}
  .action-box{border:1px solid var(--line);border-radius:10px;padding:14px;background:#fafbfc;}
  .action-box h3{margin:0 0 10px;font-size:13.5px;}
  .checklist{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;}
  .checklist li{display:flex;align-items:center;gap:9px;font-size:13px;}
  .checklist input{width:17px;height:17px;cursor:pointer;}
  .checklist li.checked{color:var(--muted);text-decoration:line-through;}
  .checklist li.note-item{background:#fffbeb;border:1px solid #fde68a;border-radius:7px;padding:6px 8px;}
  .checklist li.note-item span{font-weight:700;color:#92400e;}
  /* 값 선택형 체크리스트(O/X 세그먼트 · 송부방법 select) */
  .checklist .cklabel{flex:1;}
  .checklist li.answered .cklabel{color:var(--muted);}
  .oxseg{display:inline-flex;gap:4px;flex-shrink:0;}
  .oxbtn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 14px;font-weight:700;font-size:12.5px;color:var(--muted);cursor:pointer;}
  .oxbtn:hover{background:#f1f3f6;}
  .oxbtn.sel{background:var(--ok);color:#fff;border-color:var(--ok);}
  .oxbtn.xk.sel{background:var(--red);border-color:var(--red);}
  .cksel{font-family:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:#fff;flex-shrink:0;cursor:pointer;}
  .note-box{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:10px 12px;margin-bottom:16px;color:#78350f;font-size:12.5px;line-height:1.5;}
  .note-pin{font-size:11px;}
  .act-row{display:flex;gap:9px;}
  .act-row button{flex:1;padding:11px;border-radius:8px;font-weight:700;font-size:13.5px;border:none;}
  .btn-approve{background:var(--ok);color:#fff;}
  .btn-approve:disabled{background:#cfe3d6;color:#fff;cursor:not-allowed;}
  .btn-draft{background:#fff;color:var(--warn);border:1px solid #fcd34d!important;}
  .btn-draft:disabled{background:#fff;color:#cbd5e1;border-color:var(--line)!important;cursor:not-allowed;}
  .btn-reject{background:#fff;color:var(--red);border:1px solid var(--red)!important;}
  .btn-del{background:#fff;color:var(--muted);border:1px solid var(--line)!important;flex:0 0 auto!important;padding:11px 16px!important;}
  .wait-note{color:var(--muted);font-size:12.5px;padding:6px 0;}
  .wait-note.draft-note{color:var(--warn);background:#fffbeb;border:1px solid #fde68a;border-radius:7px;padding:7px 9px;}
  /* 승인 전에 업무 정보 항목부터 채워야 할 때 (연장 매매필요여부 — 처리중 OP) */
  .need-field{color:var(--red);background:var(--red-soft);border:1px solid #fca5a5;border-radius:7px;
              padding:8px 10px;margin-bottom:10px;font-size:12.5px;line-height:1.5;font-weight:600;}
  /* 운용개시 — 이 건 상품의 담당 운용역이 아닌 사람이 열었을 때 (경고만, 승인은 가능) */
  .not-mgr{color:var(--red);background:var(--red-soft);border:1px solid #fca5a5;border-radius:7px;
           padding:9px 11px;margin-bottom:10px;font-size:13.5px;font-weight:700;line-height:1.5;}
  .not-mgr .sub{color:var(--ink);font-size:12.5px;font-weight:500;margin-top:3px;}
  .done-note{color:var(--ok);font-weight:700;}
  /* ── side panel (notifications) ── */
  .side{position:fixed;top:0;right:0;width:360px;max-width:88vw;height:100%;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.18);
        transform:translateX(102%);transition:.22s;z-index:60;display:flex;flex-direction:column;}
  .side.show{transform:translateX(0);}
  .side .shead{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;}
  .side .shead h2{font-size:15px;margin:0;}
  .side .shead .x{margin-left:auto;border:none;background:#f1f3f6;border-radius:7px;width:30px;height:30px;font-size:16px;}
  .side .nlist{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:9px;}
  .noti{border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer;background:#fff;}
  .noti.unread{background:#eff6ff;border-color:#cfe0fb;}
  .noti .nt{font-weight:700;font-size:12px;margin-bottom:3px;display:flex;gap:6px;align-items:center;}
  .noti .nmsg{font-size:12.5px;color:var(--ink);line-height:1.45;}
  .noti .ntime{color:var(--muted);font-size:11px;margin-top:4px;}
  .side .sfoot{padding:10px 14px;border-top:1px solid var(--line);}
  /* ── toast ── */
  .toasts{position:fixed;bottom:22px;right:22px;z-index:80;display:flex;flex-direction:column;gap:9px;}
  .toast{background:var(--navy);color:#fff;border-radius:9px;padding:12px 15px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);
         max-width:340px;animation:slidein .25s;border-left:4px solid var(--amber);}
  .toast.rej{border-left-color:var(--red);}
  .toast.warn{background:#7c2d12;border-left-color:var(--amber);}   /* 경고 — 실패·거부 안내 */
  @keyframes slidein{from{transform:translateX(40px);opacity:0;}to{transform:none;opacity:1;}}
  /* margin-top:auto — 위 내용이 짧으면 범례가 화면 맨 아래로 내려가고, 카드가 많으면 그대로 뒤에
     따라온다(스크롤해도 붙박이로 떠 있지는 않는다). */
  .legend{margin-top:auto;padding:10px 14px 16px;color:var(--muted);font-size:11.5px;line-height:1.7;}
  .legend b{color:var(--ink);}
  /* 파스텔 그룹 색을 글자색으로 쓰면 안 읽힌다 — 색은 네모가 지고 글자는 --ink 로 둔다 */
  .legend .lgsw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px;}
  textarea{width:100%;font-family:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:9px;resize:vertical;}
  .req-row{display:flex;gap:10px;margin-bottom:12px;}
  .req-row .f{flex:1;}
  .req-row label, .req-full label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;}
  .req-row select,.req-row input,.req-full input{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:13px;}
  .req-full{margin-bottom:12px;}
  /* 로그인 */
  .login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#1c2b46,#0f1620);display:none;align-items:center;justify-content:center;z-index:100;}
  .login-overlay.show{display:flex;}
  .login-card{background:#fff;border-radius:16px;padding:34px 30px;width:360px;max-width:92vw;box-shadow:0 30px 80px rgba(0,0,0,.4);text-align:center;}
  .login-logo{font-family:var(--font-apple-sd);font-size:28px;font-weight:700;color:var(--navy);letter-spacing:.5px;}
  .login-logo sup{font-size:13px;letter-spacing:2px;}
  .login-sub{color:var(--muted);font-size:13px;margin:4px 0 22px;}
  .login-card input{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;font-size:14px;margin-bottom:10px;font-family:inherit;}
  .login-btn{width:100%;padding:12px;background:var(--navy);color:#fff;border:none;border-radius:9px;font-weight:700;font-size:14px;margin-top:4px;}
  .login-btn:hover{background:var(--navy2);}
  .login-err{color:var(--red);font-size:12.5px;margin-top:10px;min-height:16px;font-weight:600;}
  /* 역할/마스터/날짜 */
  .role .who{font-weight:800;font-size:12.5px;white-space:nowrap;}
  .mstag{background:#fde68a;color:#92400e;font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;margin-left:4px;}
  .datepick{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);}
  .datepick .cal-ico{cursor:pointer;font-size:14px;padding:2px 3px;border-radius:5px;}   /* 누르면 오늘로 */
  .datepick .cal-ico:hover{background:#f1f3f6;}
  .datepick input{border:1px solid var(--line);border-radius:6px;padding:6px 7px;font-family:inherit;font-size:12.5px;}
  .deskbtn.on{background:var(--ok-soft);color:var(--ok);border-color:#bfe3cb!important;font-weight:700;}
  /* 전체 조망 상단 요약 — 평소 한 줄(.board-strip)만 보이고, ▸ 자세히를 누르면 종전의 날짜 안내·
     마감 박스·색 범례(.board-info)가 펼쳐진다(2026-09-24). 칸반이 화면 위쪽에 바로 오게 하려는 것. */
  .board-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px 0;font-size:12px;color:var(--muted);}
  .board-strip b{color:var(--ink);}
  .board-strip .sc{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:2px 9px;font-weight:700;font-size:11px;
       background:#eef1f5;color:#43506a;}
  .board-strip .sc.today{background:#e3ebf9;color:var(--navy);}
  .board-strip .sc.over{background:var(--red-soft);color:var(--red);}
  .board-strip .sc.next{background:#fff;border:1px solid var(--line);color:#5a6a86;}
  .board-strip .sc.zero{opacity:.6;font-weight:600;}
  .board-strip .sep{color:#c3cad4;}
  .board-strip .fold-btn{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px 9px;
       font-size:11px;font-weight:700;color:var(--navy);cursor:pointer;}
  .board-strip .fold-btn:hover{background:#f1f3f6;}
  .board-info{display:none;}
  .board-info.open{display:block;}
  .date-banner{padding:8px 14px 0;color:var(--muted);font-size:12px;}
  .date-banner b{color:var(--ink);}
  .date-banner .td{background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:5px;}
  /* 마감 업무 요약 — 당일 박스와 이후 박스를 좌우로 나란히 놓고 각각 테두리로 가둬서
     "오늘 쳐야 할 일"과 "예정된 일"이 한눈에 섞이지 않게 한다.
     박스는 늘리지 않고 내용 너비만큼만 잡는다(flex-grow 0). 폭이 모자라면 줄어들고, 그래도 안 되면 접힌다. */
  .biz-bars{display:flex;align-items:stretch;gap:10px;padding:8px 14px 2px;flex-wrap:wrap;}
  .biz-bar{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
       padding:10px 13px;border:1px solid var(--line);border-left-width:4px;border-radius:10px;}
  .biz-bar.bb-today{background:#e3ebf9;border-color:#b7c6e2;border-left-color:var(--navy);}
  .biz-bar.bb-next{background:#fff;border-left-color:#b6bfcd;}
  .biz-bar .bb-l{font-weight:800;font-size:12.5px;color:var(--navy);margin-right:2px;}
  /* 이후 박스는 배경이 흰색이라 글자·칩을 한 톤 죽이되 대비 4.5:1 은 넘기게 잡는다 */
  .biz-bar.bb-next .bb-l{color:#5a6a86;}
  .biz-bar.bb-next .bb-tot{background:#5f6d82;}
  .biz-bar.bb-next .bchip{border-color:#ccd4e0;}
  .biz-bar.bb-today .bb-none{color:#4d596d;}      /* 옅은 남색 배경 위 — --muted 는 대비가 모자란다 */
  .biz-bar.bb-today .bchip{border-color:#b7c6e2;} /* 흰 칩이 옅은 남색 박스에 묻히지 않게 테두리를 박스색으로 */
  .biz-bar .bb-soon{color:var(--muted);font-size:11.5px;font-weight:600;}
  .bchip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:600;}
  .bchip i{width:9px;height:9px;border-radius:50%;}
  .bchip b{font-weight:800;}
  .biz-bar .bb-none{color:var(--muted);font-size:12px;}
  /* 업무 한 건 앞의 ● 점 — 색과 지름은 bizDot() 이 인라인으로 준다(전체 조망 카드 점과 같은
     그룹 색). 부서별 처리·요약 대시보드·상세 팝업이 같이 쓴다. */
  .bizdot{display:inline-block;border-radius:50%;flex:none;}
  /* 카드 좌측 띠 색 범례 — 칸반 바로 위 한 줄. 스와치는 카드 띠와 같은 세로 막대 모양이라
     "이 색이 그 띠"라는 게 형태로 바로 붙는다(동그라미로 하면 카드 ● 점과 헷갈린다). */
  .bizgrp-legend{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 14px 0;}
  .bizgrp-legend .bg-l{font-weight:800;font-size:12px;color:var(--navy);}
  .bgchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#43506a;}
  .bgchip i{width:5px;height:15px;border-radius:2px;flex:none;}
  .bgchip.bg-prog{color:var(--warn);}   /* 그룹 색이 아니라 '작성중' 상태 — 색만 빌려 쓴다는 걸 글자로도 */
  .biz-bar .bb-tot{background:var(--navy);color:#fff;border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700;}
  .biz-bar .bb-over{background:var(--red-soft);color:var(--red);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700;}
  /* 커스텀 승인라인 */
  .wf-title{font-weight:800;font-size:12.5px;margin-bottom:8px;}
  .wf-hint{font-weight:400;color:var(--muted);font-size:11px;}
  .wf-grid{display:grid;grid-template-columns:1.2fr repeat(5,1fr);gap:5px;margin-bottom:14px;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fafbfc;}
  .wf-h{font-weight:800;font-size:11.5px;text-align:center;color:var(--navy);padding:3px 0;}
  .wf-h:first-child{text-align:left;font-size:11px;color:var(--muted);}
  .wf-s{font-size:11.5px;font-weight:700;display:flex;align-items:center;}
  .wf-c{display:flex;align-items:center;justify-content:center;}
  .wf-c input{width:16px;height:16px;cursor:pointer;}
  /* 그 단계에 설 수 없는 부서(운용개시의 FM 외) — 잠가 두고 잠긴 것으로 보이게 한다 */
  .wf-c input:disabled{cursor:not-allowed;opacity:.28;}
  /* 완료 업무 */
  .done-wrap{padding:16px 22px 40px;}
  .done-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .done-head h3{margin:0;font-size:16px;}
  .done-head .cntn{font-size:13px;color:var(--muted);font-weight:600;margin-left:4px;}
  .done-tblwrap{overflow:auto;border:1px solid var(--line);border-radius:10px;}
  .done-tbl{border-collapse:collapse;width:100%;font-size:12.5px;background:#fff;}
  .done-tbl th{background:#f1f3f6;font-weight:700;padding:9px 11px;text-align:left;white-space:nowrap;}
  .done-tbl td{border-top:1px solid var(--line);padding:9px 11px;vertical-align:top;}
  .done-tbl tr:hover td{background:#f7f9fb;cursor:pointer;}
  .done-tbl .appr{color:var(--muted);font-size:11.5px;}
  /* 설명서 */
  .guide{padding:20px 26px 44px;max-width:1080px;line-height:1.6;}
  .guide h2{font-size:18px;margin:28px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--navy);color:var(--navy);}
  .guide h2:first-child{margin-top:4px;}
  .guide h3{font-size:13.5px;margin:14px 0 6px;color:var(--navy2);}
  .guide p{font-size:13px;color:#2b3340;margin:6px 0;}
  .guide ul{font-size:13px;margin:6px 0;padding-left:20px;}
  .guide li{margin:4px 0;}
  .guide table{border-collapse:collapse;width:100%;margin:10px 0;font-size:12.5px;}
  .guide th,.guide td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top;}
  .guide th{background:#f1f3f6;font-weight:700;}
  .guide td:first-child{white-space:nowrap;}
  .guide .flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0;}
  .guide .flow .st{background:#eef1f5;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-weight:700;font-size:12.5px;}
  .guide .flow .ar{color:var(--muted);font-weight:800;}
  .guide .leg{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px;margin:0 2px;}
  .guide code{background:#f1f3f6;padding:1px 6px;border-radius:4px;font-size:12px;font-family:inherit;}
  /* ── 업무별 입력폼(캡쳐1) / 읽기전용 요청정보 그리드 ── */
  .modal.wide{max-width:880px;}
  .dsform,.fieldsview{display:grid;grid-template-columns:130px 1fr 130px 1fr;border:1px solid #c9d0dc;
       border-radius:8px;overflow:hidden;margin-bottom:14px;}
  .dsform .lab,.fieldsview .lab{background:#5b6b8c;color:#fff;font-size:12px;font-weight:700;
       padding:9px 11px;display:flex;align-items:center;border-bottom:1px solid #c9d0dc;border-right:1px solid #c9d0dc;}
  .dsform .lab .rq{color:#ffd7d7;margin-left:3px;}
  .dsform .val,.fieldsview .val{background:#fff;padding:6px 9px;display:flex;align-items:center;
       border-bottom:1px solid #eaedf2;border-right:1px solid #eaedf2;min-height:38px;font-size:13px;}
  .fieldsview .val{color:var(--ink);font-weight:600;word-break:break-all;}
  /* 강조값(연장 매매필요여부='필요') — 읽기 표시·콤보 모두 빨간 굵은 글씨 */
  .fieldsview .val.warn{color:var(--red);font-weight:800;}
  .fldsel{font-family:inherit;font-size:12.5px;border:1px solid #94a3b8;border-radius:5px;
          padding:3px 6px;background:#fff;cursor:pointer;}
  input.fldsel{cursor:auto;}   /* 날짜·숫자처럼 고르는 게 아니라 치는 항목(연장의 매매금지해지일) */
  .fldsel.warn,.warnsel.warn{color:var(--red);font-weight:800;}
  .fldsel.warn{border-color:var(--red);}
  .dsform .val select.warnsel.warn{border-color:var(--red);}   /* 등록폼 셀렉트 규칙보다 뒤·같은 무게 */
  .fld-edit-tag{margin-left:7px;font-size:10.5px;font-weight:700;color:var(--navy);
                background:#eef2ff;border:1px solid #c7d2fe;border-radius:5px;padding:1px 6px;white-space:nowrap;}
  .dsform .val input,.dsform .val select{width:100%;border:1px solid var(--line);border-radius:6px;
       padding:7px 8px;font-family:inherit;font-size:12.5px;background:#fff;}
  /* ── 자동입력 표시 ──
     펀드코드 하나로 채워진 칸은 회색 바탕 + 오른쪽 '자동입력' 꼬리표를 달아, 사람이 친 값과
     한눈에 구분되게 한다. 읽기전용 계산칸(수수료·운용역)과 고쳐도 되는 칸(증권사·지점…)
     모두 같은 표시를 쓰되, 손을 대는 순간 표시가 사라진다(=이제 내가 넣은 값). */
  .dsform .val{position:relative;}
  .dsform .val input.autofill,.dsform .val select.autofill{background:#f1f3f6;color:var(--navy);font-weight:700;
       padding-right:58px;}
  .dsform .val .autotag{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;
       font-size:10px;font-weight:800;color:#64748b;background:#e2e8f0;border:1px solid #cbd5e1;
       border-radius:4px;padding:1px 5px;white-space:nowrap;}
  /* 누를 수 있는 꼬리표 — 요청사항처럼 '고를 값'이 있는 칸의 손잡이다(누르면 목록이 펼쳐진다).
     같은 모양을 그대로 쓰되 눌리는 칸이라는 것만 손끝(cursor)과 hover 로 알린다. */
  .dsform .val button.autotag{pointer-events:auto;cursor:pointer;font-family:inherit;line-height:1.4;}
  .dsform .val button.autotag:hover{background:#cbd5e1;border-color:#94a3b8;color:#334155;}
  .dsform .val button.autotag:active{background:#b8c4d3;}
  /* 고를 값 목록 — 계약 목록(fundpick)과 같은 모양. 항목이 짧아 한 줄짜리 버튼만 있다. */
  .optpick button{font-weight:700;}
  /* ── 펀드코드 4자리 검색 결과 ── 여러 계약이 걸리면 아래로 펼쳐 고르게 한다 */
  /* 목록이 펼쳐진 동안에는 그리드의 모서리 자르기를 푼다(안 그러면 목록 아래쪽이 잘린다) */
  .dsform.picking{overflow:visible;}
  .fundpick{position:absolute;left:6px;right:6px;top:calc(100% - 4px);z-index:40;background:#fff;
       border:1px solid var(--navy);border-radius:8px;box-shadow:0 10px 24px rgba(20,32,60,.18);
       max-height:260px;overflow-y:auto;}
  .fundpick .fp-h{font-size:11px;font-weight:800;color:#fff;background:var(--navy);padding:5px 9px;
       position:sticky;top:0;}
  .fundpick button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
       font-family:inherit;font-size:12px;padding:7px 9px;border-bottom:1px solid #eef1f5;color:var(--ink);}
  /* ↑↓로 옮겨 다니는 줄 — 어디에 있는지 옅은 음영과 왼쪽 띠로 보인다(마우스 hover도 같은 표시) */
  .fundpick button:hover{background:#f2f6fd;outline:none;}
  .fundpick button:focus{background:#e8f0fe;outline:none;box-shadow:inset 3px 0 0 var(--navy);}
  .fundpick .fp-c{font-weight:800;color:var(--navy);margin-right:6px;}
  .fundpick .fp-m{color:var(--muted);font-size:11px;}
  .fields-title{font-size:13px;font-weight:800;color:var(--navy);margin:4px 0 7px;display:flex;align-items:center;gap:6px;}
  .attbox{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:16px;display:flex;flex-direction:column;gap:6px;}
  .att-row{font-size:12.5px;} .att-row a{color:var(--navy);font-weight:700;text-decoration:none;} .att-row a:hover{text-decoration:underline;}
  .att-meta{color:var(--muted);font-size:11.5px;}
  .att-add{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:8px;border-top:1px dashed var(--line);}
  .att-add input[type=file]{font-size:12px;flex:1;min-width:0;}
  .btn-attach{background:#fff;border:1px solid var(--navy);color:var(--navy);border-radius:7px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .btn-attach:hover{background:var(--navy);color:#fff;}
  .att-pv{background:#fff;border:1px solid var(--line);color:var(--navy);border-radius:6px;padding:1px 7px;
       font-size:11px;font-weight:700;cursor:pointer;margin-left:2px;}
  .att-pv:hover{background:#eef1f5;}
  /* 새 버전 배포 알림 — 하루 종일 열어 둔 화면이 옛 코드로 도는 걸 알려 준다.
     모달(50)·미리보기(90)·비밀번호(120)보다 위에 둬야 어떤 상황에서도 보인다. */
  .newver-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#1c2b46;color:#fff;
       font-size:13px;padding:12px 18px;display:flex;align-items:center;gap:12px;justify-content:center;
       box-shadow:0 -6px 20px rgba(0,0,0,.25);}
  .newver-bar button{background:var(--amber);border:none;border-radius:7px;padding:7px 14px;
       font-family:inherit;font-size:12.5px;font-weight:800;color:#3b2a00;cursor:pointer;}
  .newver-bar button:hover{filter:brightness(1.08);}
  /* 툴바의 잠금 버튼 — 잠겨 있을 때는 눈에 띄어야 한다(여는 입구가 여기뿐이다) */
  .btn-ghost.seclocked{border-color:var(--amber)!important;color:var(--warn);font-weight:700;}
  .btn-ghost.seclocked:hover{background:#fdf7e7;}
  /* 잠긴 첨부 — 파일명까지 고객을 드러내므로 목록을 통째로 감추고 건수와 버튼만 남긴다 */
  .att-locked{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);
       background:#fbfaf6;border:1px dashed var(--line);border-radius:8px;padding:9px 12px;}
  .att-locked b{color:var(--ink);}
  /* ── 민감정보 가리기 (고객명·첨부) ──────────────────────────────
     가려진 값은 '눌러서 여는 자리'로 보여야 한다 — 점선 밑줄 + 손가락 커서 + 올리면 자물쇠. */
  .seclock{cursor:pointer;border-bottom:1px dashed #b8c0cc;color:inherit;padding:0 1px;border-radius:3px;
       letter-spacing:.02em;}
  .seclock:hover,.seclock:focus{background:#fdf3d7;border-bottom-color:var(--amber);outline:none;}
  .seclock:hover::after,.seclock:focus::after{content:"🔒";font-size:.85em;margin-left:3px;}
  .seclock-btn{border-color:var(--amber)!important;color:var(--warn)!important;background:#fdf7e7!important;}
  .seclock-btn:hover{background:#fdf0cd!important;}
  /* 비밀번호 팝업 — 미리보기(z-index 90)보다도 위. 첨부를 보려다 뜨는 창이라 가려지면 안 된다 */
  .sec-ov{position:fixed;inset:0;background:rgba(12,18,30,.62);display:none;align-items:center;justify-content:center;
       padding:26px 18px;z-index:120;}
  .sec-ov.show{display:flex;}
  .sec-box{background:#fff;border-radius:12px;width:100%;max-width:330px;padding:22px 22px 18px;
       box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center;}
  .sec-head{font-size:15px;font-weight:800;color:var(--navy);}
  .sec-sub{color:var(--muted);font-size:12px;line-height:1.6;margin:8px 0 14px;}
  .sec-box input{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;font-size:20px;
       text-align:center;letter-spacing:10px;font-family:inherit;}
  .sec-err{color:var(--red);font-size:12px;font-weight:700;min-height:16px;margin:8px 0 4px;}
  .sec-act{display:flex;gap:8px;justify-content:center;}
  /* 첨부 미리보기 — 상세 모달(z-index 50) 위에 뜬다 */
  .pv-ov{position:fixed;inset:0;background:rgba(12,18,30,.72);display:none;align-items:center;justify-content:center;
       padding:26px 18px;z-index:90;}
  .pv-ov.show{display:flex;}
  .pv-box{background:#fff;border-radius:12px;width:100%;max-width:1000px;max-height:100%;
       display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
  .pv-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);}
  .pv-head b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pv-head .pv-dl{margin-left:auto;font-size:12px;font-weight:700;color:var(--navy);text-decoration:none;
       border:1px solid var(--line);border-radius:6px;padding:4px 10px;white-space:nowrap;}
  .pv-head .pv-dl:hover{background:#f1f3f6;}
  .pv-head .x{border:none;background:#f1f3f6;border-radius:7px;width:30px;height:30px;font-size:15px;flex:none;}
  .pv-body{flex:1;min-height:0;background:#f4f6f9;display:flex;align-items:center;justify-content:center;overflow:auto;}
  .pv-body img{max-width:100%;max-height:78vh;display:block;}
  .pv-body iframe{width:100%;height:78vh;border:none;background:#fff;}
  /* 엑셀·CSV 미리보기 — 시트 탭 + 표(가로세로 스크롤, 머리글·행번호 고정) */
  .pv-box.sheet{max-width:1400px;}
  .pv-body.sheet{background:#fff;align-items:stretch;justify-content:flex-start;overflow:hidden;}
  .pv-sheet{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
  .pv-tabs{display:flex;gap:4px;padding:8px 10px 0;background:#f4f6f9;border-bottom:1px solid var(--line);
       overflow-x:auto;flex:none;}
  .pv-tab{border:1px solid var(--line);border-bottom:none;background:#fff;color:var(--muted);
       border-radius:7px 7px 0 0;padding:5px 12px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .pv-tab:hover{background:#eef1f5;}
  .pv-tab.on{background:var(--navy);border-color:var(--navy);color:#fff;}
  .pv-tab .hidtag{font-size:9.5px;font-weight:700;opacity:.75;}
  .pv-grid{flex:1;min-height:0;overflow:auto;background:#fff;}
  .pv-tbl{border-collapse:separate;border-spacing:0;font-size:11.5px;font-variant-numeric:tabular-nums;}
  .pv-tbl th,.pv-tbl td{border-right:1px solid #e6eaf1;border-bottom:1px solid #e6eaf1;
       padding:3px 8px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pv-tbl thead th{position:sticky;top:0;z-index:2;background:#eef1f5;color:var(--muted);
       font-weight:700;font-size:10.5px;text-align:center;}
  .pv-tbl .pv-gut{position:sticky;left:0;z-index:1;background:#f4f6f9;color:var(--muted);
       font-weight:600;font-size:10.5px;text-align:right;min-width:34px;}
  .pv-tbl thead .pv-gut{z-index:3;}
  .pv-tbl td.num{text-align:right;}
  .pv-tbl tbody tr:hover td{background:#f7f9fc;}
  .pv-foot{display:flex;align-items:center;gap:10px;flex:none;padding:8px 12px;border-top:1px solid var(--line);
       background:#fafbfc;font-size:11.5px;color:var(--muted);}
  .pv-foot .warn{color:var(--red);font-weight:700;}
  .pv-more{border:1px solid var(--navy);background:#fff;color:var(--navy);border-radius:6px;
       padding:3px 10px;font-size:11.5px;font-weight:700;cursor:pointer;}
  .pv-more:hover{background:var(--navy);color:#fff;}
  .pv-more:disabled{opacity:.55;cursor:default;}
  .pv-foot-dl{margin-left:auto;color:var(--navy);font-weight:700;text-decoration:none;}
  .pv-foot-dl:hover{text-decoration:underline;}
  .pv-msg{margin:auto;padding:30px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.7;}
  .pv-msg.err{color:var(--red);}
  .pv-msg a{color:var(--navy);font-weight:700;}
  /* 💬 수정요청 탭 */
  .rq-new{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px;box-shadow:0 1px 4px rgba(15,30,60,.05);}
  .rq-new-title{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:8px;}
  /* 입력칸은 rows=4 로 시작해 내용이 넘치면 스스로 늘어난다(rqAutoGrow) — 화면 절반이 상한 */
  .rq-new textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;resize:vertical;font-family:inherit;min-height:92px;line-height:1.55;overflow-y:auto;}
  .rq-new.drag{border-color:var(--navy);background:#f5f8ff;}   /* 캡쳐 파일 끌어다 놓는 중 */
  .rq-new-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
  .rq-new-row select{border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12.5px;}
  /* 접수 → 피드백 요망 → 완료. 가운데 칸이 좁아지면 확인 버튼이 줄바꿈되므로 셋을 같은 폭으로 준다. */
  .rq-board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;}
  @media(max-width:1200px){ .rq-board{grid-template-columns:1fr 1fr;} }
  @media(max-width:900px){ .rq-board{grid-template-columns:1fr;} }
  .rq-col{background:#f4f6fa;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px;min-height:120px;}
  .rq-col.ask{background:#f7f3ff;border-color:#ddd0f7;}
  .rq-col-h{font-size:13.5px;font-weight:800;color:var(--navy);padding:2px 4px;}
  .rq-col.ask .rq-col-h{color:#6d28d9;}
  .rq-cnt{color:var(--muted);font-weight:700;font-size:12px;}
  .rq-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 1px 3px rgba(15,30,60,.05);}
  .rq-card.done{opacity:.75;}
  .rq-card.feedback{border-color:#c4b5fd;}
  /* ⏰ 방치 — 확인 요청을 넘긴 지 오래된 건. 3일=주황, 7일=빨강 */
  .rq-card.stale-warn{border-color:#fcd34d;box-shadow:0 1px 3px rgba(180,120,0,.12);}
  .rq-card.stale-bad{border-color:var(--red);box-shadow:0 1px 3px rgba(200,0,0,.15);}
  .rq-stale{font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;white-space:nowrap;}
  .rq-stale.warn{background:#fef3c7;color:#92400e;}
  .rq-stale.bad{background:#fee2e2;color:#b91c1c;}
  .rq-col-warn{margin-top:5px;background:#fff;border:1px solid #fcd34d;border-radius:7px;
       padding:5px 8px;font-size:11.5px;font-weight:700;color:#92400e;}
  /* 🙋 내가 올린 것만 보기 */
  .rq-filter{display:flex;align-items:center;gap:9px;margin:12px 0 2px;flex-wrap:wrap;}
  .rq-filter .btn-attach.on{background:var(--navy);color:#fff;}
  .rq-filter-note{font-size:11.5px;color:var(--muted);}
  /* 🙋 작성자 확인 상자 — 완료 도장은 여기서만 찍힌다.
     카드마다 붙는 상자라 색과 말을 최대한 뺐다. 눈에 띄어야 하는 건 상자가 아니라
     카드가 '피드백 요망 칸에 있다'는 사실이고, 그건 칸과 테두리가 이미 말해 준다. */
  .rq-ask{margin-top:9px;background:#f7f3ff;border:1px solid #ddd0f7;border-radius:9px;padding:8px 10px;}
  .rq-ask.wait{background:#f8f9fc;border-color:var(--line);color:var(--muted);font-size:12px;}
  .rq-ask-t{font-size:12.5px;font-weight:700;color:#5b21b6;line-height:1.5;}
  .rq-ask-row{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap;}
  /* 확인 버튼 — 색 없이 테두리만. 둘 다 중립이라 무엇이 '옳은 답'인지 화면이 몰아가지 않는다 */
  .rq-btn{background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 14px;
       font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;}
  .rq-btn:hover{border-color:var(--navy);background:#f7f9fc;}
  /* 팝업 바닥줄(.act-row button)이 border:none 을 걸어 두어 테두리가 지워진다 — 되돌린다 */
  .act-row .rq-btn{border:1px solid var(--line)!important;background:#fff;color:var(--ink);}
  /* 로그인 직후 확인 독촉 팝업 */
  .fb-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff;}
  .fb-item.stale-warn{border-color:#fcd34d;}
  .fb-item.stale-bad{border-color:var(--red);}
  .fb-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
  .fb-body{font-size:13.5px;line-height:1.55;color:var(--ink);word-break:break-word;}
  .fb-note{margin-top:7px;background:#f7f3ff;border-radius:8px;padding:6px 9px;font-size:12.5px;line-height:1.5;color:#4c1d95;}
  .fb-row{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;}
  .fb-row .rq-btn{padding:7px 16px;}
  .fb-done{padding:18px 4px;font-size:13.5px;font-weight:700;color:var(--navy);text-align:center;}
  /* 내 확인 차례인 수정요청이 있을 때 — 활성 탭의 흰 배경·색띠는 건드리지 않고 테두리만 굵힌다 */
  .tab.ask{border-color:#a78bfa;font-weight:800;}
  .tab.ask:not(.active){box-shadow:0 3px 0 #7c3aed inset;}
  /* 오래 방치된 확인 건이 있으면 빨강으로. 팝업을 닫아도 이건 계속 남는다 */
  .tab.stale{border-color:var(--red);color:var(--red);}
  .tab.stale:not(.active){box-shadow:0 3px 0 var(--red) inset;}
  .rq-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
  .rq-chip{color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px;}
  .rq-badge{font-size:11.5px;font-weight:700;background:#eef2f8;border-radius:6px;padding:2px 7px;}
  .rq-screen{font-size:11px;color:var(--muted);background:#f1f3f6;border-radius:6px;padding:2px 7px;}
  .rq-id{font-size:11px;color:var(--muted);font-weight:700;}
  .rq-status{border:1px solid var(--line);border-radius:7px;padding:3px 6px;font-size:12px;}
  .rq-del{background:none;border:none;color:var(--red);font-size:11.5px;font-weight:700;cursor:pointer;padding:2px 4px;}
  /* ✏️ 올린 뒤 내용 고쳐 쓰기 — 삭제 옆에 같은 무게로 두되 색은 중립(남색)으로 */
  .rq-edit{background:none;border:none;color:var(--navy);font-size:11.5px;font-weight:700;cursor:pointer;padding:2px 4px;}
  .rq-edit:hover{text-decoration:underline;}
  .rq-edit-box{margin:2px 0 4px;}
  .rq-edit-box textarea{width:100%;box-sizing:border-box;border:1px solid var(--navy);border-radius:8px;padding:7px 9px;
       font-size:13px;font-family:inherit;line-height:1.55;resize:vertical;min-height:64px;overflow-y:auto;}
  /* 칸이 좁아(3열) 셀렉트와 버튼을 한 줄에 몰면 줄바꿈이 지저분해진다 — 두 줄로 나눈다 */
  .rq-edit-row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
  .rq-edit-row.end{justify-content:flex-end;}
  .rq-edit-row select{flex:1 1 40%;min-width:0;border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:12px;}
  .rq-edit-row .rq-btn{padding:5px 13px;}
  .rq-content{font-size:13.5px;line-height:1.55;color:var(--ink);white-space:normal;word-break:break-word;}
  .rq-meta{font-size:11.5px;color:var(--muted);margin-top:6px;}
  .rq-time{color:var(--muted);font-weight:400;font-size:11px;}
  .rq-cmts{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px;display:flex;flex-direction:column;gap:6px;}
  .rq-cmt{font-size:12.5px;background:#f8f9fc;border-radius:8px;padding:6px 9px;line-height:1.5;}
  .rq-cmt b{font-size:12px;}
  .rq-cmt-add{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
  .rq-cmt-add input[type=text],.rq-cmt-add input:not([type]){flex:1;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:12.5px;min-width:0;}
  /* 📸 캡쳐 첨부 — 대기목록(rq-pend, 올리기 전)과 등록된 그림(rq-shot, 클릭하면 미리보기) */
  .rq-shotbox{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;width:100%;}
  .rq-pend{position:relative;display:inline-block;}
  .rq-pend img{width:88px;height:62px;object-fit:cover;display:block;border:1px solid var(--line);border-radius:7px;background:#f4f6fa;}
  .rq-pend-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;padding:0;line-height:1;
       border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--red);font-size:11px;font-weight:800;cursor:pointer;
       box-shadow:0 1px 3px rgba(15,30,60,.2);}
  .rq-shots{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
  .rq-shot{padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;cursor:zoom-in;display:block;}
  .rq-shot img{width:116px;height:80px;object-fit:cover;display:block;}
  .rq-shot:hover{border-color:var(--navy);}
  .rq-shot.file{font-size:11.5px;font-weight:700;color:var(--navy);text-decoration:none;padding:5px 9px;cursor:pointer;}
  /* 🔑 비밀번호 변경/재설정 */
  .pwform{display:grid;grid-template-columns:150px 1fr;gap:9px 12px;align-items:center;max-width:420px;}
  .pwform label{font-size:12.5px;font-weight:700;color:var(--navy);}
  .pwform input{border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:14px;letter-spacing:4px;}
  .pw-table-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 14px 14px;overflow-x:auto;}
  .pw-table{width:100%;border-collapse:collapse;font-size:13px;}
  .pw-table th{background:#5b6b8c;color:#fff;font-size:12px;padding:8px 10px;text-align:left;}
  .pw-table td{padding:8px 10px;border-bottom:1px solid var(--line);}
  .pw-chip{font-size:11.5px;font-weight:700;background:#f1f3f6;color:var(--muted);border-radius:999px;padding:2px 10px;}
  .pw-chip.changed{background:#e0edff;color:#1d4ed8;}
  /* 🔍 전역 검색 */
  .gsearch-wrap{position:relative;}
  .gsearch-wrap input{border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:12.5px;width:200px;}
  .gs-results{position:absolute;top:36px;left:0;min-width:340px;background:#fff;border:1px solid var(--line);border-radius:10px;
    box-shadow:0 8px 24px rgba(15,30,60,.14);z-index:60;overflow:hidden;}
  .gs-item{display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:12.5px;cursor:pointer;border-bottom:1px solid #f1f3f6;}
  .gs-item:hover{background:#eef4ff;}
  .gs-biz{color:#fff;font-size:10.5px;font-weight:700;border-radius:5px;padding:1px 6px;}
  .gs-fund{color:var(--muted);font-weight:600;}
  .gs-stage{margin-left:auto;font-size:11px;color:var(--navy);font-weight:700;}
  .gs-id{color:var(--muted);font-size:11px;}
  .gs-empty{padding:10px 12px;color:var(--muted);font-size:12px;}
  /* 📅 마감 캘린더 */
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:12px;}
  .cal-h{text-align:center;font-size:12px;font-weight:800;color:var(--navy);padding:4px 0;}
  .cal-h:first-child{color:var(--red);}
  .cal-cell{background:#fff;border:1px solid var(--line);border-radius:9px;min-height:86px;padding:6px;display:flex;flex-direction:column;gap:3px;}
  .cal-cell.blank{background:transparent;border:none;}
  .cal-cell.today{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);}
  .cal-d{font-size:11.5px;font-weight:800;color:var(--muted);}
  .cal-today-tag{color:#fff;background:var(--navy);border-radius:5px;padding:0 5px;font-size:10px;}
  /* 왼쪽 띠 — 업무 색이 파스텔(전체 조망 카드와 같은 5색)로 바뀌어 3px 로는 옅은 회색 배경에
     묻힌다. 카드(8px)만큼은 못 주더라도 한 칸에 항목 여럿이 들어가는 폭에서 색이 읽히는 선으로 5px. */
  .cal-item{font-size:11px;line-height:1.35;background:#f6f8fb;border-left:5px solid #d4d7dc;border-radius:5px;padding:3px 6px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;}
  .cal-item:hover{background:#eef4ff;}
  .cal-item .cal-biz{color:var(--muted);font-weight:600;margin-left:4px;font-size:10px;}
  .cal-item.done{opacity:.45;}
  .cal-item.late{background:var(--red-soft);color:var(--red);}
  @media(max-width:900px){ .cal-cell{min-height:60px;} }
  /* ⏱ 처리 분석 */
  .lead-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;gap:10px;max-width:640px;}
  .lead-row{display:flex;align-items:flex-start;gap:10px;}
  /* 라벨·수치는 막대 높이(20px)에 맞춰 눈높이를 맞춘다 — 아래로 뺀 이름표가 줄을 늘려도 안 흔들린다 */
  .lead-row>.lead-lb,.lead-row>.lead-metrics{line-height:20px;}
  .lead-lb{width:98px;font-size:12.5px;font-weight:800;color:var(--navy);}
  /* 처리중을 부서별로 펼친 줄 — 한 단계 안이라는 걸 들여쓰기로 보인다 */
  .lead-lb.sub{padding-left:10px;font-weight:700;font-size:12px;color:var(--muted);}
  .lead-track{flex:1;background:#f1f3f6;border-radius:999px;height:14px;overflow:hidden;}
  .lead-bar{height:100%;border-radius:999px;}
  /* 누적 막대(업무구분별 소요시간) — 조각을 왼쪽부터 이어 붙이므로 알약 모양 대신 각진 트랙 */
  .lead-track.split{display:flex;height:20px;border-radius:5px;background:#f7f9fb;}
  .lead-box.biz{gap:8px;}
  .lead-box.biz .lead-lb{width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* 업무구분을 가리지 않은 '전체' 줄 — 아래 줄들과 성격이 달라 선으로 끊는다 */
  .lead-row.allrow{padding-bottom:9px;border-bottom:1px solid var(--line);}
  .lead-v{width:70px;text-align:right;font-size:12.5px;font-weight:700;}
  /* 평균·중앙값·P90을 한 줄에, 그 아래 실경과를 회색으로 — 폭을 고정해야 단계끼리 눈으로 비교된다 */
  .lead-metrics{width:230px;flex:none;text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
  .lead-wall{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;}
  @media(max-width:900px){ .lead-metrics{width:150px;font-size:11px;} }
  /* 지연 Top 10 — 식별정보 네 칸은 폭을 조여 왼쪽에 몰고, 남은 폭은 전부 막대에 준다.
     .mrec 의 7칸 격자를 5칸으로 덮어쓴다(뒤에 와야 이긴다). */
  .lcols,.lrec>summary{grid-template-columns:minmax(76px,148px) minmax(56px,80px) minmax(52px,92px) minmax(88px,116px) minmax(230px,1fr);gap:9px;}
  /* 이름표가 아래로 빠지면 줄이 길어진다 — 가운데 정렬이면 왼쪽 글자들이 막대보다 내려앉는다.
     위 기준으로 맞추고 줄높이를 막대(20px)에 맞춰 눈높이를 통일한다. */
  .lrec>summary{align-items:flex-start;}
  .lrec>summary>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:20px;}
  .lbar{display:flex;align-items:flex-start;gap:9px;overflow:visible;}
  .lbar-track{flex:1;min-width:0;display:flex;height:20px;border-radius:5px;overflow:hidden;background:#f7f9fb;}
  .lseg{min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
        font-size:11px;font-weight:700;color:#fff;letter-spacing:-.2px;white-space:nowrap;
        box-shadow:inset -1px 0 0 rgba(255,255,255,.6);}
  .lseg>.lseg-t{flex:none;font-style:normal;}
  .lseg.hid>.lseg-t{visibility:hidden;}   /* 자리는 재야 하므로 지우지 않고 숨긴다 */
  /* 조각에 안 들어간 이름표 — 막대 아래에 지시선으로 이어 놓는다(위치는 layoutCallouts) */
  .barcol{flex:1;min-width:0;}
  .barcol>.ltrack{position:relative;width:100%;}
  .lcall{display:block;position:relative;height:0;overflow:visible;}
  .lcall>svg{position:absolute;left:0;top:0;overflow:visible;}
  .lcl{position:absolute;top:13px;font-size:11px;font-weight:700;line-height:13px;
       white-space:nowrap;letter-spacing:-.2px;font-variant-numeric:tabular-nums;}
  .lseg:last-child{box-shadow:none;}
  /* 담당을 못 가린 구간(단계 이동 기록 없음) — 부서 몫이 아니라는 걸 빗금으로 구분한다.
     빈 트랙과 톤이 비슷하면 막대가 어디서 끝나는지 안 보인다 — 빗금을 확실히 진하게. */
  .lseg.off{background:repeating-linear-gradient(45deg,#c3cedd 0 5px,#e4eaf1 5px 10px);}
  .lbar-tot{flex:none;min-width:56px;text-align:right;font-size:12px;font-weight:800;line-height:20px;font-variant-numeric:tabular-nums;}
  .lleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:-4px 0 9px;font-size:11px;color:var(--muted);font-weight:700;}
  .lleg span{display:flex;align-items:center;gap:5px;}
  .lleg i,.lbrk i{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none;}
  .lleg i.off{background:repeating-linear-gradient(45deg,#c3cedd 0 3px,#e4eaf1 3px 6px);}
  /* 펼쳤을 때 막대를 글자로 다시 적어 준 줄 — 마우스를 못 올리는 환경에서도 값이 보이게 */
  .lbrk{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;font-size:11.5px;color:var(--muted);
        padding-bottom:9px;margin-bottom:9px;border-bottom:1px dashed #e2e5ea;}
  .lbrk span{display:flex;align-items:center;gap:5px;}
  .lbrk b{color:var(--ink);font-variant-numeric:tabular-nums;}
  .lbrk .par{color:#94a3b8;font-size:11px;margin-left:-8px;}
  .lbrk .tot{margin-left:auto;font-weight:700;}
  @media(max-width:900px){
    .lcols,.lrec>summary{grid-template-columns:minmax(66px,110px) minmax(52px,70px) minmax(48px,76px) minmax(84px,104px) minmax(140px,1fr);gap:7px;}
    .lbar-tot{min-width:48px;font-size:11px;}
  }
  /* 📖 설명서 서브탭 */
  .gsubbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;border-bottom:2px solid var(--line);padding-bottom:10px;}
  .gsub{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--muted);}
  .gsub:hover{background:#f1f3f6;}
  .gsub.on{background:var(--navy);color:#fff;border-color:var(--navy);}
  .gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:10px 0 6px;}
  .gcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;box-shadow:0 1px 3px rgba(15,30,60,.05);}
  .gcard.slim{display:block;}
  .gnum{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;font-size:13px;}
  .gtx{font-size:12.5px;color:var(--ink);line-height:1.6;margin-top:3px;font-weight:400;}
  .gchips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px;}
  /* 틀고정 — 아래 내용이 길어 스크롤해도 업무구분 선택줄은 화면 위에 붙어 있는다.
     .guide 의 좌우 여백(26px)만큼 음수 마진으로 빼서 배경이 본문 폭을 꽉 채우게 한다. */
  .gchips.pin{position:sticky;top:0;z-index:6;background:var(--bg);
              margin:0 -26px 14px;padding:12px 26px 11px;
              box-shadow:0 6px 8px -6px rgba(20,30,50,.12);}
  .gchip{background:#fff;border:1.5px solid var(--c,#64748b);color:var(--c,#64748b);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;}
  .gchip.on{background:var(--c,#64748b);color:#fff;}
  .gbizdot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px;}
  .gflow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;margin:10px 0 6px;}
  .gfstep{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:120px;flex:1;}
  .gfs{font-weight:800;color:var(--navy);font-size:13px;margin-bottom:6px;}
  .gfd{display:flex;flex-direction:column;gap:4px;}
  .gfdep{color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap;}
  .gfdep.skip{background:#e5e7eb;color:#6b7280;}
  .gfar{align-self:center;font-weight:800;color:var(--muted);}
  .gauto{background:#e0edff;color:#1d4ed8;font-size:11px;font-weight:800;border-radius:6px;padding:1px 7px;}
  .gopt{color:var(--muted);font-size:12px;}
  .gfaq{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:7px 0;}
  .gfaq summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--navy);}
  .gcatrow td{background:#eef2f8;color:var(--navy);font-weight:800;font-size:12px;padding:6px 10px;}
  /* 과정별 담당과 하는 일 — 단계 카드 (0.등록 → 4단계, 각 단계 안에 부서 블록) */
  .gstages{display:flex;flex-direction:column;gap:9px;margin:10px 0 4px;}
  .gstage{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;}
  .gstage-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#f7f9fc;border-bottom:1px solid var(--line);padding:9px 12px;}
  .gstage-n{width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;}
  .gstage-t{font-weight:800;font-size:13px;color:var(--navy);margin-right:2px;}
  .gstage-x{margin-left:auto;font-size:11px;color:var(--muted);font-weight:700;}
  .gstage-dept{border-left:4px solid var(--c,#64748b);background:#fff;margin:9px 12px;padding:2px 0 2px 10px;}
  .gsd-h{font-weight:800;font-size:12.5px;color:var(--navy);}
  .gsd-r{font-weight:600;font-size:11px;color:var(--muted);margin-left:4px;}
  .gsd-must{margin-top:5px;font-size:12px;font-weight:700;color:var(--red);background:#fdecec;border-radius:6px;padding:4px 8px;}
  /* 승인을 막지는 않고 '고칠 수 있다'만 알리는 항목 — 빨강은 승인이 걸리는 확정 항목에만 쓴다 */
  .gsd-must.opt{color:var(--navy);background:#eef2ff;}
  .gsd-ck{margin-top:5px;font-size:12px;color:var(--muted);font-weight:700;}
  .gsd-ck.none{color:#9aa3b0;font-weight:600;}
  .gcks{margin-top:3px;display:flex;flex-direction:column;gap:2px;}
  .gck-item{font-size:12.5px;color:var(--ink);line-height:1.55;}
  .gsd-n{margin-top:4px;font-size:11.5px;color:var(--muted);}
  .gsd-foot{border-top:1px dashed var(--line);margin:0 12px;padding:7px 0 10px;font-size:11.5px;color:var(--muted);}
  .gfold{margin-top:6px;}
  .gfold summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--navy2);}
  .gfcat{margin-top:7px;font-size:11px;font-weight:800;color:var(--muted);}
  .gfields{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;}
  .gfield{background:#f1f4f9;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:11.5px;font-weight:600;}
  .gfield i{color:var(--red);font-style:normal;font-weight:800;margin-left:1px;}
  .gfield.auto{background:#e0edff;border-color:#c7dcff;}
  .gfield em{font-style:normal;font-size:10px;font-weight:800;color:#1d4ed8;}
  /* 📖 도식: 업무 Flow(여정) */
  .gjourney{display:flex;align-items:stretch;flex-wrap:wrap;gap:2px;margin:12px 0 6px;}
  .gj-node{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;min-width:132px;flex:1;position:relative;}
  .gj-t{font-weight:800;font-size:12.5px;color:var(--navy);margin-bottom:4px;}
  .gj-w{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:5px;}
  .gj-d{font-size:11px;color:var(--ink);line-height:1.55;}
  .gj-icons{margin-top:6px;font-size:10.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:4px;}
  .gj-ar{align-self:center;padding:0 4px;font-weight:800;color:var(--muted);}
  .gj-mail{position:absolute;top:-10px;right:-4px;background:#fff7ed;border:1px solid #fdba74;border-radius:999px;font-size:10px;padding:1px 7px;color:#b45309;font-weight:700;}
  /* 도식: 부서 관계도 */
  .gorg{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin:12px 0;}
  .gorg-col{flex:1;min-width:180px;background:#f4f6fa;border:1px solid var(--line);border-radius:12px;padding:10px;}
  .gorg-h{font-size:12px;font-weight:800;color:var(--muted);text-align:center;margin-bottom:8px;}
  .gorg-box{background:#fff;border-left:4px solid var(--c,#64748b);border-radius:8px;padding:7px 10px;margin-bottom:6px;box-shadow:0 1px 2px rgba(15,30,60,.06);}
  .gorg-box b{font-size:12.5px;}
  .gorg-ar{align-self:center;font-weight:800;color:var(--muted);text-align:center;font-size:11.5px;line-height:1.4;padding:0 2px;}
  /* 도식: 스윔레인 */
  .gswim{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap;}
  .gsw-cell{flex:1;min-width:130px;border-radius:10px;padding:9px 11px;border:1.5px dashed var(--line);background:#fafbfd;color:var(--muted);font-size:11.5px;}
  .gsw-cell.me{border:1.5px solid var(--c,#15803d);background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(15,30,60,.08);}
  .gsw-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,#15803d);margin-right:5px;vertical-align:-1px;}
  .gsw-st{font-weight:800;font-size:12px;color:var(--navy);margin-bottom:3px;}
  /* 도식: 탭 미니 목업 카드 */
  .gscreen{display:flex;flex-direction:column;gap:10px;margin:10px 0;}
  .gscard{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative;align-items:flex-start;}
  .gribbon{position:absolute;top:10px;right:12px;background:#111827;color:#fff;font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 8px;}
  .gmock{width:150px;min-width:150px;height:92px;background:#f7f8fb;border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;gap:4px;overflow:hidden;}
  .gmock.col{flex-direction:column;}
  .gm-col{flex:1;display:flex;flex-direction:column;gap:3px;}
  .gm-card{height:12px;border-radius:3px;background:#e2e8f0;}
  .gm-card.c1{background:#fecaca;} .gm-card.c2{background:#bfdbfe;} .gm-card.c3{background:#bbf7d0;} .gm-card.c4{background:#fde68a;}
  .gm-row{display:flex;gap:3px;} .gm-row>div{flex:1;height:11px;border-radius:2px;background:#e2e8f0;}
  .gm-bar{height:9px;border-radius:999px;background:#93c5fd;}
  .gm-kpi{flex:1;height:22px;border-radius:4px;background:#e0edff;}
  .gm-pillrow{display:flex;gap:3px;} .gm-pillrow>div{flex:1;height:11px;border-radius:999px;background:#dbe3ee;}
  .gsc-body{flex:1;min-width:0;} .gsc-t{font-weight:800;font-size:13.5px;color:var(--navy);margin-bottom:5px;}
  .gsc-l{font-size:12.5px;line-height:1.7;} .gsc-l b{color:var(--navy);}
  /* 도식: 번호 타임라인 */
  .gsteps{display:flex;flex-direction:column;margin:8px 0 4px;}
  .gstep{display:flex;gap:10px;align-items:flex-start;position:relative;padding-bottom:13px;}
  .gstep:before{content:'';position:absolute;left:12px;top:26px;bottom:0;width:2px;background:var(--line);}
  .gstep:last-child:before{display:none;}
  .gstep .n{width:25px;height:25px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;z-index:1;}
  .gstep .b{font-size:12.5px;line-height:1.6;padding-top:3px;}
  /* ── 고객정보 관리(캡쳐2) 리스트 ── */
  .clients-wrap{padding:16px 22px;}
  .clients-filter{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
  .clients-filter select,.clients-filter input{font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:#fff;}
  .clients-filter .cnt{margin-left:auto;color:var(--muted);font-size:12px;}
  .clients-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff;}
  .dslist{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap;}
  .dslist th{background:var(--navy);color:#fff;font-weight:700;padding:10px 12px;text-align:center;border-right:1px solid #33456a;position:sticky;top:0;}
  .dslist td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid #eef1f5;color:var(--ink);}
  .dslist td.l{text-align:left;}
  .dslist td.r{text-align:right;}   /* 금액 칸 — 자릿수를 눈으로 맞추려면 오른쪽 정렬이라야 한다 */
  .dslist td.mono{font-family:inherit;font-weight:600;}
  .dslist tbody tr{cursor:pointer;}
  .dslist tbody tr:nth-child(even){background:#f7f9fb;}
  .dslist tbody tr:hover{background:#eef4ff;}
  .dslist .biztag{font-weight:700;color:#fff;padding:2px 8px;border-radius:5px;font-size:11px;}
  .stbadge{font-weight:700;padding:3px 9px;border-radius:12px;font-size:11px;}
  .stbadge.prog{background:#e0edff;color:#1d4ed8;}
  .stbadge.done{background:var(--ok-soft);color:var(--ok);}
  .stbadge.rej{background:var(--red-soft);color:var(--red);}
  .clients-empty{padding:34px 0;text-align:center;color:#9aa3b0;font-size:13px;}
  @media(max-width:720px){ .dsform,.fieldsview{grid-template-columns:110px 1fr;} }
  /* ── 👤 계정 관리 (마스터 전용) ── */
  .login-card select{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;font-size:14px;
       margin-bottom:10px;font-family:inherit;background:#fff;color:var(--ink);}
  .login-alt{margin-top:14px;color:var(--muted);font-size:12px;line-height:1.6;}
  .login-alt button{background:none;border:none;color:var(--navy);font-weight:700;font-size:12px;
       text-decoration:underline;cursor:pointer;font-family:inherit;padding:0;}
  .tabdot{background:var(--red);color:#fff;border-radius:11px;min-width:17px;height:17px;font-size:10.5px;
       line-height:17px;text-align:center;padding:0 4px;font-weight:800;margin-left:6px;display:inline-block;}
  .acct-wrap{padding:16px 22px 34px;}
  .acct-sec{margin-bottom:20px;}
  .acct-sec>h3{font-size:14px;color:var(--navy);margin:0 0 4px;display:flex;align-items:center;gap:8px;}
  .acct-sec>.acct-hint{color:var(--muted);font-size:12.5px;line-height:1.6;margin:0 0 10px;}
  .acct-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;
       background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
  .acct-form .f{display:flex;flex-direction:column;gap:5px;}
  .acct-form .f>span{font-size:11.5px;font-weight:700;color:var(--muted);}
  .acct-form input,.acct-form select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;
       font-size:13px;font-family:inherit;background:#fff;width:100%;box-sizing:border-box;}
  .acct-form .btn-primary{height:36px;border-radius:8px;font-size:13px;}
  .acct-table td.act{white-space:nowrap;text-align:right;}
  .acct-table td.act button{margin-left:5px;}
  .acct-table .deptsel{border:1px solid var(--line);border-radius:7px;padding:4px 7px;font-size:12.5px;
       font-family:inherit;background:#fff;margin-right:5px;}
  /* 증권사 관리 — 표 안에서 그대로 고치는 칸(계정 관리의 부서 칸과 같은 모양) */
  .acct-table .bk-in{border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12.5px;
       font-family:inherit;background:#fff;width:100%;box-sizing:border-box;}
  .acct-table .bk-in.bk-code{font-weight:800;letter-spacing:.3px;max-width:160px;}
  .btn-danger{background:#fff;border:1px solid var(--red);color:var(--red);border-radius:7px;padding:5px 12px;
       font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .btn-danger:hover{background:var(--red);color:#fff;}
  .st-chip{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 10px;}
  .st-chip.active{background:var(--ok-soft);color:var(--ok);}
  .st-chip.pending{background:#fef3c7;color:#92400e;}
  .st-chip.disabled{background:#f1f3f6;color:var(--muted);}