/**
 * ErrorScreen 컴포넌트 통합 스타일
 * variant: 'auth' | 'error'로 색상 구분
 */

._container_q8agw_6 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
}

/* Auth variant - 파란색 계열 */
._containerAuth_q8agw_16 {
  color: var(--errorscreen-auth-text);
  background: var(--color-info-lighter);
  border-radius: var(--radius-12);
  margin: var(--space-32);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* Error variant - 중립 (박스 없이 중앙 정렬 텍스트) */
._containerError_q8agw_25 {
  color: var(--color-neutral-700, #525252);
  background: transparent;
}

._icon_q8agw_30 {
  margin-bottom: var(--space-16);
}

._title_q8agw_34 {
  margin: 0 0 var(--space-8);
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-600);
}

._message_q8agw_41 {
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size-16);
  text-align: center;
  line-height: var(--line-height-normal);
}

._backButton_q8agw_48 {
  margin-top: var(--space-24);
  padding: var(--space-8) var(--space-24);
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--color-neutral-700);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--radius-8, 8px);
  cursor: pointer;
  transition: background 0.15s ease;
}

._backButton_q8agw_48:hover {
  background: var(--color-neutral-200);
}
._button_1ehul_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);

  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  box-sizing: border-box;

  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;

  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  line-height: 24px;

  min-height: var(--menu-size-sm);
  position: relative;
}

._button_1ehul_1:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

._small_1ehul_31 {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
  line-height: 18px;
  min-height: 24px;
}

._medium_1ehul_38 {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  line-height: 24px;
  min-height: var(--menu-size-sm);
}

._large_1ehul_45 {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-base);
  line-height: 28px;
  min-height: 40px;
}

._primary_1ehul_52 {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: 0px 8px 12px 0px inset var(--button-primary-inset);
  /* 버튼 내부 아이콘도 흰색으로 설정 - 명시적으로 흰색 지정 */
  --icon-stroke-color: var(--button-primary-text);
  --color-text-inverse: var(--button-primary-text);
}

._primary_1ehul_52:hover:not(:disabled) {
  background-color: var(--button-primary-hover-bg);
  color: var(--button-primary-hover-text);
  border: 1px solid var(--button-primary-hover-text);
  box-shadow: none;
  /* 호버 시 아이콘도 오렌지로 변경 */
  --icon-stroke-color: var(--button-primary-hover-text);
}

._primary_1ehul_52:active {
  background-color: var(--button-primary-active-bg);
}

._primary_1ehul_52:focus-visible {
  outline-color: var(--color-border-focus);
}

._secondary_1ehul_78 {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border: 1px solid var(--button-secondary-border);
  /* 버튼 내부 아이콘은 기본 회색 */
  --icon-stroke-color: var(--color-text-secondary);
}

._secondary_1ehul_78:hover:not(:disabled) {
  background-color: var(--button-secondary-hover-bg);
  /* 호버 시 아이콘도 오렌지로 변경 */
  --icon-stroke-color: var(--color-brand-primary);
}

._secondary_1ehul_78:active {
  background-color: var(--button-secondary-active-bg);
}

