/* ───────────────────────────────────────────────────────────────
GDI-Apps 공유 테마 토큰 (라이트 기본 + 다크 선택) — v1.0.1
v1.0.1: 라이트 보조 텍스트(--text2/--text3) 대비 강화(흰 배경 회색 글씨 가독성)
단일 출처: 색을 바꾸려면 이 파일만 수정.
사용법:
1) 앱 에 (FOUC 방지 위해 head)
2) 앱 CSS 보다 먼저
3) 앱 CSS 의 :root 색 토큰 정의는 삭제(여기서 공급) — var(--bg) 등은 그대로 사용
기본 = 라이트. 면 다크. theme.js 가 localStorage(gdi_theme)로 토글·기억.
토큰 이름은 데이터앱 군집(chart·map·survey·BC·townvoice·calculator·lunch) 표준과 동일.
─────────────────────────────────────────────────────────────── */
:root {
/* 라이트 (기본 = 랜딩 종이 테마) */
--bg: #f4f6f9;
--bg2: #ffffff;
--panel: #ffffff;
--panel2: #f1f3f6;
--border: #e4e7ec;
--border2: #d4d9e0;
--text: #1f2430;
--text2: #434b59;
--text3: #5b6472;
--accent: #2563eb;
--accent2: #1d4ed8;
--accent-dim: rgba(37, 99, 235, 0.10);
--success: #16a34a;
--warn: #b8770f;
--danger: #dc2626;
/* 부수 토큰 (라이트에서 카드 떠보이게) */
--shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
--shadow-hover: 0 8px 22px rgba(16, 24, 40, 0.10);
color-scheme: light;
}
:root[data-theme="dark"] {
/* 다크 (기존 데이터앱 팔레트 그대로 보존) */
--bg: #0f1419;
--bg2: #161b22;
--panel: #1c2128;
--panel2: #22272e;
--border: #30363d;
--border2: #3d444d;
--text: #e6edf3;
--text2: #b1bac4;
--text3: #8b949e;
--accent: #4a9eff;
--accent2: #6cc4ff;
--accent-dim: rgba(74, 158, 255, 0.12);
--success: #4ade80;
--warn: #fbbf24;
--danger: #f87171;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.40);
color-scheme: dark;
}
/* ───── 테마 토글 버튼 (theme.js 가 주입) ───── */
.gdi-theme-toggle {
appearance: none; -webkit-appearance: none;
font-family: inherit; cursor: pointer; line-height: 0;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text2, #888);
transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.gdi-theme-toggle svg { width: 17px; height: 17px; display: block; }
.gdi-theme-toggle:hover { color: var(--accent, #2563eb); }
/* 앱 툴바(.tb-right / .header-actions 등) 안에 들어갈 때 — 인라인 고스트 버튼 */
.gdi-theme-toggle--inline {
background: transparent; border: none;
padding: 6px; border-radius: 7px;
}
.gdi-theme-toggle--inline:hover { background: var(--bg, rgba(127,127,127,.08)); }
/* 인식된 툴바가 없을 때 — 우하단 떠있는 버튼 */
.gdi-theme-toggle--float {
position: fixed; right: 16px; bottom: 16px; z-index: 9000;
width: 40px; height: 40px; border-radius: 50%;
background: var(--panel, #fff); border: 1px solid var(--border, #ddd);
box-shadow: var(--shadow-hover, 0 4px 14px rgba(0,0,0,.18));
}
.gdi-theme-toggle--float:hover { border-color: var(--accent, #2563eb); transform: translateY(-1px); }
.gdi-theme-toggle--float svg { width: 19px; height: 19px; }
@media (max-width: 600px) {
.gdi-theme-toggle--float { width: 36px; height: 36px; right: 12px; bottom: 12px; }
}