/* OKLCH 색상 시스템 - CSS 변수 정의 */

/* 전역 폰트 설정 */
:global(body) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-light);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:global(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
}

:global(.font-thin) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-thin);
}

:global(.font-extralight) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-extralight);
}

:global(.font-light) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-light);
}

:global(.font-normal) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-normal);
}

:global(.font-medium) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-medium);
}

:global(.font-semibold) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-semibold);
}

:global(.font-bold) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-bold);
}

:global(.font-extrabold) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-extrabold);
}

:global(.font-black) {
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-black);
}

:root {
	/* 간격 */
	--spacing-xs: 0.25rem; /* 4px */
	--spacing-sm: 0.5rem; /* 8px */
	--spacing-md: 1rem; /* 16px */
	--spacing-lg: 1.5rem; /* 24px */
	--spacing-xl: 2rem; /* 32px */

	/* 폰트 설정 */
	--font-family-primary:
		'Paperozi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-weight-thin: 100;
	--font-weight-extralight: 200;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-weight-black: 900;

	/* 폰트 크기 */
	--font-size-2xs: 0.63rem; /* 10px */
	--font-size-xs: 0.75rem; /* 12px */
	--font-size-sm: 0.875rem; /* 14px */
	--font-size-md: 1rem; /* 16px */
	--font-size-lg: 1.125rem; /* 18px */
	--font-size-xl: 1.25rem; /* 20px */
	--font-size-2xl: 1.75rem; /* 28px */
	--font-size-3xl: 2.25rem; /* 36px */
	--font-size-4xl: 2.5rem; /* 40px */
	--font-size-5xl: 3rem; /* 48px */
	--font-size-6xl: 3.5rem; /* 56px */
	--font-size-7xl: 4rem; /* 64px */
	--font-size-8xl: 4.5rem; /* 72px */
	--font-size-9xl: 5rem; /* 80px */
	--font-size-10xl: 5.5rem; /* 88px */

	/* 테두리 반지름 */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;

	/* 트랜지션 */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
}

/* 시스템 테마 감지를 위한 라이트/다크 미디어 쿼리를 유지합니다. */