/* Publish .draftBtn 동기화 — 오렌지 아웃라인 버튼 (네비게이션/링크 용도) */
._outline_1ehul_97 {
  background: var(--color-white, #ffffff); /* Publish .draftBtn bg */
  color: var(--color-primary, var(--color-brand-primary)); /* Publish .draftBtn color */
  border: 1px solid var(--color-primary, var(--color-brand-primary)); /* Publish .draftBtn border */
  border-radius: var(--radius-md, 6px); /* Publish .draftBtn border-radius */
  box-shadow: 0 var(--space-2, 2px) 0 rgba(255, 107, 53, 0.25); /* Publish .draftBtn shadow */
  height: 36px; /* Publish .draftBtn height */
  padding: 0 var(--space-20, 20px); /* Publish .draftBtn padding */
  font-size: var(--font-size-12, 12px); /* Publish .draftBtn font-size */
  font-weight: var(--font-weight-600, 600); /* Publish .draftBtn font-weight */
  line-height: 1; /* Publish .draftBtn line-height */
  --icon-stroke-color: var(--color-primary, var(--color-brand-primary));
}

._outline_1ehul_97:hover:not(:disabled) {
  background: var(--color-primary-light, #fff8f3); /* Publish .draftBtn:hover bg */
  box-shadow: 0 3px 0 rgba(255, 107, 53, 0.3); /* Publish .draftBtn:hover shadow */
  --icon-stroke-color: var(--color-primary, var(--color-brand-primary));
}

._outline_1ehul_97:active {
  background: var(--color-primary-light, #fff8f3);
  box-shadow: 0 1px 0 rgba(255, 107, 53, 0.2);
}

._ghost_1ehul_122 {
  background-color: transparent;
  color: var(--button-ghost-text);
  /* 버튼 내부 아이콘은 기본 회색 */
  --icon-stroke-color: var(--button-ghost-text);
}

._ghost_1ehul_122:hover:not(:disabled) {
  background-color: var(--button-ghost-hover-bg);
  color: var(--button-ghost-hover-text);
  /* 호버 시 아이콘도 오렌지로 변경 */
  --icon-stroke-color: var(--color-brand-primary);
}

._ghost_1ehul_122:active {
  background-color: var(--button-ghost-active-bg);
}

._disabled_1ehul_140 {
  background-color: var(--button-disabled-bg) !important;
  color: var(--button-disabled-text) !important;
  border-color: var(--button-disabled-bg) !important;
  box-shadow: none;
  cursor: not-allowed;
}

._loading_1ehul_148 {
  cursor: not-allowed;
  position: relative;
}

._loading_1ehul_148::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: inherit;
}

._fullWidth_1ehul_164 {
  width: 100%;
}

._spinner_1ehul_168 {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: _spin_1ehul_168 1s linear infinite;
}

@keyframes _spin_1ehul_168 {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   액션 타입 variants (자동 아이콘 + 스타일)
   ============================================ */

/* 저장/수정 버튼 (오렌지) */
._save_1ehul_188 {
  background: var(--button-save-bg);
  border: 1px solid var(--button-save-border);
  border-radius: 10px;
  color: var(--button-save-text);
  --icon-stroke-color: var(--button-save-text);
  padding-left: calc(var(--spacing-sm) * 1.4);
  padding-right: calc(var(--spacing-sm) * 1.4);
}

._save_1ehul_188:hover:not(:disabled) {
  background: var(--button-save-hover-bg);
  border-color: var(--button-save-text);
  color: var(--button-save-hover-text);
  --icon-stroke-color: var(--button-save-hover-text);
}

._save_1ehul_188:active {
  background: var(--button-save-active-bg);
}

/* 취소 버튼 */
._cancel_1ehul_210 {
  background: var(--button-cancel-bg);
  border: 1px solid var(--button-cancel-border);
  color: var(--button-cancel-text);
  --icon-stroke-color: var(--button-cancel-text);
}

._cancel_1ehul_210:hover:not(:disabled) {
  background: var(--button-cancel-hover-bg);
  border-color: var(--button-cancel-hover-border);
  color: var(--button-cancel-hover-text);
}

._cancel_1ehul_210:active {
  background: var(--button-cancel-active-bg);
}

/* 업로드 버튼 (초록색) */
._upload_1ehul_228 {
  background: var(--color-background-primary);
  border: 1px solid var(--button-upload-border);
  color: var(--button-upload-text);
  --icon-stroke-color: var(--button-upload-text);
}

._upload_1ehul_228:hover:not(:disabled) {
  background: var(--button-upload-hover-bg);
  border-color: var(--button-upload-hover-border);
  color: var(--button-upload-hover-text);
}

._upload_1ehul_228:active {
  background: var(--button-upload-active-bg);
}

/* 다운로드 버튼 */
._download_1ehul_246 {
  background: var(--color-background-primary);
  border: 1px solid var(--button-download-border);
  color: var(--button-download-text);
  --icon-stroke-color: var(--button-download-text);
}

._download_1ehul_246:hover:not(:disabled) {
  background: var(--button-download-hover-bg);
  border-color: var(--button-download-hover-border);
  color: var(--button-download-hover-text);
}

._download_1ehul_246:active {
  background: var(--button-download-active-bg);
}

/* 삭제 버튼 (빨간색) */
._delete_1ehul_264 {
  background: var(--color-background-primary);
  border: 1px solid var(--button-delete-border);
  color: var(--button-delete-text);
  --icon-stroke-color: var(--button-delete-text);
  --icon-delete-color: var(--button-delete-text);
}

._delete_1ehul_264:hover:not(:disabled) {
  background: var(--button-delete-hover-bg);
  border-color: var(--button-delete-hover-border);
  color: var(--button-delete-hover-text);
  --icon-delete-color: var(--button-delete-hover-text);
}

._delete_1ehul_264:active {
  background: var(--button-delete-active-bg);
}

/* 수정 버튼 */
._edit_1ehul_284 {
  background: var(--color-background-primary);
  border: 1px solid var(--button-edit-border);
  color: var(--button-edit-text);
  --icon-stroke-color: var(--button-edit-text);
}

._edit_1ehul_284:hover:not(:disabled) {
  background: var(--button-edit-hover-bg);
  border-color: var(--button-edit-hover-border);
  color: var(--button-edit-hover-text);
}

._edit_1ehul_284:active {
  background: var(--button-edit-active-bg);
}
/**
 * ErrorBoundary 스타일
 * @sync-source: erp-publish/src/components/common/ErrorBoundary/ErrorBoundary.module.css
 */

._wrapper_1gp2y_6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-40, 40px) var(--space-24, 24px);
  text-align: center;
  min-height: 300px;
  background: var(--color-background-primary, var(--color-white, #ffffff));
  border-radius: var(--radius-8, 8px);
}

._icon_1gp2y_18 {
  font-size: 48px;
  margin-bottom: var(--space-16, 16px);
}

._title_1gp2y_23 {
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size-20, 20px);
  font-weight: var(--font-weight-700, 700);
  color: var(--color-text-primary, var(--color-neutral-800));
  margin: 0 0 var(--space-12, 12px) 0;
}

._message_1gp2y_31 {
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size-14, 14px);
  line-height: 1.6;
  color: var(--color-text-secondary, var(--color-neutral-650));
  margin: 0 0 var(--space-24, 24px) 0;
  white-space: pre-line;
}

._actions_1gp2y_40 {
  display: flex;
  justify-content: center;
  gap: var(--space-12, 12px);
  margin-bottom: var(--space-16, 16px);
}

._details_1gp2y_47 {
  width: 100%;
  max-width: 400px;
  margin-bottom: var(--space-24, 24px);
  text-align: left;
}

._details_1gp2y_47 summary {
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size-12, 12px);
  color: var(--color-text-tertiary, var(--color-neutral-600));
  cursor: pointer;
  padding: var(--space-8, 8px) 0;
}

._details_1gp2y_47 summary:hover {
  color: var(--color-text-secondary, var(--color-neutral-650));
}

