@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    min-height: 100vh;
    width: 100%;
    min-width: 355px;
}

body {
	min-height: 100vh;
	width: 100%;
	min-width: 355px;
	overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

@layer base {
  	:root {
        --background: 0 0% 100%;
        --foreground: 0 0% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 3.9%;
        --primary: 0 0% 9%;
        --primary-foreground: 0 0% 98%;
        --secondary: 0 0% 96.1%;
        --secondary-foreground: 0 0% 9%;
        --muted: 0 0% 96.1%;
        --muted-foreground: 0 0% 45.1%;
        --accent: 0 0% 96.1%;
        --accent-foreground: 0 0% 9%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 89.8%;
        --input: 0 0% 89.8%;
        --ring: 0 0% 3.9%;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --radius: 0.5rem;
		--crypto-up: 0 70% 55%;
		--crypto-down: 220 70% 55%;
		--crypto-neutral: 0 0% 50%;

		/* 시맨틱 색상 변수 */
		--text-primary: #333;
		--text-secondary: #666;
		--text-muted: #999;
		--text-link: #0060a9;
		--text-link-hover: #c7511f;
		--bg-page: #fff;
		--bg-elevated: #f9f9f9;
		--bg-subtle: #f4f4f4;
		--bg-input: #fff;
		--border-default: #eaeaea;
		--border-light: #eee;
		--border-strong: #ccc;
		--shadow-color: rgba(0,0,0,0.12);
		--brand-orange: #F7931A;
		--brand-orange-hover: #e5851a;
		--color-danger: #d51b28;
		--color-success: #4caf50;
		--color-warning-bg: #fefce8;
		--color-warning-text: #92400e;
		--overlay-color: rgba(0,0,0,0.5);
		--sidebar-active-bg: #fff3e0;
		--list-row-active: #faffd1;
		--btn-default-border: #b3b3b3;
		--btn-default-hover: #e3e3e3;
		--btn-submit-shadow: #d38817;
	}
  	.dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 0 0% 9%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 14.9%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 0% 83.1%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
		--crypto-up: 0 70% 60%;
		--crypto-down: 220 70% 60%;
		--crypto-neutral: 0 0% 63.9%;

		/* 시맨틱 색상 변수 */
		--text-primary: #e5e5e5;
		--text-secondary: #a3a3a3;
		--text-muted: #737373;
		--text-link: #60a5fa;
		--text-link-hover: #f59e0b;
		--bg-page: #171717;
		--bg-elevated: #1e1e1e;
		--bg-subtle: #262626;
		--bg-input: #262626;
		--border-default: #333;
		--border-light: #2a2a2a;
		--border-strong: #444;
		--shadow-color: rgba(0,0,0,0.4);
		--brand-orange: #F7931A;
		--brand-orange-hover: #f59e0b;
		--color-danger: #ef4444;
		--color-success: #22c55e;
		--color-warning-bg: #422006;
		--color-warning-text: #fef08a;
		--overlay-color: rgba(0,0,0,0.7);
		--sidebar-active-bg: #3d2800;
		--list-row-active: #2a2a00;
		--btn-default-border: #555;
		--btn-default-hover: #333;
		--btn-submit-shadow: #b8700f;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}

// 웹 에디터 글씨 크기기
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: attr(data-value) !important;
    font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before {
    content: "11px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="13px"]::before {
    content: "13px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="15px"]::before {
    content: "15px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="19px"]::before {
    content: "19px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: "24px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "28px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "30px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "34px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "38px" !important;
}
.ql-snow .ql-toolbar button.ql-file {
	background: transparent;
	border: none;
	padding: 0;
}

select, input, textarea {
    font-size: 1rem;
    padding: 5px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    transition: border-color 0.3s ease;
	line-height: inherit;

    &:focus {
        outline: none;
        border-color: var(--text-link);
        -webkit-box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.05), 0 0 4px rgba(44, 112, 170, 0.8);
        box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.05), 0 0 4px rgba(44, 112, 170, 0.8);
    }
}

// 모든 버튼 속성값
.btn {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 4px;
	height: auto;
    text-align: center;
    cursor: pointer;
}

// 기본 버튼
.btn-default {
    color: var(--text-primary);
    background: var(--bg-subtle);
    border: 1px solid var(--btn-default-border);
    -webkit-box-shadow: inset 0 -1px 0 0 var(--btn-default-border);
    box-shadow: inset 0 -1px 0 0 var(--btn-default-border);

    &:hover {
        background: var(--btn-default-hover);
    }
}

// 제출 버튼
.btn-submit {
    color: #fff;
    background: var(--brand-orange);
	border: 1px solid var(--brand-orange);
    -webkit-box-shadow: inset 0 -2px 0 0 var(--btn-submit-shadow);
    box-shadow: inset 0 -2px 0 0 var(--btn-submit-shadow);

    &:hover {
        background: var(--brand-orange-hover);
        border-color: var(--brand-orange-hover);
    }
}