/* ============================================================================
   IONEWORKS UI (IUI) DESIGN SYSTEM - 완전한 공통 CSS 라이브러리
   IONEWORKS에서 개발한 완전 독립형 CSS 프레임워크
   
   목차:
   1. CSS Variables (디자인 토큰)
   2. Reset & Base Styles
   3. Layout System
   4. Typography
   5. Buttons
   6. Form Controls
   7. Navigation
   8. Cards & Containers
   9. Tables
   10. Modals & Dialogs
   11. Alerts & Notifications
   12. Loading & Progress
   13. Pagination (NEW)
   14. Utility Classes
   15. Responsive Design
   16. JavaScript Components
   17. Data Table
   18. Advanced Animations
   19. 게시판 전용 확장
   ============================================================================ */

/* ============================================================================
   1. CSS VARIABLES (디자인 토큰)
   ============================================================================ */
:root {
    /* === 색상 팔레트 === */
    --iui-neutral-foreground-rest: #323130;
    --iui-neutral-foreground-hover: #201f1e;
    --iui-neutral-foreground-pressed: #16100e;
    --iui-neutral-foreground-disabled: #a19f9d;
    
    --iui-neutral-background-1: #ffffff;
    --iui-neutral-background-2: #faf9f8;
    --iui-neutral-background-3: #f3f2f1;
    --iui-neutral-background-4: #edebe9;
    --iui-neutral-background-disabled: #f3f2f1;
    
    --iui-neutral-stroke-1: #d2d0ce;
    --iui-neutral-stroke-2: #edebe9;
    --iui-neutral-stroke-disabled: #e1dfdd;
    
    /* === 브랜드 색상 === */
    --iui-accent-foreground-rest: #0078d4;
    --iui-accent-foreground-hover: #106ebe;
    --iui-accent-foreground-pressed: #005a9e;
    --iui-accent-background: #deecf9;
    
    /* === 시맨틱 색상 === */
    --iui-success-foreground: #107c10;
    --iui-success-background: #dff6dd;
    --iui-warning-foreground: #797775;
    --iui-warning-background: #fff4ce;
    --iui-danger-foreground: #d13438;
    --iui-danger-background: #fde7e9;
    --iui-info-foreground: #0078d4;
    --iui-info-background: #deecf9;
    
    /* === 모서리 반경 === */
    --iui-corner-radius-small: 2px;
    --iui-corner-radius-medium: 4px;
    --iui-corner-radius-large: 8px;
    --iui-corner-radius-xlarge: 12px;
    
    /* === 간격 시스템 === */
    --iui-spacing-xs: 4px;
    --iui-spacing-sm: 8px;
    --iui-spacing-md: 12px;
    --iui-spacing-lg: 16px;
    --iui-spacing-xl: 24px;
    --iui-spacing-xxl: 32px;
    --iui-spacing-xxxl: 48px;
    
    /* === 애니메이션 === */
    --iui-duration-ultra-fast: 0.05s;
    --iui-duration-faster: 0.1s;
    --iui-duration-fast: 0.15s;
    --iui-duration-normal: 0.2s;
    --iui-duration-slow: 0.3s;
    --iui-duration-slower: 0.5s;
    
    /* === Z-Index === */
    --iui-z-dropdown: 1000;
    --iui-z-sticky: 1020;
    --iui-z-fixed: 1030;
    --iui-z-modal-backdrop: 1040;
    --iui-z-modal: 1050;
    --iui-z-popover: 1060;
    --iui-z-tooltip: 1070;
    --iui-z-toast: 1080;
}

/* ============================================================================
   2. RESET & BASE STYLES
   ============================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 14px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC',
               'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial,
               'Apple SD Gothic Neo', 'Malgun Gothic',
               'Hiragino Sans', 'Meiryo', 'PingFang SC',
               sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--iui-neutral-foreground-rest);
    background-color: var(--iui-neutral-background-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   3. LAYOUT SYSTEM
   ============================================================================ */

/* === 컨테이너 === */
.iui-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--iui-spacing-xl);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.iui-container-fluid {
    width: 100%;
    padding: 0 var(--iui-spacing-xl);
}

.iui-container-narrow {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--iui-spacing-xl);
}

/* === 그리드 시스템 === */
.iui-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--iui-spacing-sm));
}

.iui-col {
    flex: 1;
    padding: 0 var(--iui-spacing-sm);
}

.iui-col-auto {
    flex: 0 0 auto;
    width: auto;
    padding: 0 var(--iui-spacing-sm);
}

.iui-col-1 { flex: 0 0 calc(8.333333% - 14px); max-width: calc(8.333333% - 14px); }
.iui-col-2 { flex: 0 0 calc(16.666667% - 13px); max-width: calc(16.666667% - 13px); }
.iui-col-3 { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); }
.iui-col-4 { flex: 0 0 calc(33.333333% - 11px); max-width: calc(33.333333% - 11px); }
.iui-col-5 { flex: 0 0 calc(41.666667% - 10px); max-width: calc(41.666667% - 10px); }
.iui-col-6 { flex: 0 0 calc(50% - 9px); max-width: calc(50% - 9px); }
.iui-col-7 { flex: 0 0 calc(58.333333% - 8px); max-width: calc(58.333333% - 8px); }
.iui-col-8 { flex: 0 0 calc(66.666667% - 8px); max-width: calc(66.666667% - 8px); }
.iui-col-9 { flex: 0 0 calc(75% - 8px); max-width: calc(75% - 8px); }
.iui-col-10 { flex: 0 0 calc(83.333333% - 8px); max-width: calc(83.333333% - 8px); }
.iui-col-11 { flex: 0 0 calc(91.666667% - 8px); max-width: calc(91.666667% - 8px); }
.iui-col-12 { flex: 0 0 calc(100% - 8px); max-width: calc(100% - 8px); }

