@charset "UTF-8";
/**
 * CSS 변수 정의
 * 다크/라이트 테마 색상 및 공통 변수
 */

:root {
    /* 다크 테마 (기본) */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #181818;
    --bg-elevated: #1f1f1f;
    --text-primary: #f5f5f5;
    --text-secondary: #a8a8a8;
    --text-muted: #666;
    --accent: #3b82f6;
    --accent-soft: rgba(59, 130, 246, 0.08);
    --accent-hover: #2563eb;
    --border: #2a2a2a;
    --border-light: #333;

    /* 그림자 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

    /* 둥글기 */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    /* 트랜지션 */
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* 폰트 크기 */
    --font-xs: 12px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 28px;

    /* 페이지 제목 */
    --title-page: clamp(26px, 4vw, 35px);
}

/* 라이트 테마 */
[data-theme="light"] {
    --bg-primary: #fafafa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --text-primary: #111111;
    --text-secondary: #111111;
    --text-muted: #999;
    --border: #e8e8e8;
    --border-light: #f0f0f0;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);
}