:root {
  --bs-primary: #fdbd0dff;
  --z-modal-fix: 2000;
}

/* 전체 기본 폰트 사이즈 증가 */
body {
  font-size: 16px !important;
}

.container,
.container-fluid {
  font-size: 16px;
}

.small,
small {
  font-size: 14px !important;
}

.btn {
  font-size: 16px;
}

.btn-sm {
  font-size: 14px;
}

.form-control,
.form-select {
  font-size: 16px;
}

.table {
  font-size: 15px;
}

.modal .table {
  font-size: 15px;
}

.badge {
  font-size: 14px;
}

.rounded-button {
  border-radius: 0.5rem !important;
}
.thumb-64 {
  width: 64px;
  height: 64px;
}
.thumb-80 {
  width: 80px;
  height: 80px;
}
.h-384 {
  height: 24rem;
}
.object-contain {
  object-fit: contain;
}
.cursor-pointer {
  cursor: pointer;
}

/* --- Responsive enhancements for modals --- */
@media (max-width: 575.98px) {
  .modal .table {
    font-size: 0.92rem;
  }
  .modal .table td,
  .modal .table th {
    padding: 0.4rem 0.5rem;
  }
  .sticky-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg);
    padding-top: 0.25rem;
  }
}

/* Mobile plan cards style */
.plan-card-mobile .list-inline-item + .list-inline-item::before {
  content: "•";
  margin: 0 0.35rem;
  color: var(--bs-secondary-color);
}

.modal {
  z-index: var(--z-modal-fix) !important;
}
.modal-backdrop {
  z-index: calc(var(--z-modal-fix) - 10) !important;
}
/* 모달 열릴 때 헤더를 더 낮춰 충돌 방지 */
body.modal-open .mob_menu_wrapper,
body.modal-open .navbar {
  z-index: 100 !important;
}
/* 탭 전체 폭 균등 분배 */
.nav-tabs .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

/* 활성화된 탭 밑줄 색상 변경 */
.nav-tabs .nav-link.active {
  border-color: #000 #000 #fff; /* 검정색 밑줄 */
  color: #000; /* 글자색도 검정 */
  font-weight: bold;
}

/* 카드 옵션 버튼 스타일 */
.card-option-btn {
  transition: all 0.3s ease;
  border-width: 2px;
}

.card-option-btn:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white !important;
}

.card-option-btn:hover .text-primary {
  color: white !important;
}

/* 선택된 카드 옵션 표시 */
.card-option-btn.selected {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white !important;
}

/* 비활성 탭 글자색 */
.nav-tabs .nav-link {
  color: #666;
}

/* nav-tabs 기본 테두리 제거 */
/* 각 탭 버튼 테두리 제거 & 배경 투명 */
.nav-tabs .nav-link {
  border: none;
  background: none;
  color: #666;
  font-weight: 500;
}

/* 활성화 탭 스타일 */
.nav-tabs .nav-link.active {
  border: none;
  border-bottom: 2px solid #000; /* 활성화 탭 밑줄 */
  color: #000;
  font-weight: 700;
}

.btn-kakao svg path {
  fill: #696969;
}

.btn-kakao i {
  color: #696969 !important;
}

/* 카톡 버튼 호버 */
.btn-kakao:hover {
  background-color: #fee500 !important; /* 카카오 노랑 */
  border-color: #fee500 !important;
  color: #363636 !important;
}
.btn-kakao:hover svg path,
.btn-kakao:hover span {
  color: #363636 !important;
}

.btn-kakao:hover svg path {
  fill: #363636 !important;
}

.btn-kakao:hover i {
  color: #363636 !important;
}

/* 1:1 문의 버튼 호버 */
.btn-inquiry:hover {
  background-color: #007bff !important; /* 부트스트랩 파랑 */
  border-color: #007bff !important;
  color: #fff !important;
}
.btn-inquiry:hover i,
.btn-inquiry:hover span {
  color: #fff !important;
}

.btn-outline-secondary,
.border-secondary {
  border-color: #d3d3d3 !important;
}

hr.dotted-border {
  border: 0 !important; /* 기본 선 제거 */
  border-top: 1px dotted #000 !important; /* 원하는 점선 적용 */
}

.modal.show {
  z-index: 9999;
}

.plan-info-wrapper {
  width: calc(100% - 130px);
}

/* 공통 범위: planModal, changePlanModal */
#planModal .plan-table,
#changePlanModal .plan-table {
  table-layout: fixed; /* 고정 레이아웃으로 폭 제어 */
  width: 100%;
  font-size: 14px;
}

/* 링크/강조색 → 모두 검정 */
#planModal .plan-table a,
#planModal .plan-table .text-primary,
#planModal .plan-table .text-danger,
#planModal .plan-table .badge,
#changePlanModal .plan-table a,
#changePlanModal .plan-table .text-primary,
#changePlanModal .plan-table .text-danger,
#changePlanModal .plan-table .badge {
  color: #111 !important;
  text-decoration: none !important;
}

/* 데이터 셀: 두 줄로 고정(줄여도 읽히게) */
#planModal .plan-table td.data-cell,
#changePlanModal .plan-table td.data-cell {
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2줄로 제한 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 숫자 컬럼은 가독성 위해 가운데 정렬 */
#planModal .plan-table td.fee,
#planModal .plan-table td.pub,
#planModal .plan-table td.shop,
#planModal .plan-table th.fee,
#planModal .plan-table th.pub,
#planModal .plan-table th.shop,
#changePlanModal .plan-table td.fee,
#changePlanModal .plan-table td.pub,
#changePlanModal .plan-table td.shop,
#changePlanModal .plan-table th.fee,
#changePlanModal .plan-table th.pub,
#changePlanModal .plan-table th.shop {
  text-align: center;
  vertical-align: middle;
}

/* 선택 버튼 칸 확대 & 버튼 가득 채우기 */
#planModal .plan-table td.select-col,
#changePlanModal .plan-table td.select-col {
  width: 90px; /* 필요 시 더 키우세요 */
  text-align: center;
  vertical-align: middle;
}
#planModal .plan-table td.select-col .btn,
#changePlanModal .plan-table td.select-col .btn {
  width: 100%;
  min-width: 80px;
  padding: 6px 10px;
}

/* 헤더 고정 높이(줄바꿈 허용) */
#planModal .plan-table thead th,
#changePlanModal .plan-table thead th {
  white-space: normal;
  line-height: 1.2;
}

/* 행 높이 살짝 압축 */
#planModal .plan-table tbody td,
#changePlanModal .plan-table tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.border-light {
  border-color: #e5e8ec !important;
}

.badge-round-a {
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  background: #dc3545;
  text-align: center;
  border-radius: 5px;
  color: #fff;
}

.badge-round-b {
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  background: #0d6efd;
  text-align: center;
  border-radius: 5px;
  color: #fff;
}

.btn-orange {
  background-color: #faeec8;
}

.text-orange {
  color: #ff8c42;
}

/* Color Options */
.color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

@media (max-width: 575.98px) {
  .floating-actions {
    display: none !important;
  }
}