/* 왼쪽 컬럼 뒤에만 여백을 줘서 가운데만 띄우기 */
[class*="iui-col-"]:not(:last-child) {
  margin-right: 16px;
}

/* === Flexbox 유틸리티 === */
.iui-flex { display: flex; }
.iui-flex-column { flex-direction: column; }
.iui-flex-row { flex-direction: row; }
.iui-flex-wrap { flex-wrap: wrap; }
.iui-flex-nowrap { flex-wrap: nowrap; }
.iui-justify-start { justify-content: flex-start; }
.iui-justify-center { justify-content: center; }
.iui-justify-end { justify-content: flex-end; }
.iui-justify-between { justify-content: space-between; }
.iui-justify-around { justify-content: space-around; }
.iui-align-start { align-items: flex-start; }
.iui-align-center { align-items: center; }
.iui-align-end { align-items: flex-end; }
.iui-align-stretch { align-items: stretch; }

/* ============================================================================
   4. TYPOGRAPHY
   ============================================================================ */
.iui-text-xs { font-size: 0.75rem; line-height: 1.2; }
.iui-text-sm { font-size: 0.875rem; line-height: 1.3; }
.iui-text-base { font-size: 1rem; line-height: 1.4; }
.iui-text-lg { font-size: 1.125rem; line-height: 1.4; }
.iui-text-xl { font-size: 1.25rem; line-height: 1.4; }
.iui-text-2xl { font-size: 1.5rem; line-height: 1.3; }
.iui-text-3xl { font-size: 2rem; line-height: 1.2; }
.iui-text-4xl { font-size: 2.5rem; line-height: 1.1; }

.iui-font-light { font-weight: 300; }
.iui-font-normal { font-weight: 400; }
.iui-font-medium { font-weight: 500; }
.iui-font-semibold { font-weight: 600; }
.iui-font-bold { font-weight: 700; }

.iui-text-left { text-align: left; }
.iui-text-center { text-align: center; }
.iui-text-right { text-align: right; }

.iui-text-primary { 
    color: var(--iui-neutral-foreground-rest);
    text-decoration: none;
    font-weight: 500;
}

.iui-text-primary:hover {
    text-decoration: underline;
}

.iui-text-secondary { color: #605e5c; }
.iui-text-disabled { color: var(--iui-neutral-foreground-disabled); }
.iui-text-accent { color: var(--iui-accent-foreground-rest); }
.iui-text-success { color: var(--iui-success-foreground); }
.iui-text-warning { color: var(--iui-warning-foreground); }
.iui-text-danger { color: var(--iui-danger-foreground); }

/* === 제목 스타일 === */
.iui-title-1 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--iui-spacing-xl) 0;
    color: var(--iui-neutral-foreground-rest);
    margin-top: 1rem;
}

.iui-title-2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--iui-spacing-lg) 0;
    color: var(--iui-neutral-foreground-rest);
    margin-top: 1rem;
}

.iui-title-3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--iui-spacing-lg) 0;
    color: var(--iui-neutral-foreground-rest);
    margin-top: 1rem;
}

.iui-subtitle {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 var(--iui-spacing-md) 0;
    color: #605e5c;
}

/* ============================================================================
   5. BUTTONS
   ============================================================================ */
.iui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--iui-spacing-sm);
    height: 32px;
    padding: 0 var(--iui-spacing-lg);
    border: 1px solid var(--iui-neutral-stroke-1);
    border-radius: var(--iui-corner-radius-medium);
    background: var(--iui-neutral-background-1);
    color: var(--iui-neutral-foreground-rest);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--iui-duration-faster) ease;
    user-select: none;
    white-space: nowrap;
}

.iui-button:hover {
    background: var(--iui-neutral-background-3);
    border-color: var(--iui-neutral-stroke-1);
    text-decoration: none;
}

.iui-button:active {
    background: #e1dfdd;
    transform: translateY(1px);
}

.iui-button:focus {
    outline: 2px solid var(--iui-accent-foreground-rest);
    outline-offset: 2px;
}

.iui-button:disabled {
    background: var(--iui-neutral-background-disabled);
    border-color: var(--iui-neutral-stroke-disabled);
    color: var(--iui-neutral-foreground-disabled);
    cursor: not-allowed;
    transform: none;
}

/* === 버튼 변형 === */
.iui-button.primary {
    background: var(--iui-accent-foreground-rest);
    border-color: var(--iui-accent-foreground-rest);
    color: white;
}

.iui-button.primary:hover {
    background: var(--iui-accent-foreground-hover);
    border-color: var(--iui-accent-foreground-hover);
    color: white;
}

.iui-button.primary:active {
    background: var(--iui-accent-foreground-pressed);
    border-color: var(--iui-accent-foreground-pressed);
    color: white;
}

.iui-button.success {
    background: var(--iui-success-foreground);
    border-color: var(--iui-success-foreground);
    color: white;
}

.iui-button.success:hover {
    background: #0e6e0e;
    border-color: #0e6e0e;
    color: white;
}

.iui-button.warning {
    background: var(--iui-warning-foreground);
    border-color: var(--iui-warning-foreground);
    color: white;
}

.iui-button.warning:hover {
    background: #6b6b69;
    border-color: #6b6b69;
    color: white;
}

.iui-button.danger {
    background: var(--iui-danger-foreground);
    border-color: var(--iui-danger-foreground);
    color: white;
}

