dpot-frontend/app/globals.scss

@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: 215 100% 50%;
        --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-normal: #f1f1f1;
		--text-primary: #141414;
		--text-secondary: #666;
		--text-muted: #999;
		--text-link: #0060a9;
		--text-link-hover: #c7511f;
        --text-head: #e5e5e5;
		--bg-page: #fff;
		--bg-elevated: #f9f9f9;
		--bg-subtle: #f4f4f4;
		--bg-input: #fff;
        --bg-head: #007bc3;
        --bg-icon: #004f7c;
		--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;
        --outline-default: #c2c2c2;
		--fg-default: #0f0f0f;
		--color-blue: #3b82f6;
		--color-blue-hover: #2563eb;
		--color-blue-bg: rgba(59, 130, 246, 0.06);
		--color-danger-bg: #fee2e2;
		--color-danger-border: #fca5a5;
		--color-success-bg: #dcfce7;
		--color-success-text: #16a34a;
		--bg-subtle-hover: rgba(0, 0, 0, 0.05);
		--sidebar-background: 0 0% 98%;
		--sidebar-foreground: 240 5.3% 26.1%;
		--sidebar-primary: 240 5.9% 10%;
		--sidebar-primary-foreground: 0 0% 98%;
		--sidebar-accent: 240 4.8% 95.9%;
		--sidebar-accent-foreground: 240 5.9% 10%;
		--sidebar-border: 220 13% 91%;
		--sidebar-ring: 217.2 91.2% 59.8%;
	}

  	.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: 215 100% 60%;
        --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-normal: #f1f1f1;
		--text-primary: #cacaca;
		--text-secondary: #a3a3a3;
		--text-muted: #737373;
		--text-link: #60a5fa;
		--text-link-hover: #f59e0b;
        --text-head: #cacaca;
		--bg-page: #171717;
		--bg-elevated: #1e1e1e;
		--bg-subtle: #262626;
		--bg-input: #262626;
        --bg-head: #5603a3;
        --bg-icon: #3c00aa;
		--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;
		--fg-default: #f1f1f1;
		--color-blue: #60a5fa;
		--color-blue-hover: #3b82f6;
		--color-blue-bg: rgba(96, 165, 250, 0.1);
		--color-danger-bg: #3f1212;
		--color-danger-border: #7f1d1d;
		--color-success-bg: #0f2d1a;
		--color-success-text: #4ade80;
		--bg-subtle-hover: rgba(255, 255, 255, 0.05);
		--sidebar-background: 240 5.9% 10%;
		--sidebar-foreground: 240 4.8% 95.9%;
		--sidebar-primary: 224.3 76.3% 48%;
		--sidebar-primary-foreground: 0 0% 100%;
		--sidebar-accent: 240 3.7% 15.9%;
		--sidebar-accent-foreground: 240 4.8% 95.9%;
		--sidebar-border: 240 3.7% 15.9%;
		--sidebar-ring: 217.2 91.2% 59.8%;
    }
}

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

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

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;
	line-height: inherit;
    transition: border-color 0.3s ease;

    &:focus,
    &:hover {
        outline: none;
        border-color: var(--text-link);
    }

    &:focus {
        -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);
    }
}

// shadcn 폼 컨트롤 포커스 글로우 (Select trigger, Checkbox 등)
[role="input"]
[role="combobox"],
[role="checkbox"] {
    transition: border-color 0.3s ease;

    &:focus,
    &:hover {
        outline: none;
        border-color: var(--text-link);
    }

    &:focus {
        -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);
    }
}