._stack_1gp2y_66 {
  text-align: left;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: var(--font-size-11, 11px);
  background: var(--color-background-secondary, var(--color-neutral-200));
  border: 1px solid var(--color-border-primary, var(--color-bg-500));
  border-radius: var(--radius-4, 4px);
  padding: var(--space-12, 12px);
  margin: var(--space-8, 8px) 0 0 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-error, var(--color-red-500));
  max-height: 300px;
  overflow: auto;
  line-height: 1.5;
}
/* Primitive tokens: raw values only. */
/* 하드코딩 값은 이 레이어에만 존재 */
:root {
  /* ===== Orange (Brand) ===== */
  --color-orange-50:  #fff5f0;
  --color-orange-300: #ff9b52;
  --color-orange-500: #ff6b00;
  --color-orange-600: #ea580c;

  /* ===== Neutral (순수 Gray, 19단계) ===== */
  --color-white: #ffffff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f8f8f8;
  --color-neutral-150: #f5f6f8;
  --color-neutral-200: #f5f5f5;
  --color-neutral-250: #f0f0f0;
  --color-neutral-300: #e8e8e8;
  --color-neutral-350: #e5e5e5;
  --color-neutral-400: #d9d9d9;
  --color-neutral-450: #d6d6d6;
  --color-neutral-500: #c8c8c8;
  --color-neutral-550: #bdbdbd;
  --color-neutral-600: #9e9e9e;
  --color-neutral-650: #666666;
  --color-neutral-700: #5f5f5f;
  --color-neutral-750: #5c5c5c;
  --color-neutral-800: #424242;
  --color-neutral-850: #3c3c3c;
  --color-neutral-900: #282828;
  --color-neutral-950: #171717;

  /* ===== Gray (쿨톤, Tailwind 계열) ===== */
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;

  /* ===== Green ===== */
  --color-green-50:  #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-400: #3acb2d;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;

  /* ===== Yellow ===== */
  --color-yellow-50:  #fffbf0;
  --color-yellow-100: #fff8e6;
  --color-yellow-200: #fef3cd;
  --color-yellow-300: #fde3b8;
  --color-yellow-500: #f5a623;
  --color-yellow-600: #ea8c00;

  /* ===== Red ===== */
  --color-red-50:  #fef2f2;
  --color-red-100: #ffebee;
  --color-red-500: #f44336;
  --color-red-600: #dc2626;

  /* ===== Blue ===== */
  --color-blue-50:  #f0f9ff;
  --color-blue-100: #dbeafe;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  /* ===== Typography ===== */
  --font-family-sans: 'Pretendard', 'Pretendard Variable', sans-serif;
  --font-size-10: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --line-height-120: 1.2;
  --line-height-150: 1.5;
  --line-height-170: 1.7;

  /* ===== Spacing ===== */
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* ===== Border Radius ===== */
  --radius-2:  2px;
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-20: 20px;

  /* ===== Shadows (-raw) ===== */
  --shadow-xs-raw:       0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm-raw:       0 1px 0 rgba(0, 0, 0, 0.05);
  --shadow-md-raw:       0 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-lg-raw:       0 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-xl-raw:       0 20px 60px rgba(0, 0, 0, 0.2);
  --shadow-dropdown-raw: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* ===== Z-Index ===== */
  --z-index-100:  100;
  --z-index-200:  200;
  --z-index-300:  300;
  --z-index-400:  400;
  --z-index-500:  500;
  --z-index-600:  600;
  --z-index-700:  700;
  --z-index-800:  800;
  --z-index-900:  900;
  --z-index-1000: 1000;
  --z-index-1001: 1001;
  --z-index-1002: 1002;
  --z-index-1050: 1050;
  --z-index-1100: 1100;
  --z-index-1200: 1200;
  --z-index-1201: 1201;
  --z-index-2000: 2000;
  --z-index-9999: 9999;
  --z-index-99999: 99999;

  /* ===== Duration / Easing ===== */
  --duration-150: 0.15s;
  --duration-200: 0.2s;
  --duration-300: 0.3s;
  --easing-standard: ease;

  /* ===== Opacity ===== */
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;

  /* ===== Mobile ===== */
  --touch-min-size: 44px;
  --mobile-header-height: 52px; /* MobileGNB 기본 높이 */
  --mobile-spacing-xs: 4px;
  --mobile-spacing-sm: 8px;
  --mobile-spacing-md: 12px;
  --mobile-spacing-lg: 16px;
}
/* Semantic tokens: meaning-based. */
/* 반드시 var(--primitive-token) 참조 */
:root {
  /* ===== S1. Brand / Primary ===== */
  --color-primary: var(--color-orange-500);
  --color-primary-light: var(--color-orange-50);
  --color-primary-hover: var(--color-orange-600);

  /* ===== S2. Text Colors ===== */
  --text-primary: var(--color-neutral-800);
  --text-secondary: var(--color-neutral-750);
  --text-tertiary: var(--color-neutral-650);
  --text-value: var(--color-neutral-850);
  --text-muted: var(--color-neutral-600);
  --text-inverse: var(--color-white);
  --text-brand: var(--color-primary);
  --text-disabled: var(--color-neutral-650);

  /* ===== S3. Surface / Background ===== */
  --surface-primary: var(--color-white);
  --surface-secondary: var(--color-neutral-50);
  --surface-tertiary: var(--color-neutral-100);
  --surface-sunken: var(--color-neutral-150);
  --surface-muted: var(--color-neutral-250);
  --surface-overlay: var(--color-neutral-300);

  /* ===== S4. Border ===== */
  --border-default: var(--color-neutral-300);
  --border-secondary: var(--color-neutral-400);
  --border-dark: var(--color-neutral-500);
  --border-light: var(--color-neutral-150);
  --border-divider: var(--color-gray-100);
  --border-subtle: var(--color-gray-200);
  --border-focus: var(--color-primary);

  /* ===== S5. Status ===== */
  --color-success: var(--color-green-500);
  --color-success-light: var(--color-green-100);
  --color-success-lighter: var(--color-green-50);
  --color-warning: var(--color-yellow-500);
  --color-warning-light: var(--color-yellow-100);
  --color-warning-lighter: var(--color-yellow-50);
  --color-error: var(--color-red-500);
  --color-error-light: var(--color-red-100);
  --color-error-lighter: var(--color-red-50);
  --color-info: var(--color-blue-500);
  --color-info-light: var(--color-blue-100);
  --color-info-lighter: var(--color-blue-50);
  --color-secondary: var(--color-neutral-650);
  --color-secondary-green: var(--color-green-400);

  /* ===== S6. Typography Roles ===== */
  --font-family-primary: var(--font-family-sans);
  --font-size-xs: var(--font-size-10);
  --font-size-sm: var(--font-size-11);
  --font-size-base: var(--font-size-12);
  --font-size-md: var(--font-size-14);
  --font-size-lg: var(--font-size-16);
  --font-size-xl: var(--font-size-18);
  --font-size-2xl: var(--font-size-20);
  --font-weight-regular: var(--font-weight-400);
  --font-weight-medium: var(--font-weight-500);
  --font-weight-semibold: var(--font-weight-600);
  --font-weight-bold: var(--font-weight-700);
  --line-height-tight: var(--line-height-120);
  --line-height-normal: var(--line-height-150);
  --line-height-relaxed: var(--line-height-170);
  --line-height-base: var(--line-height-normal);

  /* ===== S7. Spacing Roles ===== */
  --spacing-xs: var(--space-4);
  --spacing-sm: var(--space-8);
  --spacing-md: var(--space-12);
  --spacing-lg: var(--space-16);
  --spacing-xl: var(--space-20);
  --spacing-2xl: var(--space-24);
  --spacing-3xl: var(--space-32);
  --spacing-4xl: var(--space-40);

  /* ===== S8. Radius / Shadow / Z-Index / Transition ===== */
  /* Radius */
  --radius-xs: var(--radius-2);
  --radius-sm: var(--radius-4);
  --radius-md: var(--radius-6);
  --radius-lg: var(--radius-8);
  --radius-xl: var(--radius-12);
  --radius-full: var(--radius-20);

  /* Shadow */
  --shadow-xs: var(--shadow-xs-raw);
  --shadow-sm: var(--shadow-sm-raw);
  --shadow-md: var(--shadow-md-raw);
  --shadow-lg: var(--shadow-lg-raw);
  --shadow-xl: var(--shadow-xl-raw);
  --shadow-dropdown: var(--shadow-dropdown-raw);

  /* Z-Index */
  --z-dropdown: var(--z-index-100);
  --z-sticky: var(--z-index-200);
  --z-fixed: var(--z-index-300);
  --z-modal-backdrop: var(--z-index-400);
  --z-modal: var(--z-index-500);
  --z-popover: var(--z-index-600);
  --z-tooltip: var(--z-index-700);
  --z-layer-base-modal: var(--z-index-1000);
  --z-layer-form-overlay: var(--z-index-1001);
  --z-layer-form-content: var(--z-index-1002);
  --z-layer-modal-content: var(--z-index-1050);
  --z-layer-mobile-overlay: var(--z-index-1100);
  --z-toast: var(--z-index-1200); /* mobile-overlay(1100)보다 위 */
  --z-overlay-high: var(--z-index-1200);
  --z-modal-high: var(--z-index-1201);
  --z-dialog-critical: var(--z-index-2000);
  --z-dev-toolbar: var(--z-index-9999);
  --z-modal-override: var(--z-index-9999);
  --z-password-gate: var(--z-index-99999);

  /* Transition */
  --transition-fast: var(--duration-150) var(--easing-standard);
  --transition-normal: var(--duration-200) var(--easing-standard);
  --transition-slow: var(--duration-300) var(--easing-standard);

  /* ===== S9. Legacy Aliases ===== */
  /* Background Ramp (기존 코드 호환) */
  --color-bg-100: var(--color-white);
  --color-bg-200: var(--color-neutral-250);
  --color-bg-300: var(--color-neutral-100);
  --color-bg-400: var(--color-neutral-150);
  --color-bg-500: var(--color-neutral-300);

  /* Foreground Ramp (기존 코드 호환) */
  --color-fg-100: var(--color-neutral-400);
  --color-fg-200: var(--color-neutral-500);
  --color-fg-300: var(--color-neutral-600);
  --color-fg-400: var(--color-neutral-700);
  --color-fg-500: var(--color-neutral-850);
  --color-fg-600: var(--color-neutral-900);

  /* Background */
  --color-background-primary: var(--surface-primary);
  --color-background-secondary: var(--surface-secondary);
  --color-background-tertiary: var(--surface-tertiary);
  --color-background-100: var(--surface-primary);
  --color-background-200: var(--surface-muted);
  --color-background-300: var(--surface-tertiary);
  --color-background-400: var(--surface-sunken);
  --color-background-500: var(--surface-overlay);

  /* Foreground */
  --color-foreground-100: var(--color-neutral-400);
  --color-foreground-200: var(--color-neutral-500);
  --color-foreground-300: var(--color-neutral-600);
  --color-foreground-400: var(--color-neutral-700);
  --color-foreground-500: var(--color-neutral-850);
  --color-foreground-600: var(--color-neutral-900);

  /* Text */
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-inverse: var(--text-inverse);
  --color-text-brand: var(--text-brand);
  --color-text-muted: var(--text-muted);
  --color-text-disabled: var(--text-disabled);
  --color-text-secondary-dark: var(--color-neutral-700);

  /* Border */
  --color-border-primary: var(--border-default);
  --color-border-secondary: var(--border-secondary);
  --color-border-tertiary: var(--border-default);
  --color-border-focus: var(--border-focus);
  --color-border-light: var(--border-light);
  --color-border-200: var(--border-subtle);

  /* Brand */
  --color-brand: var(--color-primary);
  --color-brand-primary: var(--color-primary);
  --color-brand-main: var(--color-primary);
  --color-brand-light: var(--color-orange-300);

  /* Border Inline */
  --border-primary: var(--border-default);
  --border-tertiary: var(--border-default);
  --border-200: var(--border-subtle);

  /* Spacing */
  --spacing-1: var(--spacing-xs);
  --spacing-2: var(--spacing-sm);
  --spacing-3: var(--spacing-md);
  --spacing-4: var(--spacing-lg);
  --spacing-5: var(--spacing-xl);
  --spacing-6: var(--spacing-2xl);

  /* Line Height */
  /* (already defined above as tight/normal/relaxed) */
}
/* Component tokens: component-level defaults. */
:root {
  /* Header */
  --header-height: 56px;
  --header-bg: var(--surface-sunken);
  --header-padding-x: var(--spacing-2xl);
  --header-padding-top: 0;
  --header-title-size: var(--font-size-lg);
  --header-title-weight: var(--font-weight-bold);
  --header-title-color: var(--text-primary);
  --header-title-letter-spacing: -0.2px;
  --header-title-margin-top: 4px;
  --header-user-name-size: var(--font-size-base);
  --header-user-name-weight: var(--font-weight-medium);
  --header-user-name-color: var(--color-fg-500);
  --header-user-role-size: 11px;
  --header-user-role-color: var(--color-fg-300);
  --header-avatar-size: 32px;
  --header-avatar-radius: 50%;
  --header-avatar-bg: #ffe5d0;
  --header-right-gap: var(--spacing-lg);

  /* Menu */
  --menu-size-sm: 32px;
  --menu-size-md: 45px;
  --menu-width-sm: 126px;
  --menu-width-md: 140px;
  --menu-width-lg: 156px;
  --menu-padding-compact: var(--spacing-xs) var(--spacing-sm);
  --menu-padding-comfortable: var(--spacing-sm) var(--spacing-md);
  --menu-radius: var(--radius-md);
  --menu-gap: var(--spacing-md);

  /* Layout - erp-publish 동기화 (Single Source of Truth) */
  --layout-bg: #f5f6f8;
  --layout-sidebar-width: 140px;
  --layout-content-padding: 0 var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);
  --layout-content-gap: 12px; /* Publisher 동기화: 10px → 12px */
  --layout-transition: 0.15s ease;

  /* Spacing - 용도별 (Publisher 동기화) */
  --space-section-gap: 12px;
  --space-card-padding: 20px;
  --space-inner-padding: 16px;
  --space-title-gap: 10px;
  --space-item-gap: 8px;
  --layout-z-index-sidebar: 300;

  /* Sidebar */
  --sidebar-total-width: 140px;

  /* Icons */
  --icon-size-sm: 16px;
  --icon-size-lg: 30px;
  --icon-background-opacity: var(--opacity-30);

  /* Loading */
  --loading-color: var(--color-secondary);
  --loading-spinner-border: rgba(102, 102, 102, 0.25);
  --loading-spinner-active: var(--color-secondary);

  /* Code Block (Error stack trace) */
  --code-block-bg: #1f2937;
  --code-block-text: #f9fafb;
  --code-block-border: #374151;

  /* ErrorScreen - Auth variant (blue) */
  --errorscreen-auth-text: #1565c0;

  /* ErrorScreen - Error variant (red) */
  --errorscreen-error-text: #b71c1c;
  --errorscreen-error-bg: #fff3f3;
  --errorscreen-error-icon-fill: #ffcdd2;
  --errorscreen-error-icon-stroke: #b71c1c;

  /* ProgressBar */
  --progress-label-color: var(--color-foreground-300);
  --progress-bar-bg: var(--color-background-100);
  --progress-bar-border: var(--color-foreground-100);
  --progress-fill-color: var(--color-brand);

  /* ValidationAlert - Confirm Button */
  --validation-confirm-shadow: 0px 4px 12px 0px rgba(255, 107, 0, 0.4), inset 0px 8px 12px 0px #ff9b52;
  --validation-confirm-hover-bg: #ff7a1a;
  --validation-confirm-hover-shadow: 0px 6px 16px 0px rgba(255, 107, 0, 0.5), inset 0px 8px 12px 0px #ffa666;
  --validation-confirm-active-shadow: 0px 2px 8px 0px rgba(255, 107, 0, 0.3), inset 0px 8px 12px 0px #ff9b52;

  /* ConfirmDialog */
  --dialog-error-bg: #fee2e2;
  --dialog-error-border: #fca5a5;
  --dialog-error-title: #b91c1c;
  --dialog-error-text: #991b1b;
  --dialog-divider: #f3f4f6;
  --dialog-save-title: var(--color-brand-primary);
  --dialog-save-text: #4b5563;
  --dialog-save-btn-bg: var(--color-brand-primary);
  --dialog-save-btn-hover: var(--color-primary-hover);
  --dialog-save-btn-shadow: 0px 4px 12px 0px rgba(255, 107, 0, 0.35), inset 0px 4px 8px 0px #ff9b52;
  --dialog-save-btn-hover-shadow: 0px 6px 16px 0px rgba(255, 107, 0, 0.45), inset 0px 4px 8px 0px #ffa666;
  --dialog-secondary-bg: #f9fafb;
  --dialog-secondary-border: #d1d5db;
  --dialog-secondary-text: #374151;
  --dialog-secondary-hover-bg: #f3f4f6;
  --dialog-secondary-hover-border: #9ca3af;

  /* Table */
  --table-bg: var(--color-background-100);
  --table-border: #f3f4f6;
  --table-header-text: var(--color-foreground-400);
  --table-cell-text: #374151;
  --table-hover-bg: var(--color-background-300);
  --table-hover-project: var(--color-brand-primary);
  --table-hover-client: #183ee6;
  --table-hover-date: var(--color-foreground-500);
  --table-spinner-border: rgba(255, 255, 255, 0.8);
  --table-spinner-active: var(--color-brand-primary);
  --table-empty-text: #9ca3af;
  --skeleton-base: var(--color-bg-200);
  --skeleton-highlight: var(--color-bg-300);

  /* Pagination */
  --pagination-border: var(--color-foreground-100);
  --pagination-bg: var(--color-background-100);
  --pagination-text: var(--color-foreground-500);
  --pagination-hover-bg: #fff5f0;
  --pagination-hover-border: var(--color-brand-primary);
  --pagination-active-bg: var(--color-brand-primary);
  --pagination-active-text: var(--color-white);
  --pagination-disabled-text: #cccccc;

  /* SelectionModal */
  --selection-modal-bg: var(--color-background-100);
  --selection-modal-border: var(--color-foreground-100);
  --selection-modal-divider: #f3f4f6;
  --selection-modal-search-bg: var(--color-background-300);
  --selection-modal-hover-bg: #fafafa;

  /* YearSelector */
  --yearselector-selected-bg: #fff5ed;
  --yearselector-selected-hover-bg: #ffead9;
  --yearselector-scrollbar-track: var(--color-background-300);
  --yearselector-scrollbar-thumb: var(--color-foreground-200);
  --yearselector-scrollbar-thumb-hover: #a0a0a0;

  /* Sidebar */
  --sidebar-shadow-mobile: 2px 0 8px rgba(0, 0, 0, 0.15);
  --sidebar-overlay-bg: rgba(0, 0, 0, 0.5);
  --sidebar-divider-light: rgba(255, 255, 255, 0.8);
  --sidebar-active-shadow: 0 8px 12px 0 #ff9b52 inset, 0 2px 8px 0 rgba(255, 107, 0, 0.4);
  --sidebar-category-shadow: 0px 4px 6px 0px rgba(255, 107, 0, 0.2);
  --sidebar-inset-glow: 0px 8px 12px 0px inset #ff9b52;
  --sidebar-icon-hover-bg: rgba(255, 107, 53, 0.1);
  --sidebar-icon-active-bg: rgba(255, 107, 53, 0.2);
  --sidebar-draft-active-bg: #fff5eb;
  --sidebar-draft-active-shadow: inset 0px 4px 8px 0px rgba(255, 255, 255, 0.5);
  --sidebar-border-color: #e8e8e8;
  --sidebar-logo-height: 76px;

  /* Radius aliases (component use) - erp-system 원본 */
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);

  /* Shadow */
  --shadow-mobile: 2px 0 12px rgba(0, 0, 0, 0.15);

  /* Input */
  --input-border-color: #d1d5db;
  --input-placeholder-color: #9ca3af;
  --input-disabled-bg: #f9fafb;
  --input-disabled-text: #9ca3af;
  --input-readonly-bg: #f8f8f8;
  --input-filled-bg: #f9fafb;
  --input-radius: var(--spacing-xs);
  --input-label-color: #374151;
  --input-helper-color: #6b7280;
  --input-error-color: #dc2626;
  --input-error-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  --input-focus-border-color: var(--color-brand-primary);
  --input-focus-box-shadow: none;
  --input-search-bg: var(--color-background-300);
  --input-search-border: var(--color-border-secondary);
  --input-search-text: var(--color-foreground-300);
  --input-search-placeholder: var(--color-foreground-300);
  --input-search-focus-border: var(--color-border-secondary);
  --input-modal-bg: var(--color-background-300);
  --input-modal-border: var(--color-foreground-200);
  --input-modal-text: var(--color-foreground-400);
  --input-modal-placeholder: var(--color-foreground-300);
  --input-modal-readonly-bg: var(--color-background-200);
  --input-icon-color: #9ca3af;

  /* Button - base variants */
  --button-primary-bg: var(--color-brand-primary);
  --button-primary-text: var(--color-text-inverse);
  --button-primary-inset: var(--color-brand-light);
  --button-primary-hover-bg: var(--color-background-primary);
  --button-primary-hover-text: var(--color-brand-primary);
  --button-primary-active-bg: #cc5100;

  --button-secondary-bg: var(--color-background-tertiary);
  --button-secondary-text: var(--color-text-primary);
  --button-secondary-border: #ebebeb;
  --button-secondary-hover-bg: #ebebeb;
  --button-secondary-active-bg: var(--color-neutral-450);

  --button-outline-bg: var(--color-background-primary);
  --button-outline-text: var(--color-brand-primary);
  --button-outline-border: var(--color-brand-primary);
  --button-outline-hover-bg: var(--color-brand-primary);
  --button-outline-hover-text: var(--color-text-inverse);
  --button-outline-active-bg: #e55a00;

  --button-ghost-text: var(--color-text-secondary);
  --button-ghost-hover-bg: var(--color-neutral-200);
  --button-ghost-hover-text: var(--color-text-primary);
  --button-ghost-active-bg: #ebebeb;

  --button-disabled-bg: #ebebeb;
  --button-disabled-text: #c7c7c7;

  /* Button - action variants */
  --button-save-bg: var(--color-background-300);
  --button-save-border: var(--color-border-secondary);
  --button-save-text: var(--color-brand-primary);
  --button-save-hover-bg: #fff8f3;
  --button-save-hover-text: #e55a00;
  --button-save-active-bg: #fff0e6;

  --button-cancel-bg: var(--color-background-primary);
  --button-cancel-border: var(--color-border-secondary);
  --button-cancel-text: var(--color-secondary);
  --button-cancel-hover-bg: var(--color-background-300);
  --button-cancel-hover-border: #b0b0b0;
  --button-cancel-hover-text: #333333;
  --button-cancel-active-bg: #eeeeee;

  --button-upload-border: var(--color-secondary-green);
  --button-upload-text: var(--color-secondary-green);
  --button-upload-hover-bg: #f0fff0;
  --button-upload-hover-border: #2eb621;
  --button-upload-hover-text: #2eb621;
  --button-upload-active-bg: #e6ffe6;

  --button-download-border: #8b5cf6;
  --button-download-text: #8b5cf6;
  --button-download-hover-bg: #f5f3ff;
  --button-download-hover-border: #7c3aed;
  --button-download-hover-text: #7c3aed;
  --button-download-active-bg: #ede9fe;

  --button-delete-border: #ef4444;
  --button-delete-text: #ef4444;
  --button-delete-hover-bg: #fef2f2;
  --button-delete-hover-border: #dc2626;
  --button-delete-hover-text: #dc2626;
  --button-delete-active-bg: #fee2e2;

  --button-edit-border: #f59e0b;
  --button-edit-text: #f59e0b;
  --button-edit-hover-bg: #fffbeb;
  --button-edit-hover-border: #d97706;
  --button-edit-hover-text: #d97706;
  --button-edit-active-bg: #fef3c7;

  /* Alert/Warning Messages */
  --alert-warning-bg: #fef7e8;
  --alert-warning-border: var(--color-yellow-500);
  --alert-warning-text: #92400e;
  --alert-info-bg: #eff6ff;
  --alert-info-border: var(--color-blue-500);
  --alert-info-text: #1e40af;
  --alert-success-bg: #f0fdf4;
  --alert-success-border: var(--color-green-500);
  --alert-success-text: var(--color-green-600);
  --alert-error-bg: #fef2f2;
  --alert-error-border: var(--color-red-500);
  --alert-error-text: var(--color-red-600);

  /* Container Shadow - 블러 없음 (erp-publish 원본) */
  --container-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05);
  --container-shadow-md: 0 2px 0 rgba(0, 0, 0, 0.05);
  --container-shadow-lg: 0 4px 0 rgba(0, 0, 0, 0.08);

  /* Input Shadows */
  --shadow-inset-light: rgba(0, 0, 0, 0.08);

  /* ============================================
     Legacy Compatibility (erp-system 전용)
     components.css에서 참조하는 기존 토큰들
     ============================================ */

  /* Color - Legacy aliases */
  --color-primary-lighter: #fff8f5;
  --color-primary-border-light: #ffe4d4;
  --color-primary-soft: #ff8533;
  --color-primary-dark: #e55a00;
  --color-primary-alpha-04: rgba(255, 107, 0, 0.04);
  --color-primary-alpha-06: rgba(255, 107, 0, 0.06);
  --color-primary-alpha-10: rgba(255, 107, 0, 0.1);
  --color-primary-alpha-15: rgba(255, 107, 0, 0.15);
  --color-primary-alpha-20: rgba(255, 107, 0, 0.2);
  --color-primary-alpha-40: rgba(255, 107, 0, 0.4);
  --color-primary-border: rgba(255, 107, 0, 0.2);

  /* Status - Legacy aliases */
  --color-success-dark: #16a34a;
  --color-success-border: rgba(22, 163, 74, 0.2);
  --color-error-dark: #dc2626;
  --color-error-border: rgba(220, 38, 38, 0.2);
  --color-info-dark: #0284c7;
  --color-info-border: rgba(2, 132, 199, 0.2);
  --color-purple: #a78bfa;
  --color-purple-light: #f5f3ff;
  --color-purple-border: #e9e4ff;
  --color-gray-light: #eceff1;

  /* Font - Legacy alias */
  --font-family: 'Pretendard', 'Pretendard Variable', sans-serif;

  /* Radius - Legacy aliases */
  --card-radius: var(--radius-lg);

  /* Shadow는 semantic.css의 --shadow-*를 사용한다. */

  /* Z-index는 semantic.css의 --z-*를 사용한다. */

  /* Breakpoint Tokens (문서화 + JS 참조용, CSS @media에서는 값 직접 사용) */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1200px;
  --bp-wide: 1400px;

  /* Mobile Responsive Tokens */
  --mobile-header-height: 52px; /* primitive.css와 통일 (publish MobileGNB 기준) */
  --mobile-touch-target: 44px;
  --mobile-bottom-nav-height: 60px;
  --mobile-padding-xs: 8px;
  --mobile-padding-sm: 12px;
  --mobile-padding-md: 16px;
  --mobile-padding-lg: 20px;
  --mobile-gap-xs: 8px;
  --mobile-gap-sm: 12px;
  --mobile-gap-md: 16px;
  --mobile-font-xs: 12px;
  --mobile-font-sm: 13px;
  --mobile-font-md: 14px;
  --mobile-font-lg: 16px;
  --mobile-font-xl: 18px;
  --mobile-line-height: 1.5;
  --mobile-transition: all 0.2s ease;

  /* Approval Sidebar */
  --approval-sidebar-width: 340px;
  --approval-sidebar-collapsed: 0px;

  /* Misc Legacy */
  --bg-gray: #f5f6f8;
  --bg-gray-light: #fafafa;
  --bg-primary-light: #fff5f0;
  --bg-secondary: #f8f9fa;
  /* semantic.css의 --text-* / --border-default를 재정의하지 않는다. */
  --primary-color: #4a7cfe;
  --primary-default: var(--color-brand-primary);
  --surface-default: var(--surface-primary);
  --card-border: 1px solid var(--color-border-primary);
  --sidebar-expanded: var(--layout-sidebar-width);
  --space-small-gap: 8px;

  /* Component Sizes - Legacy */
  --input-height-sm: 30px;
  --input-height-lg: 40px;
  --card-gap: 12px;

  /* Spacing - 용도별 Legacy */
  --space-cell-x: 12px;
  --space-cell-y: 10px;
  --space-inline-gap: 6px;

  /* Gradient - Legacy */
  --gradient-primary-btn: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 100%);
}
/* ==========================================================================
   Pretendard Font Face (publish SSOT 동기화)
   index.html에서 Variable 폰트 로드 (100-900 전체 weight 지원)
   개별 weight @font-face는 폴백용으로 유지
   ========================================================================== */
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Pretendard/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Pretendard/Pretendard-Bold.woff2') format('woff2');
}
/* ==========================================================================
   CSS Reset & Base Styles (Merged from base.css)
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px; /* 1rem = 16px 기준 설정 */
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* 다크모드 완전 차단 */
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
  forced-color-adjust: none !important;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