.iui-button.danger:hover {
    background: #b02e31;
    border-color: #b02e31;
    color: white;
}

/* === 버튼 크기 === */
.iui-button.small {
    height: 24px;
    padding: 0 var(--iui-spacing-sm);
    font-size: 0.75rem;
}

.iui-button.large {
    height: 40px;
    padding: 0 var(--iui-spacing-xl);
    font-size: 1rem;
}

/* === 버튼 스타일 === */
.iui-button.outline {
    background: transparent;
    border: 1px solid var(--iui-accent-foreground-rest);
    color: var(--iui-accent-foreground-rest);
}

.iui-button.outline:hover {
    background: var(--iui-accent-background);
}

.iui-button.ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--iui-accent-foreground-rest);
}

.iui-button.ghost:hover {
    background: var(--iui-accent-background);
}

.iui-button.link {
    background: transparent;
    border: none;
    color: var(--iui-accent-foreground-rest);
    text-decoration: underline;
}

.iui-button.link:hover {
    background: transparent;
    color: var(--iui-accent-foreground-hover);
}

/* === 버튼 그룹 === */
.iui-button-group {
    display: inline-flex;
    border-radius: var(--iui-corner-radius-medium);
    overflow: hidden;
}

.iui-button-group .iui-button {
    border-radius: 0;
    border-right-width: 0;
}

.iui-button-group .iui-button:first-child {
    border-top-left-radius: var(--iui-corner-radius-medium);
    border-bottom-left-radius: var(--iui-corner-radius-medium);
}

.iui-button-group .iui-button:last-child {
    border-top-right-radius: var(--iui-corner-radius-medium);
    border-bottom-right-radius: var(--iui-corner-radius-medium);
    border-right-width: 1px;
}

/* ============================================================================
   6. FORM CONTROLS
   ============================================================================ */

/* === 입력 필드 === */
.iui-input {
    width: 100%;
    height: 32px;
    padding: 0 var(--iui-spacing-md);
    border: 1px solid var(--iui-neutral-stroke-1);
    border-radius: var(--iui-corner-radius-medium);
    background: var(--iui-neutral-background-1);
    color: var(--iui-neutral-foreground-rest);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    transition: all var(--iui-duration-faster) ease;
}

.iui-input:focus {
    outline: 2px solid var(--iui-accent-foreground-rest);
    outline-offset: -2px;
    border-color: var(--iui-accent-foreground-rest);
}

.iui-input:disabled {
    background: var(--iui-neutral-background-disabled);
    border-color: var(--iui-neutral-stroke-disabled);
    color: var(--iui-neutral-foreground-disabled);
    cursor: not-allowed;
}

.iui-input::placeholder {
    color: #a19f9d;
}

.iui-input.is-invalid {
    border-color: var(--iui-danger-foreground);
}

.iui-input.is-valid {
    border-color: var(--iui-success-foreground);
}

/* === 텍스트 영역 === */
.iui-textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--iui-spacing-md);
    border: 1px solid var(--iui-neutral-stroke-1);
    border-radius: var(--iui-corner-radius-medium);
    background: var(--iui-neutral-background-1);
    color: var(--iui-neutral-foreground-rest);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    resize: vertical;
    transition: all var(--iui-duration-faster) ease;
}

.iui-textarea:focus {
    outline: 2px solid var(--iui-accent-foreground-rest);
    outline-offset: -2px;
    border-color: var(--iui-accent-foreground-rest);
}

/* === 선택 박스 === */
.iui-select {
    width: 100%;
    height: 32px;
    padding: 0 var(--iui-spacing-md);
    border: 1px solid var(--iui-neutral-stroke-1);
    border-radius: var(--iui-corner-radius-medium);
    background: var(--iui-neutral-background-1);
    color: var(--iui-neutral-foreground-rest);
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--iui-duration-faster) ease;
}

.iui-select:focus {
    outline: 2px solid var(--iui-accent-foreground-rest);
    outline-offset: -2px;
    border-color: var(--iui-accent-foreground-rest);
}

/* === 체크박스 === */
.iui-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--iui-spacing-sm);
    cursor: pointer;
    user-select: none;
}

.iui-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--iui-neutral-stroke-1);
    border-radius: var(--iui-corner-radius-small);
    background: var(--iui-neutral-background-1);
    cursor: pointer;
}

.iui-checkbox input[type="checkbox"]:checked {
    background: var(--iui-accent-foreground-rest);
    border-color: var(--iui-accent-foreground-rest);
}

.iui-checkbox input[type="checkbox"]:focus {
    outline: 2px solid var(--iui-accent-foreground-rest);
    outline-offset: 2px;
}

/* === 라디오 버튼 === */
.iui-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--iui-spacing-sm);
    cursor: pointer;
    user-select: none;
}

.iui-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--iui-neutral-stroke-1);
    border-radius: 50%;
    background: var(--iui-neutral-background-1);
    cursor: pointer;
}

.iui-radio input[type="radio"]:checked {
    background: var(--iui-accent-foreground-rest);
    border-color: var(--iui-accent-foreground-rest);
}

/* === 토글 스위치 === */
.iui-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--iui-spacing-sm);
    cursor: pointer;
    user-select: none;
}

.iui-toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
    background: var(--iui-neutral-stroke-1);
    border-radius: 10px;
    transition: background var(--iui-duration-fast) ease;
}

.iui-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform var(--iui-duration-fast) ease;
}

.iui-toggle input[type="checkbox"] {
    display: none;
}

.iui-toggle input[type="checkbox"]:checked + .iui-toggle-switch {
    background: var(--iui-accent-foreground-rest);
}

