/* ======================================
   CSS Variables for Theme Configuration
   ====================================== */

/* ======================================
   Sidebar Logo Responsive Styles
   ====================================== */

/* PC: 기본 로고 크기 */
.sidebar-logo {
  max-width: 160px;
  height: auto;
}

/* 모바일: 최대 높이 30px */
@media (max-width: 767.98px) {
  .sidebar-logo {
    max-height: 30px;
    width: auto;
  }
}

/* Light Theme Variables */
[data-bs-theme="light"][data-skin="bordered"] {
  --bs-logo-box-bg: #fff;
  --bs-text-dark-rgb: 107, 108, 157;
}

/* Dark Theme Variables */
[data-bs-theme="dark"][data-skin="bordered"] {
  --bs-body-bg: #0c0e19;
  --bs-logo-box-bg: #393a5a;
  --bs-text-dark-rgb: #f5f5f9;
}

/* ======================================
   Global Font Size Settings
   ====================================== */

/* 전역 최소 폰트 크기 설정: 모든 요소의 최소 폰트 크기를 15px로 설정 */
* {
  min-font-size: 15px;
}

/* 기본 body 폰트 크기 */
body {
  font-size: 16px;
  scrollbar-gutter: stable;
}

/* 작은 텍스트 요소들의 최소 폰트 크기 보장 */
small,
.small,
.text-small,
.badge,
.btn-sm,
.form-text,
.input-group-text,
.dropdown-item {
  font-size: 15px !important;
}

/* ======================================
   Button Components
   ====================================== */

/* 버튼 최소 크기: 44px × 44px (접근성 터치 타겟 기준) */
.btn,
button[type="button"],
button[type="submit"],
button[type="reset"],
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn {
  /* min-height: 44px !important; */
  min-width: 44px !important;
  /* padding: 0.625rem 1.25rem !important; */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* line-height: 1.5 !important; */
}

/* 작은 버튼도 최소 크기 보장 */
.btn-sm,
.btn-group-sm > .btn {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0.5rem 1rem !important; /* 8px 16px */
}
.btn-xs {
  font-size: 15px !important;
}

/* 아이콘 전용 버튼 (정사각형) */
.btn-icon,
.btn[data-icon-only] {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0.625rem !important;
}

/* 링크 형태 버튼은 높이만 보장 */
.btn-link {
  min-height: 44px !important;
  min-width: auto !important;
}

/* 닫기 버튼은 최소 크기 규칙 제외 (UI/UX 패턴 유지) */
.btn-close,
button.btn-close,
.modal-header .btn-close {
  min-height: auto !important;
  min-width: auto !important;
  width: 0.8em !important;
  height: 0.8em !important;
  padding: 0.25em 0.25em !important;
}

/* ======================================
   Background Components
   ====================================== */

/* Section Background */
[data-bs-theme="light"][data-skin="bordered"] .bg-vasanta-section {
  background-color: #f5f5f9;
}

[data-bs-theme="dark"][data-skin="bordered"] .bg-vasanta-section {
  background-color: #232333;
}

/* ======================================
   Logo Components
   ====================================== */

/* Logo Box */
.vasanta-logo-box {
  background-color: var(--bs-logo-box-bg);
  transition: box-shadow 0.3s ease;
}

.vasanta-logo-box:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Layout Menu App Brand - 로고 영역 높이 65px */
.layout-menu .app-brand {
  min-height: auto !important;
  height: 65px !important;
}

.layout-menu .app-brand.demo {
  padding: 0.8rem 0.9rem !important;
  height: 65px !important;
}

