/* Layout */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 5%, 2rem);
}

.container-fluid {
    width: 100%;
    margin: 0 auto;
}

.root-layout {
    width: 100%;
    min-height: calc(100vh - 70px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

:root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Typography */
    --text-xs: clamp(0.75rem, 0.875vw, 0.875rem);
    --text-sm: clamp(0.875rem, 1vw, 1rem);
    --text-base: clamp(1rem, 1.125vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.25vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 2vw, 2rem);
    --text-3xl: clamp(2rem, 2.5vw, 2.5rem);
    --text-4xl: clamp(2.5rem, 3vw, 3rem);

    /* Font Weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Primary Colors */
    --primary-h: 220;
    --primary-s: 15%;
    --primary-l: 50%;
    --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
    --primary-dark: hsl(var(--primary-h) var(--primary-s) 40%);
    --primary-light: hsl(var(--primary-h) var(--primary-s) 90%);
    --primary-50: hsl(var(--primary-h) var(--primary-s) 95%);
    --primary-100: hsl(var(--primary-h) var(--primary-s) 90%);
    --primary-200: hsl(var(--primary-h) var(--primary-s) 80%);
    --primary-300: hsl(var(--primary-h) var(--primary-s) 70%);
    --primary-400: hsl(var(--primary-h) var(--primary-s) 60%);
    --primary-500: var(--primary);
    --primary-600: hsl(var(--primary-h) var(--primary-s) 40%);
    --primary-700: hsl(var(--primary-h) var(--primary-s) 30%);
    --primary-800: hsl(var(--primary-h) var(--primary-s) 20%);
    --primary-900: hsl(var(--primary-h) var(--primary-s) 10%);

    /* Monochrome Colors */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --black: #000000;

    /* Semantic Colors */
    --background: var(--white);
    --foreground: var(--gray-900);
    --muted: var(--gray-100);
    --muted-foreground: var(--gray-500);

    /* Border Colors */
    --border: var(--gray-200);
    --border-hover: var(--gray-300);

    /* Shadow Colors */
    --shadow-color: 0deg 0% 0%;
    --shadow-strength: 2%;
    --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
    --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
    --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));

    /* System Colors */
    --success: hsl(142, 76%, 36%);
    --warning: hsl(48, 96%, 53%);
    --error: hsl(0, 84%, 60%);
    --info: hsl(199, 89%, 48%);
    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;

    /* Grid */
    --grid-cols-1: repeat(1, minmax(0, 1fr));
    --grid-cols-2: repeat(2, minmax(0, 1fr));
    --grid-cols-3: repeat(3, minmax(0, 1fr));
    --grid-cols-4: repeat(4, minmax(0, 1fr));
    --grid-cols-6: repeat(6, minmax(0, 1fr));
    --grid-cols-12: repeat(12, minmax(0, 1fr));
    --grid-cols-auto-fit: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

    /* Aspect Ratios */
    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-portrait: 3 / 4;

    /* Filters */
    --blur-sm: blur(4px);
    --blur-base: blur(8px);
    --blur-lg: blur(16px);

    /* Accent Colors */
    --accent-h: 210;
    --accent-s: 20%;
    --accent-l: 98%;
    --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
    --accent-foreground: hsl(var(--accent-h) var(--accent-s) 30%);
    --accent-50: hsl(var(--accent-h) var(--accent-s) 95%);
    --accent-100: hsl(var(--accent-h) var(--accent-s) 90%);
    --accent-200: hsl(var(--accent-h) var(--accent-s) 80%);
    --accent-300: hsl(var(--accent-h) var(--accent-s) 70%);
    --accent-400: hsl(var(--accent-h) var(--accent-s) 60%);
    --accent-500: var(--accent);
    --accent-600: hsl(var(--accent-h) var(--accent-s) 40%);
    --accent-700: hsl(var(--accent-h) var(--accent-s) 30%);
    --accent-800: hsl(var(--accent-h) var(--accent-s) 20%);
    --accent-900: hsl(var(--accent-h) var(--accent-s) 10%);

    /* Success Colors */
    --success-50: hsl(142, 76%, 95%);
    --success-100: hsl(142, 76%, 90%);
    --success-200: hsl(142, 76%, 80%);
    --success-300: hsl(142, 76%, 70%);
    --success-400: hsl(142, 76%, 60%);
    --success-500: hsl(142, 76%, 50%);
    --success-600: hsl(142, 76%, 40%);
    --success-700: hsl(142, 76%, 30%);
    --success-800: hsl(142, 76%, 20%);
    --success-900: hsl(142, 76%, 10%);

    /* Warning Colors */
    --warning-50: hsl(48, 96%, 95%);
    --warning-100: hsl(48, 96%, 90%);
    --warning-200: hsl(48, 96%, 80%);
    --warning-300: hsl(48, 96%, 70%);
    --warning-400: hsl(48, 96%, 60%);
    --warning-500: hsl(48, 96%, 50%);
    --warning-600: hsl(48, 96%, 40%);
    --warning-700: hsl(48, 96%, 30%);
    --warning-800: hsl(48, 96%, 20%);
    --warning-900: hsl(48, 96%, 10%);

    /* Error Colors */
    --error-50: hsl(0, 84%, 95%);
    --error-100: hsl(0, 84%, 90%);
    --error-200: hsl(0, 84%, 80%);
    --error-300: hsl(0, 84%, 70%);
    --error-400: hsl(0, 84%, 60%);
    --error-500: hsl(0, 84%, 50%);
    --error-600: hsl(0, 84%, 40%);
    --error-700: hsl(0, 84%, 30%);
    --error-800: hsl(0, 84%, 20%);
    --error-900: hsl(0, 84%, 10%);

    /* Info Colors */
    --info-50: hsl(199, 89%, 95%);
    --info-100: hsl(199, 89%, 90%);
    --info-200: hsl(199, 89%, 80%);
    --info-300: hsl(199, 89%, 70%);
    --info-400: hsl(199, 89%, 60%);
    --info-500: hsl(199, 89%, 50%);
    --info-600: hsl(199, 89%, 40%);
    --info-700: hsl(199, 89%, 30%);
    --info-800: hsl(199, 89%, 20%);
    --info-900: hsl(199, 89%, 10%);

    /* Z-Index Layers */
    --layer-below: -1;
    --layer-1: 10;
    --layer-2: 20;
    --layer-3: 30;
    --layer-4: 40;
    --layer-5: 50;
    --layer-top: 999;
    --layer-modal: 1000;
    --layer-tooltip: 1100;

    /* Animation Easings */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-linear: linear;

    /* Focus Ring */
    --ring-color: hsl(var(--primary-h) var(--primary-s) 50% / 0.3);
    --ring-width: 3px;
    --ring-offset-width: 2px;
    --ring-offset-color: white;

    /* Extended Semantic Text Colors */
    --color-text-primary: #1f2937;
    --color-text-secondary: #6c757d;
    --color-text-tertiary: #999999;
    --color-text-muted: #cbd5e0;
    --color-text-light: #f9fafb;
    --color-text-dark: #1f2937;

    /* Extended Border Colors */
    --color-border: #e2e8f0;
    --color-border-light: #f7fafc;
    --color-border-dark: #cbd5e0;
    --color-border-input: #e2e8f0;

    /* Extended Background Colors */
    --color-bg-light: #f7fafc;
    --color-bg-muted: #f8fafc;
    --color-bg-card: #ffffff;
    --color-bg-hover: rgba(0, 0, 0, 0.05);
    --color-bg-dark: #111827;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);

    /* Responsive Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1200px;

    /* Common Link Colors */
    --color-link: #3182ce;
    --color-link-hover: #2c5282;
    --color-link-visited: #6b46c1;

    /* Gradient Colors (commonly used in designs) */
    --gradient-purple-start: #667eea;
    --gradient-purple-end: #764ba2;
    --gradient-blue-start: #4facfe;
    --gradient-blue-end: #00f2fe;

    /* Step Colors */
    --step-blue: #4facfe;
    --step-orange: #ff7300;
    --step-green: #00c9a7;
    --step-purple: #6b4ba2;
}