.iui-toggle input[type="checkbox"]:checked + .iui-toggle-switch::after {
    transform: translateX(20px);
}

/* === 폼 그룹 === */
.iui-form-group {
    margin-bottom: var(--iui-spacing-lg);    
}

.iui-form-group:first-child {
	padding-top:0px;
    margin-bottom: 10px;
}

.iui-form-group:has(+ .iui-form-group) {
    padding-top:0px;
    margin-bottom: 10px;
}

/* 마지막 폼 그룹 여백 제거 */
.iui-form-group:last-child {
	padding-top:0px;
    margin-bottom: 10px;
}

.iui-form-label {
    display: block;
    margin-bottom: var(--iui-spacing-xs);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--iui-neutral-foreground-rest);
}

.iui-form-help {
    margin-top: var(--iui-spacing-xs);
    font-size: 0.75rem;
    color: #605e5c;
}

.iui-form-error {
    margin-top: var(--iui-spacing-xs);
    font-size: 0.75rem;
    color: var(--iui-danger-foreground);
}

/* ============================================================================
   7. NAVIGATION
   ============================================================================ */

/* === 네비게이션 바 === */
.iui-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--iui-spacing-lg) var(--iui-spacing-xl);
    background: var(--iui-neutral-background-1);
    border-bottom: 1px solid var(--iui-neutral-stroke-2);
}

.iui-navbar-brand {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--iui-neutral-foreground-rest);
    text-decoration: none;
}

.iui-navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--iui-spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.iui-navbar-item {
    display: flex;
    align-items: center;
}

.iui-navbar-link {
    padding: var(--iui-spacing-sm) var(--iui-spacing-md);
    color: var(--iui-neutral-foreground-rest);
    text-decoration: none;
    border-radius: var(--iui-corner-radius-medium);
    transition: all var(--iui-duration-faster) ease;
}

.iui-navbar-link:hover {
    background: var(--iui-neutral-background-3);
    text-decoration: none;
}

.iui-navbar-link.active {
    background: var(--iui-accent-background);
    color: var(--iui-accent-foreground-rest);
}

/* === 브레드크럼 === */
.iui-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--iui-spacing-sm);
    padding: var(--iui-spacing-lg) 0;
    font-size: 0.875rem;
    color: #605e5c;
}

.iui-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--iui-spacing-sm);
}

.iui-breadcrumb-link {
    color: var(--iui-accent-foreground-rest);
    text-decoration: none;
}

.iui-breadcrumb-link:hover {
    text-decoration: underline;
}

.iui-breadcrumb-separator::after {
    content: '>';
    margin: 0 var(--iui-spacing-xs);
    color: #a19f9d;
}

/* === 탭 === */
.iui-tabs {
    border-bottom: 1px solid var(--iui-neutral-stroke-2);
}

.iui-tab-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.iui-tab-item {
    margin-bottom: -1px;
}

.iui-tab-link {
    display: block;
    padding: var(--iui-spacing-md) var(--iui-spacing-lg);
    color: #605e5c;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all var(--iui-duration-faster) ease;
}

.iui-tab-link:hover {
    color: var(--iui-neutral-foreground-rest);
    text-decoration: none;
}

.iui-tab-link.active {
    color: var(--iui-accent-foreground-rest);
    border-bottom-color: var(--iui-accent-foreground-rest);
}

.iui-tab-content {
    padding: var(--iui-spacing-xl) 0;
}

/* ============================================================================
   8. CARDS & CONTAINERS
   ============================================================================ */

/* === 카드 === */
.iui-card {
    margin-top: 1rem;
    background: var(--iui-neutral-background-1);
    border: 1px solid var(--iui-neutral-stroke-2);
    border-radius: var(--iui-corner-radius-large);
    overflow: hidden;
    margin-bottom: 10px;
}

.iui-card-header {
    padding: var(--iui-spacing-lg) var(--iui-spacing-xl);
    background: var(--iui-neutral-background-3);
    border-bottom: 1px solid var(--iui-neutral-stroke-2);
}

.iui-card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--iui-neutral-foreground-rest);
}

.iui-card-subtitle {
    margin: var(--iui-spacing-xs) 0 0 0;
    font-size: 0.875rem;
    color: #605e5c;
}

.iui-card-body {
    padding: var(--iui-spacing-xl); 
    padding-bottom: 18px;
}

.iui-card-body:has(+ .iui-card-action-area) {
  padding-bottom: 0;
}

.iui-card-body + .iui-card-action-area {
  padding-top: 0;
}

.iui-card-action-area {
    padding: var(--iui-spacing-lg);
    padding-top: 15px;
    padding-bottom: 15px;  
}

.iui-card-search-area {
    padding: var(--iui-spacing-lg);
    padding-top: 15px;
    padding-bottom: 15px; 
}

.iui-card-footer {
    padding: var(--iui-spacing-lg) var(--iui-spacing-xl);
    background: var(--iui-neutral-background-2);
    border-top: 1px solid var(--iui-neutral-stroke-2);
}

/* === 패널 === */
.iui-panel {
    background: var(--iui-neutral-background-1);
    border: 1px solid var(--iui-neutral-stroke-2);
    border-radius: var(--iui-corner-radius-large);
    margin-bottom: var(--iui-spacing-xl);
}

.iui-panel-header {
    padding: var(--iui-spacing-lg) var(--iui-spacing-xl);
    background: var(--iui-neutral-background-3);
    border-bottom: 1px solid var(--iui-neutral-stroke-2);
    font-weight: 600;
}

.iui-panel-body {
    padding: var(--iui-spacing-xl);
}

