/* ✨TODO - 필요에 따라 프로젝트에 맞게 수정해서 사용하세요*/
/* 📝  
설명: 이 CSS 파일은 Tailwind CSS의 색상 팔레트를 확장하여 주요 색상, 상태별 색상, 투명도 등을 정의합니다. 
   프로젝트에서 일관된 색상 사용을 위해 클래스 이름을 지정했습니다. */
/* 프로젝트마다 최초 색상 전부 변경후 사용 */
/* 주요 텍스트 색상 */

:root {
  --primary-text-color: #34495e;
  --header-bg: #ffffff;
  --body-bg:#f8f9fa;
  --primary-border-color: #e9ecef;
  --secondary-border-color: #e9ecef;
  --nav-link-color: #515355;
  --nav-link-hover-color: #1F407F;
  --nav-link-hover-bg: #f1f5f9;
  --button-hover-bg: #f1f5f9;
  --hamburger-color: #475569;
  --sidebar-header-bg: #ffffff;
  --close-btn-color: #64748b;
  --close-btn-hover-bg: #f1f5f9;
  --close-btn-hover-color: #475569;
  --sidebar-link-color: #dce1e7;
  --sidebar-link-hover-color: #2563eb;
  --sidebar-link-hover-bg: #f1f5f9;
  --divider-color: #e2e8f0;
  --focus-color: #2563eb;
  --primary-color: #1F407F;

}

@media (prefers-color-scheme: dark) {
  :root {
    --header-bg: #1e293b;
    --border-color: #e9ecef;
    --nav-link-color: #4c4f52;
    --nav-link-hover-color: #1F407F;
    --nav-link-hover-bg: #334155;
    --button-hover-bg: #334155;
    --hamburger-color: #cbd5e1;
    --sidebar-header-bg: #1e293b;
    --close-btn-color: #94a3b8;
    --close-btn-hover-bg: #334155;
    --close-btn-hover-color: #cbd5e1;
    --sidebar-link-color: #dce1e7;
    --sidebar-link-hover-color: #60a5fa;
    --sidebar-link-hover-bg: #334155;
    --divider-color: #334155;
    --focus-color: #60a5fa;
  }
}

