*
* 기존 zinc 토큰 (index.html :root)은 건드리지 않음 — 회귀 방지.
* ============================================================= */
:root {
/* ── Bento (정적 컨테이너) ── */
--bento-bg: rgba(255, 255, 255, 0.02);
--bento-bg-raised: rgba(255, 255, 255, 0.04);
--bento-border: rgba(255, 255, 255, 0.08);
--bento-border-strong:rgba(255, 255, 255, 0.12);
/* ── Surface 4단계 (인터랙티브 셀) ── */
--surface-rest-bg: transparent;
--surface-rest-border: transparent;
--surface-hover-bg: rgba(255, 255, 255, 0.04);
--surface-hover-border: rgba(255, 255, 255, 0.10);
--surface-focus-bg: rgba(255, 255, 255, 0.06);
--surface-focus-border: rgba(255, 255, 255, 0.15);
--surface-focus-ring: rgba(16, 185, 129, 0.40); /* emerald-500/40 */
--surface-active-bg: rgba(255, 255, 255, 0.08);
--surface-active-border: rgba(255, 255, 255, 0.20);
/* ── Brand (Orange primary 유지) ── */
--brand-primary-bg: #f97316; /* orange-500 */
--brand-primary-bg-hover: #ea580c; /* orange-600 */
--brand-primary-fg: #09090b; /* zinc-950 */
--brand-active-text: #fb923c; /* orange-400 */
--brand-accent-bg: rgba(249, 115, 22, 0.10);
--brand-accent-border: rgba(249, 115, 22, 0.20);
/* ── System (의미 기반) ── */
--system-success-text: #34d399; /* emerald-400 */
--system-success-bg: rgba(16, 185, 129, 0.10);
--system-success-border: rgba(16, 185, 129, 0.25);
--system-warning-text: #fbbf24; /* amber-400 */
--system-warning-bg: rgba(245, 158, 11, 0.10);
--system-warning-border: rgba(245, 158, 11, 0.25);
--system-error-text: #fb7185; /* rose-400 */
--system-error-bg: rgba(244, 63, 94, 0.10);
--system-error-border: rgba(244, 63, 94, 0.25);
--system-info-text: #38bdf8; /* sky-400 */
--system-info-bg: rgba(14, 165, 233, 0.10);
--system-info-border: rgba(14, 165, 233, 0.25);
/* ── Motion ── */
--motion-duration-fast: 120ms; /* hover, focus */
--motion-duration-base: 180ms; /* tab switch, accordion */
--motion-duration-slow: 240ms; /* modal, drawer */
--motion-easing-standard: cubic-bezier(0.2, 0, 0.2, 1); /* ease-out */
--motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* 등장 */
/* ── Z-index 계층 (기존 혼재 정리, D-8 일괄 적용 예정) ── */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300; /* 모달 backdrop */
--z-modal: 400; /* 모달 본체 */
--z-popover: 500; /* 토스트, 알림 */
--z-tooltip: 600;
--z-debug: 9999;
/* ── Density (Personal vs Professional 차별화 축, D-3 적용) ── */
/* Personal (comfortable) — 기본 */
--density-card-padding: 1.25rem; /* p-5 */
--density-row-height: 3rem; /* h-12 */
--density-button-padding: 0.625rem 1rem; /* py-2.5 px-4 */
--density-section-gap: 1.25rem; /* space-y-5 */
--density-radius-input: 0.75rem; /* rounded-xl */
--density-radius-card: 1rem; /* rounded-2xl */
}
/* ── Light 모드 오버라이드 ── */
:root.light {
/* Bento */
--bento-bg: #ffffff;
--bento-bg-raised: #ffffff;
--bento-border: rgba(0, 0, 0, 0.08);
--bento-border-strong: rgba(0, 0, 0, 0.12);
/* Surface 4단계 (라이트는 검정 기반) */
--surface-rest-bg: transparent;
--surface-rest-border: transparent;
--surface-hover-bg: rgba(0, 0, 0, 0.03);
--surface-hover-border: rgba(0, 0, 0, 0.08);
--surface-focus-bg: rgba(0, 0, 0, 0.05);
--surface-focus-border: rgba(0, 0, 0, 0.12);
--surface-focus-ring: rgba(16, 185, 129, 0.40);
--surface-active-bg: rgba(0, 0, 0, 0.07);
--surface-active-border: rgba(0, 0, 0, 0.18);
/* Brand (라이트는 더 진한 orange) */
--brand-primary-bg: #ea580c; /* orange-600 */
--brand-primary-bg-hover: #c2410c; /* orange-700 */
--brand-primary-fg: #ffffff;
--brand-active-text: #c2410c; /* orange-700 (라이트 contrast) */
--brand-accent-bg: #fff7ed; /* orange-50 */
--brand-accent-border: #fed7aa; /* orange-200 */
/* System (라이트는 더 진한 톤, WCAG AA 4.5:1) */
--system-success-text: #047857; /* emerald-700 */
--system-success-bg: #ecfdf5; /* emerald-50 */
--system-success-border: #a7f3d0; /* emerald-200 */
--system-warning-text: #b45309; /* amber-700 */
--system-warning-bg: #fffbeb;
--system-warning-border: #fde68a;
--system-error-text: #be123c; /* rose-700 */
--system-error-bg: #fff1f2;
--system-error-border: #fecdd3;
--system-info-text: #0369a1; /* sky-700 */
--system-info-bg: #f0f9ff;
--system-info-border: #bae6fd;
}
/* ── Professional 모드 density (D-3에서 [data-mode="professional"] 으로 적용) ── */
[data-mode="professional"] {
--density-card-padding: 1rem; /* p-4 */
--density-row-height: 2.5rem; /* h-10 */
--density-button-padding: 0.5rem 0.75rem; /* py-2 px-3 */
--density-section-gap: 1rem; /* space-y-4 */
--density-radius-input: 0.5rem; /* rounded-lg */
--density-radius-card: 0.75rem; /* rounded-xl */
}
/* ── Mobile fallback: hover 없는 디바이스에서는 rest를 hover로 승격 ── */
@media (hover: none) {
:root {
--surface-rest-bg: rgba(255, 255, 255, 0.03);
--surface-rest-border: rgba(255, 255, 255, 0.08);
}
:root.light {
--surface-rest-bg: rgba(0, 0, 0, 0.025);
--surface-rest-border: rgba(0, 0, 0, 0.06);
}
}
/* ── prefers-reduced-motion: motion 토큰 0ms 강제 ── */
@media (prefers-reduced-motion: reduce) {
:root {
--motion-duration-fast: 0ms;
--motion-duration-base: 0ms;
--motion-duration-slow: 0ms;
}
}
/* =============================================================
* 빌딩블록 유틸리티 클래스 (D-2에서 React 컴포넌트가 이 클래스 사용)
* 직접 마크업에 적용도 가능 (예:
…
)
* ============================================================= */
/* Bento — 정적 컨테이너 */
.bento {
background-color: var(--bento-bg);
border: 1px solid var(--bento-border);
border-radius: var(--density-radius-card);
}
.bento--raised {
background-color: var(--bento-bg-raised);
border-color: var(--bento-border-strong);
}
/* Surface — 인터랙티브 hover-reveal */
.surface {
background-color: var(--surface-rest-bg);
border: 1px solid var(--surface-rest-border);
border-radius: var(--density-radius-input);
transition:
background-color var(--motion-duration-fast) var(--motion-easing-standard),
border-color var(--motion-duration-fast) var(--motion-easing-standard),
box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}
.surface:hover:not(:disabled):not([aria-disabled="true"]) {
background-color: var(--surface-hover-bg);
border-color: var(--surface-hover-border);
}
.surface:focus-visible {
background-color: var(--surface-focus-bg);
border-color: var(--surface-focus-border);
outline: none;
box-shadow: 0 0 0 2px var(--surface-focus-ring);
}
.surface[aria-pressed="true"],
.surface[data-active="true"] {
background-color: var(--surface-active-bg);
border-color: var(--surface-active-border);
}
/* Brand primary CTA — 1차 액션 (Orange solid, 항상 보임) */
.btn-primary {
background-color: var(--brand-primary-bg);
color: var(--brand-primary-fg);
border-radius: var(--density-radius-input);
padding: var(--density-button-padding);
font-weight: 600;
transition:
background-color var(--motion-duration-fast) var(--motion-easing-standard),
box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--brand-primary-bg-hover);
}
.btn-primary:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--surface-focus-ring);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}