/* === 아코디언 === */
.iui-accordion {
    border: 1px solid var(--iui-neutral-stroke-2);
    border-radius: var(--iui-corner-radius-large);
    overflow: hidden;
}

.iui-accordion-item {
    border-bottom: 1px solid var(--iui-neutral-stroke-2);
}

.iui-accordion-item:last-child {
    border-bottom: none;
}

.iui-accordion-header {
    width: 100%;
    padding: var(--iui-spacing-lg) var(--iui-spacing-xl);
    background: var(--iui-neutral-background-1);
    border: none;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--iui-neutral-foreground-rest);
    cursor: pointer;
    transition: background var(--iui-duration-faster) ease;
}

.iui-accordion-header:hover {
    background: var(--iui-neutral-background-2);
}

.iui-accordion-content {
    padding: var(--iui-spacing-xl);
    background: var(--iui-neutral-background-1);
    display: none;
}

.iui-accordion-item.active .iui-accordion-content {
    display: block;
}

/* ============================================================================
   9. TABLES
   ============================================================================ */
.iui-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--iui-neutral-background-1);
    border: 1px solid var(--iui-neutral-stroke-2);
    border-radius: var(--iui-corner-radius-large);
    overflow: hidden;
}

.iui-table th,
.iui-table td {
    padding: var(--iui-spacing-md) var(--iui-spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--iui-neutral-stroke-2);
}

.iui-table th {
    background: var(--iui-neutral-background-3);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--iui-neutral-foreground-rest);
}

.iui-table tbody tr:hover {
    background: var(--iui-neutral-background-2);
}

.iui-table tbody tr:last-child td {
    border-bottom: none;
}

/* === 테이블 변형 === */
.iui-table.striped tbody tr:nth-child(even) {
    background: var(--iui-neutral-background-2);
}

.iui-table.bordered {
    border: 1px solid var(--iui-neutral-stroke-2);
}

.iui-table.bordered th,
.iui-table.bordered td {
    border: 1px solid var(--iui-neutral-stroke-2);
}

.iui-table.compact th,
.iui-table.compact td {
    padding: var(--iui-spacing-sm) var(--iui-spacing-md);
}

.iui-table-responsive {
    overflow-x: auto;
}

.iui-table-hover tbody tr:hover {
    background: var(--iui-neutral-background-2);
}

/* ============================================================================
   10. MODALS & DIALOGS
   ============================================================================ */

/* === 모달 백드롭 === */
.iui-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--iui-z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--iui-duration-fast) ease;
}

.iui-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* === 모달 === */
.iui-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--iui-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--iui-duration-fast) ease;
}

.iui-modal.show {
    opacity: 1;
    visibility: visible;
}

.iui-modal-dialog {
    width: 100%;
    max-width: 500px;
    margin: var(--iui-spacing-xl);
    background: var(--iui-neutral-background-1);
    border-radius: var(--iui-corner-radius-large);
    transform: scale(0.9);
    transition: transform var(--iui-duration-fast) ease;
}

.iui-modal.show .iui-modal-dialog {
    transform: scale(1);
}

.iui-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--iui-spacing-xl);
    border-bottom: 1px solid var(--iui-neutral-stroke-2);
}

.iui-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--iui-neutral-foreground-rest);
}

.iui-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #605e5c;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iui-modal-close:hover {
    color: var(--iui-neutral-foreground-rest);
}

.iui-modal-body {
    padding: var(--iui-spacing-xl);
}

.iui-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--iui-spacing-sm);
    padding: var(--iui-spacing-xl);
    border-top: 1px solid var(--iui-neutral-stroke-2);
}

/* === 드롭다운 === */
.iui-dropdown {
    position: relative;
    display: inline-block;
}

.iui-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--iui-neutral-background-1);
    border: 1px solid var(--iui-neutral-stroke-2);
    border-radius: var(--iui-corner-radius-medium);
    z-index: var(--iui-z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--iui-duration-fast) ease;
}

.iui-dropdown.show .iui-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.iui-dropdown-item {
    display: block;
    width: 100%;
    padding: var(--iui-spacing-sm) var(--iui-spacing-lg);
    color: var(--iui-neutral-foreground-rest);
    text-decoration: none;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--iui-duration-faster) ease;
}

.iui-dropdown-item:hover {
    background: var(--iui-neutral-background-2);
    text-decoration: none;
}

.iui-dropdown-divider {
    height: 1px;
    background: var(--iui-neutral-stroke-2);
    margin: var(--iui-spacing-xs) 0;
}

/* ============================================================================
   11. ALERTS & NOTIFICATIONS
   ============================================================================ */

/* === 알림 === */
.iui-alert {
    padding: var(--iui-spacing-lg);
    border: 1px solid;
    border-radius: var(--iui-corner-radius-medium);
    margin-bottom: var(--iui-spacing-lg);
}

.iui-alert.info {
    background: var(--iui-info-background);
    border-color: var(--iui-info-foreground);
    color: var(--iui-info-foreground);
}

.iui-alert.success {
    background: var(--iui-success-background);
    border-color: var(--iui-success-foreground);
    color: var(--iui-success-foreground);
}

.iui-alert.warning {
    background: var(--iui-warning-background);
    border-color: var(--iui-warning-foreground);
    color: var(--iui-warning-foreground);
}

.iui-alert.danger {
    background: var(--iui-danger-background);
    border-color: var(--iui-danger-foreground);
    color: var(--iui-danger-foreground);
}

.iui-alert-title {
    font-weight: 600;
    margin-bottom: var(--iui-spacing-xs);
}

.iui-alert-close {
    float: right;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    margin-left: var(--iui-spacing-sm);
}