html,
body {
  height: 100%;
  font-family: 'Pretendard', sans-serif;
  font-variant-numeric: tabular-nums;
  background-color: var(--layout-bg, var(--color-bg-400));
  color: var(--color-text-primary, var(--color-neutral-800));
  line-height: var(--line-height-normal, 1.5);
  font-size: var(--font-size-sm, 11px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
   React Root Container - Flex Chain (Publisher 동기화)
   html → body → #root → AppLayout 연결
   ========================================================================== */
#root {
  width: 100%;
  height: 100%;
}
/* ==========================================================================
   Typography & Links (Merged from base.css)
   ========================================================================== */
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease; /* 색상 변화 부드럽게 */
}
a:focus-visible {
  outline: 2px solid var(--color-border-focus); /* Teams 포커스 색상 */
  outline-offset: 2px;
}
/* ==========================================================================
   Form Elements (Merged from base.css)
   ========================================================================== */
button {
  font-family: inherit;
  font-variant-numeric: inherit;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease; /* 부드러운 상호작용 */
}
button:focus-visible {
  outline: 2px solid var(--color-border-focus); /* Teams 포커스 색상 */
  outline-offset: 2px;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
input,
select,
textarea {
  font-family: inherit;
  font-variant-numeric: inherit;
  font-size: inherit;
  border: none;
  background: transparent;
  transition: all 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted, #9E9E9E);
  opacity: 1; /* Firefox 호환성 */
}
/* ==========================================================================
   Lists, Images & Tables (Merged from base.css)
   ========================================================================== */
ul,
ol {
  list-style: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block; /* 하단 여백 제거 */
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  padding: 0;
}
/* ==========================================================================
   Selection & Scrollbar (Merged from base.css)
   ========================================================================== */
::selection {
  background-color: var(--color-brand-primary);
  color: var(--color-background-100, var(--color-white));
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 0, 0.08);
  border: 3px solid transparent;
  border-radius: 6px;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.1);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 0, 0.12);
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.15);
}
/* ==========================================================================
   Accessibility & Responsive (Enhanced)
   ========================================================================== */
