@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
--font-family: 'Pretendard', 'Noto Sans CJK KR', 'Noto Sans KR', system-ui, sans-serif;
--bg-page: #f0eee9;
--bg-surface: #ffffff;
--bg-subtle: oklch(97.5% 0.003 90);
--bg-input: oklch(98% 0.002 90);
--border-default: oklch(91% 0.005 90);
--border-strong: oklch(88% 0.006 90);
--border-dashed: oklch(82% 0.008 90);
--text-primary: oklch(20% 0.02 250);
--text-secondary: oklch(45% 0.02 90);
--text-tertiary: oklch(60% 0.01 90);
--accent-navy: oklch(45% 0.09 250);
--sidebar-navy: oklch(20% 0.02 250);
--sidebar-navy-active: oklch(30% 0.05 250);
--status-wait-bg: oklch(96% 0.004 90);
--status-wait-text: oklch(42% 0.01 90);
--pill-neutral-bg: oklch(90% 0.004 90);
--pill-neutral-text: oklch(32% 0.008 90);
--status-assigned-bg: #ffffff;
--status-assigned-text: oklch(28% 0.02 250);
--status-assigned-border: oklch(80% 0.01 250);
--status-working-bg: oklch(93% 0.05 220);
--status-working-text: oklch(38% 0.09 220);
--status-done-bg: oklch(38% 0.015 250);
--status-done-text: #ffffff;
--status-cancelled-bg: oklch(16% 0.01 250);
--status-cancelled-text: #ffffff;
--pill-paid-bg: oklch(94% 0.06 150);
--pill-paid-text: oklch(36% 0.09 150);
--danger: oklch(50% 0.15 25);
--radius-lg: 14px;
--radius-md: 10px;
--radius-sm: 7px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-family);
font-size: 15.3px;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }
/* ---------- Sidebar ---------- */
.sidebar {
width: 232px; flex-shrink: 0; background: var(--sidebar-navy);
display: flex; flex-direction: column; padding: 22px 14px;
}
.sidebar-brand {
display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700;
font-size: 16.3px; letter-spacing: -0.01em; padding: 6px 10px 22px; text-decoration: none;
}
.sidebar-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-navy); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sidebar-mark svg { width: 13px; height: 13px; }
.sidebar-account { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 0 4px; border-top: 1px solid oklch(30% 0.02 250); border-bottom: 1px solid oklch(30% 0.02 250); }
.sidebar-account-info { flex: 1; min-width: 0; overflow: hidden; }
.sidebar-account-info .sidebar-user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-bell { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; background: oklch(28% 0.02 250); color: oklch(80% 0.01 250); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background .15s; }
.sidebar-bell:hover { background: oklch(34% 0.02 250); color: #fff; }
.sidebar-logout-inline { display: block; text-align: right; color: oklch(60% 0.01 250); font-size: 12.8px; text-decoration: none; padding: 6px 10px 14px; }
.sidebar-logout-inline:hover { color: oklch(78% 0.01 250); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-link {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
color: oklch(78% 0.01 250); text-decoration: none; font-size: 14.8px; font-weight: 500;
}
.sidebar-link .dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; opacity: .7; }
.sidebar-link.active { background: var(--sidebar-navy-active); color: #fff; font-weight: 600; }
.sidebar-link.disabled { color: oklch(45% 0.01 250); cursor: default; }
.sidebar-link.disabled .tag { margin-left: auto; font-size: 11.3px; background: oklch(30% 0.02 250); color: oklch(65% 0.01 250); padding: 2px 6px; border-radius: 999px; }
.sidebar-foot { border-top: 1px solid oklch(30% 0.02 250); padding-top: 14px; margin-top: 10px; display: flex; align-items: center; gap: 10px; padding-left: 10px; }
.sidebar-avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--accent-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13.8px; font-weight: 700; flex-shrink: 0; }
.sidebar-user-name { color: #fff; font-size: 14.3px; font-weight: 600; }
.sidebar-user-role { color: oklch(65% 0.01 250); font-size: 12.8px; }
.sidebar-logout { margin-left: auto; color: oklch(60% 0.01 250); font-size: 12.8px; text-decoration: none; }
/* ---------- Mobile top bar (hidden on desktop) ---------- */
.mobile-topbar { display: none; }
.mobile-nav { display: none; }
/* ---------- Main content ---------- */
.main { flex: 1; min-width: 0; }
.content { max-width: 1200px; margin: 0 auto; padding: 34px 40px 80px; }
.breadcrumb { color: var(--text-tertiary); font-size: 13.8px; font-weight: 500; margin-bottom: 6px; }
.breadcrumb b { color: var(--text-secondary); }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 22.3px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--text-primary); }
.page-sub { color: var(--text-secondary); font-size: 14.3px; margin-top: 5px; }
h2 { font-size: 15.8px; font-weight: 700; margin: 0 0 15px; color: var(--text-primary); }
h3 { font-size: 13.8px; font-weight: 700; color: var(--text-secondary); margin: 18px 0 8px; }
.muted { color: var(--text-secondary); }
.small { font-size: 13.8px; }
.center { text-align: center; }
/* ---------- Stat cards ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat-row.stat-row-3 { grid-template-columns: repeat(3, 1fr); }
.stat-row.stat-row-5 { grid-template-columns: repeat(5, 1fr); }
.stat-row.stat-row-2-1 { grid-template-columns: 2fr 1fr; }
.stat-row.mt { margin-top: 14px; }
.stat-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 18px 20px; }
.stat-label { display: flex; align-items: center; gap: 6px; font-size: 13.8px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.stat-label .dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.stat-value { font-size: 27.3px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.stat-value.small-value { font-size: 20.3px; }
/* ---------- Mini bar chart (dashboard 월별 처리 건수) ---------- */
.bar-chart { display: flex; align-items: flex-end; gap: 14px; height: 100px; padding-top: 6px; }
.bar-chart-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.bar-chart-bar { width: 100%; max-width: 34px; min-height: 3px; background: var(--accent-navy); border-radius: 4px 4px 0 0; }
.bar-chart-value { font-size: 12.8px; font-weight: 700; color: var(--text-primary); margin-top: 6px; }
.bar-chart-label { font-size: 12.3px; color: var(--text-tertiary); margin-top: 2px; }
/* ---------- Card ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px 26px; }
.form-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px 26px; }
/* ---------- Flash ---------- */
.flash { padding: 11px 15px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14.3px; font-weight: 500; }
.flash-success { background: var(--status-assigned-bg); color: var(--status-assigned-text); }
.flash-error { background: oklch(93% 0.04 25); color: var(--danger); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-md);
background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text-primary);
font-size: 14.3px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit;
box-sizing: border-box; line-height: 1.4; -webkit-appearance: none; appearance: none; vertical-align: middle;
}
.btn:hover { background: var(--bg-subtle); }
.btn-primary { background: var(--accent-navy); color: #fff; border-color: var(--accent-navy); }
.btn-primary:hover { background: var(--accent-navy); opacity: .92; }
.btn-dark { background: var(--sidebar-navy); color: #fff; border-color: var(--sidebar-navy); }
.btn-dark:hover { background: var(--sidebar-navy); opacity: .92; }
.btn-sm { padding: 7px 13px; font-size: 13.8px; }
.btn.btn-no-hover:hover { background: var(--bg-surface); opacity: 1; }
.btn-primary.btn-no-hover:hover { background: var(--accent-navy); opacity: 1; }
.btn-block { width: 100%; justify-content: center; padding: 11px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link-btn { color: var(--accent-navy); background: none; border: none; font-size: 13.8px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: none; font-family: inherit; }
.link-btn.danger { color: var(--danger); }
.back-link { color: var(--text-secondary); text-decoration: none; font-size: 13.8px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; }
/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border-default); margin-bottom: 18px; }
.tab { padding: 0 0 11px; text-decoration: none; color: var(--text-tertiary); font-size: 14.8px; font-weight: 600; border-bottom: 2px solid transparent; }
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent-navy); }
/* ---------- Toolbar ---------- */
.toolbar { display: flex; gap: 9px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type=text], .toolbar input[type=date] { width: auto; padding: 9px 13px; border: 1px solid var(--border-default); border-radius: var(--radius-md); min-width: 150px; font-size: 14.3px; background: var(--bg-input); color: var(--text-primary); font-family: inherit; }
.toolbar input[type=text] { min-width: 240px; }
.toolbar select { width: auto; padding: 9px 13px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 14.3px; background: var(--bg-input); color: var(--text-primary); font-family: inherit; }
.toolbar label { display: inline; margin: 0; font-weight: 600; color: var(--text-primary); }
.toolbar label.muted { font-size: 13.8px; font-weight: 500; }
.toolbar .btn { background: var(--bg-input); border-color: var(--border-default); color: var(--text-primary); padding: 9px 13px; font-size: 14.3px; }
.toolbar .btn:hover { background: var(--bg-surface); border-color: var(--border-strong); }
/* ---------- Table ---------- */
.table-wrap { background: var(--bg-surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-default); overflow-x: auto; }
table.job-table { width: 100%; border-collapse: collapse; }
.job-table thead th { background: var(--bg-subtle); color: var(--text-secondary); text-align: left; padding: 12px 16px; font-size: 12.8px; font-weight: 700; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.job-table td { padding: 13px 16px; border-top: 1px solid var(--border-default); font-size: 14.3px; color: var(--text-primary); white-space: nowrap; }
.job-table tbody tr:hover { background: var(--bg-subtle); }
.job-table tbody tr.row-mine { background: oklch(97% 0.02 250 / 0.5); }
.job-table tbody tr td:first-child { font-weight: 600; }
.job-table td a { color: inherit; font-weight: inherit; text-decoration: underline; }
/* ---------- 문장 속 링크 (2026-08-18, A-3 ③안 승인) ----------
안내문 속 링크가 브라우저 기본값(파란 밑줄)으로 떠서 문장이 끊겨 보이던 문제.
표 안 링크(.job-table td a)·breadcrumb·버튼에는 영향을 주지 않도록 전용 클래스만 쓴다. */
.inline-link { color: inherit; font-weight: 700; text-decoration: underline dotted;
text-decoration-color: var(--text-tertiary); text-underline-offset: 3px; }
.inline-link:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
/* ---------- 「자동 / 직접 입력」 표시 (2026-08-18, A-2 ③안 승인) ----------
어느 칸이 미리 채워지고 어느 칸이 비어 있는지를 칸마다 알려준다.
예전 안내문("자동으로 채워진 값을 확인하세요")은 사실과 달랐다 — 작업규칙 34-1. */
.fill-auto, .fill-manual { font-size: 12.2px; font-weight: 600; padding: 1px 7px; border-radius: 999px; vertical-align: 2px; }
.fill-auto { color: var(--text-tertiary); background: var(--bg-subtle); }
.fill-manual { color: #c2410c; background: #fff3ea; }
/* ---------- 팝업 공통 (2026-08-18) ----------
참석자 매핑표 팝업이 인라인 style로 쓰던 값을 클래스로 뽑아 양식 편집본 팝업과 공유한다. */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 16px; }
/* ---------- 첨부 파일 선택 목록 (2026-08-18, 0815 1-1·1-2) ----------
브라우저 기본 위젯은 여러 개를 고르면 "파일 3개"라고만 표시하고 전체 목록은
마우스를 올렸을 때 뜨는 툴팁에만 나온다. 고른 파일을 직접 그려주고 개별 취소를 붙인다. */
/* ---------- 인터뷰 시작 전 무의미 구간 (2026-08-18, 0815 3-2) ----------
원본 길이를 감추지 않는다 — 감추면 "왜 시간이 줄었지?"를 알 수 없다. */
.dur-original { text-decoration: line-through; color: var(--text-tertiary); }
.content-start { margin: 6px 0 10px; font-size: 13.3px; }
.content-start > summary { cursor: pointer; color: var(--text-secondary); width: fit-content;
padding: 3px 10px; border: 1px dashed var(--border-default);
border-radius: var(--radius-sm); }
.content-start > summary:hover { background: var(--bg-subtle); }
.content-start-body { margin-top: 8px; padding: 10px 12px; background: var(--bg-subtle);
border-radius: var(--radius-sm); }
.content-start-body form, .content-start-on form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.content-start-body input[type=text], .content-start-on input[type=text] { width: 110px; }
.content-start-on { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 7px 12px; background: #fff3ea; border: 1px solid #f0b088;
border-radius: var(--radius-sm); }
.content-start-msg { color: #9a3412; }
.picked-list { margin-top: 8px; display: none; }
/* 파일 선택 위젯 넘침 수정 (2026-08-19) ③ — 이름이 두 줄 이상이 되므로 위쪽 정렬로 바꾼다 */
.picked-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; margin-top: 4px; min-width: 0;
background: var(--bg-surface); border: 1px solid var(--border-default);
border-radius: var(--radius-sm); font-size: 13.3px; }
/* 파일 선택 위젯 넘침 수정 (2026-08-19) ④ — `…`으로 자르지 않고 끝까지 보이게 한다.
overflow-wrap: anywhere 가 필요한 이유: 한글 파일명에는 공백 없이 이어지는 구간
(예: 지역사례조사_경북경주시(0729)_G1,G2_스크립트)이 흔해 단어 단위 줄바꿈만으로는
여전히 한 줄을 넘겨 상자를 밀어낸다. */
.picked-name { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere;
word-break: break-word; text-align: left; line-height: 1.45;
color: var(--text-primary); }
.picked-size { flex: 0 0 auto; color: var(--text-tertiary); font-size: 12.4px; }
.picked-remove { flex: 0 0 auto; border: 1px solid var(--border-default); background: var(--bg-subtle);
color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer;
padding: 2px 9px; font-size: 12.4px; font-family: inherit; }
.picked-remove:hover { background: #fff3ea; border-color: #f0b088; color: #c2410c; }
/* ---------- 파일 선택 버튼 (2026-08-18, ⓐ안 승인) ----------
입력칸을 비워 관리하므로 브라우저 기본 표시("선택된 파일 없음")가 사실과 어긋난다.
기본 위젯을 화면 밖으로 밀고 우리 버튼을 보여준다. display:none을 쓰지 않는 이유는
그렇게 하면 키보드 조작·자동화에서 입력칸에 닿지 못하는 환경이 있기 때문이다. */
.file-input-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.file-pick { display: inline-block; margin-top: 10px; padding: 7px 18px; cursor: pointer;
border: 1px solid var(--border-default); border-radius: var(--radius-sm);
background: var(--bg-surface); color: var(--text-primary);
font-size: 13.8px; font-weight: 600; }
.file-pick:hover { background: var(--bg-subtle); }
.file-pick:focus-within { outline: 2px solid var(--text-secondary); outline-offset: 2px; }
/* 고른 파일명 (2026-08-18) — 기본 위젯을 감췄으므로 이걸로 대신 알려준다 */
/* 파일 선택 위젯 넘침 수정 (2026-08-19) ⑤ — 320px에서 자르던 것을 줄바꿈으로 바꾼다 */
.picked-one { display: inline-block; margin-left: 8px; max-width: 100%; vertical-align: middle;
white-space: normal; overflow-wrap: anywhere; word-break: break-word;
text-align: left; line-height: 1.45;
font-size: 13.3px; color: var(--text-secondary); }
/* 2026-08-22 (4차): PAGE-HEADER 주 동작 버튼 위치 — 오른쪽 끝은 멀다(C님 확정).
제목 블록 바로 뒤 90px 지점으로 당긴다. 자식이 정확히 둘인 머리글에만 적용. */
.page-header > :nth-child(2):last-child { margin-right: auto; margin-left: 90px; }
/* 게시판은 예외 — 머리글이 이미 2/3 폭이라 멀지 않고, 글 상자와의 우측 정렬이 규칙이다 */
.page-header.board-narrow > :nth-child(2):last-child { margin-right: 0; margin-left: auto; }
/* 작업시간 바도 같은 규칙 — 요약값이 남는 폭을 먹지 않게 하고 버튼을 90px 뒤에 둔다 */
.wt-bar .wt-cells { flex: 0 1 auto; }
.wt-bar .wt-actions { margin-left: 90px; }
.modal-panel { max-width: 760px; width: 100%; max-height: 88vh; overflow-y: auto; overflow-x: hidden;
margin: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
.job-table tbody tr { cursor: pointer; }
/* ---------- Status badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12.8px; font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.badge-PENDING { background: #ffe3ec; color: #a3134f; }
.badge-urgent { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.8px; font-weight: 800; white-space: nowrap; background: #d92626; color: #fff; margin-right: 6px; }
.badge-WAITING { background: var(--status-wait-bg); color: var(--status-wait-text); }
.badge-ASSIGNED { background: var(--status-assigned-bg); color: var(--status-assigned-text); border: 1px solid var(--status-assigned-border); }
.badge-IN_PROGRESS { background: var(--status-working-bg); color: var(--status-working-text); }
.badge-COMPLETED { background: var(--status-done-bg); color: var(--status-done-text); }
.badge-SETTLED { background: #1a1a1a; color: #ffffff; }
.badge-REVISION { background: #7a5c00; color: #fff7d6; }
.badge-RETRAINING { background: #7a1a1a; color: #ffe5e5; }
.badge-CANCELLED { background: var(--status-cancelled-bg); color: var(--status-cancelled-text); }
/* 게시판 처리상태 뱃지 (WAITING/IN_PROGRESS/COMPLETED와 같은 색상 체계 재사용) */
.badge-RECEIVED { background: var(--status-wait-bg); color: var(--status-wait-text); }
.badge-REVIEWING { background: var(--status-working-bg); color: var(--status-working-text); }
.badge-ANSWERED { background: var(--status-done-bg); color: var(--status-done-text); }
/* ---------- 게시판 아코디언 ---------- */
.board-post { border-bottom: 1px solid var(--border-default); }
.board-post:last-child { border-bottom: none; }
.board-post-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.board-post-head:hover { background: var(--bg-subtle); }
.board-post-title { flex: 1; font-weight: 600; }
.board-post-meta { font-size: 13.8px; color: var(--text-tertiary); white-space: nowrap; }
.board-post-body { display: none; padding: 4px 20px 20px 20px; }
.board-post.open .board-post-body { display: block; }
.board-post.open .board-post-head { background: var(--bg-subtle); }
.board-comment { background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 10px; }
.board-comment-meta { font-size: 13.3px; color: var(--text-tertiary); margin-bottom: 4px; }
/* ---------- 목록 아코디언 (스크립터 관리 등 — 게시판과 같은 펼침 동작을 다른 목록에도 재사용) ---------- */
.acc-item { border-bottom: 1px solid var(--border-default); }
.acc-item:last-child { border-bottom: none; }
.acc-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.acc-head:hover { background: var(--bg-subtle); }
.acc-title { flex: 1; font-weight: 600; }
.acc-meta { font-size: 13.8px; color: var(--text-tertiary); white-space: nowrap; }
.acc-body { display: none; padding: 4px 20px 20px 20px; }
.acc-item.open .acc-body { display: block; }
.acc-item.open .acc-head { background: var(--bg-subtle); }
/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-page); padding: 20px; }
.auth-box { width: 400px; max-width: 100%; background: var(--bg-surface); padding: 40px 36px; border-radius: 18px; border: 1px solid var(--border-default); }
.auth-box h1 { font-size: 19.3px; text-align: center; margin-bottom: 6px; }
.auth-sub { color: var(--text-secondary); font-size: 13.8px; text-align: center; margin-bottom: 26px; line-height: 1.6; }
.ms-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); font-size: 14.8px; font-weight: 600; font-family: inherit; cursor: pointer; }
.ms-icon { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; width: 15px; height: 15px; }
.ms-icon span:nth-child(1) { background: #F25022; } .ms-icon span:nth-child(2) { background: #7FBA00; }
.ms-icon span:nth-child(3) { background: #00A4EF; } .ms-icon span:nth-child(4) { background: #FFB900; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-tertiary); font-size: 13.3px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.auth-note { margin-top: 20px; padding: 11px 14px; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12.8px; color: var(--text-secondary); line-height: 1.6; }
form label { display: block; margin: 14px 0 6px; font-size: 13.3px; font-weight: 600; color: var(--text-secondary); }
form label:first-of-type { margin-top: 0; }
form input[type=text], form input[type=email], form input[type=password], form input[type=date], form input[type=week], form input[type=number], form input[type=datetime-local], form input[type=time], form select, form textarea {
width: 100%; padding: 10px 13px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
font-size: 14.3px; font-family: inherit; background: var(--bg-input); color: var(--text-primary);
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--accent-navy); }
form input[type=file] { font-size: 13.8px; }
/* ---------- Segmented control (radio-based) ---------- */
.segmented { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 3px; background: var(--bg-input); }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label { display: inline-block; margin: 0; border: none; padding: 7px 18px; border-radius: 7px; font-size: 14.3px; font-weight: 600; color: var(--text-tertiary); cursor: pointer; }
.segmented input:checked + label { background: var(--sidebar-navy); color: #fff; }
/* ---------- Toggle switch (checkbox-based) ---------- */
.toggle-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.toggle-row input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { width: 34px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; flex-shrink: 0; cursor: pointer; transition: background .15s; }
.toggle-track::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 999px; background: #fff; top: 2px; left: 2px; transition: left .15s; }
.toggle-row input:checked + .toggle-track { background: var(--accent-navy); }
.toggle-row input:checked + .toggle-track::after { left: 16px; }
.toggle-text { font-size: 13.8px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.checkbox-label { display: flex; align-items: center; gap: 7px; margin-top: 28px; font-size: 14.3px; color: var(--text-secondary); }
.checkbox-label input { width: auto; }
/* ---------- Dropzone ---------- */
.hint-highlight { background: oklch(96% 0.06 95); border: 1px solid oklch(89% 0.08 90); border-radius: var(--radius-sm); padding: 8px 12px; }
/* 파일 선택 위젯 넘침 수정 (2026-08-19) ② — 상자는 제 칸 안에서만. min-width:0이 없으면 flex/grid 안에서 내용만큼 커진다 */
.dropzone { border: 1.5px dashed var(--border-dashed); border-radius: var(--radius-md); background: var(--bg-input); padding: 22px; text-align: center; min-width: 0; }
.dropzone-col { min-width: 0; }
.dropzone-col { display: flex; flex-direction: column; }
.dropzone-col .dropzone { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dropzone-fixed { min-height: 92px; }
.dropzone-text { font-size: 14.3px; color: var(--text-secondary); }
.dropzone input[type=file] { margin-top: 10px; }
/* ---------- Upload progress ---------- */
.upload-progress { display: none; margin-top: 16px; padding: 14px 16px; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.upload-progress.active { display: block; }
.upload-progress-label { display: flex; justify-content: space-between; font-size: 13.8px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.upload-progress-track { width: 100%; height: 8px; background: var(--border-default); border-radius: 999px; overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--accent-navy); border-radius: 999px; transition: width .2s ease; }
.upload-progress-fill.indeterminate { width: 100% !important; background: repeating-linear-gradient(90deg, var(--accent-navy) 0 16px, oklch(60% 0.09 250) 16px 32px); background-size: 200% 100%; animation: upload-indeterminate 1s linear infinite; }
@keyframes upload-indeterminate { from { background-position: 0 0; } to { background-position: -32px 0; } }
.upload-progress-note { font-size: 12.8px; color: var(--text-tertiary); margin-top: 6px; }
/* 파일 선택 위젯 넘침 수정 (2026-08-19) ⑥ — 「이전 의뢰 불러오기」 드롭다운
이 드롭다운만
`fchip_dd` 매크로는 지금 jobs_list.html 안에 있습니다.
여러 화면이 쓰려면 **`_fchip.html`로 빼서 import**하는 편이 낫습니다:
{% from "_fchip.html" import fchip_dd with context %}
그렇게 옮기면 CSS·JS(filters.js)는 그대로 재사용됩니다.
🔴 승인 시안과 지금 구현이 다른 점 — C님 결정이 필요합니다 (README §충돌 참고)
· 선택된 칩: 구현 = `--bg-page`(크림) 채움 / 시안 = 네이비 채움 + 개수 뱃지
· 요약 줄 비었을 때: 구현 = 「적용된 조건 없음」 표시 / 시안 = 줄째로 숨김
아래 두 규칙은 **시안대로 가기로 정해질 때만** 주석을 풀어 쓰십시오.
------------------------------------------------------------ */
/* 2026-08-20 C님 확정: 선택 칩 = 네이비 채움(시안), v6 연한 칩은 폐기 — 주석 해제 */
.fchip.on { background: var(--sidebar-navy); color: #fff; }
.fchip.on .caret { color: #fff; opacity: .6; }
.fchip.on .fchip-cnt { display:inline-flex; align-items:center; justify-content:center;
min-width:18px; height:18px; padding:0 5px; border-radius:999px;
background: rgba(255,255,255,0.22); font-size:11.4px; font-weight:700; }
.applied-row:has(.applied-empty) { display: none; }
/* ------------------------------------------------------------
§3 요약 스트립 — 카드 여러 장을 구분선 하나로 합칩니다 (신규)
대시보드 `.stat-row` 5칸, 정산 3칸, 작업 관리 4칸을 각각 대체합니다.
------------------------------------------------------------ */
.strip { display: flex; background: var(--bg-surface);
border: 1px solid var(--border-default); border-radius: var(--radius-lg);
overflow: hidden; margin-bottom: 16px; }
.strip-cell { flex: 1; min-width: 0; padding: 16px 20px;
border-right: 1px solid var(--bg-subtle); }
.strip-cell:last-child { border-right: none; }
.strip-cell.strip-aside { flex: 0 0 auto; background: oklch(98.5% 0.003 90); }
.strip-cell.on { background: oklch(98.5% 0.008 220);
box-shadow: inset 0 -2px 0 oklch(55% 0.13 220); }
.strip-label { display: flex; align-items: center; gap: 7px; font-size: 13px;
font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.strip-label .dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.strip-value { font-size: 28px; font-weight: 700; letter-spacing: -0.03em;
font-variant-numeric: tabular-nums; }
.strip-value .unit { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.strip-sub { font-size: 12.4px; color: var(--text-tertiary); margin-top: 4px; }
@media (max-width: 1200px) { .strip { flex-wrap: wrap; }
.strip-cell { flex: 1 1 33.33%; border-bottom: 1px solid var(--bg-subtle); } }
@media (max-width: 860px) { .strip-cell { flex: 1 1 50%; } }
@media (max-width: 480px) { .strip-cell { flex: 1 1 100%; } }
/* ------------------------------------------------------------
§4 표 — 숫자 정렬 · 합계 행 · 행 메뉴 (신규)
------------------------------------------------------------ */
.job-table td.num, .job-table th.num { text-align: right;
font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-table td.dim { color: var(--text-secondary); }
.job-table tr.total-row td { font-weight: 700; white-space: nowrap;
background: oklch(98.5% 0.002 90); border-top: 1.5px solid var(--border-strong); }
/* 파괴적 동작을 표 위에 상시 노출하지 않습니다 */
.row-menu { display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: var(--radius-pill);
border: 1px solid var(--border-default); background: var(--bg-surface);
color: var(--text-secondary); font-size: 15px; font-weight: 700;
letter-spacing: 1px; cursor: pointer; font-family: inherit; }
.row-menu:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.row-menu-wrap { position: relative; display: inline-block; }
.row-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
min-width: 170px; background: var(--bg-surface);
border: 1px solid var(--border-strong); border-radius: var(--radius-md);
box-shadow: 0 4px 14px rgba(0,0,0,0.12); overflow: hidden; padding: 4px; }
.row-menu-item { display: block; width: 100%; text-align: left; padding: 8px 11px;
border: none; background: none; border-radius: var(--radius-sm);
font-family: inherit; font-size: 13.4px; color: var(--text-primary);
cursor: pointer; }
.row-menu-item:hover { background: var(--bg-subtle); }
.row-menu-item.danger { color: var(--danger); }
/* 값의 종류(파일유형·작업유형)를 나타내는 옅은 알약 */
.tag-soft { display: inline-flex; padding: 2px 10px; border-radius: var(--radius-pill);
background: var(--bg-subtle); color: var(--text-secondary);
font-size: 12.4px; font-weight: 600; white-space: nowrap; }
/* ------------------------------------------------------------
§5 사이드바 — 브랜드 · 계정 카드 · 그룹 라벨 (신규)
🔴 계정 영역은 **브랜드와 메뉴 사이**입니다. 하단에 두면 보이지 않습니다.
브랜드는 상자를 씌우지 않습니다 — 네이비 배경에 네이비 상자는 떨어져 보이지 않습니다.
------------------------------------------------------------ */
/* 브랜드 락업 — 워드마크 + 액센트 점 + 한글 / 약어 풀이 (상자 없음)
2026-08-21 TIPS 확정(핸드오프 시안 5a) — 값 임의 변경 금지 */
.sb-brand { display: flex; flex-direction: column; gap: 5px;
padding: 8px 13px 18px; text-decoration: none; }
.sb-brand-row { display: flex; align-items: center; gap: 9px; }
.sb-wordmark { color: #fff; font-size: 21px; font-weight: 700;
letter-spacing: 0.13em; line-height: 1.1; }
.sb-brand-dot { width: 6px; height: 6px; border-radius: 999px;
background: oklch(75% 0.13 250); flex-shrink: 0; }
.sb-brand-ko { color: oklch(80% 0.01 250); font-size: 14.2px; font-weight: 600;
letter-spacing: -0.01em; }
.sb-brand-full { color: oklch(64% 0.01 250); font-size: 11.4px; font-weight: 500;
line-height: 1.5; }
.sb-account { background: oklch(25% 0.02 250); border-radius: 10px;
padding: 10px 10px 8px; margin-bottom: 18px; }
.sb-account-top { display: flex; align-items: center; gap: 10px; }
.sb-account-top .sidebar-avatar { width: 34px; height: 34px; font-size: 14px; }
.sb-account-info { flex: 1; min-width: 0; }
.sb-account-name { color: #fff; font-size: 14.2px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-account-role { color: oklch(64% 0.01 250); font-size: 12.2px; }
.sb-bell { position: relative; flex-shrink: 0; width: 32px; height: 32px;
border-radius: 999px; background: oklch(31% 0.02 250);
color: oklch(85% 0.01 250); display: flex; align-items: center;
justify-content: center; text-decoration: none; }
.sb-bell:hover { background: oklch(36% 0.02 250); color: #fff; }
.sb-bell .notif-dot { top: 0; right: 0; width: 9px; height: 9px;
border-width: 2px; border-color: oklch(25% 0.02 250); }
.sb-logout { display: flex; align-items: center; gap: 7px;
margin-top: 9px; padding: 8px 4px 3px;
border-top: 1px solid oklch(31% 0.02 250);
color: oklch(72% 0.01 250); font-size: 13px; font-weight: 600;
text-decoration: none; }
.sb-logout:hover { color: #fff; }
.sb-group { padding: 0 13px 8px; font-size: 11.4px; font-weight: 700;
letter-spacing: 0.09em; color: oklch(52% 0.01 250); }
/* 메뉴 항목 앞 표식 — 점(5px)에서 사각(16px)으로. 나중에 아이콘을 넣을 자리 */
.sidebar-link .mark { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
border: 1.5px solid currentColor; opacity: .5; }
.sidebar-link.active .mark { border: none; opacity: 1; background: oklch(75% 0.13 250); }
/* ------------------------------------------------------------
§6 다단계 흐름 · 위험 구역 · 안내문 (신규)
------------------------------------------------------------ */
.stepper { display: flex; align-items: center; margin-bottom: 16px; padding: 0 4px; }
.stepper-node { display: inline-flex; align-items: center; gap: 7px; }
.stepper-num { display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 999px; font-size: 11px;
font-weight: 700; background: var(--status-done-bg); color: #fff; }
.stepper-node.todo .stepper-num { background: none; color: var(--text-tertiary);
border: 1.5px dashed var(--border-dashed); }
.stepper-name { font-size: 12.8px; font-weight: 700; }
.stepper-node.todo .stepper-name { font-weight: 600; color: var(--text-secondary); }
.stepper-line { flex: 1; height: 2px; margin: 0 8px; background: var(--status-done-bg); }
.stepper-line.todo { background: var(--border-default); }
/* 위험 구역 — 본문에 붉은 글씨를 섞지 않고 영역 자체를 표시합니다 */
.danger-card { background: var(--bg-surface); border: 1px solid oklch(88% 0.05 25);
border-radius: var(--radius-lg); overflow: hidden; }
.danger-card-head { display: flex; align-items: center; gap: 8px;
padding: 16px 20px; background: oklch(98% 0.012 25);
border-bottom: 1px solid oklch(92% 0.04 25);
font-size: 13.6px; font-weight: 700; color: oklch(45% 0.16 27); }
.danger-card-body { padding: 16px 20px; font-size: 13.2px; line-height: 1.75;
color: var(--text-secondary); }
/* 붉게 **채우는** 버튼은 시스템 전체에서 파일 정리의 삭제 하나뿐입니다 */
.btn-danger { background: oklch(48% 0.17 27); border-color: oklch(48% 0.17 27);
color: #fff; }
.btn-danger:hover { background: oklch(43% 0.17 27); }
/* 파괴적 부 동작 — 테두리만. 지금 인라인 style로 흩어져 있는 것을 이 클래스로 모읍니다 */
.btn-danger-outline { color: var(--danger); border-color: oklch(88% 0.05 25);
background: oklch(98% 0.01 25); }
.note { display: flex; gap: 9px; padding: 11px 14px; border-radius: var(--radius-md);
font-size: 13px; line-height: 1.65; }
.note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.note-info { background: oklch(97% 0.014 250); border: 1px solid oklch(91% 0.03 250);
color: oklch(35% 0.06 250); }
.note-warn { background: oklch(97% 0.02 95); border: 1px solid oklch(90% 0.05 92);
color: oklch(38% 0.04 80); }
.note-danger { background: oklch(98% 0.012 25); border: 1px solid oklch(90% 0.04 25);
color: oklch(42% 0.14 27); }
/* 필수 입력 표식 — * 대신 작은 점. 범례는 폼 하단에 한 번만 둡니다 */
.req { display: inline-block; width: 5px; height: 5px; border-radius: 999px;
background: oklch(55% 0.18 25); vertical-align: 2px; margin-left: 4px; }
/* 비율 띠 — 「있음/없음」처럼 비율이 곧 길이인 것에 씁니다 */
.ratio-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden;
background: var(--bg-subtle); }
.ratio-bar > span { display: block; }
/* ------------------------------------------------------------
§7 알림함 · diff (신규)
------------------------------------------------------------ */
.notif-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px;
padding: 2px 9px; border-radius: 999px; flex-shrink: 0;
font-size: 11.4px; font-weight: 700; }
.notif-chip-mail { background: oklch(96% 0.03 250); color: oklch(38% 0.09 250); }
.notif-chip-sys { background: var(--bg-subtle); color: var(--text-secondary); }
.notif-item.unread { border-left: 3px solid var(--accent-navy);
padding-left: 13px; background: oklch(99% 0.004 250); }
.notif-daygroup { font-size: 12.2px; font-weight: 700; letter-spacing: 0.04em;
color: var(--text-tertiary); margin: 18px 0 8px 2px; }
.diff-del { padding: 1px 5px; border-radius: 4px; background: oklch(96% 0.03 25);
color: oklch(48% 0.16 27); text-decoration: line-through; }
.diff-ins { padding: 1px 5px; border-radius: 4px; background: oklch(95% 0.05 150);
color: oklch(38% 0.11 150); text-decoration: underline; }
/* 파일 선택 상자 4개의 높이를 맞춥니다 (안내 문구 줄 수가 달라도 같은 크기).
기존 .dropzone-fixed는 92px — 132px로 올립니다 */
.dropzone-fixed { min-height: 132px; }
/* ============================================================
§8 전역 교체 — **버튼 반경 하나뿐**입니다
.card / .job-table을 전역으로 바꾸려 했으나, 사용처를 전수 조사한 결과
문서 미리보기 화면들이 같은 클래스를 쓰고 있어 방식을 바꿨습니다.
feedback_paper.html 피드백 페이퍼 (WORD/PDF 발송용, 확정본)
common_material.html 전사 공통교육자료
_formatted_script_body.html 양식 편집본 표지 — 참석자 표가 .job-table
job_detail.html 636·646행 참석자 매핑표 팝업
_job_results_card.html 26행 참석자 정보 표
🔴 넣으려다 뺀 규칙 — `.job-table td:first-child { color: 회색 }`.
첫 열이 연번인 대시보드에서는 맞지만, 정산 관리의 첫 열은 체크박스이고
피드백 페이퍼·참석자 표의 첫 열은 항목명·기호입니다. 전부 회색으로 죽습니다.
============================================================ */
/* 버튼 반경. 문서 미리보기 화면의 버튼은 문서 **바깥**(다운로드·발송)에만
쓰이므로 문서 서식에는 영향이 없습니다. 확인 완료.
.fp-apply(팝오버 [적용])는 --radius-md를 쓰므로 여기서 함께 알약으로 맞춥니다 */
.btn, .ms-btn, .btn-block { border-radius: var(--radius-pill); }
.fp-apply { border-radius: var(--radius-pill); }
/* ============================================================
§9 .ui2 — 개선을 적용한 화면에만 붙이는 opt-in 클래스
{% block content %}
← 이 화면은 새 규칙을 쓴다는 표시
...
{% endblock %}
대시보드는 이미 `.jobs-dash`를 쓰고 있으므로, 그 요소에 `ui2`를 함께 붙입니다.
============================================================ */
.ui2 .card, .ui2 .form-card, .ui2 .stat-card,
.ui2 .table-wrap, .ui2 .comments-panel { box-shadow: var(--shadow-card); }
/* 표 헤더 — 회색 띠를 없애고 굵은 밑줄 하나로.
표가 카드 안에 있으므로 헤더에 배경을 또 칠하면 층이 두 겹이 됩니다 */
.ui2 .job-table thead th { background: var(--bg-surface); font-size: 12.2px;
border-bottom: 1.5px solid var(--border-strong); }
.ui2 .job-table { font-variant-numeric: tabular-nums; }
/* 첫 열(연번) — 굵게 하지 않고 옅게. 연번이 첫 열인 표에만 .tbl-idx를 붙여 씁니다 */
.ui2 .job-table.tbl-idx tbody tr td:first-child {
font-weight: 400; color: var(--text-tertiary); }
/* ============================================================
§10 적용 후 확인할 것
- 역할 3종 × 전 메뉴 순회 (작업규칙 28-7).
- 대시보드가 **지금과 같아야** 합니다 — `.fbar`·`.jobs-dash .badge`를
건드리지 않았으므로 필터 칩과 진행현황 표기는 그대로여야 정상입니다.
- 🔴 문서 미리보기 3종을 눈으로 확인 — 피드백 페이퍼 / 공통교육자료 /
양식 편집본 팝업. 버튼 반경만 바뀌고 문서 서식은 그대로여야 합니다.
- 표 안의 작은 버튼(padding 4px 8px)이 너무 둥글어 보이지 않는지.
- `.dropzone-fixed` 92→132px. 새 의뢰 등록 외에 job_edit.html에도
같은 클래스가 있으면 함께 커집니다(의도된 통일).
§11 제가 읽지 않은 템플릿 — `.ui2`를 붙이지 않으면 영향 없음
scripters_list · ai_review_admin · feedback_paper(본문) ·
common_material(본문) · formatted_script · job_edit · change_password ·
_ai_model_picker · _formatted_script_body(본문) · job_detail 200~697행 ·
static/js/filters.js
============================================================ */
/* ══════════ UI2 보충 (2026-08-20, 전달 문서 03~09가 요구하는 소규모 규칙) ══════════ */
/* 09-⑵② 로그인 입력칸 포커스 링 */
.auth-box input:focus { border-color: var(--accent-navy);
box-shadow: 0 0 0 3px oklch(92% 0.03 250); }
/* 08-⑶④ 정산 2열 그리드 — 1400px 미만 1열 */
@media (max-width: 1399px) { .settle-grid { grid-template-columns: 1fr !important; } }
/* 09-⑴⑤ diff 색 — 생성기(ai_review.py)는 /로 내보내므로 (금지 구역 회피)
CSS 쪽에서 같은 모양을 입힌다 (전달 문서의 대안 2안) */
.ui2 del { padding: 1px 5px; border-radius: 4px; background: oklch(96% 0.03 25);
color: oklch(48% 0.16 27); text-decoration: line-through; }
.ui2 ins { padding: 1px 5px; border-radius: 4px; background: oklch(95% 0.05 150);
color: oklch(38% 0.11 150); text-decoration: underline; }
/* 2026-08-20 C님 확정의 나머지 절반 — 토글·프리셋 선택 상태도 네이비로.
위쪽 A-9 블록(.fbar .segmented input:checked + label / .preset-chip.on)의
크림 채움을 덮는다. 칩(.fchip.on)만 바꾸면 화면에 두 언어가 섞인다. */
.fbar .segmented input:checked + label { background: var(--sidebar-navy); color: #fff; }
.preset-chip.on { background: var(--sidebar-navy); border-color: var(--sidebar-navy); color: #fff; }
/* 요약 줄의 값 칩 — 시안은 흰 배경 + 실선 테두리 알약 */
.applied-chip { background: var(--bg-surface); border: 1px solid var(--border-default); }
/* ══════════ UI2 보충 끝 ══════════ */
/* ══════════ UI2 보정 2 (2026-08-20) — 시안 맞춤 4건 + 누락 1건 ══════════ */
/* (1) 검색칸 — 2026-08-20 보정: 필터 전부 한 줄이 되도록 좁게. 남는 폭만 차지하고
(max 260px), 좁은 화면에서는 150px까지 줄어든다. */
.fbar input[type=text].fsearch { flex: 1 1 140px; width: auto; min-width: 140px;
max-width: 200px; padding: 9px 15px; }
@media (max-width: 860px) { .fbar input[type=text].fsearch { min-width: 120px; } }
/* (3) 선택값 요약 줄 — 「선택값 N」 라벨과 「결과 N건」 카운트 */
.applied-label { font-size: 12.4px; font-weight: 700; color: var(--text-secondary);
margin-right: 2px; }
.applied-count { margin-left: auto; font-size: 13px; color: var(--text-secondary);
white-space: nowrap; }
.applied-count b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* (4) 타이포 — 개선 적용 화면(.ui2)의 페이지 제목을 시안 크기로.
로그인(.auth-box h1)·문서 미리보기는 .ui2 밖이라 영향 없음 */
.ui2 h1 { font-size: 24px; letter-spacing: -0.02em; }
/* (누락) 게시판 댓글 수 뱃지 — 07_board.md가 참조하는 .chip-n 이 CSS 개정 때 빠져 있었다 */
.chip-n { display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: var(--sidebar-navy); color: #fff; font-size: 11.4px; font-weight: 700; }
/* ══════════ UI2 보정 2 끝 ══════════ */
/* ══════════ UI2 보정 3 (2026-08-20) — 3단계 비교 회차 토글 (시안 9a) ══════════
개별 버튼 나열이 아니라 한 알약 컨테이너 안에서 고르는 형태.
선택 = 네이비 채움, 2줄(회차/날짜·건수) */
.rv-toggle { display: inline-flex; align-items: center; gap: 3px; padding: 3px;
border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-surface); }
.rv-item { display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
padding: 5px 16px; border-radius: 999px; text-decoration: none;
color: var(--text-secondary); line-height: 1.3; }
.rv-item:hover { background: var(--bg-subtle); }
.rv-item b { font-size: 12.8px; font-weight: 700; color: inherit; }
.rv-item small { font-size: 10.8px; color: var(--text-tertiary);
font-variant-numeric: tabular-nums; }
.rv-item.on { background: var(--sidebar-navy); color: #fff; }
.rv-item.on:hover { background: var(--sidebar-navy); opacity: .92; }
.rv-item.on small { color: #fff; opacity: .75; }
/* ══════════ UI2 보정 3 끝 ══════════ */
/* ══════════ UI2 보정 4 (2026-08-20, 13번 문서) — 남은 시안 차이 3건 ══════════ */
/* 1번. 3단계 비교 — diff 3열 (줄번호 · 화자 · 문장) */
.diff-rows { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.diff-row { display: flex; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--bg-subtle); }
.diff-row:last-child { border-bottom: none; }
.diff-no { flex-shrink: 0; width: 40px; text-align: right; font-size: 12px;
color: var(--text-tertiary); font-variant-numeric: tabular-nums; padding-top: 2px; }
.diff-sp { flex-shrink: 0; width: 36px; font-size: 12px; font-weight: 700;
color: var(--accent-navy); padding-top: 2px; }
.diff-tx { flex: 1; min-width: 0; font-size: 13.8px; line-height: 1.85; overflow-wrap: anywhere; }
/* 2번. 진행현황 배지를 그 자리 드롭다운으로 (시안 5a).
.ui2 .badge가 padding을 0으로 만들므로, 누를 수 있는 면적을 되살린다 */
.ui2 button.badge.st-menu { cursor: pointer; font-family: inherit;
padding: 4px 8px; margin: -4px -8px; border-radius: var(--radius-sm); }
.ui2 button.badge.st-menu:hover { background: var(--bg-subtle); }
.ui2 button.badge.st-menu .caret { font-size: 9px; opacity: .5; font-weight: 400; margin-left: 2px; }
.row-menu-panel form { margin: 0; }
.row-menu-panel .row-menu-item .badge { pointer-events: none; }
/* 3번. AI 검수 회차 — 접힘 유지, 겉만 카드형 행으로 (시안 8a) */
.ai-rev { border: 1px solid var(--border-default); border-radius: var(--radius-md);
margin-bottom: 8px; }
.ai-rev > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
gap: 10px; padding: 12px 14px; }
.ai-rev > summary::-webkit-details-marker { display: none; }
.ai-rev > summary::before { content: "▾"; font-size: 11px; color: var(--text-tertiary);
flex-shrink: 0; transition: transform .12s; }
.ai-rev[open] > summary::before { transform: rotate(180deg); }
.ai-rev[open] > summary { border-bottom: 1px solid var(--bg-subtle); }
.ai-rev-body { padding: 4px 14px 14px; }
/* ══════════ UI2 보정 4 끝 ══════════ */
/* ══════════ UI2 보정 5 (2026-08-20) — 추가 수정 11건의 CSS 분 ══════════ */
/* (1) 진행현황 배지 뒤 캐럿(▾) — 상태 변경 드롭다운 표시가 점처럼 보여
알아보기 어려웠다. 조금 키우고 진하게
(2026-08-20 재보정: 1.5배 더 — 11px → 16px. 관리자 화면에만 있는 요소) */
.ui2 button.badge.st-menu .caret { font-size: 16px; opacity: .7; }
/* (8) 새 의뢰/수정 — 날짜↔주간 전환 미니 토글 */
.seg-mini { padding: 2px; }
.seg-mini label { padding: 3px 10px; font-size: 11.6px; border-radius: 6px; }
/* (9) 게시판 — 글 상자 폭 2/3, 펼침 캐럿 확대 */
.board-narrow { max-width: 67%; }
@media (max-width: 1100px) { .board-narrow { max-width: 100%; } }
.row-caret { width: 18px; flex-shrink: 0; text-align: center; font-size: 14px; opacity: .75; }
/* (10) 정산 관리 — 요약 스트립 폭을 아래 표(왼쪽 열 = 전체 − 오른쪽 268px − 간격 16px)와 맞춤 */
.settle-strip { width: calc(100% - 284px); }
@media (max-width: 1399px) { .settle-strip { width: 100%; } }
/* 메뉴 경로(breadcrumb) 링크 — 브라우저 기본 파랑/보라가 나오던 문제 (2026-08-20, 18번).
일반 텍스트와 같은 회색, 밑줄 없음, 올렸을 때만 살짝 진해짐.
현재 페이지()는 기존 .breadcrumb b 규칙이 처리하므로 손대지 않는다 */
.breadcrumb a { color: var(--text-tertiary); text-decoration: none; }
.breadcrumb a:visited { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
/* ══════════ 3단계 비교 diff 성능·표시 개선 (2026-08-20) ══════════ */
/* 화면 밖 줄은 렌더를 미룬다 — 수천 줄 diff를 펼칠 때 브라우저가 멎던 문제의 핵심 대책 */
.diff-rows .diff-row { content-visibility: auto; contain-intrinsic-size: auto 44px; }
/* 변경 없는 구간 접힘 표시 */
.diff-gap { padding: 7px 14px; text-align: center; font-size: 12px; letter-spacing: 0.06em;
color: var(--text-tertiary); background: var(--bg-subtle); border-bottom: 1px solid var(--bg-subtle); }
/* 접힘/전체 전환 줄 */
.diff-viewbar { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
/* ══════════ 보정 6건 (2026-08-20 저녁) ══════════ */
/* (4) 폼 밖에 있는 select(예: 새 의뢰의 「이전 의뢰 불러오기」)도 시스템 톤으로 —
기존 규칙이 form 하위만 잡고 있어 브라우저 기본 모양이 그대로 나왔다 */
.ui2 select { padding: 10px 13px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
font-size: 14.3px; font-family: inherit; background: var(--bg-input); color: var(--text-primary); }
/* (1) 주간 입력칸 — 브라우저 기본 표기("2026, 34번째 주")를 가리고
시스템 표기("YYYY년 M월 N주차")를 겹쳐 보여준다. 달력 아이콘·피커는 그대로. */
.week-wrap { position: relative; display: block; }
.week-wrap input.week-mode { color: transparent; }
.week-wrap .week-display { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
pointer-events: none; font-size: 14.3px; color: var(--text-primary); }
.week-wrap .week-display.empty { color: var(--text-tertiary); }
/* ══════════ 요약 스트립 컴팩트 변형 (2026-08-20 저녁 2차) ══════════
라벨과 값이 한 줄 — 값 크기는 라벨(13px)에 맞추고 굵기·색·점은 그대로.
정산 관리·작업 관리·대시보드 관리자 스트립에 적용 */
.strip-compact .strip-cell { display: flex; align-items: baseline; gap: 10px; padding: 11px 16px; }
.strip-compact .strip-label { margin-bottom: 0; flex-shrink: 0; }
.strip-compact .strip-value { font-size: 13px; letter-spacing: 0; }
.strip-compact .strip-value .unit { font-size: 12.4px; }
.strip-compact .strip-sub { margin-top: 0; margin-left: auto; text-align: right; }
/* ── A-5 작업시간 바·기록 (2026-08-20, 시안 v1) ─────────────────────────────
상단 바: 누적·적정·인건비 + 시작/종료 버튼. 진행 중이면 옅은 네이비 강조.
기록 표: 삭제 행은 취소선(행 자체는 이력으로 남는다). */
/* 2026-08-22 (4차, C님 확정): 작업시간 바는 카드가 아니다 — 바탕 위 글자만 둔다 */
.wt-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 2px 0 8px; margin-bottom: 14px;
background: transparent; border: none; box-shadow: none; }
/* 진행 중에도 배경을 쓰지 않는다(안 B) — 「진행 중 · N분 경과」 글자로 알린다 */
.wt-bar.wt-active { background: transparent; border-color: transparent; }
/* 🔴 .ui2 .card(0,2,0)가 그림자를 다시 걸므로 같은 무게의 선택자로 지운다 */
.ui2 .wt-bar { box-shadow: none; }
.wt-cells { display: flex; align-items: baseline; gap: 22px; flex: 1; flex-wrap: wrap; min-width: 0; }
.wt-cell { display: flex; align-items: baseline; gap: 8px; }
.wt-cell .strip-label { margin: 0; flex-shrink: 0; }
.wt-value { font-size: 14.2px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wt-flag { font-size: 12.2px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fdf2d0; color: #7a5c00; white-space: nowrap; }
.wt-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wt-running { font-size: 13.4px; font-weight: 700; color: var(--accent-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wt-table td { vertical-align: top; }
.wt-del-row td { text-decoration: line-through; color: var(--text-tertiary); }
.wt-del-row td .badge, .wt-del-row td .muted { text-decoration: none; }
.wt-scroll { overflow-x: auto; }
/* 2026-08-22 (4차): 작업시간 팝업 — 입력칸 아래 보조 안내 한 줄 */
.wt-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 5px; }
/* 2026-08-22 (4차): 작업시간 팝업 위에 겹쳐 뜨는 확인창 — modal-overlay(1000)보다 위 */
.wt-alert { z-index: 1100; }
.wt-alert-panel { max-width: 380px; width: 100%; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); }
.wt-alert-title { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.wt-alert-body { font-size: 14.3px; color: var(--text-secondary); margin: 0 0 18px; line-height: 1.55; }
.wt-alert-act { display: flex; justify-content: flex-end; }
form input[type=datetime-local] { font-variant-numeric: tabular-nums; }
.wt-scroll .job-table { min-width: 560px; }
.wt-table thead th, .wt-table td { padding: 9px 10px; font-size: 12.8px; }
.wt-table td:first-child { white-space: nowrap; }
.wt-acts-td { text-align: right; white-space: nowrap; }
/* ── 2026-08-20 보정: 대시보드 평균 처리기간 — 설명을 값 아랫줄에 작게 ── */
.strip-compact .strip-cell.strip-2line { flex-wrap: wrap; }
.strip-compact .strip-2line .strip-sub { margin-left: 0; flex-basis: 100%;
text-align: left; margin-top: 4px; }
/* ── A-7 프로젝트 관리 (2026-08-21, 시안 v4 승인) ────────────────────────────
전사 건 유형 라벨(FGI/DI). 색은 회색(pill-neutral) 하나로 통일 — C님 확정. */
.wt-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 34px;
margin-right: 8px; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 11.2px;
font-weight: 700; background: var(--pill-neutral-bg); color: var(--pill-neutral-text); }
/* ═ 2026-08-21 A-7 프로젝트 관리 색 배치 개선 (시안 4b 승인 — 클로드디자인 전달) ═
채움 4겹 → 진한 면 1개(요약 띠) + 회색 1종(머리글·건별 란).
직전의 머리글 음영 규칙(--bg-page)은 이 블록이 대체해 삭제했다. */
:root {
--sidebar-navy-cell: oklch(25% 0.02 250); /* 요약 띠 안 금액 칸 — 사이드바 네이비 한 단계 밝게 */
--bg-table-head: oklch(96.5% 0.002 90); /* 본표 머리글 = 전사건별 란, 표 안의 유일한 회색 */
}
/* 1. 요약 띠 — 사이드바와 동일한 네이비 */
.strip.strip-dark { background: var(--sidebar-navy); border-color: var(--sidebar-navy); }
.strip-dark .strip-cell { border-right-color: oklch(30% 0.02 250); }
.strip-dark .strip-label,
.strip-dark .strip-value .unit { color: oklch(78% 0.01 250); }
.strip-dark .strip-label .muted { color: oklch(65% 0.01 250); }
.strip-dark .strip-value { color: #fff; }
.strip-dark .strip-label .dot { display: none; }
.strip-dark .strip-cell.strip-aside { background: var(--sidebar-navy-cell); }
.strip-dark .strip-cell.strip-aside .strip-value { font-size: 14.2px; }
/* 2. 본표 머리글과 전사건별 란 — 같은 회색 한 종류 */
#prj-table > thead th {
background: var(--bg-table-head);
color: var(--text-tertiary);
font-weight: 600;
border-bottom: 1px solid oklch(89% 0.005 90);
}
#prj-table > tbody > tr.job-sub > td { background: var(--bg-table-head); }
#prj-table .job-sub table,
#prj-table .job-sub table thead th { background: transparent; }
#prj-table .job-sub table thead th {
color: oklch(62% 0.01 90);
font-weight: 600;
border-bottom: 1px solid var(--border-default);
}
/* 3. 데이터 행·소계 행은 흰색, 소계는 네이비 실선으로만 구분 */
#prj-table > tbody > tr.prj-row > td { background: var(--bg-surface); }
#prj-table > tbody > tr.total-row td {
background: var(--bg-surface);
border-top: 1.5px solid var(--sidebar-navy);
}
/* 4. 열 위계 — 머리글에서만 금액 굵게, 본문은 색으로만 구분(파생 지표 흐리게).
2026-08-21 C님 확정: 머리글 두 줄 외에는 굵기 사용 금지 → 본문 금액 700 제거. */
#prj-table > thead th:nth-child(7),
#prj-table > thead th:nth-child(10) { color: var(--text-secondary); font-weight: 700; }
#prj-table > thead th:nth-child(6),
#prj-table > thead th:nth-child(9) { color: oklch(68% 0.01 90); }
#prj-table > tbody > tr > td:nth-child(6),
#prj-table > tbody > tr > td:nth-child(9),
#prj-table > tbody > tr.total-row td:nth-child(6),
#prj-table > tbody > tr.total-row td:nth-child(9) { color: oklch(68% 0.01 90); font-weight: 400; }
/* 5. 라벨 — FGI/DI는 채움 유지, 열외는 테두리만 */
#prj-table .badge-excluded {
background: transparent;
border: 1px solid var(--border-default);
color: var(--text-tertiary);
font-weight: 600;
}
/* ═ 2026-08-21 4b 후속 확정 (C님) — 머리글 두 줄만 굵게, 그 외 전부 기본 굵기 ═
· 표 공통 「첫 열 굵게」 규칙이 이 화면에서는 프로젝트명·건명·그리고 펼침 란
(colspan td)을 통해 건별 표 전체에 600을 먹이고 있었다 — 전부 400으로 되돌린다.
· 소계 행(공통 total-row 700)도 기본 굵기로. 라벨 칩(FGI/DI·열외)은 화면 공통
부품이라 부품 규격(굵기 포함)을 유지한다. */
#prj-table > tbody > tr.job-sub > td { font-weight: 400; }
#prj-table > tbody td:first-child,
#prj-table .job-sub table tbody td:first-child { font-weight: 400; }
#prj-table tr.total-row td { font-weight: 400; }
/* ═ 2026-08-21 C님 지적 — 건별 표 열 위치가 프로젝트마다 다름 ═
건별 표는 프로젝트마다 별도의 표라, 브라우저가 각 표의 내용(건명 길이·열외 라벨
유무 등)에 맞춰 열 폭을 따로 계산했다. 열 폭을 고정(table-layout: fixed)해
모든 프로젝트가 같은 열 위치를 쓰게 한다. 전사건명 열이 남는 폭을 모두 가져가고,
건명이 길면 그 칸 안에서만 줄바꿈한다. */
#prj-table .job-sub table { table-layout: fixed; }
#prj-table .job-sub table thead th:nth-child(2) { width: 110px; } /* 재생시간 */
#prj-table .job-sub table thead th:nth-child(3) { width: 140px; } /* 배정 스크립터 */
#prj-table .job-sub table thead th:nth-child(4) { width: 110px; } /* 작업시간 */
#prj-table .job-sub table thead th:nth-child(5) { width: 130px; } /* 인건비 */
#prj-table .job-sub table thead th:nth-child(6) { width: 130px; } /* AI 검수시간 */
#prj-table .job-sub table thead th:nth-child(7) { width: 130px; } /* AI 검수비 */
#prj-table .job-sub table tbody td:first-child { white-space: normal; }
/* 요약 띠 칸 폭 — 인라인 대신 규칙으로(반응형 조정 가능). 좁은 화면에서는
글자를 칸 안에서 꺾지 않고(nowrap) 칸 단위로 줄바꿈한다. */
.strip-dark .strip-cell { white-space: nowrap; }
.strip-dark .strip-cell:nth-child(1) { flex: .65; }
.strip-dark .strip-cell:nth-child(2),
.strip-dark .strip-cell:nth-child(3) { flex: .55; }
.strip-dark .strip-cell:nth-child(4) { flex: .8; }
.strip-dark .strip-cell.strip-aside:nth-child(5) { width: 245px; }
.strip-dark .strip-cell.strip-aside:nth-child(6) { width: 265px; }
@media (max-width: 1280px) {
.strip-dark { flex-wrap: wrap; }
/* 칸이 내용보다 좁아지지 않게 — 못 들어가면 글자를 꺾는 대신 칸째로 다음 줄로 */
.strip-dark .strip-cell { flex: 1 1 auto; min-width: max-content; }
.strip-dark .strip-cell.strip-aside { width: auto; }
}
/* ═ B-1 후속 (2026-08-21 C님 지적) — 작업 현황 요약 띠 글자 꺾임 ═
칸이 좁아지면 값("3시간 16분" 등)이 칸 안에서 세로로 꺾였다. 프로젝트 관리
띠와 같은 규칙: 값은 꺾지 않고(nowrap), 자리가 모자라면 칸째로 다음 줄로. */
.strip-nowrap { flex-wrap: wrap; }
.strip-nowrap .strip-cell { white-space: nowrap; flex: 1 1 auto; min-width: max-content; }
/* 보정: 평균 처리기간의 작은 설명글(.strip-sub)은 값이 아니므로 칸 최소폭에서 빼고
두 줄로 접히게 둔다 — 그래야 1440px에서 일곱 칸이 한 줄에 들어간다. */
.strip-nowrap .strip-cell.strip-2line { min-width: 0; }
.strip-nowrap .strip-2line .strip-sub { white-space: normal; }
/* 보정 2: 일곱 칸이 1440px 한 줄에 들어가도록 — 이 띠만 여백·간격을 조금 줄이고,
금액 칸 고정폭(220px)을 내용 폭으로, 평균 처리기간 칸은 기준 폭 170px에
설명글을 두 줄로 접는다(값·라벨은 그대로 한 줄). */
.strip-nowrap .strip-cell { padding: 11px 10px; gap: 8px; }
.strip-nowrap .strip-cell.strip-2line { flex: 0 1 170px; min-width: 0; }
.strip-nowrap .strip-2line .strip-sub { max-width: 150px; }
/* ═ 게시판 글·댓글 수정/삭제 아이콘 (2026-08-21, 시안 v2 승인) ═
수정 = 사이드바 네이비 연필 · 삭제 = 붉은(--danger) 휴지통 */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-surface); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--bg-subtle); }
/* ═ A-8 작업 상세·수정 화면 (2026-08-21 시안 승인) ═ */
/* #14: 관리자 전용 카드 — 옅은 하늘색 */
.admin-card { background: oklch(97.6% 0.014 235); border: 1px solid oklch(89% 0.035 235); }
/* #12의 나열식 칩은 5차(2026-08-23)에서 아래 블록으로 대체되었다. */
/* ═ 5차 (2026-08-23 시안 4안 승인) — 작업 상세 진행현황 드롭다운 ═
대시보드 필터칩과 같은 모양이다. 뼈대(`.fchip-wrap` `.fchip` `.fpopover`
`.fp-list` `.fp-item` `.fp-foot` `.fp-apply`, 614~665행)는 **전역 규칙을 그대로**
쓰고, 여기서는 진행현황에만 필요한 차이만 적는다.
🔴 46조: 위 전역 규칙과 `.segmented`(10개 화면 15곳 공용), `filters.js`(7개 화면
공용)는 한 글자도 고치지 않았다.
🔴 라디오를 label **앞**에 둔 것은 일부러다 — `input:checked + label`로 고른 줄을
그릴 수 있어 `:has()` 없이 동작하고, 기존 시험의 `label[for="stc-XXX"]`도 지켜진다. */
#st-chip { font-size: 13.6px; }
#st-chip .badge { pointer-events: none; }
#st-pick { width: 268px; }
/* 🔴 전역 `.fp-list`는 max-height 238px + 스크롤이다 — 프로젝트명처럼 항목이 수십 개인
필터에는 맞지만, 진행현황은 **딱 8개**라 스크롤을 걸면 「재교육진행·취소」가 접힌
채로 숨는다(실측: 내용 321px > 238px). 여기서만 푼다. */
#st-pick .fp-list { padding: 6px; max-height: none; }
#st-pick .fp-item { border-radius: 8px; gap: 0; }
#st-pick .st-radio { position: absolute; opacity: 0; width: 0; height: 0; }
#st-pick .st-radio:checked + .fp-item { background: var(--bg-page); }
#st-pick .st-tick { margin-left: auto; color: var(--sidebar-navy); font-weight: 800; opacity: 0; }
#st-pick .st-radio:checked + .fp-item .st-tick { opacity: 1; }
#st-pick .st-now-mark { margin-left: auto; font-size: 11.8px; color: var(--text-tertiary); }
/* 키보드로 옮길 때 어디에 있는지 보이게 (라디오가 숨어 있어 따로 필요하다) */
#st-pick .st-radio:focus-visible + .fp-item { outline: 2px solid var(--accent-navy); outline-offset: -2px; }
/* 바닥: 안내 문구가 길어 좌우로 붙이면 눌리므로 위아래로 쌓는다 */
#st-pick .fp-foot { flex-direction: column; align-items: stretch; gap: 8px; }
#st-pick .st-hint { font-size: 11.8px; color: var(--text-tertiary); line-height: 1.45; }
#st-pick .fp-apply[disabled] { opacity: .35; cursor: default; }
/* 2-4 ③안: 확장자 배지 */
.ext-badge { display: inline-block; min-width: 38px; text-align: center; padding: 1px 6px;
margin-right: 8px; border-radius: 6px; background: var(--sidebar-navy); color: #fff;
font-size: 10.8px; font-weight: 700; letter-spacing: .02em; }
/* 2-3 보정(C님 지적): 수정 화면 파일 칸 — 위 행(음성/영상)과 아래 행(현장속기/기타)
사이 간격 확보. 고른 파일 목록이 붙어도 답답하지 않게 행 아래 여백을 넉넉히. */
.edit-file-grid { margin-bottom: 26px; }
.edit-file-grid .picked-list { margin-bottom: 4px; }
/* ══════════ 3차 무의미구간 앞/뒤 (2026-08-22) — 새 의뢰 등록 고른 파일 행의 선택 입력 ══════════ */
.picked-range { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
padding: 4px 8px 6px 8px; margin-top: -2px; }
.picked-range-label { font-size: 12.4px; font-weight: 600; color: var(--text-secondary); }
.picked-range-input { width: 108px; padding: 6px 9px; border: 1px solid var(--border-default);
border-radius: var(--radius-sm); background: var(--bg-input); font-size: 12.8px;
color: var(--text-primary); font-family: inherit; font-variant-numeric: tabular-nums; }
.picked-range-input::placeholder { color: var(--text-tertiary); }
.picked-range-hint { font-size: 12px; color: var(--text-tertiary); }
/* 작업 상세 무의미구간 설정 폼의 앞/뒤 두 칸 (기존 .content-start 입력 규칙과 같은 톤) */
.content-start form label.muted.small { margin: 0 2px 0 6px; }
/* ══════════ 머리글 주 동작 버튼 재배치 (2026-08-22 확정) ══════════
오른쪽 끝 정렬 폐기(커서 이동 거리) · 채운 배경 폐기.
네이비 글자 + 아이콘 하나로 통일하고, 자리만 흐름에 맞춘다.
새 색 없음 — --accent-navy / --border-strong만 쓴다.
🔵 제목 옆 90px 공통 규칙(.page-header > :nth-child(2):last-child)은 그대로 둔다 —
이 재배치의 대상이 아닌 5개 화면(작업 상세·검수 관리·3단계 비교·공통 교육자료·
피드백지)이 그 규칙으로 왼쪽에 와 있다(C님 2026-08-22 확정). */
/* 제목과 같은 줄에 놓는 머리글 — 제목 + 구분선 + 동작, 설명문은 아래 줄 */
.page-title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* 2026-08-23: 폼 하단 액션 바에서도 같은 구분선을 쓰기 위해 전역 부품으로 승격.
좁은 화면 숨김 규칙(.page-title-row .title-sep)은 더 구체적이라 그대로 살아 있다. */
.title-sep { width: 1px; height: 20px; flex: 0 0 auto;
background: var(--border-strong); }
/* 배경 없는 주 동작 (제목 옆 / 조건 카드 요약 줄 공용) */
.act-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
color: var(--accent-navy); font-size: 14.3px; font-weight: 700;
text-decoration: none; white-space: nowrap; font-family: inherit;
background: none; border: none; cursor: pointer; }
.act-link:hover { color: oklch(38% 0.09 250);
text-decoration: underline; text-underline-offset: 3px; }
.act-link svg { flex: 0 0 auto; }
/* 조건 카드 요약 줄 안의 내보내기 — 한 단계 작게, 뒤에 구분선 */
.applied-row .act-link { font-size: 13.8px; gap: 7px; }
.applied-row .act-sep { width: 1px; height: 16px; flex: 0 0 auto;
background: var(--border-strong); }
/* 조건을 아직 걸지 않아 요약 줄이 비어도 내보내기는 남아야 한다.
기존 규칙 `.applied-row:has(.applied-empty) { display: none }`의 예외 */
.applied-row.has-export:has(.applied-empty) { display: flex; }
.applied-row.has-export .applied-empty { color: var(--text-tertiary); }
@media (max-width: 860px) {
/* 좁은 화면에서는 구분선을 버리고 동작을 제목 아래 줄로 */
.page-title-row { gap: 10px; }
.page-title-row .title-sep { display: none; }
.page-title-row h1 { flex: 1 1 100%; }
}
/* ══════════ 재배치 끝 ══════════ */
/* ══════════ 2026-08-23 추가 요청 ①②④⑤ (C님 시안 승인) ══════════ */
/* ④ 사이드바 고정 — 본문을 위아래로 스크롤해도 늘 제자리.
🔴 .sidebar는 .app{display:flex}의 flex 아이템이라 기본값(align-self:stretch)으로
**이미 페이지 전체 높이**다. 그 상태에서는 position:sticky가 붙을 여백이 없어
아무 일도 일어나지 않는다(2026-08-23 실측: sticky만 줬을 때 상단 -1400px 그대로).
align-self:flex-start로 높이를 풀어준 뒤 100vh로 고정해야 한다.
메뉴가 화면 높이를 넘길 수 있으므로 사이드바 안쪽 스크롤을 함께 준다.
좁은 화면(≤860px)에서는 .sidebar가 display:none이고 .mobile-topbar가 대신하므로 무관. */
.sidebar { position: sticky; top: 0; align-self: flex-start;
height: 100vh; overflow-y: auto; }
/* ② 「취소」처럼 한 단계 낮춘 글자 동작 — .act-link와 같은 골격, 색과 굵기만 낮춘다.
같은 줄의 주 동작(.act-link 네이비 700)과 위계가 구별되도록. */
.act-link-quiet { color: var(--text-secondary); font-weight: 600; }
.act-link-quiet:hover { color: var(--text-primary); }
/* ══════════ 2026-08-23 추가분 끝 ══════════ */
/* ══════════ 9차 (2026-08-23) — 성공 안내 토스트 (C님 승인: 오른쪽 아래 · 4~12초) ══════════
왜 만들었나: 성공 안내가 최상단 띠로 뜨면 **본문이 통째로 아래로 밀린다.** 파일을 하나
올릴 때마다 보던 자리가 사라져서, C님이 "화면이 최상단으로 간다"고 하신 증상의 절반이
이것이었다(나머지 절반은 리다이렉트 — job_detail.html의 위치 유지 장치가 맡는다).
🔴 오류는 반드시 읽혀야 하므로 **띠 그대로 둔다.** 토스트로 옮기지 않는다.
색: `.flash-success`는 배경이 흰색이라 흰 본문 위에서 「성공」으로 읽히지 않았다.
시스템에 이미 쓰는 초록(정산 「지급완료」 칩과 같은 값)을 **토스트 전용 이름**으로 둔다
— `--pill-paid-*`를 직접 쓰면 나중에 정산 칩 색을 바꿀 때 토스트까지 따라 바뀐다. */
:root {
--ok-bg: oklch(94% 0.06 150);
--ok-text: oklch(36% 0.09 150);
--ok-border: oklch(82% 0.07 150);
}
.toast-tray { position: fixed; z-index: 1200; display: flex; flex-direction: column;
gap: 8px; max-width: min(440px, calc(100vw - 48px)); pointer-events: none; }
.toast-tray { right: 24px; bottom: 24px; align-items: flex-end; }
.toast { pointer-events: auto; position: relative;
display: flex; align-items: flex-start; gap: 9px;
padding: 12px 14px; border-radius: var(--radius-md);
background: var(--ok-bg); color: var(--ok-text);
border: 1px solid var(--ok-border);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
font-size: 14.3px; font-weight: 500; line-height: 1.5;
animation: toast-in 0.18s ease-out; }
.toast-out { animation: toast-out 0.18s ease-in forwards; }
.toast-ic { flex: none; margin-top: 2px; }
.toast-msg { flex: 1; }
.toast-x { flex: none; background: none; border: 0; padding: 0 2px; cursor: pointer;
font-size: 18px; line-height: 1; color: inherit; opacity: 0.55; }
.toast-x:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
/* 좁은 화면: 필터 바텀시트(z-index 1001)와 겹치지 않게 위로 올린다 */
@media (max-width: 640px) {
.toast-tray { left: 12px; right: 12px; top: 12px; bottom: auto;
max-width: none; align-items: stretch; }
}
/* ══════════ 10차 (2026-08-23) — 코멘트·게시판 수정·삭제 ══════════
「수정됨」은 **정보이지 경고가 아니다** — 가장 낮은 위계(회색 작은 글씨)로 둔다.
부품 이름을 `.edited-mark`로 공유한다 — 작업 코멘트·게시판 글·게시판 답변 3곳이
같은 모양이어야 하기 때문이다. 🔴 셋 중 하나만 바꾸지 마라. */
.edited-mark { font-size: 11.8px; color: var(--text-tertiary); font-weight: 500; }
.comment-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comment-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.inline-edit { margin-top: 8px; }
.inline-edit textarea { margin-top: 0; }
.inline-edit-act { display: flex; gap: 8px; margin-top: 8px; }
/* ══════════ 12차 (2026-08-23) — C님 지시 4건 ══════════ */
/* ① 알림 폭 — 문의/개선의견(.board-narrow)과 **같은 값**이다.
🔴 둘은 함께 움직여야 한다. 한쪽만 바꾸면 두 목록의 폭이 어긋난다. */
.notif-narrow { max-width: 67%; }
@media (max-width: 1100px) { .notif-narrow { max-width: 100%; } }
/* ③ 폼 카드 안에서 두 줄이 **붙어 있을 때** 간격을 준다.
작업 내용 수정의 「프로젝트(사업명)」 ~ 「작업 유형」이 **0px**였다(C님 지적, 실측).
같은 자리가 새 의뢰 등록은 8px였다 — 둘은 짝이므로 함께 18px로 맞춘다. */
.form-card .grid-2 + .grid-2 { margin-top: 18px; }
/* ④ 작업 내용 수정의 파일 칸 — 상자는 낮추고, 이미 올라간 파일은 상자 **아래**에.
🔴 `.dropzone-fixed`(132px)는 새 의뢰 등록과 함께 쓰는 부품이라 **전역으로 낮추면
안 된다.** `.edit-file-grid` 안에서만 낮춘다. */
.edit-file-grid .dropzone-fixed { min-height: 74px; padding: 14px; }
.edit-file-list { list-style: none; margin: 9px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 3px; }
.edit-file-item { display: flex; align-items: center; gap: 8px;
font-size: 12.8px; color: var(--text-secondary); }
.edit-file-item .efi-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* ══════════ 버튼 6곳 개선 (2026-08-23 확정 · 시안 1b/1d/1c) ══════════
같은 굵기의 테두리 알약이 세로로 쌓여 무엇을 먼저 누를지 색·크기로 구별되지 않던 것을
고친다. 새 색 없음 — --bg-input / --bg-page / --accent-navy / 회색 3단계만 쓴다.
🔴 46조: 기존 .btn·.file-pick·.page-header 규칙은 **한 글자도 고치지 않았다.**
.file-pick은 13곳이 쓰고 base.html의 「고른 파일명 표시」가 그 클래스를 잡으므로,
여기서는 수식 클래스(.file-pick-quiet)를 덧붙여 모양만 덮는다. */
/* ── 1b 단계 행 — 「이름 — 상태 — 동작」 한 줄. 버튼은 행마다 하나, 오른쪽 축 정렬 */
.act-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 14px; background: var(--bg-input);
border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.act-row + .act-row { margin-top: 8px; }
.act-row-label { font-size: 13.4px; font-weight: 700; min-width: 132px; }
.act-row-state { font-size: 13.4px; color: var(--text-tertiary); }
.act-row-acts { margin-left: auto; display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; }
/* 행 안에서 버튼 하나를 오른쪽 끝으로 밀 때 (동작이 하나뿐인 행) */
.act-push { margin-left: auto; }
/* 파일 선택 — 상자를 주지 않고 밑줄 글자로.
🔴 클래스 file-pick은 유지한다 — base.html의 「고른 파일명 표시」 스크립트가
label.file-pick[data-simple-pick]를 잡는다. 여기서는 모양만 덮는다. */
.file-pick.file-pick-quiet { margin-top: 0; padding: 2px 0; border: none;
background: none; font-size: 13.4px; font-weight: 600;
color: var(--text-secondary); text-decoration: underline;
text-underline-offset: 3px; text-decoration-color: var(--border-dashed); }
.file-pick.file-pick-quiet:hover { background: none; color: var(--text-primary); }
/* ── 1d 부드러운 칩 — 테두리 없이 옅은 채움. 위계는 채움 깊이로만 */
.btn-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
border: none; border-radius: var(--radius-pill); background: var(--bg-page);
color: var(--text-primary); font-size: 13.8px; font-weight: 600;
font-family: inherit; line-height: 1.4; cursor: pointer; text-decoration: none;
white-space: nowrap; }
.btn-chip:hover { background: var(--pill-neutral-bg); }
.btn-chip svg { flex: 0 0 auto; }
.btn-chip-primary { background: var(--accent-navy); color: #fff;
font-weight: 700; padding: 8px 16px; }
.btn-chip-primary:hover { background: oklch(38% 0.09 250); }
/* ── 1c 모서리 10px 테두리 버튼 — 입력칸과 같은 계열 */
.btn-sq { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
border-radius: var(--radius-md); background: var(--bg-surface);
border: 1px solid var(--border-strong); color: var(--text-primary);
font-size: 13.8px; font-weight: 700; font-family: inherit; line-height: 1.4;
cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-sq:hover { background: var(--bg-subtle); }
@media (max-width: 860px) {
/* 좁은 화면에서는 행이 두 줄로 접히므로 오른쪽 밀어붙임을 푼다 */
.act-row-label { min-width: 0; }
.act-row-acts, .act-push { margin-left: 0; }
}
/* ══════════ 버튼 6곳 개선 끝 ══════════ */
/* ══════════ 6차-B 반응형 (2026-08-23 C님 확정) ══════════ */
/* ① 「옆으로 더 있다」 표시 — 스크롤이 남아 있을 때만 오른쪽 끝이 흐려진다.
🔴 왜: 390px에서 필터칩이 최대 1020px 숨는데 알 방법이 없었다. 표(.table-wrap)만
그림자로 알려주고 있었다. 페이드는 자리를 차지하지 않고, 끝까지 밀면 사라진다.
🔴 클래스는 JS가 붙였다 뗀다(base.html) — 스크롤할 게 없으면 안 그린다. */
.scroll-more { position: relative; }
.scroll-more::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0;
width: 34px; pointer-events: none; border-radius: inherit;
background: linear-gradient(to right, transparent, var(--fade-to, var(--bg-page))); }
.fbar-row.scroll-more::after { --fade-to: var(--bg-surface); }
.mobile-nav.scroll-more::after { --fade-to: var(--sidebar-navy); }
/* ② 계정 관리(직원·스크립터) — 한 줄로 접히면 「팀 등록 → 새 계정 등록 → 계정 목록」.
🔴 접히는 지점(.settle-grid 1399px)과 **같은 지점**에 건다. 「모바일에서만」으로
좁히면 1000px 창에서는 목록이 먼저 나와 규칙이 둘로 갈린다.
🔴 2열로 펼쳐진 데스크톱 배치는 건드리지 않는다(order는 grid가 1열일 때만 의미). */
@media (max-width: 1399px) {
.members-grid > :first-child { order: 2; } /* 계정 목록을 아래로 */
.members-grid > :last-child { order: 1; } /* 팀 등록·새 계정 등록을 위로 */
}
/* ══════════ 6차-B 끝 ══════════ */
/* ══════════ 버튼 지시서 2차 (2026-08-23) — 시안 2d: 아직 아무것도 고르지 않은 상태 ══════════
같은 카드의 「사용 안 함으로 변경」(.btn-chip)과 같은 어휘로 맞춘다. 고르기 전에는
채움 없이 점선, 고르고 나면 옆에 파일 이름(.picked-one)이 붙는다.
🔴 클래스 file-pick은 유지한다 — base.html의 「고른 파일명 표시」가 그 클래스를 잡는다. */
.file-pick.file-pick-chip { margin-top: 0; padding: 8px 14px;
border: 1px dashed var(--border-dashed); border-radius: var(--radius-pill);
background: none; color: var(--text-secondary);
font-size: 13.8px; font-weight: 600;
display: inline-flex; align-items: center; gap: 7px; }
.file-pick.file-pick-chip:hover { background: var(--bg-subtle); }
/* ══════════ 지시서 2차 끝 ══════════ */