/* === 토스트 === */
.iui-toast-container {
    position: fixed;
    top: var(--iui-spacing-xl);
    right: var(--iui-spacing-xl);
    z-index: var(--iui-z-toast);
    max-width: 350px;
}

.iui-toast {
    background: var(--iui-neutral-background-1);
    border: 1px solid var(--iui-neutral-stroke-2);
    border-radius: var(--iui-corner-radius-medium);
    margin-bottom: var(--iui-spacing-sm);
    padding: var(--iui-spacing-lg);
    transform: translateX(100%);
    transition: transform var(--iui-duration-fast) ease;
}

.iui-toast.show {
    transform: translateX(0);
}

.iui-toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--iui-spacing-xs);
}

.iui-toast-title {
    font-weight: 600;
    font-size: 0.875rem;
}

.iui-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.iui-toast-body {
    font-size: 0.875rem;
    color: #605e5c;
}

/* === 토스트 타입별 스타일 === */
.iui-toast-success {
    border-left: 4px solid var(--iui-success-foreground);
}

.iui-toast-danger {
    border-left: 4px solid var(--iui-danger-foreground);
}

.iui-toast-warning {
    border-left: 4px solid var(--iui-warning-foreground);
}

.iui-toast-info {
    border-left: 4px solid var(--iui-info-foreground);
}

/* === 배지 === */
.iui-badge {
    display: inline-block;
    padding: 2px var(--iui-spacing-sm);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 12px;
}

.iui-badge.primary {
    background: var(--iui-accent-background);
    color: var(--iui-accent-foreground-rest);
}

.iui-badge.success {
    background: var(--iui-success-background);
    color: var(--iui-success-foreground);
}

.iui-badge.warning {
    background: var(--iui-warning-background);
    color: var(--iui-warning-foreground);
}

.iui-badge.danger {
    background: var(--iui-danger-background);
    color: var(--iui-danger-foreground);
}

.iui-badge.secondary {
    background: var(--iui-neutral-background-3);
    color: #605e5c;
}

/* ============================================================================
   12. LOADING & PROGRESS
   ============================================================================ */

/* === 로딩 스피너 === */
.iui-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--iui-spacing-xxxl);
    color: #605e5c;
}

.iui-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--iui-neutral-stroke-2);
    border-top: 2px solid var(--iui-accent-foreground-rest);
    border-radius: 50%;
    animation: iui-spin 1s linear infinite;
    margin-right: var(--iui-spacing-sm);
}

.iui-spinner.large {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.iui-spinner.small {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

@keyframes iui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === 로딩 오버레이 === */
.iui-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--iui-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--iui-duration-fast) ease;
}

.iui-loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.iui-loading-text {
    margin-left: var(--iui-spacing-md);
    font-size: 0.875rem;
    color: #605e5c;
}

/* === 프로그레스 바 === */
.iui-progress {
    width: 100%;
    height: 8px;
    background: var(--iui-neutral-background-3);
    border-radius: var(--iui-corner-radius-medium);
    overflow: hidden;
}

.iui-progress-bar {
    height: 100%;
    background: var(--iui-accent-foreground-rest);
    border-radius: var(--iui-corner-radius-medium);
    transition: width var(--iui-duration-normal) ease;
}

.iui-progress.success .iui-progress-bar {
    background: var(--iui-success-foreground);
}

.iui-progress.warning .iui-progress-bar {
    background: var(--iui-warning-foreground);
}

.iui-progress.danger .iui-progress-bar {
    background: var(--iui-danger-foreground);
}

/* === 스켈레톤 === */
.iui-skeleton {
    background: linear-gradient(90deg, var(--iui-neutral-background-3) 25%, var(--iui-neutral-background-2) 50%, var(--iui-neutral-background-3) 75%);
    background-size: 200% 100%;
    animation: iui-skeleton 1.5s infinite;
    border-radius: var(--iui-corner-radius-medium);
}

.iui-skeleton.text {
    height: 1rem;
    margin-bottom: var(--iui-spacing-xs);
}

.iui-skeleton.title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--iui-spacing-sm);
}

.iui-skeleton.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

@keyframes iui-skeleton {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================================================
   13. PAGINATION (NEW)
   ============================================================================ */

/* === 페이지네이션 컨테이너 === */
.iui-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--iui-spacing-xs);    
    padding:0px;
}

/* === 페이지네이션 링크 === */
.iui-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--iui-spacing-sm);
    border: 1px solid var(--iui-neutral-stroke-1);
    border-radius: var(--iui-corner-radius-medium);
    background: var(--iui-neutral-background-1);
    color: var(--iui-neutral-foreground-rest);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--iui-duration-faster) ease;
    user-select: none;
}

.iui-pagination-link:hover {
    background: var(--iui-neutral-background-3);
    border-color: var(--iui-neutral-stroke-1);
    text-decoration: none;
    color: var(--iui-neutral-foreground-rest);
}

.iui-pagination-link:focus {
    outline: 2px solid var(--iui-accent-foreground-rest);
    outline-offset: 2px;
}

.iui-pagination-link:active {
    background: #e1dfdd;
    transform: translateY(1px);
}

/* === 페이지네이션 항목 (현재 페이지) === */
.iui-pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--iui-spacing-sm);
    border: 1px solid var(--iui-neutral-stroke-1);
    border-radius: var(--iui-corner-radius-medium);
    background: var(--iui-neutral-background-1);
    color: var(--iui-neutral-foreground-rest);
    font-size: 0.875rem;
    font-weight: 400;
    user-select: none;
}