/* 모바일 사이드 메뉴 레이아웃 - 프로필 하단 고정, 메뉴만 스크롤 */
@media (max-width: 1199.98px) {
  /* 메뉴가 열렸을 때 body 스크롤 막기 */
  html.layout-menu-expanded,
  html.layout-menu-expanded body {
    overflow: hidden !important;
  }

  /* 메뉴 전체 컨테이너: 스크롤 완전 제거 */
  #layout-menu.menu-vertical,
  .layout-menu.menu-vertical {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  /* 로고 영역: 상단 고정 */
  #layout-menu.menu-vertical .app-brand,
  .layout-menu.menu-vertical .app-brand {
    flex: 0 0 auto !important;
  }

  /* 메뉴 내부 그림자: 상단 고정 */
  #layout-menu.menu-vertical .menu-inner-shadow,
  .layout-menu.menu-vertical .menu-inner-shadow {
    flex: 0 0 auto !important;
  }

  /* 메뉴 영역: PerfectScrollbar 사용 */
  #layout-menu.menu-vertical .menu-inner,
  .layout-menu.menu-vertical .menu-inner {
    flex: 1 1 0 !important;
    position: relative !important; /* PerfectScrollbar 필수 */
    overflow: hidden !important; /* PerfectScrollbar가 스크롤 처리 */
    min-height: 0 !important;
  }

  /* 프로필/하단 영역: 하단 고정 */
  #layout-menu.menu-vertical .menu-bottom-area,
  .layout-menu.menu-vertical .menu-bottom-area {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
  }
}

/* Menu Header 간격 조정 */
.menu-vertical .menu-header {
  margin-block: 0.75rem 0.5rem;
}

/* Menu Item 높이 조정 */
.menu-vertical .menu-item .menu-link {
  min-block-size: 2.25rem;
}

/* Menu Header 활성화 스타일 - 하위 메뉴 선택 시 상위 그룹 헤더 파란색 */
.menu-header-toggle.has-active-child .menu-header-text,
.menu-header-toggle.has-active-child .menu-header-arrow {
  color: #696cff !important;
  font-weight: 600;
}

/* Menu Header 구분선 제거 및 높이 조정 */
.menu-vertical .menu-header-toggle {
  border-top: none;
  height: 25px;
  min-height: 25px;
  padding-block: 4px;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
}

/* Logo Image Filter */
.logo-img {
  filter: none;
  transition: filter 0.3s ease;
}

[data-bs-theme="dark"] .logo-img {
  filter: grayscale(1) brightness(10) contrast(0.4);
  transition: filter 0.3s ease;
}

/* ======================================
   Text Components
   ====================================== */

.vasanta-text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-text-dark-rgb), var(--bs-text-opacity)) !important;
}

/* ======================================
   Join Page Layout
   ====================================== */

/* PC용 중앙정렬 및 고정 너비 */
@media (min-width: 768px) {
  .authentication-inner .card {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ======================================
   Form Components - Login Page
   ====================================== */

/* 아이디/비밀번호 레이블 폰트 크기 조정 */
.form-label {
  font-size: 15px !important;
}

/* 자동 로그인 체크박스 및 레이블 스타일 조정 */
.form-check.form-switch.mb-2 {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding-left: 0 !important;
}

.form-check.form-switch.mb-2 .form-check-input {
  width: 1.25rem !important;
  height: 0.625rem !important;
  margin-left: 0 !important;
}

.form-check.form-switch.mb-2 .form-check-label {
  font-size: 1rem !important;
  margin-left: 0 !important;
}

/* ID로 더 구체적인 타겟팅 */
#rememberMe {
  width: 1.25rem !important;
  height: 0.625rem !important;
}

label[for="rememberMe"] {
  font-size: 1rem !important;
}

/* ======================================
   Modal Components
   ====================================== */

/* 모달 내부 버튼 transition 동기화 - 모달과 동시에 사라지도록 */
.modal .btn,
.modal-footer .btn,
.modal-body .btn {
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out !important;
  /* opacity는 transition에서 제외하여 부모(모달)의 fade와 동시에 사라짐 */
}

/* 스크롤바 너비 제거 - Sneat 레이아웃 계산용 */
html,
body {
  --bs-scrollbar-width: 0px !important;
}

/* 네이티브 스크롤바 숨기기 (기능은 유지) */
html {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE, Edge */
}

html::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
}

/* 모달 열릴 때 배경 스크롤 방지 - JS에서 position:fixed 처리 */
body.modal-open {
  overflow: hidden !important;
}