/* Focus Styles */
.focus-ring {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color),
    0 0 0 calc(var(--ring-width) + var(--ring-offset-width)) var(--ring-color);
}


/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-600);
}

/* ==================== Sub Navigation - Horizontal Scroll ==================== */

/* Sub Navigation Wrapper */
.sub-nav-wrapper {
    position: relative;
    width: 100%;
}

/* Sub Navigation - Updated Design */
.sub-nav {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--gray-100);
    border-radius: var(--radius-xl);

    /* 가로 스크롤 활성화 */
    overflow-x: auto;
    scroll-behavior: smooth;

    /* 스크롤바 숨기기 */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* 드래그 커서 */
    cursor: grab;
}

.sub-nav::-webkit-scrollbar {
    display: none;
}

.sub-nav:active {
    cursor: grabbing;
}

.sub-nav .nav-item {
    padding: 10px 24px;
    color: var(--gray-500);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-lg);
    transition: all var(--duration-200) var(--ease-in-out);
    position: relative;
    background: transparent;

    /* 아이템이 줄어들지 않도록 */
    flex-shrink: 0;
    white-space: nowrap;
}

.sub-nav .nav-item:hover {
    color: var(--black);
    background: rgb(0 0 0 / 0.05);
}

.sub-nav .nav-item.active {
    color: var(--black);
    background: var(--white);
    font-weight: 600;
    box-shadow: 0 2px var(--space-2) rgba(0, 0, 0, 0.08);
}

.sub-nav .nav-item.active::after {
    display: none;
}

.sub-nav .nav-item.active::before {
    content: '';
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-1);
    height: var(--space-1);
    background: var(--black);
    border-radius: var(--radius-full);
}

/* 화살표 네비게이션 버튼 */
.sub-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: var(--layer-1);
    transition: all var(--duration-200) var(--ease-in-out);
    opacity: 0;
    pointer-events: none;
}

.sub-nav-wrapper:hover .sub-nav-arrow {
    opacity: 1;
    pointer-events: auto;
}

.sub-nav-arrow:hover {
    background: var(--gray-50);
    border-color: var(--border-hover);
}

.sub-nav-arrow.left {
    left: -16px;
}

.sub-nav-arrow.right {
    right: -16px;
}

.sub-nav-arrow:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.sub-nav-arrow i {
    font-size: 14px;
    color: var(--gray-700);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .root-layout {
        display: block;
        align-items: stretch;
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .sub-nav {
        padding: var(--space-3);
        gap: var(--space-1);
    }

    .sub-nav .nav-item {
        padding: var(--space-2) var(--space-4);
    }

    /* 모바일에서는 화살표 숨김 */
    .sub-nav-arrow {
        display: none;
    }
}