/* Teams 접근성 및 반응형 개선 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    /* 고대비 모드에서 더 강한 대비 */
    --color-foreground-500: var(--color-neutral-900);
    --color-brand-primary: var(--color-info);
    --color-brand-main: var(--color-brand-primary);
  }
}
/* 200% 확대 지원 */
@media (min-resolution: 192dpi) {
  html,
  body {
    /* 고해상도에서 선명한 폰트 렌더링 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@media (max-width: 768px) {
  /* iOS Safari 가로 확장 방지 */
  html, body, #root {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .hide-mobile {
    display: none !important;
  }

  .flex-column-mobile {
    flex-direction: column;
  }

  .grid-1-mobile {
    grid-template-columns: 1fr;
  }

  /* 그리드 유틸리티 1컬럼 전환 */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* 터치 친화적 최소 크기 */
  button,
  [role="button"],
  a[href] {
    min-height: var(--touch-min-size, var(--mobile-touch-target));
  }

  /* 입력 필드 zoom 방지 */
  input,
  select,
  textarea {
    font-size: var(--font-size-16);
  }
}
/* ==========================================================================
   Focus Styles (Enhanced)
   ========================================================================== */
*:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* ==========================================================================
   Utility Classes
   ========================================================================== */
.standard-page-container {
  width: 100%;
}
.standard-section {
  width: 100%;
}
.flex {
  display: flex;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.grid {
  display: grid;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ==========================================================================
   Common Component Utilities
   ========================================================================== */
/* Transition utilities - 표준 트랜지션 패턴 */
.transition-smooth {
  transition: all 0.15s ease;
}
.transition-colors {
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}
/* Flex utilities */
.flex-shrink-0 {
  flex-shrink: 0;
}
/* Spacing utilities */
.p-0 {
  padding: 0;
}
.p-1 {
  padding: var(--spacing-xs);
}
.p-2 {
  padding: var(--spacing-sm);
}
.p-3 {
  padding: var(--spacing-md);
}
.p-4 {
  padding: var(--spacing-lg);
}