/* 모달 백드롭 스타일 개선 */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 모달이 여러 개 열릴 때 z-index 처리 */
.modal {
  z-index: 1050 !important;
  padding-right: 0 !important;
  overflow: hidden !important; /* 모달 자체 스크롤 제거 */
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* 모달 다이얼로그: 화면 높이에 맞춤 */
.modal-dialog {
  max-height: calc(100vh - 2rem) !important;
}

/* 모달 콘텐츠: 화면 높이에 맞춤, 내부 스크롤 */
.modal-content {
  max-height: calc(100vh - 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 모달 바디만 스크롤 */
.modal-body {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

.modal-header,
.modal-footer {
  flex-shrink: 0 !important;
}

.modal-backdrop {
  z-index: 1040 !important;
}

/* 모바일에서 모달을 헤더 아래로 배치 (기본 모달용) */
@media (max-width: 768px) {
  .modal-dialog:not(.modal-dialog-centered) {
    margin-top: 110px !important; /* 헤더 높이 + 여유 여백 */
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    margin-bottom: 1rem !important;
    max-height: calc(100vh - 125px) !important; /* 헤더 높이 + 여백 제외 */
  }

  .modal-dialog:not(.modal-dialog-centered) .modal-content {
    max-height: calc(100vh - 125px) !important; /* 헤더 높이 + 여백 제외 */
    display: flex !important;
    flex-direction: column !important;
  }

  /* 중앙 정렬 모달 (modal-dialog-centered) */
  .modal-dialog.modal-dialog-centered {
    margin: 0.5rem auto !important;
    max-height: calc(100vh - 1rem) !important;
  }

  .modal-dialog.modal-dialog-centered .modal-content {
    max-height: calc(100vh - 1rem) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
  }

  /* 모달 헤더 고정 */
  .modal-header {
    flex-shrink: 0 !important;
  }

  /* 모달 푸터 고정 */
  .modal-footer {
    flex-shrink: 0 !important;
  }
}

/* ======================================
   Action Modal (컨펌 버튼 있는 모달)
   ====================================== */

/**
 * 액션 모달 규칙 (2025-12-03 추가)
 * - 사이즈: .modal-lg 필수
 * - 정렬: .modal-dialog-centered 필수
 * - 스크롤: .modal-dialog-scrollable 필수
 * - X 버튼: 사용 금지 (하단 닫기 버튼 사용)
 * - 최대 높이: calc(100vh - 60px)
 */

/* 액션 모달 최대 높이 제한 */
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 60px);
}

/* 모바일에서 액션 모달 높이 조정 */
@media (max-width: 768px) {
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3rem);
  }

  .modal-dialog-scrollable.modal-dialog-centered {
    min-height: calc(100% - 1rem);
  }
}

/* 중첩 모달 시 이전 모달 숨김 - 애니메이션 포함 */
.modal.modal-cascade-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 중첩 모달 복원 시 fade-in 애니메이션 */
.modal.modal-cascade-restoring {
  visibility: visible !important;
  opacity: 0;
  animation: modalCascadeRestore 0.15s ease-out forwards;
}

@keyframes modalCascadeRestore {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 모달 다이얼로그에도 애니메이션 적용 */
.modal.modal-cascade-restoring .modal-dialog {
  animation: modalDialogRestore 0.15s ease-out forwards;
}

@keyframes modalDialogRestore {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0);
  }
}

/* ======================================
   Modal Divider (구분선)
   ====================================== */

/* 모달 푸터 상단 구분선 - 스크롤 발생 시 시각적 구분 */
.modal-footer {
  border-top: 1px solid #e0e0e0 !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
}

/* 다크모드 대응 */
[data-bs-theme="dark"] .modal-footer {
  border-top-color: #3a3a3a !important;
}

/* ======================================
   Modal Tabs (모달 내 탭 스타일)
   ====================================== */

/* 업종코드 모달 탭 스타일 */
#industryCodeModal .nav-tabs {
  border-bottom: 1px solid #dee2e6 !important;
}

#industryCodeModal .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 1px solid transparent !important;
  padding: 0.75rem 1.5rem !important;
  color: #6c757d !important;
  transition: all 0.2s ease !important;
}