.iui-pagination-item.active {
    background: var(--iui-accent-foreground-rest);
    border-color: var(--iui-accent-foreground-rest);
    color: white;
    font-weight: 500;
}

/* === 페이지네이션 이전/다음 버튼 === */
.iui-pagination-prev,
.iui-pagination-next {
    font-weight: 500;
}

.iui-pagination-link:disabled {
    background: var(--iui-neutral-background-disabled);
    border-color: var(--iui-neutral-stroke-disabled);
    color: var(--iui-neutral-foreground-disabled);
    cursor: not-allowed;
    transform: none;
}

.iui-pagination-link:disabled:hover {
    background: var(--iui-neutral-background-disabled);
    border-color: var(--iui-neutral-stroke-disabled);
    color: var(--iui-neutral-foreground-disabled);
}

/* === 페이지네이션 크기 변형 === */
.iui-pagination.small .iui-pagination-link,
.iui-pagination.small .iui-pagination-item {
    min-width: 24px;
    height: 24px;
    font-size: 0.75rem;
    padding: 0 var(--iui-spacing-xs);
}

.iui-pagination.large .iui-pagination-link,
.iui-pagination.large .iui-pagination-item {
    min-width: 40px;
    height: 40px;
    font-size: 1rem;
    padding: 0 var(--iui-spacing-md);
}

/* ============================================================================
   14. UTILITY CLASSES
   ============================================================================ */

/* === 간격 === */
.iui-m-0 { margin: 0; }
.iui-m-1 { margin: var(--iui-spacing-xs); }
.iui-m-2 { margin: var(--iui-spacing-sm); }
.iui-m-3 { margin: var(--iui-spacing-md); }
.iui-m-4 { margin: var(--iui-spacing-lg); }
.iui-m-5 { margin: var(--iui-spacing-xl); }
.iui-m-6 { margin: var(--iui-spacing-xxl); }

.iui-mt-0 { margin-top: 0; }
.iui-mt-1 { margin-top: var(--iui-spacing-xs); }
.iui-mt-2 { margin-top: var(--iui-spacing-sm); }
.iui-mt-3 { margin-top: var(--iui-spacing-md); }
.iui-mt-4 { margin-top: var(--iui-spacing-lg); }
.iui-mt-5 { margin-top: var(--iui-spacing-xl); }
.iui-mt-6 { margin-top: var(--iui-spacing-xxl); }

.iui-mb-0 { margin-bottom: 0; }
.iui-mb-1 { margin-bottom: var(--iui-spacing-xs); }
.iui-mb-2 { margin-bottom: var(--iui-spacing-sm); }
.iui-mb-3 { margin-bottom: var(--iui-spacing-md); }
.iui-mb-4 { margin-bottom: var(--iui-spacing-lg); }
.iui-mb-5 { margin-bottom: var(--iui-spacing-xl); }
.iui-mb-6 { margin-bottom: var(--iui-spacing-xxl); }

.iui-ml-0 { margin-left: 0; }
.iui-ml-1 { margin-left: var(--iui-spacing-xs); }
.iui-ml-2 { margin-left: var(--iui-spacing-sm); }
.iui-ml-3 { margin-left: var(--iui-spacing-md); }
.iui-ml-4 { margin-left: var(--iui-spacing-lg); }
.iui-ml-5 { margin-left: var(--iui-spacing-xl); }
.iui-ml-6 { margin-left: var(--iui-spacing-xxl); }

.iui-mr-0 { margin-right: 0; }
.iui-mr-1 { margin-right: var(--iui-spacing-xs); }
.iui-mr-2 { margin-right: var(--iui-spacing-sm); }
.iui-mr-3 { margin-right: var(--iui-spacing-md); }
.iui-mr-4 { margin-right: var(--iui-spacing-lg); }
.iui-mr-5 { margin-right: var(--iui-spacing-xl); }
.iui-mr-6 { margin-right: var(--iui-spacing-xxl); }

.iui-p-0 { padding: 0; }
.iui-p-1 { padding: var(--iui-spacing-xs); }
.iui-p-2 { padding: var(--iui-spacing-sm); }
.iui-p-3 { padding: var(--iui-spacing-md); }
.iui-p-4 { padding: var(--iui-spacing-lg); }
.iui-p-5 { padding: var(--iui-spacing-xl); }
.iui-p-6 { padding: var(--iui-spacing-xxl); }

.iui-pt-0 { padding-top: 0; }
.iui-pt-1 { padding-top: var(--iui-spacing-xs); }
.iui-pt-2 { padding-top: var(--iui-spacing-sm); }
.iui-pt-3 { padding-top: var(--iui-spacing-md); }
.iui-pt-4 { padding-top: var(--iui-spacing-lg); }
.iui-pt-5 { padding-top: var(--iui-spacing-xl); }
.iui-pt-6 { padding-top: var(--iui-spacing-xxl); }

.iui-pb-0 { padding-bottom: 0; }
.iui-pb-1 { padding-bottom: var(--iui-spacing-xs); }
.iui-pb-2 { padding-bottom: var(--iui-spacing-sm); }
.iui-pb-3 { padding-bottom: var(--iui-spacing-md); }
.iui-pb-4 { padding-bottom: var(--iui-spacing-lg); }
.iui-pb-5 { padding-bottom: var(--iui-spacing-xl); }
.iui-pb-6 { padding-bottom: var(--iui-spacing-xxl); }

.iui-pl-0 { padding-left: 0; }
.iui-pl-1 { padding-left: var(--iui-spacing-xs); }
.iui-pl-2 { padding-left: var(--iui-spacing-sm); }
.iui-pl-3 { padding-left: var(--iui-spacing-md); }
.iui-pl-4 { padding-left: var(--iui-spacing-lg); }
.iui-pl-5 { padding-left: var(--iui-spacing-xl); }
.iui-pl-6 { padding-left: var(--iui-spacing-xxl); }