:root {
        color-scheme: light;
        --color-bg-primary: oklch(0.98 0.005 260);
        --color-bg-secondary: oklch(1 0 0);
        --color-bg-modal: oklch(1 0 0);
        --color-bg-card: oklch(1 0 0);
        --color-bg-hover: oklch(0.95 0.005 260);

        --color-text-primary: oklch(0.2 0.01 260);
        --color-text-secondary: oklch(0.4 0.01 260);
		--color-text-tertiary: oklch(0.6 0.01 260);
        --color-text-accent: oklch(0.1 0.01 260);
        --color-text-label: oklch(0.45 0.01 260);

        --color-accent-primary: oklch(0.6 0.15 142);
        --color-accent-secondary: oklch(0.6 0.15 250);
        --color-accent-success: oklch(0.6 0.15 142);
        --color-accent-warning: oklch(0.65 0.15 60);
        --color-accent-error: oklch(0.65 0.15 25);

        --color-border-primary: oklch(0.92 0.005 260);
        --color-border-accent: oklch(0.6 0.15 250);
        --color-border-divider: oklch(0.95 0.005 260);

        --gradient-primary: linear-gradient(135deg, oklch(0.6 0.15 250), oklch(0.6 0.15 142));
        --gradient-background: linear-gradient(135deg, oklch(0.6 0.15 250 / 0.1), oklch(0.6 0.15 142 / 0.1));
        --gradient-header: linear-gradient(135deg, oklch(0.6 0.15 250 / 0.05), oklch(0.6 0.15 142 / 0.05));

        --color-button-primary-bg: oklch(0.6 0.15 250);
        --color-button-primary-hover: oklch(0.55 0.15 250);
        --color-button-primary-text: oklch(0.95 0.01 260);
        --color-button-primary-hover-text: oklch(1 0 0);

        --color-button-secondary-bg: oklch(0.95 0.005 260);
        --color-button-secondary-text: oklch(0.6 0.15 250);

        --color-button-close-bg: transparent;
        --color-button-close-text: oklch(0.5 0.01 260);
        --color-button-close-hover-bg: oklch(0.92 0.005 260);
        --color-button-close-hover-text: oklch(0.2 0.01 260);

        --color-modal-backdrop: oklch(0.5 0 0 / 0.5);
        --color-modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        --color-modal-header-border: oklch(0.92 0.005 260);
        --color-modal-footer-bg: oklch(0.95 0.005 260);

        --color-state-success-bg: oklch(0.6 0.15 142 / 0.1);
        --color-state-success-border: oklch(0.6 0.15 142);
        --color-state-warning-bg: oklch(0.65 0.15 60 / 0.1);
        --color-state-warning-border: oklch(0.65 0.15 60);
        --color-state-error-bg: oklch(0.65 0.15 25 / 0.1);
        --color-state-error-border: oklch(0.65 0.15 25);

        --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-button-hover: 0 4px 12px oklch(0.6 0.15 250 / 0.2);
        --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: light) {
        :root:not([data-theme]) {
                color-scheme: light;
                --color-bg-primary: oklch(0.98 0.005 260);
                --color-bg-secondary: oklch(1 0 0);
                --color-bg-modal: oklch(1 0 0);
                --color-bg-card: oklch(1 0 0);
                --color-bg-hover: oklch(0.95 0.005 260);

                --color-text-primary: oklch(0.2 0.01 260);
                --color-text-secondary: oklch(0.4 0.01 260);
				--color-text-tertiary: oklch(0.6 0.01 260);
                --color-text-accent: oklch(0.1 0.01 260);
                --color-text-label: oklch(0.45 0.01 260);

                --color-accent-primary: oklch(0.6 0.15 142);
                --color-accent-secondary: oklch(0.6 0.15 250);
                --color-accent-success: oklch(0.6 0.15 142);
                --color-accent-warning: oklch(0.65 0.15 60);
                --color-accent-error: oklch(0.65 0.15 25);

                --color-border-primary: oklch(0.92 0.005 260);
                --color-border-accent: oklch(0.6 0.15 250);
                --color-border-divider: oklch(0.95 0.005 260);

                --gradient-primary: linear-gradient(135deg, oklch(0.6 0.15 250), oklch(0.6 0.15 142));
                --gradient-background: linear-gradient(
                        135deg,
                        oklch(0.6 0.15 250 / 0.1),
                        oklch(0.6 0.15 142 / 0.1)
                );
                --gradient-header: linear-gradient(
                        135deg,
                        oklch(0.6 0.15 250 / 0.05),
                        oklch(0.6 0.15 142 / 0.05)
                );

                --color-button-primary-bg: oklch(0.6 0.15 250);
                --color-button-primary-hover: oklch(0.55 0.15 250);
                --color-button-primary-text: oklch(0.95 0.01 260);
                --color-button-primary-hover-text: oklch(1 0 0);

                --color-button-secondary-bg: oklch(0.95 0.005 260);
                --color-button-secondary-text: oklch(0.6 0.15 250);

                --color-button-close-bg: transparent;
                --color-button-close-text: oklch(0.5 0.01 260);
                --color-button-close-hover-bg: oklch(0.92 0.005 260);
                --color-button-close-hover-text: oklch(0.2 0.01 260);

                --color-modal-backdrop: oklch(0.5 0 0 / 0.5);
                --color-modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                --color-modal-header-border: oklch(0.92 0.005 260);
                --color-modal-footer-bg: oklch(0.95 0.005 260);

                --color-state-success-bg: oklch(0.6 0.15 142 / 0.1);
                --color-state-success-border: oklch(0.6 0.15 142);
                --color-state-warning-bg: oklch(0.65 0.15 60 / 0.1);
                --color-state-warning-border: oklch(0.65 0.15 60);
                --color-state-error-bg: oklch(0.65 0.15 25 / 0.1);
                --color-state-error-border: oklch(0.65 0.15 25);

                --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
                --shadow-button-hover: 0 4px 12px oklch(0.6 0.15 250 / 0.2);
                --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
}

@media (prefers-color-scheme: dark) {
        :root:not([data-theme]) {
                color-scheme: dark;
                --color-bg-primary: oklch(0.2 0.01 260);
                --color-bg-secondary: oklch(0.23 0.01 260);
                --color-bg-modal: oklch(0.12 0.01 260);
                --color-bg-card: oklch(0.17 0.01 260);
                --color-bg-hover: oklch(0.2 0.01 260);

                --color-text-primary: oklch(0.88 0 0);
                --color-text-secondary: oklch(0.73 0 0);
				--color-text-tertiary: oklch(0.5 0 0);
                --color-text-accent: oklch(1 0 0);
                --color-text-label: oklch(0.75 0 0);

                --color-accent-primary: oklch(0.7 0.15 142);
                --color-accent-secondary: oklch(0.7 0.15 250);
                --color-accent-success: oklch(0.7 0.15 142);
                --color-accent-warning: oklch(0.7 0.15 60);
                --color-accent-error: oklch(0.7 0.15 25);

                --color-border-primary: oklch(0.27 0.01 260);
                --color-border-accent: oklch(0.4 0.01 260);
                --color-border-divider: oklch(0.27 0.01 260);

                --gradient-primary: linear-gradient(135deg, oklch(0.7 0.2 250), oklch(0.7 0.15 142));
                --gradient-background: linear-gradient(
                        135deg,
                        oklch(0.7 0.2 250 / 0.1),
                        oklch(0.7 0.15 142 / 0.1)
                );
                --gradient-header: linear-gradient(
                        135deg,
                        oklch(0.7 0.2 250 / 0.1),
                        oklch(0.7 0.15 142 / 0.1)
                );

                --color-button-primary-bg: oklch(0.7 0.2 250);
                --color-button-primary-hover: oklch(0.6 0.2 250);
                --color-button-primary-text: oklch(1 0 0);
                --color-button-primary-hover-text: oklch(1 0 0);

                --color-button-secondary-bg: oklch(0.27 0.01 260);
                --color-button-secondary-text: oklch(0.7 0.2 250);

                --color-button-close-bg: transparent;
                --color-button-close-text: oklch(0.63 0 0);
                --color-button-close-hover-bg: oklch(0.27 0.01 260);
                --color-button-close-hover-text: oklch(1 0 0);

                --color-modal-backdrop: oklch(0.3 0 0 / 0.7);
                --color-modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
                --color-modal-header-border: oklch(0.27 0.01 260);
                --color-modal-footer-bg: oklch(0.17 0.01 260);

                --color-state-success-bg: oklch(0.7 0.15 142 / 0.1);
                --color-state-success-border: oklch(0.7 0.2 142);
                --color-state-warning-bg: oklch(0.7 0.15 60 / 0.1);
                --color-state-warning-border: oklch(0.7 0.15 60);
                --color-state-error-bg: oklch(0.7 0.2 25 / 0.1);
                --color-state-error-border: oklch(0.7 0.2 25);

                --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
                --shadow-button-hover: 0 4px 12px oklch(0.7 0.2 250 / 0.3);
                --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.5);
        }
}

