/* ═══════════════════════════════════════════════════════════════
RUNA :root — 다크 모드 토큰
═══════════════════════════════════════════════════════════════ */
:root {
/* Surface */
--bg: #0b0c0f;
--bg2: #111217;
--bg3: #15171d;
--bg4: #1c1f27;
--bg5: #23262f;
/* Line */
--line: #20232b;
--line2: #2a2e38;
--line3: #3a404c;
/* Text */
--fg: #e9ebf0;
--fg2: #a3a8b4;
--fg3: #6f7684;
--fg4: #4a505c;
--text-primary: var(--fg);
--text-secondary: var(--fg2);
--text-muted: var(--fg3);
/* Accent */
--brand: #7c5cff;
--brand2: #9d86ff;
--brand-soft: rgba(124, 92, 255, .14);
--brand-line: rgba(124, 92, 255, .3);
/* Status */
--green: #2fd27e;
--green-soft: rgba(47, 210, 126, .12);
--amber: #f5a524;
--amber-soft: rgba(245, 165, 36, .12);
--red: #ff5a6e;
--red-soft: rgba(255, 90, 110, .12);
--blue: #4aa8ff;
--blue-soft: rgba(74, 168, 255, .12);
--mono: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
/* Text scale */
--text-xs: 11px;
--text-sm: 12.5px;
--text-base: 13.5px;
--text-lg: 16px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 28px;
--text-4xl: 32px;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
/* Radius */
--r-sm: 4px;
--r: 6px;
--r-md: 8px;
--r-lg: 10px;
--r-xl: 12px;
/* Shadow */
--sh-pop: 0 12px 32px -8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
--sh-card: 0 1px 2px rgba(0,0,0,.3);
}
html, body {
background: var(--bg);
color: var(--fg);
font-family: "Pretendard Variable", "Pretendard", system-ui, -apple-system, sans-serif !important;
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
* { font-family: inherit; }
.mono, .font-mono { font-family: var(--mono); }
/* ═══════════════════════════════════════════════════════════════
Filament chrome — 다크 색상 강제
═══════════════════════════════════════════════════════════════ */
.fi-body, .fi-main-ctn, .fi-main { background: var(--bg) !important; color: var(--fg); }
/* ─── 사이드바 (RUNA 244px 패턴) ─── */
.fi-sidebar { background: var(--bg2) !important; border-right: 1px solid var(--line) !important; width: 244px !important; }
.fi-sidebar-header {
background: var(--bg2) !important;
border-bottom: 1px solid var(--line) !important;
padding: 8px 10px !important;
min-height: 64px !important;
height: 64px !important;
display: flex !important;
align-items: center !important;
flex-shrink: 0;
}
.fi-sidebar-footer { background: var(--bg2) !important; border-top: 1px solid var(--line) !important; padding: 10px 8px !important; }
.fi-sidebar-nav { padding: 8px 10px !important; }
/* 사이드바 column 강제 — footer 가 margin-top:auto 로 하단 고정 가능하도록 */
.fi-sidebar { display: flex !important; flex-direction: column !important; }
.fi-sidebar-nav, .fi-sidebar > nav { flex: 1 1 auto !important; min-height: 0 !important; }
/* ─── runa-me 사이드바 footer (renderHook으로 inject) ─── */
.fi-sidebar .runa-me-ctn { flex-shrink: 0; }
.runa-me {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 6px 8px !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all .12s !important;
background: transparent !important;
border: 1px solid transparent !important;
}
.runa-me:hover {
background: var(--bg3) !important;
border-color: var(--line) !important;
}
.runa-me.runa-me-open {
background: var(--bg3) !important;
border-color: var(--brand-line) !important;
}
/* Filament 기본 user-menu / 사이드바 footer 영역 hide (RUNA widget 으로 대체) */
.fi-sidebar-footer { display: none !important; }
.fi-topbar .fi-user-menu, .fi-topbar .fi-dropdown { display: none !important; }
/* 브랜드 로고/이름 헤더 — 사이드바 안쪽 (runa-ws 한 줄 강제) */
.fi-sidebar-brand, .fi-sidebar-header-logo, .fi-sidebar-header > div, .fi-sidebar-header > a {
padding: 0 !important;
width: 100% !important;
height: auto !important;
min-width: 0 !important;
display: block !important;
text-decoration: none !important;
}
.fi-sidebar-brand a, .fi-sidebar-header-logo a, .fi-sidebar-header a:has(.runa-ws) {
padding: 0 !important;
height: auto !important;
display: block !important;
width: 100% !important;
text-decoration: none !important;
}
.fi-sidebar-header { overflow: visible !important; }
/* runa-ws 내부 flex 강제 — Filament 부모가 어떤 디스플레이여도 한 줄 */
.runa-ws { display: block !important; width: 100% !important; min-width: 0 !important; }
.runa-ws .runa-ws-trigger {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
.runa-ws .runa-ws-nm {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
flex: 1 1 0% !important;
}
.runa-ws .runa-ws-nrow {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
min-width: 0 !important;
}
/* brandLogoHeight 강제 무시 — runa-ws div 가 자체 패딩 */
.fi-sidebar .fi-logo, .fi-sidebar-header img, .fi-sidebar-header svg.fi-logo { height: auto !important; max-height: none !important; }
/* ─── topbar 의 logo 중복 표시 숨김 ─── */
.fi-topbar .fi-logo, .fi-topbar .fi-sidebar-header-logo, .fi-topbar > nav > a:has(.runa-ws),
.fi-topbar .me-6:has(.runa-ws), .fi-topbar .me-6 .runa-ws { display: none !important; }
/* 더 강력하게 — topbar 안의 brandLogo 영역 자체를 숨김 */
.fi-topbar nav > div:first-of-type:has(.runa-ws) { display: none !important; }
.fi-topbar a[href]:has(.runa-ws) { display: none !important; }
/* 검색바 (kbar) */
.fi-global-search-field, .fi-global-search { background: var(--bg3) !important; border: 1px solid var(--line) !important; color: var(--fg) !important; border-radius: var(--r-md) !important; height: 32px !important; font-size: 12.5px !important; }
.fi-global-search-field::placeholder { color: var(--fg3) !important; }
.fi-global-search-field:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
/* ─── 그룹 헤더 (.fi-sidebar-group-button) — 클릭 비활성 + RUNA 라벨 스타일 ─── */
.fi-sidebar-group-button {
cursor: default !important;
pointer-events: none !important;
padding: 12px 8px 4px !important;
gap: 6px !important;
background: transparent !important;
border: 0 !important;
}
.fi-sidebar-group-label {
color: var(--fg3) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
padding: 0 !important;
margin: 0 !important;
}
/* chevron 화살표 hide */
.fi-sidebar-group-collapse-button { display: none !important; }
/* ─── 그룹 자식 메뉴 (.fi-sidebar-group-items) — 항상 표시 (x-collapse/x-show 무시) ─── */
.fi-sidebar-group-items {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
height: auto !important;
max-height: none !important;
visibility: visible !important;
overflow: visible !important;
opacity: 1 !important;
}
/* alpine x-collapse 가 inline 으로 height:0; overflow:hidden 을 강제로 박는 케이스 차단 */
.fi-sidebar-group-items[style*="height"] {
height: auto !important;
overflow: visible !important;
}
/* 그룹 wrapper 자체 gap 줄여서 라벨-메뉴 사이 붙임 */
.fi-sidebar-group { gap: 0 !important; }
/* 메뉴 그룹 */
.fi-sidebar-nav-groups, .fi-sidebar-nav-group { gap: 2px !important; }
.fi-sidebar-nav-group { padding: 0 !important; }
/* 메뉴 아이템 */
.fi-sidebar-item { position: relative; }
.fi-sidebar-item-button {
border-radius: var(--r) !important;
color: var(--fg2) !important;
padding: 7px 9px !important;
font-size: 13px !important;
font-weight: 500 !important;
gap: 10px !important;
transition: background .12s, color .12s;
text-decoration: none !important;
line-height: 1.3 !important;
}
.fi-sidebar-item-button:hover { background: var(--bg3) !important; color: var(--fg) !important; }
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"] {
background: var(--bg3) !important; color: var(--fg) !important; font-weight: 600 !important;
}
/* 활성 메뉴 좌측 brand 세로 indicator bar */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
position: relative;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before {
content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 2px;
background: var(--brand); border-radius: 0 2px 2px 0;
display: block !important;
}
.fi-sidebar-item-icon { color: inherit !important; opacity: .8; width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon, .fi-sidebar-item-button.fi-active .fi-sidebar-item-icon { opacity: 1; color: var(--brand2) !important; }
.fi-sidebar-item-label { color: inherit !important; font-size: 13px !important; }
/* 카운터/뱃지 (Filament 사이드바 표시) — RUNA .cnt 패턴 */
.fi-sidebar-item .fi-badge {
margin-left: auto !important;
font-family: var(--mono) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
background: var(--bg) !important;
border: 1px solid var(--line2) !important;
color: var(--fg3) !important;
padding: 1px 6px !important;
border-radius: 10px !important;
height: auto !important;
min-height: 0 !important;
}
.fi-sidebar-item.fi-active .fi-badge,
.fi-sidebar-item-button.fi-active .fi-badge {
background: var(--brand-soft) !important;
border-color: var(--brand-line) !important;
color: var(--brand2) !important;
}
/* 컬랩스 토글 — 레퍼런스에는 없음. 숨김 */
.fi-sidebar-nav-group-collapse-button,
.fi-sidebar-group-collapse-button,
.fi-sidebar-nav-group > button[type="button"]:has(svg) { display: none !important; }
/* 그룹 항상 펼침 */
.fi-sidebar-nav-group .fi-sidebar-nav-group-items { display: flex !important; flex-direction: column !important; gap: 2px !important; }
/* ─── 탑바 — 완전 제거 (user menu 는 JS 로 사이드바 footer 로 이동) ─── */
.fi-topbar { display: none !important; }
/* fi-topbar 좌측 영역 (햄버거, 글로벌 검색, brand, 탭 nav) 전부 숨김 */
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn,
.fi-topbar .fi-breadcrumbs,
.fi-topbar nav > div:first-child:not(:has(.fi-user-menu-trigger)),
.fi-topbar .fi-global-search,
.fi-topbar .fi-global-search-trigger,
.fi-topbar-nav { display: none !important; }
/* user menu/notifications/theme-switcher 만 pointer-events 복원 */
.fi-topbar .fi-user-menu,
.fi-topbar .fi-user-menu-trigger,
.fi-topbar .fi-no-notifications,
.fi-topbar .fi-theme-switcher,
.fi-topbar .fi-icon-btn,
.fi-topbar nav > div:last-child { pointer-events: auto !important; }
/* tenant menu (탑바) */
.fi-tenant-menu, .fi-tenant-menu-trigger {
color: var(--fg) !important;
background: var(--bg3) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-md) !important;
padding: 4px 10px !important;
font-size: 13px !important;
}
.fi-tenant-menu:hover, .fi-tenant-menu-trigger:hover { background: var(--bg4) !important; border-color: var(--line2) !important; }
/* tenant menu 드롭다운 패널 룰은 파일 맨 끝으로 이동 — line 470 의 `.fi-dropdown-panel { color: var(--fg) }` 보다 뒤에 와야 cascade order 로 이김 */
/* global search trigger */
.fi-global-search-trigger, .fi-topbar [x-data*="searchOpen"] {
background: var(--bg3) !important;
border: 1px solid var(--line) !important;
color: var(--fg2) !important;
border-radius: var(--r-md) !important;
height: 30px !important;
}
.fi-global-search-trigger:hover { background: var(--bg4) !important; }
/* 아이콘 버튼 */
.fi-topbar .fi-icon-btn, .fi-topbar button[type="button"]:not(.btn) {
color: var(--fg2) !important; background: transparent !important;
}
.fi-topbar .fi-icon-btn:hover { background: var(--bg3) !important; color: var(--fg) !important; border-radius: var(--r) !important; }
/* ─── page-header(.page-tb) 를 진짜 topbar 자리에 ─── */
.fi-main {
padding-top: 64px !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
}
.fi-main.mx-auto, .fi-main[class*="px-"], .fi-main[class*="max-w"] {
margin: 0 !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important;
}
.fi-page, .fi-page > div {
padding-left: 0 !important; padding-right: 0 !important;
max-width: none !important;
}
.page-tb {
position: fixed !important;
top: 0 !important;
left: 244px !important; /* 사이드바 폭 만큼 옵셋 */
right: 0 !important;
height: 64px !important;
min-height: 64px !important;
margin: 0 !important;
padding: 0 20px !important;
border-bottom: 1px solid var(--line) !important;
background: var(--bg) !important;
z-index: 25; /* fi-topbar(30) 보다 낮게 — user menu 가 위로 */
}
/* 모바일에서 사이드바 폭 0 */
@media (max-width: 1024px) {
.page-tb { left: 0 !important; }
}
/* notifications badge */
.fi-no-notifications-trigger-badge {
background: var(--red) !important;
color: #fff !important;
border: 2px solid var(--bg) !important;
font-family: var(--mono) !important;
font-size: 9px !important;
font-weight: 700 !important;
}
/* 탑 네비게이션 (topNavigation=true 인 경우 메뉴 탭) */
.fi-topbar-nav, .fi-topbar nav ul { display: flex; gap: 0; align-self: stretch; }
.fi-topbar-nav .fi-sidebar-item-button, .fi-topbar nav a {
display: flex; align-items: center; padding: 0 14px !important; height: 48px !important;
color: var(--fg3) !important; font-size: 13px !important; font-weight: 500 !important;
border-bottom: 2px solid transparent !important; margin-bottom: -1px;
border-radius: 0 !important; background: transparent !important;
}
.fi-topbar-nav .fi-sidebar-item-button:hover, .fi-topbar nav a:hover { color: var(--fg2) !important; }
.fi-topbar-nav .fi-sidebar-item-button.fi-active, .fi-topbar-nav .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
color: var(--fg) !important; border-bottom-color: var(--brand) !important; background: transparent !important;
}
.fi-topbar-nav .fi-sidebar-item-button.fi-active::before { display: none; }
/* 유저 메뉴 트리거 */
.fi-user-menu-trigger { background: transparent !important; border-radius: var(--r-md) !important; padding: 4px 8px !important; transition: background .12s; }
.fi-user-menu-trigger:hover { background: var(--bg3) !important; }
.fi-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; }
/* 브레드크럼 in topbar */
.fi-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg2); }
.fi-breadcrumbs-item { color: var(--fg2) !important; }
.fi-breadcrumbs-item-separator { color: var(--fg4) !important; opacity: .5; }
.fi-breadcrumbs-item:last-child a, .fi-breadcrumbs-item:last-child span { color: var(--fg) !important; font-weight: 600; }
.fi-page, .fi-page-header { background: var(--bg) !important; color: var(--fg); }
.fi-header-heading { color: var(--fg) !important; }
.fi-header-subheading { color: var(--fg3) !important; }
.fi-breadcrumbs a, .fi-breadcrumbs-item { color: var(--fg2) !important; }
.fi-section, .fi-card, .fi-fo-card { background: var(--bg2) !important; border-color: var(--line) !important; box-shadow: var(--sh-card) !important; }
.fi-section-header { border-color: var(--line) !important; color: var(--fg) !important; }
.fi-input, .fi-select, .fi-textarea {
background: var(--bg3) !important; border-color: var(--line) !important; color: var(--fg) !important;
}
.fi-input:focus, .fi-select:focus, .fi-textarea:focus {
border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important;
}
/* 라이트 모드에서 color: var(--fg) 가 다크 토큰 값으로 새는 문제 — color 강제 제거
(자식 요소의 자체 Tailwind utility text-gray-700 dark:text-gray-200 가 작동하도록) */
.fi-modal-window { background: var(--bg2) !important; border-color: var(--line2) !important; box-shadow: var(--sh-pop) !important; color: var(--fg) !important; }
.fi-dropdown-panel { background: var(--bg2) !important; border-color: var(--line2) !important; box-shadow: var(--sh-pop) !important; }
.fi-ta-table { background: var(--bg2) !important; color: var(--fg); }
.fi-ta-header-cell, .fi-ta-header { background: var(--bg3) !important; border-color: var(--line) !important; color: var(--fg2) !important; }
.fi-ta-row { border-color: var(--line) !important; }
.fi-ta-row:hover { background: var(--bg3) !important; }
.fi-ta-cell { color: var(--fg2) !important; }
.fi-badge { background: var(--bg3) !important; border-color: var(--line2) !important; color: var(--fg2) !important; }
/* ═══════════════════════════════════════════════════════════════
공통 컴포넌트 클래스
═══════════════════════════════════════════════════════════════ */
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 28px; padding: 0 10px; border-radius: var(--r);
background: var(--bg3); border: 1px solid var(--line); color: var(--fg);
font: 600 12.5px/1 "Pretendard Variable", system-ui, sans-serif;
letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; user-select: none;
transition: background .12s, border-color .12s, color .12s;
font-variant-numeric: tabular-nums; text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--bg4); border-color: var(--line2); color: var(--fg); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }
.btn-primary {
background: var(--brand); border-color: var(--brand); color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 2px rgba(124,92,255,.3);
}
.btn-primary:hover:not(:disabled) { background: var(--brand2); border-color: var(--brand2); color: #fff; }
.btn-secondary { background: var(--bg3); border-color: var(--line); color: var(--fg2); }
.btn-secondary:hover:not(:disabled) { background: var(--bg4); border-color: var(--line2); color: var(--fg); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg2); }
.btn-ghost:hover:not(:disabled) { background: var(--bg3); color: var(--fg); }
.btn-danger { color: var(--red); border-color: var(--line); background: var(--bg3); }
.btn-danger:hover:not(:disabled) { background: var(--red-soft); border-color: rgba(255,90,110,.3); }
.btn-sm { height: 26px; padding: 0 8px; font-size: 12px; }
.btn-xs { height: 22px; padding: 0 7px; font-size: 11.5px; border-radius: 4px; }
.btn-lg { height: 34px; padding: 0 14px; font-size: 13.5px; }
/* Form inputs */
.form-input, .form-select, textarea.form-input {
width: 100%; height: 32px; padding: 0 10px;
background: var(--bg3); border: 1px solid var(--line); border-radius: var(--r);
color: var(--fg); font-size: 13px; outline: none;
font-family: inherit; transition: border-color .12s, box-shadow .12s;
}
textarea.form-input { height: auto; padding: 8px 10px; line-height: 1.5; min-height: 60px; }
.form-input::placeholder, .form-select::placeholder { color: var(--fg4); }
.form-input:focus, .form-select:focus {
border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.form-input:disabled, .form-select:disabled { background: var(--bg2); color: var(--fg3); cursor: not-allowed; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236f7684'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; padding-right: 28px; }
/* ─── Data table — RUNA .asn-tb 패턴 ─── */
.data-table {
width: 100%;
border-collapse: collapse;
background: var(--bg2);
color: var(--fg);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.data-table thead th {
background: var(--bg3);
padding: 10px 14px;
text-align: left;
font-weight: 600;
color: var(--fg3);
font-size: 10.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.data-table tbody tr {
transition: background .12s;
cursor: pointer;
}
.data-table tbody tr:hover {
background: var(--bg3);
}
.data-table tbody tr.sel,
.data-table tbody tr[data-selected="true"] {
background: var(--brand-soft);
}
.data-table tbody td {
padding: 12px 14px;
vertical-align: middle;
color: var(--fg);
font-size: 12.5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid var(--line);
}
/* 좌우 끝 셀에 여백 — facet border-right 와 시각 정렬 (우측은 2배) */
.data-table thead th:first-child,
.data-table tbody td:first-child { padding-left: 18px; }
.data-table thead th:last-child,
.data-table tbody td:last-child { padding-right: 36px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr.sel td,
.data-table tbody tr[data-selected="true"] td {
border-bottom-color: var(--brand-line);
}
.data-table thead th { border-color: var(--line); }
/* ─── RUNA .ship-tb 패턴 (운송장/주문 셀 변형) ─── */
.data-table .tn { font-family: var(--mono); font-size: 11.5px; color: var(--brand2); font-weight: 600; }
.data-table .ord { font-family: var(--mono); font-size: 11px; color: var(--fg3); display: block; margin-top: 2px; }
.data-table .dest { font-weight: 500; }
.data-table .dest small { display: block; color: var(--fg3); font-size: 11px; font-family: var(--mono); margin-top: 2px; font-weight: 400; }
.data-table .eta { font-family: var(--mono); font-size: 11.5px; }
.data-table .eta b { font-weight: 600; }
.data-table .eta.late { color: var(--red); }
.data-table .eta.soon { color: var(--amber); }
.data-table .eta small { display: block; color: var(--fg3); font-size: 10.5px; font-weight: 400; margin-top: 2px; }
/* RUNA .ship-stat — 상태 pill (color variants) */
.ship-stat {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: 4px;
white-space: nowrap;
}
.ship-stat.label { background: var(--bg3); color: var(--fg2); border: 1px solid var(--line2); }
.ship-stat.pickup { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(74,168,255,.3); }
.ship-stat.hub { background: var(--brand-soft); color: var(--brand2); border: 1px solid var(--brand-line); }
.ship-stat.out { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.25); }
.ship-stat.delivered{ background: var(--green-soft); color: var(--green); border: 1px solid rgba(47,210,126,.25); }
.ship-stat.exc { background: var(--red-soft); color: var(--red); border: 1px solid rgba(255,90,110,.3); }
.ship-stat.delay { background: rgba(157,134,255,.15); color: #b39eff; border: 1px solid rgba(157,134,255,.3); }
/* ─── RUNA inventory.html 패턴 — facet (좌 필터) + inv-main (우 컨텐츠) ─── */
.inv-layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr); /* minmax(0, 1fr) 로 자식 overflow 가 부모 width 키우는 것 차단 */
gap: 14px;
align-items: start;
min-width: 0;
}
.inv-layout > * { min-width: 0; }
@media (max-width: 1280px) {
.inv-layout { grid-template-columns: minmax(0, 1fr); }
}
.facet {
background: var(--bg2);
border: 0;
border-right: 1px solid var(--line); /* RUNA .facet — 우측 라인만 */
border-radius: 0; /* 박스 효과 제거 (각진 패널) */
overflow: auto;
padding: 14px 10px;
height: 100vh; /* sticky 해제 + 풀 화면 높이 */
}
.facet .sect {
font-size: 10.5px; font-weight: 600; color: var(--fg3);
letter-spacing: 0.06em; text-transform: uppercase;
padding: 10px 8px 6px; display: flex; align-items: center; gap: 4px;
}
.facet .sect .sp { flex: 1; }
.facet .sect .clr { color: var(--brand2); font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
.facet .f-it {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 4px;
color: var(--fg2); font-size: 12.5px; cursor: pointer;
transition: background .12s;
}
.facet .f-it:hover { background: var(--bg3); color: var(--fg); }
.facet .f-it input { accent-color: var(--brand); width: 12px; height: 12px; margin: 0; cursor: pointer; }
.facet .f-it .cnt { margin-left: auto; font-family: var(--mono); color: var(--fg3); font-size: 11px; }
.facet .f-it.on { color: var(--fg); font-weight: 500; }
.facet .f-it .sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.inv-main { display: flex; flex-direction: column; min-width: 0; gap: 14px; }
/* stat-c (RUNA inventory.html 가로 strip) */
.stats {
display: grid;
grid-template-columns: repeat(var(--stat-cols, 5), 1fr);
gap: 0;
background: var(--bg);
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
}
.stat-c {
padding: 14px 18px;
border-right: 1px solid var(--line);
display: flex; flex-direction: column; gap: 4px;
}
.stat-c:last-child { border-right: none; }
.stat-c .l { font-size: 11px; color: var(--fg3); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.stat-c .l svg { width: 11px; height: 11px; opacity: .7; flex-shrink: 0; }
.stat-c .v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--fg); }
.stat-c .v small { font-size: 11px; color: var(--fg3); font-weight: 500; margin-left: 2px; }
.stat-c .sub { font-size: 11px; color: var(--fg3); }
.stat-c .sub b.up { color: var(--green); }
.stat-c .sub b.dn { color: var(--red); }
/* selbar — bulk action bar */
.selbar {
display: flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: var(--brand-soft);
border: 1px solid var(--brand-line);
border-radius: var(--r-md);
font-size: 12.5px;
}
.selbar b { color: var(--brand2); font-weight: 600; }
/* alert-pill (재고 알림) */
.alert-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px; border-radius: 3px;
font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.alert-pill.out { background: var(--red-soft); color: var(--red); border: 1px solid rgba(255,90,110,.25); }
.alert-pill.low { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.25); }
.alert-pill.ok { background: var(--green-soft); color: var(--green); border: 1px solid rgba(47,210,126,.25); }
.alert-pill.over { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(74,168,255,.3); }
.alert-pill.dead { background: var(--bg4); color: var(--fg3); border: 1px solid var(--line2); }
/* loc-pill (위치 표시) */
.loc-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 6px; background: var(--bg4); border: 1px solid var(--line2);
border-radius: 3px; font-family: var(--mono); font-size: 10.5px;
color: var(--fg2); font-weight: 500;
}
.loc-pill b { color: var(--fg); font-weight: 600; }
/* inv-tb 셀 변형 (.nm, .img, .n, .bar) */
.data-table .img-cell {
width: 32px; height: 32px;
background: var(--bg4); border-radius: 4px; border: 1px solid var(--line2);
display: grid; place-items: center;
color: var(--fg3); font-family: var(--mono); font-size: 9px; font-weight: 600;
flex-shrink: 0;
}
.data-table .nm { font-weight: 500; color: var(--fg); white-space: normal; }
.data-table .nm small {
color: var(--fg3); font-family: var(--mono); font-size: 11px;
display: block; margin-top: 2px; font-weight: 400;
}
.data-table .n { font-family: var(--mono); font-weight: 600; text-align: right; }
.data-table .n small { color: var(--fg3); font-weight: 400; font-size: 11px; margin-left: 2px; }
.data-table .n.r { color: var(--red); }
.data-table .n.a { color: var(--amber); }
.data-table .n.g { color: var(--green); }
/* bar (stock progress) */
.data-table .bar { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.data-table .bar .track {
flex: 1; height: 5px; background: var(--bg4);
border-radius: 3px; overflow: hidden; position: relative;
}
.data-table .bar .track i {
display: block; height: 100%; background: var(--green);
}
.data-table .bar .track i.a { background: var(--amber); }
.data-table .bar .track i.r { background: var(--red); }
.data-table .bar .lbl {
font-family: var(--mono); font-size: 11px; color: var(--fg3);
min-width: 60px; text-align: right;
}
/* hover-only actions */
.data-table .row-actions { opacity: 0; display: flex; gap: 4px; transition: opacity .12s; justify-content: flex-end; }
.data-table tbody tr:hover .row-actions { opacity: 1; }
/* ─── RUNA inbound.html 패턴 — 상세 패널 ─── */
.asn-d-h {
padding: 16px 22px;
border-bottom: 1px solid var(--line);
background: var(--bg2);
}
.asn-d-h .id {
font-family: var(--mono); font-size: 12px;
color: var(--brand2); font-weight: 600;
letter-spacing: 0.04em;
}
.asn-d-h h2 {
margin: 6px 0 4px;
font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
color: var(--fg);
}
.asn-d-h .meta {
font-size: 12px; color: var(--fg3);
display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
}
.asn-d-h .meta span { display: inline-flex; align-items: center; gap: 5px; }
.asn-d-h .meta span svg { width: 12px; height: 12px; color: var(--fg4); flex-shrink: 0; }
/* vstep — 진행 단계 세로 타임라인 */
.vstep { padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.vstep .v-it {
display: grid; grid-template-columns: 24px 1fr auto;
gap: 10px; padding: 7px 0; align-items: center; position: relative;
}
.vstep .v-it::after {
content: ""; position: absolute; left: 11px; top: 26px; bottom: -7px;
width: 1px; background: var(--line2);
}
.vstep .v-it:last-child::after { display: none; }
.vstep .v-it .dot {
width: 22px; height: 22px; border-radius: 50%;
background: var(--bg3); border: 1px solid var(--line2);
display: grid; place-items: center;
color: var(--fg3); z-index: 1;
font-family: var(--mono); font-size: 10px; font-weight: 600;
}
.vstep .v-it.d .dot { background: var(--green); color: #041a0e; border-color: var(--green); }
.vstep .v-it.d .dot svg { width: 11px; height: 11px; }
.vstep .v-it.n .dot { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.vstep .v-it.exc .dot { background: var(--red); color: #fff; border-color: var(--red); }
.vstep .v-it .lbl { font-size: 13px; color: var(--fg3); font-weight: 500; }
.vstep .v-it.d .lbl, .vstep .v-it.n .lbl, .vstep .v-it.exc .lbl { color: var(--fg); font-weight: 600; }
.vstep .v-it .t { font-size: 11px; color: var(--fg3); font-family: var(--mono); }
/* rec — 품목별 검수 행 (RUNA .ac-row 컴팩트 패턴) */
.rec { padding: 0; }
.rec-row {
display: grid; grid-template-columns: 26px 1fr 70px 80px;
gap: 10px; padding: 10px 14px;
border-bottom: 1px solid var(--line);
align-items: center; font-size: 12.5px;
cursor: pointer;
transition: background .12s;
}
.rec-row:last-child { border-bottom: none; }
.rec-row:hover { background: var(--bg3); }
/* RUNA .ac-row.on 패턴: 좌측 brand bar — 단순 배경 강조 대신 더 정돈된 표기 */
.rec-row.ok { border-left: 2px solid var(--green); padding-left: 12px; }
.rec-row.short { border-left: 2px solid var(--amber); padding-left: 12px; }
.rec-row.dmg { border-left: 2px solid var(--red); padding-left: 12px; }
.rec-row .ch {
width: 20px; height: 20px; border-radius: 4px;
display: grid; place-items: center;
background: var(--bg3); border: 1.5px solid var(--line3); color: var(--fg4);
}
.rec-row.ok .ch { background: var(--green); border-color: var(--green); color: #041a0e; }
.rec-row.ok .ch svg { width: 12px; height: 12px; }
.rec-row.short .ch { background: var(--amber); border-color: var(--amber); color: #0a0a0a; }
.rec-row.short .ch svg { width: 11px; height: 11px; }
.rec-row.dmg .ch { background: var(--red); border-color: var(--red); color: #fff; }
.rec-row.dmg .ch svg { width: 11px; height: 11px; }
.rec-row .sku { font-weight: 500; color: var(--fg); min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-row .sku small {
display: block; color: var(--fg3); font-size: 10.5px;
font-family: var(--mono); margin-top: 2px; font-weight: 400;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-row .ex { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--fg3); }
.rec-row .rc { text-align: right; font-family: var(--mono); font-size: 13px; font-weight: 700; }
.rec-row .rc.ok { color: var(--green); }
.rec-row .rc.s { color: var(--amber); }
.rec-row .rc.d { color: var(--red); }
.rec-row .rc small {
display: block; font-size: 10px; font-weight: 400;
margin-top: 2px; font-family: var(--mono);
}
.actions-bar {
padding: 14px 22px; border-top: 1px solid var(--line);
background: var(--bg2); display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
/* ─── RUNA asn-review.html 패턴 (입고 검수 리뷰) ─── */
.rv {
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
height: calc(100vh - 64px);
overflow: hidden;
}
.rv-list {
background: var(--bg2);
border-right: 1px solid var(--line);
overflow-y: auto;
display: flex; flex-direction: column;
}
.rv-main {
overflow-y: auto;
padding: 18px 22px 40px;
display: flex; flex-direction: column; gap: 14px;
min-width: 0; background: var(--bg);
}
.rv .lh {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
position: sticky; top: 0; background: var(--bg2); z-index: 2;
}
.rv .lh h2 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--fg); }
.rv .lh .sub { font-size: 11.5px; color: var(--fg3); font-family: var(--mono); }
.rv .lh .tabs { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.rv .lh .tabs .t {
padding: 4px 8px; font-size: 11.5px; font-weight: 600;
color: var(--fg3); background: var(--bg3);
border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.rv .lh .tabs .t:hover { color: var(--fg2); }
.rv .lh .tabs .t.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.rv .lh .tabs .t .c { margin-left: 4px; opacity: 0.7; font-family: var(--mono); font-size: 10.5px; }
.asn-it {
padding: 12px 14px; border-bottom: 1px solid var(--line);
cursor: pointer; display: flex; flex-direction: column; gap: 6px;
transition: background .12s; position: relative;
}
.asn-it:hover { background: var(--bg3); }
.asn-it.sel { background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: 11px; }
.asn-it.new { background: rgba(74,168,255,.04); }
.asn-it.new::before {
content: "NEW"; position: absolute; top: 10px; right: 12px;
font-family: var(--mono); font-size: 9px; font-weight: 700;
background: var(--blue); color: #fff; padding: 1px 5px;
border-radius: 3px; letter-spacing: 0.04em;
}
.asn-it .top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.asn-it .top .id { font-family: var(--mono); color: var(--brand2); font-weight: 700; }
.asn-it .top .age { color: var(--fg3); font-family: var(--mono); font-size: 10.5px; margin-left: auto; }
.asn-it .vendor { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.asn-it .meta { display: flex; gap: 10px; font-size: 11px; color: var(--fg3); font-family: var(--mono); flex-wrap: wrap; }
.asn-it .meta b { color: var(--fg2); font-weight: 600; }
.asn-it .stt {
font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
letter-spacing: 0.04em; font-family: var(--mono);
display: inline-block; width: fit-content;
}
.asn-it .stt.pending { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.3); }
.asn-it .stt.appr { background: var(--green-soft); color: var(--green); border: 1px solid rgba(47,210,126,.3); }
.asn-it .stt.exc { background: var(--red-soft); color: var(--red); border: 1px solid rgba(255,90,110,.3); }
.asn-it .stt.recv { background: var(--brand-soft); color: var(--brand2); border: 1px solid var(--brand-line); }
/* Main hero */
.hd-bar { display: flex; align-items: flex-start; gap: 14px; }
.hd-bar h1 {
margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hd-bar h1 .id-pill {
font-family: var(--mono); font-size: 13px; color: var(--brand2);
background: var(--brand-soft); padding: 3px 8px; border-radius: 4px;
border: 1px solid var(--brand-line);
}
.hd-bar h1 .stt-pill {
font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.3);
}
.hd-bar .meta { margin-top: 4px; font-size: 12px; color: var(--fg3); display: flex; gap: 14px; flex-wrap: wrap; }
.hd-bar .meta b { color: var(--fg); font-weight: 600; }
.hd-bar .sp { flex: 1; }
.hd-bar .act { display: flex; gap: 6px; flex-shrink: 0; }
/* Diff alert */
.alert {
padding: 12px 14px; background: var(--amber-soft);
border: 1px solid rgba(245,165,36,.3); border-radius: 8px;
display: flex; align-items: center; gap: 10px;
font-size: 12.5px; line-height: 1.5; color: var(--fg);
}
.alert svg { width: 14px; height: 14px; color: var(--amber); flex-shrink: 0; }
.alert b { color: var(--amber); font-weight: 700; }
.alert .sp { flex: 1; }
/* Two col row */
.row2 { display: grid; grid-template-columns: 1.6fr minmax(0, 1fr); gap: 16px; align-items: flex-start; }
@media (max-width: 1100px) { .row2 { grid-template-columns: 1fr; } }
/* cmp-tb (vendor PO 비교 / 입고 검수 테이블) */
.cmp-tb { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp-tb th {
text-align: left; padding: 9px 12px;
font-size: 10.5px; color: var(--fg3); font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase;
border-bottom: 1px solid var(--line); background: var(--bg3); white-space: nowrap;
}
.cmp-tb td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
.cmp-tb tr:last-child td { border-bottom: none; }
.cmp-tb .sku { font-family: var(--mono); font-weight: 600; color: var(--brand2); }
.cmp-tb .nm { font-weight: 500; color: var(--fg); }
.cmp-tb .q { font-family: var(--mono); text-align: right; font-weight: 600; color: var(--fg); }
.cmp-tb .diff { font-family: var(--mono); text-align: right; font-weight: 700; }
.cmp-tb .diff.match { color: var(--fg3); }
.cmp-tb .diff.neg { color: var(--amber); }
.cmp-tb .diff.over { color: var(--blue); }
.cmp-tb-wrap { overflow-x: auto; }
.cmp-tb tr.mismatch { background: rgba(245,165,36,.04); }
/* Dock assign grid */
.dk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dk {
padding: 10px; background: var(--bg); border: 1.5px solid var(--line2);
border-radius: 6px; text-align: center; cursor: pointer;
transition: all .12s;
}
.dk:hover { border-color: var(--line3); background: var(--bg3); }
.dk.sel { border-color: var(--brand); background: var(--brand-soft); }
.dk.busy { border-color: var(--green); background: rgba(47,210,126,.05); opacity: 0.7; cursor: not-allowed; }
.dk.maint { border-color: var(--amber); background: rgba(245,165,36,.05); border-style: dashed; opacity: 0.5; cursor: not-allowed; }
.dk .n { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--fg); }
.dk .s { font-size: 10.5px; color: var(--fg3); margin-top: 2px; }
/* Inspector pick */
.ins-pick { display: flex; flex-direction: column; gap: 5px; }
.ins {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; background: var(--bg);
border: 1.5px solid var(--line2); border-radius: 5px;
cursor: pointer; transition: all .12s;
}
.ins:hover { border-color: var(--line3); background: var(--bg3); }
.ins.sel { border-color: var(--brand); background: var(--brand-soft); }
.ins .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.ins .info { flex: 1; font-size: 12px; line-height: 1.3; min-width: 0; }
.ins .info b { display: block; font-weight: 600; color: var(--fg); }
.ins .info small { color: var(--fg3); font-size: 10.5px; }
.ins .lo { font-size: 10.5px; color: var(--fg3); font-family: var(--mono); flex-shrink: 0; }
.ins.busy { opacity: 0.6; }
.ins.busy .lo { color: var(--amber); font-weight: 700; }
/* Vendor info card */
.ven-card { padding: 14px 16px; }
.ven-card .top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ven-card .lg {
width: 36px; height: 36px; border-radius: 7px;
background: linear-gradient(135deg, #ff9966, #ff5e62);
color: #fff; display: grid; place-items: center;
font-weight: 800; font-size: 14px; letter-spacing: -0.02em; flex-shrink: 0;
}
.ven-card .info b { display: block; font-size: 13px; font-weight: 700; color: var(--fg); }
.ven-card .info small { color: var(--fg3); font-size: 11px; font-family: var(--mono); }
.ven-card .kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12px; }
.ven-card .kv .k { color: var(--fg3); }
.ven-card .kv .v { color: var(--fg); font-weight: 500; text-align: right; }
.ven-card .kv .v.mono { font-family: var(--mono); font-size: 11.5px; }
/* Timeline */
.tl-it {
display: grid; grid-template-columns: 22px 1fr; gap: 10px;
padding: 7px 14px; font-size: 12px;
align-items: flex-start; position: relative;
}
.tl-it::after {
content: ""; position: absolute; left: 24px; top: 22px; bottom: -7px;
width: 1px; background: var(--line2);
}
.tl-it:last-child::after { display: none; }
.tl-it .dt {
width: 20px; height: 20px; border-radius: 50%;
background: var(--bg3); border: 1.5px solid var(--line2);
display: grid; place-items: center;
color: var(--fg3); font-family: var(--mono); font-size: 10px; font-weight: 700; z-index: 1;
}
.tl-it.d .dt { background: var(--green); color: #041a0e; border-color: var(--green); }
.tl-it.n .dt { background: var(--brand); color: #fff; border-color: var(--brand); }
.tl-it .ev b { font-weight: 600; color: var(--fg2); line-height: 1.3; }
.tl-it.d .ev b, .tl-it.n .ev b { color: var(--fg); }
.tl-it .ev small { display: block; color: var(--fg3); font-family: var(--mono); font-size: 10.5px; margin-top: 2px; }
/* Action bar (rv-main 안 하단 sticky) */
.actbar {
padding: 14px 18px; background: var(--bg2);
border: 1px solid var(--line); border-radius: 10px;
display: flex; gap: 8px; align-items: center;
}
.actbar .hint-txt { font-size: 11.5px; color: var(--fg3); font-family: var(--mono); }
.actbar .sp { flex: 1; }
/* ─── RUNA sku.html 패턴 — 상세 페이지 ─── */
.sku-hero {
background: var(--bg2);
border-bottom: 1px solid var(--line);
padding: 22px 28px;
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 22px;
align-items: center;
}
.sku-hero .img {
width: 140px; height: 140px; border-radius: var(--r-md);
background: linear-gradient(135deg, #2a1f3d, #14101c);
border: 1px solid var(--line2);
display: grid; place-items: center;
color: var(--brand2); font-family: var(--mono);
font-weight: 700; font-size: 32px;
position: relative; overflow: hidden; flex-shrink: 0;
}
.sku-hero .img::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.18), transparent 60%);
}
.sku-hero .img span { position: relative; z-index: 1; }
.sku-hero .info { min-width: 0; }
.sku-hero .info h1 {
margin: 0; font-size: 22px; font-weight: 700;
letter-spacing: -0.02em;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
color: var(--fg);
}
.sku-hero .info .id {
font-family: var(--mono); font-size: 13px;
color: var(--fg3); margin-top: 4px;
}
.sku-hero .info .tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sku-hero .info .meta {
display: flex; gap: 18px; margin-top: 14px;
font-size: 12.5px; color: var(--fg2); flex-wrap: wrap;
}
.sku-hero .info .meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sku-hero .info .meta .k {
font-size: 10.5px; color: var(--fg3); font-weight: 600;
letter-spacing: 0.05em; text-transform: uppercase;
}
.sku-hero .info .meta .v { font-weight: 600; color: var(--fg); }
.sku-hero .act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.sku-tabs {
display: flex; gap: 0; padding: 0 28px;
border-bottom: 1px solid var(--line); background: var(--bg2);
position: sticky; top: 0; z-index: 2;
}
.sku-tabs button {
padding: 14px 16px; color: var(--fg3);
font-size: 13px; font-weight: 500;
border-bottom: 2px solid transparent; margin-bottom: -1px;
cursor: pointer; background: transparent; border-left: 0; border-right: 0; border-top: 0;
font-family: inherit; display: inline-flex; align-items: center;
transition: color .12s, border-color .12s;
}
.sku-tabs button.on { color: var(--fg); border-bottom-color: var(--brand); font-weight: 600; }
.sku-tabs button:hover:not(.on) { color: var(--fg2); }
.sku-tabs .cnt {
background: var(--bg3); font-family: var(--mono); font-size: 10.5px;
padding: 1px 5px; border-radius: 10px; margin-left: 6px; color: var(--fg2);
}
.sku-body { padding: 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .row3, .row2 { grid-template-columns: 1fr; } }
.kpi-block {
background: var(--bg2); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 16px 18px;
display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.kpi-block .l {
font-size: 11px; color: var(--fg3); font-weight: 600;
letter-spacing: 0.05em; text-transform: uppercase;
display: flex; align-items: center; gap: 6px;
}
.kpi-block .l svg { width: 12px; height: 12px; opacity: .7; flex-shrink: 0; }
.kpi-block .v {
font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg);
}
.kpi-block .v small { font-size: 13px; color: var(--fg3); font-weight: 500; margin-left: 2px; }
.kpi-block .d { font-size: 12px; color: var(--fg3); display: flex; align-items: center; gap: 5px; }
.kpi-block .d b { font-weight: 600; }
.kpi-block .d b.up { color: var(--green); }
.kpi-block .d b.dn { color: var(--red); }
.wh-list { padding: 0; }
.wh-row {
display: grid; grid-template-columns: 60px 1fr auto 100px;
gap: 14px; padding: 12px 18px;
border-bottom: 1px solid var(--line); align-items: center;
font-size: 12.5px;
}
.wh-row:last-child { border-bottom: none; }
.wh-row:hover { background: var(--bg3); }
.wh-row .code {
font-family: var(--mono); font-size: 11px;
color: var(--fg3); background: var(--bg3); padding: 3px 6px;
border-radius: 3px; border: 1px solid var(--line);
text-align: center; font-weight: 600;
}
.wh-row .nm { font-weight: 500; min-width: 0; overflow: hidden; }
.wh-row .nm small { display: block; color: var(--fg3); font-size: 11px; margin-top: 2px; }
.wh-row .wh-bar {
width: 140px; height: 6px; background: var(--bg4);
border-radius: 3px; overflow: hidden; border: 1px solid var(--line);
}
.wh-row .wh-bar i { display: block; height: 100%; background: var(--green); }
.wh-row .wh-bar i.a { background: var(--amber); }
.wh-row .wh-bar i.r { background: var(--red); }
.wh-row .n { font-family: var(--mono); font-weight: 700; text-align: right; }
.wh-row .n small { color: var(--fg3); font-weight: 400; font-size: 11px; margin-left: 2px; }
.info-card {
background: var(--bg2); border: 1px solid var(--line);
border-radius: var(--r-lg); overflow: hidden;
}
.info-card .hd {
padding: 12px 16px; border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 8px;
}
.info-card .hd h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--fg); }
.info-card .hd .sp { flex: 1; }
.info-card .bd { padding: 14px 16px; font-size: 12.5px; }
.info-card .bd .kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; }
.info-card .bd .kv .k { color: var(--fg3); font-weight: 500; }
.info-card .bd .kv .v { color: var(--fg); font-weight: 500; word-break: break-all; }
.info-card .bd .kv .v.mono { font-family: var(--mono); font-size: 12px; }
.forecast {
padding: 14px 18px;
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
background: var(--amber-soft); border: 1px solid rgba(245,165,36,.2);
border-radius: var(--r-md); margin-top: 6px;
}
.forecast .f-c { display: flex; flex-direction: column; gap: 4px; }
.forecast .f-c .l { font-size: 10.5px; color: var(--fg3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.forecast .f-c .v { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--amber); }
.forecast .f-c .s { font-size: 11px; color: var(--fg3); }
/* RUNA .progress .dots — 진행 단계 점 표시 (5개 dot) */
.data-table .progress.dots-wrap { display: flex; align-items: center; gap: 6px; }
.data-table .dots { display: flex; gap: 3px; }
.data-table .dots i {
width: 6px; height: 6px; border-radius: 50%;
background: var(--bg4); border: 1px solid var(--line2);
display: inline-block;
}
.data-table .dots i.on { background: var(--brand); border-color: var(--brand); }
.data-table .dots i.done { background: var(--green); border-color: var(--green); }
.data-table .dots i.exc { background: var(--red); border-color: var(--red); }
/* 셀 강조 패턴 */
.data-table .cell-id {
font-family: var(--mono);
font-size: 11.5px;
color: var(--fg3);
}
.data-table .cell-name {
font-weight: 600;
color: var(--fg);
}
.data-table .cell-name small {
display: block;
color: var(--fg3);
font-size: 11px;
font-weight: 400;
margin-top: 2px;
}
.data-table .cell-qty,
.data-table .cell-num {
font-family: var(--mono);
font-weight: 600;
text-align: right;
}
.data-table .cell-qty small {
color: var(--fg3);
font-weight: 400;
font-size: 11px;
margin-left: 2px;
}
.data-table .cell-mono {
font-family: var(--mono);
font-size: 11.5px;
color: var(--fg2);
}
.data-table .cell-actions {
text-align: right;
white-space: nowrap;
}
/* 체크박스 셀 */
.data-table .cell-cb {
width: 28px;
text-align: center;
}
.data-table .cell-cb input[type="checkbox"] {
accent-color: var(--brand);
width: 13px;
height: 13px;
cursor: pointer;
}
/* 진행률 바 (RUNA .asn-tb .progress) */
.data-table .progress {
display: flex;
gap: 8px;
align-items: center;
}
.data-table .progress .bar {
width: 100px;
height: 5px;
background: var(--bg4);
border-radius: 3px;
overflow: hidden;
border: 1px solid var(--line);
}
.data-table .progress .bar i {
display: block;
height: 100%;
background: var(--brand);
}
.data-table .progress .bar i.g { background: var(--green); }
.data-table .progress .bar i.a { background: var(--amber); }
.data-table .progress .lbl {
font-family: var(--mono);
font-size: 11px;
color: var(--fg3);
min-width: 40px;
}
/* dock 인디케이터 (점 + 텍스트) */
.data-table .dock {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 11px;
color: var(--fg2);
}
.data-table .dock i {
width: 8px; height: 8px; border-radius: 50%;
background: var(--green);
}
.data-table .dock.idle i { background: var(--fg3); }
/* Badge + Tag */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; border: 1px solid var(--line2); color: var(--fg2); background: var(--bg3); white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; border: 1px solid var(--line2); color: var(--fg2); background: var(--bg3); white-space: nowrap; }
.tag-success { background: var(--green-soft); color: var(--green); border-color: rgba(47,210,126,.25); }
.tag-danger { background: var(--red-soft); color: var(--red); border-color: rgba(255,90,110,.25); }
.tag-brand { background: var(--brand-soft); color: var(--brand2); border-color: var(--brand-line); }
.tag-warning { background: var(--amber-soft); color: var(--amber); border-color: rgba(245,165,36,.25); }
.tag-info { background: var(--blue-soft); color: var(--blue); border-color: rgba(74,168,255,.3); }
/* Chip */
.chip {
display: inline-flex; align-items: center; gap: 6px;
height: 26px; padding: 0 9px;
background: var(--bg3); border: 1px dashed var(--line2); border-radius: 6px;
font: 500 12px/1 "Pretendard Variable", system-ui, sans-serif; letter-spacing: -0.005em;
color: var(--fg2); cursor: pointer; white-space: nowrap;
transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { background: var(--bg4); color: var(--fg); }
.chip.active { border-style: solid; background: var(--bg4); color: var(--fg); border-color: var(--line2); }
.chip.brand { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand2); }
.chip b { color: var(--fg); font-weight: 600; }
.chip .x {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; margin-left: 4px;
color: var(--fg3); cursor: pointer; font-size: 12px;
border-radius: 3px; transition: background .12s, color .12s;
}
.chip .x:hover { background: var(--bg5); color: var(--fg); }
/* btn-group (RUNA inventory.html 의 표/그리드/히트맵 토글 패턴) */
.btn-group {
display: inline-flex;
background: var(--bg3); border: 1px solid var(--line);
border-radius: var(--r); padding: 2px; gap: 0;
}
.btn-group .btn {
height: 22px; padding: 0 8px; font-size: 11.5px;
background: transparent; border: 1px solid transparent;
color: var(--fg3); border-radius: 4px; font-weight: 500;
}
.btn-group .btn:hover:not(:disabled) { background: var(--bg4); color: var(--fg2); }
.btn-group .btn.on {
background: var(--bg); color: var(--fg);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; position: relative; overflow: hidden; }
.kpi .l { font-size: 12px; color: var(--fg3); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; margin-top: 8px; line-height: 1.1; color: var(--fg); }
.kpi .v small { font-size: 14px; color: var(--fg3); font-weight: 500; margin-left: 2px; }
.kpi .d { margin-top: 6px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg3); }
.up { color: var(--green); }
.dn { color: var(--red); }
/* Status / Priority / Avatar / Amount */
.stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg2); white-space: nowrap; }
.stat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg3); flex-shrink: 0; }
.stat.paid::before { background: var(--blue); }
.stat.pick::before { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,165,36,.15); }
.stat.pack::before { background: var(--brand); }
.stat.ship::before, .stat.done::before { background: var(--green); }
.stat.cncl::before { background: var(--red); }
.pri { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg3); white-space: nowrap; }
.pri.h { color: var(--red); }
.pri.m { color: var(--amber); }
.ava { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#ff9966,#ff5e62); display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); }
.ava-b { background: linear-gradient(135deg,#4aa8ff,#7c5cff); }
.ava-c { background: linear-gradient(135deg,#f5a524,#ff5e62); }
.ava-d { background: linear-gradient(135deg,#2fd27e,#4aa8ff); }
.ava-e { background: linear-gradient(135deg,#7c5cff,#4aa8ff); }
.amt { font-family: var(--mono); font-weight: 600; font-size: 12.5px; text-align: right; display: inline-block; letter-spacing: -0.01em; }
/* Filter bar */
.filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); }
/* ─── RUNA Card / Metric (대시보드/페이지 본문 패턴) ─── */
.card {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
flex-shrink: 0;
}
.card-h {
display: flex;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid var(--line);
gap: 12px;
min-height: 48px;
}
.card-h h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.card-h h2 small { color: var(--fg3); font-weight: 500; margin-left: 8px; font-size: 12.5px; }
.card-h h3 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--fg); }
.card-h h3 small { color: var(--fg3); font-weight: 500; margin-left: 6px; font-size: 11.5px; }
.card-h .sp { flex: 1; }
.card-h .meta { font-size: 11.5px; color: var(--fg3); font-family: var(--mono); }
.card-b { padding: 14px 18px; }
.card-b.tight { padding: 0; }
/* KPI metrics — 4~6개 가로 grid */
.metrics {
display: grid;
grid-template-columns: repeat(var(--metric-cols, 5), 1fr);
gap: 10px;
}
.metric {
padding: 12px 14px;
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--r-md);
position: relative;
overflow: hidden;
}
.metric .l {
font-size: 10.5px;
color: var(--fg3);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.metric .v {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
margin-top: 4px;
line-height: 1.1;
color: var(--fg);
font-variant-numeric: tabular-nums;
}
.metric .v small {
font-size: 11px;
color: var(--fg3);
font-weight: 500;
margin-left: 2px;
}
.metric .s {
margin-top: 6px;
font-size: 11px;
color: var(--fg3);
line-height: 1.4;
}
/* 페이지 grid 레이아웃 — 메인 + 사이드 (1fr Npx) */
.page-grid {
display: grid;
grid-template-columns: 1fr var(--aside-w, 320px);
gap: 18px;
}
.page-grid > .page-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page-grid > .page-aside { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1280px) {
.page-grid { grid-template-columns: 1fr; }
}
/* Hint with CTA */
.hint .cta { margin-left: auto; flex-shrink: 0; }
.hint svg { width: 14px; height: 14px; flex-shrink: 0; color: inherit; }
/* Hint / Callout */
.hint { padding: 10px 14px; border-radius: var(--r-md); background: var(--brand-soft); border: 1px solid var(--brand-line); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fg); line-height: 1.5; }
.hint b { color: var(--brand2); font-weight: 600; }
.hint.amber { background: var(--amber-soft); border-color: rgba(245,165,36,.3); }
.hint.amber b { color: var(--amber); }
.hint.red { background: var(--red-soft); border-color: rgba(255,90,110,.3); }
.hint.red b { color: var(--red); }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line3); background-clip: content-box; border: 2px solid transparent; }
/* ═══════════════════════════════════════════════════════════════
baza-oms 라이트 인라인 호환 — 다크로 cascade override
═══════════════════════════════════════════════════════════════ */
[style*="background:#fff"], [style*="background:white"], [style*="background:#ffffff"] { background: var(--bg2) !important; color: var(--fg); }
[style*="background:#fafbfc"], [style*="background:#f9fafb"], [style*="background:#fafafa"] { background: var(--bg3) !important; }
[style*="background:#f3f4f6"], [style*="background:#e5e7eb"] { background: var(--bg4) !important; }
[style*="background:#f0fdfa"], [style*="background:#d1fae5"] { background: var(--green-soft) !important; }
[style*="background:#dbeafe"], [style*="background:#eff6ff"] { background: var(--blue-soft) !important; }
[style*="background:#fef3c7"] { background: var(--amber-soft) !important; }
[style*="background:#fee2e2"], [style*="background:#fef2f2"], [style*="background:#f8d7da"] { background: var(--red-soft) !important; }
[style*="background:#ede9fe"] { background: var(--brand-soft) !important; }
[style*="background:#d4edda"] { background: var(--green-soft) !important; }
[style*="color:#1e40af"], [style*="color:#1d4ed8"], [style*="color:#1e3a8a"] { color: var(--blue) !important; }
[style*="color:#dc2626"], [style*="color:#b91c1c"], [style*="color:#991b1b"], [style*="color:#721c24"] { color: var(--red) !important; }
[style*="color:#10b981"], [style*="color:#065f46"], [style*="color:#047857"], [style*="color:#155724"] { color: var(--green) !important; }
[style*="color:#f59e0b"], [style*="color:#92400e"], [style*="color:#78350f"] { color: var(--amber) !important; }
[style*="color:#7c3aed"], [style*="color:#5b21b6"] { color: var(--brand2) !important; }
[style*="color:#6b7280"], [style*="color:#9ca3af"] { color: var(--fg3) !important; }
[style*="border:1px solid #e5e7eb"], [style*="border:1px solid #f3f4f6"], [style*="border:1px solid #c3e6cb"], [style*="border:1px solid #f5c6cb"] { border-color: var(--line) !important; }
[style*="border-top:1px solid #f3f4f6"], [style*="border-bottom:1px solid #e5e7eb"], [style*="border-bottom:1px solid #f3f4f6"], [style*="border-top:1px solid #e5e7eb"] { border-color: var(--line) !important; }
[style*="border-left:3px solid #3b82f6"] { border-left-color: var(--blue) !important; }
[style*="border-left:3px solid #f59e0b"] { border-left-color: var(--amber) !important; }
[style*="border-left:3px solid #10b981"] { border-left-color: var(--green) !important; }
[style*="border-left:3px solid #dc2626"] { border-left-color: var(--red) !important; }
[style*="border-left:3px solid #7c3aed"] { border-left-color: var(--brand) !important; }
/* ─ 모달 스크림 ─ */
[style*="background:rgba(0,0,0,0.4)"], [style*="background:rgba(0,0,0,0.5)"] { background: rgba(5,6,9,0.72) !important; backdrop-filter: blur(4px); }
/* ─ Select bulk-action sticky bar (Center pages) ─ */
[style*="background:#0f766e"] { background: var(--brand) !important; color: #fff !important; }
/* ─ Pastel KPI 배경 ─ */
[style*="background:#e0e7ff"], [style*="background:#c7d2fe"], [style*="background:#ddd6fe"], [style*="background:#c4b5fd"], [style*="background:#f5f3ff"] { background: var(--brand-soft) !important; }
[style*="background:#fde68a"] { background: var(--amber-soft) !important; }
[style*="background:#a7f3d0"] { background: var(--green-soft) !important; }
[style*="background:#fce7f3"] { background: var(--red-soft) !important; }
/* ─ Gradient 보정 ─ */
[style*="linear-gradient(135deg,#3b82f6,#1e40af)"] { background: linear-gradient(135deg, var(--brand), var(--brand2)) !important; }
[style*="linear-gradient(135deg,#eff6ff,#dbeafe)"] { background: linear-gradient(135deg, var(--brand-soft), var(--bg3)) !important; }
/* ─ 어두운 텍스트 ─ */
[style*="color:#374151"], [style*="color:#4b5563"], [style*="color:#52525b"] { color: var(--fg2) !important; }
[style*="color:#475569"] { color: var(--fg3) !important; }
[style*="color:#111827"], [style*="color:#1f2937"], [style*="color:#0f172a"], [style*="color:#111"], [style*="color:#000"] { color: var(--fg) !important; }
/* ─ Border 보강 ─ */
[style*="border:1px solid #d1d5db"], [style*="border:1px solid #d4d4d8"] { border-color: var(--line2) !important; }
[style*="border-bottom:1px solid #d1d5db"] { border-bottom-color: var(--line2) !important; }
/* ─ input/select 강제 다크 ─ */
input.form-input, select.form-select, textarea.form-input { background: var(--bg3) !important; color: var(--fg) !important; border-color: var(--line) !important; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea {
color-scheme: dark; /* 캘린더/시간 아이콘 다크 */
}
/* ─── select option 글로벌 다크 — 드롭다운 옵션 가독성 강제 (모든 select 적용) ─── */
select option, select.form-select option, .fld .ctrl select option,
.fi-fo-select option, .filament-forms-select-component option {
background-color: var(--bg2) !important;
color: var(--fg) !important;
padding: 4px 8px !important;
}
select optgroup, select.form-select optgroup {
background-color: var(--bg3) !important;
color: var(--fg3) !important;
font-weight: 700;
}
select option:checked, select.form-select option:checked {
background-color: var(--brand) !important;
color: #fff !important;
font-weight: 600;
}
select option:disabled {
color: var(--fg4) !important;
}
/* ─ Filament 페이지 wrapper ─ */
.fi-page > div, .fi-page > main { background: var(--bg) !important; color: var(--fg); }
.fi-section-content-ctn, .fi-section-content { background: var(--bg2) !important; }
/* 페이지 본문 wrapper — 2유형 분류 (project_newwms_page_layout_types.md) */
.fi-page .page-flat { padding: 0 !important; max-width: none !important; }
.fi-page .page-padded { padding: 20px 24px !important; max-width: none !important; }
@media (max-width: 768px) {
.fi-page .page-padded { padding: 14px 16px !important; }
}
/* .wh / .ac 가 직속 자식이면 풀폭 (사이드바 ~ 우측 끝까지 딱 붙도록) */
.fi-page > div > div[style*="width:100%"]:has(> .wh),
.fi-page > div > div[style*="width:100%"]:has(> .ac) {
padding: 0 !important;
}
/* fi-main 상단 패딩(64px topbar) 외에 추가 마진/공백 제거 */
.fi-page { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.fi-page > div, .fi-page > main { padding: 0 !important; }
/* 풀폭 레이아웃 — .fi-page 안 모든 section 의 padding-y 제거 (Tailwind py-8 무력화) */
.fi-page section,
.fi-main section { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
/* ─ .data-table 내부 가독성 ─ */
.data-table tbody td, .data-table thead th { color: var(--fg); }
.data-table tbody td code { background: var(--bg3); color: var(--brand2); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
/* ─ 폰트 통일 강제 ─ */
button, input, select, textarea, .btn, .form-input, .form-select { font-family: "Pretendard Variable", "Pretendard", system-ui, sans-serif !important; }
code, kbd, .mono { font-family: var(--mono) !important; }
/* ─ Filament Heroicon 아이콘 색상 ─ */
.fi-icon, .fi-btn-icon { color: var(--fg2); }
/* ─ Filament 로그인 폼 (커스텀 페이지 외) 배경 ─ */
body { background: var(--bg) !important; }
/* ============================================================
RUNA — Account / Tenant detail layout (account.html 패턴)
============================================================ */
/* 2-column shell: 좌측 리스트 320px + 우측 상세 (사이드바에 딱 붙는 풀 폭) */
.ac {
display: grid;
grid-template-columns: 320px 1fr;
height: calc(100vh - 64px);
overflow: hidden;
background: var(--bg);
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
}
@media (max-width: 1100px) {
.ac { grid-template-columns: 1fr; height: auto; }
.ac-list { max-height: 360px; border-right: none !important; border-bottom: 1px solid var(--line); }
}
/* 좌측 리스트 */
.ac-list { background: var(--bg2); border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
.ac-list .srch { padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg2); z-index: 2; }
.ac-list .srch .i { display: flex; gap: 6px; align-items: center; background: var(--bg3); border: 1px solid var(--line); border-radius: 5px; padding: 6px 10px; }
.ac-list .srch input { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font-size: 12.5px; font-family: inherit; min-width: 0; }
.ac-list .srch input::placeholder { color: var(--fg3); }
.ac-list .filt { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.ac-list .ac-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; transition: background .12s; }
.ac-list .ac-row:hover { background: var(--bg3); }
.ac-list .ac-row.on { background: var(--brand-soft); border-left: 2px solid var(--brand); padding-left: 12px; }
.ac-list .ac-row.inactive { opacity: 0.5; }
.ac-list .ac-row.inactive .av { filter: grayscale(0.6); }
.ac-list .ac-row .av { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.ac-list .ac-row .n { font-size: 13px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-list .ac-row .s { font-size: 11px; color: var(--fg3); margin-top: 2px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-list .ac-row .m { font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-align: right; color: var(--fg); }
.ac-list .ac-row .m small { display: block; color: var(--fg3); font-size: 10px; font-weight: 400; font-family: var(--mono); margin-top: 2px; }
.ac-list .ac-empty { padding: 24px 14px; color: var(--fg3); font-size: 12px; text-align: center; }
.ac-list .ac-pager { padding: 10px 14px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--bg2); }
/* 우측 메인 (스크롤 영역) */
.ac-main { overflow-y: auto; padding: 18px 22px 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ac-empty-main { display: grid; place-items: center; height: 100%; color: var(--fg3); font-size: 13px; padding: 40px; text-align: center; }
/* Profile header */
.prof { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg, 10px); padding: 16px 20px; align-items: center; }
.prof .big-av { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--brand), var(--blue, #4aa8ff)); display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 700; }
.prof .info h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; color: var(--fg); }
.prof .info h1 .tier { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: linear-gradient(135deg, var(--amber, #f5a524), #ff5e62); color: #fff; letter-spacing: 0.02em; }
.prof .info h1 .mono-id { font-size: 11px; font-weight: 500; font-family: var(--mono); color: var(--fg3); }
.prof .info .tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.prof .info .meta { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--fg2); flex-wrap: wrap; }
.prof .info .meta span { display: inline-flex; align-items: center; gap: 5px; }
.prof .info .meta .mono { font-family: var(--mono); }
.prof .act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* KPI strip */
.ac-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg, 10px); overflow: hidden; }
.ac-kpi .c { padding: 12px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-kpi .c:last-child { border-right: none; }
.ac-kpi .c .l { font-size: 10.5px; color: var(--fg3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-kpi .c .v { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-kpi .c .v small { font-size: 11px; color: var(--fg3); font-weight: 500; margin-left: 2px; }
.ac-kpi .c .d { font-size: 11px; color: var(--fg3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1380px) {
.ac-kpi .c .v { font-size: 16px; }
}
@media (max-width: 1100px) {
.ac-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-kpi .c { border-right: none; border-bottom: 1px solid var(--line); }
.ac-kpi .c .v { font-size: 18px; }
}
/* 2-column body */
.cols { display: grid; grid-template-columns: 1fr 320px; gap: 14px; }
.cols-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1280px) { .cols { grid-template-columns: 1fr; } }
/* tabs-ac */
.tabs-ac { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.tabs-ac button, .tabs-ac a { padding: 8px 14px; color: var(--fg3); font-size: 12.5px; font-weight: 500; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; background: transparent; white-space: nowrap; font-family: inherit; }
.tabs-ac button.on, .tabs-ac a.on { color: var(--fg); border-bottom-color: var(--brand); font-weight: 600; }
.tabs-ac button:hover:not(.on), .tabs-ac a:hover:not(.on) { color: var(--fg2); }
.tabs-ac .cnt { background: var(--bg3); font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border-radius: 10px; margin-left: 6px; color: var(--fg2); }
/* Credit-like gauge (재사용: 활성 비율 / 채널 통합 진척 등) */
.credit { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg, 10px); padding: 16px 18px; }
.credit h3 { margin: 0 0 10px 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--fg); }
.credit .bar { height: 10px; background: var(--bg3); border-radius: 5px; position: relative; border: 1px solid var(--line); overflow: hidden; margin-bottom: 8px; }
.credit .bar .used { height: 100%; background: linear-gradient(90deg, var(--green, #2fd27e) 0%, var(--amber, #f5a524) 75%, var(--red, #ff5a6e) 100%); }
.credit .marks { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg3); font-family: var(--mono); }
.credit .detail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.credit .detail .k { font-size: 11px; color: var(--fg3); font-weight: 500; }
.credit .detail .v { font-size: 15px; font-weight: 700; font-family: var(--mono); margin-top: 3px; letter-spacing: -0.01em; color: var(--fg); }
/* table.om (orders mini) */
table.om { width: 100%; border-collapse: collapse; }
table.om th { text-align: left; padding: 8px 14px; font-size: 10.5px; color: var(--fg3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--line); background: var(--bg3); }
table.om td { padding: 9px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line); color: var(--fg); }
table.om tr:last-child td { border-bottom: none; }
table.om tr:hover { background: var(--bg3); }
table.om .id { font-family: var(--mono); font-size: 11.5px; color: var(--brand2); font-weight: 600; }
table.om .r { text-align: right; font-family: var(--mono); font-weight: 600; }
table.om .muted { color: var(--fg3); }
/* Right side cards */
.side-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg, 10px); overflow: hidden; }
.side-card .hd { padding: 10px 14px; font-size: 11px; color: var(--fg3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--bg3); }
.side-card .hd .sp { flex: 1; }
.side-card .bd { padding: 14px; }
.side-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.side-row:last-child { border-bottom: none; }
.side-row .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--blue, #4aa8ff), var(--brand)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.side-row .n { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.side-row .r { font-size: 11px; color: var(--fg3); font-family: var(--mono); margin-top: 1px; }
.side-row .t { margin-left: auto; font-size: 11px; color: var(--brand2); font-family: var(--mono); }
.side-row .ok { color: var(--green, #2fd27e); }
.side-row .ng { color: var(--fg3); }
/* tier badge variants */
.tier-active { background: linear-gradient(135deg, var(--green, #2fd27e), #1ea968); }
.tier-inactive { background: linear-gradient(135deg, var(--fg3), var(--fg4)); }
/* 다크 모달 (modals.html 패턴) */
.runa-modal-scrim { position: fixed; inset: 0; z-index: 9998; background: rgba(5, 6, 9, 0.72); backdrop-filter: blur(4px); }
.runa-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: var(--bg2); border: 1px solid var(--line2, var(--line)); border-radius: var(--r-lg, 10px); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 8px 16px -8px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; color: var(--fg); }
/* 시트 위에 떠야 하는 2-depth 모달 (시트 -> 편집/비번 등) */
.runa-modal-scrim.layer2 { z-index: 10010; background: rgba(5, 6, 9, 0.55); }
.runa-modal.layer2 { z-index: 10011; }
.runa-modal.sm { width: min(94vw, 420px); }
.runa-modal.lg { width: min(94vw, 720px); }
/* 헤더 — 아이콘 박스 + 타이틀 + 서브타이틀 */
.runa-modal-h { display: flex; align-items: flex-start; gap: 14px; padding: 16px 22px 14px; border-bottom: 1px solid var(--line); }
.runa-modal-h .ic { width: 36px; height: 36px; border-radius: var(--r-md, 6px); display: grid; place-items: center; flex-shrink: 0; }
.runa-modal-h .ic svg { width: 18px; height: 18px; }
.runa-modal-h .ic.info { background: var(--brand-soft); color: var(--brand2); border: 1px solid var(--brand-line); }
.runa-modal-h .ic.warn { background: var(--amber-soft, rgba(245,165,36,.12)); color: var(--amber, #f5a524); border: 1px solid rgba(245,165,36,.3); }
.runa-modal-h .ic.danger { background: var(--red-soft, rgba(255,90,110,.1)); color: var(--red, #ff5a6e); border: 1px solid rgba(255,90,110,.3); }
.runa-modal-h .ic.success { background: var(--green-soft, rgba(47,210,126,.12)); color: var(--green, #2fd27e); border: 1px solid rgba(47,210,126,.3); }
.runa-modal-h .ti { flex: 1; min-width: 0; }
.runa-modal-h .ti h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; color: var(--fg); }
.runa-modal-h .ti .sub { font-size: 12px; color: var(--fg3); margin-top: 4px; line-height: 1.5; }
.runa-modal-h .ttl { font-size: 14px; font-weight: 600; color: var(--fg); }
.runa-modal-h .x { width: 28px; height: 28px; border-radius: 5px; background: transparent; border: none; color: var(--fg3); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; font-size: 16px; padding: 0; }
.runa-modal-h .x:hover { background: var(--bg3); color: var(--fg); }
.runa-modal-b { padding: 18px 22px; overflow-y: auto; }
/* 푸터 + 단축키 hint */
.runa-modal-f { display: flex; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); background: var(--bg3); align-items: center; }
.runa-modal-f .sp { flex: 1; }
/* runa-modal-f .hint (ESC 닫기 라벨) 전역 숨김 — 우측 취소/저장 버튼으로 충분 */
.runa-modal-f .hint { display: none !important; }
.runa-modal-h kbd { font-family: var(--mono); font-size: 10px; background: var(--bg2); border: 1px solid var(--line2, var(--line)); padding: 1px 5px; border-radius: 3px; color: var(--fg2); margin: 0 2px; }
/* Confirm-list 패턴 (modals.html .confirm-list) */
.runa-confirm-list { margin: 10px 0 14px; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--line); border-radius: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--fg2); }
.runa-confirm-list .ln { padding: 3px 0; display: flex; align-items: center; gap: 8px; }
.runa-confirm-list .ln b { color: var(--fg); font-weight: 600; }
/* 시트 풍 kv 그리드 */
.runa-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 12.5px; }
.runa-kv .k { color: var(--fg3); font-weight: 500; white-space: nowrap; }
.runa-kv .v { color: var(--fg); font-weight: 500; }
.runa-kv .v.mono { font-family: var(--mono); font-size: 12px; }
/* 시트 액션 그룹 (큰 버튼 row) */
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.sheet-actions .sa { padding: 10px 14px; background: var(--bg3); border: 1px solid var(--line2, var(--line)); border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fg2); text-align: left; transition: all .12s; font-family: inherit; }
.sheet-actions .sa:hover { background: var(--bg4, var(--bg3)); border-color: var(--line3, var(--line2)); color: var(--fg); }
.sheet-actions .sa.danger:hover { color: var(--red, #ff5a6e); border-color: rgba(255,90,110,.3); }
.sheet-actions .sa.brand:hover { color: var(--brand2); border-color: var(--brand-line); }
.sheet-actions .sa .ico { width: 22px; height: 22px; border-radius: 4px; background: var(--bg2); display: grid; place-items: center; flex-shrink: 0; font-size: 12px; }
.sheet-actions .sa b { color: var(--fg); font-weight: 600; }
.sheet-actions .sa small { display: block; color: var(--fg3); font-size: 11px; margin-top: 1px; }
/* form 라벨 */
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld label { font-size: 11px; color: var(--fg3); font-weight: 600; letter-spacing: 0.02em; }
/* ============================================================
RUNA — Warehouse layout (warehouses.html 패턴)
============================================================ */
.wh { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 64px); overflow: hidden; background: var(--bg); border: 0; border-top: 1px solid var(--line); border-radius: 0; }
@media (max-width: 1100px) { .wh { grid-template-columns: 1fr; height: auto; } }
.wh-list { background: var(--bg2); border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
.wh-main { overflow-y: auto; padding: 18px 22px 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; background: var(--bg); }
.lst-hd { padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg2); z-index: 3; }
.lst-hd .lst-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lst-hd h2 { margin: 0; font-size: 14px; font-weight: 700; flex: 1; color: var(--fg); }
.lst-hd .total-pill { font-family: var(--mono); font-size: 11px; color: var(--fg3); background: var(--bg3); padding: 1px 6px; border-radius: 10px; border: 1px solid var(--line); }
.lst-hd .lst-srch { display: flex; align-items: center; gap: 6px; background: var(--bg3); border: 1px solid var(--line); border-radius: 5px; padding: 6px 10px; }
.lst-hd .lst-srch input { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font-size: 12.5px; font-family: inherit; min-width: 0; }
.lst-hd .add-btn { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; background: var(--brand-soft); border: 1.5px dashed var(--brand-line); border-radius: 6px; color: var(--brand2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; font-family: inherit; }
.lst-hd .add-btn:hover { background: rgba(124, 92, 255, .2); border-style: solid; }
.wc { padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: 36px 1fr; gap: 12px; transition: background .12s; }
.wc:hover { background: var(--bg3); }
.wc.sel { background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: 13px; }
.wc.inactive { opacity: 0.5; }
.wc.inactive .lg { filter: grayscale(0.6); }
.wc .lg { width: 36px; height: 36px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 10px; flex-shrink: 0; font-family: var(--mono); letter-spacing: -0.01em; position: relative; text-align: center; line-height: 1.05; }
.wc .lg::after { content: ""; position: absolute; bottom: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--green, #2fd27e); border: 2px solid var(--bg2); }
.wc.inactive .lg::after { background: var(--fg4, #4a505c); }
.wc .info { min-width: 0; }
.wc .info .wc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.wc .info .wc-top b { font-size: 13px; font-weight: 700; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc .wc-pin { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em; }
.wc .wc-pin.main { background: linear-gradient(135deg, #7c5cff, #5c8bff); color: #fff; }
.wc .wc-pin.storage { background: var(--blue-soft, rgba(74,168,255,.12)); color: var(--blue, #4aa8ff); border: 1px solid rgba(74, 168, 255, .3); }
.wc .wc-pin.pickup { background: var(--green-soft, rgba(47,210,126,.12)); color: var(--green, #2fd27e); border: 1px solid rgba(47, 210, 126, .25); }
.wc .wc-pin.returns { background: var(--amber-soft, rgba(245,165,36,.12)); color: var(--amber, #f5a524); border: 1px solid rgba(245, 165, 36, .3); }
.wc .addr { font-size: 11px; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
.wc .wc-stats { display: flex; gap: 10px; font-size: 11px; color: var(--fg3); align-items: center; flex-wrap: wrap; }
.wc .wc-stats b { color: var(--fg2); font-weight: 600; font-family: var(--mono); }
.wc .util { margin-top: 6px; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; border: 1px solid var(--line); }
.wc .util i { display: block; height: 100%; background: var(--green, #2fd27e); }
.wc .util i.warn { background: var(--amber, #f5a524); }
.wc .util i.crit { background: var(--red, #ff5a6e); }
.hero { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; background: linear-gradient(135deg, rgba(124, 92, 255, .06), rgba(74, 168, 255, .02)); border: 1px solid var(--line); border-radius: var(--r-lg, 10px); }
.hero .big-lg { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; font-family: var(--mono); letter-spacing: 0.02em; flex-shrink: 0; box-shadow: 0 8px 16px -4px rgba(0, 0, 0, .3); text-align: center; line-height: 1.05; }
.hero h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--fg); }
.hero .hero-pin { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em; }
.hero .hero-pin.main { background: linear-gradient(135deg, #7c5cff, #5c8bff); color: #fff; }
.hero .hero-pin.storage { background: var(--blue-soft, rgba(74,168,255,.12)); color: var(--blue, #4aa8ff); border: 1px solid rgba(74, 168, 255, .3); }
.hero .hero-pin.pickup { background: var(--green-soft, rgba(47,210,126,.12)); color: var(--green, #2fd27e); border: 1px solid rgba(47, 210, 126, .25); }
.hero .hero-pin.returns { background: var(--amber-soft, rgba(245,165,36,.12)); color: var(--amber, #f5a524); border: 1px solid rgba(245, 165, 36, .3); }
.hero .hero-stt { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--green-soft, rgba(47,210,126,.12)); color: var(--green, #2fd27e); border: 1px solid rgba(47, 210, 126, .25); }
.hero .hero-stt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor; }
.hero .hero-stt.dis { background: var(--bg3); color: var(--fg3); border-color: var(--line2, var(--line)); }
.hero .hero-stt.dis::before { box-shadow: none; }
.hero .hero-meta { display: flex; gap: 16px; margin-top: 6px; font-size: 12.5px; color: var(--fg2); flex-wrap: wrap; }
.hero .hero-meta b { color: var(--fg); font-weight: 600; }
.hero .hero-meta svg { width: 12px; height: 12px; color: var(--fg3); margin-right: 3px; vertical-align: -2px; }
.hero .hero-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.strip6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg, 10px); overflow: hidden; }
.strip6 .c { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.strip6 .c:last-child { border-right: none; }
.strip6 .c .l { font-size: 10.5px; color: var(--fg3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip6 .c .l svg { width: 11px; height: 11px; opacity: 0.7; flex-shrink: 0; }
.strip6 .c .v { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-top: 5px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip6 .c .v small { font-size: 11px; color: var(--fg3); font-weight: 500; margin-left: 2px; }
.strip6 .c .d { font-size: 11px; color: var(--fg3); margin-top: 3px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1380px) { .strip6 .c .v { font-size: 16px; } }
@media (max-width: 1100px) { .strip6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .strip6 .c { border-bottom: 1px solid var(--line); } }
.cols2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
@media (max-width: 1200px) { .cols2 { grid-template-columns: 1fr; } }
.zone-list { padding: 0; }
.zone { display: grid; grid-template-columns: 32px 1fr 130px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; font-size: 12.5px; }
.zone:last-child { border-bottom: none; }
.zone .num { width: 32px; height: 32px; border-radius: 6px; background: var(--bg3); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: var(--fg2); font-size: 11px; }
.zone .zn { line-height: 1.3; min-width: 0; }
.zone .zn b { display: block; font-weight: 600; color: var(--fg); }
.zone .zn small { display: block; color: var(--fg3); font-size: 11px; font-family: var(--mono); margin-top: 2px; }
.zone .meter { width: 130px; }
.zone .meter .bar { height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.zone .meter .bar i { display: block; height: 100%; background: var(--green, #2fd27e); }
.zone .meter .bar i.warn { background: var(--amber, #f5a524); }
.zone .meter .bar i.crit { background: var(--red, #ff5a6e); }
.zone .meter .lbl { font-family: var(--mono); font-size: 10.5px; color: var(--fg3); margin-top: 3px; text-align: right; }
.caps { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cap { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; }
.cap .ic { width: 24px; height: 24px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--line2, var(--line)); display: grid; place-items: center; color: var(--fg2); flex-shrink: 0; font-size: 13px; }
.cap.on .ic { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand2); }
.cap .nm { flex: 1; font-size: 12.5px; font-weight: 600; min-width: 0; color: var(--fg2); }
.cap .nm small { display: block; color: var(--fg3); font-size: 11px; font-weight: 400; margin-top: 1px; }
.cap.on .nm { color: var(--fg); }
.cap .sw { width: 28px; height: 16px; background: var(--bg4, var(--bg3)); border-radius: 9px; position: relative; border: 1px solid var(--line2, var(--line)); flex-shrink: 0; }
.cap .sw::after { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--fg3); border-radius: 50%; transition: all .15s; }
.cap.on .sw { background: var(--brand); border-color: var(--brand); }
.cap.on .sw::after { transform: translateX(12px); background: #fff; }
.staff-rows { padding: 0; }
.staff-row { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); align-items: center; font-size: 12.5px; }
.staff-row:last-child { border-bottom: none; }
.staff-row .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; position: relative; flex-shrink: 0; }
.staff-row .av::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--green, #2fd27e); border: 2px solid var(--bg2); }
.staff-row .av.off::after { background: var(--fg4, #4a505c); }
.staff-row .info { min-width: 0; }
.staff-row .info b { display: block; font-weight: 600; color: var(--fg); }
.staff-row .info small { color: var(--fg3); font-family: var(--mono); font-size: 11px; display: block; margin-top: 1px; }
.staff-row .role-pill { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 3px; font-weight: 600; background: var(--bg3); color: var(--fg2); border: 1px solid var(--line2, var(--line)); }
.staff-row .role-pill.mgr { background: var(--brand-soft); color: var(--brand2); border-color: var(--brand-line); }
.staff-row .role-pill.opr { background: var(--green-soft, rgba(47,210,126,.12)); color: var(--green, #2fd27e); border-color: rgba(47, 210, 126, .25); }
.staff-row .when { font-family: var(--mono); font-size: 10.5px; color: var(--fg3); text-align: right; }
/* ============================================================
RUNA — Customer Inbound (customer-inbound.html 패턴)
============================================================ */
.welcome { padding: 18px 24px; background: linear-gradient(135deg, rgba(124, 92, 255, .08), rgba(74, 168, 255, .03)); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 20px; }
.welcome h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.welcome .sub { color: var(--fg3); font-size: 13px; margin-top: 4px; line-height: 1.5; max-width: 600px; }
.welcome .sub b { color: var(--fg); font-weight: 600; }
.welcome .sp { flex: 1; }
.welcome .act { display: flex; gap: 8px; }
.banner { padding: 12px 14px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fg); line-height: 1.55; }
.banner.info { background: var(--blue-soft, rgba(74,168,255,.12)); border: 1px solid rgba(74, 168, 255, .2); }
.banner.info svg { color: var(--blue); width: 14px; height: 14px; flex-shrink: 0; }
.banner b { font-weight: 700; }
.banner .cta { margin-left: auto; display: flex; gap: 6px; }
.quick-cta { padding: 20px; background: linear-gradient(135deg, rgba(124, 92, 255, .1), rgba(74, 168, 255, .04)); border: 1.5px dashed var(--brand-line); border-radius: 10px; display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; }
.quick-cta .ic { width: 48px; height: 48px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -2px rgba(124, 92, 255, .4); }
.quick-cta .ic svg { width: 22px; height: 22px; }
.quick-cta .info b { font-size: 15px; font-weight: 700; display: block; margin-bottom: 3px; color: var(--fg); }
.quick-cta .info small { color: var(--fg3); font-size: 12px; line-height: 1.5; display: block; }
.quick-cta .act { display: flex; gap: 6px; }
.ib-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; transition: background .12s; }
.ib-row:last-child { border-bottom: none; }
.ib-row:hover { background: var(--bg3); }
.ib-row .lg { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #3a2d1a, #1c1410); color: var(--amber); display: grid; place-items: center; font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: -0.02em; flex-shrink: 0; }
.ib-row .info { min-width: 0; }
.ib-row .info .top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.ib-row .info .id { font-family: var(--mono); font-size: 11.5px; color: var(--brand2); font-weight: 700; }
.ib-row .info .stt { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.04em; font-family: var(--mono); }
.ib-row .info .stt.draft { background: var(--bg3); color: var(--fg2); border: 1px solid var(--line2, var(--line)); }
.ib-row .info .stt.review { background: var(--amber-soft, rgba(245,165,36,.12)); color: var(--amber); border: 1px solid rgba(245, 165, 36, .3); }
.ib-row .info .stt.appr { background: var(--blue-soft, rgba(74,168,255,.12)); color: var(--blue); border: 1px solid rgba(74, 168, 255, .3); }
.ib-row .info .stt.recv { background: var(--brand-soft); color: var(--brand2); border: 1px solid var(--brand-line); }
.ib-row .info .stt.done { background: var(--green-soft, rgba(47,210,126,.12)); color: var(--green); border: 1px solid rgba(47, 210, 126, .3); }
.ib-row .info .nm { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.ib-row .info .meta { display: flex; gap: 12px; font-size: 11.5px; color: var(--fg3); margin-top: 4px; flex-wrap: wrap; }
.ib-row .info .meta b { color: var(--fg2); font-weight: 600; font-family: var(--mono); }
.ib-row .meta-right { text-align: right; flex-shrink: 0; }
.ib-row .meta-right .when { font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--fg); }
.ib-row .meta-right .ago { font-family: var(--mono); font-size: 10.5px; color: var(--fg3); margin-top: 3px; }
.mini-prog { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.mini-prog .st { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; color: var(--fg3); flex: 1; position: relative; }
.mini-prog .st .d { width: 9px; height: 9px; border-radius: 50%; background: var(--bg4, var(--bg3)); border: 1.5px solid var(--line3, var(--line2)); z-index: 1; }
.mini-prog .st.done .d { background: var(--green); border-color: var(--green); }
.mini-prog .st.now .d { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(124, 92, 255, .2); }
.mini-prog .st.cancel .d { background: var(--red); border-color: var(--red); }
.mini-prog .st.done .l, .mini-prog .st.now .l, .mini-prog .st.cancel .l { color: var(--fg2); font-weight: 600; }
.mini-prog .st:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 6px); right: calc(-50% + 6px); top: 4px; height: 1.5px; background: var(--bg4, var(--bg3)); z-index: 0; }
.mini-prog .st.done:not(:last-child)::after { background: var(--green); }
.mini-prog .st.now:not(:last-child)::after { background: linear-gradient(to right, var(--brand), var(--bg4, var(--bg3))); }
.ht { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.ht thead th { padding: 9px 14px; text-align: left; font-size: 10.5px; font-weight: 600; color: var(--fg3); letter-spacing: 0.05em; text-transform: uppercase; background: var(--bg2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ht tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--fg); }
.ht tbody tr { cursor: pointer; transition: background .12s; }
.ht tbody tr:hover { background: var(--bg3); }
.ht tbody tr:last-child td { border-bottom: none; }
.ht .c-id { font-family: var(--mono); color: var(--brand2); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.ht .c-date { font-family: var(--mono); font-size: 11.5px; color: var(--fg2); white-space: nowrap; }
.ht .c-nm { font-weight: 600; color: var(--fg); min-width: 0; }
.ht .c-nm small { display: block; font-weight: 500; color: var(--fg3); font-size: 11px; margin-top: 2px; font-family: var(--mono); }
.ht .c-num { font-family: var(--mono); font-weight: 700; text-align: right; font-size: 12px; white-space: nowrap; }
.ht .c-num.diff-ok { color: var(--green); }
.ht .c-num.diff-bad { color: var(--amber); }
.ht .c-num.diff-err { color: var(--red); }
.ht .pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.04em; font-family: var(--mono); display: inline-block; }
.ht .pill.ok { background: var(--green-soft, rgba(47,210,126,.12)); color: var(--green); border: 1px solid rgba(47, 210, 126, .3); }
.ht .pill.warn { background: var(--amber-soft, rgba(245,165,36,.12)); color: var(--amber); border: 1px solid rgba(245, 165, 36, .3); }
.ht .pill.err { background: var(--red-soft, rgba(255,90,108,.1)); color: var(--red); border: 1px solid rgba(255, 90, 108, .3); }
.ht .pill.cancel { background: var(--bg3); color: var(--fg3); border: 1px solid var(--line2, var(--line)); }
/* ============================================================
RUNA — Team members table (team.html 패턴)
============================================================ */
/* 사용자 셀: 아바타 + 이름 + 이메일 */
.person { display: flex; align-items: center; gap: 10px; }
.person .av { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.person .av::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--green, #2fd27e); border: 2px solid var(--bg2); }
.person .av.away::after { background: var(--amber, #f5a524); }
.person .av.off::after { background: var(--fg4, #4a505c); }
.person .av.no-dot::after { display: none; }
.person .info b { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--fg); }
.person .info small { color: var(--fg3); font-size: 11px; font-family: var(--mono); display: block; margin-top: 1px; }
/* 역할 색상 변형 (team.html .role.*) */
.role { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line2); background: var(--bg3); color: var(--fg2); white-space: nowrap; }
.role.owner { background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(255,90,110,.12)); color: var(--brand2); border-color: var(--brand-line); }
.role.adm { background: var(--brand-soft); color: var(--brand2); border-color: var(--brand-line); }
.role.mgr { background: var(--blue-soft, rgba(74,168,255,.12)); color: var(--blue, #4aa8ff); border-color: rgba(74,168,255,.3); }
.role.opr { background: var(--green-soft, rgba(47,210,126,.12)); color: var(--green, #2fd27e); border-color: rgba(47,210,126,.25); }
.role.view { background: var(--bg3); color: var(--fg2); border-color: var(--line2); }
.role.bil { background: var(--amber-soft, rgba(245,165,36,.12)); color: var(--amber, #f5a524); border-color: rgba(245,165,36,.25); }
/* 상태 dot prefix (team.html .stt.act/.inv/.dis) */
.stt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.stt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.stt.act { color: var(--green, #2fd27e); }
.stt.act::before { background: var(--green, #2fd27e); }
.stt.inv { color: var(--amber, #f5a524); }
.stt.inv::before { background: var(--amber, #f5a524); }
.stt.dis { color: var(--fg3); }
.stt.dis::before { background: var(--fg4, #4a505c); }
/* 행 호버 시 액션 노출 */
.row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
.data-table tr:hover .row-actions { opacity: 1; }
.data-table tr .row-actions.always { opacity: 1; }
/* 시간 표시 */
.when { font-family: var(--mono); font-size: 11px; color: var(--fg3); white-space: nowrap; }
.when.recent { color: var(--green, #2fd27e); }
.when.soon { color: var(--amber, #f5a524); }
/* 카드 내부 mini stats strip (team.html .strip) */
.mini-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--bg3); border-bottom: 1px solid var(--line); }
.mini-strip .c { padding: 10px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mini-strip .c:last-child { border-right: none; }
.mini-strip .c .l { font-size: 10px; color: var(--fg3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-strip .c .v { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); font-variant-numeric: tabular-nums; }
.mini-strip .c .v small { font-size: 10.5px; color: var(--fg3); font-weight: 500; margin-left: 2px; }
/* ═════════════ 입고 등록 (vendor-portal-asn 패턴) ═════════════ */
.vp-row { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .vp-row { grid-template-columns: 1fr; } }
.vp-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.vp-card-h { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.vp-card-h h3 { margin: 0; font-size: 14px; font-weight: 700; }
.vp-card-h .num { font-family: var(--mono); font-size: 10px; font-weight: 700; background: var(--brand); color: #fff; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.04em; }
.vp-card-h .sp { flex: 1; }
.vp-card-h .meta { font-size: 11.5px; color: var(--fg3); font-family: var(--mono); }
.vp-card-bd { padding: 18px; }
.fld { margin-bottom: 14px; }
.fld:last-child { margin-bottom: 0; }
.fld .l { font-size: 12px; color: var(--fg2); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.fld .l .req { color: var(--red); font-weight: 700; }
.fld .l .opt { color: var(--fg3); font-weight: 500; font-size: 11px; margin-left: auto; }
.fld .ctrl { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line2); border-radius: 5px; padding: 8px 10px; gap: 8px; }
.fld .ctrl:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.fld .ctrl input, .fld .ctrl select { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font-family: inherit; font-size: 13px; }
.fld .help { font-size: 11px; color: var(--fg3); margin-top: 4px; line-height: 1.5; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* SKU picker */
.sku-search { display: flex; align-items: center; background: var(--bg); border: 1.5px solid var(--line2); border-radius: 6px; padding: 9px 12px; gap: 8px; margin-bottom: 12px; }
.sku-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sku-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font-family: inherit; font-size: 13px; }
.sku-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.sku-filters .lab { font-size: 11px; color: var(--fg3); font-weight: 600; letter-spacing: 0.04em; }
.fchip { padding: 4px 9px; font-size: 11.5px; font-weight: 600; color: var(--fg2); background: var(--bg); border: 1px solid var(--line2); border-radius: 14px; cursor: pointer; transition: all .12s; }
.fchip:hover { border-color: var(--brand-line); color: var(--fg); }
.fchip.on { background: var(--brand-soft); color: var(--brand2); border-color: var(--brand-line); }
.sku-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.fld .ctrl select, .fld .ctrl select option { color-scheme: dark; }
.fld .ctrl select option { background-color: var(--bg2); color: var(--fg); }
.sku-card-pick { padding: 10px 12px; background: var(--bg); border: 1.5px solid var(--line2); border-radius: 7px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all .12s; }
.sku-card-pick:hover { border-color: var(--line3); background: var(--bg3); }
.sku-card-pick.sel { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(124,92,255,.1); }
.sku-card-pick .info { flex: 1; min-width: 0; }
.sku-card-pick .info .id { font-family: var(--mono); font-size: 10px; color: var(--brand2); font-weight: 700; display: block; }
.sku-card-pick .info .nm { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--fg); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sku-card-pick .info .stk { font-family: var(--mono); font-size: 10.5px; color: var(--fg3); margin-top: 2px; }
.sku-card-pick .chk { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--line3); background: var(--bg2); display: grid; place-items: center; color: transparent; flex-shrink: 0; }
.sku-card-pick.sel .chk { background: var(--brand); border-color: var(--brand); color: #fff; }
/* picked rows (수량 입력) */
.pick-row { display: grid; grid-template-columns: minmax(180px, 1fr) 150px 110px 28px; gap: 14px; align-items: center; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line2); border-radius: 6px; margin-bottom: 8px; }
.pick-row .nm { font-size: 12.5px; font-weight: 600; color: var(--fg); min-width: 0; overflow: hidden; }
.pick-row .nm > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-row .nm small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--fg3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-row .qty-in { display: flex; align-items: center; background: var(--bg2); border: 1px solid var(--line2); border-radius: 5px; min-width: 0; }
.pick-row .qty-in input { width: 100%; min-width: 0; background: transparent; border: none; outline: none; color: var(--fg); font-family: var(--mono); font-size: 13px; padding: 8px 6px 8px 10px; text-align: right; }
.pick-row .qty-in .u { font-size: 10.5px; color: var(--fg3); padding: 0 10px; font-weight: 600; flex-shrink: 0; border-left: 1px solid var(--line2); line-height: 32px; }
.pick-row .ea { font-family: var(--mono); font-size: 12px; color: var(--fg2); text-align: right; line-height: 1.3; white-space: nowrap; }
.pick-row .ea b { font-weight: 700; color: var(--fg); }
.pick-row .ea small { display: block; font-size: 10px; color: var(--fg3); margin-top: 2px; }
.pick-row .x { width: 28px; height: 28px; border-radius: 4px; border: none; background: transparent; color: var(--fg3); cursor: pointer; display: grid; place-items: center; }
.pick-row .x:hover { background: var(--red-soft, rgba(239,68,68,.12)); color: var(--red); }
/* LOT 입력 영역 (수량 행 아래 확장) */
.pick-lots { padding: 8px 14px 12px 28px; background: var(--bg2); border: 1px solid var(--line2); border-top: none; border-radius: 0 0 6px 6px; margin-top: -8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.pick-lots .lot-row { display: grid; grid-template-columns: 120px 1.4fr 130px 130px 24px; gap: 8px; align-items: center; }
.pick-lots .lot-row .ipt { background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; padding: 6px 8px; font-size: 11.5px; color: var(--fg); font-family: var(--mono); }
.pick-lots .lot-row .ipt:focus-within { border-color: var(--brand); }
.pick-lots .lot-row input { background: transparent; border: none; outline: none; color: var(--fg); font-family: inherit; font-size: 11.5px; width: 100%; }
.pick-lots .lot-add { padding: 4px 8px; font-size: 11px; color: var(--brand2); background: transparent; border: 1px dashed var(--brand-line); border-radius: 4px; cursor: pointer; align-self: flex-start; }
.pick-lots .lot-add:hover { background: var(--brand-soft); }
.pick-lots .lot-x { border: none; background: transparent; color: var(--fg3); cursor: pointer; }
.pick-lots .lot-x:hover { color: var(--red); }
.pick-lots .lot-head { display: grid; grid-template-columns: 120px 1.4fr 130px 130px 24px; gap: 8px; font-size: 10px; color: var(--fg3); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 2px; }
/* 운송 방식 토글 카드 */
.ship-mode { display: grid; grid-template-columns: 36px 1fr 22px; gap: 10px; align-items: center; padding: 12px 14px; background: var(--bg); border: 1.5px solid var(--line2); border-radius: 7px; transition: all .12s; }
.ship-mode:hover { border-color: var(--line3); background: var(--bg3); }
.ship-mode.sel { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(124,92,255,.1); }
.ship-mode .sm-ic { width: 36px; height: 36px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--fg2); }
.ship-mode.sel .sm-ic { background: var(--brand); color: #fff; border-color: var(--brand); }
.ship-mode .sm-ic.dispatch { /* 동일 */ }
.ship-mode .sm-tx { min-width: 0; }
.ship-mode .sm-tx b { font-size: 12.5px; font-weight: 700; color: var(--fg); display: block; }
.ship-mode .sm-tx small { font-size: 11px; color: var(--fg3); display: block; margin-top: 2px; line-height: 1.4; }
.ship-mode .sm-chk { width: 20px; height: 20px; border-radius: 5px; background: var(--brand); color: #fff; display: grid; place-items: center; }
/* 우측 요약 패널 */
.vp-summary { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; position: sticky; top: 16px; }
.vp-summary .h { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.vp-summary .row { padding: 8px 16px; display: flex; justify-content: space-between; font-size: 12px; }
.vp-summary .row .k { color: var(--fg3); }
.vp-summary .row .v { font-family: var(--mono); font-weight: 700; color: var(--fg); }
.vp-summary .row.total { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg3); font-size: 14px; }
.vp-summary .row.total .v { color: var(--brand2); font-size: 15px; }
.vp-summary .ftr { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
/* ═════════════ 배차 요청 (dispatch-requests 패턴) ═════════════ */
.dp { display: grid; grid-template-columns: 360px 1fr; overflow: hidden; }
@media (max-width: 980px) { .dp { grid-template-columns: 1fr; height: auto; } }
.dp-list { background: var(--bg2); border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
.dp-main { overflow-y: auto; padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 14px; min-width: 0; background: var(--bg); }
.dp .lh { padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg2); z-index: 2; }
.dp .lh h2 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; }
.dp .lh .sub { font-size: 11.5px; color: var(--fg3); font-family: var(--mono); }
.dp .lh .tabs { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.dp .lh .tabs .t { padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: var(--fg3); background: var(--bg3); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.dp .lh .tabs .t.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.dp .lh .tabs .t .c { margin-left: 4px; opacity: 0.7; font-family: var(--mono); font-size: 10.5px; }
.dr { padding: 13px 14px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: background .12s; position: relative; }
.dr:hover { background: var(--bg3); }
.dr.sel { background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: 11px; }
.dr.urgent::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--red); }
.dr.urgent.sel::before { left: -3px; }
.dr .top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.dr .top .id { font-family: var(--mono); color: var(--brand2); font-weight: 700; }
.dr .top .age { color: var(--fg3); font-family: var(--mono); font-size: 10.5px; margin-left: auto; }
.dr .vendor { font-size: 13px; font-weight: 600; line-height: 1.3; }
.dr .route { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--fg2); font-family: var(--mono); }
.dr .route .arrow { color: var(--fg4, var(--fg3)); }
.dr .meta { display: flex; gap: 8px; font-size: 10.5px; color: var(--fg3); font-family: var(--mono); flex-wrap: wrap; }
.dr .meta b { color: var(--fg2); font-weight: 600; }
.dr .stt { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.04em; font-family: var(--mono); display: inline-block; width: fit-content; }
.dr .stt.new { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(74,168,255,.3); }
.dr .stt.quote { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.3); }
.dr .stt.assigned { background: var(--brand-soft); color: var(--brand2); border: 1px solid var(--brand-line); }
.dr .stt.transit { background: rgba(157,134,255,.15); color: #b39eff; border: 1px solid rgba(157,134,255,.3); }
.dr .stt.done { background: var(--green-soft); color: var(--green); border: 1px solid rgba(47,210,126,.3); }
/* DP 메인 hd-bar / strip / row2 / card */
.dp-main .hd-bar { display: flex; align-items: flex-start; gap: 14px; }
.dp-main .hd-bar h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dp-main .hd-bar h1 .id-pill { font-family: var(--mono); font-size: 12.5px; color: var(--brand2); background: var(--brand-soft); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--brand-line); }
.dp-main .hd-bar h1 .stt-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line); }
.dp-main .hd-bar .meta { margin-top: 6px; font-size: 12.5px; color: var(--fg3); display: flex; gap: 14px; flex-wrap: wrap; }
.dp-main .hd-bar .meta b { color: var(--fg); font-weight: 600; }
.dp-main .hd-bar .sp { flex: 1; }
.dp-main .hd-bar .act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dp-main .strip { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; min-height: 80px; }
.dp-main .strip .c { padding: 0 16px; border-right: 1px solid var(--line); min-width: 0; min-height: 80px; display: flex; flex-direction: column; justify-content: center; overflow-y: visible; }
.dp-main .strip .c:last-child { border-right: none; }
.dp-main .strip .c .l { font-size: 10.5px; color: var(--fg3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.dp-main .strip .c .v { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-top: 5px; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.dp-main .strip .c .v small { font-size: 11px; color: var(--fg3); font-weight: 500; margin-left: 2px; }
.dp-main .strip .c .d { font-size: 11px; color: var(--fg3); margin-top: 3px; font-family: var(--mono); }
.dp-main .row2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: flex-start; }
@media (max-width: 980px) { .dp-main .row2 { grid-template-columns: 1fr; } }
.dp-main .card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.dp-main .card .card-h { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.dp-main .card .card-h h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.dp-main .card .card-h .sp { flex: 1; }
.dp-main .card .card-h .meta { font-size: 11.5px; color: var(--fg3); font-family: var(--mono); }
.dp-main .card .card-bd { padding: 16px; }
/* ─── dispatch-request: route 시각화 (상차→하차) ─── */
.dp-main .route-viz {
background: radial-gradient(ellipse at center, #11131c 0%, #0a0c12 100%);
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px 32px;
position: relative;
height: 148px;
overflow: hidden;
}
/* 격자 — 부드러운 dot 패턴 (라인 격자보다 깔끔) */
.dp-main .route-viz .grid-bg {
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(124,92,255,.12) 1px, transparent 1.5px);
background-size: 20px 20px;
background-position: 0 0;
pointer-events: none;
border-radius: 10px;
opacity: .55;
mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}
.dp-main .route-viz .nodes {
position: relative; display: grid;
grid-template-columns: 1fr 1fr;
align-items: center; height: 120px;
padding: 0;
gap: 60px;
}
.dp-main .route-viz .node {
display: flex; flex-direction: column; align-items: center;
gap: 8px; z-index: 2; position: relative;
}
.dp-main .route-viz .node:first-child { justify-self: start; padding-left: 8px; }
.dp-main .route-viz .node:last-child { justify-self: end; padding-right: 8px; }
.dp-main .route-viz .node .pin {
width: 44px; height: 44px; border-radius: 50%;
background: var(--bg2); border: 2px solid var(--brand);
display: grid; place-items: center; color: var(--brand2);
box-shadow: 0 0 0 4px rgba(124,92,255,.12), 0 6px 16px -4px rgba(124,92,255,.45);
transition: transform .15s;
}
.dp-main .route-viz .node.dst .pin {
border-color: var(--green); color: var(--green);
box-shadow: 0 0 0 4px rgba(47,210,126,.12), 0 6px 16px -4px rgba(47,210,126,.45);
}
.dp-main .route-viz .node .pin svg { width: 18px; height: 18px; }
.dp-main .route-viz .node .lb {
font-family: var(--mono); font-size: 10.5px; font-weight: 700;
color: var(--fg); text-align: center;
letter-spacing: 0.04em; text-transform: uppercase;
margin-top: 2px;
}
.dp-main .route-viz .node .ad {
font-size: 11px; color: var(--fg3);
text-align: center; max-width: 200px; line-height: 1.45;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
font-weight: 500;
}
.dp-main .route-viz .node .ad strong {
display: block; color: var(--fg2); font-weight: 600; font-size: 11.5px;
margin-bottom: 1px;
}
/* 점선 연결 — 가운데 info-tag 만큼 좌우 분리 */
.dp-main .route-viz .conn {
position: absolute; top: 28%; left: 50px; right: 50px;
height: 1.5px;
background-image: linear-gradient(to right, rgba(124,92,255,.55) 50%, transparent 50%);
background-size: 10px 1.5px;
background-repeat: repeat-x;
z-index: 1; transform: translateY(-50%);
}
.dp-main .route-viz .info-tag {
position: absolute; background: rgba(13,15,22,0.92);
border: 1px solid var(--brand-line); color: var(--brand2);
padding: 5px 11px; border-radius: 6px;
font-family: var(--mono); font-size: 11px; font-weight: 700;
left: 50%; top: 28%; transform: translate(-50%, -50%); z-index: 3;
white-space: nowrap;
backdrop-filter: blur(6px);
box-shadow: 0 4px 12px -2px rgba(0,0,0,.5);
}
/* dispatch-request 타임라인 우측 시각 표시 */
.dp-main .tl-it { grid-template-columns: 22px 1fr auto; padding: 8px 14px; }
.dp-main .tl-it .when {
font-family: var(--mono); font-size: 10.5px;
color: var(--fg3); white-space: nowrap;
align-self: center;
}
/* dispatch-request actbar 하단 액션 */
.dp-main .actbar {
padding: 14px 18px; background: var(--bg2);
border: 1px solid var(--line); border-radius: 10px;
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.dp-main .actbar .hint {
font-size: 11.5px; color: var(--fg3); font-family: var(--mono);
}
.dp-main .actbar .sp { flex: 1; }
/* ─── RUNA wave-new.html 패턴 ─── */
.nw-back{position:fixed;inset:0;background:rgba(5,6,9,.5);backdrop-filter:blur(2px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:40px}
.nw{width:100%;max-width:1080px;max-height:calc(100vh - 80px);background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-xl);box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 10px 24px -8px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden;animation:nwIn .2s ease-out}
@keyframes nwIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.nw-hd{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(124,92,255,.06),transparent)}
.nw-hd .ic{width:36px;height:36px;border-radius:8px;background:var(--brand-soft);color:var(--brand2);display:grid;place-items:center;border:1px solid var(--brand-line)}
.nw-hd .ic svg{width:18px;height:18px}
.nw-hd .ti{flex:1}
.nw-hd .ti h1{margin:0;font-size:17px;font-weight:700;letter-spacing:-0.01em}
.nw-hd .ti .sub{font-size:12.5px;color:var(--fg3);margin-top:2px}
.nw-hd .ti .sub b{color:var(--fg);font-weight:600;font-family:var(--mono)}
.nw-hd .close{width:30px;height:30px;border-radius:6px;background:transparent;border:none;color:var(--fg3);cursor:pointer;display:grid;place-items:center}
.nw-hd .close:hover{background:var(--bg3);color:var(--fg)}
.nw-hd .close svg{width:15px;height:15px}
.nw-step{padding:0 22px 14px;display:flex;gap:0;align-items:center}
.nw-step .stp{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;font-size:11.5px;color:var(--fg3);font-weight:500;position:relative;flex:1}
.nw-step .stp:not(:last-child)::after{content:"";position:absolute;right:-4px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--line2);border-top:1.5px solid var(--line2);transform:translateY(-50%) rotate(45deg)}
.nw-step .stp .n{width:20px;height:20px;border-radius:50%;background:var(--bg3);border:1.5px solid var(--line2);display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--fg3);flex-shrink:0}
.nw-step .stp.d .n{background:var(--green);color:#041a0e;border-color:var(--green)}
.nw-step .stp.n{background:var(--brand-soft);border:1px solid var(--brand-line)}
.nw-step .stp.n .n{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,92,255,.15)}
.nw-step .stp.n,.nw-step .stp.d{color:var(--fg)}
.nw-bd{display:grid;grid-template-columns:1fr 320px;flex:1;overflow:hidden}
.nw-left{overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.nw-right{background:var(--bg);border-left:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column}
.strat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.strat{padding:12px 14px;background:var(--bg);border:1.5px solid var(--line2);border-radius:7px;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;gap:6px}
.strat:hover{border-color:var(--line3);background:var(--bg3)}
.strat.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand) inset}
.strat .rb{width:14px;height:14px;border-radius:50%;border:2px solid var(--line3);flex-shrink:0;margin-top:2px}
.strat.sel .rb{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px var(--bg2)}
.strat .top{display:flex;align-items:center;gap:8px}
.strat .top b{font-size:13px;font-weight:700;color:var(--fg)}
.strat .top .est{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--fg3);font-weight:600}
.strat .desc{font-size:11.5px;color:var(--fg3);line-height:1.5}
.blk{padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:7px}
.blk-hd{font-size:11px;color:var(--fg3);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.blk-hd .sp{flex:1}
.blk-hd .clr{font-size:10.5px;color:var(--brand2);font-weight:500;text-transform:none;letter-spacing:0;cursor:pointer}
.nw-fld{display:flex;flex-direction:column;gap:5px}
.nw-fld .l{font-size:11px;color:var(--fg3);font-weight:600}
.nw-fld .ctrl{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line2);border-radius:5px;padding:6px 10px;font-size:12.5px}
.nw-fld .ctrl:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.nw-fld .ctrl input,.nw-fld .ctrl select{flex:1;background:transparent;border:none;outline:none;color:var(--fg);font-family:inherit;font-size:12.5px}
.nw-fld .ctrl .post{color:var(--fg3);font-family:var(--mono);font-size:11px;margin-left:6px}
.ch-row{display:flex;gap:5px;flex-wrap:wrap}
.ch-row .c{padding:5px 10px;background:var(--bg2);border:1px solid var(--line2);border-radius:5px;font-size:11.5px;color:var(--fg2);cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.ch-row .c:hover{background:var(--bg3);border-color:var(--line3)}
.ch-row .c.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand2);font-weight:600}
.ch-row .c.on::before{content:"✓";font-weight:700}
.preview{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:7px;display:flex;flex-direction:column;overflow:hidden}
.pv-hd{padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg2);display:flex;align-items:center;gap:10px;font-size:11px}
.pv-hd b{color:var(--fg);font-weight:700;font-size:12.5px}
.pv-hd .sp{flex:1}
.pv-hd .meta{font-family:var(--mono);color:var(--fg3)}
.pv-list{max-height:230px;overflow-y:auto}
.ord-row{display:grid;grid-template-columns:24px 90px 1fr 60px 90px;gap:10px;padding:8px 12px;align-items:center;border-bottom:1px solid var(--line);font-size:12px}
.ord-row:hover{background:var(--bg3)}
.ord-row:last-child{border-bottom:none}
.ord-row input{accent-color:var(--brand);width:13px;height:13px}
.ord-row .id{font-family:var(--mono);font-size:11px;color:var(--fg3);font-weight:500}
.ord-row .id b{color:var(--brand2);font-weight:600}
.ord-row .nm{color:var(--fg);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-row .nm small{display:block;color:var(--fg3);font-size:10.5px;font-weight:400;margin-top:1px}
.ord-row .qty{font-family:var(--mono);font-weight:600;text-align:right;color:var(--fg2)}
.ord-row .due{font-family:var(--mono);font-size:11px;color:var(--amber);font-weight:600;text-align:right}
.ord-row.urgent .due{color:var(--red)}
.sum-hd{padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(124,92,255,.05),transparent)}
.sum-hd .l{font-size:10.5px;color:var(--fg3);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:5px}
.sum-hd h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.sum-hd h3 .mono{font-family:var(--mono);font-size:13px;color:var(--brand2);font-weight:600;margin-left:6px;background:var(--brand-soft);padding:2px 7px;border-radius:4px;border:1px solid var(--brand-line);vertical-align:3px}
.sum-stat{padding:14px 18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sum-stat .s{display:flex;flex-direction:column;gap:2px}
.sum-stat .s .l{font-size:10.5px;color:var(--fg3);font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.sum-stat .s .v{font-size:20px;font-weight:700;font-family:var(--mono);letter-spacing:-0.02em}
.sum-stat .s .v small{font-size:11px;color:var(--fg3);font-weight:500;margin-left:2px}
.sum-stat .s .sub{font-size:11px;color:var(--fg3)}
.sum-sect{padding:14px 18px;border-bottom:1px solid var(--line)}
.sum-sect .h{font-size:11px;color:var(--fg3);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:10px}
.sum-sect .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.5px}
.sum-sect .kv .k{color:var(--fg3);font-weight:500}
.sum-sect .kv .v{color:var(--fg);font-weight:500;text-align:right}
.sum-sect .kv .v.mono{font-family:var(--mono);font-size:12px}
.sla{padding:8px 10px;background:var(--green-soft);border:1px solid rgba(47,210,126,.25);border-radius:5px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--green)}
.sla.warn{background:var(--amber-soft);color:var(--amber);border-color:rgba(245,165,36,.25)}
.sla svg{width:13px;height:13px}
.sla b{font-weight:700}
.pkr{display:flex;align-items:center;gap:10px;padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:5px;cursor:pointer}
.pkr:hover{border-color:var(--line2)}
.pkr .ava-pk{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ff9966,#ff5e62);display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px;flex-shrink:0}
.pkr .info{flex:1;font-size:12px;line-height:1.3}
.pkr .info b{color:var(--fg);font-weight:600;display:block}
.pkr .info small{color:var(--fg3);font-size:10.5px}
.pkr .stat{font-size:10.5px;color:var(--green);font-weight:700;padding:1px 5px;background:var(--green-soft);border-radius:3px}
.pkr.sel-pk{border-color:var(--brand);background:var(--brand-soft)}
.nw-ft{padding:12px 22px;border-top:1px solid var(--line);background:var(--bg3);display:flex;align-items:center;gap:8px;flex-shrink:0}
.nw-ft .hint{font-size:11.5px;color:var(--fg3);font-family:var(--mono)}
.nw-ft .hint kbd{font-family:var(--mono);font-size:10px;background:var(--bg);border:1px solid var(--line2);padding:1px 5px;border-radius:3px;color:var(--fg2);margin:0 2px}
.nw-ft .sp{flex:1}
.heads-up{padding:10px 12px;background:rgba(74,168,255,.07);border:1px solid rgba(74,168,255,.2);border-radius:6px;display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--fg);line-height:1.5}
.heads-up svg{width:13px;height:13px;color:var(--blue, #4aa8ff);flex-shrink:0;margin-top:2px}
.heads-up b{color:var(--blue, #4aa8ff);font-weight:600}
.nw-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.nw-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* ═════════════ 통합 주문/출고 페이지 (orders.html 1:1) ═════════════ */
/*
* .od-main 은 이미 .page-flat 안에 들어가므로 사이드바 오프셋은 Filament fi-main 이 처리.
* 이전 width:calc(100% - 244px) + margin-left:244px hack 제거 (2026-05-18) —
* 사이드바 width 가 244px 고정 가정 + 다른 페이지와 정렬 어긋남 + collapsed/topbar 모드에서 깨짐.
*/
.od-main {
display: flex; flex-direction: column; min-height: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.od-main > * { max-width: 100%; box-sizing: border-box; min-width: 0; }
.od-main .otb-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
/* Hero strip — 가로 2단 + 그라데이션 */
.ohero { padding: 14px 22px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; background: linear-gradient(180deg, var(--bg2) 0%, transparent 100%); }
@media (max-width: 980px) { .ohero { grid-template-columns: 1fr; } }
.ohero h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.ohero h1 small { font-size: 12px; color: var(--fg3); font-family: var(--mono); font-weight: 500; }
.ohero .pills { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ohero .pill { font-size: 11px; color: var(--fg3); font-family: var(--mono); font-weight: 600; padding: 2px 7px; border-radius: 3px; background: var(--bg3); border: 1px solid var(--line2); }
.ohero .pill.live { background: var(--green-soft, rgba(47,210,126,.1)); color: var(--green); border-color: rgba(47,210,126,.3); display: inline-flex; align-items: center; gap: 5px; }
.ohero .pill.live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: oms-pulse 1.4s ease-in-out infinite; }
@keyframes oms-pulse { 50% { opacity: 0.4; } }
.ohero .kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); overflow: hidden; }
@media (max-width: 1100px) { .ohero .kpis { grid-template-columns: repeat(3, 1fr); } .ohero .kpis .c:nth-child(3n) { border-right: none; } }
@media (max-width: 700px) { .ohero .kpis { grid-template-columns: repeat(2, 1fr); } .ohero .kpis .c:nth-child(2n) { border-right: none; } }
.ohero .kpis .c { padding: 9px 14px; border-right: 1px solid var(--line); min-width: 0; }
.ohero .kpis .c:last-child { border-right: none; }
.ohero .kpis .c .l { font-size: 9.5px; color: var(--fg3); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ohero .kpis .c .v { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.1; font-family: var(--mono); }
.ohero .kpis .c .v small { font-size: 10px; color: var(--fg3); font-weight: 500; margin-left: 2px; font-family: inherit; }
.ohero .kpis .c .d { font-size: 10px; color: var(--fg3); margin-top: 2px; font-family: var(--mono); display: flex; align-items: center; gap: 4px; }
.ohero .kpis .c .d.up { color: var(--green); }
.ohero .kpis .c .d.down { color: var(--red); }
/* Sub tabs (status) — 무테두리, brand-soft 활성 */
.stat-tabs { display: flex; gap: 1px; padding: 10px 22px; border-bottom: 1px solid var(--line); background: var(--bg2); overflow-x: auto; align-items: center; }
.stat-tab { padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--fg3); background: transparent; border: none; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: inherit; transition: all .12s; }
.stat-tab:hover { background: var(--bg3); color: var(--fg2); }
.stat-tab.on { background: var(--brand-soft); color: var(--brand2); }
.stat-tab .c { font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--bg3); color: var(--fg3); letter-spacing: 0.03em; }
.stat-tab.on .c { background: var(--brand); color: #fff; }
.stat-tab.danger.on { background: var(--red-soft, rgba(255,90,108,.12)); color: var(--red); }
.stat-tab.danger.on .c { background: var(--red); color: #fff; }
.stat-tab.warn.on { background: var(--amber-soft); color: var(--amber); }
.stat-tab.warn.on .c { background: var(--amber); color: #0e0805; }
.stat-tab.live::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); animation: oms-pulse 1.4s ease-in-out infinite; }
/* Toolbar */
.otoolbar { padding: 10px 22px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: var(--bg2); }
.otoolbar .search { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line2); border-radius: 6px; padding: 7px 11px; gap: 8px; min-width: 340px; }
.otoolbar .search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.otoolbar .search svg { width: 13px; height: 13px; color: var(--fg3); }
.otoolbar .search input { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font-family: inherit; font-size: 12.5px; }
.otoolbar .chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ochip { padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--fg2); background: var(--bg); border: 1px solid var(--line2); border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .12s; }
/* select.ochip / input.ochip — OS 기본 화살표/스피너 완전 제거 + 단일 화살표 표시 */
select.ochip { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding-right: 24px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%236f7684' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
select.ochip::-ms-expand { display: none; }
input.ochip { -webkit-appearance: none; appearance: none; }
input.ochip::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.ochip:hover { border-color: var(--brand-line); color: var(--fg); }
.ochip.on { background: var(--brand-soft); color: var(--brand2); border-color: var(--brand-line); }
.ochip svg { width: 10px; height: 10px; }
.ochip.add { border-style: dashed; color: var(--fg3); }
.otoolbar .right { display: flex; gap: 6px; align-items: center; }
/* Bulk action bar */
.obulk { padding: 9px 22px; background: var(--brand-soft); border-bottom: 1px solid var(--brand-line); display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--fg); }
.obulk b { color: var(--brand2); font-weight: 700; font-family: var(--mono); }
.obulk .sp { flex: 1; }
.obulk .ba { display: flex; gap: 6px; flex-wrap: wrap; }
/* Table .otb */
.otb-wrap { overflow-x: auto; overflow-y: visible; background: var(--bg); position: relative; max-width: 100%; }
.otb { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 1100px; }
.otb thead th { padding: 9px 12px; text-align: left; font-size: 10.5px; font-weight: 600; color: var(--fg3); letter-spacing: 0.05em; text-transform: uppercase; background: var(--bg2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.otb thead th.chk-col { width: 30px; padding-right: 0; }
.otb tbody td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; background: var(--bg2); line-height: 1.45; }
.otb tbody tr { transition: background .1s; }
.otb tbody tr:hover td { background: var(--bg3); }
.otb .ordid:hover { text-decoration: underline; }
.otb .crr-cell.tnum:hover { text-decoration: underline; }
.otb tbody tr.sel td { background: rgba(124,92,255,.06); }
.otb tbody tr.sel:hover td { background: rgba(124,92,255,.1); }
.otb .ordid { font-family: var(--mono); color: var(--brand2); font-weight: 700; font-size: 11.5px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.otb .ordid .priority { color: var(--red); }
.otb .ordid .priority svg { width: 11px; height: 11px; }
/* 채널 18×18 컬러 박스 + 라벨 */
.otb .ch-cell { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.otb .ch-cell .ch { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 9px; letter-spacing: -0.03em; flex-shrink: 0; }
/* 채널 배지 (.ch-cell 외부에서도 강제 size — column stretching 방지) */
.ch-cell { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.ch-cell .ch,
td .ch-cell .ch {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
flex: 0 0 22px !important;
border-radius: 4px;
display: grid;
place-items: center;
color: #fff;
font-weight: 800;
font-size: 10px;
letter-spacing: -0.03em;
}
.ch-cell .nm { flex: 1; min-width: 0; }
.ch-cell .nm small { display: block; color: var(--fg3); font-family: var(--mono); font-size: 10px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch.ss { background: linear-gradient(135deg, #ff6f3c, #e8401c); }
.ch.cp { background: linear-gradient(135deg, #ec4444, #a02828); }
.ch.nv { background: linear-gradient(135deg, #03c75a, #02a040); }
.ch.gg { background: linear-gradient(135deg, #4aa8ff, #2e75c4); }
.ch.ow { background: linear-gradient(135deg, #7c5cff, #5236c4); }
.ch.ma { background: linear-gradient(135deg, #94a3b8, #475569); }
.ch.pa { background: linear-gradient(135deg, #fbbf24, #d97706); }
.ch.es { background: linear-gradient(135deg, #f472b6, #be185d); }
.ch.b2b { background: linear-gradient(135deg, #666, #333); }
.ch.kk { background: linear-gradient(135deg, #fae100, #c8b400); color: #1a1a00; }
.ch.ab { background: linear-gradient(135deg, #000, #3a3a3a); }
.otb .ch-cell .nm small { display: block; color: var(--fg3); font-family: var(--mono); font-size: 10px; margin-top: 1px; }
/* 고객사 약자 컬러 칩 */
.otb .cust-cell .nm { font-weight: 600; }
.otb .cust-cell .nm small { display: block; color: var(--fg3); font-size: 10.5px; margin-top: 1px; font-weight: 500; }
.otb .tnt-pill { font-family: var(--mono); font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; display: inline-block; letter-spacing: 0.04em; border: 1px solid; margin-right: 3px; vertical-align: 1px; }
.tnt-bg { background: rgba(124,92,255,.12); color: #b39eff; border-color: rgba(124,92,255,.3); }
.tnt-rn { background: rgba(245,165,36,.12); color: var(--amber); border-color: rgba(245,165,36,.3); }
.tnt-gb { background: rgba(47,210,126,.12); color: var(--green); border-color: rgba(47,210,126,.3); }
.tnt-os { background: rgba(74,168,255,.12); color: var(--blue); border-color: rgba(74,168,255,.3); }
.otb .sku-cell { font-size: 12px; line-height: 1.4; }
.otb .sku-cell .first { font-weight: 600; color: var(--fg); }
.otb .sku-cell .more { font-size: 10.5px; color: var(--fg3); font-family: var(--mono); }
.otb .ea { font-family: var(--mono); font-weight: 700; text-align: right; }
.otb .amt { font-family: var(--mono); font-weight: 700; text-align: right; white-space: nowrap; }
.otb .amt small { display: block; font-size: 10px; color: var(--fg3); font-weight: 500; margin-top: 1px; }
/* 상태 칩 */
.stt-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.04em; font-family: var(--mono); display: inline-block; white-space: nowrap; }
.stt-pill.recv { background: var(--bg3); color: var(--fg2); border: 1px solid var(--line2); }
.stt-pill.paid { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(74,168,255,.3); }
.stt-pill.pick { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.3); }
.stt-pill.pack { background: rgba(157,134,255,.12); color: #b39eff; border: 1px solid rgba(157,134,255,.3); }
.stt-pill.ship { background: var(--brand-soft); color: var(--brand2); border: 1px solid var(--brand-line); }
.stt-pill.delv { background: var(--green-soft, rgba(47,210,126,.1)); color: var(--green); border: 1px solid rgba(47,210,126,.3); }
.stt-pill.hold { background: var(--red-soft, rgba(255,90,108,.12)); color: var(--red); border: 1px solid rgba(255,90,108,.3); }
.stt-pill.cancel { background: var(--bg3); color: var(--fg3); border: 1px solid var(--line2); text-decoration: line-through; }
/* 택배사 16×16 컬러 박스 */
.crr-cell { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg2); font-family: var(--mono); white-space: nowrap; }
.crr-cell .lg { width: 16px; height: 16px; border-radius: 3px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 8px; }
.crr-cell .lg.cj { background: #ec4444; }
.crr-cell .lg.hj { background: #4aa8ff; }
.crr-cell .lg.lt { background: #f5a524; }
.crr-cell .lg.pt { background: #7c5cff; }
.crr-cell .tnum { color: var(--fg3); font-size: 10px; }
/* 컷오프 시간 */
.cutoff { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.cutoff.urgent { color: var(--red); font-weight: 700; }
.cutoff.warn { color: var(--amber); font-weight: 600; }
.cutoff.ok { color: var(--fg3); }
.cutoff small { display: block; font-size: 9.5px; color: var(--fg4, var(--fg3)); margin-top: 1px; font-weight: 500; }
/* 플래그 */
.flag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.04em; font-family: var(--mono); white-space: nowrap; }
.flag.cold { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(74,168,255,.3); }
.flag.gift { background: rgba(157,134,255,.12); color: #b39eff; border: 1px solid rgba(157,134,255,.3); }
.flag.vip { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.3); }
.flag.repeat { background: var(--green-soft, rgba(47,210,126,.1)); color: var(--green); border: 1px solid rgba(47,210,126,.3); }
.flag-row { display: flex; gap: 3px; flex-wrap: wrap; }
/* 행 hover 액션 */
.otb .age { font-family: var(--mono); font-size: 11px; color: var(--fg3); white-space: nowrap; line-height: 1.3; }
.otb .age b { color: var(--fg2); font-weight: 700; display: block; }
.otb .row-act { display: flex; gap: 3px; opacity: 0; transition: opacity .12s; }
.otb tbody tr:hover .row-act { opacity: 1; }
.otb .row-act button { background: var(--bg); border: 1px solid var(--line2); color: var(--fg2); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; display: grid; place-items: center; }
.otb .row-act button:hover { border-color: var(--brand-line); color: var(--brand2); }
.otb .row-act svg { width: 11px; height: 11px; }
/* ═════════════ Order Detail (order-detail.html 1:1) ═════════════ */
.od { display: grid; grid-template-columns: 1fr 340px; gap: 20px; padding: 20px 24px 40px; overflow: auto; min-height: 0; }
@media (max-width: 1024px) { .od { grid-template-columns: 1fr; } }
.od .main-col { display: flex; flex-direction: column; gap: 16px; min-width: 1280px; }
@media (max-width: 1024px) { .od .main-col { min-width: 0; } }
.od-head { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.od-head .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.od-head h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.od-head h1 .mono-id { font-family: var(--mono); font-size: 16px; color: var(--fg2); font-weight: 500; }
.od-head .meta-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.od-head .meta-row .m-item { display: flex; flex-direction: column; gap: 3px; }
.od-head .meta-row .m-item .l { font-size: 11px; color: var(--fg3); font-weight: 500; letter-spacing: 0.03em; }
.od-head .meta-row .m-item .v { font-size: 13px; font-weight: 600; }
.od-head .meta-row .m-item .v.mono { font-family: var(--mono); font-size: 12.5px; }
/* Stepper */
.od-steps { display: flex; gap: 0; background: var(--bg3); border: 1px solid var(--line); border-radius: 7px; padding: 4px; margin-top: 14px; flex-wrap: wrap; }
.od-step { flex: 1; min-width: 110px; padding: 8px 10px; border-radius: 5px; display: flex; align-items: center; gap: 8px; position: relative; color: var(--fg3); font-size: 11.5px; font-weight: 500; }
.od-step .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bg4, var(--bg3)); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--fg3); flex-shrink: 0; border: 1px solid var(--line2); }
.od-step.done { color: var(--fg2); }
.od-step.done .dot { background: var(--green); color: #041a0e; border-color: var(--green); }
.od-step.now { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--brand); }
.od-step.now .dot { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.od-step .t { display: block; font-size: 10px; color: var(--fg3); font-weight: 400; margin-top: 1px; font-family: var(--mono); }
.od-step + .od-step::before { content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 1px; background: var(--line); transform: translateY(-50%); }
/* Line items table */
.li-table { width: 100%; border-collapse: collapse; }
.li-table th { text-align: left; font-size: 11px; color: var(--fg3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg3); }
.li-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 12.5px; }
.li-table tr:last-child td { border-bottom: none; }
.li-table .img { width: 36px; height: 36px; background: var(--bg4, var(--bg3)); border-radius: 5px; border: 1px solid var(--line2); display: grid; place-items: center; color: var(--fg3); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; flex-shrink: 0; }
.li-table .nm { font-weight: 500; color: var(--fg); }
.li-table .nm .sku { display: block; color: var(--fg3); font-size: 11px; font-family: var(--mono); margin-top: 2px; font-weight: 400; }
.li-table .q { text-align: center; font-family: var(--mono); font-weight: 600; }
.li-table .p, .li-table .t { text-align: right; font-family: var(--mono); font-weight: 500; }
.li-table .t { font-weight: 700; color: var(--fg); }
.sum { padding: 14px 18px; background: var(--bg3); border-top: 1px solid var(--line); }
.sum-r { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; color: var(--fg2); }
.sum-r.total { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line2); font-size: 15px; font-weight: 700; color: var(--fg); }
.sum-r .v { font-family: var(--mono); }
/* Right rail */
.od .rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rail-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rail-card .hd { padding: 10px 14px; font-size: 11px; color: var(--fg3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.rail-card .hd .sp { flex: 1; }
.rail-card .bd { padding: 14px; }
.od .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; }
.od .kv .k { color: var(--fg3); font-weight: 500; }
.od .kv .v { color: var(--fg); }
.od .kv .v.mono { font-family: var(--mono); font-size: 12px; }
/* Timeline */
.tl { padding: 6px 0; }
.tl-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 14px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 27px; top: 26px; bottom: -10px; width: 1px; background: var(--line); }
.tl-item:last-child::before { display: none; }
.tl-item .ic { width: 22px; height: 22px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--fg3); z-index: 1; }
.tl-item .ic svg { width: 11px; height: 11px; }
.tl-item .ic.g { background: var(--green-soft, rgba(47,210,126,.1)); color: var(--green); border-color: transparent; }
.tl-item .ic.b { background: var(--brand-soft); color: var(--brand2); border-color: transparent; }
.tl-item .ic.a { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.tl-item .bd { font-size: 12.5px; line-height: 1.45; }
.tl-item .bd b { color: var(--fg); font-weight: 600; }
.tl-item .bd code { font-family: var(--mono); background: var(--bg3); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--brand2); border: 1px solid var(--line); }
.tl-item .bd .t { color: var(--fg3); font-size: 11px; display: block; margin-top: 2px; font-family: var(--mono); }
.note-bar { padding: 10px 14px; background: var(--amber-soft); border: 1px solid rgba(245,165,36,.3); border-radius: 7px; display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--fg); }
.note-bar svg { width: 14px; height: 14px; color: var(--amber); flex-shrink: 0; margin-top: 1px; }
/* ═════════════ Store 카드 ═════════════ */
.store-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: all .15s; }
.store-card:hover { border-color: var(--line3, var(--brand-line)); box-shadow: 0 6px 18px -8px rgba(0,0,0,.2); }
.store-card.inactive { opacity: .65; background: var(--bg); }
.store-card-head { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.store-card-head > div:first-child { width: 42px; height: 42px; min-width: 42px; max-width: 42px; min-height: 42px; max-height: 42px; flex: 0 0 42px; align-self: center; }
.store-card-head > div:first-child img { max-width: 32px; max-height: 32px; width: auto; height: auto; }
.store-card-body { padding: 14px 16px; }
.store-card-foot { padding: 10px 14px; background: var(--bg3); border-top: 1px solid var(--line); display: flex; gap: 6px; align-items: center; }
.store-kv { display: grid; grid-template-columns: 60px 1fr; gap: 6px 12px; font-size: 12px; align-items: center; }
.store-kv .k { color: var(--fg3); font-weight: 600; font-size: 11px; }
.store-kv .v { color: var(--fg); font-weight: 500; }
/* === part 2 === */
/* ─── workspace dashboard ─────────────────────────────────────────── */
/* 컨테이너 */
.wp-dash { display: flex; flex-direction: column; }
/* SVG 크기 — 모든 .wp-* 안의 SVG 기본 크기 강제 (개별 정의 없을 때 14px) */
.wp-dash svg { width: 14px; height: 14px; flex-shrink: 0; }
/* 특수 사이즈 */
.wp-hl-ic svg { width: 13px !important; height: 13px !important; }
.wp-hl-arrow svg { width: 11px !important; height: 11px !important; }
.wp-hl-v svg { width: 11px !important; height: 11px !important; }
.wp-qa-ic svg { width: 15px !important; height: 15px !important; }
.wp-help-ic svg { width: 16px !important; height: 16px !important; }
.wp-card-h svg { width: 14px !important; height: 14px !important; }
.wp-notif-ic svg { width: 12px !important; height: 12px !important; }
.wp-banner svg { width: 14px !important; height: 14px !important; }
.wp-btn-xs svg, .wp-btn-sm svg { width: 12px !important; height: 12px !important; }
/* Welcome 헤더 */
.wp-welcome {
padding: 18px 24px 16px;
background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(74,168,255,.03));
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 20px;
}
.wp-welcome-h1 {
margin: 0; font-size: 21px; font-weight: 700;
letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px;
}
.wp-welcome-sub {
color: var(--fg3); font-size: 13px; margin-top: 4px;
line-height: 1.5; max-width: 560px;
}
.wp-welcome-sub b { color: var(--fg); font-weight: 600; }
.wp-sla {
margin-left: auto; display: flex; flex-direction: column;
align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.wp-sla-lbl { font-size: 10.5px; color: var(--fg3); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.wp-sla-v { font-size: 18px; font-weight: 700; color: var(--fg2); font-family: var(--mono); }
.wp-sla-note { font-size: 11px; color: var(--fg3); font-family: var(--mono); }
/* Body wrapper */
.wp-body { padding: 18px 24px 40px; display: flex; flex-direction: column; gap: 18px; }
/* Banner */
.wp-banner-info {
padding: 12px 16px; border-radius: 8px;
background: var(--blue-soft); border: 1px solid rgba(74,168,255,.2);
display: flex; align-items: center; gap: 12px;
font-size: 12.5px; color: var(--fg); line-height: 1.5;
}
.wp-banner-info b { font-weight: 700; }
.wp-banner-cta { margin-left: auto; display: flex; gap: 6px; }
/* Highlight 메트릭 카드 */
.wp-hl-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.wp-hl {
background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
cursor: pointer; transition: border-color .12s, background .12s;
position: relative; overflow: hidden;
}
.wp-hl:hover { border-color: var(--line2); background: var(--bg3); }
.wp-hl-urgent { border-color: rgba(245,165,36,.3); background: rgba(245,165,36,.04); }
.wp-hl-urgent::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: var(--amber);
}
.wp-hl-top { display: flex; align-items: center; gap: 8px; }
.wp-hl-ic {
width: 24px; height: 24px; border-radius: 6px;
background: var(--bg3); border: 1px solid var(--line2);
display: grid; place-items: center; color: var(--fg2); flex-shrink: 0;
}
.wp-hl-ic svg { width: 13px; height: 13px; }
.wp-hl-lbl { font-size: 11px; color: var(--fg3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; flex: 1; }
.wp-hl-arrow { color: var(--fg4); }
.wp-hl-arrow svg { width: 11px; height: 11px; }
.wp-hl-v {
font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
line-height: 1.1; font-variant-numeric: tabular-nums;
display: flex; align-items: baseline; gap: 6px;
}
.wp-hl-v small { font-size: 13px; color: var(--fg3); font-weight: 500; }
.wp-hl-v-amber { color: var(--amber); }
.wp-hl-sub { font-size: 11.5px; color: var(--fg3); display: flex; align-items: center; gap: 8px; }
.wp-hl-sub b { color: var(--fg2); font-weight: 600; font-family: var(--mono); }
/* Sparkline */
.wp-spark { position: absolute; right: 8px; bottom: 8px; width: 80px; height: 30px; pointer-events: none; opacity: 0.6; }
/* 2 column */
.wp-row2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: flex-start; }
.wp-left-col { display: flex; flex-direction: column; gap: 18px; }
.wp-right-col { display: flex; flex-direction: column; gap: 18px; }
/* Card */
.wp-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wp-card-h {
padding: 14px 18px; border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 10px;
}
.wp-card-h h2 { margin: 0; font-size: 14px; font-weight: 700; }
.wp-card-h h2 small { font-size: 11.5px; color: var(--fg3); font-weight: 500; margin-left: 8px; }
.wp-sp { flex: 1; }
/* Ship cards */
.wp-ship-list { display: flex; flex-direction: column; }
.wp-ship-card {
padding: 14px 18px; border-bottom: 1px solid var(--line);
display: grid; grid-template-columns: 40px 1fr auto; gap: 12px;
cursor: pointer; transition: background .12s;
}
.wp-ship-card:hover { background: var(--bg3); }
.wp-ship-card:last-child { border-bottom: none; }
.wp-ship-img {
width: 40px; height: 40px; border-radius: 8px;
background: linear-gradient(135deg, var(--bg4), var(--bg5));
border: 1px solid var(--line2); display: grid; place-items: center;
color: var(--amber); font-family: var(--mono); font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.wp-ship-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.wp-ship-id { font-family: var(--mono); font-size: 11.5px; color: var(--brand2); font-weight: 600; }
.wp-ship-ch { font-family: var(--mono); font-size: 10.5px; color: var(--fg3); background: var(--bg3); padding: 1px 5px; border-radius: 3px; }
.wp-ship-nm { font-size: 13.5px; font-weight: 600; color: var(--fg); line-height: 1.3; margin-bottom: 6px; }
/* Mini progress */
.wp-mini-prog { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.wp-st {
display: flex; flex-direction: column; align-items: center; gap: 3px;
font-size: 9px; color: var(--fg3); flex: 1; position: relative;
}
.wp-st-d { width: 9px; height: 9px; border-radius: 50%; background: var(--bg4); border: 1.5px solid var(--line3); }
.wp-st.done .wp-st-d { background: var(--green); border-color: var(--green); }
.wp-st.now .wp-st-d { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(124,92,255,.2); }
.wp-st.done .wp-st-l, .wp-st.now .wp-st-l { color: var(--fg2); font-weight: 600; }
.wp-st:not(:last-child)::after {
content: ""; position: absolute; left: calc(50% + 6px); right: calc(-50% + 6px);
top: 4px; height: 1.5px; background: var(--bg4); z-index: 0;
}
.wp-st.done:not(:last-child)::after { background: var(--green); }
.wp-st.now:not(:last-child)::after { background: linear-gradient(to right, var(--brand), var(--bg4)); }
/* ETA */
.wp-eta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; font-size: 11.5px; flex-shrink: 0; }
.wp-eta-when { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.wp-eta-ago { color: var(--fg3); font-family: var(--mono); font-size: 10.5px; }
.wp-ok { color: var(--green); }
.wp-soon { color: var(--amber); }
.wp-late { color: var(--red); }
.wp-red { color: var(--red); }
/* Inventory KPI */
.wp-inv-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.wp-inv-kpi { background: var(--bg2); padding: 18px 16px; text-align: center; }
.wp-inv-kpi-v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wp-inv-kpi-l { font-size: 11.5px; color: var(--fg3); margin-top: 4px; }
.wp-inv-kpi-warn { background: rgba(245,165,36,.04); }
/* Bill rows */
.wp-bill-row {
display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
padding: 11px 18px; border-bottom: 1px solid var(--line);
align-items: center; font-size: 12.5px; cursor: pointer;
}
.wp-bill-row:last-child { border-bottom: none; }
.wp-bill-row:hover { background: var(--bg3); }
.wp-bill-nm { font-weight: 500; }
.wp-bill-nm small { display: block; color: var(--fg3); font-size: 11px; font-family: var(--mono); margin-top: 1px; }
.wp-bill-amt { font-family: var(--mono); font-weight: 700; text-align: right; }
.wp-bill-stt {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
}
.wp-bill-stt-paid { background: var(--green-soft); color: var(--green); border: 1px solid rgba(47,210,126,.25); }
.wp-bill-stt-due { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.25); }
.wp-bill-stt-pend { background: var(--bg3); color: var(--fg3); border: 1px solid var(--line2); }
/* Quick actions */
.wp-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }
.wp-qa {
padding: 14px; background: var(--bg); border: 1px solid var(--line);
border-radius: 8px; cursor: pointer; display: flex; flex-direction: column;
gap: 4px; transition: all .12s; text-decoration: none; color: var(--fg);
}
.wp-qa:hover { background: var(--bg3); border-color: var(--line2); }
.wp-qa-ic {
width: 30px; height: 30px; border-radius: 7px;
display: grid; place-items: center; margin-bottom: 4px;
}
.wp-qa-ic svg { width: 15px; height: 15px; }
.wp-qa-ic-b { background: var(--brand-soft); color: var(--brand2); border: 1px solid var(--brand-line); }
.wp-qa-ic-g { background: var(--green-soft); color: var(--green); border: 1px solid rgba(47,210,126,.25); }
.wp-qa-ic-a { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(245,165,36,.25); }
.wp-qa-ic-bl { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(74,168,255,.3); }
.wp-qa-nm { font-size: 13px; font-weight: 600; color: var(--fg); }
/* Manager */
.wp-mgr { padding: 16px; display: flex; align-items: center; gap: 14px; }
.wp-mgr-ava {
width: 48px; height: 48px; border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--blue));
display: grid; place-items: center; color: #fff;
font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.wp-mgr-name { font-size: 14px; font-weight: 700; }
.wp-mgr-sub { font-size: 11.5px; color: var(--fg3); font-family: var(--mono); margin-top: 2px; }
/* Notifications */
.wp-notif { display: flex; flex-direction: column; }
.wp-notif-it {
padding: 12px 18px; display: grid; grid-template-columns: 28px 1fr; gap: 12px;
align-items: flex-start; border-bottom: 1px solid var(--line);
cursor: pointer; transition: background .12s; position: relative;
}
.wp-notif-it:hover { background: var(--bg3); }
.wp-notif-it:last-child { border-bottom: none; }
.wp-notif-ic {
width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center; flex-shrink: 0;
}
.wp-notif-ic svg { width: 12px; height: 12px; }
.wp-notif-ic-b { background: var(--brand-soft); color: var(--brand2); }
.wp-notif-ic-g { background: var(--green-soft); color: var(--green); }
.wp-notif-ic-a { background: var(--amber-soft); color: var(--amber); }
.wp-notif-ic-r { background: var(--red-soft); color: var(--red); }
.wp-notif-bd { font-size: 12.5px; line-height: 1.45; color: var(--fg2); }
.wp-notif-bd b { color: var(--fg); font-weight: 600; }
.wp-notif-when { display: block; font-size: 11px; color: var(--fg3); font-family: var(--mono); margin-top: 3px; }
/* Help bar */
.wp-help-bar {
margin: 14px 18px; padding: 14px;
background: linear-gradient(135deg, rgba(124,92,255,.04), transparent);
border: 1px dashed var(--brand-line); border-radius: 8px;
display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
}
.wp-help-ic {
width: 36px; height: 36px; border-radius: 8px;
background: var(--brand-soft); color: var(--brand2);
display: grid; place-items: center; border: 1px solid var(--brand-line);
}
.wp-help-ic svg { width: 16px; height: 16px; }
.wp-help-info b { display: block; font-size: 13px; font-weight: 600; }
.wp-help-info small{ display: block; color: var(--fg3); font-size: 11.5px; margin-top: 2px; }
/* Shared small button */
.wp-btn-xs {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; font-size: 11.5px; font-weight: 600;
border-radius: 5px; border: 1px solid var(--line2);
background: var(--bg3); color: var(--fg2); cursor: pointer;
text-decoration: none; transition: all .12s; white-space: nowrap;
}
.wp-btn-xs:hover { background: var(--bg4); color: var(--fg); border-color: var(--line3); }
/* Empty state */
.wp-empty { padding: 24px 18px; text-align: center; color: var(--fg3); font-size: 13px; }
/* Responsive */
@media (max-width: 900px) {
.wp-hl-grid { grid-template-columns: repeat(2,1fr); }
.wp-row2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.wp-hl-grid { grid-template-columns: 1fr; }
.wp-welcome { flex-wrap: wrap; }
.wp-sla { margin-left: 0; }
}
/* ─── /workspace dashboard ────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
.chat-container — 채팅 UI (support_chats / support_chat_messages)
(이전엔 .ch 였으나 채널 배지 .ch 와 충돌하여 rename)
═══════════════════════════════════════════════════════════════ */
.chat-container {
display: grid;
grid-template-columns: 320px 1fr;
height: calc(100vh - 120px);
min-height: 480px;
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--bg2);
}
/* ── 좌측 채팅 목록 ─────────────────────────────────────────── */
.ch-list {
display: flex;
flex-direction: column;
border-right: 1px solid var(--line);
overflow: hidden;
}
.ch-list-header {
flex-shrink: 0;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--line);
background: var(--bg3);
}
.ch-list-header h3 {
font-size: var(--text-sm);
font-weight: 700;
color: var(--fg);
margin: 0 0 8px;
}
.ch-list-search {
width: 100%;
background: var(--bg4);
border: 1px solid var(--line2);
border-radius: var(--r);
color: var(--fg);
padding: 6px 10px;
font-size: var(--text-xs);
outline: none;
}
.ch-list-search:focus { border-color: var(--brand-line); }
.ch-list-tabs {
display: flex;
gap: 2px;
margin-top: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.ch-list-tabs::-webkit-scrollbar { display: none; }
.ch-tab {
flex-shrink: 0;
padding: 4px 8px;
border-radius: var(--r-sm);
font-size: 10.5px;
font-weight: 600;
background: transparent;
border: 1px solid transparent;
color: var(--fg3);
cursor: pointer;
white-space: nowrap;
transition: all .12s;
}
.ch-tab:hover { color: var(--fg2); background: var(--bg4); }
.ch-tab.active { color: var(--brand2); background: var(--brand-soft); border-color: var(--brand-line); }
.ch-list-body {
flex: 1;
overflow-y: auto;
padding: 6px;
}
/* 채팅방 카드 */
.ch-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border-radius: var(--r-md);
cursor: pointer;
transition: background .1s;
border: 1px solid transparent;
margin-bottom: 2px;
}
.ch-item:hover { background: var(--bg4); }
.ch-item.active { background: var(--brand-soft); border-color: var(--brand-line); }
.ch-item-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.ch-item-no {
font-size: 10px;
color: var(--fg4);
font-family: monospace;
}
.ch-item-time {
font-size: 10px;
color: var(--fg4);
flex-shrink: 0;
}
.ch-item-subject {
font-size: var(--text-xs);
font-weight: 600;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ch-item-preview {
font-size: 11px;
color: var(--fg3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ch-item-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ch-item-tenant {
font-size: 10.5px;
color: var(--fg2);
font-weight: 600;
}
.ch-unread {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--brand);
color: #fff;
font-size: 10px;
font-weight: 700;
margin-left: auto;
}
.ch-status-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.ch-status-dot.open { background: var(--blue); }
.ch-status-dot.waiting_staff { background: var(--amber); }
.ch-status-dot.waiting_seller { background: var(--green); }
.ch-status-dot.resolved { background: var(--fg3); }
.ch-status-dot.closed { background: var(--fg4); }
/* ── 우측 메인 영역 ──────────────────────────────────────────── */
.ch-main {
display: flex;
flex-direction: column;
overflow: hidden;
}
.ch-header {
flex-shrink: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 18px 12px;
border-bottom: 1px solid var(--line);
background: var(--bg3);
gap: 12px;
}
.ch-header-info { flex: 1; min-width: 0; }
.ch-header-title {
font-size: var(--text-base);
font-weight: 700;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0 4px;
}
.ch-header-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: var(--text-xs);
color: var(--fg3);
}
.ch-header-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* 메시지 스크롤 영역 */
.ch-msgs {
flex: 1;
overflow-y: auto;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ch-msgs-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg4);
font-size: var(--text-sm);
}
/* 메시지 버블 */
.ch-bubble-wrap {
display: flex;
flex-direction: column;
max-width: 60%;
width: fit-content;
}
.ch-bubble-wrap.self { align-self: flex-end; align-items: flex-end; }
.ch-bubble-wrap.other { align-self: flex-start; align-items: flex-start; }
.ch-bubble-wrap.system-msg { align-self: center; align-items: center; max-width: 90%; }
.ch-bubble {
padding: 6px 10px;
border-radius: var(--r-md);
font-size: var(--text-sm);
line-height: 1.45;
display: inline-block;
max-width: 100%;
white-space: normal;
}
.ch-bubble-body {
white-space: pre-wrap;
word-break: break-word;
}
.ch-bubble-wrap.self .ch-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 3px; }
.ch-bubble-wrap.other .ch-bubble { background: var(--bg4); color: var(--fg); border-bottom-left-radius: 3px; }
.ch-bubble-wrap.system-msg .ch-bubble {
background: transparent;
color: var(--fg4);
font-size: 11px;
padding: 4px 10px;
border: 1px dashed var(--line2);
border-radius: 20px;
}
.ch-bubble .meta {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
vertical-align: baseline;
font-size: 10px;
color: var(--fg3);
white-space: nowrap;
}
.ch-bubble-wrap.self .ch-bubble .meta { color: rgba(255,255,255,.65); }
.ch-read-check { color: var(--green); font-size: 10px; }
.ch-sender-name {
font-size: 10.5px;
color: var(--fg3);
margin-bottom: 3px;
padding: 0 2px;
}
/* 첨부 미리보기 */
.ch-attach-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ch-attach-thumb {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
border-radius: var(--r);
background: var(--bg5);
border: 1px solid var(--line2);
font-size: 11px;
color: var(--fg2);
text-decoration: none;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ch-attach-thumb:hover { border-color: var(--brand-line); color: var(--brand2); }
.ch-attach-thumb img {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 3px;
}
.ch-attach-thumb svg { width: 14px; height: 14px; flex-shrink: 0; }
/* 입력창 */
.ch-input {
flex-shrink: 0;
padding: 12px 16px;
border-top: 1px solid var(--line);
background: var(--bg3);
display: flex;
flex-direction: column;
gap: 8px;
}
.ch-input-row {
display: flex;
align-items: flex-end;
gap: 8px;
}
.ch-textarea {
flex: 1;
background: var(--bg4);
border: 1px solid var(--line2);
border-radius: var(--r-md);
color: var(--fg);
font-size: var(--text-sm);
padding: 9px 12px;
resize: none;
outline: none;
min-height: 42px;
max-height: 120px;
font-family: var(--mono);
line-height: 1.5;
transition: border-color .12s;
}
.ch-textarea:focus { border-color: var(--brand-line); }
.ch-textarea::placeholder { color: var(--fg4); }
.ch-send-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--r-md);
background: var(--brand);
color: #fff;
border: none;
cursor: pointer;
transition: opacity .12s;
}
.ch-send-btn:hover { opacity: .85; }
.ch-send-btn:disabled { opacity: .35; cursor: not-allowed; }
.ch-send-btn svg { width: 16px; height: 16px; }
.ch-attach-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--r);
background: transparent;
border: 1px solid var(--line2);
color: var(--fg3);
cursor: pointer;
transition: all .12s;
}
.ch-attach-btn:hover { border-color: var(--line3); color: var(--fg2); }
.ch-attach-pending {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 0 2px;
}
.ch-attach-pending-item {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: var(--bg4);
border: 1px solid var(--line2);
border-radius: var(--r-sm);
font-size: 11px;
color: var(--fg2);
}
.ch-attach-pending-item button {
background: none; border: none; color: var(--fg4); cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1;
}
.ch-attach-pending-item button:hover { color: var(--red); }
/* ── 상태 칩 ──────────────────────────────────────────────── */
.ch-chip {
display: inline-block;
padding: 2px 7px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 600;
white-space: nowrap;
}
.ch-chip.open { background: var(--blue-soft); color: var(--blue); }
.ch-chip.waiting_staff { background: var(--amber-soft); color: var(--amber); }
.ch-chip.waiting_seller { background: var(--green-soft); color: var(--green); }
.ch-chip.resolved { background: var(--bg4); color: var(--fg3); }
.ch-chip.closed { background: var(--bg4); color: var(--fg4); }
/* 우선순위 */
.ch-pri { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600; }
.ch-pri.low { background: var(--bg4); color: var(--fg3); }
.ch-pri.normal { background: var(--blue-soft); color: var(--blue); }
.ch-pri.high { background: var(--amber-soft); color: var(--amber); }
.ch-pri.urgent { background: var(--red-soft); color: var(--red); }
/* 빈 상태 */
.ch-no-selection {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--fg4);
}
.ch-no-selection svg { width: 36px; height: 36px; opacity: .4; }
.ch-no-selection p { font-size: var(--text-sm); margin: 0; }
/* Responsive */
@media (max-width: 900px) {
.ch { grid-template-columns: 1fr; height: auto; }
.ch-list { height: 300px; border-right: none; border-bottom: 1px solid var(--line); }
.ch-main { height: calc(100vh - 440px); min-height: 320px; }
}
/* ─── /ch chat UI ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
RUNA Light Mode — html[data-theme="light"] 토큰 오버라이드
2026-06-08 추가: 다크는 기본, 라이트는 옵션
═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
/* Surface */
--bg: #ffffff;
--bg2: #f7f8fa;
--bg3: #eef1f5;
--bg4: #e3e7ee;
--bg5: #d6dbe4;
/* Line */
--line: #e5e7eb;
--line2: #d1d5db;
--line3: #9ca3af;
/* Text */
--fg: #111827;
--fg2: #374151;
--fg3: #6b7280;
--fg4: #9ca3af;
--text-primary: var(--fg);
--text-secondary: var(--fg2);
--text-muted: var(--fg3);
/* Accent */
--brand: #6d4eff;
--brand2: #5a3fe0;
--brand-soft: rgba(109, 78, 255, .10);
--brand-line: rgba(109, 78, 255, .25);
/* Status — 라이트에서 약간 진하게 (대비 확보) */
--green: #10a35a;
--green-soft: rgba(16, 163, 90, .10);
--amber: #d97706;
--amber-soft: rgba(217, 119, 6, .10);
--red: #dc2626;
--red-soft: rgba(220, 38, 38, .10);
--blue: #2563eb;
--blue-soft: rgba(37, 99, 235, .10);
/* Shadow — 라이트는 진한 검정 그림자 줄임 */
--sh-pop: 0 12px 32px -8px rgba(15,23,42,.12), 0 2px 4px rgba(15,23,42,.06);
--sh-card: 0 1px 2px rgba(15,23,42,.05);
/* color-scheme — 브라우저 기본 위젯(스크롤바·input 등) 라이트로 */
color-scheme: light;
}
/* dark 명시 시 — color-scheme 도 다크로 (브라우저 스크롤바 어둡게) */
html[data-theme="dark"] { color-scheme: dark; }
/* 토글 버튼 (우측 하단 floating) */
.theme-toggle {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 9998;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg3);
border: 1px solid var(--line2);
color: var(--fg2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--sh-card);
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.theme-toggle:hover { background: var(--bg4); color: var(--fg); transform: rotate(15deg); }
.theme-toggle svg { width: 18px; height: 18px; }
html[data-theme="light"] .theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: block; }
html:not([data-theme="light"]) .theme-toggle .ic-sun { display: block; }
html:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; }
/* ═══════════════════════════════════════════════════════════════
라이트 모드 (html[data-theme="light"]) — 모든 dropdown 패널 텍스트 강제 hex
- Tailwind `dark:text-gray-200` 가 .dark 컨텍스트(사이드바 등) 로 활성된 채 라이트 모드 본문에 보이는 문제 해결
- .fi-dropdown-panel 자체 + 자식 모든 텍스트 노드에 어두운 색 강제 (가독 보장)
- 다크 모드(html[data-theme="dark"] 또는 무 attribute) 는 영향 0 — 셀렉터에 data-theme="light" prefix
═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .fi-dropdown-panel {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
box-shadow: 0 12px 32px -8px rgba(15,23,42,.14), 0 2px 4px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .fi-dropdown-panel,
html[data-theme="light"] .fi-dropdown-panel *,
html[data-theme="light"] .fi-dropdown-list-item,
html[data-theme="light"] .fi-dropdown-list-item *,
html[data-theme="light"] .fi-dropdown-list-item-label {
color: #111827 !important; /* gray-900 — 진한 다크 (가독 OK) */
}
html[data-theme="light"] .fi-dropdown-header,
html[data-theme="light"] .fi-dropdown-header *,
html[data-theme="light"] .fi-dropdown-header-label {
color: #6b7280 !important; /* gray-500 — "전환" 같은 그룹 헤더 */
}
html[data-theme="light"] .fi-dropdown-list-item:hover,
html[data-theme="light"] .fi-dropdown-list-item:focus {
background: #f3f4f6 !important;
}
html[data-theme="light"] .fi-dropdown-list-item.fi-active,
html[data-theme="light"] .fi-dropdown-list-item[aria-current="true"] {
background: rgba(109,78,255,.10) !important;
}
html[data-theme="light"] .fi-dropdown-list-item.fi-active *,
html[data-theme="light"] .fi-dropdown-list-item[aria-current="true"] * {
color: #6d4eff !important; /* brand — 활성 항목 */
}
/* ──────────────────────────────────────────────────────────────────
파일 업로드 INPUT — native UI 너무 빈약. 전역 스타일.
- input[type=file] 자체를 그럴듯한 버튼처럼 보이게
- ::file-selector-button 으로 "파일 선택" 버튼 색깔/패딩 적용
- 호버/포커스/disabled 상태 통일
- .file-upload-fancy 클래스로 더 강조된 영역도 제공
────────────────────────────────────────────────────────────────── */
input[type="file"]:not([style*="display:none"]) {
font-size: var(--text-xs, 11.5px);
color: var(--fg2, #cbd5e1);
background: var(--bg2, #161922);
border: 1px solid var(--line2, #2a2f3d);
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
max-width: 280px;
transition: border-color .12s ease, background .12s ease;
}
input[type="file"]:not([style*="display:none"]):hover {
border-color: var(--brand-line, #4a3aaa);
background: var(--bg, #11141d);
}
input[type="file"]:not([style*="display:none"]):focus {
outline: none;
border-color: var(--brand2, #10b981);
box-shadow: 0 0 0 2px rgba(16,185,129,0.18);
}
input[type="file"]:not([style*="display:none"]):disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* file-selector-button (모든 modern 브라우저) — "파일 선택" 자체를 브랜드 버튼처럼 */
input[type="file"]::file-selector-button {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
margin-right: 10px;
font-size: var(--text-xs, 11.5px);
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--brand2, #10b981), var(--brand, #0ea871));
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 1px 3px rgba(16,185,129,0.35);
transition: filter .12s ease, transform .08s ease;
}
input[type="file"]::file-selector-button:hover {
filter: brightness(1.08);
}
input[type="file"]::file-selector-button:active {
transform: translateY(1px);
}
/* 구형 webkit 대응 */
input[type="file"]::-webkit-file-upload-button {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
margin-right: 10px;
font-size: var(--text-xs, 11.5px);
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--brand2, #10b981), var(--brand, #0ea871));
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 1px 3px rgba(16,185,129,0.35);
}
/* .file-upload-fancy — 라벨로 감싼 큰 드롭존 스타일 (선택 사용)
*/
.file-upload-fancy {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
font-size: var(--text-sm, 12.5px);
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--brand2, #10b981), var(--brand, #0ea871));
border-radius: 6px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(16,185,129,0.35);
transition: filter .12s ease;
}
.file-upload-fancy:hover { filter: brightness(1.08); }
.file-upload-fancy input[type="file"] { display: none; }
.file-upload-fancy::before {
content: '';
width: 14px; height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}