/* 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-rgb: 38, 38, 38; /* RGB values for rgba usage */
    --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: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --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%));

    /* 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%);
    /* 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: hsl(142, 76%, 60%);
    --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%);
    --success-dark: hsl(142, 76%, 40%);

    /* Warning Colors */
    --warning: hsl(48, 96%, 60%);
    --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%);
    --warning-dark: hsl(48, 96%, 40%);

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

    /* Info Colors */
    --info: hsl(199, 89%, 60%);
    --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%);
    --info-dark: hsl(199, 89%, 40%);
    /* 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;
}

/* ==================== Common Components ==================== */

/* Page Header Components */
.page-header {
    margin-bottom: var(--space-2);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted-foreground);
    margin-bottom: var(--space-4);
}

.breadcrumb span:last-child {
    font-weight: var(--font-bold);
    color: var(--black);
}

.breadcrumb .separator {
    color: var(--border);
}

.page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--foreground);
    margin-bottom: var(--space-2);
}

.page-subtitle {
    color: var(--muted-foreground);
}

/* Button Components */
.btn {
    height: 42px;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    white-space: nowrap;
}


.btn i {
    font-size: var(--text-sm);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary,
.bulk-payment-btn,
.btn-add-division {
    background: var(--primary);
    color: var(--white);
    border: none;
}

.btn-primary:hover,
.bulk-payment-btn:hover,
.btn-add-division:hover {
    background: var(--primary-600);
}

.btn-secondary,
.action-button {
    background: var(--white);
    color: var(--foreground);
    border: 1px solid var(--border);
}

.btn-secondary:hover,
.action-button:hover {
    background: var(--accent);
    border-color: var(--border-hover);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-danger:hover {
    background: var(--danger-600);
}

/* Form Components */
.form-control {
    width: 100%;
    height: 42px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: var(--foreground);
    transition: all 0.2s;
    background-color: var(--white);
}

.form-control:hover {
    border-color: #CBD5E0;
    background-color: var(--accent);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-50);
    background-color: var(--white);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
    margin-bottom: var(--space-2);
}

/* Table Components */
.table-base {
    width: 100%;
    border-collapse: collapse;
}

.table-base th,
.table-base td {
    padding: var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}

.table-base th {
    background: var(--accent);
    font-weight: var(--font-medium);
    color: var(--foreground);
    white-space: nowrap;
}

.table-base tr:hover td {
    background: var(--accent);
}

/* Card Components */
.card-base {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--foreground);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.card-footer {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* 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);
}

/* ==================== SweetAlert2 Modal Optimization ==================== */



.swal2-popup.swal2-modal-compact {
    width: 560px !important;
    max-width: 90vw !important;
}

.swal2-popup.swal2-modal-medium {
    width: 680px !important;
    max-width: 90vw !important;
}

/* Modal Form Layout */
.swal2-html-container .modal-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    text-align: left;
    max-height: 65vh;
    overflow-y: auto;
    padding: 0.25rem;
}

/* Form Group Styles */
.swal2-html-container .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.swal2-html-container .form-group.span-2 {
    grid-column: span 2;
}

.swal2-html-container .form-group label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);
    margin: 0;
}

/* Input/Select Unified Styles */
.swal2-html-container .modal-form .swal2-input,
.swal2-html-container .modal-form select {
    width: 100% !important;
    height: 40px !important;
    padding: 0.5rem 0.75rem !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--text-sm) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background-color: var(--white) !important;
    transition: all 0.2s !important;
}

.swal2-html-container .modal-form textarea.swal2-input {
    height: 72px !important;
    min-height: 72px !important;
    resize: vertical !important;
}

/* Hover/Focus States */
.swal2-html-container .modal-form .swal2-input:hover,
.swal2-html-container .modal-form select:hover {
    border-color: var(--border-hover) !important;
    background-color: var(--accent) !important;
}

.swal2-html-container .modal-form .swal2-input:focus,
.swal2-html-container .modal-form select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--primary-50) !important;
    background-color: var(--white) !important;
    outline: none !important;
}

/* Select Arrow Styling */
.swal2-html-container .modal-form select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A5568'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 20px;
    padding-right: 2.5rem !important;
}

/* Responsive Layout */
@media (max-width: 640px) {
    .swal2-html-container .modal-form {
        grid-template-columns: 1fr;
    }

    .swal2-html-container .form-group.span-2 {
        grid-column: span 1;
    }
}

::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #888;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

/* ==================== 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) {
    .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;
    }
}