.iui-pr-0 { padding-right: 0; }
.iui-pr-1 { padding-right: var(--iui-spacing-xs); }
.iui-pr-2 { padding-right: var(--iui-spacing-sm); }
.iui-pr-3 { padding-right: var(--iui-spacing-md); }
.iui-pr-4 { padding-right: var(--iui-spacing-lg); }
.iui-pr-5 { padding-right: var(--iui-spacing-xl); }
.iui-pr-6 { padding-right: var(--iui-spacing-xxl); }

/* === 디스플레이 === */
.iui-d-none { display: none; }
.iui-d-block { display: block; }
.iui-d-inline { display: inline; }
.iui-d-inline-block { display: inline-block; }
.iui-d-flex { display: flex; }
.iui-d-inline-flex { display: inline-flex; }
.iui-d-grid { display: grid; }

/* === 위치 === */
.iui-position-static { position: static; }
.iui-position-relative { position: relative; }
.iui-position-absolute { position: absolute; }
.iui-position-fixed { position: fixed; }
.iui-position-sticky { position: sticky; }

/* === 크기 === */
.iui-w-25 { width: 25%; }
.iui-w-50 { width: 50%; }
.iui-w-75 { width: 75%; }
.iui-w-100 { width: 100%; }
.iui-w-auto { width: auto; }

.iui-h-25 { height: 25%; }
.iui-h-50 { height: 50%; }
.iui-h-75 { height: 75%; }
.iui-h-100 { height: 100%; }
.iui-h-auto { height: auto; }

/* === 배경색 === */
.iui-bg-primary { background-color: var(--iui-accent-foreground-rest); }
.iui-bg-success { background-color: var(--iui-success-foreground); }
.iui-bg-warning { background-color: var(--iui-warning-foreground); }
.iui-bg-danger { background-color: var(--iui-danger-foreground); }
.iui-bg-light { background-color: var(--iui-neutral-background-2); }
.iui-bg-white { background-color: var(--iui-neutral-background-1); }

/* === 테두리 === */
.iui-border { border: 1px solid var(--iui-neutral-stroke-2); }
.iui-border-top { border-top: 1px solid var(--iui-neutral-stroke-2); }
.iui-border-bottom { border-bottom: 1px solid var(--iui-neutral-stroke-2); }
.iui-border-left { border-left: 1px solid var(--iui-neutral-stroke-2); }
.iui-border-right { border-right: 1px solid var(--iui-neutral-stroke-2); }
.iui-border-0 { border: 0; }

.iui-rounded {border-radius: var(--iui-corner-radius-medium); }
.iui-rounded-sm { border-radius: var(--iui-corner-radius-small); }
.iui-rounded-lg { border-radius: var(--iui-corner-radius-large); }
.iui-rounded-xl { border-radius: var(--iui-corner-radius-xlarge); }
.iui-rounded-circle { border-radius: 50%; }

/* ============================================================================
   15. RESPONSIVE DESIGN
   ============================================================================ */

/* === 모바일 우선 반응형 === */
@media (max-width: 576px) {
    .iui-container,
    .iui-container-fluid,
    .iui-container-narrow {
        padding: 0 var(--iui-spacing-lg);
    }
    
    .iui-row {
        margin: 0 calc(-1 * var(--iui-spacing-xs));
    }
    
    .iui-col {
        padding: 0 var(--iui-spacing-xs);
    }
    
    .iui-navbar {
        padding: var(--iui-spacing-md) var(--iui-spacing-lg);
    }
    
    .iui-navbar-nav {
        flex-direction: column;
        gap: var(--iui-spacing-sm);
    }
    
    .iui-modal-dialog {
        margin: var(--iui-spacing-lg);
    }
    
    .iui-toast-container {
        top: var(--iui-spacing-lg);
        right: var(--iui-spacing-lg);
        left: var(--iui-spacing-lg);
        max-width: none;
    }
    
    .iui-title-1 { font-size: 2rem; }
    .iui-title-2 { font-size: 1.75rem; }
    .iui-title-3 { font-size: 1.25rem; }
    
    .iui-pagination {
        gap: 2px;
    }
    
    .iui-pagination-link,
    .iui-pagination-item {
        min-width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .iui-table {
        font-size: 0.75rem;
    }
    
    .iui-table th,
    .iui-table td {
        padding: var(--iui-spacing-sm);
    }
    
    .iui-card-header,
    .iui-card-body,
    .iui-card-footer {
        padding: var(--iui-spacing-lg);
    }
    
    .iui-card-action-area,

    .iui-card-search-area,
    
    .iui-modal-header,
    .iui-modal-body,
    .iui-modal-footer {
        padding: var(--iui-spacing-lg);
    }
    
    .iui-flex.iui-justify-between {
        flex-direction: column;
        gap: 12px;
    }
    
    .iui-card-footer .iui-flex {
        justify-content: stretch !important;
    }
    
    .iui-card-footer .iui-button {
        flex: 1;
    }
}

/* === 데스크톱 === */
@media (min-width: 992px) {
    .iui-container {
        max-width: 1200px;
    }
    
    .iui-container-narrow {
        max-width: 900px;
    }
}

/* === 대형 화면 === */
@media (min-width: 1200px) {
    .iui-container {
        max-width: 1400px;
    }
}

/* ============================================================================
   END OF IONEWORKS UI (IUI) DESIGN SYSTEM CSS
   ============================================================================ */