/* ============================================================
산지직셀 디자인 시스템
============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
:root {
/* Primary Green Scale (산지 그린) */
--green-50: #f0fdf4;
--green-100: #dcfce7;
--green-200: #bbf7d0;
--green-300: #86efac;
--green-400: #4ade80;
--green-500: #22c55e;
--green-600: #16a34a; /* PRIMARY */
--green-700: #15803d;
--green-800: #166534;
--green-900: #14532d;
/* Warm neutrals */
--beige-50: #faf8f3;
--beige-100: #f5f1e8;
--wood-500: #a3825a;
/* Slate */
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-300: #cbd5e1;
--slate-400: #94a3b8;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-800: #1e293b;
--slate-900: #0f172a;
/* Semantic */
--success: #16a34a;
--info: #3b82f6;
--warning: #f59e0b;
--danger: #ef4444;
/* Primary aliases */
--primary: var(--green-600);
--primary-hover: var(--green-700);
--primary-light: var(--green-100);
--primary-dark: var(--green-800);
--accent: var(--green-500);
/* Surfaces */
--bg: #ffffff;
--bg-soft: var(--slate-50);
--bg-tinted: var(--beige-50);
--surface: #ffffff;
--border: var(--slate-200);
--border-strong: var(--slate-300);
--divider: var(--slate-100);
/* Text */
--text: var(--slate-900);
--text-secondary: var(--slate-600);
--text-muted: var(--slate-400);
/* Market brand colors */
--m-coupang: #ff5e5e;
--m-naver: #03c75a;
--m-auction: #ffba00;
--m-gmarket: #007aff;
--m-kakao: #fee500;
--m-kakao-text: #000000;
--m-toss: #0064ff;
--m-11st: #ff0038;
/* Radii */
--r-sm: 6px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-pill: 999px;
/* Shadows */
--sh-xs: 0 1px 2px rgba(15,23,42,.04);
--sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
--sh-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
--sh-lg: 0 10px 32px rgba(15,23,42,.08), 0 4px 8px rgba(15,23,42,.04);
--sh-xl: 0 24px 56px rgba(15,23,42,.12);
--sh-green: 0 4px 14px rgba(22,163,74,.22);
/* Spacing density */
--row-h: 44px;
--header-h: 56px;
--sidebar-w: 232px;
/* Type */
--font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
/* ============================================================
직셀 브랜드 테마 (블루) — 화이트라벨.
기존 컴포넌트가 var(--green-*) / var(--primary) 를 광범위하게 쓰므로,
green 스케일을 blue 로 리맵하면 전 화면이 한 번에 블루로 전환된다.
( 는 data.jsx 의 brand 판별이 설정 )
--success(녹색=성공 의미)는 일부러 유지 — 브랜드색과 무관한 시맨틱.
============================================================ */
html[data-brand="jiksel"] {
--green-50: #eff6ff;
--green-100: #dbeafe;
--green-200: #bfdbfe;
--green-300: #93c5fd;
--green-400: #60a5fa;
--green-500: #3b82f6;
--green-600: #2563eb; /* PRIMARY */
--green-700: #1d4ed8;
--green-800: #1e40af;
--green-900: #1e3a8a;
--accent: var(--green-500);
--sh-green: 0 4px 14px rgba(37, 99, 235, .22);
}
/* 직셀 사이드바 — 옅은 블루 틴트 (텍스트는 기존 대비 유지, active 는 토큰으로 자동 블루) */
html[data-brand="jiksel"] .sidebar {
background: #f5f8ff;
border-right: 1px solid var(--green-100);
}
html[data-brand="jiksel"] .sidebar .nav-item:hover {
background: var(--green-100);
}
/* 직셀 헤더 — 녹색 잔향 그림자 제거(블루 톤) */
html[data-brand="jiksel"] .top-header {
box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 4px 14px rgba(37,99,235,.15);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
color: var(--text);
background: var(--bg-soft);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Typography scale */
.h1 { font-size: 32px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.h2 { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.h3 { font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.h4 { font-size: 16px; line-height: 1.4; font-weight: 600; }
.body { font-size: 14px; line-height: 1.55; }
.caption { font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.tabular { font-variant-numeric: tabular-nums; }
/* ============================================================
App shell
============================================================ */
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.top-header {
height: var(--header-h);
background: linear-gradient(180deg, var(--green-700) 0%, var(--green-600) 100%);
border-bottom: 1px solid var(--green-800);
display: flex;
align-items: center;
padding: 0 20px;
gap: 16px;
position: sticky; top: 0; z-index: 100;
color: white;
box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 4px 14px rgba(22,163,74,.15);
}
.top-header .brand {
display: flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
color: white;
min-width: var(--sidebar-w);
}
.top-header .brand .logo { width: 28px; height: 28px; }
.top-header .search {
flex: 1; max-width: 520px;
position: relative;
display: flex;
align-items: center;
height: 36px;
}
.top-header .search input {
width: 100%; height: 36px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.14);
color: white;
border-radius: var(--r-md);
padding: 0 12px 0 36px;
font-family: inherit; font-size: 13px;
outline: none;
transition: border-color .15s, background .15s;
}
.top-header .search input::placeholder { color: rgba(255,255,255,.65); }
.top-header .search input:focus {
border-color: rgba(255,255,255,.5);
background: rgba(255,255,255,.22);
box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.top-header .search .icon {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
color: rgba(255,255,255,.7);
pointer-events: none;
width: 16px; height: 16px;
display: block;
}
.top-header .btn-ghost {
color: rgba(255,255,255,.85);
}
.top-header .btn-ghost:hover {
background: rgba(255,255,255,.12);
color: white;
}
.top-header .right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.role-switcher {
display: flex; gap: 4px; padding: 3px;
background: rgba(0,0,0,.18);
border-radius: var(--r-md);
border: 1px solid rgba(255,255,255,.12);
}
.role-switcher button {
appearance: none; border: 0; background: transparent;
padding: 5px 10px; border-radius: 5px;
font: 600 12px/1 var(--font); color: rgba(255,255,255,.7);
cursor: pointer;
}
.role-switcher button.active {
background: white; color: var(--green-800);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.role-switcher button:hover:not(.active) { color: white; background: rgba(255,255,255,.08); }
.deposit-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: var(--r-md);
background: rgba(255,255,255,.16);
color: white;
font-size: 12px; font-weight: 600;
border: 1px solid rgba(255,255,255,.22);
}
.top-header .icon-btn {
color: rgba(255,255,255,.85);
}
.top-header .icon-btn:hover { background: rgba(255,255,255,.12); color: white; }
.top-header .badge-count {
border: 1.5px solid var(--green-700);
}
.top-header .header-divider { width: 1px; height: 20px; background: rgba(255,255,255,.22); }
.top-header .header-user-name { color: white; font-weight: 600; }
.top-header .header-user-email { color: rgba(255,255,255,.65); }
.icon-btn {
appearance: none; border: 0; background: transparent;
width: 36px; height: 36px; border-radius: var(--r-md);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--text-secondary);
position: relative;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--text); }
.icon-btn .badge-count {
position: absolute; top: 4px; right: 4px;
background: var(--danger); color: white;
font-size: 9px; font-weight: 700; line-height: 1;
padding: 2px 4px; border-radius: var(--r-pill);
min-width: 14px; text-align: center;
}
.avatar {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, var(--green-400), var(--green-600));
color: white; font-weight: 700; font-size: 12px;
display: inline-flex; align-items: center; justify-content: center;
}
/* Body layout */
.app-body { display: flex; flex: 1; min-height: 0; }
.sidebar {
width: var(--sidebar-w);
background: var(--surface);
border-right: 1px solid var(--border);
flex-shrink: 0;
padding: 16px 12px;
display: flex; flex-direction: column; gap: 2px;
overflow-y: auto;
position: sticky; top: var(--header-h);
height: calc(100vh - var(--header-h));
}
.sidebar .group-label {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
padding: 12px 12px 4px;
}
.sidebar .nav-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: var(--r-md);
color: var(--text-secondary);
cursor: pointer; user-select: none;
font-size: 13px; font-weight: 500;
position: relative;
}
.sidebar .nav-item:hover { background: var(--bg-soft); color: var(--text); }
.sidebar .nav-item.active {
background: var(--green-50);
color: var(--green-800);
font-weight: 600;
}
.sidebar .nav-item.active::before {
content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
width: 3px; background: var(--green-600); border-radius: 2px;
}
.sidebar .nav-item .count {
margin-left: auto; font-size: 11px;
background: var(--slate-100); color: var(--text-secondary);
padding: 1px 6px; border-radius: var(--r-pill);
font-weight: 600;
}
.sidebar .nav-item.active .count { background: var(--green-100); color: var(--green-800); }
.sidebar .supplier-pill {
padding: 10px 12px;
background: var(--beige-100); border-radius: var(--r-md);
margin-bottom: 12px;
}
.sidebar .supplier-pill .label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.sidebar .supplier-pill .name { font-size: 14px; font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.sidebar .footer {
margin-top: auto; padding: 12px;
border-top: 1px solid var(--border);
font-size: 11.5px; color: var(--text-muted);
}
.sidebar .footer .csbox { display: flex; gap: 6px; margin-top: 8px; }
.main {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
padding: 24px 28px 60px;
gap: 20px;
}
.page-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.page-header .titles { display: flex; flex-direction: column; gap: 4px; }
.page-header .crumbs { font-size: 12px; color: var(--text-muted); }
.page-header .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* ============================================================
Buttons
============================================================ */
.btn {
appearance: none; border: 1px solid transparent;
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 14px;
border-radius: var(--r-md);
font: 600 13px/1 var(--font);
cursor: pointer;
white-space: nowrap;
transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn .icon { width: 14px; height: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--green-600); color: white; box-shadow: var(--sh-green); }
.btn-primary:hover:not(:disabled) { background: var(--green-700); }
.btn-secondary { background: var(--green-50); color: var(--green-800); border-color: var(--green-200); }
.btn-secondary:hover:not(:disabled) { background: var(--green-100); border-color: var(--green-300); }
.btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--slate-400); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: #fecaca; }
.btn-danger:hover:not(:disabled) { background: #fef2f2; border-color: #fca5a5; }
.btn-danger-solid { background: var(--danger); color: white; }
.btn-danger-solid:hover:not(:disabled) { background: #dc2626; }
.btn-warning { background: var(--surface); color: var(--warning); border-color: #fed7aa; }
.btn-warning:hover:not(:disabled) { background: #fff7ed; border-color: #fdba74; }
.btn-info { background: var(--surface); color: var(--info); border-color: #bfdbfe; }
.btn-info:hover:not(:disabled) { background: #eff6ff; border-color: #93c5fd; }
.btn-purple { background: var(--surface); color: #7c3aed; border-color: #ddd6fe; }
.btn-purple:hover:not(:disabled) { background: #f5f3ff; border-color: #c4b5fd; }
.btn-teal { background: var(--surface); color: #0d9488; border-color: #99f6e4; }
.btn-teal:hover:not(:disabled) { background: #f0fdfa; }
.btn-dark { background: var(--slate-800); color: white; }
.btn-dark:hover:not(:disabled) { background: var(--slate-900); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-xs { height: 24px; padding: 0 8px; font-size: 11px; border-radius: var(--r-sm); }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }
/* ============================================================
Form fields
============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.field-label .req { color: var(--danger); margin-left: 2px; }
.input, .select, .textarea {
appearance: none;
height: 36px; padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
font: 13px/1 var(--font);
color: var(--text);
outline: none;
transition: border-color .12s, box-shadow .12s, background .12s;
width: 100%;
}
.textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; min-height: 80px; }
.input:focus, .select:focus, .textarea:focus {
border-color: var(--green-500);
box-shadow: 0 0 0 3px var(--green-100);
}
.input[disabled] { background: var(--bg-soft); color: var(--text-muted); }
/* placeholder(예시 안내문)는 실제 입력값과 확실히 구분되도록 옅게 */
.input::placeholder, .textarea::placeholder { color: #c2cad6; opacity: 1; }
.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder { color: #c2cad6; }
.select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
padding-right: 30px;
}
.checkbox, .radio {
appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all .1s;
}
.radio { border-radius: 50%; }
.checkbox:checked, .radio:checked { background: var(--green-600); border-color: var(--green-600); }
.checkbox:checked::after {
content: ''; width: 10px; height: 10px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.radio:checked::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: white; }
.switch {
appearance: none; cursor: pointer;
width: 32px; height: 18px;
background: var(--slate-300);
border-radius: var(--r-pill);
position: relative;
transition: background .15s;
flex-shrink: 0;
}
.switch::after {
content: '';
position: absolute; top: 2px; left: 2px;
width: 14px; height: 14px;
background: white; border-radius: 50%;
transition: transform .15s;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch:checked { background: var(--green-600); }
.switch:checked::after { transform: translateX(14px); }
/* ============================================================
Cards
============================================================ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-xs);
}
.card-pad { padding: 20px; }
.card-pad-sm { padding: 14px; }
/* 즉시 표시 커스텀 툴팁 — native title 의 1~2초 지연 없이 호버 즉시 노출 */
.sj-tip { position: relative; }
.sj-tip .sj-tip-box {
position: absolute;
bottom: 100%;
right: 0;
margin-bottom: 6px;
display: none;
width: max-content;
max-width: 250px;
white-space: normal;
padding: 7px 10px;
background: #1f2937;
color: #fff;
font-size: 11px;
font-weight: 400;
line-height: 1.45;
text-align: left;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
z-index: 1000;
pointer-events: none;
}
.sj-tip:hover .sj-tip-box { display: block; }
.kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px 20px;
display: flex; flex-direction: column; gap: 4px;
position: relative;
overflow: hidden;
}
.kpi-card .label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi-card .value { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi-card .delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.kpi-card .delta.up { color: var(--green-700); }
.kpi-card .delta.down { color: var(--danger); }
.kpi-card .accent {
position: absolute; right: -8px; top: -8px;
width: 56px; height: 56px; border-radius: 50%;
opacity: .12;
}
/* ============================================================
Badges
============================================================ */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: var(--r-pill);
font-size: 11px; font-weight: 600;
white-space: nowrap;
line-height: 1.6;
}
.badge-square { border-radius: var(--r-sm); }
.badge-lg { padding: 4px 10px; font-size: 12px; }
/* 공지 본문(관리자 상세보기 + 셀러 팝업 공용) — Quill HTML 렌더 */
.notice-body { line-height: 1.65; word-break: break-word; }
.notice-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 8px 0; }
.notice-body p { margin: 0 0 8px; }
.notice-body h1, .notice-body h2, .notice-body h3 { margin: 12px 0 6px; }
.notice-body a { color: var(--accent); text-decoration: underline; }
.notice-body ul, .notice-body ol { padding-left: 20px; margin: 0 0 8px; }
/* 공지 읽음 동그라미 체크 — 안읽음=활성(accent 테두리 hollow), 읽음=체크완료+비활성(muted) */
.notice-check {
width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; line-height: 1; flex-shrink: 0; border: 2px solid;
}
.notice-check.unread { border-color: var(--accent); background: transparent; color: transparent; }
.notice-check.read { border-color: var(--slate-300); background: var(--slate-300); color: #fff; opacity: .7; }
.badge-green { background: var(--green-100); color: var(--green-800); }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: var(--slate-100); color: var(--slate-700); }
.badge-orange { background: #fed7aa; color: #9a3412; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-pink { background: #fce7f3; color: #9d174d; }
.badge-teal { background: #ccfbf1; color: #115e59; }
.badge-beige { background: var(--beige-100); color: var(--wood-500); }
/* Status corner badges on cards */
.corner-badge {
display: inline-flex; align-items: center;
padding: 3px 7px; border-radius: var(--r-sm);
font-size: 10.5px; font-weight: 700;
letter-spacing: -0.01em;
}
/* Market badges */
.market-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px; border-radius: var(--r-sm);
font-size: 10.5px; font-weight: 700;
color: white;
letter-spacing: -0.01em;
}
.market-coupang { background: var(--m-coupang); }
.market-naver { background: var(--m-naver); }
.market-auction { background: var(--m-auction); color: #5b3a00; }
.market-gmarket { background: var(--m-gmarket); }
.market-kakao { background: var(--m-kakao); color: var(--m-kakao-text); }
.market-toss { background: var(--m-toss); }
.market-11st { background: var(--m-11st); }
/* Market chip (status indicator) */
.market-chip {
width: 22px; height: 22px;
border-radius: 5px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; color: white;
position: relative;
cursor: default;
letter-spacing: -0.02em;
}
.market-chip[data-state="none"] { opacity: .3; background: var(--slate-300) !important; color: var(--slate-600) !important; }
.market-chip[data-state="waiting"] { box-shadow: 0 0 0 2px #fef3c7; }
.market-chip[data-state="done"] { box-shadow: 0 0 0 2px var(--green-100); }
.market-chip[data-state="error"] { box-shadow: 0 0 0 2px #fee2e2; }
.market-chip[data-state="error"]::after {
content: ''; position: absolute; right: -2px; top: -2px;
width: 8px; height: 8px; background: var(--danger); border-radius: 50%;
border: 1.5px solid white;
}
/* ============================================================
Tabs
============================================================ */
.tabs {
display: flex; gap: 2px;
border-bottom: 1px solid var(--border);
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 14px;
font: 500 13px/1 var(--font);
color: var(--text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
user-select: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--green-700); border-bottom-color: var(--green-600); font-weight: 600; }
.tab .tab-count {
background: var(--slate-100); color: var(--text-secondary);
padding: 1px 6px; border-radius: var(--r-pill);
font-size: 10.5px; font-weight: 700;
}
.tab.active .tab-count { background: var(--green-100); color: var(--green-800); }
.pill-tabs {
display: inline-flex; gap: 4px; padding: 3px;
background: var(--bg-soft); border-radius: var(--r-md);
border: 1px solid var(--border);
}
.pill-tabs button {
appearance: none; border: 0; background: transparent;
padding: 6px 12px; border-radius: 5px;
font: 500 12px/1 var(--font); color: var(--text-secondary);
cursor: pointer;
}
.pill-tabs button.active {
background: var(--surface); color: var(--text);
box-shadow: var(--sh-xs); font-weight: 600;
}
/* ============================================================
Data Grid
============================================================ */
/* ── 상품관리: 그리드 영역만 내부 스크롤 (상단 툴바 고정, 컬럼헤더 sticky) ── */
/* SellerMarketUpload 마운트 시 .app/column-div/.main 에 클래스 부여(JS) → 뷰포트 고정높이 잠금 */
.app-grid-scroll { height: 100vh; overflow: hidden; }
.app-main-col { min-height: 0; }
/* 상품관리에선 푸터 숨겨 그리드가 뷰포트 바닥까지 차게(하단 스크롤바=푸터 끝까지) */
.app-grid-scroll .site-footer { display: none; }
.main-grid-scroll { min-height: 0; overflow: hidden; padding-bottom: 12px; }
.prod-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.prod-grid-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.prod-grid-fill .dg-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.prod-grid-fill .dg-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* 페이지네이션을 스크롤 영역 안에 두면 본문과 같이 스크롤(맨 아래서만 보임). 가로 스크롤 시엔 좌측 고정. */
.prod-grid-fill .dg-scroll > .dg-pagination {
position: sticky; left: 0;
width: 100%; box-sizing: border-box;
background: var(--surface);
}
.dg-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.dg-toolbar {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--divider);
flex-wrap: wrap;
}
.dg-toolbar .left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }
.dg-toolbar .right { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.dg-status { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.dg-status strong { color: var(--text); font-weight: 700; }
.dg-scroll {
overflow-x: auto;
width: 100%;
/* 키보드 스크롤 팔로우(scrollIntoView) 시 선택 행이 sticky 헤더 뒤로 숨지 않도록 위쪽 여유. */
scroll-padding-top: 48px;
scroll-padding-bottom: 8px;
}
/* ★주문/CS 그리드만 가로 스크롤바 항상 표시(사장님 지시) — 전역 .dg-scroll 은 auto 유지.
세로 스크롤은 .prod-grid-fill 이 그리드 영역 내부로 한정(상품관리와 동일). 헤더는 그 안에서 top:0 sticky. */
.sjk-orders-grid .dg-scroll { overflow-x: scroll; }
.dg-scroll::-webkit-scrollbar { height: 10px; }
.dg-scroll::-webkit-scrollbar-track { background: var(--bg-soft); }
.dg-scroll::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 5px; }
table.dg {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 12.5px;
}
/* ★고정 레이아웃(fixedLayout 그리드 — 상품관리·주문/CS): 컬럼이 지정 폭을 정확히 지키고 내용이 넘치면
말줄임(…). 헤더·셀 모두 항상 한 줄(줄바꿈 0)이라 헤더가 글자단위로 접히지 않고, 폭을 내용 밑으로도
자유롭게 좁힐 수 있다(사장님 지시). 리사이즈 핸들은 th 우측끝 absolute 라 overflow:hidden 에도 안 잘림. */
table.dg.dg-fixed { table-layout: fixed; }
table.dg.dg-fixed thead th,
table.dg.dg-fixed tbody td { overflow: hidden; text-overflow: ellipsis; }
table.dg thead th {
background: var(--bg-soft);
font-weight: 600;
color: var(--text-secondary);
text-align: center;
padding: 10px 10px;
border-bottom: 1px solid var(--border);
font-size: 11.5px;
letter-spacing: -0.005em;
white-space: nowrap;
position: sticky; top: 0; z-index: 3; /* 스크롤 시 본문 행 위로 — 없으면 행이 헤더를 덮어 가려짐 */
cursor: pointer;
user-select: none;
vertical-align: middle;
}
table.dg thead th:hover { background: var(--slate-100); color: var(--text); }
table.dg thead th.sort-active { color: var(--green-700); background: var(--green-50); }
table.dg thead th .sort-arrow {
display: inline-block; margin-left: 3px;
font-size: 9px;
opacity: .9;
}
table.dg thead th.sticky-l { position: sticky; left: 0; z-index: 4; } /* 좌상단 코너 — 세로/가로 sticky 모두 위 */
table.dg thead th.sticky-l-2 { position: sticky; left: 36px; z-index: 4; }
table.dg tbody td {
padding: 10px 10px;
border-bottom: 1px solid var(--divider);
vertical-align: middle;
background: var(--surface);
white-space: nowrap;
}
table.dg tbody tr:hover td { background: var(--bg-soft); }
/* 선택 행 — 매우 옅은 배경 + 좌측 강조선만 (PPT/Notion 스타일).
여러 행 선택 시 화면 전체가 초록색으로 압도되는 어색함 해소. */
table.dg tbody tr.selected td { background: rgba(34, 197, 94, 0.05); }
table.dg tbody tr.selected td:first-child {
box-shadow: inset 3px 0 0 var(--green-600);
}
/* 검수완료 행 — 연녹색 하이라이트. selected(0.05)보다 진하게, hover 보다 우선해 항상 눈에 띈다.
selected 좌측 강조선(box-shadow)은 별도 속성이라 검수완료 + 체크 동시에도 공존한다. */
table.dg tbody tr.reviewed-row td { background: rgba(34, 197, 94, 0.14); }
table.dg tbody tr.reviewed-row:hover td { background: rgba(34, 197, 94, 0.22); }
/* 잠금 행 — 주황 배경 + 좌측 굵은 바. 마켓/직셀 어디서도 수정·삭제 차단 상태를 한눈에. 검수완료보다 우선. */
table.dg tbody tr.locked-row td { background: rgba(245, 158, 11, 0.13); }
table.dg tbody tr.locked-row:hover td { background: rgba(245, 158, 11, 0.20); }
table.dg tbody tr.locked-row td:first-child { box-shadow: inset 3px 0 0 #b45309; }
table.dg tbody td.sticky-l { position: sticky; left: 0; z-index: 1; }
table.dg tbody td.sticky-l-2 { position: sticky; left: 36px; z-index: 1; }
table.dg tbody td .thumb {
width: 36px; height: 36px;
border-radius: var(--r-sm);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
color: white;
}
/* 키보드(↑/↓)로 스크롤 팔로우 시 선택 행이 sticky 헤더 뒤로 숨지 않도록 위쪽 여유. */
.prod-grid-fill .dg-scroll tbody tr { scroll-margin-top: 44px; }
/* 검수 모드 — 브라우저는 off-screen 행 페인트를 자동 스킵하지만, 이미지가 대량이면 부드럽게
contain 으로 렌더를 행 단위로 격리(레이아웃/페인트 전파 차단). content-visibility 는 가변 행 높이에서
스크롤 위치를 어긋나게 해 행이 잘리므로 쓰지 않는다. */
.prod-grid-fill.review-on .dg-scroll tbody tr { contain: layout paint style; }
.dg-empty {
padding: 60px 20px;
text-align: center;
color: var(--text-muted);
}
.dg-pagination {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px;
border-top: 1px solid var(--divider);
}
.dg-pagination .info { font-size: 12px; color: var(--text-secondary); margin-right: auto; }
/* 모든 숫자 입력칸 — 올리기/내리기 스피너 화살표 제거 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.dg-pagination .pages { display: flex; gap: 2px; }
.dg-pagination .pages button {
appearance: none; border: 1px solid var(--border);
background: var(--surface);
min-width: 28px; height: 28px; padding: 0 8px;
border-radius: var(--r-sm);
font: 600 12px/1 var(--font);
color: var(--text-secondary);
cursor: pointer;
}
.dg-pagination .pages button:hover { background: var(--bg-soft); color: var(--text); }
.dg-pagination .pages button.active { background: var(--green-600); border-color: var(--green-600); color: white; }
/* ============================================================
Modals + slide panels
============================================================ */
.scrim {
position: fixed; inset: 0;
background: rgba(15,23,42,.4);
z-index: 1000;
display: flex; align-items: center; justify-content: center;
animation: scrim-in .15s ease-out;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--surface);
border-radius: var(--r-xl);
box-shadow: var(--sh-xl);
width: min(560px, calc(100vw - 32px));
max-height: calc(100vh - 64px);
display: flex; flex-direction: column;
animation: modal-in .2s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
}
.modal-header .title { font-size: 16px; font-weight: 700; flex: 1; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
padding: 14px 20px;
border-top: 1px solid var(--border);
display: flex; gap: 8px; justify-content: flex-end;
}
.slide-panel {
position: fixed; right: 0; top: 0;
height: 100vh;
width: min(540px, 100vw);
background: var(--surface);
box-shadow: var(--sh-xl);
z-index: 1001;
display: flex; flex-direction: column;
animation: slide-in .25s cubic-bezier(.16,1,.3,1);
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
.slide-panel .ph {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px;
}
.slide-panel .pb { flex: 1; overflow-y: auto; padding: 20px; }
.slide-panel .pf {
padding: 12px 20px;
border-top: 1px solid var(--border);
display: flex; gap: 8px;
background: var(--bg-soft);
}
/* ============================================================
Filter bar / search bar
============================================================ */
.filter-bar {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 12px 14px;
display: flex; flex-direction: column; gap: 10px;
}
.filter-row {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.filter-row .input, .filter-row .select { width: auto; min-width: 140px; }
.filter-row .input.long { min-width: 240px; flex: 1; }
.quick-chip {
appearance: none; border: 1px solid var(--border);
background: var(--surface);
padding: 6px 12px;
border-radius: var(--r-pill);
font: 500 12px/1 var(--font); color: var(--text-secondary);
cursor: pointer;
}
.quick-chip:hover { background: var(--bg-soft); color: var(--text); }
.quick-chip.active { background: var(--green-600); border-color: var(--green-600); color: white; }
/* ============================================================
Product card (catalog)
============================================================ */
.product-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .15s, box-shadow .15s, border-color .15s;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-2px);
box-shadow: var(--sh-md);
border-color: var(--green-200);
}
.product-card .thumb {
width: 100%; aspect-ratio: 1;
position: relative;
overflow: hidden;
}
.product-card .thumb .corner-tl { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; max-width: 80%; }
.product-card .thumb .corner-bl { position: absolute; bottom: 8px; left: 8px; }
.product-card .body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card .name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); }
.product-card .meta { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.product-card .price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.product-card .price { font-size: 16px; font-weight: 700; color: var(--text); }
.product-card .price .unit { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.product-card .stock { font-size: 11px; color: var(--text-secondary); }
.product-card .cta-row { display: flex; gap: 6px; margin-top: 10px; }
/* Photo placeholder gradients - based on category */
.ph-fruit { background: linear-gradient(135deg, #fecaca 0%, #fb923c 50%, #fbbf24 100%); }
.ph-veg { background: linear-gradient(135deg, #bbf7d0 0%, #4ade80 50%, #22c55e 100%); }
.ph-fish { background: linear-gradient(135deg, #bfdbfe 0%, #60a5fa 50%, #1e40af 100%); }
.ph-meat { background: linear-gradient(135deg, #fecaca 0%, #f87171 50%, #b91c1c 100%); }
.ph-grain { background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 50%, #a3825a 100%); }
.ph-proc { background: linear-gradient(135deg, #e7e5e4 0%, #a8a29e 50%, #57534e 100%); }
.ph-dairy { background: linear-gradient(135deg, #fef9c3 0%, #fde68a 50%, #f5f1e8 100%); }
.ph-label {
position: absolute; bottom: 8px; right: 10px;
color: rgba(255,255,255,.9);
font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* ============================================================
Charts (simple SVG)
============================================================ */
.chart-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px 20px;
}
.chart-title {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.chart-title .t { font-size: 14px; font-weight: 700; }
/* ============================================================
Catalog header / categories
============================================================ */
.cat-tabs {
display: flex; gap: 4px; padding: 6px 0;
border-bottom: 1px solid var(--border);
overflow-x: auto;
scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs .cat-tab {
appearance: none; border: 0; background: transparent;
padding: 8px 16px;
font: 500 13.5px/1 var(--font);
color: var(--text-secondary);
cursor: pointer; white-space: nowrap;
border-radius: var(--r-pill);
}
.cat-tabs .cat-tab.active { background: var(--green-600); color: white; font-weight: 600; }
.cat-tabs .cat-tab:hover:not(.active) { background: var(--bg-soft); color: var(--text); }
/* Toast */
.toast-stack {
position: fixed; right: 20px; top: 76px;
z-index: 5000;
display: flex; flex-direction: column; gap: 8px;
}
.toast {
background: var(--slate-900);
color: white;
padding: 12px 16px;
border-radius: var(--r-md);
font-size: 13px; font-weight: 500;
box-shadow: var(--sh-lg);
display: flex; align-items: center; gap: 10px;
min-width: 260px;
animation: toast-in .2s ease-out;
}
.toast.success { border-left: 3px solid var(--green-500); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
/* Misc helpers */
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-12 { gap: 12px; }
.gap-6 { gap: 6px; }
.gap-4 { gap: 4px; }
.flex-1 { flex: 1; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--green-700); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.fw-7 { font-weight: 700; }
.fw-6 { font-weight: 600; }
.fw-5 { font-weight: 500; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-20 { font-size: 20px; }
.tnums { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.right { text-align: right; }
.divider-h { height: 1px; background: var(--divider); margin: 16px 0; }
/* Grid columns helper */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
/* Auth page */
.auth-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
background: var(--bg-soft);
}
.auth-visual {
background: linear-gradient(180deg, var(--green-700) 0%, var(--green-800) 60%, var(--green-900) 100%);
position: relative; overflow: hidden;
color: white;
display: flex; flex-direction: column;
padding: 48px;
justify-content: space-between;
}
.auth-visual::before, .auth-visual::after {
content: ''; position: absolute;
border-radius: 50%; opacity: .15;
}
.auth-visual::before { background: var(--green-300); width: 480px; height: 480px; top: -160px; right: -200px; }
.auth-visual::after { background: var(--green-400); width: 280px; height: 280px; bottom: -80px; left: -100px; }
.auth-form-wrap {
display: flex; align-items: center; justify-content: center;
padding: 32px;
}
.auth-card {
width: 100%; max-width: 420px;
background: var(--surface);
border-radius: var(--r-xl);
padding: 36px 36px;
box-shadow: var(--sh-md);
border: 1px solid var(--border);
}
/* Logo svg styling */
.logo-leaf {
display: inline-block;
width: 28px; height: 28px;
}
/* Hide scrollbars in horizontal scroll regions */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { scrollbar-width: none; }
/* Print-style numeric stat */
.stat-line {
display: flex; align-items: baseline; gap: 4px;
font-variant-numeric: tabular-nums;
}
.stat-line .big { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.stat-line .unit { color: var(--text-muted); font-size: 12px; }
/* Section header */
.section-h {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.section-h .t { font-size: 16px; font-weight: 700; }
.section-h .a { font-size: 12px; color: var(--text-secondary); }
/* Pretty scroll for catalog left panel */
.flt {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 14px;
display: flex; flex-direction: column; gap: 14px;
}
.flt-group { display: flex; flex-direction: column; gap: 6px; }
.flt-group .h { font-size: 12px; font-weight: 700; color: var(--text); }
.flt-group .opt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); padding: 2px 0; }
.flt-group .opt .count { margin-left: auto; font-size: 11px; color: var(--text-muted); }
/* Quill 에디터 HTML 렌더 — 카탈로그 상세·미리보기·셀러 상하단 모두 공통.
네이버 스마트스토어(860) / 쿠팡(780) 표준 폭 기준 반응형. */
.ql-editor img {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 8px auto;
}
.ql-editor video,
.ql-editor iframe {
max-width: 100%;
}
/* 이미지 사이 빈 줄을 클릭/커서 두기 쉽게 — 빈 문단을 더 크게 + 호버 시 클릭 가능 표시(줄 삭제 편의) */
.sj-quill-sticky .ql-editor p { min-height: 1.6em; }
.sj-quill-sticky .ql-editor p:hover { background: rgba(22,163,74,.06); border-radius: 4px; }
/* Quill 툴바 스티키 — 페이지 헤더(top:0, ~70px) 바로 아래에 고정.
상세페이지 작성 중 스크롤해도 툴바가 항상 보이도록. */
.sj-quill-sticky {
position: relative;
/* overflow 제거 — sticky 자식이 wrapper 밖으로 stick 가능하도록 */
}
.sj-quill-sticky .ql-toolbar.ql-snow {
position: sticky;
top: 70px; /* page-header 높이 */
z-index: 5; /* 본문 위, page-header(10) 아래 */
background: white;
border-radius: 8px 8px 0 0;
}
/* AI 스튜디오(전체화면) 안의 에디터 — 페이지 헤더가 없으므로 툴바를 영역 최상단에 고정 */
.sjk-studio-editor .sj-quill-sticky .ql-toolbar.ql-snow { top: 0; }
/* 공지 관리자 에디터 — 툴바를 편집창 '밖' 상단에 고정(static)하고 본문(.ql-container)만 스크롤.
sticky(top:70px) 페이지-스크롤 방식이 아니라 고정높이 flex 방식으로 전환(툴바/본문 겹침 방지). */
.sjk-notice-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sjk-notice-editor .sj-quill-sticky { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.sjk-notice-editor .sj-quill-sticky .ql-toolbar.ql-snow { position: static; top: auto; flex-shrink: 0; border-radius: 0; }
.sjk-notice-editor .sj-quill-sticky .ql-container.ql-snow { flex: 1; min-height: 0; overflow-y: auto; }
/* 본문 폭을 셀러 모달(.notice-body 712px)과 동일하게 — 좌우 패딩으로 맞춰 이미지가 잘려보이지 않게 */
.sjk-notice-editor .sj-quill-sticky .ql-editor { min-height: 100%; padding-left: 24px; padding-right: 24px; }
/* 에디터 본문이 컨테이너 높이 꽉 채우도록 — wrapper 빈 영역 클릭도 자연스럽게 본문에 떨어지도록 */
.sj-quill-sticky .ql-container.ql-snow { min-height: 360px; }
.sj-quill-sticky .ql-editor { min-height: 360px; cursor: text; }
/* 툴바 버튼 크게 — Quill 기본 포맷 버튼(.ql-formats)에만 적용(커스텀 누끼/자르기 버튼엔 미적용) */
.sj-quill-sticky .ql-toolbar.ql-snow { padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; }
.sj-quill-sticky .ql-toolbar.ql-snow .ql-formats button { width: 34px; height: 32px; padding: 5px; }
.sj-quill-sticky .ql-toolbar.ql-snow .ql-formats button svg { width: 22px; height: 22px; }
.sj-quill-sticky .ql-toolbar.ql-snow .ql-picker { height: 32px; font-size: 14px; }
.sj-quill-sticky .ql-toolbar.ql-snow .ql-picker-label { display: inline-flex; align-items: center; }
.sj-quill-sticky .ql-toolbar.ql-snow .ql-formats { margin-right: 14px; }
/* 이미지 선택 시 툴바에 나타나는 누끼/자르기 버튼 — 옆 버튼과 높이 맞추고 라벨로 명확 */
.sjk-img-tools { display: inline-flex; align-items: center; gap: 6px; }
.sjk-img-tools .sjk-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.sjk-img-tools button {
width: auto !important; height: 32px !important; display: inline-flex; align-items: center; gap: 5px;
padding: 0 12px !important; border-radius: 7px; font-size: 13px; font-weight: 700;
border: 1px solid var(--border-strong); cursor: pointer; line-height: 1; white-space: nowrap; flex: 0 0 auto;
}
.sjk-img-tools button:disabled { opacity: .5; cursor: not-allowed; }
.sjk-img-tools .sjk-nukki { background: var(--green-50); color: var(--green-800); border-color: var(--green-300); }
.sjk-img-tools .sjk-nukki:hover:not(:disabled) { background: var(--green-100); }
.sjk-img-tools .sjk-crop { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.sjk-img-tools .sjk-crop:hover:not(:disabled) { background: var(--green-700); }
.sjk-img-tools .sjk-cancel { background: #fff; color: #475569; }
.sjk-img-tools .sjk-cancel:hover:not(:disabled) { background: var(--bg-soft); }
.sjk-img-tools .sjk-busy { font-size: 12px; color: var(--green-700); font-weight: 600; }
/* AI 스튜디오 — 생성 중 애니메이션(움직이는 로딩) */
@keyframes sjkSpin { to { transform: rotate(360deg); } }
.sjk-ai-spin { width: 16px; height: 16px; border: 2px solid var(--green-200); border-top-color: var(--green-600); border-radius: 50%; display: inline-block; animation: sjkSpin .8s linear infinite; vertical-align: middle; }
@keyframes sjkPulse { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sjk-ai-dots span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); margin: 0 2px; animation: sjkPulse 1.2s infinite; }
.sjk-ai-dots span:nth-child(2) { animation-delay: .2s; }
.sjk-ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes sjkShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.sjk-ai-skel { background: linear-gradient(90deg, #eef2f6 25%, #e2e8f0 37%, #eef2f6 63%); background-size: 800px 100%; animation: sjkShimmer 1.4s infinite; border-radius: 10px; }
/* 이미지 자르기 — 본문 이미지 자리 그대로 위에서 진행(별도 모달/오버레이 아님).
★ 화면 전체를 어둡게 하지 않음 — 어둡게(진하게)는 Cropper 가 "이미지 안 / 자르기 영역 밖"에만 적용 */
.sjk-inline-crop { position: absolute; z-index: 40; border-radius: 4px; }
.sjk-inline-crop img { display: block; max-width: 100%; }
/* 자르기 영역 밖(이미지 안)을 진하게 */
.sjk-inline-crop .cropper-modal { background-color: #000; opacity: 0.62; }
/* 자르는 선·테두리·핸들 잘 보이게 (그린 + 흰 외곽) */
.sjk-inline-crop .cropper-view-box { outline: 2px solid #22c55e; box-shadow: 0 0 0 1px rgba(255,255,255,0.7); }
.sjk-inline-crop .cropper-dashed { border-color: rgba(255,255,255,0.95); border-width: 1px; }
.sjk-inline-crop .cropper-line { background-color: #22c55e; }
.sjk-inline-crop .cropper-point { background-color: #16a34a; width: 10px; height: 10px; opacity: 1; box-shadow: 0 0 0 1px #fff; }
.sjk-inline-crop .cropper-center { opacity: .6; }
/* 자르기 컨트롤(취소/적용) — 이미지 위 우상단, 항상 보이게 */
.sjk-crop-bar { position: absolute; top: 8px; right: 8px; z-index: 50; display: flex; gap: 6px; }
.sjk-crop-bar button { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 700; border: 1px solid rgba(255,255,255,0.5); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.sjk-crop-bar button:disabled { opacity: .6; cursor: not-allowed; }
.sjk-crop-bar .sjk-apply { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.sjk-crop-bar .sjk-apply:hover:not(:disabled) { background: var(--green-700); }
.sjk-crop-bar .sjk-cancel2 { background: #fff; color: #334155; }
/* ============================================================
카테고리 분석 (소싱) — 자체 디자인
============================================================ */
.src-info {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 16px; padding: 11px 16px;
background: linear-gradient(180deg, var(--bg-soft), var(--surface));
border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs);
font-size: 12.5px; color: var(--text-secondary);
}
.src-info .n { font-weight: 700; color: var(--text); }
.src-modes { display: inline-flex; background: var(--slate-100); border-radius: var(--r-pill); padding: 4px; gap: 2px; margin-bottom: 14px; }
.src-modes button { padding: 8px 20px; border: 0; background: transparent; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.src-modes button:hover { color: var(--text); }
.src-modes button.on { background: var(--surface); color: var(--primary); box-shadow: var(--sh-sm); }
.src-panel { padding: 16px; margin-bottom: 14px; }
.src-cascade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 10px; align-items: center; }
.src-cascade .input { width: 100%; height: 38px; }
@media (max-width: 1000px) { .src-cascade { grid-template-columns: 1fr 1fr; } .src-cascade > .btn { grid-column: span 1; } }
.src-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin: 14px 0; }
.src-kpis .kpi-card { padding: 16px 16px; }
.src-kpis .kpi-card .value { font-size: 23px; margin-top: 4px; }
.src-views { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.src-chip { padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .12s; }
.src-chip:hover { border-color: var(--border-strong); }
.src-chip.on { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.src-scope { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.src-fcard { padding: 18px 20px; margin-bottom: 14px; }
.src-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 22px; }
.src-fsec-t { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 13px; padding-bottom: 7px; border-bottom: 1px solid var(--divider); }
.src-frow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.src-frow .lab { width: 70px; font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.src-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.src-seg button { padding: 6px 13px; font-size: 12px; border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; font-weight: 600; transition: all .1s; }
.src-seg button:first-child { border-left: 0; }
.src-seg button.on { background: var(--primary); color: #fff; }
.src-mon { width: 30px; height: 28px; font-size: 11.5px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; font-weight: 600; transition: all .1s; }
.src-mon.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.src-rng { width: 90px; height: 32px; }
.src-rng-sep { color: var(--text-muted); }
/* ============================================================
카테고리 소싱 — 목업 디자인 (히어로/KPI/필터/그룹테이블)
============================================================ */
.srcx-hero {
position: relative; overflow: hidden;
border-radius: var(--r-xl);
background:
radial-gradient(900px 280px at 88% -40%, rgba(99,102,241,.16), transparent 60%),
linear-gradient(135deg, #eef2ff 0%, #f3f0ff 45%, #eef5ff 100%);
border: 1px solid #e6e8f5;
padding: 30px 32px; margin-bottom: 18px;
}
.srcx-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--slate-900); margin: 0 0 8px; }
.srcx-hero .sub { font-size: 14px; color: var(--slate-500); margin-bottom: 20px; }
.srcx-hero-art { position: absolute; right: 26px; top: 26px; width: 230px; height: 150px; opacity: .9; pointer-events: none; }
@media (max-width: 1100px) { .srcx-hero-art { display: none; } }
.srcx-htabs { display: flex; gap: 8px; margin-bottom: 14px; position: relative; z-index: 1; }
.srcx-htabs button { padding: 9px 20px; border-radius: var(--r-pill); border: 1px solid transparent; background: rgba(255,255,255,.7); color: var(--slate-600); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.srcx-htabs button:hover { background: #fff; }
.srcx-htabs button.on { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.srcx-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e6f2; border-radius: var(--r-lg); padding: 8px 8px 8px 18px; box-shadow: var(--sh-sm); position: relative; z-index: 1; }
.srcx-search input { flex: 1; border: 0; outline: 0; font-size: 14.5px; background: transparent; height: 38px; }
.srcx-search .opt { display: inline-flex; align-items: center; gap: 4px; color: var(--slate-500); font-size: 13px; padding: 0 12px; border-left: 1px solid var(--divider); height: 22px; white-space: nowrap; }
.srcx-search .go { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 24px; border: 0; border-radius: var(--r-md); background: var(--primary); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.srcx-search .go:hover { background: var(--primary-hover); }
.srcx-cascade-h { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: center; position: relative; z-index: 1; }
.srcx-cascade-h .input { width: 100%; height: 46px; background: #fff; border-color: #e2e6f2; }
.srcx-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.srcx-meta .left { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--slate-500); flex-wrap: wrap; }
.srcx-meta .left .n { font-weight: 700; color: var(--slate-700); }
.srcx-meta .left .dot { color: var(--slate-300); }
.srcx-dl { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid; }
.srcx-dl.x { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.srcx-dl.x:hover { background: #d1fae5; }
.srcx-dl.b { background: var(--primary); color: #fff; border-color: var(--primary); }
.srcx-dl.b:hover { background: var(--primary-hover); }
.srcx-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1280px) { .srcx-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .srcx-kpis { grid-template-columns: repeat(2, 1fr); } }
.srcx-kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 16px 18px; box-shadow: var(--sh-xs); }
.srcx-kpi .ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.srcx-kpi .lab { font-size: 12.5px; color: var(--slate-500); font-weight: 500; margin-bottom: 6px; }
.srcx-kpi .val { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--slate-900); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 5px; }
.srcx-kpi .val .u { font-size: 12px; font-weight: 600; color: var(--slate-400); }
.srcx-fl { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--sh-xs); }
.srcx-fl-h { font-size: 15px; font-weight: 800; color: var(--slate-800); margin-bottom: 16px; display: flex; align-items: center; gap: 7px; }
.srcx-fl-h::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
.srcx-fl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 28px; }
.srcx-fr { display: flex; align-items: center; gap: 10px; }
.srcx-fr > .k { width: 76px; font-size: 12.5px; color: var(--slate-600); font-weight: 600; flex-shrink: 0; }
.srcx-fl-secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 26px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); }
.srcx-fl-sec .t { font-size: 12px; font-weight: 800; color: var(--slate-700); margin-bottom: 11px; display: flex; align-items: center; gap: 6px; }
.srcx-fl-sec .t::before { content: '›'; color: var(--primary); font-weight: 900; }
.srcx-fl-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* 그룹 헤더 네이비 테이블 */
.srcx-tblwrap { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); }
.srcx-tbl-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; flex-wrap: wrap; }
.srcx-tbl-top .ttl { font-size: 14px; font-weight: 800; color: var(--slate-800); margin-right: 4px; }
.srcx-scroll { overflow-x: auto; }
.srcx-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
/* 밝은 헤더 + 그룹별 컬러밴드 (네이비 → 라이트 톤) */
.srcx-tbl thead th { background: #f4f6fb; color: #475569; font-weight: 700; font-size: 12px; padding: 10px 12px; text-align: center; border-left: 1px solid #e6eaf2; border-bottom: 1px solid #e2e8f0; }
.srcx-tbl thead tr.g1 th { border-bottom: 1px solid #dfe5ef; }
.srcx-tbl thead th.kw { text-align: left; background: #eef1f7; }
.srcx-tbl tbody td { padding: 11px 12px; border-bottom: 1px solid var(--divider); text-align: center; color: var(--slate-700); }
.srcx-tbl tbody td.kw { text-align: left; }
.srcx-tbl tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.srcx-tbl tbody tr:hover { background: #f8fafc; }
/* 그룹 헤더 컬러밴드 */
.srcx-tbl .grp-b { background: #eff6ff !important; color: #1d4ed8 !important; } /* 최근검색=블루 */
.srcx-tbl .grp-y { background: #f5f3ff !important; color: #6d28d9 !important; } /* 전년최대=바이올렛 */
.srcx-tbl .grp-s { background: #fffbeb !important; color: #b45309 !important; } /* 계절성=앰버 */
.srcx-tbl .grp-n { background: #ecfdf5 !important; color: #15803d !important; } /* 네이버=초록 */
.srcx-tbl .grp-c { background: #fef2f2 !important; color: #b91c1c !important; } /* 쿠팡=레드 */
.srcx-empty { padding: 64px 20px; text-align: center; color: var(--slate-400); }
.srcx-empty .ttl { font-size: 14px; font-weight: 700; color: var(--slate-500); margin-top: 10px; }
.srcx-empty .sub { font-size: 12.5px; margin-top: 4px; }
.srcx-page { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; }
.srcx-page .pbtn { width: 32px; height: 32px; border-radius: var(--r-md); border: 1px solid var(--border); background: #fff; cursor: pointer; color: var(--slate-600); }
.srcx-page .pbtn:disabled { opacity: .4; cursor: not-allowed; }
.srcx-page .cur { min-width: 32px; height: 32px; border-radius: var(--r-md); background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
/* 키워드 상세 모달 */
.srcx-dt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.srcx-dt-head .kw { font-size: 21px; font-weight: 800; color: var(--slate-900); }
.srcx-dt-path { font-size: 12px; color: var(--slate-400); margin-bottom: 16px; }
.srcx-dt-sec { margin-bottom: 18px; }
.srcx-dt-sec > .t { font-size: 12.5px; font-weight: 800; color: var(--slate-700); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.srcx-dt-sec > .t::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--bar, var(--primary)); }
.srcx-dt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.srcx-dt-cell { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 13px; }
.srcx-dt-cell .l { font-size: 11.5px; color: var(--slate-500); margin-bottom: 4px; }
.srcx-dt-cell .v { font-size: 16px; font-weight: 800; color: var(--slate-900); font-variant-numeric: tabular-nums; }
.srcx-dt-cell .v.sm { font-size: 14px; }
.srcx-dt-mon { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.srcx-dt-mon b { width: 26px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: #fff; border: 1px solid var(--border); color: var(--slate-400); font-weight: 600; }
.srcx-dt-mon b.on { background: var(--warning); color: #fff; border-color: var(--warning); }
.srcx-dt-note { font-size: 11.5px; color: var(--slate-400); margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); line-height: 1.6; }
@keyframes sjkspin { to { transform: rotate(360deg); } }
.sjk-spin { animation: sjkspin .7s linear infinite; }
/* 키워드 상세 — 라이브(네이버) 패널 */
.srcx-live-sec { margin-bottom: 18px; }
.srcx-live-sec > .t { font-size: 12.5px; font-weight: 800; color: var(--slate-700); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.srcx-live-sec > .t::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--bar, #03c75a); }
.srcx-dev { height: 26px; border-radius: 8px; overflow: hidden; display: flex; font-size: 11px; font-weight: 700; color: #fff; }
.srcx-dev .pc { background: #60a5fa; display: flex; align-items: center; justify-content: center; min-width: 28px; }
.srcx-dev .mo { background: #818cf8; display: flex; align-items: center; justify-content: center; min-width: 28px; }
.srcx-trbk { display: flex; gap: 8px; margin-bottom: 12px; }
.srcx-trbk .b { flex: 1; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 6px; text-align: center; }
.srcx-trbk .b .l { font-size: 11px; color: #64748b; }
.srcx-trbk .b .v { font-size: 15px; font-weight: 800; color: #0f172a; }
.srcx-pbars { display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.srcx-pbars .b { flex: 1; background: linear-gradient(180deg, #c4b5fd, #7c3aed); border-radius: 4px 4px 0 0; min-height: 3px; }
.srcx-pbars-x { display: flex; gap: 5px; margin-top: 5px; }
.srcx-pbars-x span { flex: 1; text-align: center; font-size: 9px; color: #94a3b8; }
.srcx-unavail { padding: 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; color: #92400e; font-size: 12.5px; line-height: 1.6; margin-bottom: 16px; }
/* 키워드 상세 모달 — 와이드 3열 레이아웃 (프로젝트15 스타일) */
.srcx-agent { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 14px; margin-bottom: 16px;
background: linear-gradient(120deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%); color: #fff; box-shadow: 0 8px 22px rgba(37,99,235,.28); }
.srcx-agent .ico { font-size: 30px; line-height: 1; }
.srcx-agent .lab { font-size: 12px; opacity: .9; margin-bottom: 3px; }
.srcx-agent .big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.srcx-agent .sub { font-size: 11.5px; opacity: .85; margin-top: 6px; }
.srcx-agent .vd { margin-left: auto; text-align: right; }
.srcx-agent .vd .tag { display: inline-block; background: rgba(255,255,255,.2); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 700; }
.srcx-agent .vd .nums { font-size: 11px; opacity: .9; margin-top: 6px; }
.srcx-row3 { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 980px) { .srcx-row3 { grid-template-columns: 1fr; } }
.srcx-cardp { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.srcx-cardp > .h { font-size: 13px; font-weight: 800; color: var(--slate-700); margin-bottom: 3px; }
.srcx-cardp > .hsub { font-size: 11px; color: var(--slate-400); margin-bottom: 12px; }
.srcx-kwc { text-align: center; }
.srcx-kwc .kw { font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--slate-900); }
.srcx-kwc .cat { font-size: 11px; color: var(--slate-400); margin-top: 5px; }
.srcx-9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.srcx-9 .c { border: 1px solid var(--border); border-radius: 9px; padding: 10px 8px; text-align: center; background: #fcfdff; }
.srcx-9 .c .l { font-size: 10.5px; color: var(--slate-500); }
.srcx-9 .c .v { font-size: 15px; font-weight: 800; color: var(--slate-900); margin-top: 4px; font-variant-numeric: tabular-nums; }
.srcx-9 .c .s { font-size: 9px; color: var(--slate-400); margin-top: 2px; }
.srcx-dist .d { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-top: 7px; }
.srcx-dist .d .l { width: 64px; color: var(--slate-500); }
.srcx-dist .d .tk { flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.srcx-dist .d .f { height: 100%; border-radius: 4px; }
.srcx-dist .d .p { width: 38px; text-align: right; font-weight: 700; color: var(--slate-600); }
.srcx-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 7px; }
.srcx-rel .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 12px; background: #fff; }
.srcx-rel .r .k { font-weight: 600; color: var(--slate-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.srcx-rel .r .nv { display: flex; gap: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; align-items: baseline; }
.srcx-rel .r .v { color: var(--primary); font-weight: 700; min-width: 42px; text-align: right; }
.srcx-rel .r .vp { color: var(--slate-500); font-weight: 600; min-width: 42px; text-align: right; }
.srcx-rel-head { display: flex; justify-content: flex-end; gap: 12px; font-size: 10.5px; color: var(--slate-400); margin: 8px 12px 4px; }
.srcx-rel-head span { min-width: 42px; text-align: right; }
/* 검색 트렌드 1년/3년 토글 */
.srcx-trtoggle { display: inline-flex; gap: 4px; }
.srcx-trtoggle button { font-size: 11.5px; font-weight: 700; padding: 3px 13px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--slate-500); cursor: pointer; transition: all .12s; }
.srcx-trtoggle button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.srcx-trtoggle button:hover:not(.on) { border-color: var(--primary); color: var(--primary); }
/* 해외구매대행 배너 — 추천글 돋보이게 */
.srcx-agent { padding: 22px 28px; align-items: stretch; }
.srcx-agent .ico { font-size: 38px; align-self: center; }
.srcx-agent .lab { font-size: 12.5px; opacity: .92; }
.srcx-agent .big { font-size: 34px; }
.srcx-agent .tag { font-size: 14px; font-weight: 800; padding: 6px 18px; background: rgba(255,255,255,.22); }
.srcx-agent .rec { font-size: 16px; font-weight: 800; margin-top: 12px; line-height: 1.45; display: flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.14); border-radius: 10px; padding: 11px 15px; letter-spacing: -.01em; }
.srcx-agent .vd { display: flex; flex-direction: column; justify-content: center; }
.srcx-agent .vd .nums { font-size: 12px; opacity: .92; }
.srcx-agent { box-shadow: 0 8px 22px rgba(15,23,42,.20); }
/* 카테고리분석 결과 페이지네이션 — 가운데 + 번호 블록 */
.srcx-page { justify-content: center; position: relative; gap: 0; flex-wrap: wrap; }
.srcx-page .cnt { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--slate-400); }
.srcx-page .pg { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.srcx-page .pbtn { min-width: 32px; width: auto; padding: 0 9px; font-size: 13px; font-weight: 600; }
.srcx-page .pbtn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.srcx-page .pbtn:hover:not(:disabled):not(.on) { border-color: var(--primary); color: var(--primary); }
@media (max-width: 720px) { .srcx-page .cnt { position: static; transform: none; width: 100%; text-align: center; margin-bottom: 8px; } }
/* 카테고리분석 결과 테이블 — 클릭 정렬 헤더 */
.srcx-tbl thead th.th-sort { cursor: pointer; user-select: none; transition: background .1s; }
.srcx-tbl thead th.th-sort:hover { filter: brightness(0.96); }
.srcx-tbl thead th.th-on { color: var(--primary) !important; }
.srcx-tbl thead th.th-on.grp-n, .srcx-tbl thead th.th-on.grp-c, .srcx-tbl thead th.th-on.grp-b, .srcx-tbl thead th.th-on.grp-y { box-shadow: inset 0 -2px 0 var(--primary); }
/* ── 그리드 인라인 편집 입력창 — 상품명/가격/할인/배송비 공통(예쁜 포커스 링 + 숫자 스피너 제거) ── */
.dg-edit-input {
padding: 0 9px;
font-size: 12px;
font-family: inherit;
color: var(--text);
background: var(--surface);
border: 1.5px solid var(--primary);
border-radius: 7px;
outline: none;
box-shadow: 0 0 0 3px var(--primary-light), 0 1px 2px rgba(15, 23, 42, .08);
transition: box-shadow .12s ease, border-color .12s ease;
box-sizing: border-box;
-moz-appearance: textfield;
appearance: textfield;
}
.dg-edit-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-light), 0 3px 10px rgba(15, 23, 42, .15);
}
.dg-edit-input::placeholder { color: var(--text-muted); font-weight: 400; }
.dg-edit-input::-webkit-outer-spin-button,
.dg-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-edit-input.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
/* ── 그리드 '상시 표시' 편집 셀(송장/구매정보/통관부호 등) — 평소 차분, 포커스 시에만 링 ── */
.dg-cell-input {
height: 28px;
padding: 0 8px;
font-size: 11.5px;
font-family: inherit;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
box-sizing: border-box;
}
.dg-cell-input:hover { border-color: var(--border-strong); }
.dg-cell-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.dg-cell-input::placeholder { color: var(--text-muted); }
/* ── 헤더 사용량 카드 (타오바오 수집 / AI 상세) — 한 줄: [라벨] [게이지] [남은] ── */
.usage-cards { display: flex; gap: 8px; align-items: center; }
.usage-card {
display: flex; flex-direction: row; align-items: center; gap: 9px;
height: 34px; padding: 0 13px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.24);
border-radius: 10px; color: #fff; line-height: 1; white-space: nowrap;
box-shadow: 0 2px 8px rgba(15,23,42,.12);
}
.usage-card .lb { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.usage-card .lb .ic { font-size: 13px; }
.usage-card .bar { width: 56px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.26); overflow: hidden; flex-shrink: 0; }
.usage-card .bar i { display: block; height: 100%; border-radius: 999px; background: #fff; transition: width .25s ease; }
.usage-card.warn .bar i { background: #fde047; }
.usage-card.full .bar i { background: #fca5a5; }
.usage-card .rem { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .95; }
.usage-card .rem b { font-weight: 800; font-size: 13.5px; }
.usage-card.full .rem b { color: #fecaca; }
.usage-card .na { font-size: 12.5px; font-weight: 800; }
.usage-card .na.off { opacity: .65; font-weight: 700; }
@media (max-width: 1100px) { .usage-cards { display: none; } }
/* 헬퍼 업데이트 필요 뱃지 깜박임 (사용자 가이드 왼쪽 헤더 뱃지)
★키프레임 안의 !important 는 CSS 스펙상 '선언 무효'라 배경 깜박임이 통째로 죽어 있었다 —
!important 없이도 animation 은 캐스케이드에서 인라인 스타일을 이기므로 그냥 선언하면 된다. */
@keyframes sjk-helper-blink {
0%, 100% {
background: rgba(255,77,79,.22);
border-color: rgba(255,77,79,.65);
box-shadow: 0 0 0 rgba(255,77,79,0);
}
50% {
background: #ff4d4f;
border-color: #fff;
box-shadow: 0 0 14px rgba(255,77,79,.9);
}
}
.helper-ver-badge.blink { animation: sjk-helper-blink 1.1s ease-in-out infinite; }
/* 연동현황 '지금 등록중'(running) 라이브 배지 — 진행 중임을 부드럽게 펄스로 표시(파랑=진행). */
@keyframes sjkRegLive { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.sjk-reg-live {
display: inline-flex; align-items: center; gap: 4px;
padding: 1px 8px; border-radius: 999px;
background: #dbeafe; color: #1d4ed8;
font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
animation: sjkRegLive 1.3s ease-in-out infinite;
}
.sjk-reg-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #2563eb; flex: none; }
/* ============================================================
주문 메시지 발송 모달 (OrderMessageModal) — 2-pane
★기존 디자인 토큰만 사용 → 직셀(블루)/산지직셀(그린) 자동 대응.
(--green-* 는 html[data-brand="jiksel"] 에서 블루로 리맵되므로 브랜드색 하드코딩 금지)
★네임스페이스 sjk-msg-* — 기존 화면/모달/그리드와 선택자 충돌 0.
============================================================ */
/* ★크기(2026-07-26 사장님 "화면의 70% 차지") — 뷰포트 비율 기준.
min(max(70vw, 하한), 화면-여백) 3중: ①기본 70vw/70vh ②작은 화면에서도 그리드가 눌리지
않게 하한(1080/680) ③어떤 경우도 화면 밖으로 안 나감. 큰 모니터에선 상한으로 과대 방지. */
.modal.modal-wide {
width: min(max(70vw, 1080px), calc(100vw - 48px), 1800px);
height: min(max(70vh, 680px), calc(100vh - 64px), 1100px);
max-height: calc(100vh - 64px);
}
/* 바디 = 좌 레일 / 우 수신자. 각 pane 이 개별 스크롤(모달 전체는 스크롤 안 함) */
.sjk-msg-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.sjk-msg-rail {
width: 300px; flex: none; min-height: 0;
display: flex; flex-direction: column;
border-right: 1px solid var(--border);
background: var(--bg-soft);
}
.sjk-msg-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sjk-msg-rail-foot {
flex: none; padding: 12px; display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid var(--border); background: var(--surface);
}
.sjk-msg-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* 템플릿 카드 */
.sjk-msg-tcard {
appearance: none; width: 100%; text-align: left;
border: 1px solid var(--border); border-radius: var(--r-md);
padding: 10px 12px; background: var(--surface); cursor: pointer;
display: flex; flex-direction: column; gap: 4px;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.sjk-msg-tcard:hover { background: var(--bg-soft); }
.sjk-msg-tcard.is-active {
border-color: var(--green-600);
background: var(--green-50);
box-shadow: 0 0 0 3px var(--green-100);
}
.sjk-msg-tcard .nm { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.sjk-msg-tcard .nm .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sjk-msg-tcard .df { flex: none; color: var(--warning); font-size: 12px; line-height: 1; }
.sjk-msg-tcard .ct {
font-size: 11.5px; line-height: 1.45; color: var(--text-muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; white-space: pre-wrap; word-break: break-word;
}
.sjk-msg-tcard .acts { display: flex; gap: 4px; margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--border); }
/* 카드 안 작은 아이콘 액션 */
.sjk-msg-iact {
appearance: none; border: 1px solid var(--border-strong); background: var(--surface);
height: 24px; padding: 0 8px; border-radius: var(--r-sm);
font: 600 11px/1 var(--font); color: var(--text-secondary);
cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
transition: background .12s, color .12s, border-color .12s;
}
.sjk-msg-iact:hover { background: var(--bg-soft); color: var(--text); }
.sjk-msg-iact.danger:hover { background: #fef2f2; color: var(--danger); border-color: #fca5a5; }
.sjk-msg-iact:disabled { opacity: .5; cursor: not-allowed; }
/* 미리보기 말풍선 */
.sjk-msg-pv-cap { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.sjk-msg-bubble {
background: var(--green-600); color: #fff;
border-radius: 16px 16px 4px 16px;
padding: 10px 12px;
font-size: 12.5px; line-height: 1.5;
white-space: pre-wrap; word-break: break-word;
max-height: 150px; overflow-y: auto;
box-shadow: var(--sh-sm);
}
.sjk-msg-bubble::-webkit-scrollbar { width: 6px; }
.sjk-msg-bubble::-webkit-scrollbar-thumb { background: rgba(255,255,255,.45); border-radius: 3px; }
.sjk-msg-bubble.is-empty {
background: var(--surface); color: var(--text-muted);
border: 1px dashed var(--border-strong); box-shadow: none;
}
/* 빈 상태(템플릿 0개 / 수신자 0명) */
.sjk-msg-empty {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 28px 14px; text-align: center;
}
.sjk-msg-empty .ic { font-size: 30px; opacity: .55; line-height: 1; }
.sjk-msg-empty .t { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.sjk-msg-empty .s { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
/* 발송 대상 세그먼트 컨트롤 */
.sjk-msg-seg {
display: inline-flex; flex: none;
border: 1px solid var(--border-strong); border-radius: var(--r-pill);
overflow: hidden; background: var(--surface);
}
.sjk-msg-seg button {
appearance: none; border: 0; background: transparent;
height: 30px; padding: 0 16px;
font: 600 12px/1 var(--font); color: var(--text-secondary);
cursor: pointer; white-space: nowrap;
transition: background .12s, color .12s;
}
.sjk-msg-seg button + button { border-left: 1px solid var(--border); }
.sjk-msg-seg button:hover:not(.on) { background: var(--bg-soft); color: var(--text); }
.sjk-msg-seg button.on { background: var(--green-600); color: #fff; }
/* 우측 헤더 / 그리드 */
.sjk-msg-head { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.sjk-msg-gridwrap { flex: 1; min-height: 0; overflow: auto; }
.sjk-msg-gridwrap table.dg tbody tr.is-off td { opacity: .45; }
.sjk-msg-gridwrap table.dg tbody td.tnum { font-variant-numeric: tabular-nums; }
/* 이 표는 정렬 기능이 없다 — .dg 기본 헤더의 정렬 커서/hover 를 중화(오해 방지) */
.sjk-msg-gridwrap table.dg thead th { cursor: default; }
.sjk-msg-gridwrap table.dg thead th:hover { background: var(--bg-soft); color: var(--text-secondary); }
/* "받은 문자 있어도 모두 발송"(force_send) 체크 — 기본 해제(안전측), 체크 시 경고 톤 */
.sjk-msg-force {
display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
padding: 3px 10px; border-radius: var(--r-pill);
border: 1px solid var(--border-strong); background: var(--bg-soft);
font: 600 11.5px/1 var(--font); color: var(--text-muted); white-space: nowrap;
user-select: none;
}
.sjk-msg-force:hover { border-color: var(--text-muted); color: var(--text-secondary); }
.sjk-msg-force.is-on { border-color: #fcd34d; background: #fef3c7; color: #92400e; }
.sjk-msg-force input { margin: 0; }
.sjk-msg-forcehint {
flex: none; padding: 6px 16px; font: 600 11.5px/1.5 var(--font);
color: #92400e; background: #fffbeb; border-bottom: 1px solid #fde68a;
}
/* 상태 컬럼 — 발송 결과 배지(‘둘 다’면 수취인·구매자 2개) / 발송 전 대기 표시
★‘받은문자’는 배지 옆에 실제 받은 문구까지 보여준다(폰을 열지 않아도 알게 — 사장님 지시).
길면 말줄임 + title 툴팁에 전문. 컬럼 폭을 넘겨 가로 스크롤을 만들지 않는 게 핵심. */
.sjk-msg-stcell { display: flex; flex-wrap: wrap; gap: 3px 5px; min-width: 0; }
.sjk-msg-stone { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.sjk-msg-stmsg {
min-width: 0; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font: 500 11.5px/1.4 var(--font); color: var(--text-muted);
}
.sjk-msg-stwait { font: 600 11.5px/1 var(--font); color: var(--text-muted); }
.sjk-msg-stwait.is-off { opacity: .55; }
/* 헤더 선택건수 pill */
.sjk-msg-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: var(--r-pill);
background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-200);
font: 700 12px/1 var(--font); font-variant-numeric: tabular-nums;
}
/* 헤더 — 제목 + 연결배지 + 브라우저 로그인 + 선택 pill + 닫기 (좁아지면 제목이 먼저 줄어든다) */
.sjk-msg-header { gap: 10px; }
.sjk-msg-header .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 구글메시지 연결 배지 — 미연결/확인중은 회색, 연결됨은 초록(브랜드 토큰) */
.sjk-msg-conn {
display: inline-flex; align-items: center; gap: 6px; flex: none;
padding: 3px 10px; border-radius: var(--r-pill);
border: 1px solid var(--border-strong); background: var(--bg-soft);
font: 600 11.5px/1 var(--font); color: var(--text-muted);
white-space: nowrap;
}
.sjk-msg-conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--slate-400, #94a3b8); flex: none; }
.sjk-msg-conn.is-on {
border-color: var(--green-200); background: var(--green-50); color: var(--green-800);
}
.sjk-msg-conn.is-on .dot { background: var(--green-600); }
/* 구버전 헬퍼(문자 발송 미지원) — 조치가 필요하다는 뜻이라 주의색 */
.sjk-msg-conn.is-warn { border-color: #fcd34d; background: #fef3c7; color: #92400e; }
.sjk-msg-conn.is-warn .dot { background: #d97706; }
/* 미연결 상태로 발송을 누르면 로그인 버튼을 강조(3회 펄스 후 정지 — 계속 깜빡이면 피로하다) */
@keyframes sjkMsgAttn {
0%, 100% { box-shadow: 0 0 0 0 var(--green-200); }
50% { box-shadow: 0 0 0 5px var(--green-100); }
}
.btn.sjk-msg-attn {
border-color: var(--green-600); color: var(--green-700);
animation: sjkMsgAttn 1s ease-in-out 3;
}
/* 발송 진행률 — 푸터 바로 위 */
.sjk-msg-progwrap {
flex: none; padding: 10px 20px 0;
display: flex; flex-direction: column; gap: 6px;
border-top: 1px solid var(--divider);
}
.sjk-msg-prog {
height: 6px; border-radius: 3px; overflow: hidden;
background: var(--bg-soft); border: 1px solid var(--border);
}
.sjk-msg-prog > span {
display: block; height: 100%; width: 0;
background: var(--green-600); transition: width .3s ease;
}
.sjk-msg-progtxt {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font: 600 11.5px/1.4 var(--font); color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.sjk-msg-progtxt .fail { color: var(--danger); }
.sjk-msg-progtxt .muted { font-weight: 500; color: var(--text-muted); }
/* 푸터 경고(변수 오타로 제외된 건수) */
.sjk-msg-warn {
display: inline-flex; align-items: center; margin-left: 8px;
padding: 2px 8px; border-radius: var(--r-pill);
background: #fef3c7; color: #92400e; font: 700 11px/1.3 var(--font);
}
/* 편집 폼 — 변수 칩 */
.sjk-msg-vchips { display: flex; flex-wrap: wrap; gap: 5px; }
.sjk-msg-vchip {
appearance: none; cursor: pointer;
border: 1px solid var(--green-200); background: var(--green-50); color: var(--green-800);
border-radius: var(--r-pill); height: 24px; padding: 0 10px;
font: 600 11.5px/1 var(--font);
transition: background .12s, border-color .12s;
}
.sjk-msg-vchip:hover { background: var(--green-100); border-color: var(--green-300); }
/* 반응형 — 좁아지면 레일 축소, 더 좁으면 위/아래로 접힘. 모달이 화면 밖으로 나가지 않는다. */
@media (max-width: 980px) {
.modal.modal-wide { width: calc(100vw - 24px); height: calc(100vh - 32px); }
.sjk-msg-rail { width: 248px; }
}
@media (max-width: 720px) {
.sjk-msg-body { flex-direction: column; }
.sjk-msg-rail { width: auto; max-height: 46%; border-right: 0; border-bottom: 1px solid var(--border); }
/* 헤더가 넘치지 않게 — 배지는 점만, 선택 pill 은 숨김(같은 정보가 그리드 우측에 있다) */
.sjk-msg-conn .lbl { display: none; }
.sjk-msg-conn { padding: 3px 7px; }
.sjk-msg-header .sjk-msg-pill { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
사이드바 접기/펼치기 (2026-07-27)
- 우상단 네모 버튼으로 토글. 접히면 아이콘 전용 레일(64px)로 축소 → 본문 확장.
- 상태는 localStorage(sanji.sbCollapsed) 로 유지. 브랜드 무관(직셀·산지직셀 공통).
═══════════════════════════════════════════════════════════════════════════ */
.sidebar { position: sticky; transition: width .22s cubic-bezier(.4,0,.2,1); }
/* ── 토글 버튼(네모) ── */
.sb-toggle {
position: absolute; top: 12px; right: 10px; z-index: 3;
width: 28px; height: 28px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
color: var(--text-muted);
box-shadow: 0 1px 2px rgba(20,24,40,.05);
transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.sb-toggle:hover {
background: var(--primary-light, var(--bg-soft));
border-color: var(--primary, var(--border-strong));
color: var(--primary, var(--text));
box-shadow: 0 4px 10px rgba(20,24,40,.10);
}
.sb-toggle:active { transform: scale(.94); }
.sb-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 아이콘 — 레일(굵은 막대) + 본문(얇은 막대) 도식. 접히면 좌우가 바뀐다. */
.sb-toggle-ico { position: relative; width: 15px; height: 13px; display: block; }
.sb-toggle-ico i {
position: absolute; top: 0; height: 100%; border-radius: 2px;
background: currentColor; transition: all .22s cubic-bezier(.4,0,.2,1);
}
.sb-toggle-ico i:nth-child(1) { left: 0; width: 5px; opacity: .95; }
.sb-toggle-ico i:nth-child(2) { left: 7px; width: 8px; opacity: .35; }
.sidebar.sb-collapsed .sb-toggle-ico i:nth-child(1) { left: 0; width: 8px; opacity: .35; }
.sidebar.sb-collapsed .sb-toggle-ico i:nth-child(2) { left: 10px; width: 5px; opacity: .95; }
/* 버튼 자리 확보 — 첫 라벨이 버튼 밑으로 들어가지 않게 */
.sidebar > .group-label:first-of-type { padding-right: 34px; }
.sidebar .supplier-pill { padding-right: 34px; }
/* ── 접힘 상태 ── */
.sidebar.sb-collapsed {
width: 64px; min-width: 64px;
padding-left: 8px; padding-right: 8px;
overflow-x: hidden;
}
.sidebar.sb-collapsed .sb-toggle { right: 50%; transform: translateX(50%); }
.sidebar.sb-collapsed .sb-toggle:active { transform: translateX(50%) scale(.94); }
/* 접히면 텍스트/위젯 숨김 — 아이콘만 남긴다 */
.sidebar.sb-collapsed .group-label,
.sidebar.sb-collapsed .supplier-pill,
.sidebar.sb-collapsed .footer,
.sidebar.sb-collapsed .nav-item > span,
.sidebar.sb-collapsed .nav-item .count { display: none; }
/* 접힘 nav — 아이콘 중앙 정렬. 토글 버튼(top12+h28) 자리는 패딩으로 확보한다.
(:first-of-type 은 '첫 div'라 .nav-item 에 안 걸림 — 첫 div 가 group-label 이라서) */
.sidebar.sb-collapsed { padding-top: 50px; }
.sidebar.sb-collapsed .nav-item {
justify-content: center; padding: 10px 0; margin: 2px 0; gap: 0;
}
.sidebar.sb-collapsed .nav-item.active::before { width: 3px; }
/* 그룹 펼침 화살표·하이라이트 점 숨김 — 아이콘 하나만 남긴다 */
.sidebar.sb-collapsed .nav-item > svg:not(:first-child) { display: none; }
@media (max-width: 900px) { .sb-toggle { display: none; } }