#industryCodeModal .nav-tabs .nav-link:hover {
  border-bottom-color: #dee2e6 !important;
  color: #495057 !important;
}

#industryCodeModal .nav-tabs .nav-link.active {
  border-bottom: 2px solid #696cff !important;
  color: #696cff !important;
  font-weight: 600 !important;
}

/* 다크모드 대응 */
[data-bs-theme="dark"] #industryCodeModal .nav-tabs {
  border-bottom-color: #3a3a3a !important;
}

[data-bs-theme="dark"] #industryCodeModal .nav-tabs .nav-link:hover {
  border-bottom-color: #3a3a3a !important;
}

/* ======================================
   Dropdown Toggle Text Style (케밥 버튼 텍스트 스타일)
   ====================================== */

/* 텍스트 형식 dropdown-toggle 스타일 */
.dropdown-toggle[style*="border: none"] {
  text-decoration: none !important;
}

/* 화살표 아이콘 제거 */
.dropdown-toggle[style*="border: none"]::after {
  display: none !important;
}

/* hover 효과 제거 */
.dropdown-toggle[style*="border: none"]:hover {
  background: none !important;
  color: #6c757d !important;
  text-decoration: none !important;
}

/* focus 효과 제거 */
.dropdown-toggle[style*="border: none"]:focus,
.dropdown-toggle[style*="border: none"]:active {
  background: none !important;
  color: #6c757d !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ======================================
   Third-party Library Customizations
   ====================================== */

/* ApexCharts Dark Theme */
[data-bs-theme="dark"] .apexcharts-xaxis .apexcharts-xaxis-texts-g text,
[data-bs-theme="dark"] .apexcharts-xaxis .apexcharts-xaxis-title text,
[data-bs-theme="dark"] .apexcharts-yaxis .apexcharts-yaxis-texts-g text,
[data-bs-theme="dark"] .apexcharts-yaxis .apexcharts-yaxis-title text {
  fill: #d5d5e2 !important;
}

/* ======================================
   Accessibility: Contrast Ratio (WCAG 2.1 AA)
   ====================================== */

/**
 * 명암비 기준 (WCAG 2.1 Success Criterion 1.4.3)
 * - 텍스트와 배경: 4.5:1 이상
 * - 아이콘과 배경: 4.5:1 이상
 * - 큰 텍스트 (18pt+ or 14pt 굵게): 3:1 이상
 *
 * 추가 일자: 2025-11-11
 */

/* 연한 회색 색상 사용 금지 - 명암비 불충분 */
/* ❌ #999999 (2.8:1), #aaa (2.7:1), #bbb (2.6:1), #ccc (1.8:1) */
/* ✅ #595959 (7:1) 사용 권장 */

/* 텍스트 색상 최소 명암비 보장 */
.text-muted,
.text-secondary,
small:not(.badge),
.form-text,
.help-text {
  color: #595959 !important; /* 명암비 7:1 */
}

/* 다크모드에서의 명암비 보장 */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] small:not(.badge),
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .help-text {
  color: #b8b8b8 !important; /* 다크모드 명암비 7:1 */
}

/* 아이콘 색상 명암비 보장 */
.icon-muted,
.text-muted > i,
.text-secondary > i {
  color: #595959 !important;
}

[data-bs-theme="dark"] .icon-muted,
[data-bs-theme="dark"] .text-muted > i,
[data-bs-theme="dark"] .text-secondary > i {
  color: #b8b8b8 !important;
}

/* ======================================
   Form Validation Messages
   ====================================== */

/**
 * 검증 메시지 스타일 표준화
 * - 배경색 없는 텍스트 스타일로 통일
 * - invalid-tooltip (배경색 있음) 사용 금지
 *
 * 추가 일자: 2025-11-11
 */

/* 배경색 없는 기본 스타일 강제 적용 */
.invalid-feedback,
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 15px !important; /* 최소 폰트 크기 */
  background-color: transparent !important; /* 배경색 제거 */
  padding: 0 !important; /* 패딩 제거 */
  border: none !important; /* 테두리 제거 */
}

/* 에러 메시지 색상 */
.invalid-feedback {
  color: #dc3545 !important; /* Bootstrap danger 색상 */
}

