/* ===== 색상 토큰 (라이트 기본 / 다크 재정의) ===== 라이트 값은 기존 하드코딩 색상과 동일. 다크는 [data-theme="dark"]에서 재정의. 테마는 로 적용(레이아웃/로그인 head의 인라인 스크립트가 렌더 전 설정). */ :root { /* 표면/배경 */ --page-bg: #ffffff; --card-bg: #fcfcfb; --muted-bg: #f5f6f8; --table-header-bg: #fafafa; --badge-bg: #eeeeee; --topbar-bg: #ffffff; --sidebar-bg: #ffffff; --sidebar-hover-bg: #f2f3f5; --avatar-bg: #eceef1; /* 텍스트 */ --text: #0b0b0b; --text-muted: #52514e; --text-faint: #898781; --th-text: #555555; --on-dark: #ffffff; --sidebar-text: #555555; --sidebar-strong: #1f1f1f; /* 상단바/사이드바의 강조 텍스트(브랜드·활성·이름·아이콘) */ /* 테두리 */ --border: #e1e0d9; --border-light: #eeeeee; --input-border: #cccccc; --topbar-btn-border: #555555; /* 강조(브랜드 블루) */ --accent: #2a78d6; --accent-2: #2f6fed; --accent-hover: #2366ba; --accent-light: #86b6ef; /* 시맨틱 - 성공(초록) */ --success: #0ca30c; --success-strong: #006300; --success-done: #1e8e3e; --success-bg: #e5f7e5; --success-bg-2: #e3f6e5; /* 시맨틱 - 경고(노랑/주황) */ --warning: #b3790a; --warning-2: #fab219; --warning-3: #c47700; --warning-bg: #fff4d9; --warning-bg-2: #fff4e0; /* 시맨틱 - 위험(빨강) */ --danger: #d03b3b; --danger-2: #d93025; --danger-bg: #fdeaea; --danger-border: #f3c2c2; /* 시맨틱 - 정보(파랑) */ --info: #2f6fed; --info-bg: #e6f0ff; --info-border: #cfe0ff; /* 시맨틱 - 보라(상품준비중) */ --purple: #7b3fe4; --purple-bg: #f0e9ff; --shadow: rgba(0,0,0,0.05); } :root[data-theme="dark"] { --page-bg: #17191d; --card-bg: #1e2127; --muted-bg: #22262c; --table-header-bg: #22262c; --badge-bg: #2c313a; --topbar-bg: #0f1115; --sidebar-bg: #141619; --sidebar-hover-bg: #262a31; --avatar-bg: rgba(255, 255, 255, 0.14); --text: #e6e7ea; --text-muted: #b3b7be; --text-faint: #8b8f97; --th-text: #aeb2b8; --on-dark: #ffffff; --sidebar-text: #b8bcc4; --sidebar-strong: #ffffff; /* 다크에선 흰색(기존과 동일) */ --border: #2d323a; --border-light: #2a2e35; --input-border: #3a3f47; --topbar-btn-border: #555c66; --accent: #4a90e6; --accent-2: #4a90e6; --accent-hover: #3a7fd0; --accent-light: #3a6ea5; --success: #4ecb71; --success-strong: #5fd07f; --success-done: #5fd07f; --success-bg: #16321f; --success-bg-2: #16321f; --warning: #e0a53a; --warning-2: #e0a53a; --warning-3: #e0a53a; --warning-bg: #3a2f14; --warning-bg-2: #3a2f14; --danger: #ef6b6b; --danger-2: #ef6b6b; --danger-bg: #3a1c1c; --danger-border: #5a2a2a; --info: #6aa3f0; --info-bg: #182740; --info-border: #294056; --purple: #b596ec; --purple-bg: #2a2140; --shadow: rgba(0,0,0,0.4); } /* ===== 공통 레이아웃 (상단 헤더 + 좌측 사이드바 + 본문) ===== */ body { margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; font-family: 'Segoe UI', sans-serif; background: var(--page-bg); color: var(--text); } .topbar { background: var(--topbar-bg); color: var(--sidebar-strong); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-bottom: 1px solid var(--border-light); } .topbar-brand { font-size: 15px; font-weight: 600; letter-spacing: 0.2px; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .app-shell { flex: 1; display: flex; align-items: stretch; min-height: 0; } .sidebar { width: 200px; flex-shrink: 0; background: var(--sidebar-bg); padding: 12px 0; display: flex; flex-direction: column; height: 100%; border-right: 1px solid var(--border-light); } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 11px 20px; color: var(--sidebar-text); text-decoration: none; font-size: 14px; } /* 사이드바 상단: 접기 버튼 + 프로젝트명 */ .sidebar-head { display: flex; align-items: center; gap: 8px; padding: 4px 16px 12px; } .sidebar-brand { color: var(--sidebar-strong); font-size: 15px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 상단바 없이, 사이드바가 접혔을 때만 보이는 플로팅 펼치기 버튼 */ .app-reopen { position: fixed; top: 10px; left: 10px; z-index: 300; display: none; width: 36px; height: 32px; padding: 0; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--sidebar-strong); font-size: 16px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .app-reopen:hover { background: var(--sidebar-hover-bg); } :root[data-sidebar="collapsed"] .app-reopen { display: block; } /* 사이드바 하단 묶음(테마 토글 + 계정) — 바닥으로 밀착 */ .sidebar-bottom { margin-top: auto; } .sidebar-theme { padding: 8px 16px 4px; } /* 사이드바 사용자 계정 영역 */ .sidebar-account { position: relative; padding: 6px 12px 10px; } .account-row { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: var(--sidebar-text); text-align: left; font-family: inherit; } .account-row:hover { background: var(--sidebar-hover-bg); } .account-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--avatar-bg); color: var(--sidebar-strong); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; } .account-avatar img { width: 100%; height: 100%; object-fit: cover; } .account-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; } .account-name { font-size: 14px; font-weight: 600; color: var(--sidebar-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-sub { font-size: 12px; color: var(--sidebar-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-more { flex-shrink: 0; font-size: 18px; line-height: 1; color: var(--sidebar-text); padding: 0 2px; } /* 계정 팝오버(계정 영역 위로 열림) */ .profile-popover { position: absolute; left: 12px; right: 12px; bottom: 64px; z-index: 50; background: var(--card-bg, #fff); color: var(--text, #222); border: 1px solid var(--border-light, #ddd); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 6px; } .profile-popover[hidden] { display: none; } .profile-popover .pp-item { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 9px 10px; border: 0; background: transparent; border-radius: 6px; color: var(--text, #222); text-decoration: none; font-size: 14px; cursor: pointer; font-family: inherit; } .profile-popover .pp-item:hover { background: var(--sidebar-hover-bg, rgba(0, 0, 0, 0.06)); } .profile-popover .pp-logout { color: #c0392b; } .profile-popover .pp-disabled { color: #9aa0a6; cursor: default; } .profile-popover .pp-disabled:hover { background: transparent; } .sidebar-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-strong); } .sidebar-link.active { color: var(--sidebar-strong); font-weight: bold; background: var(--sidebar-hover-bg); border-left: 3px solid var(--accent); padding-left: 17px; } .main-area { flex: 1; min-width: 0; min-height: 0; overflow: auto; } /* 사이드바 접기/펼치기 (topbar 좌측 ☰) + 접힘 상태 (모든 색상 토큰 사용 → 다크모드 자동 대응) */ .topbar-left { display: flex; align-items: center; gap: 12px; } .sidebar-toggle { background: transparent; border: 1px solid var(--border); color: var(--sidebar-strong); width: 34px; height: 30px; padding: 0; border-radius: 4px; font-size: 16px; line-height: 1; cursor: pointer; } .sidebar-toggle:hover { background: var(--sidebar-hover-bg); } /* 접힘: 사이드바를 숨기면 main-area(flex:1)가 자연스럽게 전체 폭을 차지한다 */ :root[data-sidebar="collapsed"] .sidebar { display: none; } /* 사이드바 메뉴 아이콘(이모지) — 라벨 앞 고정폭 정렬 */ .sidebar-icon { flex-shrink: 0; width: 1.3em; text-align: center; font-size: 15px; line-height: 1; } .sidebar-label { min-width: 0; } /* 페이지 전환 로딩 표시: 화면 중앙 도넛(링) 스피너. 트랙은 은은한 --border, 강조 구간은 --accent 로 회전. 새 페이지 로드 시 DOM 교체로 자연 초기화. 색상은 토큰만 사용 → 라이트/다크 모두 배경과 구분됨 */ .loading-spinner { position: fixed; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; z-index: 10000; display: none; animation: __spin 0.7s linear infinite; } .loading-spinner.loading-spinner-active { display: block; } @keyframes __spin { to { transform: rotate(360deg); } } /* 순수 CSS 툴팁 (data-tooltip) — 기본: 요소 위 중앙. 색상 토큰만 사용(라이트/다크 대응) */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 6px; background: var(--text); color: var(--page-bg); border: 1px solid var(--border); box-shadow: 0 4px 16px var(--shadow); padding: 6px 10px; border-radius: 6px; font-size: 12px; line-height: 1.35; text-align: left; width: max-content; max-width: 260px; white-space: normal; z-index: 1000; pointer-events: none; } /* 사이드바 메뉴 툴팁은 항목 바로 위에. 좌측 끝 사이드바라 가운데 정렬 대신 왼쪽 앵커(left:0)로 화면 밖 잘림 방지 */ .sidebar-link[data-tooltip]:hover::after { left: 0; right: auto; top: auto; bottom: 100%; transform: none; margin-left: 12px; margin-bottom: 6px; } /* 로그아웃 / 테마 토글 버튼 (topbar 우측) */ .topbar-logout { margin: 0; } .logout-button { background: transparent; border: 1px solid var(--topbar-btn-border); color: var(--sidebar-text); padding: 5px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; } .logout-button:hover { background: var(--sidebar-hover-bg); color: var(--on-dark); } /* 테마 슬라이드 스위치 (알약 트랙 + 좌우로 움직이는 손잡이) */ .theme-switch { position: relative; box-sizing: border-box; width: 50px; height: 26px; flex-shrink: 0; padding: 0; border: 1px solid var(--topbar-btn-border); border-radius: 13px; background: var(--border); cursor: pointer; transition: background 0.15s ease; vertical-align: middle; } :root[data-theme="dark"] .theme-switch { background: var(--badge-bg); } .theme-switch:hover { border-color: var(--sidebar-text); } .theme-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--on-dark); box-shadow: 0 1px 3px var(--shadow); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; transition: transform 0.15s ease; } :root[data-theme="dark"] .theme-switch-knob { transform: translateX(24px); } .theme-switch-icon { pointer-events: none; } .theme-switch .icon-dark { display: none; } :root[data-theme="dark"] .theme-switch .icon-light { display: none; } :root[data-theme="dark"] .theme-switch .icon-dark { display: inline; } /* 스위치 + 현재 모드 텍스트 라벨 묶음 */ .theme-switch-wrap { display: flex; align-items: center; gap: 8px; } .theme-label { font-size: 12px; color: var(--sidebar-text); white-space: nowrap; } .theme-label .icon-dark { display: none; } :root[data-theme="dark"] .theme-label .icon-light { display: none; } :root[data-theme="dark"] .theme-label .icon-dark { display: inline; } /* 로그인 페이지 */ .login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 320px; max-width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 12px var(--shadow); } .login-title { margin: 0 0 4px; font-size: 20px; color: var(--text); } .login-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); } .login-input { padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 14px; background: var(--page-bg); color: var(--text); } .login-input:focus { outline: none; border-color: var(--accent); } .login-button { margin-top: 6px; padding: 11px; background: var(--accent); color: var(--on-dark); border: none; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; } .login-button:hover { background: var(--accent-hover); } .login-error { margin: 0; padding: 10px 12px; background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); border-radius: 6px; font-size: 13px; } .login-notice { margin: 0; padding: 10px 12px; background: var(--info-bg); color: var(--info); border: 1px solid var(--info-border); border-radius: 6px; font-size: 13px; } /* 로그인 재디자인: 연회색 배경 + 브랜드/비밀번호 토글/체크박스/구분선/안내/푸터 (모두 색상 토큰 사용 → 다크모드 자동 대응) */ .login-wrap { background: var(--muted-bg); } .login-box { width: 320px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; } .login-box .login-card { width: 100%; box-sizing: border-box; } .login-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; } .login-brand-name { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: 0.5px; } .login-brand-sub { font-size: 14px; font-weight: 600; color: var(--accent); } .login-pw-row { display: flex; gap: 8px; align-items: stretch; } .login-pw-row .login-input { flex: 1; min-width: 0; } .login-pw-toggle { flex-shrink: 0; padding: 0 12px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--muted-bg); color: var(--text-muted); font-size: 13px; cursor: pointer; white-space: nowrap; } .login-pw-toggle:hover { background: var(--badge-bg); color: var(--text); } .login-checks { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .login-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; } .login-check input { accent-color: var(--accent); } .login-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; } .login-help { margin: 0; font-size: 12px; color: var(--text-faint); line-height: 1.5; } .login-footer { margin: 0; text-align: center; font-size: 12px; color: var(--text-faint); } /* ========================================================= */ .page-content { padding: 24px; font-family: 'Segoe UI', sans-serif; } .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 16px; background: var(--muted-bg); border-radius: 8px; } .filter-bar input[type="date"], .filter-bar select { padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--page-bg); color: var(--text); } .filter-bar button { padding: 6px 16px; background: var(--accent-2); color: var(--on-dark); border: none; border-radius: 4px; cursor: pointer; } /* 데이터 테이블 공통 (order/growth/opportunity 통합) */ .order-table, .growth-table, .opportunity-table { width: 100%; border-collapse: collapse; } .order-table th, .order-table td, .growth-table th, .growth-table td, .opportunity-table th, .opportunity-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); text-align: left; font-size: 14px; } .order-table th, .growth-table th, .opportunity-table th { background: var(--table-header-bg); color: var(--th-text); } .status-badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; background: var(--badge-bg); } .status-배송완료 { background: var(--success-bg-2); color: var(--success-done); } .status-배송중 { background: var(--info-bg); color: var(--info); } .status-신규주문 { background: var(--warning-bg-2); color: var(--warning-3); } .status-상품준비중 { background: var(--purple-bg); color: var(--purple); } .status-취소 { background: var(--danger-bg); color: var(--danger-2); } .stat-grid { display:flex; gap:16px; margin-bottom:24px; } /* 카드 공통 배경/테두리 (stat-tile/rate-tile/channel-status-card/insight-card/methodology 통합) */ .stat-tile, .rate-tile, .channel-status-card, .insight-card, .methodology { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; } .stat-tile { flex:1; padding:18px 20px; } .stat-label { font-size:13px; color:var(--text-muted); margin-bottom:6px; } .stat-value { font-size:26px; font-weight:700; color:var(--text); } .widget-title { font-size:15px; font-weight:600; color:var(--text); margin: 28px 0 12px; } .channel-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; overflow:hidden; } .channel-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); font-size:14px; } .channel-row:last-child { border-bottom:none; } .channel-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; } .channel-name { width:110px; color:var(--text); } .channel-amount { flex:1; text-align:right; color:var(--text); } .channel-sync { width:110px; text-align:right; color:var(--text-faint); font-size:12px; } .bar-chart { display:flex; align-items:flex-end; gap:14px; height:160px; padding:12px 16px; border:1px solid var(--border); border-radius:10px; } .bar-col { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; justify-content:flex-end; } .bar { width:26px; border-radius:4px 4px 0 0; background:var(--accent); } .bar-today { background:var(--accent-light); } .bar-date { margin-top:8px; font-size:11px; color:var(--text-faint); } .bar-today-label { color:var(--accent); font-weight:600; } .channel-status-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px; } .channel-status-card { padding:16px; } .channel-status-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .channel-status-name { font-weight:600; font-size:15px; color:var(--text); } .status-pill { font-size:12px; padding:3px 10px; border-radius:12px; font-weight:600; } /* 상태/pill 시맨틱 색 통합 (동일 값 그룹화) */ .status-good, .status-pill-good, .pill-selling { background:var(--success-bg); color:var(--success); } .status-pill-warning, .pill-missing { background:var(--warning-bg); color:var(--warning); } .status-critical, .status-pill-critical { background:var(--danger-bg); color:var(--danger); } .channel-status-time { font-size:12px; color:var(--text-faint); margin-bottom:4px; } .channel-status-message { font-size:13px; color:var(--danger); font-weight:500; } .period-tabs { display:flex; gap:8px; margin-bottom:20px; } .period-tab { padding:6px 16px; border:1px solid var(--border); border-radius:20px; background:var(--card-bg); color:var(--text-muted); text-decoration:none; font-size:13px; } .period-tab.active { background:var(--accent); color:var(--on-dark); border-color:var(--accent); } .growth-positive { color:var(--success-strong); font-weight:600; } .growth-negative { color:var(--danger); font-weight:600; } .growth-na { color:var(--text-faint); font-style:italic; } /* 증감률 결과 컬럼 강조: +/- 색상(growth-positive/negative)은 유지하고, 변동폭 큰 값(|증감률| >= 20%)은 같은 계열 배경 칩 + 더 굵게로 "특히 주목할 값"을 한 번 더 구분. "비교 불가"(growth-na)는 대상 아님. */ .growth-strong { font-weight:800; padding:2px 7px; border-radius:5px; } .growth-positive.growth-strong { background:var(--success-bg); } .growth-negative.growth-strong { background:var(--danger-bg); } .growth-table { margin-bottom:28px; } .rate-tiles { display:flex; gap:16px; margin-bottom:28px; } .rate-tile { flex:1; padding:16px 18px; } .rate-tile-value { font-size:24px; font-weight:700; } .rate-tile-formula { font-size:12px; color:var(--text-faint); margin-top:4px; } .trend-columns { display:flex; gap:20px; margin-bottom:28px; } .trend-col { flex:1; border:1px solid var(--border); border-radius:10px; padding:16px; } .trend-col h4 { margin:0 0 10px; font-size:14px; } .trend-item { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border-light); font-size:14px; } .trend-item:last-child { border-bottom:none; } .page-desc { color:var(--text-muted); font-size:14px; margin-bottom:20px; } .opportunity-table td { vertical-align:middle; } .pill { display:inline-block; padding:2px 10px; border-radius:12px; font-size:12px; margin:2px 4px 2px 0; } .pill-unregistered { background:var(--badge-bg); color:var(--text-faint); } .order-error { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-border); border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:14px; } .order-empty { text-align:center; color:var(--text-faint); padding:24px 12px; } /* 통합주문 페이지네이션 (이전/다음 + 현재/전체 페이지). 기존 토큰만 사용 → 라이트/다크 공통 */ .pagination { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; } .pagination .page-link { padding:7px 16px; border:1px solid var(--border); border-radius:20px; background:var(--card-bg); color:var(--text-muted); text-decoration:none; font-size:13px; } .pagination a.page-link:hover { border-color:var(--accent); color:var(--accent); } .pagination .page-disabled { opacity:0.4; } .pagination .page-current { font-size:13px; font-weight:600; color:var(--text); } .status-warning { background:var(--warning-bg); color:var(--warning-2); } .error-page-message { font-size:15px; color:var(--text-muted); margin:12px 0 20px; } .error-home-link { display:inline-block; color:var(--accent); text-decoration:none; font-size:14px; } .error-home-link:hover { text-decoration:underline; } .stat-growth { font-size:12px; color:var(--text-faint); margin-top:8px; } .channel-tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; } .channel-tab { padding:8px 14px; border:none; background:none; cursor:pointer; font-size:13px; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; } .channel-tab:hover { color:var(--text); } .channel-tab.active { color:var(--text); font-weight:600; border-bottom-color:var(--tab-color, var(--accent)); } .channel-panel { display:none; } .channel-panel.active { display:block; } .insight-cards { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; } .insight-card { flex:1; min-width:220px; border-left-width:4px; padding:16px 18px; } .insight-title { font-size:13px; font-weight:700; margin-bottom:8px; } .insight-body { font-size:14px; color:var(--text); line-height:1.5; } .insight-todo { border-left-color:var(--accent); } .insight-todo .insight-title { color:var(--accent); } .insight-opportunity { border-left-color:var(--success); } .insight-opportunity .insight-title { color:var(--success); } .insight-warning { border-left-color:var(--danger); } .insight-warning .insight-title { color:var(--danger); } /* 대시보드 재구성: 핵심 요약(항상 노출, accent 왼쪽 테두리로 강조) + 상세 보기(기본 접힘, 토글) */ .dash-core { border-left:4px solid var(--accent); background:var(--muted-bg); border-radius:0 10px 10px 0; padding:14px 16px 2px; margin-bottom:20px; } .dash-core > :last-child { margin-bottom:6px; } .dash-section-label { font-size:13px; font-weight:700; color:var(--accent); margin-bottom:12px; } .dash-section-hint { font-weight:400; color:var(--text-faint); } .dash-detail-toggle { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; margin-bottom:20px; background:var(--card-bg); color:var(--accent); border:1px solid var(--border); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; } .dash-detail-toggle:hover { background:var(--muted-bg); border-color:var(--accent); } /* 종합 베스트셀러 더보기/접기: 기본은 11위 이후(.bestseller-extra) 숨김, .expanded 시 노출 */ .bestseller-wrap { margin-bottom:28px; } .bestseller-wrap .growth-table { margin-bottom:0; } .bestseller-wrap:not(.expanded) tr.bestseller-extra { display:none; } .bestseller-more { margin-top:10px; padding:8px 16px; background:var(--card-bg); color:var(--accent); border:1px solid var(--border); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; } .bestseller-more:hover { background:var(--muted-bg); border-color:var(--accent); } .methodology { margin-top:20px; padding:12px 16px; } .methodology summary { cursor:pointer; font-weight:600; font-size:14px; color:var(--text); } .methodology-body { margin-top:10px; font-size:13px; color:var(--text-muted); line-height:1.6; } .methodology-body p { margin:4px 0; } .chart-box { position:relative; height:320px; margin-bottom:24px; } .heatmap-wrap { overflow-x:auto; margin-bottom:24px; } .heatmap { border-collapse:collapse; } .heatmap th { font-size:11px; color:var(--text-faint); font-weight:500; padding:2px 5px; text-align:center; } .heatmap tbody th { text-align:right; } .heatmap td { width:18px; height:18px; border:1px solid var(--border-light); }