/* tokens.css — 디자인 값. 출처: site-boilerplate/frontend/admin/src/assets/main.css (오투·땡큐페이 관리자와 같은 값) */
@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: url('../fonts/pretendard/Pretendard-Regular.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: url('../fonts/pretendard/Pretendard-Medium.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: url('../fonts/pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 700 800; font-display: swap; src: url('../fonts/pretendard/Pretendard-Bold.subset.woff2') format('woff2'); }

:root {
	--sidebar-width: 240px;
	--topbar-height: 56px;
	--font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
	--font-size-xs: 0.75rem;   --font-size-sm: 0.875rem;  --font-size-base: 0.875rem;
	--font-size-lg: 1.125rem;  --font-size-xl: 1.25rem;   --font-size-2xl: 1.5rem;
	--sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 16px;  --sp-lg: 20px;  --sp-xl: 32px;
	--radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 8px;  --radius-xl: 10px;
	--accent-blue: #60a5fa;  --accent-amber: #fbbf24;  --accent-violet: #a78bfa;  --accent-rose: #fb7185;
	--shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.4);
	--ease-out: cubic-bezier(.2, .8, .2, 1);
}

[data-theme="emerald"] {
	--surface-0:#fff; --surface-50:#fafafa; --surface-100:#f4f4f5; --surface-200:#e4e4e7;
	--surface-300:#d4d4d8; --surface-400:#a1a1aa; --surface-500:#71717a; --surface-600:#52525b;
	--surface-700:#3f3f46; --surface-800:#27272a; --surface-900:#18181b; --surface-950:#09090b;
	--primary-400:#34d399; --primary-500:#10b981; --primary-600:#059669; --primary-700:#047857;
	--primary-strong:#34d399;
	--logo-bg:#10b981; --logo-text:#09090b;
}
[data-theme="emerald"][data-mode="light"] {
	--surface-0:#09090b; --surface-50:#18181b; --surface-100:#27272a; --surface-200:#3f3f46;
	--surface-300:#52525b; --surface-400:#71717a; --surface-500:#a1a1aa; --surface-600:#d4d4d8;
	--surface-700:#e4e4e7; --surface-800:#f4f4f5; --surface-900:#fafafa; --surface-950:#fff;
	--primary-500:#10b981; --primary-600:#34d399; --logo-text:#fff;
	/* 흰 바탕에서 읽히는 진한 초록 — 선택된 메뉴 글자·숫자 강조용 */
	--primary-strong:#059669;
}

[data-mode="dark"], [data-mode="light"] {
	--text-primary:var(--surface-0); --text-secondary:var(--surface-400); --text-muted:var(--surface-500);
	--border-color:rgba(255,255,255,0.07);
	--page-bg:var(--surface-950); --card-bg:var(--surface-900);
	--sidebar-bg:var(--surface-950); --topbar-bg:var(--surface-950);
	--hover-bg:var(--surface-800); --input-bg:var(--surface-800); --input-border:var(--surface-700);
	--table-head-bg:var(--surface-950); --table-row-hover:var(--surface-800); --table-border:var(--surface-800);
	--accent-alpha:.12;
}
[data-mode="dark"] {
	--tag-success-bg:rgba(74,222,128,.1); --tag-success-color:#4ade80;
	--tag-warn-bg:rgba(251,191,36,.1);    --tag-warn-color:#fbbf24;
	--tag-danger-bg:rgba(248,113,113,.1); --tag-danger-color:#f87171;
	--tag-info-bg:rgba(96,165,250,.1);    --tag-info-color:#60a5fa;
}
[data-mode="light"] {
	--border-color:rgba(0,0,0,0.07);
	/* 오투 관리자처럼 옅은 회색 바탕 위에 흰 카드 */
	--page-bg:#f5f6f8; --card-bg:#fff; --sidebar-bg:#fff; --topbar-bg:#fff;
	--input-bg:#fff; --input-border:var(--surface-600);
	--table-head-bg:var(--surface-800);
	--accent-alpha:.15;
	--shadow-overlay:0 8px 24px rgba(15, 23, 42, .12);
	--tag-success-bg:rgba(22,163,74,.12); --tag-success-color:#16a34a;
	--tag-warn-bg:rgba(217,119,6,.12);    --tag-warn-color:#d97706;
	--tag-danger-bg:rgba(220,38,38,.12);  --tag-danger-color:#dc2626;
	--tag-info-bg:rgba(37,99,235,.1);     --tag-info-color:#2563eb;
}

body { margin:0; font-family:var(--font-family); font-size:var(--font-size-base); line-height:1.5;
	background:var(--page-bg); color:var(--text-primary); -webkit-font-smoothing:antialiased; }

/* 페이지 이동 때 새로고침 깜빡임 대신 내용만 짧게 겹쳐 바뀌게 한다(지원 안 하는 브라우저는 평소처럼 이동) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.sidebar { view-transition-name: sidebar; }
.topbar { view-transition-name: topbar; }

/* Vue가 붙기 전의 {{ }} 원문이 보이지 않게 숨겼다가 붙는 순간 서서히 보인다 */
#app { transition: opacity .15s ease; }
#app[v-cloak] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
	@view-transition { navigation: none; }
}