/**
 * Icons.module.css - 통일된 아이콘 색상 시스템
 * 
 * 색상 규칙:
 * - 기본: 회색 (#9E9E9E)
 * - 호버: 오렌지 (#FF6B00)
 * - 포커스: 기존 포커스 색상
 * - 오렌지 배경: 흰색 (부모에서 설정)
 */

/* ============================================================ */
/* 기본 아이콘 스타일 */
/* ============================================================ */

._icon_rg8bz_15 {
  display: inline-block;
  /* globals.css에서 transition-smooth와 flex-shrink-0 유틸리티 사용 가능 */
}

/* 상호작용 가능한 아이콘 */
._interactive_rg8bz_21 {
  cursor: pointer;
}

/* 호버 효과: 오렌지색으로 변경 */
._interactive_rg8bz_21:hover {
  --icon-stroke-color: var(--color-brand-primary);
  transform: scale(1.05);
}

/* 색상 오버라이드 클래스들 - 필요시에만 사용 */
._primary_rg8bz_32 {
  --icon-stroke-color: var(--color-brand-primary) !important;
}

._secondary_rg8bz_36 {
  --icon-stroke-color: var(--color-text-secondary) !important;
}

._success_rg8bz_40 {
  --icon-stroke-color: var(--color-success) !important;
}

._danger_rg8bz_44 {
  --icon-stroke-color: var(--color-danger) !important;
}

._warning_rg8bz_48 {
  --icon-stroke-color: var(--color-warning) !important;
}

/* 포커스 효과는 globals.css의 *:focus-visible에서 자동 적용됨 */
._interactive_rg8bz_21:focus-visible {
  border-radius: 2px;
}

/* ============================================================ */
/* 접근성 개선 */
/* ============================================================ */

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  ._icon_rg8bz_15 {
    filter: contrast(1.2);
  }
}

/* 모션 감소 설정 지원 */
@media (prefers-reduced-motion: reduce) {
  ._icon_rg8bz_15 {
    transition: none;
  }

  ._interactive_rg8bz_21:hover {
    transform: none;
  }
}
._button_130ha_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_130ha_1:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

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

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

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

._primary_130ha_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_130ha_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_130ha_52:active {
  background-color: var(--button-primary-active-bg);
}

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

._secondary_130ha_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_130ha_78:hover:not(:disabled) {
  background-color: var(--button-secondary-hover-bg);
  /* 호버 시 아이콘도 오렌지로 변경 */
  --icon-stroke-color: var(--color-brand-primary);
}

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

._outline_130ha_96 {
  background-color: var(--button-outline-bg);
  color: var(--button-outline-text);
  border: 1px solid var(--button-outline-border);
  /* 버튼 내부 아이콘도 오렌지로 설정 */
  --icon-stroke-color: var(--button-outline-text);
}

._outline_130ha_96:hover:not(:disabled) {
  background-color: var(--button-outline-hover-bg);
  color: var(--button-outline-hover-text);
  border-color: var(--button-outline-border);
  box-shadow: 0px 8px 12px 0px inset var(--button-primary-inset);
  /* 호버 시 아이콘도 흰색으로 변경 */
  --icon-stroke-color: var(--button-outline-hover-text);
}

._outline_130ha_96:active {
  background-color: var(--button-outline-active-bg);
  border-color: var(--button-outline-active-bg);
  box-shadow: 0px 8px 12px 0px inset var(--button-primary-inset);
}

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

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

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

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

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

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

._fullWidth_130ha_160 {
  width: 100%;
}

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

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

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