/* 성공 메시지 색상 */
.valid-feedback {
  color: #28a745 !important; /* Bootstrap success 색상 */
}

/* 검증 실패 시 표시 */
.was-validated :invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback {
  display: block !important;
}

/* 검증 성공 시 표시 */
.was-validated :valid ~ .valid-feedback,
.is-valid ~ .valid-feedback {
  display: block !important;
}

/* ❌ 툴팁 스타일 사용 금지 - 배경색 제거 */
.invalid-tooltip,
.valid-tooltip {
  background-color: transparent !important;
  color: #dc3545 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important; /* absolute 해제 */
  display: none;
  margin-top: 0.25rem;
  font-size: 15px !important;
}

.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-tooltip {
  display: block !important;
}

/* 다크모드 색상 */
[data-bs-theme="dark"] .invalid-feedback,
[data-bs-theme="dark"] .invalid-tooltip {
  color: #ff6b6b !important; /* 밝은 빨강 */
}

[data-bs-theme="dark"] .valid-feedback,
[data-bs-theme="dark"] .valid-tooltip {
  color: #51e5a8 !important; /* 밝은 초록 */
}

/* ======================================
   Horizontal Menu - 3 Depth Support
   ====================================== */

/* 3 depth 서브메뉴 기본 스타일 */
.menu-horizontal .menu-sub .menu-sub {
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  min-width: 200px !important;
  display: none !important;
  background: var(--bs-body-bg, #fff) !important;
  border: 1px solid var(--bs-border-color, #e7e7e8) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45) !important;
  z-index: 1030 !important;
}

/* 3 depth 메뉴 아이템이 열릴 때 */
.menu-horizontal .menu-sub .menu-item.open > .menu-sub {
  display: block !important;
}

/* 3 depth 서브메뉴 토글 화살표 */
.menu-horizontal .menu-sub .menu-toggle::after {
  content: "" !important;
  border-style: solid !important;
  border-width: 0.15em 0.15em 0 0 !important;
  display: inline-block !important;
  height: 0.5em !important;
  width: 0.5em !important;
  transform: rotate(45deg) !important;
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  margin-top: -0.25em !important;
}

/* 3 depth 메뉴 아이템 호버 스타일 */
.menu-horizontal .menu-sub .menu-item:hover > .menu-link {
  background-color: rgba(67, 89, 113, 0.04) !important;
}

/* 3 depth 서브메뉴 아이템 */
.menu-horizontal .menu-sub .menu-sub .menu-item .menu-link {
  padding: 0.5rem 1rem !important;
}

/* 화면 오른쪽 끝에서 왼쪽으로 펼침 (오버플로우 방지) */
@media (min-width: 769px) {
  .menu-horizontal
    .menu-inner
    > .menu-item:nth-last-child(-n + 2)
    .menu-sub
    .menu-sub {
    left: auto !important;
    right: 100% !important;
  }
}

/* 모바일에서 3 depth 처리 */
@media (max-width: 768px) {
  .menu-horizontal .menu-sub .menu-sub {
    position: static !important;
    left: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 1rem !important;
  }
}

/* 다크모드 지원 */
[data-bs-theme="dark"] .menu-horizontal .menu-sub .menu-sub {
  background: var(--bs-body-bg, #232333) !important;
  border-color: var(--bs-border-color, #3a3a3a) !important;
}

/* ======================================
   Sticky Menu
   ====================================== */

/* 기본 상태: 메뉴 위치 */
#layout-menu.layout-menu-horizontal {
  transition: all 0.3s ease;
}

/* 스크롤 시 fixed 클래스 추가 */
#layout-menu.layout-menu-horizontal.is-sticky {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1020 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* fixed일 때 컨텐츠 영역을 메뉴바에 가려지지 않도록 패딩 추가 (PC만) */
/* @media (min-width: 769px) {
    body.menu-is-sticky .container-xxl.flex-grow-1.container-p-y {
        padding-top: 80px !important;
    }
} */

/* ======================================
   Date Input Field Styles
   ====================================== */

/**
 * 날짜 입력 필드 UX 개선
 * - 입력 필드 전체 클릭 시 달력 열기
 * - 캘린더 아이콘 클릭 시에도 달력 열기
 * - 커서 pointer로 클릭 가능 표시
 * - input-group 사용 시 구분선 제거
 *
 * 추가 일자: 2025-12-10
 * 수정 일자: 2025-12-11 - 구분선 없는 스타일로 통일
 */

/* 날짜 입력 필드에 pointer 커서 적용 */
input[type="date"] {
  cursor: pointer !important;
}

/**
 * iOS Safari Date Input 스타일 수정
 * - 텍스트 좌측 정렬 (기본값이 가운데 정렬됨)
 * - 상하 패딩 균등화 (기본값은 하단 여백이 더 넓음)
 * - line-height 조정으로 수직 중앙 정렬
 *
 * 추가 일자: 2025-12-12
 */

/* iOS Safari에서 date input 기본 스타일 리셋 */
input[type="date"] {
  text-align: left !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* iOS Safari date input 내부 값 텍스트 - 수직 중앙 정렬 핵심 */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left !important;
  margin: auto 0 !important;
  padding: 0 !important;
}

/* iOS Safari datetime edit 컨테이너 */
input[type="date"]::-webkit-datetime-edit {
  text-align: left !important;
  padding: 0 !important;
}

/* iOS Safari datetime edit 필드들 */
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0 !important;
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field {
  padding: 0 !important;
}

/* form-control과 함께 사용 시 높이 고정 및 수직 중앙 정렬 */
input[type="date"].form-control {
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* input-group 내 date input 수직 중앙 정렬 */
.input-group input[type="date"].form-control {
  height: 100% !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
}

/* iOS Safari input-group date 값 수직 중앙 정렬 */
.input-group input[type="date"]::-webkit-date-and-time-value {
  margin: auto 0 !important;
  line-height: 1 !important;
}

/* Bootstrap row/col 내부 input-group date input 수직 중앙 정렬 */
.row .input-group input[type="date"].form-control {
  height: 38px !important;
  min-height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.row .input-group input[type="date"]::-webkit-date-and-time-value {
  margin: auto 0 !important;
  padding: 0 !important;
}

/* input-group 내 date 필드 - 브라우저 기본 달력 아이콘 숨기기 */
.input-group input[type="date"]::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
}

/* input-group 내 캘린더 아이콘에 pointer 커서 적용 */
.input-group .input-group-text {
  cursor: pointer !important;
}

/* input-group 날짜 필드 전용 스타일 - 구분선 제거, 하나의 박스처럼 표시 */
.input-group.date-input-group,
.input-group:has(> input[type="date"]) {
  border: 1px solid #d9dee3 !important;
  border-radius: 0.375rem !important;
  background-color: #fff !important;
}

.input-group.date-input-group > .form-control,
.input-group:has(> input[type="date"]) > .form-control {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.input-group.date-input-group > .input-group-text,
.input-group:has(> input[type="date"]) > .input-group-text {
  border: none !important;
  background-color: transparent !important;
}

/* input-group 날짜 필드 focus 시 전체 테두리 표시 (2줄) */
.input-group.date-input-group:focus-within,
.input-group:has(> input[type="date"]):focus-within {
  border-color: #696cff !important;
  box-shadow: 0 0 0 2px #696cff, 0 0 0 4px rgba(105, 108, 255, 0.25) !important;
}

.input-group.date-input-group:focus-within > .form-control,
.input-group:has(> input[type="date"]):focus-within > .form-control {
  box-shadow: none !important;
  border: none !important;
}

/* 날짜 필드 내부 년/월/일 선택 하이라이트 제거 */
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus {
  background-color: transparent !important;
  color: inherit !important;
  outline: none !important;
}

/* ======================================
   Radio Button Styles
   ====================================== */

/**
 * 라디오 버튼 스타일 표준화
 * - 선택됨: 파란색 (#0d6efd) 원형 채움
 * - 선택안됨: 회색 테두리
 *
 * 추가 일자: 2025-12-11
 */

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  position: relative;
}

input[type="radio"]:hover {
  border-color: #0d6efd;
}

input[type="radio"]:checked {
  border-color: #0d6efd;
  background-color: #fff;
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0d6efd;
}

input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* 다크모드 대응 */
[data-bs-theme="dark"] input[type="radio"] {
  background-color: #2b2c40;
  border-color: #6c6c80;
}

[data-bs-theme="dark"] input[type="radio"]:checked {
  border-color: #0d6efd;
  background-color: #2b2c40;
}

[data-bs-theme="dark"] input[type="radio"]:checked::after {
  background-color: #0d6efd;
}

/* ======================================
   Pagination Standard Styles
   ====================================== */

/**
 * 페이지네이션 스타일 표준화
 * - 선택됨: 파란색 배경, 흰색 글자
 * - 선택안됨: 회색 배경, 검은 글자
 * - disabled: 테두리 없음, 연한 글자
 *
 * 추가 일자: 2025-12-11
 */

.pagination {
  margin: 0;
  gap: 4px;
}

.page-item .page-link {
  font-size: 14px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #d9dee3;
  border-radius: 50%;
  transition: all 0.15s ease-in-out;
}

.page-item .page-link:hover {
  background-color: #e0e0e0;
  color: #333;
  border-color: #ccc;
}

/* 선택된 페이지: 파란색 (#0d6efd - Bootstrap primary blue) */
.page-item.active .page-link {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}

.page-item.active .page-link:hover {
  background-color: #0b5ed7 !important;
  border-color: #0b5ed7 !important;
  color: #fff !important;
}

/* 비활성화된 버튼: 테두리 없음 */
.page-item.disabled .page-link {
  color: #aaa;
  background-color: #f5f5f5;
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* 다크모드 대응 */
[data-bs-theme="dark"] .page-item .page-link {
  color: #d5d5e2;
  background-color: #2b2c40;
  border-color: #3a3a50;
}

[data-bs-theme="dark"] .page-item .page-link:hover {
  background-color: #3a3a50;
  color: #fff;
}

[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
  color: #6c6c80;
  background-color: #232333;
  border-color: transparent;
}

/* ======================================
   Alert Modal (customAlert) Styles
   ====================================== */

/**
 * 간단한 확인 팝업 모달 스타일
 * - header 삭제 (알림 타이틀 숨김)
 * - 내용 가운데 정렬
 * - 화면 정중앙 배치
 * - 390px 이하에서 적용
 *
 * 추가 일자: 2025-12-15
 */

/* customAlert 모달 버튼 순서 - PC (모든 화면) */
.modal-type-alert .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
}

.modal-type-alert .modal-footer .btn-label-secondary {
    order: 1 !important;
}

.modal-type-alert .modal-footer .btn-primary {
    order: 2 !important;
}

@media (max-width: 430px) {
    /* 알림 모달 화면 중앙 배치 */
    .modal-type-alert.modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal-type-alert .modal-dialog {
        margin: 0 !important;
    }

    .modal-type-alert .modal-content {
        border-radius: 11px;
    }

    /* 알림 모달 헤더 숨김 */
    .modal-type-alert .modal-header {
        display: none !important;
    }

    /* 알림 모달 body 가운데 정렬 */
    .modal-type-alert .modal-body {
        text-align: center;
        padding: 32px 24px 12px;
    }

    .modal-type-alert .modal-body p {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: #566a7f;
    }

    /* 알림 모달 footer 버튼 정렬: 회색(왼쪽) - 파랑(오른쪽) */
    .modal-type-alert .modal-footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 12px 24px 24px;
        border-top: none !important;
        margin-top: 0 !important;
    }

    .modal-type-alert .modal-footer .btn {
        flex: 1;
        margin: 0;
        max-width: 120px;
    }

    /* 딤 영역 드래그 방지 */
    .modal-type-alert.modal {
        overflow: hidden;
        touch-action: none;
    }
}

/* 다크모드 대응 */
[data-bs-theme="dark"] .modal-type-alert .modal-body p {
    color: #b8b8b8;
}

/* ======================================
   Icon Animations
   ====================================== */

/* Boxicons spin animation */
.bx-spin {
  -webkit-animation: bx-spin 2s linear infinite;
  animation: bx-spin 2s linear infinite;
}

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

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

/* 조직정보 화면 수정 */

#memberListBody .reqState {
  margin-bottom: 5px;
}

/* ======================================
   Terms Agreement Styles (약관동의 공통 스타일)
   ====================================== */

/**
 * 약관동의 통일 스타일
 * - 체크박스 + 약관 텍스트 + 자세히보기 버튼
 * - 모든 약관동의 화면에서 동일한 UX 제공
 *
 * 추가 일자: 2025-12-12
 */

/* 약관동의 컨테이너 */
.terms-agreement-item {
  display: flex;
  align-items: flex-start;
  /* padding: 0.75rem 0; */
}

.terms-agreement-item .form-check {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
  flex-wrap: wrap;
}

.terms-agreement-item .form-check-input {
  margin-top: 0;
  margin-right: 0.5rem;
  flex-shrink: 0;
  margin-left: 0;
}

.terms-agreement-item .form-check-label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* 한줄 유지 */
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  font-size: 1rem;
}

/* 필수 뱃지 */
.terms-agreement-item .required-badge {
  color: #dc3545;
  font-weight: 600;
  flex-shrink: 0;
}

/* 동의 텍스트 */
.terms-agreement-item .terms-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 자세히보기/상세보기 버튼 */
.terms-agreement-item .btn-terms-detail {
  font-size: 1rem;
  padding: 0.15rem 0.4rem;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 모바일 반응형 */
@media (max-width: 576px) {
  .terms-agreement-item .form-check-label {
    font-size: 1rem;
    gap: 0.2rem;
  }

  .terms-agreement-item .btn-terms-detail {
    font-size: 1rem;
    padding: 0.1rem 0.3rem;
  }

  .terms-agreement-item .required-badge {
    font-size: 1rem;
  }
}

/* 전체 동의 영역 */
.terms-agreement-all {
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

.terms-agreement-all .form-check-label {
  font-weight: 600;
}

/* 다크모드 대응 */
[data-bs-theme="dark"] .terms-agreement-all {
  background-color: #2b2c40;
}

[data-bs-theme="dark"] .terms-agreement-item .required-badge {
  color: #ff6b6b;
}

/* 결제 동의 박스 스타일 */
.terms-agreement-box {
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  border: 1px solid #e9ecef;
}

.terms-agreement-box .form-check {
  margin: 0;
  padding: 0;
}

.terms-agreement-box .form-check-input {
  margin-top: 0.2rem;
}

.terms-agreement-box .form-check-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-bs-theme="dark"] .terms-agreement-box {
  background-color: #2b2c40;
  border-color: #3a3a50;
}

/* 구독관리 화면 수정 */

#subscriptionList .subscription-list-item {
  background-color: #fff;
}

/* ======================================
   Search Input-Group Responsive Styles
   ====================================== */

/**
 * 검색 input-group 반응형 스타일
 * - input과 버튼 높이 일치
 * - 모바일에서 border-radius 조정
 * - 검색구분 있는 경우 PC에서 border-radius 제거
 *
 * 추가 일자: 2025-12-19
 */

/* 검색 input 기본 스타일 */
#searchKeyword {
  padding-right: 35px;
  height: 100%;
}

/* input-group 내 position-relative가 flex 컨테이너 역할 */
.input-group .position-relative {
  display: flex;
}

/* input-group 내 검색창: 우측 border-radius 항상 0 (버튼과 붙어있음) */
.input-group #searchKeyword {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 모바일: 검색구분 없을 때 좌측 border-radius 유지 */
@media (max-width: 767.98px) {
  .input-group #searchKeyword {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
  }
}

/* PC: 검색구분 있을 때 좌측 border-radius도 제거 */
@media (min-width: 768px) {
  .input-group:has(> select) #searchKeyword {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

/* ======================================
   Menu Group Hidden Class
   ====================================== */
/* 메뉴 그룹 숨김 처리 (권한 기반) */
.menu-group-hidden {
  display: none !important;
}