/* 신고대리 — 스타일 (dashboard.html 에서 분리, 2026-08-22) */
.list-stage-bar { display:flex; gap:6px; flex-wrap:wrap; padding:12px 0 10px; }
.list-stage-btn {
padding:4px 12px; border-radius:20px; border:none; cursor:pointer;
font-size:12px; font-weight:600; transition:opacity .15s; background:#e5e7eb; color:#374151;
}
.list-stage-btn:hover { opacity:.8; }
.list-stage-btn.active { box-shadow:0 0 0 2px #1a3a5c; }
.list-stage-btn.s-send { background:#e5e7eb; color:#374151; }
.list-stage-btn.s-sent { background:#dbeafe; color:#1d4ed8; }
.list-stage-btn.s-intake { background:#fef3c7; color:#92400e; }
.list-stage-btn.s-filing { background:#ede9fe; color:#5b21b6; }
.list-stage-btn.s-invoice { background:#fce7f3; color:#9d174d; }
.list-stage-btn.s-paid { background:#ccfbf1; color:#0f766e; }
.list-stage-btn.s-done { background:#dcfce7; color:#166534; }
.list-stage-btn.s-declined{ background:#fee2e2; color:#991b1b; }
.list-badge {
display:inline-block; padding:2px 8px; border-radius:10px;
font-size:11px; font-weight:700; white-space:nowrap;
}
/* SP16: 기획서 색상 토큰 기준 */
.lb-send { background:#e5e7eb; color:#374151; }
.lb-sent { background:#dbeafe; color:#1d4ed8; }
.lb-intake { background:#fef3c7; color:#92400e; }
.lb-filing { background:#ede9fe; color:#5b21b6; }
.lb-invoice { background:#fce7f3; color:#9d174d; }
.lb-paid { background:#ccfbf1; color:#0f766e; }
.lb-done { background:#dcfce7; color:#166534; }
.lb-declined{ background:#fee2e2; color:#991b1b; }
/* 행 색상 */
.data-row.row-overdue td { background:#fff5f5 !important; }
.data-row.row-overdue td:first-child { border-left:3px solid #fc8181 !important; }
.data-row.row-overdue:hover td { background:#fed7d7 !important; }
.data-row.row-declined td { background:#f9fafb !important; opacity:.55; }
.data-row.row-declined:hover td { opacity:.75; }
/* 컬럼 그룹 헤더 */
.col-grp th { padding:3px 8px; font-size:10px; font-weight:700; letter-spacing:.4px; text-align:center; }
.col-grp .grp-base { background:#f8fafc; color:#94a3b8; border-top:2px solid #e2e8f0; }
.col-grp .grp-progress { background:#eff6ff; color:#3b82f6; border-top:2px solid #93c5fd; }
.col-grp .grp-consult { background:#f0fdf4; color:#16a34a; border-top:2px solid #86efac; }
.col-grp .grp-fee { background:#fffbeb; color:#d97706; border-top:2px solid #fcd34d; }
.col-grp .grp-action { background:#faf5ff; color:#7c3aed; border-top:2px solid #c4b5fd; }
/* 진행바 */
.step-bar { display:flex; align-items:center; gap:2px; margin-top:4px; }
.step-dot {
width:16px; height:16px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
font-size:7px; font-weight:800;
}
.step-dot.done { background:#3b82f6; color:#fff; }
.step-dot.current { background:#f59e0b; color:#fff; box-shadow:0 0 0 2px #fde68a; }
.step-dot.pending { background:#e9ecef; color:#bbb; }
.step-dot.fail { background:#fee2e2; color:#dc2626; border:1px solid #fca5a5; }
.step-line { width:6px; height:2px; background:#e9ecef; flex-shrink:0; }
.step-line.done { background:#3b82f6; }
/* 메모 아이콘 */
.memo-tag {
display:inline-block; background:#fffbeb; border:1px solid #fde68a;
border-radius:3px; padding:1px 5px; font-size:10px; color:#92400e;
max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
cursor:pointer; vertical-align:middle;
}
/* 접수증/납부서 붙여넣기 존 */
.paste-zone { display:flex; gap:4px; align-items:center; }
.paste-cell {
flex:1; border:1.5px dashed #cbd5e1; border-radius:6px;
padding:3px 4px; text-align:center; cursor:pointer;
min-height:34px; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:1px;
transition:background .12s, border-color .12s;
}
.paste-cell:hover { background:#f8fafc; }
.paste-cell:focus { outline:none; border-color:#94a3b8; box-shadow:0 0 0 2px #e2e8f0; }
.paste-cell .pc-label { font-size:9px; font-weight:700; color:#94a3b8; line-height:1.3; }
.paste-cell.uploaded { border-style:solid; border-color:#86efac; background:#f0fdf4; }
.paste-cell.uploaded .pc-label { color:#166534; }
/* SP03: 알림 위젯 */
.alert-widget {
display:flex; gap:8px; flex-wrap:wrap;
padding:10px 0 14px;
}
/* 제출내용 tooltip */
.sub-tooltip {
position: fixed; z-index: 9999;
background: #fff; border: 1px solid #e2e8f0;
border-radius: 10px; padding: 12px 14px;
box-shadow: 0 4px 20px rgba(0,0,0,.15);
font-size: 12px; min-width: 200px; max-width: 280px;
pointer-events: none; display: none; line-height: 1.8;
}
.sub-tooltip-title { font-size: 10px; font-weight: 700; color: #94a3b8; margin-bottom: 4px; }
.sub-tooltip-loading { color: #94a3b8; font-size: 11px; }
.prog-hover { cursor: default; text-decoration: underline dotted #94a3b8; }
.alert-chip {
padding:5px 12px; border-radius:20px; border:none; cursor:pointer;
font-size:12px; font-weight:700; transition:opacity .15s;
background:#fee2e2; color:#991b1b;
}
.alert-chip:hover { opacity:.8; }
.alert-chip.zero { background:#f1f5f9; color:#94a3b8; cursor:default; }
/* SP04: 사이드 패널 */
.sp-overlay { display:none; }
.side-panel {
position:fixed; top:0; right:-500px; width:460px; max-width:95vw;
height:100vh; background:#fff; overflow-y:auto;
box-shadow:-4px 0 24px rgba(0,0,0,.12);
transition:right .25s ease; z-index:201;
}
.side-panel.open { right:0; }
.sp-header {
display:flex; justify-content:space-between; align-items:flex-start;
padding:16px 20px; background:#0f1d45; color:#fff; position:sticky; top:0; z-index:1;
}
.sp-name { font-size:17px; font-weight:800; }
.sp-biz { font-size:13px; opacity:.75; margin-top:2px; }
.sp-close {
background:none; border:none; color:#fff; font-size:20px;
cursor:pointer; padding:4px 8px; line-height:1;
}
.sp-section {
padding:14px 20px; border-bottom:1px solid #f1f5f9;
}
.sp-section-title {
font-size:11px; font-weight:700; color:#64748b;
text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px;
}
.sp-row { display:flex; gap:8px; align-items:center; font-size:13px; margin-bottom:6px; }
.sp-label { color:#64748b; min-width:64px; font-size:12px; }
.sp-btn {
padding:6px 12px; border-radius:6px; border:none; cursor:pointer;
font-size:12px; font-weight:600; text-decoration:none; display:inline-flex;
align-items:center; gap:4px; transition:opacity .15s;
}
.sp-btn:hover { opacity:.8; }
.sp-btn-blue { background:#dbeafe; color:#1d4ed8; }
.sp-btn-gray { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.sp-btn-gold { background:#fef3c7; color:#92400e; }
.sp-btn-red { background:#fee2e2; color:#991b1b; }
.sp-btn-green { background:#dcfce7; color:#166534; }
.sp-input {
width:100%; padding:7px 10px; border:1px solid #e2e8f0; border-radius:7px;
font-size:13px; font-family:inherit;
}
.sp-textarea {
width:100%; padding:8px 10px; border:1px solid #e2e8f0; border-radius:7px;
font-size:13px; font-family:inherit; resize:vertical; min-height:72px; line-height:1.5;
}
.sp-stage-select {
width:100%; padding:8px 10px; border:1px solid #e2e8f0; border-radius:7px;
font-size:13px; font-family:inherit; background:#fff; cursor:pointer;
}
#listTable tbody tr.data-row:hover { background:#f8fafc; cursor:pointer; }
#listTable tbody tr.data-row.expanded { background:#f0f7ff; }
#listTable tbody tr.expand-row td { padding:0; border-bottom:2px solid #bfdbfe; }
.expand-panel {
display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
padding:14px 16px; background:#f0f7ff;
}
.expand-section h5 {
font-size:11px; font-weight:700; color:#475569;
text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;
}
.expand-section .ev { font-size:13px; color:#1e293b; word-break:break-all; }
.expand-section .ev.mono { font-family:monospace; font-size:12px; color:#1d4ed8; }
.list-btn {
padding:4px 10px; border-radius:5px; border:none; cursor:pointer;
font-size:11px; font-weight:600; transition:opacity .12s;
}
.list-btn:hover { opacity:.8; }
.lb-act-kakao { background:#fef3c7; color:#92400e; }
.lb-act-green { background:#dcfce7; color:#166534; }
.lb-act-green-strong { background:#16a34a; color:#fff; font-weight:800; box-shadow:0 0 0 2px #15803d; }
.lb-act-blue { background:#dbeafe; color:#1d4ed8; }
.lb-act-purple { background:#ede9fe; color:#6d28d9; font-weight:800; box-shadow:0 0 0 2px #7c3aed; }
.lb-act-pink { background:#fce7f3; color:#be185d; font-weight:800; box-shadow:0 0 0 2px #db2777; }
.lb-act-gray { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.lb-act-red { background:#fee2e2; color:#991b1b; }
.lb-act-slate { background:#0f1d45; color:#fff; font-weight:800; }
.list-toast {
position:fixed; bottom:24px; right:24px; background:#1e293b; color:#fff;
padding:10px 18px; border-radius:8px; font-size:13px; z-index:9999;
opacity:0; transition:opacity .25s; pointer-events:none;
}
.list-toast.show { opacity:1; }
/* Skeleton UI */
@keyframes shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.skel {
display: inline-block;
border-radius: 4px;
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 600px 100%;
animation: shimmer 1.4s infinite linear;
}
.skel-row td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
/* D11: 메시지 미리보기 모달 */
.msg-modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10000; align-items:center; justify-content:center; }
.msg-modal-bg.show { display:flex; }
.msg-modal { background:#fff; border-radius:12px; padding:20px; width:520px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.msg-modal h4 { font-size:14px; font-weight:700; color:#0f1d45; margin-bottom:10px; }
.msg-modal textarea { width:100%; height:220px; border:1px solid #e2e8f0; border-radius:8px; padding:10px; font-size:13px; font-family:inherit; resize:vertical; line-height:1.6; }
.msg-modal-btns { display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }
/* ── 창이 좁으면 열을 접는다 (2026-08-23) ─────────────────────────
직원들 모니터가 사무실마다 다르다. 사람마다 설정하게 하지 않고
«창 너비를 보고 저절로» 접는다. 접힌 값은 행을 누르면 사이드패널에 다 있다.
왜 필요한가(실측): 표가 좁아지면 글자가 줄바꿈되면서 행 높이가
75px → 208px 로 세 배가 됐다. 한 화면에 8행 보이던 것이 3행이 됐다.
열을 접으면 남은 열이 넉넉해져 줄바꿈이 안 생긴다.
접는 순서 — 급하지 않은 것부터
1단계 전기자료 · 담당 (둘 다 사이드패널에 있다)
2단계 연락처 · 진행바 (연락처는 사이드패널, 진행바는 진행상황으로 갈음)
★안내자는 «접지 않는다» — 사이드패널에 없고, 안내자별 정렬·필터에 쓰는 열이다.
접으면 그 기능을 못 쓴다.
끝까지 남는 것: 번호 · 고객 · 안내자 · 현재단계 · 진행상황 · 메모 · 수수료 · 액션 · 접수증/납부서
──────────────────────────────────────────────────────────── */
.c-cust, .c-memo, .c-progress { overflow:hidden; text-overflow:ellipsis; }
.c-num, .c-advisor, .c-prev, .c-phone, .c-stage, .c-fee, .c-staff { white-space:nowrap; }
@media (max-width: 1700px) {
/* 전기자료·담당 — 둘 다 사이드패널에 그대로 있다 */
.c-prev, .c-staff { display:none; }
}
@media (max-width: 1450px) {
/* 연락처(사이드패널에 있음) · 진행바(현재단계·진행상황으로 갈음) */
.c-phone, .c-stepbar { display:none; }
}
/* ── 아주 좁은 화면(노트북 1280~1366) 촘촘하게 (2026-08-23) ──────
실측: 1280px 에서 행 높이가 208px 까지 뛴다. 원인은 열이 모자라서가 아니라
«액션·접수증/납부서 칸의 단추가 세로로 쌓여서»다. 단추를 작게 만들면
한 줄에 들어가 행이 낮아진다. 정보를 더 숨기는 것보다 이쪽이 낫다.
──────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
.c-action .list-btn, .c-docs .list-btn,
.c-action a, .c-docs a, .c-action button, .c-docs button {
font-size:10px; padding:2px 5px; gap:2px;
}
.c-action, .c-docs { padding-left:4px !important; padding-right:4px !important; }
.data-row td { padding-top:5px !important; padding-bottom:5px !important; }
}