/* GBUY 화면 옷 — 목업(purchase-system-mockup.html)의 생김새를 실제 화면에 입힌다.
*
* 왜 style.css 를 갈아엎지 않고 이 파일을 뒤에 얹나
* style.css 는 사내앱들이 함께 쓰던 것을 복사해 온 3,700줄짜리다. 안에는 이 앱이
* 쓰지 않는 화면 규칙도 섞여 있어, 통째로 다시 쓰면 무엇이 딸려 죽는지 알 수 없다.
* ← 실제로 화면 모듈 셋(version-check · force-password · fieldhelp)은 자기 색을
* 직접 심거나 여기 변수를 빌려 쓴다. 그래서 변수 이름은 그대로 두고 값만 갈아 끼운다.
*
* 테마를 고르는 자리는 body[data-theme] 한 곳이다.
* 종이(paper) · 먹지(ink) · 모눈(grid)
* 그리고 표시를 아예 안 붙인 상태 = 사내앱 공통(다른 12개 앱과 같은 색·글꼴).
* 새 테마를 더할 때는 아래 '테마' 칸에 한 덩이만 베껴 값을 바꾸면 된다.
*/
/* ==========================================================================
테마 — 색은 전부 여기서만 정한다. 아래 규칙들은 변수만 쓴다.
========================================================================== */
/* ── 종이 — 목업 그대로. 밝은 사무실·인쇄물과 같은 톤 ──────────────────── */
body[data-theme="paper"] {
--ground:#F7F8FA; --surface:#FFFFFF; --surface-2:#F1F3F7; --surface-3:#E9EDF3;
--ink:#151C24; --ink-2:#4E5A68; --ink-3:#7E8896;
--line:#E2E6EC; --line-strong:#C9D1DB;
--accent:#0F4C75; --accent-2:#2C6E9E; --accent-soft:#E8EFF6; --on-accent:#FFFFFF;
--seal:#A8412C; --seal-soft:#F7EAE6;
--ok:#2E6B4F; --ok-soft:#E6F1EB;
--warn:#8A6412; --warn-soft:#F7F0DE;
--shadow-sm:0 1px 2px rgba(21,28,36,.05);
--shadow-md:0 1px 2px rgba(21,28,36,.05), 0 8px 24px -16px rgba(21,28,36,.28);
--shadow-lg:0 2px 6px rgba(21,28,36,.07), 0 18px 44px -22px rgba(21,28,36,.34);
color-scheme: light;
}
/* ── 먹지 — 목업의 어두운 짝. 야간·어두운 방 ──────────────────────────── */
body[data-theme="ink"] {
--ground:#0F131A; --surface:#171C24; --surface-2:#1E242E; --surface-3:#262E3A;
--ink:#E8ECF2; --ink-2:#A9B4C1; --ink-3:#78838F;
--line:#29313C; --line-strong:#3A434F;
--accent:#7FB2DC; --accent-2:#A3C9E8; --accent-soft:#17293A; --on-accent:#0F131A;
--seal:#DE9280; --seal-soft:#33211D;
--ok:#79C39C; --ok-soft:#16291F;
--warn:#D8B45F; --warn-soft:#2C2517;
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow-md:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
--shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 20px 48px -22px rgba(0,0,0,.8);
color-scheme: dark;
}
/* ── 모눈 — 흰 바탕·검은 글씨·굵은 선. 프로젝터로 띄우거나 눈이 불편할 때 ─ */
body[data-theme="grid"] {
--ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F4F5; --surface-3:#E4E4E7;
--ink:#000000; --ink-2:#27272A; --ink-3:#52525B;
--line:#A1A1AA; --line-strong:#000000;
--accent:#00429B; --accent-2:#0057CC; --accent-soft:#DCE6F7; --on-accent:#FFFFFF;
--seal:#A10E25; --seal-soft:#FBE3E7;
--ok:#0B5C31; --ok-soft:#DCF0E4;
--warn:#6B4A00; --warn-soft:#FAF0D5;
--shadow-sm:none; --shadow-md:none; --shadow-lg:none;
color-scheme: light;
}
/* ── 사내앱 공통 — 색은 style.css 가 정한 것을 그대로 쓴다 ─────────────────
다른 12개 앱과 글자·색이 똑같아야 하므로 토큰을 하나도 덮지 않는다.
대신 반대로 이어 준다: 아래 부품 규칙들이 쓰는 새 이름을, 옛 이름의 값으로 채운다.
그래야 차트·알림·결재선처럼 이 앱에만 있는 부품이 공통 옷에서도 제대로 보인다.
← 부품 규칙을 통째로 목업 테마 안에만 두었더니, 공통 옷으로 바꾼 순간 월별
그래프가 글자 몇 줄로 무너졌다. 색과 구조를 갈라 두는 것이 요점이다.
(밝게/어둡게는 body 의 light-theme · dark-theme 이 그대로 가른다.) */
body[data-theme="default"] {
--ground: var(--bg-app); --surface: var(--bg-card);
--surface-2: var(--bg-card-hover); --surface-3: var(--bg-card-hover);
--ink: var(--text-main); --ink-2: var(--text-main); --ink-3: var(--text-muted);
--line: var(--border-color); --line-strong: var(--border-color);
--accent: var(--color-primary); --accent-2: var(--color-secondary);
--accent-soft: rgba(108, 140, 255, .15); --on-accent: #fff;
--seal: var(--color-danger); --seal-soft: rgba(244, 115, 138, .15);
--ok: var(--color-success); --ok-soft: rgba(74, 222, 128, .15);
--warn: var(--color-warning); --warn-soft: rgba(251, 191, 36, .15);
}
/* 옛 변수 이름에 새 값을 이어 준다 — style.css 3,700줄이 이 이름으로 쓰여 있다.
여기를 지우면 그 파일 전체가 색을 잃는다.
공통 옷은 위에서 반대로 이어 두었으니 여기서 빼야 한다 — 넣으면 서로를 가리켜 돈다. */
body[data-theme="paper"], body[data-theme="ink"], body[data-theme="grid"] {
--bg-app: var(--ground);
--bg-card: var(--surface);
--bg-card-hover: var(--surface-2);
--bg-sidebar: var(--surface-2);
--border-color: var(--line);
--border-focus: var(--accent);
--text-main: var(--ink);
--text-muted: var(--ink-3);
--text-inverse: var(--on-accent);
--color-primary: var(--accent);
--color-secondary: var(--accent-2);
--color-danger: var(--seal);
--color-success: var(--ok);
--color-warning: var(--warn);
--color-info: var(--accent-2);
--color-purple: var(--accent-2);
/* 목업에는 그라디언트가 없다 — 종이에 인쇄한 것처럼 보이게 단색으로 눕힌다 */
--color-primary-grad: var(--accent);
--color-purple-grad: var(--accent-2);
--color-emerald-grad: var(--ok);
--color-rose-grad: var(--seal);
--glow-blue: none;
--status-todo: var(--ink-3);
--status-inprogress: var(--accent);
--status-review: var(--warn);
--status-done: var(--ok);
}
/* ==========================================================================
글꼴 — 제목은 명조, 본문은 고딕, 숫자는 고정폭
숫자를 고정폭으로 두는 이유: 금액이 세로로 늘어설 때 자릿수가 어긋나면
사람이 0 을 하나 더 세거나 덜 센다. 구매 화면에서 그건 사고다.
========================================================================== */
body[data-theme="paper"], body[data-theme="ink"], body[data-theme="grid"] {
background: var(--ground); color: var(--ink);
}
[data-theme] h1, [data-theme] h2, [data-theme] h3,
[data-theme] .logo-title, [data-theme] .card-header h3 {
font-family: 'Outfit', 'Noto Sans KR', sans-serif;
letter-spacing: -.01em; font-weight: 600;
}
[data-theme] .num, [data-theme] .stat-value, [data-theme] .kpi-v,
[data-theme] td.num, [data-theme] th.num, [data-theme] .mono {
font-family: 'Outfit', monospace; font-variant-numeric: tabular-nums;
}
/* ==========================================================================
뼈대 — 사이드바 · 머리줄
========================================================================== */
[data-theme] .app-container { background: var(--ground); }
[data-theme] .sidebar {
background: var(--surface-2); border-right: 1px solid var(--line);
backdrop-filter: none; box-shadow: none;
}
[data-theme] .sidebar-header { border-bottom: 1px solid var(--line); }
[data-theme] .logo-icon-box {
background: var(--accent); color: var(--on-accent);
border-radius: 9px; box-shadow: none;
}
[data-theme] .logo-title { font-size: 1.12rem; color: var(--ink); }
[data-theme] .logo-subtitle { color: var(--ink-3); font-size: .72rem; letter-spacing: .04em; }
/* 메뉴 묶음 이름 — 목업의 '구매 / 입고 / 정산' 처럼 몇 개씩 갈라 준다.
14개를 한 줄로 늘어놓으면 아이콘이 아무리 달라도 눈이 미끄러진다. */
[data-theme] .nav-group {
padding: 12px 14px 4px; font-size: 10px; font-weight: 700;
letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase;
}
[data-theme] .sidebar-collapsed .nav-group { text-align: center; padding: 10px 0 2px; font-size: 8px; }
[data-theme] .nav-link {
border-radius: 7px; color: var(--ink-2); font-size: .84rem; font-weight: 500;
background: transparent; border: 1px solid transparent; margin: 1px 8px;
}
[data-theme] .nav-link:hover { background: var(--surface-3); color: var(--ink); }
[data-theme] .nav-link.active {
background: var(--accent-soft); color: var(--accent); font-weight: 700;
border-color: transparent; box-shadow: none;
}
[data-theme] .nav-link.active::before { display: none; }
[data-theme] .nav-link i { width: 17px; height: 17px; opacity: .95; }
/* 메뉴 오른쪽 건수 — 손봐야 할 것이 있는 메뉴만 숫자가 붙는다 */
[data-theme] .nav-cnt {
margin-left: auto; font-family: 'Outfit', monospace; font-size: .68rem;
font-weight: 600; color: var(--ink-3); background: var(--surface-3);
border-radius: 99px; padding: 0 6px; min-width: 18px; text-align: center;
}
[data-theme] .nav-link.active .nav-cnt { background: var(--accent); color: var(--on-accent); }
[data-theme] .nav-cnt[data-urgent] { background: var(--seal); color: #fff; }
[data-theme] .sidebar-collapsed .nav-cnt { display: none; }
[data-theme] .sidebar-footer { border-top: 1px solid var(--line); }
[data-theme] .profile-avatar {
background: var(--accent-soft); color: var(--accent); font-weight: 700;
border: 1px solid var(--line-strong);
}
[data-theme] .main-header {
background: var(--ground); border-bottom: 1px solid var(--line);
backdrop-filter: none; box-shadow: none;
}
[data-theme] .main-header h1 { font-size: 1.45rem; margin: 0; }
[data-theme] .subtitle { color: var(--ink-3); font-size: .82rem; font-weight: 400; }
/* 어디에 있는지 — 목업 앱바의 '구매관리 / 결재함' 자리 */
[data-theme] .crumb {
font-family: 'Outfit', monospace; font-size: .72rem; color: var(--ink-3);
padding: 7px 0 0; letter-spacing: .02em;
}
[data-theme] .crumb b { color: var(--ink-2); font-weight: 600; }
/* ==========================================================================
덩어리 — 카드 · 표 · 딱지
========================================================================== */
[data-theme] .glass, [data-theme] .dashboard-card, [data-theme] .stat-card,
[data-theme] .table-wrap, [data-theme] .summary-box, [data-theme] .import-source {
background: var(--surface); border: 1px solid var(--line);
border-radius: 10px; backdrop-filter: none; box-shadow: var(--shadow-sm);
}
[data-theme] .card-header {
border-bottom: 1px solid var(--line); background: transparent; padding: 12px 15px;
}
[data-theme] .card-header h3 { font-size: 1rem; margin: 0; }
[data-theme] .card-body { padding: 14px 15px; }
[data-theme] .data-table { font-size: .82rem; border-collapse: collapse; width: 100%; }
[data-theme] .data-table thead th {
background: var(--surface-2); border-bottom: 1px solid var(--line);
color: var(--ink-3); font-size: .68rem; font-weight: 700;
letter-spacing: .06em; padding: 9px 12px; text-align: left; white-space: nowrap;
}
[data-theme] .data-table tbody td {
padding: 9px 12px; border-bottom: 1px solid var(--line);
color: var(--ink-2); vertical-align: top;
}
[data-theme] .data-table tbody tr:last-child td { border-bottom: 0; }
[data-theme] .data-table tbody tr:hover { background: var(--surface-2); }
[data-theme] .data-table td:first-child { color: var(--ink); font-weight: 500; }
[data-theme] .data-table .num, [data-theme] .data-table td.num { text-align: right; }
[data-theme] .empty-cell { color: var(--ink-3); text-align: center; padding: 26px 12px; font-size: .82rem; }
[data-theme] .table-wrap { overflow-x: auto; }
[data-theme] .badge {
display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
border-radius: 99px; font-size: .7rem; font-weight: 700; line-height: 1.7;
border: 1px solid transparent; white-space: nowrap;
}
[data-theme] .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
[data-theme] .badge-gray { background: var(--surface-3); color: var(--ink-2); border-color: var(--line-strong); }
[data-theme] .badge-blue { background: var(--accent-soft); color: var(--accent); }
[data-theme] .badge-green { background: var(--ok-soft); color: var(--ok); }
[data-theme] .badge-amber { background: var(--warn-soft); color: var(--warn); }
[data-theme] .badge-red { background: var(--seal-soft); color: var(--seal); }
/* ==========================================================================
단추 · 입력칸 — 목업은 모서리를 덜 굴리고 그림자를 거의 안 쓴다
========================================================================== */
[data-theme] .btn {
font-family: inherit; font-size: .82rem; font-weight: 600; padding: 8px 15px;
border-radius: 7px; border: 1px solid var(--line-strong);
background: var(--surface-2); color: var(--ink-2); box-shadow: none;
}
[data-theme] .btn:hover { background: var(--surface-3); color: var(--ink); transform: none; }
[data-theme] .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
[data-theme] .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
[data-theme] .btn-danger { background: var(--seal); border-color: var(--seal); color: #fff; }
[data-theme] .btn-secondary { background: var(--surface-2); color: var(--ink-2); }
[data-theme] .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
[data-theme] .btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
[data-theme] .btn-sm { padding: 4px 10px; font-size: .74rem; }
[data-theme] .btn i { width: 15px; height: 15px; }
[data-theme] .form-control {
background: var(--surface-2); border: 1px solid var(--line);
border-radius: 7px; color: var(--ink); font-family: inherit; font-size: .85rem;
padding: 8px 10px;
}
[data-theme] .form-control:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
[data-theme] .form-group label {
font-size: .72rem; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; display: block;
}
[data-theme] .search-box {
background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px;
}
[data-theme] .search-box input { color: var(--ink); font-size: .82rem; }
[data-theme] .error { color: var(--seal); font-size: .78rem; }
/* 목록 위 걸개 — 상태 칸을 목업의 밑줄 탭으로 */
[data-theme] .status-tabs { border-bottom: 1px solid var(--line); gap: 2px; }
[data-theme] .status-tab {
background: transparent; border: 0; border-bottom: 2px solid transparent;
border-radius: 0; padding: 7px 12px; color: var(--ink-3);
font-size: .82rem; font-weight: 500; white-space: nowrap;
}
[data-theme] .status-tab:hover { color: var(--ink); background: transparent; }
[data-theme] .status-tab.active {
color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); background: transparent;
}
/* 목록 아래 — 몇 건인지, 합계가 얼마인지 */
[data-theme] .listfoot {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
margin-top: 10px; font-size: .74rem; color: var(--ink-3); flex-wrap: wrap;
}
[data-theme] .listfoot b { color: var(--ink); }
/* 화면 아래 한 줄 안내 — 목업의 screen-note.
규칙을 화면에 적어 두는 자리다. 여기 없으면 사람이 구매팀에 전화한다. */
[data-theme] .screen-note {
margin-top: 14px; padding: 11px 13px; border-radius: 8px;
font-size: .78rem; line-height: 1.6;
background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
[data-theme] .screen-note b { color: var(--ink); font-weight: 700; }
[data-theme] .screen-note.warn { background: var(--seal-soft); border-color: var(--seal); color: var(--ink); }
[data-theme] .summary-box { padding: 11px 13px; font-size: .8rem; color: var(--ink-2); }
[data-theme] .summary-box.warn { background: var(--seal-soft); border-color: var(--seal); color: var(--ink); }
/* ==========================================================================
현황판 — KPI 칸 · 막대그래프 · 알림
========================================================================== */
[data-theme] .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { [data-theme] .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[data-theme] .stat-card { padding: 12px 13px; display: block; }
[data-theme] .stat-card .stat-icon {
width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft);
color: var(--accent); box-shadow: none; float: right; margin: -2px -2px 0 0;
}
[data-theme] .stat-card .stat-icon i { width: 15px; height: 15px; }
[data-theme] .stat-label { font-size: .72rem; color: var(--ink-3); line-height: 1.4; display: block; }
[data-theme] .stat-value {
font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin-top: 4px;
color: var(--ink); display: block;
}
/* 붉은 칸 = 그날 안에 해야 하는 일. 목업이 이 한 가지로 급한 것을 가른다 */
[data-theme] .stat-card.red { border-color: var(--seal); background: var(--seal-soft); }
[data-theme] .stat-card.red .stat-value { color: var(--seal); }
[data-theme] .stat-card.red .stat-icon { background: var(--seal); color: #fff; }
[data-theme] .stat-card.amber .stat-icon { background: var(--warn-soft); color: var(--warn); }
[data-theme] .stat-card.green .stat-icon { background: var(--ok-soft); color: var(--ok); }
[data-theme] .dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { [data-theme] .dashboard-grid { grid-template-columns: minmax(0, 1fr); } }
/* 월별 막대 — 세로 막대. 값은 짚거나 탭하면 뜬다 */
[data-theme] .plot { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
[data-theme] .yax {
display: flex; flex-direction: column; justify-content: space-between; height: 118px;
font-family: 'Outfit', monospace; font-size: .64rem; color: var(--ink-3); text-align: right;
}
[data-theme] .bars { height: 118px; display: flex; align-items: flex-end; gap: 9px; border-bottom: 1px solid var(--line-strong); }
[data-theme] .bar { flex: 1; display: flex; justify-content: center; align-items: flex-end; height: 100%; position: relative; }
[data-theme] .bar i { display: block; width: 100%; max-width: 34px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
[data-theme] .bar[data-now] i { background: var(--accent-2); }
[data-theme] .bar .val {
position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 5px;
white-space: nowrap; font-family: 'Outfit', monospace; font-size: .66rem; font-weight: 700;
color: var(--ink); background: var(--surface); border: 1px solid var(--line);
border-radius: 4px; padding: 1px 5px; opacity: 0; transition: opacity .12s; pointer-events: none;
}
[data-theme] .bar:hover .val, [data-theme] .bar:focus-visible .val, [data-theme] .bar[data-label] .val { opacity: 1; }
[data-theme] .xax { display: flex; gap: 9px; margin-top: 6px; }
[data-theme] .xax span { flex: 1; text-align: center; font-family: 'Outfit', monospace; font-size: .64rem; color: var(--ink-3); }
/* 가로 막대 (통계 화면) */
[data-theme] .bar-track { background: var(--surface-3); border-radius: 4px; }
[data-theme] .bar-fill { background: var(--accent); border-radius: 4px; }
[data-theme] .bar-label, [data-theme] .bar-amt { color: var(--ink-3); font-size: .74rem; }
[data-theme] .bar-amt { color: var(--ink); font-family: 'Outfit', monospace; }
/* 최근 알림 */
[data-theme] .feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: .8rem; }
[data-theme] .feed li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); line-height: 1.5; }
[data-theme] .feed time { font-family: 'Outfit', monospace; font-size: .7rem; color: var(--ink-3); flex: 0 0 62px; padding-top: 1px; }
[data-theme] .feed b { color: var(--ink); font-weight: 600; }
/* 구매 파이프라인 — 단색으로 눕힌다 */
[data-theme] .pl-step { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
[data-theme] .pl-step:hover { transform: none; border-color: var(--line-strong); }
[data-theme] .pl-step.has { border-color: var(--accent); }
[data-theme] .pl-icon { background: var(--accent-soft); color: var(--accent); border-radius: 8px; }
[data-theme] .pl-step.has .pl-icon { background: var(--accent); color: var(--on-accent); }
[data-theme] .pl-n { font-family: 'Outfit', monospace; }
[data-theme] .pl-step.has .pl-n { color: var(--accent); }
[data-theme] .pl-arrow { color: var(--ink-3); }
/* ==========================================================================
결재선 · 3단계 대조 (앞 판에서 넣은 것을 새 색에 맞춘다)
========================================================================== */
[data-theme] .appr-pip { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-3); }
[data-theme] .appr-approved .appr-pip { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
[data-theme] .appr-rejected .appr-pip { background: var(--seal-soft); border-color: transparent; color: var(--seal); }
[data-theme] .appr-pending .appr-pip { background: var(--accent); border-color: transparent; color: var(--on-accent); }
[data-theme] .appr-step:not(:last-child)::before { background: var(--line-strong); }
[data-theme] .match-cell { background: var(--surface-2); border-color: var(--line); }
[data-theme] .match-cell b { font-family: 'Outfit', monospace; color: var(--ink); }
/* 검수 체크 목록 */
[data-theme] .checks { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 7px; }
[data-theme] .checks li { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--ink-2); }
[data-theme] .checks .box {
flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-strong);
background: var(--surface-2); margin-top: 3px; display: grid; place-items: center;
font-size: .6rem; color: transparent;
}
[data-theme] .checks .on .box { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
[data-theme] .checks .on { color: var(--ink); }
/* ==========================================================================
팝업 · 알림쪽지
========================================================================== */
[data-theme] .modal-overlay { background: rgba(0, 0, 0, .42); backdrop-filter: blur(2px); }
[data-theme] .modal-container { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); }
[data-theme] .modal-header { border-bottom: 1px solid var(--line); background: var(--surface-2); }
[data-theme] .modal-header h3 { font-size: 1.02rem; }
[data-theme] .modal-footer { border-top: 1px solid var(--line); background: var(--surface-2); }
[data-theme] .btn-close-modal { color: var(--ink-3); background: transparent; border: 0; }
[data-theme] .btn-close-modal:hover { color: var(--ink); }
[data-theme] .kv-row { border-bottom: 1px dashed var(--line); }
[data-theme] .kv-key { color: var(--ink-3); font-size: .74rem; }
[data-theme] .kv-val { color: var(--ink); font-size: .84rem; }
[data-theme] .items-sum { color: var(--ink-2); font-size: .82rem; }
[data-theme] .items-sum b { color: var(--accent); font-family: 'Outfit', monospace; font-size: 1.05rem; }
[data-theme] .log-line { font-size: .78rem; color: var(--ink-2); padding: 6px 0; border-bottom: 1px dashed var(--line); }
[data-theme] .toast {
background: var(--surface); border: 1px solid var(--line-strong);
color: var(--ink); border-radius: 9px; box-shadow: var(--shadow-lg); font-size: .82rem;
}
[data-theme] .toast-success { border-left: 3px solid var(--ok); }
[data-theme] .toast-error { border-left: 3px solid var(--seal); }
[data-theme] .toast-warning { border-left: 3px solid var(--warn); }
[data-theme] .toast-info { border-left: 3px solid var(--accent); }
/* ==========================================================================
테마 고르기 — 머리줄 오른쪽
========================================================================== */
.theme-pick { position: relative; }
.theme-pick-btn {
display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
border: 1px solid var(--border-color); border-radius: 7px;
background: var(--bg-card); color: var(--text-muted); cursor: pointer;
font-family: inherit; font-size: .78rem; font-weight: 600;
}
.theme-pick-btn:hover { background: var(--bg-card-hover); color: var(--text-main); }
.theme-pick-btn i { width: 15px; height: 15px; }
.theme-menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 2500; min-width: 190px;
padding: 6px; border: 1px solid var(--border-color); border-radius: 10px;
background: var(--bg-card); box-shadow: var(--shadow-lg);
}
.theme-menu[hidden] { display: none; }
.theme-opt {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px;
border: 0; border-radius: 7px; background: transparent; color: var(--text-muted);
font-family: inherit; font-size: .82rem; text-align: left; cursor: pointer;
}
.theme-opt:hover { background: var(--bg-card-hover); color: var(--text-main); }
.theme-opt[aria-current="true"] { background: rgba(108,140,255,.15); color: var(--color-primary); font-weight: 700; }
/* 색 미리보기 — 이름만 늘어놓으면 무엇이 밝고 어두운지 눌러 봐야 안다 */
.theme-chip {
width: 26px; height: 16px; border-radius: 4px; flex: 0 0 auto;
border: 1px solid var(--border-color); position: relative; overflow: hidden;
}
.theme-chip::after {
content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40%;
}
.theme-opt .sub { margin-left: auto; font-size: .68rem; color: var(--text-muted); font-weight: 400; }
/* 미리보기 색은 테마마다 고정값이다 — 지금 테마의 변수를 쓰면 넷이 다 같아 보인다 */
.chip-default { background: #141B31; } .chip-default::after { background: #6C8CFF; }
.chip-light { background: #F5F7FB; } .chip-light::after { background: #6C8CFF; }
.chip-paper { background: #FFFFFF; } .chip-paper::after { background: #0F4C75; }
.chip-ink { background: #171C24; } .chip-ink::after { background: #7FB2DC; }
.chip-grid { background: #FFFFFF; } .chip-grid::after { background: #000000; }
/* 모눈은 선으로 읽는 테마다 — 그림자가 없으니 테두리를 굵게 준다 */
body[data-theme="grid"] .data-table thead th,
body[data-theme="grid"] .glass, body[data-theme="grid"] .dashboard-card,
body[data-theme="grid"] .stat-card, body[data-theme="grid"] .table-wrap,
body[data-theme="grid"] .modal-container { border-width: 2px; border-color: var(--line-strong); }
body[data-theme="grid"] .badge { border-width: 2px; border-color: currentColor; }
@media (prefers-reduced-motion: reduce) { [data-theme] * { transition: none !important; animation: none !important; } }
/* ==========================================================================
로그인 화면 — 테마를 따라간다
← 본 화면만 옷을 갈아입히고 로그인은 두었더니, 종이 테마를 쓰는 사람이
매일 아침 남색 화면을 먼저 보고 들어왔다. 첫 화면이 앱의 첫인상이다.
========================================================================== */
[data-theme] .login-screen { background: var(--ground); }
[data-theme] .login-screen::before, [data-theme] .login-screen::after { display: none; }
[data-theme] .login-card {
background: var(--surface); border: 1px solid var(--line-strong);
border-radius: 12px; box-shadow: var(--shadow-lg); backdrop-filter: none;
}
[data-theme] .login-card h1 { color: var(--ink); }
[data-theme] .brand-logo {
background: var(--accent) !important; color: var(--on-accent) !important;
box-shadow: none !important; border-radius: 12px !important;
}
/* ==========================================================================
목록 위 걸개 배치 — 한 줄에 모으고, 상태 탭만 아래 줄로 내린다
← 찾기칸·탭·[새 요청]이 제각기 줄바꿈되어 네 줄을 먹었다. 목업은 한 줄이다.
HTML 순서(찾기 → 탭 → 체크 → 단추)는 그대로 두고 탭만 뒤로 미룬다 —
순서를 바꾸면 키보드로 탭 이동하는 차례가 눈에 보이는 것과 어긋난다.
========================================================================== */
[data-theme] .toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px;
}
[data-theme] .toolbar .search-box { flex: 1 1 190px; max-width: 320px; margin: 0; }
[data-theme] .toolbar .perm-item { white-space: nowrap; font-size: .8rem; color: var(--ink-2); }
[data-theme] .toolbar .toolbar-actions { margin-left: auto; display: flex; gap: 8px; }
[data-theme] .toolbar > .subtitle { flex: 1 1 auto; }
/* 탭은 언제나 마지막 줄 — 폭을 다 차지해 저절로 내려간다 */
[data-theme] .toolbar .status-tabs { order: 9; flex: 1 1 100%; margin: 2px 0 0; }
/* 읽기만 하는 칸 — 입력칸처럼 생겼지만 못 고친다(요청자처럼 시스템이 정하는 값) */
.val-readonly {
border: 1px solid var(--border-color); border-radius: 7px;
background: var(--bg-card-hover); color: var(--text-muted);
padding: 8px 10px; font-size: .85rem; min-height: 36px; display: flex; align-items: center;
}
/* 상신 전 점검 — 걸리는 것이 있으면 붉게, 없으면 조용히 */
#req-preflight { margin-top: 12px; }
#req-preflight.ok { background: var(--ok-soft, rgba(74,222,128,.12)); border-color: var(--ok, #4ade80); }
#req-preflight .pf { display: block; padding: 2px 0; }
#req-preflight .pf.bad { color: var(--seal, #f4738a); font-weight: 600; }
/* 금액별 결재선 안내 — 결재 화면 오른쪽 칸을 표로 눕혔다 */
.line-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.line-guide .lg {
border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px;
background: var(--bg-card-hover); font-size: .76rem; color: var(--text-muted);
}
.line-guide .lg b { display: block; color: var(--text-main); font-size: .8rem; margin-bottom: 2px; }
.line-guide .lg[data-now] { border-color: var(--color-primary); background: rgba(108,140,255,.12); }
.line-guide .lg[data-now] b { color: var(--color-primary); }
/* ==========================================================================
목록 표 — 정렬 · 거르기 · 쪽 넘기기
머리줄을 눌러 정렬하고, 그 아래 칸에 적어 거른다. 표 밖에 따로 찾기칸을 두면
"지금 무엇으로 걸러져 있나" 를 사람이 놓친다 — 걸린 칸에 글자가 남아 있어야 한다.
========================================================================== */
.th-sort {
display: inline-flex; align-items: center; gap: 4px; width: 100%;
background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
color: inherit; letter-spacing: inherit; text-align: inherit;
}
th.num .th-sort { justify-content: flex-end; }
.th-sort:hover { color: var(--color-primary); }
.th-sort:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }
.th-arrow { font-size: .62rem; opacity: .9; min-width: 8px; }
th[aria-sort] .th-sort { color: var(--color-primary); }
/* 거르기 줄 — 머리줄 바로 아래 붙는다 */
.filter-row th { padding: 4px 8px 7px; background: var(--bg-card-hover); border-bottom: 1px solid var(--border-color); }
.filter-row .f-in {
width: 100%; min-width: 60px; box-sizing: border-box;
padding: 4px 7px; border: 1px solid var(--border-color); border-radius: 5px;
background: var(--bg-card); color: var(--text-main);
font-family: inherit; font-size: .72rem; font-weight: 400;
}
.filter-row .f-in:focus { border-color: var(--color-primary); outline: none; }
.filter-row .f-in:not(:placeholder-shown),
.filter-row select.f-in:not([value=""]) { border-color: var(--color-primary); }
/* 웹킷이 붙이는 기본 지우기(×) 는 우리 디자인에 없다 */
.filter-row input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* 쪽 넘기개 */
.pager-box { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-box .page-size {
padding: 3px 6px; margin-right: 6px; border: 1px solid var(--border-color); border-radius: 5px;
background: var(--bg-card); color: var(--text-muted); font-family: inherit; font-size: .72rem;
}
.pager-box .pg {
min-width: 26px; padding: 3px 7px; border: 1px solid var(--border-color); border-radius: 5px;
background: var(--bg-card); color: var(--text-muted);
font-family: 'Outfit', monospace; font-size: .74rem; cursor: pointer;
}
.pager-box .pg:hover:not(:disabled) { color: var(--text-main); border-color: var(--color-primary); }
.pager-box .pg.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }
.pager-box .pg:disabled { opacity: .35; cursor: default; }
.pager-box .gap { font-style: normal; color: var(--text-muted); padding: 0 2px; }
/* ==========================================================================
팝업 폭 — 표가 든 팝업은 넓어야 한다
← 720px 안에 품명·규격·수량·단위·단가·금액 여섯 칸을 넣었더니 품명 칸에
글자 네 자만 보였다("27" QHI"). 무엇을 사는지 안 보이는 구매요청서는 쓸모가 없다.
좁은 화면 규칙(style.css 의 900px·560px)은 !important 라 그대로 이긴다 — 건드리지 않는다.
========================================================================== */
.modal-container { max-width: 820px; }
/* 품목 표가 든 것들 — 화면이 넓으면 넓게 쓴다 */
#req-modal .modal-container,
#detail-modal .modal-container,
#emergency-modal .modal-container,
#catimport-modal .modal-container,
#pick-modal .modal-container { max-width: min(1180px, 94vw); }
/* 값 몇 개만 받는 것들은 넓히면 오히려 눈이 멀리 간다 */
#confirm-modal .modal-container { max-width: 460px; }
#quotereq-modal .modal-container,
#budget-modal .modal-container,
#vendor-modal .modal-container { max-width: 620px; }
/* 품목 표 — 팝업이 넓어진 만큼 칸 너비를 정해 준다 */
.data-table.items th, .data-table.items td { padding: 5px 6px; }
.data-table.items .ri-name, .data-table.items .ri-spec, .data-table.items .ei-name { width: 100%; }
.data-table.items col.c-qty { width: 90px; }
.data-table.items col.c-unit { width: 74px; }
.data-table.items col.c-price { width: 120px; }
.data-table.items col.c-amt { width: 120px; }
.data-table.items col.c-del { width: 40px; }
/* 품목 고르기 팝업 — 표가 길어지므로 안에서만 구른다 */
#pick-modal .modal-body { max-height: min(62vh, 620px); overflow: auto; }
#pick-modal .data-table td { padding: 6px 10px; }
.pick-check { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.pick-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pick-bar .search-box { flex: 1 1 220px; }