@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root {
   --default-font-family: "Pretendard", sans-serif !important;

}

:root {
   --default-foreground: #555 !important;
}


head,
body {
   font:
      "Pretendard" !important;
}

.font-bold {
   font-weight: 700 !important;
}

.font-extrabold {
   font-weight: 800 !important;
}



/* transform transition */
.transition-transform {
   transition-property: transform;
}

/* duration */
.duration-300 {
   transition-duration: 300ms;
}

/* easing */
.ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* 기본 transition-all 이 필요한 경우 */
.transition-all {
   transition-property: all;
}

.hoverani {
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hoverani:hover {
   transform: translateY(-8px);
   /* 살짝 위로 */
   box-shadow: 0 15px 30px rgba(0, 0, 0, .15);
   /* 그림자 조금 강하게 */
}

.h-40px {
   height: 40px;
}

.w-350px {
   width: 350px;
}

/* breadcrumb 전체 wrap에 subtle shadow */
.breadcrumb-wrap {
   transition: all .25s ease;
}

.breadcrumb-wrap:hover {
   color: #222;
}

/* divider 스타일을 조금 더 예쁘게 */
.breadcrumb-wrap span {
   opacity: .6;
}

/* 링크 hover 부드럽게 */
.breadcrumb-wrap a {
   transition: color .25s ease;
}



/* 상단 얇은 바용 높이 프리셋 */
.topbar-xs {
   padding-top: 4px;
   padding-bottom: 4px;
}

.topbar-sm {
   padding-top: 6px;
   padding-bottom: 6px;
}

.topbar-md {
   padding-top: 8px;
   padding-bottom: 8px;
}

.kt-menu-title-G {
   font-size: 18px;
}

.kt-menu-title-active {
   color: #37D243;
}

/* 공통 카드 hover 효과 */
.card-hover {
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-hover:hover {
   transform: translateY(-6px);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
   border-color: #cbd5e1;
   /* slate-300 ~ 400 중간 */
}

/* grid 기본 */
.grid {
   display: grid;
}

/* 2열 */
.grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* lg: 4열 (데스크탑) */
@media (min-width: 1024px) {
   .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}


@media (max-width: 768px) {
   html {
      font-size: 100% !important;
      /* rem 기준을 16px로 복구 */
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
   }
}


/* 페이지네이션 컨테이너 초기화 및 가로 정렬 */
.pagination {
   display: flex;
   justify-content: center;
   /* 가운데 정렬 */
   list-style: none;
   /* 점(bullet) 제거 */
   padding: 0;
   margin: 0;
   gap: 0.5rem;
   /* 버튼 사이 간격 */
}

/* 링크(버튼) 스타일 */
.pagination li a {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 2rem;
   /* 정사각형 느낌의 최소 너비 */
   height: 2rem;
   /* 높이 고정 */
   padding: 0 0.5rem;
   /* 내부 여백 */
   border: 1px solid #e5e7eb;
   /* 회색 테두리 (gray-200) */
   border-radius: 0.5rem;
   /* 둥근 모서리 (rounded-lg) */
   background-color: #ffffff;
   color: #4b5563;
   /* 글자색 (gray-600) */
   font-size: 0.875rem;
   /* 작은 글씨 (text-sm) */
   font-weight: 600;
   /* 굵게 */
   text-decoration: none;
   /* 밑줄 제거 */
   transition: all 0.2s ease-in-out;
   /* 부드러운 효과 */
   cursor: pointer;
}

/* 마우스 호버 효과 */
.pagination li a:hover {
   background-color: #f3f4f6;
   /* 연한 회색 (gray-100) */
   color: #4f46e5;
   /* 인디고 색상 글자 */
   border-color: #d1d5db;
   /* 테두리 진하게 */
   transform: translateY(-1px);
   /* 살짝 위로 뜨는 효과 */
}

/* 활성화 된 페이지 (현재 페이지) */
.pagination li.active a {
   background-color: #4f46e5;
   /* 인디고 배경 (이전 테이블 헤더와 깔맞춤) */
   color: #ffffff;
   /* 흰색 글자 */
   border-color: #4f46e5;
   /* 테두리도 인디고 */
   box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
   /* 은은한 그림자 */
   pointer-events: none;
   /* 클릭 방지 */
}

/* 비활성화 된 버튼 (필요시) */
.pagination li.disabled a {
   color: #9ca3af;
   background-color: #f9fafb;
   border-color: #e5e7eb;
   cursor: not-allowed;
   pointer-events: none;
}


@media (min-width: 1024px) {
   .cadre {
      border: 1px solid #ddd;
      border-radius: 15px;
      background: #fff;
      padding: 30px 20px;
      margin-bottom: 40px;
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
   }
}

/* ===========================================================
   TAILWIND FULL COLOR LIBRARY (Utility Version)
   21 Color Palettes · step: 100 / 300 / 500 / 700 / 900
   =========================================================== */

/* ==========================================================================
   [Custom Button Styles] Bootstrap 대체 및 커스텀 디자인
   ========================================================================== */

/* 1. 기본 버튼 베이스 */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.75rem 1.5rem;
   /* 기본 패딩 (Tailwind py-3, px-6 정도) */
   font-size: 0.95rem;
   font-weight: 600;
   line-height: 1.5;
   border-radius: 0.5rem;
   /* rounded-lg */
   border: 1px solid transparent;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   outline: none;
   text-decoration: none;
}

/* 버튼 호버 시 살짝 떠오르는 효과 */
.btn:not(:disabled):hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 버튼 클릭 시 효과 */
.btn:not(:disabled):active {
   transform: translateY(0);
}

/* 비활성화 상태 */
.btn:disabled,
.btn.disabled {
   opacity: 0.6;
   pointer-events: none;
   cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   [Color Variants] 색상별 스타일
   -------------------------------------------------------------------------- */

/* Primary (파란색 계열) */
.btn-primary {
   background-color: #3b82f6;
   /* Tailwind Blue-500 */
   color: #ffffff;
}

.btn-primary:hover {
   background-color: #2563eb;
   /* Blue-600 */
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Green / Emerald (등록, 성공 등) */
.btn-green,
.btn-emerald,
.btn-success {
   background-color: #10b981;
   /* Emerald-500 */
   color: #ffffff;
}

.btn-green:hover,
.btn-emerald:hover,
.btn-success:hover {
   background-color: #059669;
   /* Emerald-600 */
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Warning (노란색/주황색 - 신청 등) */
.btn-warning {
   background-color: #f59e0b;
   /* Amber-500 */
   color: #ffffff;
}

.btn-warning:hover {
   background-color: #d97706;
   /* Amber-600 */
   box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Danger / Pink (삭제 등) */
.btn-danger,
.btn-pink {
   background-color: #f43f5e;
   /* Rose-500 */
   color: #ffffff;
}

.btn-danger:hover,
.btn-pink:hover {
   background-color: #e11d48;
   /* Rose-600 */
   box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

/* Lime (수정 등) */
.btn-lime {
   background-color: #84cc16;
   /* Lime-500 */
   color: #ffffff;
}

.btn-lime:hover {
   background-color: #65a30d;
   /* Lime-600 */
}

/* Light (취소, 선택 등 - 배경색 연함) */
.btn-light {
   background-color: #f3f4f6;
   /* Gray-100 */
   color: #4b5563;
   /* Gray-600 */
   border-color: #e5e7eb;
}

.btn-light:hover {
   background-color: #e5e7eb;
   /* Gray-200 */
   color: #111827;
}

/* Light Primary (연한 파랑 배경 + 파랑 글씨) */
.btn-light-primary {
   background-color: #eff6ff;
   /* Blue-50 */
   color: #3b82f6;
   /* Blue-500 */
   border: 1px solid #dbeafe;
}

.btn-light-primary:hover {
   background-color: #dbeafe;
   /* Blue-100 */
   color: #2563eb;
}

/* --------------------------------------------------------------------------
   [Size Variants] 크기 조절 (Tailwind 클래스로 덮어쓰기 가능)
   -------------------------------------------------------------------------- */
.btn-sm {
   padding: 0.4rem 0.8rem;
   font-size: 0.85rem;
}

.btn-lg {
   padding: 1rem 2rem;
   font-size: 1.1rem;
}

/* 아이콘 간격 조정 (버튼 내부에 i 태그가 있을 경우) */
.btn i {
   font-size: 1.1em;
}

.btn i+span,
.btn span+i {
   margin-left: 0.5rem;
}

/* ========================================================================
   BACKGROUND COLOR LIBRARY (Complete 50-950)
   21 Color Palettes · step: 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 / 950
   ======================================================================== */

/* ================================
   1. SLATE
   ================================ */
.bg-slate-50 {
   background: #f8fafc;
}

.bg-slate-100 {
   background: #f1f5f9;
}

.bg-slate-200 {
   background: #e2e8f0;
}

.bg-slate-300 {
   background: #cbd5e1;
}

.bg-slate-400 {
   background: #94a3b8;
}

.bg-slate-500 {
   background: #64748b;
}

.bg-slate-600 {
   background: #475569;
}

.bg-slate-700 {
   background: #334155;
}

.bg-slate-800 {
   background: #1e293b;
}

.bg-slate-900 {
   background: #0f172a;
}

.bg-slate-950 {
   background: #020617;
}

.text-slate-100 {
   color: #f1f5f9;
}

.text-slate-300 {
   color: #cbd5e1;
}

.text-slate-500 {
   color: #64748b;
}

.text-slate-700 {
   color: #334155;
}

.text-slate-900 {
   color: #0f172a;
}

.border-slate-300 {
   border-color: #cbd5e1;
}


/* ================================
   2. ZINC
   ================================ */
.bg-zinc-50 {
   background: #fafafa;
}

.bg-zinc-100 {
   background: #f4f4f5;
}

.bg-zinc-200 {
   background: #e4e4e7;
}

.bg-zinc-300 {
   background: #d4d4d8;
}

.bg-zinc-400 {
   background: #a1a1aa;
}

.bg-zinc-500 {
   background: #71717a;
}

.bg-zinc-600 {
   background: #52525b;
}

.bg-zinc-700 {
   background: #3f3f46;
}

.bg-zinc-800 {
   background: #27272a;
}

.bg-zinc-900 {
   background: #18181b;
}

.bg-zinc-950 {
   background: #09090b;
}

.text-zinc-500 {
   color: #71717a;
}

.text-zinc-700 {
   color: #3f3f46;
}

.border-zinc-300 {
   border-color: #d4d4d8;
}


/* ================================
   3. NEUTRAL
   ================================ */
.bg-neutral-50 {
   background: #fafafa;
}

.bg-neutral-100 {
   background: #f5f5f5;
}

.bg-neutral-200 {
   background: #e5e5e5;
}

.bg-neutral-300 {
   background: #d4d4d4;
}

.bg-neutral-400 {
   background: #a3a3a3;
}

.bg-neutral-500 {
   background: #737373;
}

.bg-neutral-600 {
   background: #525252;
}

.bg-neutral-700 {
   background: #404040;
}

.bg-neutral-800 {
   background: #262626;
}

.bg-neutral-900 {
   background: #171717;
}

.bg-neutral-950 {
   background: #0a0a0a;
}

.text-neutral-500 {
   color: #737373;
}

.border-neutral-300 {
   border-color: #d4d4d4;
}


/* ================================
   4. STONE
   ================================ */
.bg-stone-50 {
   background: #fafaf9;
}

.bg-stone-100 {
   background: #f5f5f4;
}

.bg-stone-200 {
   background: #e7e5e4;
}

.bg-stone-300 {
   background: #d6d3d1;
}

.bg-stone-400 {
   background: #a8a29e;
}

.bg-stone-500 {
   background: #78716c;
}

.bg-stone-600 {
   background: #57534e;
}

.bg-stone-700 {
   background: #44403c;
}

.bg-stone-800 {
   background: #292524;
}

.bg-stone-900 {
   background: #1c1917;
}

.bg-stone-950 {
   background: #0c0a09;
}


/* ================================
   5. RED
   ================================ */
.bg-red-50 {
   background: #fef2f2;
}

.bg-red-100 {
   background: #fee2e2;
}

.bg-red-200 {
   background: #fecaca;
}

.bg-red-300 {
   background: #fca5a5;
}

.bg-red-400 {
   background: #f87171;
}

.bg-red-500 {
   background: #ef4444;
}

.bg-red-600 {
   background: #dc2626;
}

.bg-red-700 {
   background: #b91c1c;
}

.bg-red-800 {
   background: #991b1b;
}

.bg-red-900 {
   background: #7f1d1d;
}

.bg-red-950 {
   background: #450a0a;
}

.text-red-500 {
   color: #ef4444;
}

.border-red-300 {
   border-color: #fca5a5;
}


/* ================================
   6. ORANGE
   ================================ */
.bg-orange-50 {
   background: #fff7ed;
}

.bg-orange-100 {
   background: #ffedd5;
}

.bg-orange-200 {
   background: #fed7aa;
}

.bg-orange-300 {
   background: #fdba74;
}

.bg-orange-400 {
   background: #fb923c;
}

.bg-orange-500 {
   background: #f97316;
}

.bg-orange-600 {
   background: #ea580c;
}

.bg-orange-700 {
   background: #c2410c;
}

.bg-orange-800 {
   background: #9a3412;
}

.bg-orange-900 {
   background: #7c2d12;
}

.bg-orange-950 {
   background: #431407;
}


/* ================================
   7. AMBER
   ================================ */
.bg-amber-50 {
   background: #fffbeb;
}

.bg-amber-100 {
   background: #fef3c7;
}

.bg-amber-200 {
   background: #fde68a;
}

.bg-amber-300 {
   background: #fcd34d;
}

.bg-amber-400 {
   background: #fbbf24;
}

.bg-amber-500 {
   background: #f59e0b;
}

.bg-amber-600 {
   background: #d97706;
}

.bg-amber-700 {
   background: #b45309;
}

.bg-amber-800 {
   background: #92400e;
}

.bg-amber-900 {
   background: #78350f;
}

.bg-amber-950 {
   background: #451a03;
}


/* ================================
   8. YELLOW
   ================================ */
.bg-yellow-50 {
   background: #fefce8;
}

.bg-yellow-100 {
   background: #fef9c3;
}

.bg-yellow-200 {
   background: #fef08a;
}

.bg-yellow-300 {
   background: #fde047;
}

.bg-yellow-400 {
   background: #fac015;
}

.bg-yellow-500 {
   background: #eab308;
}

.bg-yellow-600 {
   background: #ca8a04;
}

.bg-yellow-700 {
   background: #a16207;
}

.bg-yellow-800 {
   background: #854d0e;
}

.bg-yellow-900 {
   background: #713f12;
}

.bg-yellow-950 {
   background: #422006;
}


/* ================================
   9. LIME
   ================================ */
.bg-lime-50 {
   background: #f7fee7;
}

.bg-lime-100 {
   background: #ecfccb;
}

.bg-lime-200 {
   background: #d9f99d;
}

.bg-lime-300 {
   background: #bef264;
}

.bg-lime-400 {
   background: #a3e635;
}

.bg-lime-500 {
   background: #84cc16;
}

.bg-lime-600 {
   background: #65a30d;
}

.bg-lime-700 {
   background: #4d7c0f;
}

.bg-lime-800 {
   background: #3f6212;
}

.bg-lime-900 {
   background: #365314;
}

.bg-lime-950 {
   background: #1a2e05;
}


/* ================================
   10. GREEN
   ================================ */
.bg-green-50 {
   background: #f0fdf4;
}

.bg-green-100 {
   background: #dcfce7;
}

.bg-green-200 {
   background: #bbf7d0;
}

.bg-green-300 {
   background: #86efac;
}

.bg-green-400 {
   background: #4ade80;
}

.bg-green-500 {
   background: #22c55e;
}

.bg-green-600 {
   background: #16a34a;
}

.bg-green-700 {
   background: #15803d;
}

.bg-green-800 {
   background: #166534;
}

.bg-green-900 {
   background: #14532d;
}

.bg-green-950 {
   background: #052e16;
}


/* ================================
   11. EMERALD
   ================================ */
.bg-emerald-50 {
   background: #ecfdf5;
}

.bg-emerald-100 {
   background: #d1fae5;
}

.bg-emerald-200 {
   background: #a7f3d0;
}

.bg-emerald-300 {
   background: #6ee7b7;
}

.bg-emerald-400 {
   background: #34d399;
}

.bg-emerald-500 {
   background: #10b981;
}

.bg-emerald-600 {
   background: #059669;
}

.bg-emerald-700 {
   background: #047857;
}

.bg-emerald-800 {
   background: #065f46;
}

.bg-emerald-900 {
   background: #064e3b;
}

.bg-emerald-950 {
   background: #022c22;
}


/* ================================
   12. TEAL
   ================================ */
.bg-teal-50 {
   background: #f0fdfa;
}

.bg-teal-100 {
   background: #ccfbf1;
}

.bg-teal-200 {
   background: #99f6e4;
}

.bg-teal-300 {
   background: #5eead4;
}

.bg-teal-400 {
   background: #2dd4bf;
}

.bg-teal-500 {
   background: #14b8a6;
}

.bg-teal-600 {
   background: #0d9488;
}

.bg-teal-700 {
   background: #0f766e;
}

.bg-teal-800 {
   background: #115e59;
}

.bg-teal-900 {
   background: #134e4a;
}

.bg-teal-950 {
   background: #042f2e;
}


/* ================================
   13. CYAN
   ================================ */
.bg-cyan-50 {
   background: #ecfeff;
}

.bg-cyan-100 {
   background: #cffafe;
}

.bg-cyan-200 {
   background: #a5f3fc;
}

.bg-cyan-300 {
   background: #67e8f9;
}

.bg-cyan-400 {
   background: #22d3ee;
}

.bg-cyan-500 {
   background: #06b6d4;
}

.bg-cyan-600 {
   background: #0891b2;
}

.bg-cyan-700 {
   background: #0e7490;
}

.bg-cyan-800 {
   background: #155f75;
}

.bg-cyan-900 {
   background: #164e63;
}

.bg-cyan-950 {
   background: #083344;
}


/* ================================
   14. SKY
   ================================ */
.bg-sky-50 {
   background: #f0f9ff;
}

.bg-sky-100 {
   background: #e0f2fe;
}

.bg-sky-200 {
   background: #bae6fd;
}

.bg-sky-300 {
   background: #7dd3fc;
}

.bg-sky-400 {
   background: #38bdf8;
}

.bg-sky-500 {
   background: #0ea5e9;
}

.bg-sky-600 {
   background: #0284c7;
}

.bg-sky-700 {
   background: #0369a1;
}

.bg-sky-800 {
   background: #075985;
}

.bg-sky-900 {
   background: #0c4a6e;
}

.bg-sky-950 {
   background: #082f49;
}


/* ================================
   15. BLUE
   ================================ */
.bg-blue-50 {
   background: #eff6ff;
}

.bg-blue-100 {
   background: #dbeafe;
}

.bg-blue-200 {
   background: #bfdbfe;
}

.bg-blue-300 {
   background: #93c5fd;
}

.bg-blue-400 {
   background: #60a5fa;
}

.bg-blue-500 {
   background: #3b82f6;
}

.bg-blue-600 {
   background: #2563eb;
}

.bg-blue-700 {
   background: #1d4ed8;
}

.bg-blue-800 {
   background: #1e40af;
}

.bg-blue-900 {
   background: #1e3a8a;
}

.bg-blue-950 {
   background: #172554;
}


/* ================================
   16. INDIGO
   ================================ */
.bg-indigo-50 {
   background: #eef2ff;
}

.bg-indigo-100 {
   background: #e0e7ff;
}

.bg-indigo-200 {
   background: #c7d2fe;
}

.bg-indigo-300 {
   background: #a5b4fc;
}

.bg-indigo-400 {
   background: #818cf8;
}

.bg-indigo-500 {
   background: #6366f1;
}

.bg-indigo-600 {
   background: #4f46e5;
}

.bg-indigo-700 {
   background: #4338ca;
}

.bg-indigo-800 {
   background: #3730a3;
}

.bg-indigo-900 {
   background: #312e81;
}

.bg-indigo-950 {
   background: #1e1b4b;
}


/* ================================
   17. VIOLET
   ================================ */
.bg-violet-50 {
   background: #f5f3ff;
}

.bg-violet-100 {
   background: #ede9fe;
}

.bg-violet-200 {
   background: #ddd6fe;
}

.bg-violet-300 {
   background: #c4b5fd;
}

.bg-violet-400 {
   background: #a78bfa;
}

.bg-violet-500 {
   background: #8b5cf6;
}

.bg-violet-600 {
   background: #7c3aed;
}

.bg-violet-700 {
   background: #6d28d9;
}

.bg-violet-800 {
   background: #5b21b6;
}

.bg-violet-900 {
   background: #4c1d95;
}

.bg-violet-950 {
   background: #2e1065;
}


/* ================================
   18. PURPLE
   ================================ */
.bg-purple-50 {
   background: #faf5ff;
}

.bg-purple-100 {
   background: #f3e8ff;
}

.bg-purple-200 {
   background: #e9d5ff;
}

.bg-purple-300 {
   background: #d8b4fe;
}

.bg-purple-400 {
   background: #c084fc;
}

.bg-purple-500 {
   background: #a855f7;
}

.bg-purple-600 {
   background: #9333ea;
}

.bg-purple-700 {
   background: #7e22ce;
}

.bg-purple-800 {
   background: #6b21a8;
}

.bg-purple-900 {
   background: #581c87;
}

.bg-purple-950 {
   background: #3b0764;
}


/* ================================
   19. FUCHSIA
   ================================ */
.bg-fuchsia-50 {
   background: #fdf4ff;
}

.bg-fuchsia-100 {
   background: #fae8ff;
}

.bg-fuchsia-200 {
   background: #f5d0fe;
}

.bg-fuchsia-300 {
   background: #f0abfc;
}

.bg-fuchsia-400 {
   background: #e879f9;
}

.bg-fuchsia-500 {
   background: #d946ef;
}

.bg-fuchsia-600 {
   background: #c026d3;
}

.bg-fuchsia-700 {
   background: #a21caf;
}

.bg-fuchsia-800 {
   background: #86198f;
}

.bg-fuchsia-900 {
   background: #701a75;
}

.bg-fuchsia-950 {
   background: #4a044e;
}


/* ================================
   20. PINK
   ================================ */
.bg-pink-50 {
   background: #fdf2f8;
}

.bg-pink-100 {
   background: #fce7f3;
}

.bg-pink-200 {
   background: #fbcfe8;
}

.bg-pink-300 {
   background: #f9a8d4;
}

.bg-pink-400 {
   background: #f472b6;
}

.bg-pink-500 {
   background: #ec4899;
}

.bg-pink-600 {
   background: #db2777;
}

.bg-pink-700 {
   background: #be185d;
}

.bg-pink-800 {
   background: #9d174d;
}

.bg-pink-900 {
   background: #831843;
}

.bg-pink-950 {
   background: #500724;
}


/* ================================
   21. ROSE
   ================================ */
.bg-rose-50 {
   background: #fff1f2;
}

.bg-rose-100 {
   background: #ffe4e6;
}

.bg-rose-200 {
   background: #fecdd3;
}

.bg-rose-300 {
   background: #fda4af;
}

.bg-rose-400 {
   background: #fb7185;
}

.bg-rose-500 {
   background: #f43f5e;
}

.bg-rose-600 {
   background: #e11d48;
}

.bg-rose-700 {
   background: #be123c;
}

.bg-rose-800 {
   background: #9f1239;
}

.bg-rose-900 {
   background: #881337;
}

.bg-rose-950 {
   background: #4c0519;
}


/* ===========================================================
   TEXT COLOR LIBRARY (Utility Version)
   21 Color Palettes · step: 100 / 300 / 500 / 700 / 900
   =========================================================== */

/* ================================
   1. SLATE
   ================================ */
.text-slate-100 {
   color: #f1f5f9;
}

.text-slate-300 {
   color: #cbd5e1;
}

.text-slate-500 {
   color: #64748b;
}

.text-slate-700 {
   color: #334155;
}

.text-slate-900 {
   color: #0f172a;
}

/* ================================
   2. ZINC
   ================================ */
.text-zinc-100 {
   color: #f4f4f5;
}

.text-zinc-300 {
   color: #d4d4d8;
}

.text-zinc-500 {
   color: #71717a;
}

.text-zinc-700 {
   color: #3f3f46;
}

.text-zinc-900 {
   color: #18181b;
}

/* ================================
   3. NEUTRAL
   ================================ */
.text-neutral-100 {
   color: #f5f5f5;
}

.text-neutral-300 {
   color: #d4d4d4;
}

.text-neutral-500 {
   color: #737373;
}

.text-neutral-700 {
   color: #404040;
}

.text-neutral-900 {
   color: #171717;
}

/* ================================
   4. STONE
   ================================ */
.text-stone-100 {
   color: #f5f5f4;
}

.text-stone-300 {
   color: #d6d3d1;
}

.text-stone-500 {
   color: #78716c;
}

.text-stone-700 {
   color: #44403c;
}

.text-stone-900 {
   color: #1c1917;
}

/* ================================
   5. RED
   ================================ */
.text-red-100 {
   color: #fee2e2;
}

.text-red-300 {
   color: #fca5a5;
}

.text-red-500 {
   color: #ef4444;
}

.text-red-700 {
   color: #b91c1c;
}

.text-red-900 {
   color: #7f1d1d;
}

/* ================================
   6. ORANGE
   ================================ */
.text-orange-100 {
   color: #ffedd5;
}

.text-orange-300 {
   color: #fdba74;
}

.text-orange-500 {
   color: #f97316;
}

.text-orange-700 {
   color: #c2410c;
}

.text-orange-900 {
   color: #7c2d12;
}

/* ================================
   7. AMBER
   ================================ */
.text-amber-100 {
   color: #fef3c7;
}

.text-amber-300 {
   color: #fcd34d;
}

.text-amber-500 {
   color: #f59e0b;
}

.text-amber-700 {
   color: #b45309;
}

.text-amber-900 {
   color: #78350f;
}

/* ================================
   8. YELLOW
   ================================ */
.text-yellow-100 {
   color: #fef9c3;
}

.text-yellow-300 {
   color: #fde047;
}

.text-yellow-500 {
   color: #eab308;
}

.text-yellow-700 {
   color: #a16207;
}

.text-yellow-900 {
   color: #713f12;
}

/* ================================
   9. LIME
   ================================ */
.text-lime-100 {
   color: #ecfccb;
}

.text-lime-300 {
   color: #bef264;
}

.text-lime-500 {
   color: #84cc16;
}

.text-lime-700 {
   color: #4d7c0f;
}

.text-lime-900 {
   color: #365314;
}

/* ================================
   10. GREEN
   ================================ */
.text-green-100 {
   color: #dcfce7;
}

.text-green-300 {
   color: #86efac;
}

.text-green-500 {
   color: #22c55e;
}

.text-green-700 {
   color: #15803d;
}

.text-green-900 {
   color: #14532d;
}

/* ================================
   11. EMERALD
   ================================ */
.text-emerald-100 {
   color: #d1fae5;
}

.text-emerald-300 {
   color: #6ee7b7;
}

.text-emerald-500 {
   color: #10b981;
}

.text-emerald-700 {
   color: #047857;
}

.text-emerald-900 {
   color: #064e3b;
}

/* ================================
   12. TEAL
   ================================ */
.text-teal-100 {
   color: #ccfbf1;
}

.text-teal-300 {
   color: #5eead4;
}

.text-teal-500 {
   color: #14b8a6;
}

.text-teal-700 {
   color: #0f766e;
}

.text-teal-900 {
   color: #134e4a;
}

/* ================================
   13. CYAN
   ================================ */
.text-cyan-100 {
   color: #cffafe;
}

.text-cyan-300 {
   color: #67e8f9;
}

.text-cyan-500 {
   color: #06b6d4;
}

.text-cyan-700 {
   color: #0e7490;
}

.text-cyan-900 {
   color: #164e63;
}

/* ================================
   14. SKY
   ================================ */
.text-sky-100 {
   color: #e0f2fe;
}

.text-sky-300 {
   color: #7dd3fc;
}

.text-sky-500 {
   color: #0ea5e9;
}

.text-sky-700 {
   color: #0369a1;
}

.text-sky-900 {
   color: #0c4a6e;
}

/* ================================
   15. BLUE
   ================================ */
.text-blue-100 {
   color: #dbeafe;
}

.text-blue-300 {
   color: #93c5fd;
}

.text-blue-500 {
   color: #3b82f6;
}

.text-blue-700 {
   color: #1d4ed8;
}

.text-blue-900 {
   color: #1e3a8a;
}

/* ================================
   16. INDIGO
   ================================ */
.text-indigo-100 {
   color: #e0e7ff;
}

.text-indigo-300 {
   color: #a5b4fc;
}

.text-indigo-500 {
   color: #6366f1;
}

.text-indigo-700 {
   color: #4338ca;
}

.text-indigo-900 {
   color: #312e81;
}

/* ================================
   17. VIOLET
   ================================ */
.text-violet-100 {
   color: #ede9fe;
}

.text-violet-300 {
   color: #c4b5fd;
}

.text-violet-500 {
   color: #8b5cf6;
}

.text-violet-700 {
   color: #6d28d9;
}

.text-violet-900 {
   color: #4c1d95;
}

/* ================================
   18. PURPLE
   ================================ */
.text-purple-100 {
   color: #f3e8ff;
}

.text-purple-300 {
   color: #d8b4fe;
}

.text-purple-500 {
   color: #a855f7;
}

.text-purple-700 {
   color: #7e22ce;
}

.text-purple-900 {
   color: #581c87;
}

/* ================================
   19. FUCHSIA
   ================================ */
.text-fuchsia-100 {
   color: #fae8ff;
}

.text-fuchsia-300 {
   color: #f0abfc;
}

.text-fuchsia-500 {
   color: #d946ef;
}

.text-fuchsia-700 {
   color: #a21caf;
}

.text-fuchsia-900 {
   color: #701a75;
}

/* ================================
   20. PINK
   ================================ */
.text-pink-100 {
   color: #fce7f3;
}

.text-pink-300 {
   color: #f9a8d4;
}

.text-pink-500 {
   color: #ec4899;
}

.text-pink-700 {
   color: #be185d;
}

.text-pink-900 {
   color: #831843;
}

/* ================================
   21. ROSE
   ================================ */
.text-rose-100 {
   color: #ffe4e6;
}

.text-rose-300 {
   color: #fda4af;
}

.text-rose-500 {
   color: #f43f5e;
}

.text-rose-700 {
   color: #be123c;
}

.text-rose-900 {
   color: #881337;
}


/* ===========================================================
   BORDER COLOR LIBRARY (Utility Version)
   21 Color Palettes · step: 100 / 300 / 500 / 700 / 900
   =========================================================== */

/* ================================
   1. SLATE
   ================================ */
.border-slate-100 {
   border-color: #f1f5f9;
}

.border-slate-300 {
   border-color: #cbd5e1;
}

.border-slate-500 {
   border-color: #64748b;
}

.border-slate-700 {
   border-color: #334155;
}

.border-slate-900 {
   border-color: #0f172a;
}

/* ================================
   2. ZINC
   ================================ */
.border-zinc-100 {
   border-color: #f4f4f5;
}

.border-zinc-300 {
   border-color: #d4d4d8;
}

.border-zinc-500 {
   border-color: #71717a;
}

.border-zinc-700 {
   border-color: #3f3f46;
}

.border-zinc-900 {
   border-color: #18181b;
}

/* ================================
   3. NEUTRAL
   ================================ */
.border-neutral-100 {
   border-color: #f5f5f5;
}

.border-neutral-300 {
   border-color: #d4d4d4;
}

.border-neutral-500 {
   border-color: #737373;
}

.border-neutral-700 {
   border-color: #404040;
}

.border-neutral-900 {
   border-color: #171717;
}

/* ================================
   4. STONE
   ================================ */
.border-stone-100 {
   border-color: #f5f5f4;
}

.border-stone-300 {
   border-color: #d6d3d1;
}

.border-stone-500 {
   border-color: #78716c;
}

.border-stone-700 {
   border-color: #44403c;
}

.border-stone-900 {
   border-color: #1c1917;
}

/* ================================
   5. RED
   ================================ */
.border-red-100 {
   border-color: #fee2e2;
}

.border-red-300 {
   border-color: #fca5a5;
}

.border-red-500 {
   border-color: #ef4444;
}

.border-red-700 {
   border-color: #b91c1c;
}

.border-red-900 {
   border-color: #7f1d1d;
}

/* ================================
   6. ORANGE
   ================================ */
.border-orange-100 {
   border-color: #ffedd5;
}

.border-orange-300 {
   border-color: #fdba74;
}

.border-orange-500 {
   border-color: #f97316;
}

.border-orange-700 {
   border-color: #c2410c;
}

.border-orange-900 {
   border-color: #7c2d12;
}

/* ================================
   7. AMBER
   ================================ */
.border-amber-100 {
   border-color: #fef3c7;
}

.border-amber-300 {
   border-color: #fcd34d;
}

.border-amber-500 {
   border-color: #f59e0b;
}

.border-amber-700 {
   border-color: #b45309;
}

.border-amber-900 {
   border-color: #78350f;
}

/* ================================
   8. YELLOW
   ================================ */
.border-yellow-100 {
   border-color: #fef9c3;
}

.border-yellow-300 {
   border-color: #fde047;
}

.border-yellow-500 {
   border-color: #eab308;
}

.border-yellow-700 {
   border-color: #a16207;
}

.border-yellow-900 {
   border-color: #713f12;
}

/* ================================
   9. LIME
   ================================ */
.border-lime-100 {
   border-color: #ecfccb;
}

.border-lime-300 {
   border-color: #bef264;
}

.border-lime-500 {
   border-color: #84cc16;
}

.border-lime-700 {
   border-color: #4d7c0f;
}

.border-lime-900 {
   border-color: #365314;
}

/* ================================
   10. GREEN
   ================================ */
.border-green-100 {
   border-color: #dcfce7;
}

.border-green-300 {
   border-color: #86efac;
}

.border-green-500 {
   border-color: #22c55e;
}

.border-green-700 {
   border-color: #15803d;
}

.border-green-900 {
   border-color: #14532d;
}

/* ================================
   11. EMERALD
   ================================ */
.border-emerald-100 {
   border-color: #d1fae5;
}

.border-emerald-300 {
   border-color: #6ee7b7;
}

.border-emerald-500 {
   border-color: #10b981;
}

.border-emerald-700 {
   border-color: #047857;
}

.border-emerald-900 {
   border-color: #064e3b;
}

/* ================================
   12. TEAL
   ================================ */
.border-teal-100 {
   border-color: #ccfbf1;
}

.border-teal-300 {
   border-color: #5eead4;
}

.border-teal-500 {
   border-color: #14b8a6;
}

.border-teal-700 {
   border-color: #0f766e;
}

.border-teal-900 {
   border-color: #134e4a;
}

/* ================================
   13. CYAN
   ================================ */
.border-cyan-100 {
   border-color: #cffafe;
}

.border-cyan-300 {
   border-color: #67e8f9;
}

.border-cyan-500 {
   border-color: #06b6d4;
}

.border-cyan-700 {
   border-color: #0e7490;
}

.border-cyan-900 {
   border-color: #164e63;
}

/* ================================
   14. SKY
   ================================ */
.border-sky-100 {
   border-color: #e0f2fe;
}

.border-sky-300 {
   border-color: #7dd3fc;
}

.border-sky-500 {
   border-color: #0ea5e9;
}

.border-sky-700 {
   border-color: #0369a1;
}

.border-sky-900 {
   border-color: #0c4a6e;
}

/* ================================
   15. BLUE
   ================================ */
.border-blue-100 {
   border-color: #dbeafe;
}

.border-blue-300 {
   border-color: #93c5fd;
}

.border-blue-500 {
   border-color: #3b82f6;
}

.border-blue-700 {
   border-color: #1d4ed8;
}

.border-blue-900 {
   border-color: #1e3a8a;
}

/* ================================
   16. INDIGO
   ================================ */
.border-indigo-100 {
   border-color: #e0e7ff;
}

.border-indigo-300 {
   border-color: #a5b4fc;
}

.border-indigo-500 {
   border-color: #6366f1;
}

.border-indigo-700 {
   border-color: #4338ca;
}

.border-indigo-900 {
   border-color: #312e81;
}

/* ================================
   17. VIOLET
   ================================ */
.border-violet-100 {
   border-color: #ede9fe;
}

.border-violet-300 {
   border-color: #c4b5fd;
}

.border-violet-500 {
   border-color: #8b5cf6;
}

.border-violet-700 {
   border-color: #6d28d9;
}

.border-violet-900 {
   border-color: #4c1d95;
}

/* ================================
   18. PURPLE
   ================================ */
.border-purple-100 {
   border-color: #f3e8ff;
}

.border-purple-300 {
   border-color: #d8b4fe;
}

.border-purple-500 {
   border-color: #a855f7;
}

.border-purple-700 {
   border-color: #7e22ce;
}

.border-purple-900 {
   border-color: #581c87;
}

/* ================================
   19. FUCHSIA
   ================================ */
.border-fuchsia-100 {
   border-color: #fae8ff;
}

.border-fuchsia-300 {
   border-color: #f0abfc;
}

.border-fuchsia-500 {
   border-color: #d946ef;
}

.border-fuchsia-700 {
   border-color: #a21caf;
}

.border-fuchsia-900 {
   border-color: #701a75;
}

/* ================================
   20. PINK
   ================================ */
.border-pink-100 {
   border-color: #fce7f3;
}

.border-pink-300 {
   border-color: #f9a8d4;
}

.border-pink-500 {
   border-color: #ec4899;
}

.border-pink-700 {
   border-color: #be185d;
}

.border-pink-900 {
   border-color: #831843;
}

/* ================================
   21. ROSE
   ================================ */
.border-rose-100 {
   border-color: #ffe4e6;
}

.border-rose-300 {
   border-color: #fda4af;
}

.border-rose-500 {
   border-color: #f43f5e;
}

.border-rose-700 {
   border-color: #be123c;
}

.border-rose-900 {
   border-color: #881337;
}


/* ============================================================
   BUTTON COLOR SYSTEM (21 COLOR PALETTE)
   .btn-{color}
   .btn-{color}-outline
   .btn-{color}-soft
   ============================================================ */

/* 기본 구조 */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 8px 16px;
   border-radius: 6px;
   font-weight: 600;
   font-size: 14px;
   line-height: 1;
   cursor: pointer;
   transition: all .2s ease;
}

/* ... (나머지 버튼 스타일은 요청하신 내용에 포함되어 있으므로 생략하거나 기존 내용을 유지하시면 됩니다) ... */
/* ============================================================
   1. SLATE
   ============================================================ */
.btn-slate {
   background: #64748b;
   color: #fff;
}

.btn-slate:hover {
   background: #475569;
}

.btn-slate-outline {
   border: 1px solid #64748b;
   background: transparent;
   color: #64748b;
}

.btn-slate-outline:hover {
   background: #64748b;
   color: #fff;
}

.btn-slate-soft {
   background: #f1f5f9;
   color: #334155;
}

.btn-slate-soft:hover {
   background: #e2e8f0;
}

/* ============================================================
   2. ZINC
   ============================================================ */
.btn-zinc {
   background: #71717a;
   color: #fff;
}

.btn-zinc:hover {
   background: #52525b;
}

.btn-zinc-outline {
   border: 1px solid #71717a;
   background: transparent;
   color: #71717a;
}

.btn-zinc-outline:hover {
   background: #71717a;
   color: #fff;
}

.btn-zinc-soft {
   background: #f4f4f5;
   color: #3f3f46;
}

.btn-zinc-soft:hover {
   background: #e4e4e7;
}

/* ============================================================
   3. NEUTRAL
   ============================================================ */
.btn-neutral {
   background: #737373;
   color: #fff;
}

.btn-neutral:hover {
   background: #525252;
}

.btn-neutral-outline {
   border: 1px solid #737373;
   background: transparent;
   color: #737373;
}

.btn-neutral-outline:hover {
   background: #737373;
   color: #fff;
}

.btn-neutral-soft {
   background: #f5f5f5;
   color: #404040;
}

.btn-neutral-soft:hover {
   background: #e5e5e5;
}

/* ============================================================
   4. STONE
   ============================================================ */
.btn-stone {
   background: #78716c;
   color: #fff;
}

.btn-stone:hover {
   background: #57534e;
}

.btn-stone-outline {
   border: 1px solid #78716c;
   background: transparent;
   color: #78716c;
}

.btn-stone-outline:hover {
   background: #78716c;
   color: #fff;
}

.btn-stone-soft {
   background: #f5f5f4;
   color: #44403c;
}

.btn-stone-soft:hover {
   background: #e7e5e4;
}

/* ============================================================
   5. RED
   ============================================================ */
.btn-red {
   background: #ef4444;
   color: #fff;
}

.btn-red:hover {
   background: #dc2626;
}

.btn-red-outline {
   border: 1px solid #ef4444;
   background: transparent;
   color: #ef4444;
}

.btn-red-outline:hover {
   background: #ef4444;
   color: #fff;
}

.btn-red-soft {
   background: #fee2e2;
   color: #b91c1c;
}

.btn-red-soft:hover {
   background: #fecaca;
}

/* ============================================================
   6. ORANGE
   ============================================================ */
.btn-orange {
   background: #f97316;
   color: #fff;
}

.btn-orange:hover {
   background: #ea580c;
}

.btn-orange-outline {
   border: 1px solid #f97316;
   background: transparent;
   color: #f97316;
}

.btn-orange-outline:hover {
   background: #f97316;
   color: #fff;
}

.btn-orange-soft {
   background: #ffedd5;
   color: #c2410c;
}

.btn-orange-soft:hover {
   background: #fed7aa;
}

/* ============================================================
   7. AMBER
   ============================================================ */
.btn-amber {
   background: #f59e0b;
   color: #fff;
}

.btn-amber:hover {
   background: #d97706;
}

.btn-amber-outline {
   border: 1px solid #f59e0b;
   background: transparent;
   color: #f59e0b;
}

.btn-amber-outline:hover {
   background: #f59e0b;
   color: #fff;
}

.btn-amber-soft {
   background: #fef3c7;
   color: #b45309;
}

.btn-amber-soft:hover {
   background: #fde68a;
}

/* ============================================================
   8. YELLOW
   ============================================================ */
.btn-yellow {
   background: #eab308;
   color: #fff;
}

.btn-yellow:hover {
   background: #ca8a04;
}

.btn-yellow-outline {
   border: 1px solid #eab308;
   background: transparent;
   color: #eab308;
}

.btn-yellow-outline:hover {
   background: #eab308;
   color: #fff;
}

.btn-yellow-soft {
   background: #fef9c3;
   color: #a16207;
}

.btn-yellow-soft:hover {
   background: #fef08a;
}

/* ============================================================
   9. LIME
   ============================================================ */
.btn-lime {
   background: #84cc16;
   color: #fff;
}

.btn-lime:hover {
   background: #65a30d;
}

.btn-lime-outline {
   border: 1px solid #84cc16;
   background: transparent;
   color: #84cc16;
}

.btn-lime-outline:hover {
   background: #84cc16;
   color: #fff;
}

.btn-lime-soft {
   background: #ecfccb;
   color: #4d7c0f;
}

.btn-lime-soft:hover {
   background: #d9f99d;
}

/* ============================================================
   10. GREEN
   ============================================================ */
.btn-green {
   background: #22c55e;
   color: #fff;
}

.btn-green:hover {
   background: #16a34a;
}

.btn-green-outline {
   border: 1px solid #22c55e;
   background: transparent;
   color: #22c55e;
}

.btn-green-outline:hover {
   background: #22c55e;
   color: #fff;
}

.btn-green-soft {
   background: #dcfce7;
   color: #15803d;
}

.btn-green-soft:hover {
   background: #bbf7d0;
}

/* ============================================================
   11. EMERALD
   ============================================================ */
.btn-emerald {
   background: #10b981;
   color: #fff;
}

.btn-emerald:hover {
   background: #059669;
}

.btn-emerald-outline {
   border: 1px solid #10b981;
   background: transparent;
   color: #10b981;
}

.btn-emerald-outline:hover {
   background: #10b981;
   color: #fff;
}

.btn-emerald-soft {
   background: #d1fae5;
   color: #047857;
}

.btn-emerald-soft:hover {
   background: #a7f3d0;
}

/* ============================================================
   12. TEAL
   ============================================================ */
.btn-teal {
   background: #14b8a6;
   color: #fff;
}

.btn-teal:hover {
   background: #0d9488;
}

.btn-teal-outline {
   border: 1px solid #14b8a6;
   background: transparent;
   color: #14b8a6;
}

.btn-teal-outline:hover {
   background: #14b8a6;
   color: #fff;
}

.btn-teal-soft {
   background: #ccfbf1;
   color: #0f766e;
}

.btn-teal-soft:hover {
   background: #99f6e4;
}

/* ============================================================
   13. CYAN
   ============================================================ */
.btn-cyan {
   background: #06b6d4;
   color: #fff;
}

.btn-cyan:hover {
   background: #0891b2;
}

.btn-cyan-outline {
   border: 1px solid #06b6d4;
   background: transparent;
   color: #06b6d4;
}

.btn-cyan-outline:hover {
   background: #06b6d4;
   color: #fff;
}

.btn-cyan-soft {
   background: #cffafe;
   color: #0e7490;
}

.btn-cyan-soft:hover {
   background: #a5f3fc;
}

/* ============================================================
   14. SKY
   ============================================================ */
.btn-sky {
   background: #0ea5e9;
   color: #fff;
}

.btn-sky:hover {
   background: #0284c7;
}

.btn-sky-outline {
   border: 1px solid #0ea5e9;
   background: transparent;
   color: #0ea5e9;
}

.btn-sky-outline:hover {
   background: #0ea5e9;
   color: #fff;
}

.btn-sky-soft {
   background: #e0f2fe;
   color: #0369a1;
}

.btn-sky-soft:hover {
   background: #bae6fd;
}

/* ============================================================
   15. BLUE
   ============================================================ */
.btn-blue {
   background: #3b82f6;
   color: #fff;
}

.btn-blue:hover {
   background: #2563eb;
}

.btn-blue-outline {
   border: 1px solid #3b82f6;
   background: transparent;
   color: #3b82f6;
}

.btn-blue-outline:hover {
   background: #3b82f6;
   color: #fff;
}

.btn-blue-soft {
   background: #dbeafe;
   color: #1d4ed8;
}

.btn-blue-soft:hover {
   background: #bfdbfe;
}

/* ============================================================
   16. INDIGO
   ============================================================ */
.btn-indigo {
   background: #6366f1;
   color: #fff;
}

.btn-indigo:hover {
   background: #4f46e5;
}

.btn-indigo-outline {
   border: 1px solid #6366f1;
   background: transparent;
   color: #6366f1;
}

.btn-indigo-outline:hover {
   background: #6366f1;
   color: #fff;
}

.btn-indigo-soft {
   background: #e0e7ff;
   color: #4338ca;
}

.btn-indigo-soft:hover {
   background: #c7d2fe;
}

/* ============================================================
   17. VIOLET
   ============================================================ */
.btn-violet {
   background: #8b5cf6;
   color: #fff;
}

.btn-violet:hover {
   background: #7c3aed;
}

.btn-violet-outline {
   border: 1px solid #8b5cf6;
   background: transparent;
   color: #8b5cf6;
}

.btn-violet-outline:hover {
   background: #8b5cf6;
   color: #fff;
}

.btn-violet-soft {
   background: #ede9fe;
   color: #6d28d9;
}

.btn-violet-soft:hover {
   background: #ddd6fe;
}

/* ============================================================
   18. PURPLE
   ============================================================ */
.btn-purple {
   background: #a855f7;
   color: #fff;
}

.btn-purple:hover {
   background: #9333ea;
}

.btn-purple-outline {
   border: 1px solid #a855f7;
   background: transparent;
   color: #a855f7;
}

.btn-purple-outline:hover {
   background: #a855f7;
   color: #fff;
}

.btn-purple-soft {
   background: #f3e8ff;
   color: #7e22ce;
}

.btn-purple-soft:hover {
   background: #e9d5ff;
}

/* ============================================================
   19. FUCHSIA
   ============================================================ */
.btn-fuchsia {
   background: #d946ef;
   color: #fff;
}

.btn-fuchsia:hover {
   background: #c026d3;
}

.btn-fuchsia-outline {
   border: 1px solid #d946ef;
   background: transparent;
   color: #d946ef;
}

.btn-fuchsia-outline:hover {
   background: #d946ef;
   color: #fff;
}

.btn-fuchsia-soft {
   background: #fae8ff;
   color: #a21caf;
}

.btn-fuchsia-soft:hover {
   background: #f5d0fe;
}

/* ============================================================
   20. PINK
   ============================================================ */
.btn-pink {
   background: #ec4899;
   color: #fff;
}

.btn-pink:hover {
   background: #db2777;
}

.btn-pink-outline {
   border: 1px solid #ec4899;
   background: transparent;
   color: #ec4899;
}

.btn-pink-outline:hover {
   background: #ec4899;
   color: #fff;
}

.btn-pink-soft {
   background: #fce7f3;
   color: #be185d;
}

.btn-pink-soft:hover {
   background: #fbcfe8;
}

/* ============================================================
   21. ROSE
   ============================================================ */
.btn-rose {
   background: #f43f5e;
   color: #fff;
}

.btn-rose:hover {
   background: #e11d48;
}

.btn-rose-outline {
   border: 1px solid #f43f5e;
   background: transparent;
   color: #f43f5e;
}

.btn-rose-outline:hover {
   background: #f43f5e;
   color: #fff;
}

.btn-rose-soft {
   background: #ffe4e6;
   color: #be123c;
}

.btn-rose-soft:hover {
   background: #fecdd3;
}

/* 0% ~ 100% 투명도 유틸리티 */
.opacity-0 {
   opacity: 0;
}

.opacity-10 {
   opacity: 0.1;
}

.opacity-20 {
   opacity: 0.2;
}

.opacity-30 {
   opacity: 0.3;
}

.opacity-40 {
   opacity: 0.4;
}

.opacity-50 {
   opacity: 0.5;
}

.opacity-60 {
   opacity: 0.6;
}

.opacity-70 {
   opacity: 0.7;
}

.opacity-80 {
   opacity: 0.8;
}

.opacity-90 {
   opacity: 0.9;
}

.opacity-100 {
   opacity: 1;
}


.mainHeroSection-img-1 {}


.mainHeroSection-img-1 {
   position: relative;
   overflow: hidden;
   background-image: url('/setting/media/images/pattern.png');
}