.primary-text-color   { color: var(--primary-text-color) !important; }
.secondary-text-color { color: #64748b !important; }
.error-text-color     { color: #dc2626 !important; }
.success-text-color   { color: #16a34a !important; }
.warning-text-color   { color: #f59e42 !important; }

/* 주요 배경색 */

.primary-bg-color     { background-color: #1f407f !important; }
.secondary-bg-color   { background-color: #2b2b2b !important; }
.error-bg-color       { background-color: #fee2e2 !important; }
.success-bg-color     { background-color: #ddd !important; }
.warning-bg-color     { background-color: #fef9c3 !important; }
.white-bg-color     { background-color: #fff !important; }
.light-white-bg-color     { background-color: #F9F9F9 !important; }
.blue-bg-color     { background-color: #1D9DFF !important; }
.light-blue-bg-color     { background-color: #DEF3FF !important; }
.blur-white-bg-color     { background-color: rgba(255, 255, 255, 0.7); !important; }
.blur-white-bg-color-xl     { background-color: rgba(255, 255, 255, 0.3); !important; }
.blur-inquiry-bg-color     { background: transparent linear-gradient(126deg, #667EEA1A 0%, #764BA21A 100%) 0% 0% no-repeat padding-box; !important; }
.light-gray-bg-color     { background-color: #F5F7FA !important; }

/* 주요 테두리색 */
.primary-border-color   { border-color: #24316C !important; }
.secondary-border-color { border-color: #64748b !important; }
.error-border-color     { border-color: #dc2626 !important; }
.success-border-color   { border-color: #16a34a !important; }
.warning-border-color   { border-color: #f59e42 !important; }

/* 주요 그림자색 */
.primary-shadow-color   { box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1) !important; }
.secondary-shadow-color { box-shadow: 0 1px 3px rgba(100, 116, 139, 0.1) !important; }
.error-shadow-color     { box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1) !important; }
.success-shadow-color   { box-shadow: 0 1px 3px rgba(22, 163, 74, 0.1) !important; }
.warning-shadow-color   { box-shadow: 0 1px 3px rgba(245, 158, 66, 0.1) !important; }
.box-shadow {
  box-shadow: 0px 4px 12px #667EEA29;
}

/* 주요 링크 색상 */
.primary-link-color   { color: #24316C !important; }
.secondary-link-color { color: #64748b !important; }
.error-link-color     { color: #dc2626 !important; }
.success-link-color   { color: #16a34a !important; }
.warning-link-color   { color: #f59e42 !important; }

/* 주요 버튼 색상 */

.primary-button-color   { background-color: #1f407f !important; color: white !important; }
.secondary-button-color { background-color: #64748b !important; color: white !important; }
.error-button-color     { background-color: #dc2626 !important; color: white !important; }
.success-button-color   { background-color: #16a34a !important; color: white !important; }
.warning-button-color   { background-color: #f59e42 !important; color: white !important; }
.outline-button-color   {     background: transparent !important;
    border: var(--border-color) 1.5px solid !important;}
/* 주요 버튼 호버 색상 */

.error-button-color:hover {
  background-color: #c82333 !important;
}
.primary-button-color:hover {
  background-color: #1d2958 !important;
}

.outline-button-color:hover, .outline-button-color:focus {
  background-color: #f1f3f4 !important;
}

.primary-button-color:focus,
.primary-button-color:active:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* 주요 폼 요소 색상 */
.primary-input-color   { background-color: #24316C !important; color: white !important; }
.secondary-input-color { background-color: #64748b !important; color: white !important; }
.error-input-color     { background-color: #dc2626 !important; color: white !important; }
.success-input-color   { background-color: #16a34a !important; color: white !important; }
.warning-input-color   { background-color: #f59e42 !important; color: white !important; }

/* 주요 테이블 색상 */
.primary-table-color   { background-color: #24316C !important; color: white !important; }
.secondary-table-color { background-color: #64748b !important; color: white !important; }
.error-table-color     { background-color: #dc2626 !important; color: white !important; }
.success-table-color   { background-color: #16a34a !important; color: white !important; }
.warning-table-color   { background-color: #f59e42 !important; color: white !important; }

/* 주요 카드 색상 */
.primary-card-color   { background-color: #24316C !important; color: white !important; }
.secondary-card-color { background-color: #64748b !important; color: white !important; }
.error-card-color     { background-color: #dc2626 !important; color: white !important; }
.success-card-color   { background-color: #16a34a !important; color: white !important; }
.warning-card-color   { background-color: #f59e42 !important; color: white !important; }

/* 주요 모달 색상 */
.primary-modal-color   { background-color: #24316C !important; color: white !important; }
.secondary-modal-color { background-color: #64748b !important; color: white !important; }
.error-modal-color     { background-color: #dc2626 !important; color: white !important; }
.success-modal-color   { background-color: #16a34a !important; color: white !important; }
.warning-modal-color   { background-color: #f59e42 !important; color: white !important; }

/* 주요 툴팁 색상 */
.primary-tooltip-color   { background-color: #24316C !important; color: white !important; }
.secondary-tooltip-color { background-color: #64748b !important; color: white !important; }
.error-tooltip-color     { background-color: #dc2626 !important; color: white !important; }
.success-tooltip-color   { background-color: #16a34a !important; color: white !important; }
.warning-tooltip-color   { background-color: #f59e42 !important; color: white !important; }

/* 주요 배지 색상 */
.primary-badge-color   { background-color: #24316C !important; color: white !important; }
.secondary-badge-color { background-color: #64748b !important; color: white !important; }
.error-badge-color     { background-color: #dc2626 !important; color: white !important; }
.success-badge-color   { background-color: #16a34a !important; color: white !important; }
.warning-badge-color   { background-color: #f59e42 !important; color: white !important; }

/* 주요 스크롤바 색상 */
.primary-scrollbar-color   { scrollbar-color: #24316C #f3f4f6 !important; }
.secondary-scrollbar-color { scrollbar-color: #64748b #f3f4f6 !important; }
.error-scrollbar-color     { scrollbar-color: #dc2626 #f3f4f6 !important; }
.success-scrollbar-color   { scrollbar-color: #16a34a #f3f4f6 !important; }
.warning-scrollbar-color   { scrollbar-color: #f59e42 #f3f4f6 !important; }

/* 주요 링크 호버 색상 */
.primary-link-hover-color   { color: #1a2659 !important; }
.secondary-link-hover-color { color: #475569 !important; }
.error-link-hover-color     { color: #b91c1c !important; }
.success-link-hover-color   { color: #15803d !important; }
.warning-link-hover-color   { color: #d97706 !important; }

/* 주요 버튼 호버 색상 */
.primary-button-hover-color   { background-color: #1a2659 !important; }
.secondary-button-hover-color { background-color: #475569 !important; }
.error-button-hover-color     { background-color: #b91c1c !important; }
.success-button-hover-color   { background-color: #15803d !important; }
.warning-button-hover-color   { background-color: #d97706 !important; }

/* 주요 폼 요소 호버 색상 */
.primary-input-hover-color   { background-color: #1a2659 !important; color: white !important; }
.secondary-input-hover-color { background-color: #475569 !important; color: white !important; }
.error-input-hover-color     { background-color: #b91c1c !important; color: white !important; }
.success-input-hover-color   { background-color: #15803d !important; color: white !important; }
.warning-input-hover-color   { background-color: #d97706 !important; color: white !important; }

/* 주요 테이블 호버 색상 */
.primary-table-hover-color   { background-color: #1a2659 !important; color: white !important; }
.secondary-table-hover-color { background-color: #475569 !important; color: white !important; }
.error-table-hover-color     { background-color: #b91c1c !important; color: white !important; }
.success-table-hover-color   { background-color: #15803d !important; color: white !important; }
.warning-table-hover-color   { background-color: #d97706 !important; color: white !important; }

/* 주요 카드 호버 색상 */
.primary-card-hover-color   { background-color: #1a2659 !important; color: white !important; }
.secondary-card-hover-color { background-color: #475569 !important; color: white !important; }
.error-card-hover-color     { background-color: #b91c1c !important; color: white !important; }
.success-card-hover-color   { background-color: #15803d !important; color: white !important; }
.warning-card-hover-color   { background-color: #d97706 !important; color: white !important; }

/* 주요 모달 호버 색상 */
.primary-modal-hover-color   { background-color: #1a2659 !important; color: white !important; }
.secondary-modal-hover-color { background-color: #475569 !important; color: white !important; }
.error-modal-hover-color     { background-color: #b91c1c !important; color: white !important; }
.success-modal-hover-color   { background-color: #15803d !important; color: white !important; }
.warning-modal-hover-color   { background-color: #d97706 !important; color: white !important; }

/* 주요 툴팁 호버 색상 */
.primary-tooltip-hover-color   { background-color: #1a2659 !important; color: white !important; }
.secondary-tooltip-hover-color { background-color: #475569 !important; color: white !important; }


/* === 상태별(투명도, active, focus, disabled 등) 컬러 확장 === */

/* 투명도(Opacity) */
.primary-bg-opacity-80    { background-color: rgba(37, 99, 235, 0.8) !important; }
.secondary-bg-opacity-80  { background-color: rgba(100, 116, 139, 0.8) !important; }
.error-bg-opacity-80      { background-color: rgba(220, 38, 38, 0.8) !important; }
.success-bg-opacity-80    { background-color: rgba(22, 163, 74, 0.8) !important; }
.warning-bg-opacity-80    { background-color: rgba(245, 158, 66, 0.8) !important; }

.primary-bg-opacity-50    { background-color: rgba(37, 99, 235, 0.5) !important; }
.secondary-bg-opacity-50  { background-color: rgba(100, 116, 139, 0.5) !important; }
.error-bg-opacity-50      { background-color: rgba(220, 38, 38, 0.5) !important; }
.success-bg-opacity-50    { background-color: rgba(22, 163, 74, 0.5) !important; }
.warning-bg-opacity-50    { background-color: rgba(245, 158, 66, 0.5) !important; }

/* Active 상태 */
.primary-active-bg    { background-color: #1e40af !important; }
.secondary-active-bg  { background-color: #334155 !important; }
.error-active-bg      { background-color: #991b1b !important; }
.success-active-bg    { background-color: #166534 !important; }
.warning-active-bg    { background-color: #b45309 !important; }

.primary-active-color    { color: #1e40af !important; }
.secondary-active-color  { color: #334155 !important; }
.error-active-color      { color: #991b1b !important; }
.success-active-color    { color: #166534 !important; }
.warning-active-color    { color: #b45309 !important; }

/* Focus 상태 */
.primary-focus-bg    { background-color: #3b82f6 !important; }
.secondary-focus-bg  { background-color: #94a3b8 !important; }
.error-focus-bg      { background-color: #f87171 !important; }
.success-focus-bg    { background-color: #4ade80 !important; }
.warning-focus-bg    { background-color: #fde68a !important; }

.primary-focus-color    { color: #3b82f6 !important; }
.secondary-focus-color  { color: #94a3b8 !important; }
.error-focus-color      { color: #f87171 !important; }
.success-focus-color    { color: #4ade80 !important; }
.warning-focus-color    { color: #fde68a !important; }

/* Disabled 상태 */
.primary-disabled-bg    { background-color: #93c5fd !important; }
.secondary-disabled-bg  { background-color: #cbd5e1 !important; }
.error-disabled-bg      { background-color: #fecaca !important; }
.success-disabled-bg    { background-color: #bbf7d0 !important; }
.warning-disabled-bg    { background-color: #fef08a !important; }

.primary-disabled-color    { color: #93c5fd !important; }
.secondary-disabled-color  { color: #cbd5e1 !important; }
.error-disabled-color      { color: #fecaca !important; }
.success-disabled-color    { color: #bbf7d0 !important; }
.warning-disabled-color    { color: #fef08a !important; }

.primary-disabled-border    { border-color: #93c5fd !important; }
.secondary-disabled-border  { border-color: #cbd5e1 !important; }
.error-disabled-border      { border-color: #fecaca !important; }
.success-disabled-border    { border-color: #bbf7d0 !important; }
.warning-disabled-border    { border-color: #fef08a !important; }

/* 상태별 버튼 예시 */
.primary-button-active   { background-color: #1e40af !important; color: white !important; }
.primary-button-focus    { background-color: #3b82f6 !important; color: white !important; }
.primary-button-disabled { background-color: #93c5fd !important; color: #e5e7eb !important; cursor: not-allowed !important; }

.secondary-button-active   { background-color: #334155 !important; color: white !important; }
.secondary-button-focus    { background-color: #94a3b8 !important; color: white !important; }
.secondary-button-disabled { background-color: #cbd5e1 !important; color: #e5e7eb !important; cursor: not-allowed !important; }