/* THE SC B2B 접수함 — 회사 BI(night · navy · blue)를 따른다. CTI와 같은 결: night 상단바 + 흰 작업면, 촘촘한 표
   색 기준은 _reference/BI_가이드.md. 파랑은 선택 · 주요 버튼 · 강조에만, 초록 · 노랑 · 빨강은 상태 표시에만 쓴다 */
:root {
  color-scheme: light;
  --night: #0a0d22; --navy: #0b1f6b; --navy2: #14298a; --blue: #1f4fe0; --blue-l: #3d7bff;
  --bg: #f3f5fa; --panel: #ffffff; --panel2: #f7f9fd; --hover: #eef3ff; --line: #e4e8f1; --line2: #edf0f6;
  --ink: #111421; --sub: #5d6478; --mute: #8d93a6; --black: var(--navy); --on-black: #ffffff; --on-black-sub: #aab4d8;
  --ok: #0f8a4b; --ok-bg: #e6f6ed; --warn: #b26a00; --warn-bg: #fff3dc; --bad: #c62a2a; --bad-bg: #fde9e9; --info: #5d6478; --info-bg: #edf0f6;
  --r: 6px; --shadow: 0 1px 2px rgba(17, 20, 33, .06);
  --font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 13px/1.55 var(--font); word-break: keep-all; overflow-wrap: break-word; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.mono, .num { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s { color: var(--sub); font-size: 12px; }
h2, h3, p { margin: 0; }

/* 상단바 */
.top { background: var(--night); color: var(--on-black); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 600; font-size: 13px; color: var(--on-black-sub); }
.brand img { height: 24px; width: auto; display: block; }
.brand span { border-left: 1px solid rgba(255, 255, 255, .22); padding-left: 10px; }
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; }
.nav a { text-decoration: none; color: var(--on-black-sub); padding: 6px 13px; border-radius: var(--r); font-weight: 500; white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
.who { display: flex; align-items: center; gap: 8px; }
.fp { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); color: #e6e6ea; white-space: nowrap; }
.fp.demo { background: #fff2d9; color: #7a4800; font-weight: 600; }
.fp.live { background: #e7f5ec; color: #0f7a43; font-weight: 600; }
.top .btn { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600; }
.top .btn:hover { background: var(--navy2); border-color: var(--navy2); }
.demobar { background: var(--panel); border-bottom: 1px solid var(--line); padding: 7px max(16px, env(safe-area-inset-right, 0px)) 7px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--sub); }
.demobar b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.demobar .sp { flex: 1; }
@media (max-width: 760px) { .nav { order: 3; width: 100%; margin-left: 0; } .who { margin-left: auto; } }

/* 틀 */
.wrap { max-width: 1320px; margin: 0 auto; padding-block: 18px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ahead { margin-bottom: 14px; }
.ahead h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.ahead p { color: var(--sub); font-size: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; min-width: 0; box-shadow: var(--shadow); }
.panel > h3 { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.panel > h3 .btn, .panel > h3 a.btn { margin-left: auto; }
.panel > h3 .btn + .btn, .panel > h3 a.btn + .btn, .panel > h3 .btn + a.btn { margin-left: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.two { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1040px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dgrid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { .two, .dgrid { grid-template-columns: minmax(0, 1fr); } }
p.lead { color: var(--sub); margin-bottom: 14px; max-width: 64ch; }
ul.plain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }

/* 버튼 · 입력 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); cursor: pointer; white-space: nowrap; text-decoration: none; font-weight: 500; }
.btn:hover { background: var(--panel2); border-color: #c9d2e6; }
.btn.pri { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn.pri:hover { background: var(--navy2); border-color: var(--navy2); }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=datetime-local], select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 9px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 79, 224, .12); }
textarea { resize: vertical; min-height: 60px; }
label.f { display: block; font-size: 12px; font-weight: 600; color: var(--sub); }
label.f input, label.f select, label.f textarea { display: block; margin-top: 4px; font-weight: 400; color: var(--ink); }
.req { color: var(--bad); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.full { grid-column: 1 / -1; }
@media (max-width: 560px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.chk { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; }
.chk input { width: auto; margin-top: 3px; }

/* 뱃지 */
.pill { display: inline-block; padding: 0 7px; border-radius: 4px; font-size: 11px; line-height: 19px; font-weight: 600; white-space: nowrap; background: var(--info-bg); color: var(--info); }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.bad { background: var(--bad-bg); color: var(--bad); } .pill.br { background: #e8efff; color: var(--blue); }
.grade { display: inline-flex; width: 20px; height: 20px; border-radius: 4px; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; font-family: var(--mono); border: 1px solid var(--line); background: var(--panel); color: var(--sub); flex: none; }
.grade.S, .grade.A { background: var(--navy); border-color: var(--navy); color: #fff; } .grade.B { background: #e8efff; border-color: #e8efff; color: var(--blue); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--mute); }
.dot.ok { background: var(--ok); } .dot.warn { background: #d98a00; } .dot.bad { background: var(--bad); } .dot.br { background: var(--blue); }

/* 대시보드 */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1040px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow); }
.kpi .l { font-size: 12px; color: var(--sub); font-weight: 600; }
.kpi .v { font-size: 26px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .d { font-size: 11px; color: var(--mute); } .kpi .d span { color: var(--mute); }
.kpi.alert { border-color: var(--bad); } .kpi.alert .v { color: var(--bad); }
.kpi.hot { border-color: var(--blue); }
.qi { border: 1px solid var(--line2); border-radius: var(--r); padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; background: var(--panel2); }
.qi + .qi { margin-top: 8px; } .q { display: flex; flex-direction: column; } .qi.off { opacity: .5; }
.r { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.r > span:first-child { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.trow { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; justify-content: space-between; text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.trow:last-child { border-bottom: 0; } .trow:hover { background: var(--hover); } .trow > span:first-child { display: flex; gap: 7px; align-items: center; min-width: 0; font-weight: 500; }
.stg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 520px) { .stg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stg div { border: 1px solid var(--line2); border-radius: var(--r); padding: 8px 2px; text-align: center; background: var(--panel2); }
.stg b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .stg small { font-size: 11px; color: var(--sub); }
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.mini div { border: 1px solid var(--line2); border-radius: var(--r); padding: 8px 10px; background: var(--panel2); }
.mini small { display: block; color: var(--sub); font-size: 11px; } .mini b { font-size: 15px; font-variant-numeric: tabular-nums; }
.alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.alerts li { display: flex; gap: 8px; align-items: baseline; } .alerts li.read { opacity: .5; } .alerts a { text-decoration: none; } .alerts a:hover { text-decoration: underline; }

/* 표 · 접수함 */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip { font-size: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--sub); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.chip:hover { background: var(--hover); } .chip[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; font-weight: 600; }
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .bulk .pri { margin-left: auto; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line2); vertical-align: top; }
th { font-size: 11px; color: var(--sub); font-weight: 600; white-space: nowrap; background: var(--panel2); border-bottom: 1px solid var(--line); }
tbody tr.row { cursor: pointer; } tbody tr.row:hover { background: var(--hover); }
td input[type=checkbox] { width: auto; }
table.seq td:first-child { white-space: nowrap; font-weight: 600; }

/* 건 상세 */
.dhead { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 10px; }
.dhead h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-right: 2px; }
.steps { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); width: fit-content; max-width: 100%; }
.steps span { font-size: 12px; padding: 5px 13px; color: var(--mute); border-right: 1px solid var(--line); } .steps span:last-child { border-right: 0; }
.steps span.past { color: var(--ink); background: var(--panel2); } .steps span.now { background: var(--black); color: #fff; font-weight: 700; }
.trks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .trks { grid-template-columns: minmax(0, 1fr); } }
.trk { border: 1px solid var(--line); border-radius: var(--r); padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--panel); }
.trk.rec { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: #f7f9ff; } .trk .btn { margin-top: auto; }
.tierbox { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tscore { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px; text-align: center; background: var(--panel2); }
.tscore b { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; } .tscore small { color: var(--sub); font-size: 11px; }
.tierbox > div:last-child { flex: 1; min-width: 180px; }
.lvl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
@media (max-width: 560px) { .lvl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lvl .btn { flex-direction: column; gap: 0; padding: 6px 4px; font-size: 12px; font-weight: 600; white-space: normal; } .lvl .btn small { font-weight: 400; font-size: 11px; opacity: .75; }
.tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; width: fit-content; max-width: 100%; margin-bottom: 12px; }
.tabs button { border: 0; border-right: 1px solid var(--line); background: var(--panel); padding: 6px 13px; cursor: pointer; color: var(--sub); font-size: 12px; font-weight: 500; }
.tabs button:last-child { border-right: 0; } .tabs button[aria-pressed="true"] { background: var(--black); color: #fff; font-weight: 600; }
.acts b.full, .acts .one > b { font-size: 13px; } .acts b small { font-weight: 400; margin-left: 4px; }
.acts .one { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .acts .one label { width: 100%; max-width: 360px; }
ul.tl { list-style: none; margin: 0; padding: 0; }
ul.tl li { display: grid; grid-template-columns: 78px 48px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line2); }
ul.tl li:last-child { border-bottom: 0; }
@media (max-width: 560px) { ul.tl li { grid-template-columns: minmax(0, 1fr); gap: 1px; } }
dl.kv { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 5px 10px; margin: 0; }
dl.kv.wide { grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); }
dl.kv dt { color: var(--sub); font-size: 12px; } dl.kv dd { margin: 0; } dl.kv dd.body { white-space: pre-wrap; }
details summary { cursor: pointer; font-size: 12px; color: var(--sub); } details[open] summary { color: var(--ink); margin-bottom: 6px; }
details input, details textarea { margin-bottom: 6px; }
pre.mailbody { white-space: pre-wrap; font: inherit; font-size: 12.5px; line-height: 1.65; background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r); padding: 11px 12px; margin: 0 0 6px; }
.panel > details { border-bottom: 1px solid var(--line2); padding: 7px 0; } .panel > details:last-of-type { border-bottom: 0; }

/* 대화상자 · 알림 */
dialog { border: 1px solid var(--line); border-radius: 10px; padding: 18px; width: min(640px, calc(100vw - 32px)); max-height: 90vh; background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(10, 13, 34, .5); }
dialog h2 { font-size: 16px; }
#briefDlg { width: min(760px, calc(100vw - 32px)); }
.dlgbtn { display: flex; gap: 8px; justify-content: flex-end; }
#toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); background: var(--night); color: #fff; padding: 9px 16px; border-radius: var(--r); font-size: 13px; opacity: 0; pointer-events: none; transition: .18s; z-index: 50; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); } #toast.bad { background: var(--bad); }
@media (prefers-reduced-motion: reduce) { #toast, .bbar i { transition: none; } }
.login { max-width: 360px; margin: 14vh auto; }

/* 요구사항정의서 (고객 화면 · 관리자 입력 공용): 전부 누르는 칩 */
.bwrap { max-width: 680px; } .bhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bhead .brand img { height: 30px; }
.bcard { padding: 26px 22px; } .bh { font-size: clamp(26px, 6vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; line-height: 1.2; }
.bbar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 22px; }
.bbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-l), var(--blue)); transition: width .2s; }
.bform, #briefBody { display: flex; flex-direction: column; gap: 20px; }
.bq { border: 0; padding: 0; margin: 0; min-width: 0; display: block; font-size: 14px; font-weight: 700; }
.bq legend { padding: 0; margin-bottom: 9px; font-size: 14px; font-weight: 700; } .bq legend small { font-weight: 400; color: var(--mute); margin-left: 4px; font-size: 12px; }
.bq textarea, .bq input[type=text] { display: block; margin-top: 9px; font-weight: 400; font-size: 14px; padding: 10px 12px; }
.chipset { display: flex; flex-wrap: wrap; gap: 7px; }
.pick { cursor: pointer; } .pick input { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.pick span { display: inline-block; border: 1px solid #d4d4d8; background: var(--panel); border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 500; }
.pick:hover span { border-color: var(--blue); }
.pick input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.pick input:focus-visible + span { outline: 2px solid var(--blue-l); outline-offset: 2px; }
.bsend { padding: 14px; font-size: 15px; }
.pv { border: 1px dashed #c9c9cf; border-radius: 10px; padding: 20px; background: var(--panel); }

/* 대시보드: 요약 한 줄 + 처리할 것 한 표 + 좁은 보조 칸 */
.sum { display: flex; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 12px; }
.sum div { flex: 1 1 130px; padding: 11px 16px; border-right: 1px solid var(--line2); min-width: 0; } .sum div:last-child { border-right: 0; }
.sum small { display: block; font-size: 11px; color: var(--sub); font-weight: 600; } .sum b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sum b.bad { color: var(--bad); } .sum b small { display: inline; font-size: 12px; font-weight: 500; color: var(--mute); margin-left: 4px; }
.dash { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 960px) { .dash { grid-template-columns: minmax(0, 1fr); } }
table.todo td { vertical-align: middle; } table.todo td:last-child { text-align: right; white-space: nowrap; } table.todo td:first-child { white-space: nowrap; }
table.todo .o { font-weight: 600; } table.todo .o .grade { margin-right: 6px; vertical-align: -4px; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bars div { display: grid; grid-template-columns: 62px minmax(0, 1fr) 22px; gap: 8px; align-items: center; font-size: 12px; color: var(--sub); }
.bars i { display: block; height: 6px; border-radius: 99px; background: var(--blue); min-width: 2px; } .bars span.t { background: var(--line2); border-radius: 99px; display: block; }
.bars b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.empty { padding: 28px 12px; text-align: center; color: var(--sub); }

/* 대시보드 v3: 숫자 → 캘린더 · 등급 · 상태 → 처리할 것 · 알림 */
.nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
@media (max-width: 900px) { .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 480px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.numc { padding: 12px 16px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); text-decoration: none; display: block; min-width: 0; }
.numc:hover { background: var(--hover); }
.numc small { display: block; font-size: 12px; color: var(--sub); font-weight: 600; } .numc b { display: block; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numc span { font-size: 11px; color: var(--mute); } .numc.bad b { color: var(--bad); } .numc.ok b { color: var(--ok); }
.dash2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 12px; }
@media (max-width: 960px) { .dash2 { grid-template-columns: minmax(0, 1fr); } }
.calnav { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; } .calnav b { min-width: 84px; text-align: center; }
.panel > h3 .calnav .btn { margin-left: 0; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dow { font-size: 11px; color: var(--sub); text-align: center; padding: 2px 0; font-weight: 600; }
.cal .day { border: 1px solid var(--line2); border-radius: var(--r); min-height: 58px; padding: 5px 6px; display: flex; flex-direction: column; gap: 0; background: var(--panel2); }
.cal .day.off { border: 0; background: transparent; } .cal .day.has { background: var(--panel); border-color: var(--line); }
.cal .day.today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.cal .day i { font-style: normal; font-size: 11px; color: var(--mute); } .cal .day b { font-size: 17px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cal .day span { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; } .cal em { font-style: normal; font-weight: 700; }
.c-ok { color: var(--ok); } .c-bad { color: var(--bad); }
.gcount { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } @media (max-width: 520px) { .gcount { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gcount a, .scount a { border: 1px solid var(--line2); border-radius: var(--r); padding: 8px 4px; text-align: center; text-decoration: none; background: var(--panel2); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.gcount a:hover, .scount a:hover { border-color: var(--blue); background: var(--hover); }
.gcount b, .scount b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; } .gcount small, .scount small { font-size: 10.5px; color: var(--sub); line-height: 1.35; }
.scount { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } @media (max-width: 520px) { .scount { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grade.U { color: var(--mute); border-style: dashed; } .grade.C { color: var(--ink); } .grade.D { background: var(--line2); border-color: var(--line2); color: var(--mute); }
/* 접수함 필터 */
.filters { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.frow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .frow .chips { margin: 0; flex: 1; min-width: 0; }
.fl { width: 62px; flex: none; font-size: 12px; font-weight: 700; color: var(--sub); } .frow input { max-width: 320px; }
.chip i { font-style: normal; opacity: .6; font-variant-numeric: tabular-nums; margin-left: 2px; }
.bulk > b { font-size: 13px; }
/* 등급 프로세스 */
ol.proc { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.gset { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); }
table.ptab tr.row.sel { background: var(--hover); box-shadow: inset 3px 0 0 var(--blue); } table.ptab td { vertical-align: middle; }
.tscore { min-width: 64px; }

/* 상황판 (칸반): 가로로 넘기는 칸, 끌어다 놓는 카드 */
.board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kcol { flex: 0 0 214px; width: 214px; min-width: 0; background: #e9edf5; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 150px); min-height: 180px; }
.kcol header { padding: 9px 11px 7px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.kcol header b { font-size: 13px; } .kcol header small { width: 100%; font-size: 11px; color: var(--sub); min-height: 16px; }
.kcol header .pill { background: var(--panel); }
.kbody { padding: 8px; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 9px; display: flex; flex-direction: column; gap: 3px; cursor: grab; box-shadow: var(--shadow); }
.kcard:hover { border-color: #c9d2e6; } .kcard:active { cursor: grabbing; } .kcard.drag { opacity: .45; }
.kcard.us { box-shadow: inset 3px 0 0 var(--bad), var(--shadow); }
.kcard b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .kcard .r > span:first-child { min-width: 0; flex: 1; }
.kcard .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmove { width: auto; padding: 2px 6px; font-size: 11px; color: var(--sub); }
.kempty { color: var(--mute); font-size: 12px; text-align: center; padding: 14px 0; margin: 0; }
.kcol.can { border-color: var(--blue); background: #e3ebff; } .kcol.can.over { box-shadow: inset 0 0 0 2px var(--blue); }
.kcol.no { opacity: .45; }
#moveDlg p { margin: 0 0 6px; }

.ownsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); font-weight: 600; } .ownsel select { width: auto; padding: 3px 8px; font-weight: 600; color: var(--ink); }

.wrap.wide { max-width: none; }

.kown { flex-wrap: nowrap; } .kown .s { flex: 1; min-width: 0; } .kown select { max-width: 112px; font-weight: 600; color: var(--ink); }
table.gtab td { min-width: 128px; vertical-align: top; } table.gtab td:first-child { min-width: 150px; white-space: nowrap; }
table.gtab tr.sel { background: var(--hover); box-shadow: inset 3px 0 0 var(--blue); } table.gtab .s { margin-top: 3px; white-space: normal; }

select.need, .ownsel.need select { border-color: var(--bad); color: var(--bad); font-weight: 700; }
.own { font-size: 11px; font-weight: 700; color: var(--navy); background: #e8efff; border-radius: 4px; padding: 0 6px; line-height: 18px; white-space: nowrap; }
td select.kmove { max-width: 150px; font-size: 12px; padding: 3px 6px; color: var(--ink); } #bulkOwner { max-width: 190px; }
.menuset { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.block a { color: inherit; }

.routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; }
.kown .s { font-weight: 600; }

.own.un { background: var(--line2); color: var(--mute); font-weight: 600; }

/* 캘린더 날짜 선택 · 데모 날짜 */
button.day { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; } button.day:hover { border-color: var(--blue); }
.cal .day.sel { background: var(--hover); border-color: var(--blue); }
.cal .day u { text-decoration: none; font-size: 10.5px; font-weight: 700; color: var(--blue); background: #e8efff; border-radius: 3px; padding: 0 4px; margin-top: 2px; align-self: flex-start; white-space: nowrap; }
.cal .day u.late { color: var(--bad); background: var(--bad-bg); }
.dayp { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .dayp h3 { font-size: 13px; margin-bottom: 8px; }
.demobar input[type=date] { width: auto; padding: 3px 8px; font-size: 12px; }

/* 고객 검색 */
.gsearch { width: 220px; max-width: 100%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; border-radius: var(--r); padding: 5px 10px; font: inherit; font-size: 12px; }
.gsearch::placeholder { color: var(--on-black-sub); } .gsearch:focus { outline: none; background: rgba(255, 255, 255, .16); border-color: var(--blue-l); box-shadow: none; }
@media (max-width: 760px) { .gsearch { order: 4; width: 100%; } }
.acct .trow > span:last-child { display: inline-flex; gap: 6px; align-items: center; }

/* 조회 기간: 버튼 한 번 + 날짜 범위 */
.period { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.prange { display: inline-flex; gap: 6px; align-items: center; color: var(--sub); } .prange input { width: auto; padding: 5px 8px; }

/* 빠른 답장 */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.qk { border: 1px solid var(--line2); border-radius: var(--r); padding: 10px; background: var(--panel2); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qk .btn { justify-content: center; font-weight: 600; }