/* ============================================================
스토어메이트 디자인 시스템
============================================================ */
@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(녹색=성공 의미)는 일부러 유지 — 브랜드색과 무관한 시맨틱.
★★2026-08-16 — 앱이 '두 가지 파랑'을 섞어 쓰던 버그를 여기서 고쳤다 (사장님 지시:
"너무 포크 원본 색이다, 메인 UI 랑 색 비슷하게").
원인: 아래 1600행대 workways 리스킨이 `:root` 에서 --green-* 를 인디고(#2E4BF2)로
리맵하는데, **이 블록(html[data-brand] = 특정도 0,1,1)이 `:root`(0,1,0)를 이겨**
타탄 블루(#2563eb 계열)로 되돌리고 있었다. 그 결과
· 앱 셸(사이드바·헤더·버튼·카드) = --brand(#2E4BF2 인디고)
· --green-* 를 쓰는 화면(AI 스튜디오 등 130여 곳) = #2563eb 계열
두 계열이 한 화면에 섞여 "다른 제품 같다"는 인상을 만들었다.
→ 값을 workways 인디고 스케일과 **동일하게** 맞춰 단일 계열로 통일한다.
(블록을 지우지 않고 값만 맞춘 이유: 지우면 특정도 싸움을 다시 읽어야 하고,
브랜드 분기 자리를 남겨둬야 나중에 화이트라벨을 다시 켤 수 있다.)
※ 값을 바꿀 땐 아래 workways `:root` 의 --green-* 와 **반드시 같이** 바꿀 것.
============================================================ */
html[data-brand="storemate"] {
--green-50: #F5F7FF;
--green-100: #EEF1FE;
--green-200: #C9D3FC;
--green-300: #9FB2F8;
--green-400: #6E86F4;
--green-500: #3F5CF0;
--green-600: #2E4BF2; /* PRIMARY = --brand */
--green-700: #1B2CC1;
--green-800: #16238F;
--green-900: #111B6B;
--accent: var(--green-600);
--sh-green: 0 4px 14px rgba(46, 75, 242, .22);
}
/* 스토어메이트 사이드바 — 옅은 블루 틴트 (텍스트는 기존 대비 유지, active 는 토큰으로 자동 블루) */
html[data-brand="storemate"] .sidebar {
background: #f5f8ff;
border-right: 1px solid var(--green-100);
}
html[data-brand="storemate"] .sidebar .nav-item:hover {
background: var(--green-100);
}
/* 스토어메이트 헤더 — 녹색 잔향 그림자 제거(블루 톤) */
html[data-brand="storemate"] .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); }
/* 요금제·구독 페이지 전용 글자 확대 (2026-08-06 · "너무 작다") — 이 페이지에만 스코프.
본문 px 값은 컴포넌트에서 직접 키웠고, 클래스로 그려지는 작은 글자만 여기서 맞춘다. */
.sub-page .caption { font-size: 13.5px; line-height: 1.5; }
.sub-page table th { font-size: 13.5px; }
.sub-page table td { font-size: 14px; }
.sub-page input, .sub-page select, .sub-page button { font-size: 14px; }
.sub-page .btn { font-size: 14px; }
.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; }
/* 순번 전용 CSS(.dg-seq-th/.dg-seq-td) 제거 — 순번이 일반 컬럼으로 합류해(2026-08-20)
다른 컬럼과 같은 규칙을 쓴다. [컬럼 설정]에서 표시·순서·고정도 동일하게 동작. */
/* ── 컬럼 필터 깔때기 — 평소엔 흐릿, 호버/적용 시 진하게 ─────── */
table.dg thead th .dg-fbtn {
display: inline-block; margin-left: 4px;
font-size: 9.5px; line-height: 1; opacity: 0;
cursor: pointer; transition: opacity .12s, color .12s;
}
table.dg thead th:hover .dg-fbtn { opacity: .5; }
table.dg thead th .dg-fbtn:hover { opacity: 1; color: var(--primary); }
table.dg thead th .dg-fbtn.on { opacity: 1; color: var(--primary); font-weight: 900; }
/* ── 적용된 필터 줄 (그리드 바로 위) ────────────────────────── */
.dg-filterbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 7px 10px; background: #F1F6FF; border: 1px solid #C9DCFB;
border-radius: 8px; margin: 0 0 8px;
}
.dg-filterbar .dg-fb-title { font-size: 11.5px; font-weight: 800; color: var(--primary); }
.dg-filterbar .dg-fb-count { font-size: 11.5px; color: var(--text-secondary); }
.dg-filterbar .dg-fb-count strong { color: var(--primary); }
.dg-filterbar .dg-fb-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px; font-weight: 700; color: #1e40af;
background: #fff; border: 1px solid #C9DCFB; border-radius: 999px; padding: 2px 4px 2px 9px;
max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dg-filterbar .dg-fb-chip button {
border: none; background: none; cursor: pointer; color: #64748b;
font-size: 13px; line-height: 1; padding: 0 3px;
}
.dg-filterbar .dg-fb-chip button:hover { color: #dc2626; }
.dg-filterbar .dg-fb-reset { margin-left: auto; white-space: nowrap; }
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: #fff;
border: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius: 8px 8px 0 0;
box-shadow: 0 3px 8px -3px rgba(20, 30, 50, .12);
}
/* 툴바 바로 아래부터 편집영역 — 겹치는 상단 테두리 제거하고 이어붙인다(한 카드처럼). */
.sj-quill-sticky .ql-container.ql-snow { border-top: none; }
/* 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; }
/* ═══════════════════════════════════════════════════════════════════════════
★ WORKWAYS 디자인 채택 (스토어메이트) — 2026-07 리스킨.
기능/컴포넌트 마크업은 그대로, 외형만 workways 디자인 언어로.
그린 레거시 토큰을 블루로 리맵 + workways 컴포넌트 스타일을 우리 클래스에 매핑.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* workways 원본 토큰 */
--brand:#2E4BF2; --brand-2:#1B2CC1; --brand-soft:#EEF1FE; --brand-line:#C9D3FC;
--ai:#7C5CFC; --ai-soft:#F3F0FF;
--ww-canvas:#F5F6FA; --ww-line:#E6E8F0; --ww-line-soft:#F0F1F6;
--ww-r-lg:14px; --ww-r-md:10px; --ww-r-sm:8px;
--ww-shadow:0 1px 2px rgba(20,24,40,.05),0 10px 28px -14px rgba(20,24,40,.14);
--ww-shadow-lg:0 24px 64px -24px rgba(20,24,40,.28);
/* 그린 스케일 → 블루 리맵(그린 잔재 전부 블루화) */
--green-50:#F5F7FF; --green-100:#EEF1FE; --green-200:#C9D3FC; --green-300:#9FB2F8;
--green-400:#6E86F4; --green-500:#3F5CF0; --green-600:#2E4BF2; --green-700:#1B2CC1;
--green-800:#16238F; --green-900:#111B6B;
/* 시맨틱/공용 토큰 리맵 */
--primary:#2E4BF2; --primary-hover:#1B2CC1; --primary-light:#EEF1FE; --primary-dark:#1B2CC1;
--info:#2E4BF2; --success:#12B76A; --warning:#F79009; --danger:#F04438;
--text:#141828; --text-secondary:#5B6172; --text-muted:#9AA0B0;
--bg:#fff; --bg-soft:#F5F6FA; --bg-tinted:#F5F6FA;
--border:#E6E8F0; --border-strong:#D8DBE6;
--font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
--radius:14px; --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
}
body { font-family:var(--font); background:var(--ww-canvas); color:var(--ink); letter-spacing:-.01em; }
/* ── 사이드바 → workways .sb ── */
.sidebar, html[data-brand="storemate"] .sidebar { background:#fff; border-right:1px solid var(--ww-line); }
.sidebar .nav-item { border-radius:9px; font-weight:600; font-size:13.5px; color:var(--sub); padding:8px 10px; margin-bottom:1px; transition:background .12s,color .12s; }
.sidebar .nav-item:hover, html[data-brand="storemate"] .sidebar .nav-item:hover { background:var(--ww-line-soft); color:var(--ink); }
.sidebar .nav-item.active { background:var(--brand-soft) !important; color:var(--brand) !important; font-weight:700; }
.sidebar .nav-item.active::before { background:var(--brand) !important; }
.sidebar .nav-item .count { border-radius:99px; background:var(--ww-line-soft); color:var(--sub); font-weight:700; }
.sidebar .nav-item.active .count { background:var(--brand-soft); color:var(--brand); }
.sidebar .group-label { font-size:11px; font-weight:700; color:var(--mut); letter-spacing:.02em; }
/* ── 상단바 → workways 톤 ── */
.top-header, html[data-brand="storemate"] .top-header { background:#fff; border-bottom:1px solid var(--ww-line); box-shadow:none; }
/* ── 버튼 → workways .btn ── */
.btn { border:1px solid var(--ww-line); background:#fff; border-radius:var(--ww-r-sm); padding:8px 14px; font-size:13px; font-weight:700; color:var(--ink); transition:.13s; }
.btn:hover { background:var(--ww-line-soft); border-color:var(--border-strong); }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-2); border-color:var(--brand-2); }
.btn-outline { background:#fff; border:1px solid var(--ww-line); color:var(--ink); }
.btn-outline:hover { background:var(--ww-line-soft); border-color:var(--border-strong); }
.btn-ghost { border-color:transparent; background:transparent; color:var(--sub); }
.btn-ghost:hover { background:var(--ww-line-soft); color:var(--ink); }
.btn-danger { color:var(--danger); border-color:#F6C6C2; background:#fff; }
.btn-danger:hover { background:#FEECEB; }
/* ── 카드 → workways .card (부드러운 그림자·14px radius) ── */
.card { background:#fff; border:1px solid var(--ww-line); border-radius:var(--ww-r-lg); box-shadow:var(--ww-shadow); }
/* ── 입력 → workways .inp ── */
input:not([type=checkbox]):not([type=radio]), select, textarea, .inp {
border:1px solid var(--ww-line); border-radius:var(--ww-r-sm); background:#fff;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
/* ── 링크·포커스 ── */
a { color:var(--brand); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* ── workways 정밀 매칭: 토큰 정렬 + 테이블/모달/KPI ── */
:root {
--accent:#2E4BF2; --accent-hover:#1B2CC1;
--surface:#fff; --card:#fff;
--r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:16px; --r-pill:99px;
--sh-sm:0 1px 2px rgba(20,24,40,.05);
--sh-md:0 1px 2px rgba(20,24,40,.05),0 6px 16px -10px rgba(20,24,40,.12);
--sh-lg:0 1px 2px rgba(20,24,40,.05),0 10px 28px -14px rgba(20,24,40,.14);
--sh-xl:0 24px 64px -24px rgba(20,24,40,.28);
}
/* 데이터그리드 → workways .tbl (헤더 FAFBFD·행 hover·선택 brand-soft) */
table.dg thead th { background:#FAFBFD; color:var(--sub); }
table.dg tbody tr:hover { background:#FAFBFE; }
table.dg tbody tr.sel, table.dg tbody tr.selected, table.dg tbody tr.dg-sel, table.dg tbody tr.row-sel { background:var(--brand-soft); }
/* KPI → workways .kpi (값 800·상승 그린) */
.kpi-card .value { font-weight:800; letter-spacing:-.03em; }
.kpi-card .delta.up { color:var(--success); }
/* 카드 헤더 라인 workways 톤 */
.card > .card-h, .modal-header { border-bottom-color:var(--ww-line-soft); }
/* 모달/드로우 딤 배경 workways(반투명 잉크+블러) */
.modal-scrim, .scrim, .modal-overlay, .overlay-scrim { background:rgba(16,20,34,.5); backdrop-filter:blur(2px); }
/* 배지 브랜드톤: green 계열(리맵으로 블루) 유지, 나머지 상태색 그대로 */
.badge-green { background:var(--brand-soft); color:var(--brand); }
/* ═══════ workways 대시보드/셸 컴포넌트 (스토어메이트) ═══════ */
.ww-kpi { padding:18px 20px; background:#fff; border:1px solid var(--ww-line); border-radius:var(--ww-r-lg); box-shadow:var(--ww-shadow); }
.ww-kpi .k-lbl { font-size:12.5px; color:var(--sub); font-weight:600; display:flex; align-items:center; gap:6px; }
.ww-kpi .k-val { font-size:26px; font-weight:800; letter-spacing:-.03em; margin-top:6px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ww-kpi .k-val small { font-size:14px; font-weight:700; color:var(--mut); }
.ww-kpi .k-sub { font-size:12px; margin-top:5px; color:var(--mut); font-weight:600; }
.ww-kpi .k-sub .up { color:var(--success); } .ww-kpi .k-sub .lnk { color:var(--brand); cursor:pointer; }
.ww-card { background:#fff; border:1px solid var(--ww-line); border-radius:var(--ww-r-lg); box-shadow:var(--ww-shadow); }
.ww-ch { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--ww-line-soft); }
.ww-ch h3 { font-size:14.5px; font-weight:800; letter-spacing:-.02em; }
.ww-ch .hint { font-size:12px; color:var(--mut); font-weight:500; }
.ww-ch .right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.ww-cb { padding:18px 20px; }
/* .rail* / @keyframes wwdash — 대시보드 '오늘의 파이프라인' 전용이었고 그 블록을 지우면서
쓰는 곳이 하나도 없어져 함께 제거했다(2026-08-20). 로그인 화면의 비슷한 레일은 인라인 스타일이라 무관. */
.gauge { display:flex; flex-direction:column; gap:6px; }
.gauge + .gauge { margin-top:16px; }
.gauge .g-top { display:flex; justify-content:space-between; font-size:12px; font-weight:700; }
.gauge .g-top span { color:var(--sub); } .gauge .g-top b { color:var(--ink); }
.prog { height:8px; background:var(--ww-line-soft); border-radius:99px; overflow:hidden; }
.prog > i { display:block; height:100%; background:linear-gradient(90deg,var(--brand),#5A79FF); border-radius:99px; }
.prog.ai > i { background:linear-gradient(90deg,var(--ai),#A78BFF); }
.ww-bars { display:flex; align-items:stretch; gap:12px; height:210px; padding:10px 4px 4px; }
.ww-bars > div { height:100%; justify-content:flex-end; }
.ww-bargrp { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; min-height:0; }
.ww-bar { width:8px; border-radius:3px 3px 0 0; }
.ww-nlist { display:flex; flex-direction:column; }
.ww-nrow { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px; }
.ww-nrow:hover { background:var(--ww-line-soft); }
.ww-nrow .nt { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-weight:600; }
.ww-nrow .nd { font-size:11.5px; color:var(--mut); font-weight:600; }
.ww-mk { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; }
/* ── workways 사이드바 (스토어메이트) ── */
.sidebar { display:flex; flex-direction:column; padding:0 !important; }
.sb-logo { display:flex; align-items:center; gap:10px; padding:18px 16px 12px; flex-shrink:0; }
.sb-mark { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-name { line-height:1.2; min-width:0; }
.sb-name strong { display:block; font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-name span { font-size:10.5px; color:var(--mut); font-weight:700; letter-spacing:.05em; }
.sb-nav { flex:1; overflow-y:auto; padding:2px 12px 12px; }
.sb-sec { font-size:11px; font-weight:700; color:var(--mut); padding:14px 8px 6px; letter-spacing:.02em; }
.sb-sec:first-child { padding-top:4px; }
.sidebar .footer { flex-shrink:0; padding:12px 14px 16px; border-top:1px solid var(--ww-line); }
.sb-user { display:flex; align-items:center; gap:9px; padding:9px 10px; margin-bottom:10px; border-radius:10px; background:var(--ww-line-soft); }
.sb-av { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--ai)); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-uname { font-size:13px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-uplan { font-size:11px; color:var(--mut); font-weight:600; }
/* ── workways 셸: 사이드바 풀하이트 + 흰색 상단바(다크 컨트롤) ── */
.app-body { display:flex; flex:1; min-height:100vh; align-items:stretch; }
.app-right { display:flex; flex-direction:column; min-width:0; flex:1; }
.sidebar {
position:sticky; top:0; height:100vh;
background:var(--surface); border-right:1px solid var(--ww-line);
overflow:hidden; gap:0;
}
/* 상단바: 흰색 64px (다크 전용 그라디언트 제거) */
.top-header {
height:64px;
background:var(--surface) !important;
border-bottom:1px solid var(--ww-line) !important;
color:var(--ink) !important;
box-shadow:none !important;
position:sticky; top:0; z-index:40;
padding:0 28px;
}
.top-header .icon-btn { background:transparent; border:1px solid var(--ww-line); border-radius:9px; width:34px; height:34px; color:var(--sub); }
.top-header .icon-btn:hover { background:var(--ww-line-soft); color:var(--ink); }
.top-header .header-divider { background:var(--ww-line); }
.top-header .header-user-name { color:var(--ink); }
.top-header .header-user-email { color:var(--mut); }
.top-header .badge-count { border:2px solid var(--surface); }
.deposit-chip {
background:var(--ww-line-soft); color:var(--sub); border:1px solid var(--ww-line);
border-radius:99px; padding:5px 12px; font-weight:600; font-size:12px;
display:inline-flex; align-items:center; gap:6px;
}
/* 사용자 메뉴 클릭 영역: 흰 배경 대비 */
.top-header .user-menu-wrap > div:first-child:hover { background:var(--ww-line-soft) !important; }
/* nav 활성 = workways 블루 소프트 (좌측 바 제거) */
.sidebar .nav-item { padding:8px 10px; border-radius:9px; color:var(--sub); font-weight:500; }
.sidebar .nav-item:hover { background:var(--ww-line-soft); color:var(--ink); }
.sidebar .nav-item.active { background:var(--brand-soft); color:var(--brand); font-weight:700; }
.sidebar .nav-item.active::before { display:none; }
.sidebar .nav-item .count { background:var(--ww-line-soft); color:var(--sub); }
.sidebar .nav-item.active .count { background:#fff; color:var(--brand); }
/* ── 상단 우측 고객센터 드롭다운 ── */
.cs-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:9px;
background:var(--surface); border:1px solid var(--ww-line); color:var(--sub); font-weight:700; font-size:12.5px;
cursor:pointer; white-space:nowrap; font-family:var(--font); transition:background .12s,color .12s; }
.cs-btn:hover, .cs-btn.on { background:var(--brand-soft); border-color:var(--brand-soft); color:var(--brand); }
.cs-pop { position:absolute; top:calc(100% + 8px); right:0; width:258px; background:var(--surface);
border:1px solid var(--ww-line); border-radius:12px; box-shadow:0 12px 32px rgba(20,30,50,.14); padding:6px; z-index:200; }
.cs-pop-h { font-size:11px; font-weight:800; color:var(--mut); letterSpacing:.04em; padding:8px 10px 6px; }
.cs-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; text-decoration:none; color:inherit; cursor:pointer; }
.cs-item:hover { background:var(--ww-line-soft); }
.cs-ic { width:32px; height:32px; border-radius:9px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:15px; }
.cs-t { font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; }
.cs-s { font-size:11px; color:var(--mut); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-pop-f { font-size:11px; color:var(--mut); padding:8px 10px 6px; margin-top:2px; border-top:1px solid var(--ww-line-soft); display:flex; align-items:center; gap:5px; }
/* ── 좌측 하단 회원정보 카드 ── */
.member-card { padding:11px; border-radius:12px; background:var(--ww-line-soft); border:1px solid var(--ww-line); margin-bottom:10px; }
.mc-top { display:flex; align-items:center; gap:9px; }
.mc-badge { font-size:10px; font-weight:800; padding:2px 8px; border-radius:99px; background:var(--brand); color:#fff; flex-shrink:0; }
.mc-badge.free { background:#e7ebf2; color:#64748b; }
.mc-acts { display:flex; gap:6px; margin-top:10px; }
.mc-acts button { flex:1; height:30px; border-radius:8px; border:1px solid var(--ww-line); background:var(--surface); color:var(--sub);
font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); transition:background .12s,color .12s,border-color .12s; }
.mc-acts button:hover { background:var(--brand-soft); color:var(--brand); border-color:var(--brand-soft); }
/* ── 사이드바 좌상단 실제 로고 ── */
.sb-logo { gap:9px !important; padding:14px 16px 12px !important; }
.sb-logo img { height:40px; width:auto; display:block; }
.sb-role-tag { font-size:10px; font-weight:800; color:var(--brand); background:var(--brand-soft); padding:3px 7px; border-radius:6px; letter-spacing:.06em; flex-shrink:0; }
/* ── 로그인 좌측 패널 = workways auth-side 색 정확히 매칭 ── */
.auth-visual { background: linear-gradient(160deg, #1B2CC1 0%, #17123B 100%) !important; }
.auth-visual::before, .auth-visual::after { display: none !important; }
/* ── 상품관리 툴바 컴팩트 — 버튼/글자 축소로 아래 리스트 영역 확대 (요청 2026-07-20) ── */
.prod-sticky-toolbar { gap: 8px !important; padding-bottom: 8px !important; }
.prod-sticky-toolbar .page-header { margin-bottom: 0; }
.prod-sticky-toolbar .page-header .h2 { font-size: 18px; }
.prod-sticky-toolbar .page-header .caption { font-size: 11px; }
.prod-sticky-toolbar .btn { font-size: 12px !important; padding: 5px 9px !important; line-height: 1.2; height: auto; min-height: 0; }
.prod-sticky-toolbar .btn svg { width: 13px; height: 13px; }
.prod-sticky-toolbar .filter-bar { font-size: 12px; }
.prod-sticky-toolbar .filter-row { gap: 6px; row-gap: 6px; }
/* 대시보드 카드 내부 빈 상태 — 목업을 실데이터로 바꾸면서 '데이터 없음'과 '로딩 중'을
구분해 보여줘야 한다(빈 차트만 뜨면 고장으로 오해한다). */
.ww-empty-sm{
display:flex; align-items:center; justify-content:center;
min-height:120px; padding:18px 10px;
font-size:12.5px; color:var(--mut); text-align:center;
}
/* ============================================================
하단 상태바 (AppStatusBar) — 2026-08-20
============================================================
사이드바 하단에 쌓여 있던 회원카드·이용현황 게이지·개인GPT 카드를 걷어내고,
'지금 상태'(에이전트 연결 / 요금제 / 만료일 / 로그아웃)만 화면 맨 아래 한 줄로 모았다.
법인정보 푸터(.site-footer)는 앱 화면에서 제거 — 소개·로그인 페이지에만 남는다. */
.app-statusbar {
flex: 0 0 auto;
display: flex; align-items: center; gap: 10px;
height: 34px; padding: 0 16px;
background: var(--bg-soft, #F5F6FA);
border-top: 1px solid var(--ww-line, #E6E8F0);
font-size: 11.5px; color: var(--text-secondary, #5B6172);
overflow-x: auto; overflow-y: hidden; white-space: nowrap;
}
.app-statusbar .sb-left,
.app-statusbar .sb-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-statusbar .sb-right { margin-left: auto; }
.app-statusbar .sb-who { font-size: 11.5px; color: var(--text-secondary, #5B6172); }
.app-statusbar .sb-who strong { color: var(--text, #141828); font-weight: 700; }
.app-statusbar .sb-uid { color: var(--text-muted, #9AA0B0); margin-left: 4px; }
.app-statusbar .sb-plan {
font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px;
background: var(--brand-soft, #EEF1FE); color: var(--brand-2, #1E3A8A);
border: 1px solid var(--brand-line, #C9D3FC);
}
.app-statusbar .sb-exp { font-weight: 600; color: var(--text-secondary, #5B6172); }
.app-statusbar .sb-exp.ok { color: #15803d; font-weight: 700; }
.app-statusbar .sb-exp.warn { color: #b45309; font-weight: 700; }
.app-statusbar .sb-exp.bad { color: #dc2626; font-weight: 800; }
.app-statusbar button {
height: 22px; padding: 0 10px; border-radius: 6px;
border: 1px solid var(--ww-line, #E6E8F0); background: var(--surface, #fff);
color: var(--text-secondary, #5B6172); font-size: 11.5px; font-weight: 700;
font-family: inherit; cursor: pointer; white-space: nowrap;
}
.app-statusbar button:hover { background: var(--brand-soft, #EEF1FE); color: var(--brand, #2E4BF2); border-color: var(--brand-line, #C9D3FC); }
.app-statusbar button.danger { color: #b91c1c; border-color: #f3c9c6; }
.app-statusbar button.danger:hover { background: #fef2f2; color: #b91c1c; border-color: #f3c9c6; }
/* 좁은 화면 — 만료일 문구는 접고 연결상태·버튼만 남긴다(가로 스크롤 방지) */
@media (max-width: 900px) {
.app-statusbar .sb-exp, .app-statusbar .sb-uid { display: none; }
}
/* ── 컬럼 고정(freeze) — 왼쪽 N개 컬럼을 가로스크롤에서 붙잡아 둔다 ─────────────
★배경이 반드시 불투명해야 한다. 투명하면 스크롤되는 뒤 컬럼이 고정 컬럼을 통과해 비친다.
행 상태색(선택/검수완료/잠금/hover)은 rgba 라 그대로 쓰면 비치므로, 흰 배경에 미리 섞은
불투명 근사색을 CSS 변수로 tr 에 얹어 td 가 물려받게 한다(규칙 순서와 무관하게 항상 이긴다). */
table.dg tbody td.dg-frozen { background: var(--dg-frozen-bg, #fff); }
table.dg tbody tr:hover { --dg-frozen-bg: var(--bg-soft, #F5F6FA); }
table.dg tbody tr.selected { --dg-frozen-bg: #f4fcf7; } /* rgba(34,197,94,.05) 를 흰 배경에 합성 */
table.dg tbody tr.reviewed-row { --dg-frozen-bg: #e0f7e9; } /* .14 */
table.dg tbody tr.reviewed-row:hover { --dg-frozen-bg: #cef2dc; } /* .22 */
table.dg tbody tr.locked-row { --dg-frozen-bg: #fef2df; } /* rgba(245,158,11,.13) */
table.dg tbody tr.locked-row:hover { --dg-frozen-bg: #fdecce; } /* .20 */
/* 고정 구간의 마지막 컬럼 — 여기부터 스크롤된다는 걸 알 수 있게 경계선 */
table.dg thead th.dg-frozen-edge,
table.dg tbody td.dg-frozen-edge { box-shadow: inset -1px 0 0 var(--border), 6px 0 8px -6px rgba(0,0,0,.16); }