:root[data-theme='light'] {
        color-scheme: light;
}

:root[data-theme='dark'] {
        color-scheme: dark;
        --color-bg-primary: oklch(0.2 0.01 260);
        --color-bg-secondary: oklch(0.23 0.01 260);
        --color-bg-modal: oklch(0.12 0.01 260);
        --color-bg-card: oklch(0.17 0.01 260);
        --color-bg-hover: oklch(0.2 0.01 260);

        --color-text-primary: oklch(0.88 0 0);
        --color-text-secondary: oklch(0.73 0 0);
	--color-text-tertiary: oklch(0.5 0 0);
        --color-text-accent: oklch(1 0 0);
        --color-text-label: oklch(0.75 0 0);

        --color-accent-primary: oklch(0.7 0.15 142);
        --color-accent-secondary: oklch(0.7 0.15 250);
        --color-accent-success: oklch(0.7 0.15 142);
        --color-accent-warning: oklch(0.7 0.15 60);
        --color-accent-error: oklch(0.7 0.15 25);

        --color-border-primary: oklch(0.27 0.01 260);
        --color-border-accent: oklch(0.4 0.01 260);
        --color-border-divider: oklch(0.27 0.01 260);

        --gradient-primary: linear-gradient(135deg, oklch(0.7 0.2 250), oklch(0.7 0.15 142));
        --gradient-background: linear-gradient(
                135deg,
                oklch(0.7 0.2 250 / 0.1),
                oklch(0.7 0.15 142 / 0.1)
        );
        --gradient-header: linear-gradient(135deg, oklch(0.7 0.2 250 / 0.1), oklch(0.7 0.15 142 / 0.1));

        --color-button-primary-bg: oklch(0.7 0.2 250);
        --color-button-primary-hover: oklch(0.6 0.2 250);
        --color-button-primary-text: oklch(1 0 0);
        --color-button-primary-hover-text: oklch(1 0 0);

        --color-button-secondary-bg: oklch(0.27 0.01 260);
        --color-button-secondary-text: oklch(0.7 0.2 250);

        --color-button-close-bg: transparent;
        --color-button-close-text: oklch(0.63 0 0);
        --color-button-close-hover-bg: oklch(0.27 0.01 260);
        --color-button-close-hover-text: oklch(1 0 0);

        --color-modal-backdrop: oklch(0.3 0 0 / 0.7);
        --color-modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        --color-modal-header-border: oklch(0.27 0.01 260);
        --color-modal-footer-bg: oklch(0.17 0.01 260);

        --color-state-success-bg: oklch(0.7 0.15 142 / 0.1);
        --color-state-success-border: oklch(0.7 0.2 142);
        --color-state-warning-bg: oklch(0.7 0.15 60 / 0.1);
        --color-state-warning-border: oklch(0.7 0.15 60);
        --color-state-error-bg: oklch(0.7 0.2 25 / 0.1);
        --color-state-error-border: oklch(0.7 0.2 25);

        --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-button-hover: 0 4px 12px oklch(0.7 0.2 250 / 0.3);
        --shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.5);
}