@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;
	}
  	.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%;
    }
}

@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: #333333;
    border: 1px solid #9c9c9c;
    border-radius: 3px;
    transition: border-color 0.3s ease;
	line-height: inherit;

    &:focus {
        outline: none;
        border-color: #9c9c9c;
        -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: #333;
    background: #f1f1f1;
    border: 1px solid #b3b3b3;
    -webkit-box-shadow: inset 0 -1px 0 0 #b3b3b3;
    box-shadow: inset 0 -1px 0 0 #b3b3b3;

    &:hover {
        background: #e3e3e3;
    }
}

// 제출 버튼
.btn-submit {
    color: #fff;
    background: #F7931A;
	border: 1px solid #f1880f;
    -webkit-box-shadow: inset 0 -2px 0 0 #d38817;
    box-shadow: inset 0 -2px 0 0 #d38817;

    &:hover {
        background: #E07D0A;
        border-color: #E07D0A;
    }
}