/* 저장/수정 버튼 (오렌지) */
._save_130ha_184 {
  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_130ha_184: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_130ha_184:active {
  background: var(--button-save-active-bg);
}

/* 취소 버튼 */
._cancel_130ha_206 {
  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_130ha_206:hover:not(:disabled) {
  background: var(--button-cancel-hover-bg);
  border-color: var(--button-cancel-hover-border);
  color: var(--button-cancel-hover-text);
}

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

/* 제출 버튼 (파란색) */
._submit_130ha_224 {
  background: var(--color-background-primary);
  border: 1px solid var(--button-submit-border);
  color: var(--button-submit-text);
  --icon-stroke-color: var(--button-submit-text);
}

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

._submit_130ha_224:active {
  background: var(--button-submit-active-bg);
}

/* 업로드 버튼 (초록색) */
._upload_130ha_242 {
  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_130ha_242:hover:not(:disabled) {
  background: var(--button-upload-hover-bg);
  border-color: var(--button-upload-hover-border);
  color: var(--button-upload-hover-text);
}

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

/* 다운로드 버튼 */
._download_130ha_260 {
  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_130ha_260:hover:not(:disabled) {
  background: var(--button-download-hover-bg);
  border-color: var(--button-download-hover-border);
  color: var(--button-download-hover-text);
}

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

/* 삭제 버튼 (빨간색) */
._delete_130ha_278 {
  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_130ha_278: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_130ha_278:active {
  background: var(--button-delete-active-bg);
}

/* 수정 버튼 */
._edit_130ha_298 {
  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_130ha_298:hover:not(:disabled) {
  background: var(--button-edit-hover-bg);
  border-color: var(--button-edit-hover-border);
  color: var(--button-edit-hover-text);
}

._edit_130ha_298:active {
  background: var(--button-edit-active-bg);
}
._iconButton_18p5f_1 {
  inline-size: 34px;
  block-size: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  padding: 0;
  box-sizing: border-box;
}

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

._ghost_18p5f_23 {
  background: transparent;
}

._ghost_18p5f_23:not(:disabled):hover {
  background: var(--color-background-300);
}

._solid_18p5f_31 {
  background: var(--color-background-400);
}

._solid_18p5f_31:not(:disabled):hover {
  background: var(--color-background-300);
}

._active_18p5f_39 {
  background: var(--iconbutton-active-bg);
  color: var(--iconbutton-active-text);
  box-shadow: var(--iconbutton-active-shadow);
  border: 1px solid var(--iconbutton-active-border);
}

/* 활성 상태 hover - 배경색 유지 */
._active_18p5f_39:not(:disabled):hover {
  background: var(--iconbutton-active-bg);
}

._size-sm_18p5f_51 {
  inline-size: 28px;
  block-size: 28px;
}

._size-lg_18p5f_56 {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
}
/* ========================================
   DashboardSection Component Styles
   Publisher 동기화: erp-publish/src/styles/company-goals.css
   ======================================== */

/* === 메인 컨테이너 === */
._section_ecqtu_7 {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-neutral-350, #e5e5e5);
  padding: 16px var(--space-card-padding, 20px);
  border-radius: var(--radius-lg, 12px);
}

/* 변형: compact (좁은 간격) - Publisher 동기화 */
._sectionCompact_ecqtu_15 {
  padding: 12px var(--space-card-padding, 20px);  /* erp-publish 동기화: 상하 동일 12px */
}

._sectionCompact_ecqtu_15 ._header_ecqtu_19 {
  margin-bottom: 6px;
}

/* === 헤더 영역 === */
._header_ecqtu_19 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* 뱃지 (예: XP-01) */
._badge_ecqtu_32 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-brand-primary, #ff6b00);
  background: #fff5f0;
  border: 1px solid var(--color-brand-primary, #ff6b00);
  border-radius: 4px;
  flex-shrink: 0;
}

/* 제목 */
._title_ecqtu_49 {
  font-size: 14px;
  font-weight: var(--font-weight-bold, 700);
  color: #3c3c3c;
  margin-bottom: 0;
}

/* 단위 텍스트 (오른쪽 정렬) - Publish SSOT 동기화 */
._unit_ecqtu_57 {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-neutral-600, #757575);
}

/* === 내부 회색 박스 === */
._inner_ecqtu_65 {
  background: #f5f5f5;
  border-radius: 4px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 0;
}

/* === 5:5 비율 레이아웃 그룹 === */
._statGroupLeft_ecqtu_75 {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* 왼쪽 그룹 내 2:8 비율 (재무목표 : 목표달성률) */
._statGroupLeft_ecqtu_75 > ._statItem_ecqtu_83 {
  flex: 2;
  min-width: 0;
}

._statGroupLeft_ecqtu_75 > ._progressStat_ecqtu_88 {
  flex: 8;
  min-width: 0;
}

/* 왼쪽 그룹 내 마지막 아이템 border 제거 */
._statGroupLeft_ecqtu_75 > ._statItem_ecqtu_83:last-child,
._statGroupLeft_ecqtu_75 > ._progressStat_ecqtu_88:last-child {
  border-right: none;
  padding-right: 0;
}

._statGroupRight_ecqtu_100 {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid #e0e0e0;
}

/* 오른쪽 그룹 내 균등 비율 (25% 씩) */
._statGroupRight_ecqtu_100 > ._statItem_ecqtu_83 {
  flex: 1;
  min-width: 0;
}

/* 오른쪽 그룹 내 첫 아이템 padding-left 조정 */
._statGroupRight_ecqtu_100 > ._statItem_ecqtu_83:first-child {
  padding-left: 0;
}

/* === Stat Item (개별 통계 항목) - Publish SSOT 동기화 === */
._statItem_ecqtu_83 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px; /* Publish SSOT: 24px → 16px */
  border-right: 1px solid #e0e0e0;
}

._statItem_ecqtu_83:first-child {
  padding-left: 0;
}

._statItem_ecqtu_83:last-child {
  border-right: none;
  padding-right: 0;
}

/* 라벨 */
._statLabel_ecqtu_139 {
  height: 13px;
  font-size: 11px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-secondary, #5f5f5f);
}

/* 값 - Publish SSOT 동기화: 16px, min-width 제거 */
._statValue_ecqtu_149 {
  height: 24px;
  display: flex;
  align-items: center;
  font-size: 16px; /* Publish SSOT: 20px → 16px */
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;
  letter-spacing: -0.3px;
  white-space: nowrap;
  /* Publish SSOT: min-width 없음 - 콘텐츠 크기만큼만 차지 */
  color: var(--text-value, #757575);
}

/* 고정 너비 variant - 카운트업 애니메이션 등 레이아웃 점프 방지 */
._statValueFixed_ecqtu_163 {
  width: 85px; /* Publish SSOT D12: 100px → 85px */
}

._statValueRevenue_ecqtu_167 {
  color: var(--color-primary, #ff6b00);
  min-width: 100px; /* Publish SSOT D10: 240px → 100px */
}

._statValueRevenueFixed_ecqtu_172 {
  width: 100px; /* Publish SSOT D10: 240px → 100px */
}

._statValueAchievement_ecqtu_176 {
  color: var(--color-primary, #ff6b00);
  font-size: 16px; /* Publish SSOT: 20px → 16px */
  min-width: 60px; /* Publish SSOT D11: 70px → 60px */
}

._statValueAchievementFixed_ecqtu_182 {
  width: 60px; /* Publish SSOT D11: 70px → 60px */
}

/* === Progress Stat (달성률 + 프로그레스바 묶음) - Publish SSOT D7 동기화 === */
._progressStat_ecqtu_88 {
  flex: 1;
  padding: 0 16px; /* Publish SSOT D7: 24px → 16px */
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px; /* Publish SSOT D7: 5px → 12px */
}

._progressStat_ecqtu_88:last-child {
  border-right: none;
  padding-right: 0;
}

/* 달성률 텍스트 그룹 */
._achievementGroup_ecqtu_203 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* === Progress Bar - Publish SSOT 동기화: 2캡슐 구조 === */
._progressWrapper_ecqtu_211 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px; /* Publish SSOT D8: 0 → 140px */
  /* padding-right 제거 - Publish SSOT D8 */
}

/* 라벨 영역 - Publish SSOT: flex 비율 방식 */
._progressLabels_ecqtu_221 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._progressLabelGoal_ecqtu_227 {
  flex: 3;
  text-align: right;
  padding-right: 4px;
  font-size: 11px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
  color: var(--color-neutral-400, #9e9e9e);
  transition: color 0.3s ease;
}

._progressLabelGoalHighlight_ecqtu_238 {
  color: var(--color-primary, #ff6b00);
  font-weight: var(--font-weight-bold, 700);
}

._progressLabelExceed_ecqtu_243 {
  flex: 1;
  min-width: 60px;
  text-align: right;
  font-size: 11px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
  color: var(--color-neutral-400, #9e9e9e);
  transition: color 0.3s ease;
}

/* Publish SSOT: 초과달성도 주황색 (단색) */
._progressLabelExceedHighlight_ecqtu_255 {
  color: var(--color-primary, #ff6b00);
  font-weight: var(--font-weight-bold, 700);
}

/* 프로그레스바 컨테이너 - Publish SSOT: 2캡슐 구조 */
._progressBarsContainer_ecqtu_261 {
  display: flex;
  gap: 4px;
}

/* 목표달성 캡슐 래퍼 (0~100%) - Publish SSOT: flex 3, 인셋 padding */
._progressBarGoalWrapper_ecqtu_267 {
  flex: 3;
  height: 16px;
  background: var(--color-white, #ffffff);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 2px; /* Publish SSOT: 인셋 스타일 */
  box-sizing: border-box;
}

/* 초과달성 캡슐 래퍼 (100%+) - Publish SSOT: flex 1 */
._progressBarExceedWrapper_ecqtu_278 {
  flex: 1;
  min-width: 60px;
  height: 16px;
  background: var(--color-white, #ffffff);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 2px; /* Publish SSOT: 인셋 스타일 */
  box-sizing: border-box;
}

/* 목표달성 바 (캡슐 내부) - Publish SSOT: 단색 주황 */
._progressBarGoal_ecqtu_267 {
  height: 100%;
  background: var(--color-primary, #ff6b00);
  width: 0;
  border-radius: 6px;
  transition: width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

._progressBarGoalNoTransition_ecqtu_298 {
  transition: none !important;
}

/* 초과달성 바 (캡슐 내부) - Publish SSOT: 단색 주황 (동일) */
._progressBarExceed_ecqtu_278 {
  height: 100%;
  background: var(--color-primary, #ff6b00); /* Publish SSOT: 분리색→단색 */
  width: 0;
  border-radius: 6px;
  transition: width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 1.2s; /* Publish SSOT: 0.4s → 1.2s */
}

._progressBarExceedNoTransition_ecqtu_312 {
  transition: none !important;
}

/* 레거시 호환: 기존 단일 컨테이너 (사용하지 않지만 유지) */
._progressBarContainer_ecqtu_317 {
  display: none;
}

/* ========================================
   Mobile Responsive - Publisher 동기화
   ======================================== */
@media (max-width: 768px) {
  ._section_ecqtu_7 {
    padding: var(--mobile-padding-md, 12px);
  }

  ._sectionCompact_ecqtu_15 {
    padding: var(--mobile-padding-sm, 8px) var(--mobile-padding-md, 12px);
  }

  ._sectionCompact_ecqtu_15 ._header_ecqtu_19 {
    margin-bottom: 10px !important;
  }

  ._header_ecqtu_19 {
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
  }

  ._badge_ecqtu_32 {
    font-size: 9px;
    padding: 0 6px;
    height: 16px;
  }

  ._title_ecqtu_49 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  ._unit_ecqtu_57 {
    font-size: 10px;
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }

  /* Inner - 세로 방향 flex로 변경 (그룹 대응) */
  ._inner_ecqtu_65 {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-gap-md, 12px);
    padding: var(--mobile-padding-md, 12px);
  }

  /* 그룹 - 모바일에서는 2열 그리드 */
  ._statGroupLeft_ecqtu_75,
  ._statGroupRight_ecqtu_100 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-gap-md, 12px);
    padding-left: 0;
    border-left: none;
  }

  ._statGroupRight_ecqtu_100 {
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
  }

  ._statItem_ecqtu_83 {
    padding: 0;
    border-right: none !important;
    width: 100%;
  }

  ._statItem_ecqtu_83:first-child {
    padding-left: 0;
  }

  ._statItem_ecqtu_83:last-child {
    padding-right: 0;
  }

  ._statLabel_ecqtu_139 {
    font-size: 11px;
    padding-top: 0;
  }

  ._statValue_ecqtu_149 {
    font-size: var(--mobile-font-lg, 16px);
    min-width: unset;
  }

  ._statValueFixed_ecqtu_163 {
    width: auto;
  }

  ._statValueRevenue_ecqtu_167 {
    font-size: var(--mobile-font-lg, 16px);
    min-width: unset;
  }

  ._statValueRevenueFixed_ecqtu_172 {
    width: auto;
  }

  ._statValueAchievement_ecqtu_176 {
    font-size: var(--mobile-font-lg, 16px);
    min-width: unset;
  }

  ._statValueAchievementFixed_ecqtu_182 {
    width: auto;
  }

  /* Progress Stat - Full width (spans 2 columns), single row - Publisher 동기화 */
  ._progressStat_ecqtu_88 {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 12px 0 0 0;
    margin-top: 12px;
    border-right: none;
    border-top: 1px solid #E0E0E0;
  }

  ._progressStat_ecqtu_88:last-child {
    border-right: none;
    padding-right: 0;
  }

  ._achievementGroup_ecqtu_203 {
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  ._achievementGroup_ecqtu_203 ._statLabel_ecqtu_139 {
    padding-top: 0;
  }

  ._progressWrapper_ecqtu_211 {
    flex: 1;
    min-width: unset;
  }

  ._progressBarContainer_ecqtu_317 {
    height: 14px;
  }
}
/**
 * Pagination 컴포넌트 스타일
 * Publisher 동기화 - 프로젝트 목록 페이지네이션
 */

._paginationWrapper_16eo8_6 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Pretendard', sans-serif;
  padding: 12px 0 48px 0;
}

._paginationContainer_16eo8_15 {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 네비게이션 버튼 (이전/다음) - Publisher 동기화 */
._navButton_16eo8_22 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-neutral-550, #BDBDBD);
  cursor: pointer;
  transition: all 0.15s ease;
}

._navButton_16eo8_22:hover:not(._disabled_16eo8_36) {
  background: var(--color-neutral-50, #FAFAFA);
  color: var(--color-neutral-750, #5C5C5C);
}

._navButton_16eo8_22._disabled_16eo8_36 {
  opacity: 0.3;
  cursor: not-allowed;
}

._navButton_16eo8_22 svg {
  width: 16px;
  height: 16px;
}

/* 페이지 번호 버튼 - Publisher 동기화 */
._pageButton_16eo8_52 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-neutral-600, #9E9E9E);
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

._pageButton_16eo8_52:hover:not(._active_16eo8_69) {
  background: var(--color-neutral-50, #FAFAFA);
}

._pageButton_16eo8_52._active_16eo8_69 {
  background: var(--color-brand-primary, #FF6B00);
  color: #fff;
}

/* 생략 표시 - Publisher 동기화 */
._ellipsis_16eo8_79 {
  font-size: 12px;
  color: var(--color-neutral-400, #9E9E9E);
  padding: 0 4px;
}

/* 빠른 점프 (기존 기능 유지) */
._quickJumper_16eo8_86 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-neutral-500, #757575);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

._jumpInput_16eo8_96 {
  width: 50px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-neutral-200, #E8E8E8);
  border-radius: 4px;
  background: transparent;
  color: var(--color-neutral-700, #5F5F5F);
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  transition: border-color 0.15s ease;
}

._jumpInput_16eo8_96:hover {
  border-color: var(--color-neutral-300, #D9D9D9);
}

._jumpInput_16eo8_96:focus {
  outline: none;
  border-color: var(--color-brand-primary, #FF6B00);
}

._jumpButton_16eo8_120 {
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-neutral-500, #757575);
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

._jumpButton_16eo8_120:hover {
  background: var(--color-neutral-50, #F5F6F8);
  color: var(--color-brand-primary, #FF6B00);
}

/* 모바일 스타일 - Publisher 동기화 */
@media (max-width: 768px) {
  ._paginationWrapper_16eo8_6 {
    gap: 8px;
    padding: 8px 0 32px 0;
  }

  ._paginationContainer_16eo8_15 {
    gap: 8px;
  }

  ._navButton_16eo8_22 {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  ._navButton_16eo8_22 svg {
    width: 20px;
    height: 20px;
  }

  ._pageButton_16eo8_52 {
    min-width: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
  }

  ._ellipsis_16eo8_79 {
    font-size: 14px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    height: 40px;
  }

  ._quickJumper_16eo8_86 {
    font-size: 14px;
  }

  ._jumpInput_16eo8_96 {
    width: 60px;
    height: 40px;
    font-size: 14px;
    border-radius: 8px;
  }

  ._jumpButton_16eo8_120 {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 8px;
  }
}
/**
 * Table 컴포넌트 스타일
 * 회사 고유 디자인 시스템 적용
 */

._container_pou6h_6 {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  min-height: 560px; /* Publish SSOT G1: 10행 기준: thead 40px + tbody 520px (10 × 52px) */
}

._table_pou6h_14 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: transparent;
  table-layout: fixed;
}

._thead_pou6h_22 {
  background-color: var(--color-neutral-50, #F5F6F8);
  border-bottom: 1px solid var(--border-divider, #F3F4F6);
  height: 40px;
}

._thead_pou6h_22 tr {
  height: 40px;
}

._th_pou6h_22 {
  text-align: left;
  color: var(--color-neutral-700, #5F5F5F);
  /* typography/body/xxsb - Publisher 동기화 */
  font-family: 'Pretendard', sans-serif !important;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 18px !important;
  border: none;
  cursor: default;
  user-select: none;
  height: 40px;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
  transition: background 0.15s ease;
  /* Publish SSOT: th/td padding 동기화 */
  padding: var(--space-cell-y, 10px) var(--space-cell-x, 12px);
}

/* Publish SSOT: 테이블 헤더 호버 효과 제거 */

/* erp-publish 동기화: 첫번째/마지막 컬럼 좌우 패딩 */
._th_pou6h_22:first-child {
  padding-left: 20px;
}

._th_pou6h_22:last-child {
  padding-right: 20px;
}

._center_pou6h_64 {
  text-align: center;
}

._right_pou6h_68 {
  text-align: right;
}

/* 정렬 가능 헤더 - erp-publish 동기화 */
._sortable_pou6h_73 {
  cursor: pointer;
}

/* Publish SSOT: sortable 헤더 호버 효과 제거 */

/* 정렬 헤더 내용 래퍼 */
._headerContent_pou6h_80 {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Publish SSOT G11: 정렬 아이콘 */
._sortIcon_pou6h_87 {
  font-size: 10px;
  color: var(--color-neutral-450, #9E9E9E);
  transition: color 0.15s ease;
}

._sortIconActive_pou6h_93 {
  color: var(--color-brand-primary, #FF6B00);
}

._tbody_pou6h_97 {
  background-color: transparent;
}

._tr_pou6h_101 {
  cursor: default;
  transition: background-color 0.15s ease;
  height: 52px; /* Publish SSOT G1: 52px */
}

/* Publish SSOT G4: 호버 시 배경색 */
._tr_pou6h_101:hover {
  background-color: var(--color-primary-lighter, var(--table-hover-bg));
  /* CSS 변수를 사용하여 각 셀에서 개별적으로 호버 색상 적용 */
  --hover-project-name-color: var(--table-hover-project);
  --hover-client-color: var(--table-hover-client);
  --hover-department-color: var(--table-hover-project);
  --hover-date-amount-color: var(--table-hover-date);
}

._td_pou6h_117 {
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size-base, 12px); /* Publish SSOT G2: 11px → 12px */
  font-style: normal;
  font-weight: var(--font-weight-regular, 400); /* Publish SSOT G2: 700 → 400 */
  line-height: 1.5; /* Publish SSOT: globals.css 상속값과 동기화 */
  padding: var(--space-cell-y, 10px) var(--space-cell-x, 12px); /* Publish SSOT G3 */
  color: var(--color-neutral-600, var(--table-cell-text));
  border-bottom: 1px solid var(--color-neutral-350, var(--table-border));
  height: 52px; /* Publish SSOT G1: 52px */
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 52px; /* Publish SSOT G1: 52px */
  vertical-align: middle;
}

/* 마지막 row의 border-bottom 제거 - 컨테이너 테두리와 중첩 방지 */
._tr_pou6h_101:last-child ._td_pou6h_117 {
  border-bottom: none;
}

/* erp-publish 동기화: 첫번째/마지막 컬럼 좌우 패딩 */
._td_pou6h_117:first-child {
  padding-left: 20px;
}

._td_pou6h_117:last-child {
  padding-right: 20px;
}

._loading_pou6h_149 {
  min-height: 200px;
  position: relative;
}

._loadingOverlay_pou6h_154 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1;
  pointer-events: none;
}

._loadingSpinner_pou6h_165 {
  width: 32px;
  height: 32px;
  border: 4px solid var(--table-spinner-border);
  border-top-color: var(--table-spinner-active);
  border-radius: 50%;
  animation: _tableLoadingSpin_pou6h_1 1s linear infinite;
}

@keyframes _tableLoadingSpin_pou6h_1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   Publish SSOT G5: 빈 상태(Empty State)
   ======================================== */
._emptyRow_pou6h_186 {
  background: transparent !important;
}

._emptyRow_pou6h_186:hover {
  background: transparent !important;
}

._emptyCell_pou6h_194 {
  text-align: center !important;
  padding: 60px 20px !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-550, var(--color-neutral-600));
}

/* ========================================
   Publish SSOT G6: Skeleton 로딩
   ======================================== */
@keyframes _shimmer_pou6h_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

._skeletonRow_pou6h_214 ._td_pou6h_117 {
  padding: 12px;
  border-bottom: 1px solid var(--color-neutral-350);
}

._skeletonBox_pou6h_219 {
  height: 16px;
  border-radius: 4px;
  background: var(--color-bg-200, #F5F5F5);
  background-image: linear-gradient(
    90deg,
    var(--color-bg-200, #F5F5F5) 25%,
    var(--color-bg-300, #E8E8E8) 50%,
    var(--color-bg-200, #F5F5F5) 75%
  );
  background-size: 200% 100%;
  animation: _shimmer_pou6h_1 1.5s infinite;
  width: 80%;
}

/* ========================================
   Publish SSOT G7: Sticky Header
   ======================================== */
._stickyHeader_pou6h_237 ._th_pou6h_22 {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 var(--border-divider, var(--color-gray-100));
}

/* ========================================
   Publish SSOT G8: 클릭 가능 행
   ======================================== */
._clickableRow_pou6h_247 {
  cursor: pointer;
}

._clickableRow_pou6h_247:hover {
  background-color: var(--color-primary-lighter, var(--table-hover-bg));
}

/**
 * TableCells 스타일시트
 * 재사용 가능한 테이블 셀 컴포넌트들의 스타일 정의
 */

/* ============= Base Styles ============= */

._textCell_mxqxl_8 {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

._emptyCell_mxqxl_14 {
  color: var(--color-text-disabled);
  font-size: 14px;
}

/* ============= Project Cells ============= */

/* 1. 컨테이너 - Publish SSOT 동기화: flex-start 정렬 + position relative for indicator */
._projectNumberContainer_mxqxl_22 {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative; /* E6: 빨간점 position absolute 대응 */
}

/* 2. 프로젝트 코드 박스 - Publish SSOT 동기화: box 스타일 (pill → box) */
._projectNumberLeft_mxqxl_30 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-brand-primary, #FF6B00);
  background: var(--color-primary-light, #FFF5F0);
  box-sizing: border-box;
}

/* 3. 오른쪽 영역 (변동 표시) */
._projectNumberRight_mxqxl_42 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 프로젝트 번호 텍스트 - Publish SSOT 동기화: 10px, 600 */
._projectNumberText_mxqxl_49 {
  color: var(--color-brand-primary, #FF6B00);
  text-align: center;
  font-family: Pretendard;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* 변동 표시 빨간 점 - Publish SSOT E6 동기화 */
._changedIndicator_mxqxl_61 {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 4px;
  height: 4px;
  background: var(--color-brand-primary, #ff6b00);
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

._projectNameCell_mxqxl_73 {
  display: flex;
  align-items: center;
  /* Publish SSOT E7: padding-left 10px 제거, min-height 제거 (1줄 표시) */
}

._projectNameText_mxqxl_79 {
  color: var(--hover-project-name-color, var(--color-foreground-500));
  /* Publish SSOT 동기화: font-weight 600, 1줄 말줄임 */
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px; /* Publish SSOT: 150% */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* Publish SSOT: 1줄만 표시 */
  flex: 1;
  transition: color 0.2s ease;
}

/* 호버 transition 효과 제거 (Table.module.css에서 처리) */

/* ============= Entity Cells ============= */

._entityCell_mxqxl_98 {
  color: var(--color-foreground-300);
  /* typography/body/xsb */
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 150% */
  transition: color 0.2s ease;
}

/* 고객사 셀의 호버 색상 */
[data-cell='client'] {
  color: var(--hover-client-color, var(--color-foreground-300));
}

/* 주관부서 셀의 호버 색상 */
[data-cell='department'] {
  color: var(--hover-department-color, var(--color-foreground-300));
}

/* ============= Client + PM Combined Cell ============= */

._clientPMCell_mxqxl_121 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
}

._clientPMClient_mxqxl_129 {
  color: var(--hover-client-color, var(--color-foreground-300));
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}

._clientPMPm_mxqxl_141 {
  color: var(--color-foreground-200);
  font-family: Pretendard;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* ============= Date Cells ============= */

._dateCell_mxqxl_155 {
  color: var(--hover-date-amount-color, var(--color-foreground-300));
  /* typography/body/xsb */
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 150% */
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* ============= User Cells ============= */

._userCell_mxqxl_169 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

._userAvatar_mxqxl_176 {
  width: 38px !important;
  height: 38px !important;
  border-radius: 6.6px;
  object-fit: cover;
  flex-shrink: 0;
}

._userInfo_mxqxl_184 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

._userName_mxqxl_192 {
  color: var(--color-foreground-500);
  /* typography/body/xsb */
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 150% */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._userTitle_mxqxl_205 {
  color: var(--color-foreground-300);
  font-family: Pretendard;
  font-size: 12.022px;
  font-style: normal;
  font-weight: 700;
  line-height: 18.034px; /* 150% */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============= Amount Cells ============= */

._amountCell_mxqxl_219 {
  /* Publish SSOT: 12px, 600, neutral-750 */
  color: var(--color-neutral-750, var(--color-fg-400));
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px; /* 150% */
  font-variant-numeric: tabular-nums;
  text-align: left;
  display: inline-block;
  width: 100%;
  transition: color 0.2s ease;
}

._percentCell_mxqxl_234 {
  /* Publish SSOT: 12px, 400, neutral-600 */
  color: var(--color-neutral-600, var(--color-neutral-650));
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 150% */
  font-variant-numeric: tabular-nums;
  text-align: left;
  display: inline-block;
  width: 100%;
  transition: color 0.2s ease;
}

/* ============= Status Cells ============= */

._statusCell_mxqxl_251 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  display: inline-block;
  width: 100%;
}

/* ============= Badge Cells ============= */

._badgeCell_mxqxl_262 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* Badge Colors - Filled */
._badge-filled_mxqxl_275._badge-primary_mxqxl_275 {
  background-color: var(--color-brand-primary);
  color: white;
}

._badge-filled_mxqxl_275._badge-secondary_mxqxl_280 {
  background-color: var(--color-secondary);
  color: white;
}

._badge-filled_mxqxl_275._badge-success_mxqxl_285 {
  background-color: var(--color-success);
  color: white;
}

._badge-filled_mxqxl_275._badge-warning_mxqxl_290 {
  background-color: var(--color-warning);
  color: var(--color-foreground-500);
}

._badge-filled_mxqxl_275._badge-danger_mxqxl_295 {
  background-color: var(--color-danger);
  color: white;
}

._badge-filled_mxqxl_275._badge-info_mxqxl_300 {
  background-color: var(--color-info);
  color: white;
}

/* Badge Colors - Outlined */
._badge-outlined_mxqxl_306._badge-primary_mxqxl_275 {
  background-color: transparent;
  border: 1px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
}

._badge-outlined_mxqxl_306._badge-secondary_mxqxl_280 {
  background-color: transparent;
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
}

._badge-outlined_mxqxl_306._badge-success_mxqxl_285 {
  background-color: transparent;
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

._badge-outlined_mxqxl_306._badge-warning_mxqxl_290 {
  background-color: transparent;
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
}

._badge-outlined_mxqxl_306._badge-danger_mxqxl_295 {
  background-color: transparent;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

._badge-outlined_mxqxl_306._badge-info_mxqxl_300 {
  background-color: transparent;
  border: 1px solid var(--color-info);
  color: var(--color-info);
}

/* ============= Responsive ============= */

@media (max-width: 768px) {
  ._userCell_mxqxl_169 {
    min-height: 36px;
  }

  ._userAvatar_mxqxl_176 {
    width: 32px !important;
    height: 32px !important;
  }

  ._userName_mxqxl_192 {
    font-size: 13px;
  }

  ._userTitle_mxqxl_205 {
    font-size: 11px;
  }

  ._badgeCell_mxqxl_262 {
    font-size: 11px;
    padding: 1px 6px;
  }
}
._container_awt41_1 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

._fullWidth_awt41_7 {
  width: 100%;
}

/* fullWidth가 적용된 컨테이너 내부의 modal variant input */
._fullWidth_awt41_7 ._modal_awt41_12 {
  width: 100%;
}

._label_awt41_16 {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--input-label-color);
  margin-bottom: var(--spacing-xs);
}

._required_awt41_23 {
  color: var(--input-error-color);
  margin-left: 2px;
}

._inputWrapper_awt41_28 {
  position: relative;
  display: flex;
  align-items: center;
}

._input_awt41_28 {
  width: 100%;
  border-radius: var(--input-radius);
  border: 1px solid var(--input-border-color);
  font-size: var(--font-size-sm);
  font-family: inherit;
  transition: all 0.15s ease;
  outline: none;
}

._input_awt41_28::placeholder {
  color: var(--input-placeholder-color);
}

._input_awt41_28:focus {
  border-color: var(--input-focus-border-color);
  box-shadow: var(--input-focus-box-shadow);
}

._input_awt41_28:disabled {
  background-color: var(--input-disabled-bg);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

._input_awt41_28:read-only {
  background-color: var(--input-readonly-bg);
  cursor: default;
}

._input_awt41_28:read-only:focus {
  background-color: var(--input-readonly-bg);
  border-color: var(--input-border-color);
  box-shadow: none;
}

._small_awt41_70 {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
  min-height: 32px;
}

._medium_awt41_76 {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

._large_awt41_82 {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  min-height: 44px;
}

._outlined_awt41_88 {
  background-color: var(--color-background-primary);
}

._filled_awt41_92 {
  background-color: var(--input-filled-bg);
  border: 1px solid transparent;
}

._filled_awt41_92:focus {
  background-color: var(--color-background-primary);
  border-color: var(--color-brand-primary);
}

._search_awt41_102 {
  background-color: var(--input-search-bg);
  border: 1px solid var(--input-search-border);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: var(--input-search-text);
  padding: var(--spacing-sm) var(--spacing-lg);
  min-height: 34px;
  box-sizing: border-box;
}

._search_awt41_102::placeholder {
  color: var(--input-search-placeholder);
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

._search_awt41_102:focus {
  background-color: var(--color-background-primary);
  border-color: var(--input-search-focus-border);
  box-shadow: none;
  outline: none;
}

._search_awt41_102:focus::placeholder {
  color: transparent;
}

._search_awt41_102._hasEndIcon_awt41_135 {
  padding-right: 42px;
}

/* Modal variant - Figma 디자인 기반 */
._modal_awt41_12 {
  background: var(--input-modal-bg);
  border: 1px solid var(--input-modal-border);
  border-radius: 20px;
  width: 210px;
  height: 16px;
  padding: 8px 16px;
  font-family:
    'Pretendard',
    -apple-system,
    sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  color: var(--input-modal-text);
  box-sizing: border-box;
}

._modal_awt41_12::placeholder {
  color: var(--input-modal-placeholder);
  font-family:
    'Pretendard',
    -apple-system,
    sans-serif;
  font-size: 12px;
  font-weight: 700;
}

._modal_awt41_12:focus {
  background: var(--color-background-primary);
  border-color: var(--input-modal-border);
  box-shadow: none;
  outline: none;
}

._modal_awt41_12._hasEndIcon_awt41_135 {
  padding-right: 42px;
}

._modal_awt41_12:read-only {
  background: var(--input-modal-readonly-bg);
  cursor: default;
}

._modal_awt41_12:read-only:focus {
  background: var(--input-modal-readonly-bg);
  border-color: var(--input-modal-border);
}

/* Modal variant의 endIcon 위치 조정 */
._endIconModal_awt41_191 {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--input-modal-border);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  padding: 0;
}

._hasStartIcon_awt41_209 {
  padding-left: 36px;
}

._hasEndIcon_awt41_135 {
  padding-right: 42px;
}

._startIcon_awt41_217 {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--input-icon-color);
  pointer-events: none;
  z-index: 1;
}

._endIcon_awt41_191 {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--input-icon-color);
  z-index: 1;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  padding: 0;
}

._error_awt41_245 {
  border-color: var(--input-error-color) !important;
  box-shadow: var(--input-error-shadow) !important;
}

._error_awt41_245:focus {
  border-color: var(--input-error-color) !important;
  box-shadow: var(--input-error-shadow) !important;
}

._helperText_awt41_255 {
  font-size: var(--font-size-xs);
  color: var(--input-helper-color);
  margin-top: 2px;
}

._errorText_awt41_261 {
  font-size: var(--font-size-xs);
  color: var(--input-error-color);
  margin-top: 2px;
}
/**
 * Modal 컴포넌트 스타일
 * 회사 고유 디자인 시스템 적용
 */

/* ========================================
   공유 오버레이 스타일 (다른 모달에서 composes로 사용)
   ======================================== */

/* 기본 오버레이 - 중앙 정렬 */
._modalOverlay_zt5gf_11 {
  position: fixed;
  inset: 0;
  background: var(--sidebar-overlay-bg, rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: _modalFadeIn_zt5gf_1 0.2s ease;
}

/* 오버레이 변형 - 상단 정렬 */
._modalOverlayTop_zt5gf_23 {
  align-items: flex-start;
}

/* 오버레이 변형 - 높은 z-index */
._modalOverlayHigh_zt5gf_29 {
  z-index: 9999;
}

/* 오버레이 애니메이션 */
@keyframes _modalFadeIn_zt5gf_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========================================
   Modal 컴포넌트 전용 스타일
   ======================================== */

/* 백드롭 */
._backdrop_zt5gf_49 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 16px;
}

/* 모달 */
._modal_zt5gf_11 {
  background-color: var(--color-background-100);
  border-radius: 8px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  animation: _modalAppear_zt5gf_1 0.2s ease-out;
}

@keyframes _modalAppear_zt5gf_1 {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 크기 변형 */
._small_zt5gf_89,
._medium_zt5gf_90,
._large_zt5gf_91 {
  max-width: calc(100vw - 32px);
}

._small_zt5gf_89 {
  width: 400px;
}

._medium_zt5gf_90 {
  width: 600px;
}

._large_zt5gf_91 {
  width: 800px;
}

._fullscreen_zt5gf_107 {
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
}

/* 헤더 */
._header_zt5gf_113 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-foreground-100);
  flex-shrink: 0;
}

._title_zt5gf_122 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-foreground-600);
  margin: 0;
}

._closeButton_zt5gf_129 {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-foreground-300);
  cursor: pointer;
  padding: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

._closeButton_zt5gf_129:hover {
  background-color: var(--color-background-400);
  color: var(--color-foreground-500);
}

._closeButton_zt5gf_129:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* 내용 */
._content_zt5gf_156 {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

/* 액션 버튼 영역 */
._actions_zt5gf_163 {
  padding: 16px 24px;
  border-top: 1px solid var(--color-foreground-100);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* 반응형 */
@media (max-width: 640px) {
  ._backdrop_zt5gf_49 {
    padding: 8px;
  }

  ._modal_zt5gf_11 {
    width: calc(100vw - 16px) !important;
    max-width: none;
  }

  ._header_zt5gf_113,
  ._content_zt5gf_156,
  ._actions_zt5gf_163 {
    padding-left: 16px;
    padding-right: 16px;
  }
}
._wrapper_1izza_1 {
  padding: 40px;
  text-align: center;
  background: var(--color-base-100);
  border: 1px solid var(--color-foreground-100);
  border-radius: 12px;
  max-width: 640px;
  margin: 48px auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

._title_1izza_12 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--color-foreground-500);
}

._message_1izza_19 {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-foreground-300);
  margin: 0 0 20px;
  white-space: pre-line;
}

._actions_1izza_27 {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

._stack_1izza_34 {
  text-align: left;
  background: var(--code-block-bg);
  color: var(--code-block-text);
  padding: 16px;
  border-radius: 8px;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: 12px;
  max-height: 300px;
  overflow: auto;
  line-height: 1.5;
  border: 1px solid var(--code-block-border);
}
/**
 * ErrorScreen 컴포넌트 통합 스타일
 * variant: 'auth' | 'error'로 색상 구분
 */

._container_hqgl2_6 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* Auth variant - 파란색 계열 */
._containerAuth_hqgl2_18 {
  color: var(--errorscreen-auth-text);
  background: var(--errorscreen-auth-bg);
}

/* Error variant - 빨간색 계열 */
._containerError_hqgl2_24 {
  color: var(--errorscreen-error-text);
  background: var(--errorscreen-error-bg);
}

._icon_hqgl2_29 {
  margin-bottom: 16px;
}

/* Auth 아이콘 색상 */
._iconCircleAuth_hqgl2_34 {
  fill: var(--errorscreen-auth-icon-fill);
}

._iconPathAuth_hqgl2_38 {
  stroke: var(--errorscreen-auth-icon-stroke);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Error 아이콘 색상 */
._iconCircleError_hqgl2_45 {
  fill: var(--errorscreen-error-icon-fill);
}

._iconPathError_hqgl2_49 {
  stroke: var(--errorscreen-error-icon-stroke);
  stroke-width: 2;
  stroke-linecap: round;
}

._title_hqgl2_55 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

._message_hqgl2_61 {
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
}
._container_8tffy_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 120px;
  color: var(--loading-color);
}

._spinner_8tffy_11 {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid var(--loading-spinner-border);
  border-top-color: var(--loading-spinner-active);
  animation: _spin_8tffy_11 0.9s linear infinite;
}

@keyframes _spin_8tffy_11 {
  to {
    transform: rotate(360deg);
  }
}
/**
 * ValidationAlert 스타일
 * Figma 디자인 시스템을 반영한 경고 팝업 스타일
 */

/* 메인 컨테이너 */
._container_6fr63_7 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background-color: var(--color-background-100);
  border-radius: 24px;
}

/* 경고 헤더 (아이콘 + Caution 텍스트) */
._header_6fr63_17 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._headerIcon_6fr63_23 {
  flex-shrink: 0;
}

._headerText_6fr63_27 {
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-brand-primary);
}

/* 경고 메시지 */
._message_6fr63_36 {
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-foreground-500);
  word-break: keep-all;
}

/* 누락 필드 목록 */
._detailsList_6fr63_46 {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  list-style-position: outside;
}

._detailsItem_6fr63_53 {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-foreground-500);
  margin-bottom: 4px;
}

._detailsItem_6fr63_53:last-child {
  margin-bottom: 0;
}

/* 액션 버튼 영역 */
._actions_6fr63_67 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* 확인 버튼 커스텀 스타일 */
._confirmButton_6fr63_75 {
  /* Button 컴포넌트의 primary variant 위에 추가 스타일 */
  background-color: var(--color-brand-primary);
  border-radius: 10px;
  padding: 8px 16px;
  height: 50px;

  /* Figma 디자인의 그림자 효과 */
  box-shadow: var(--validation-confirm-shadow);

  /* 트랜지션 효과 */
  transition: all 0.2s ease;
}

._confirmButton_6fr63_75:hover:not(:disabled) {
  background-color: var(--validation-confirm-hover-bg);
  /* 호버 시에도 흰색 텍스트 및 아이콘 유지 */
  color: var(--color-text-inverse);
  border: none;
  --icon-stroke-color: var(--color-white);
  box-shadow: var(--validation-confirm-hover-shadow);
}

._confirmButton_6fr63_75:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: var(--validation-confirm-active-shadow);
}

/* 접근성: 고대비 모드 지원 */
@media (prefers-contrast: high) {
  ._headerText_6fr63_27,
  ._message_6fr63_36,
  ._detailsItem_6fr63_53 {
    font-weight: 700;
  }

  ._confirmButton_6fr63_75 {
    border: 2px solid var(--color-brand-primary);
  }
}

/* 접근성: 모션 감소 설정 지원 */
@media (prefers-reduced-motion: reduce) {
  ._confirmButton_6fr63_75 {
    transition: none;
  }

  ._confirmButton_6fr63_75:active:not(:disabled) {
    transform: none;
  }
}
/* Primitive tokens: raw values only. */
:root {
  /* ===== Colors - Orange (Brand raw) ===== */
  --color-orange-50: #FFF5F0;
  --color-orange-200: #ffc9a3;
  --color-orange-300: #ff9b52;
  --color-orange-500: #FF6B00;
  --color-orange-600: #ea580c;

  /* ===== Colors - Neutral (19-step, 50-950) ===== */
  --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;

  /* ===== Colors - Status (green/yellow/red/blue scales) ===== */
  --color-green-50: #f0fdf4;
  --color-green-100: #DCFCE7;
  --color-green-400: #3acb2d;
  --color-green-500: #22C55E;
  --color-green-600: #16a34a;

  --color-yellow-50: #fffbf0;
  --color-yellow-100: #FFF8E6;
  --color-yellow-200: #fef3cd;
  --color-yellow-300: #fde3b8;
  --color-yellow-500: #F5A623;
  --color-yellow-600: #ea8c00;

  --color-red-50: #fef2f2;
  --color-red-100: #FFEBEE;
  --color-red-500: #F44336;
  --color-red-600: #dc2626;

  --color-blue-50: #f0f9ff;
  --color-blue-100: #DBEAFE;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3B82F6;

  /* ===== Colors - Gray scale (cool-tone borders/dividers) ===== */
  --color-gray-100: #F3F4F6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #D9D9D9;
  --color-gray-400: #9ca3af;
  --color-gray-500: #757575;

  /* ===== Typography ===== */
  --font-family-sans: 'Pretendard', 'Pretendard Variable', sans-serif;

  /* Font sizes (numeric) */
  --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 weights */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  /* Line heights (numeric naming) */
  --line-height-120: 1.2;
  --line-height-150: 1.5;
  --line-height-170: 1.7;

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

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

  /* ===== Shadows (-raw pattern) ===== */
  --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 (numeric) ===== */
  --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-1100: 1100;

  /* ===== 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;
}
/* Semantic tokens: meaning-based. */
/* Canonical tokens + Legacy aliases for backward compatibility */
:root {
  /* ============================================ */
  /* S1. Primary (3)                              */
  /* ============================================ */
  --color-primary: var(--color-orange-500);
  --color-primary-light: var(--color-orange-50);
  --color-primary-hover: var(--color-orange-600);

  /* ============================================ */
  /* S2. Text (8)                                 */
  /* ============================================ */
  --text-primary: var(--color-neutral-800);       /* #424242 */
  --text-secondary: var(--color-neutral-750);     /* #5c5c5c */
  --text-tertiary: var(--color-neutral-650);      /* #666666 */
  --text-value: var(--color-neutral-850);         /* #3c3c3c */
  --text-muted: var(--color-neutral-600);         /* #9e9e9e */
  --text-inverse: var(--color-white);
  --text-brand: var(--color-primary);
  --text-disabled: var(--color-neutral-600);

  /* ============================================ */
  /* S3. Surface (6)                              */
  /* ============================================ */
  --surface-primary: var(--color-white);            /* #ffffff */
  --surface-secondary: var(--color-neutral-50);     /* #fafafa */
  --surface-tertiary: var(--color-neutral-100);     /* #f8f8f8 */
  --surface-sunken: var(--color-neutral-150);       /* #f5f6f8 */
  --surface-muted: var(--color-neutral-250);        /* #f0f0f0 */
  --surface-overlay: var(--color-neutral-300);      /* #e8e8e8 */

  /* ============================================ */
  /* S4. Border (7)                               */
  /* ============================================ */
  --border-default: var(--color-neutral-300);       /* #e8e8e8 */
  --border-secondary: var(--color-neutral-400);     /* #d9d9d9 */
  --border-dark: var(--color-neutral-500);          /* #c8c8c8 */
  --border-light: var(--color-neutral-150);         /* #f5f6f8 */
  --border-divider: var(--color-gray-100);          /* #f3f4f6 */
  --border-subtle: var(--color-gray-200);           /* #e5e7eb */
  --border-tertiary: var(--border-default);
  --border-focus: var(--color-primary);

  /* ============================================ */
  /* S5. Status (14)                              */
  /* ============================================ */
  --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-600);
  --color-secondary-green: var(--color-green-400);

  /* ============================================ */
  /* S6. Typography (13)                          */
  /* ============================================ */
  --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 (8)                              */
  /* ============================================ */
  --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 (6)                               */
  /* ============================================ */
  --radius-xs: var(--radius-2);
  --radius-sm: var(--radius-4);
  --radius-md: var(--radius-8);
  --radius-lg: var(--radius-12);
  --radius-xl: var(--radius-12);
  --radius-full: var(--radius-20);

  /* ============================================ */
  /* S8. Shadow (6)                               */
  /* ============================================ */
  --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);

  /* ============================================ */
  /* S8. Z-Index (8)                              */
  /* ============================================ */
  --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-toast: var(--z-index-1100);

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

  /* ============================================ */
  /* LEGACY ALIASES (~42)                         */
  /* Module.css 하위호환: 기존 토큰명 유지         */
  /* ============================================ */

  /* --- Brand (5) --- */
  --color-brand: var(--color-primary);              /* 645 refs */
  --color-brand-light: var(--color-orange-300);
  --color-brand-secondary: var(--color-primary-hover);
  --color-brand-primary: var(--color-primary);      /* 565 refs */
  --color-brand-main: var(--color-primary);

  /* --- Primary variants (1) --- */
  --color-primary-soft: var(--color-orange-300);

  /* --- Background (8) → surface canonical --- */
  --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 (6) → neutral direct --- */
  --color-foreground-100: var(--color-neutral-400);   /* #d9d9d9 */
  --color-foreground-200: var(--color-neutral-500);   /* #c8c8c8 */
  --color-foreground-300: var(--color-neutral-600);   /* #9e9e9e */
  --color-foreground-400: var(--color-neutral-700);   /* #5f5f5f */
  --color-foreground-500: var(--color-neutral-850);   /* #3c3c3c */
  --color-foreground-600: var(--color-neutral-900);   /* #282828 */

  /* --- Text (8) --- */
  --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 (6) --- */
  --border-primary: var(--border-default);
  --color-border-primary: var(--border-default);
  --color-border-focus: var(--border-focus);
  --color-border-secondary: var(--border-secondary);
  --color-border-tertiary: var(--border-default);
  --color-border-light: var(--border-light);
  --color-border-200: var(--border-subtle);

  /* --- Spacing (6) --- */
  --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);

  /* --- Surface numbered (4) --- */
  --surface-200: var(--surface-muted);
  --surface-300: var(--surface-tertiary);
  --surface-400: var(--surface-sunken);
  --surface-500: var(--surface-overlay);

  /* --- Misc (4) --- */
  --font-weight-normal: var(--font-weight-regular);
  --color-black: #1a1a1a;
  --color-gray: #607d8b;
  --color-gray-light: #eceff1;

  /* --- Border-200 (legacy) --- */
  --border-200: var(--border-subtle);
}
/* Component tokens: component-level defaults. */
:root {
  /* Header (erp-publish 동기화) */
  --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(--text-value);
  --header-user-role-size: var(--font-size-sm);
  --header-user-role-color: var(--text-muted);
  --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-sidebar-collapsed: 54px;
  --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);

  /* IconButton */
  --iconbutton-active-bg: var(--color-primary);
  --iconbutton-active-text: var(--text-inverse);
  --iconbutton-active-border: var(--color-white);
  --iconbutton-active-shadow: 0 8px 12px rgba(255, 155, 82, 0.5) inset, 0 2px 8px rgba(255, 107, 0, 0.4);

  /* 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-auth-bg: #e3f2fd;
  --errorscreen-auth-icon-fill: #bbdefb;
  --errorscreen-auth-icon-stroke: #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(--text-muted);
  --progress-bar-bg: var(--surface-primary);
  --progress-bar-border: var(--border-secondary);
  --progress-fill-color: var(--color-primary);

  /* 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: #1d4ed8;
  --dialog-save-text: #4b5563;
  --dialog-save-btn-bg: #2563eb;
  --dialog-save-btn-hover: #1d4ed8;
  --dialog-save-btn-shadow: 0px 4px 12px 0px rgba(37, 99, 235, 0.35), inset 0px 4px 8px 0px #60a5fa;
  --dialog-save-btn-hover-shadow: 0px 6px 16px 0px rgba(37, 99, 235, 0.45), inset 0px 4px 8px 0px #93c5fd;
  --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-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-primary);
  --table-empty-text: #9ca3af;

  /* 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-primary);
  --pagination-active-bg: var(--color-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);
  /* @design-migration: Publisher 동기화 - 그라디언트 배경 */
  --sidebar-bg-gradient: linear-gradient(to right, #fbfbfb 54px, #f3f4f6 54px);
  --sidebar-icon-bar-bg: #fbfbfb;
  --sidebar-menu-area-bg: #f3f4f6;
  --sidebar-border-color: #e8e8e8;
  --sidebar-logo-height: 76px;
  --sidebar-icon-gap: 18px;
  --sidebar-icon-svg-size: 22px;

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

  --button-outline-bg: var(--color-background-primary);
  --button-outline-text: var(--color-primary);
  --button-outline-border: var(--color-primary);
  --button-outline-hover-bg: var(--color-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-100);
  --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-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-submit-border: #183ee6;
  --button-submit-text: #183ee6;
  --button-submit-hover-bg: #f0f5ff;
  --button-submit-hover-border: #1534c4;
  --button-submit-hover-text: #1534c4;
  --button-submit-active-bg: #e6edff;

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

  /* ===== Additional Layout (from globals.css) ===== */
  --content-max-width: 1200px;
  --board-gap: 12px;

  /* ===== Additional Spacing (from globals.css) ===== */
  --space-divider-gap: 10px;
  --space-small-gap: var(--spacing-sm);
  --space-inline-gap: 6px;
  --space-cell-x: 12px;
  --space-cell-y: 10px;

  /* ===== Component Sizes (from globals.css) ===== */
  --input-height: 34px;
  --input-height-sm: 30px;
  --input-height-lg: 40px;
  --avatar-size: 32px;
  --avatar-size-sm: 24px;
  --icon-size: 20px;

  /* ===== Card System (from globals.css) ===== */
  --card-gap: 12px;
  --card-radius: var(--radius-lg);
  --card-border: 1px solid var(--color-neutral-350);

  /* ===== Border Radius Aliases (Single Source) ===== */
  --border-radius-xs: var(--radius-xs);
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);
  --border-radius-full: var(--radius-full);

  /* ===== Gradient (from globals.css) ===== */
  --gradient-primary-btn: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 100%);

  /* ============================================
     Legacy Compatibility (erp-publish 동기화)
     ============================================ */

  /* Sidebar - 1컬럼 고정 (publish SSOT: 140px) */
  --sidebar-width: 140px;
  --sidebar-collapsed: 54px;
  --sidebar-expanded: var(--sidebar-width);

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

  /* Mobile Responsive Tokens */
  --mobile-header-height: 56px;
  --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;

  /* Color - Primary Legacy */
  --color-primary-light: #fff5f0;
  --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);
  --color-primary-hover: #e55a00;

  /* Status - Legacy */
  --color-success-light: #dcfce7;
  --color-success-lighter: #f0fdf4;
  --color-success-dark: #16a34a;
  --color-success-border: rgba(22, 163, 74, 0.2);
  --color-warning-light: #fff8e6;
  --color-error-light: #ffebee;
  --color-error-lighter: #fef2f2;
  --color-error-dark: #dc2626;
  --color-error-border: rgba(220, 38, 38, 0.2);
  --color-info-light: #dbeafe;
  --color-info-lighter: #f0f9ff;
  --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 */
  --font-family: 'Pretendard', 'Pretendard Variable', sans-serif;

  /* Misc Legacy */
  --primary-color: #4a7cfe;
  --primary-default: var(--color-primary);
  --surface-default: var(--surface-primary);
  --bg-gray: var(--surface-sunken);
  --bg-gray-light: var(--surface-secondary);
  --bg-primary-light: var(--color-primary-light);
  --bg-secondary: var(--surface-secondary);
}
/* ==========================================================================
   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; /* 부드러운 스크롤 */
  /* 다크모드 완전 차단 */
  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%;
  /* Pretendard 폰트 적용 */
  font-family: 'Pretendard', 'Pretendard Variable', sans-serif;
  background-color: var(--surface-primary, #ffffff);
  color: var(--text-primary, #3C3C3C);
  line-height: var(--line-height-normal, 1.5);
  font-size: var(--font-size-base, 12px); /* erp-publish 기준 12px */
  -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;
  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-size: inherit;
  border: none;
  background: transparent;
  transition: all 0.2s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-border-focus); /* Teams 포커스 색상 */
  outline-offset: 1px;
}
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: #000000;
    --color-brand-primary: #0078d4;
    --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) {
  .hide-mobile {
    display: none !important;
  }

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

  .grid-1-mobile {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   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);
}