/* =====================================================
   Bootstrap Replacement – FULL
   (Grid + Card + Table + Spacing + Modal + Button)
   ===================================================== */

/* =====================================================
   Text / Color Utilities
   ===================================================== */
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-left {
  text-align: left !important;
}

.text-white {
  color: #fff !important;
}
.text-dark {
  color: #212529 !important;
}

.bg-dark {
  background-color: #212529 !important;
}
.bg-light {
  background-color: #f8f9fa !important;
}
.bg-white {
  background-color: #fff !important;
}

/* =====================================================
   Spacing Utilities (Margin & Padding – Bootstrap 5 호환)
   ===================================================== */

/* margin */
.m-0 {
  margin: 0 !important;
}
.m-1 {
  margin: 0.25rem !important;
}
.m-2 {
  margin: 0.5rem !important;
}
.m-3 {
  margin: 1rem !important;
}
.m-4 {
  margin: 1.5rem !important;
}
.m-5 {
  margin: 3rem !important;
}

.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.mt-4 {
  margin-top: 1.5rem !important;
}
.mt-5 {
  margin-top: 3rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.mb-4 {
  margin-bottom: 1.5rem !important;
}
.mb-5 {
  margin-bottom: 3rem !important;
}

.ms-0 {
  margin-left: 0 !important;
}
.ms-1 {
  margin-left: 0.25rem !important;
}
.ms-2 {
  margin-left: 0.5rem !important;
}
.ms-3 {
  margin-left: 1rem !important;
}
.ms-4 {
  margin-left: 1.5rem !important;
}
.ms-5 {
  margin-left: 3rem !important;
}

.me-0 {
  margin-right: 0 !important;
}
.me-1 {
  margin-right: 0.25rem !important;
}
.me-2 {
  margin-right: 0.5rem !important;
}
.me-3 {
  margin-right: 1rem !important;
}
.me-4 {
  margin-right: 1.5rem !important;
}
.me-5 {
  margin-right: 3rem !important;
}

/* padding */
.p-0 {
  padding: 0 !important;
}
.p-1 {
  padding: 0.25rem !important;
}
.p-2 {
  padding: 0.5rem !important;
}
.p-3 {
  padding: 1rem !important;
}
.p-4 {
  padding: 1.5rem !important;
}
.p-5 {
  padding: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}
.pt-1 {
  padding-top: 0.25rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.pt-4 {
  padding-top: 1.5rem !important;
}
.pt-5 {
  padding-top: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}
.pb-1 {
  padding-bottom: 0.25rem !important;
}
.pb-2 {
  padding-bottom: 0.5rem !important;
}
.pb-3 {
  padding-bottom: 1rem !important;
}
.pb-4 {
  padding-bottom: 1.5rem !important;
}
.pb-5 {
  padding-bottom: 3rem !important;
}
/* =====================================================
   Grid System (Bootstrap 5 FULL)
   ===================================================== */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.row > * {
  padding-left: 12px;
  padding-right: 12px;
  max-width: 100%;
}

/* equal / auto */
.col,
.col-sm,
.col-md,
.col-lg,
.col-xl,
.col-xxl {
  flex: 1 0 0%;
}

.col-auto,
.col-sm-auto,
.col-md-auto,
.col-lg-auto,
.col-xl-auto,
.col-xxl-auto {
  flex: 0 0 auto;
  width: auto;
}

/* base col-1 ~ col-12 */
.col-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xl-1,
.col-xxl-1 {
  flex: 0 0 auto;
  width: 8.333333%;
}
.col-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xl-2,
.col-xxl-2 {
  flex: 0 0 auto;
  width: 16.666667%;
}
.col-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xl-3,
.col-xxl-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xl-4,
.col-xxl-4 {
  flex: 0 0 auto;
  width: 33.333333%;
}
.col-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xl-5,
.col-xxl-5 {
  flex: 0 0 auto;
  width: 41.666667%;
}
.col-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xl-6,
.col-xxl-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xl-7,
.col-xxl-7 {
  flex: 0 0 auto;
  width: 58.333333%;
}
.col-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xl-8,
.col-xxl-8 {
  flex: 0 0 auto;
  width: 66.666667%;
}
.col-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xl-9,
.col-xxl-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xl-10,
.col-xxl-10 {
  flex: 0 0 auto;
  width: 83.333333%;
}
.col-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xl-11,
.col-xxl-11 {
  flex: 0 0 auto;
  width: 91.666667%;
}
.col-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.col-xl-12,
.col-xxl-12 {
  flex: 0 0 auto;
  width: 100%;
}
/* SM ≥576px */
@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* MD ≥768px */
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-md-1 {
    flex: 0 0 auto;
    width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* LG ≥992px  ★ 여기 col-lg-3 포함 */
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* XL ≥1200px */
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* XXL ≥1400px */
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* =====================================================
   Display Utilities (Bootstrap compatible)
   ===================================================== */

.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
.d-inline {
  display: inline !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-flex {
  display: flex !important;
}
.d-grid {
  display: grid !important;
}

/* SM ≥576px */
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
}

/* MD ≥768px */
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-flex {
    display: flex !important;
  }
}

/* LG ≥992px */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
}

/* XL ≥1200px */
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
}

/* XXL ≥1400px */
@media (min-width: 1400px) {
  .d-xxl-none {
    display: none !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
}
/* =====================================================
   Card
   ===================================================== */
.card {
  background: #fff;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
  overflow: hidden;
}

.card-header {
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.card-body {
  padding: 1rem;
}

.border-0 {
  border: 0 !important;
}
.border-1 {
  border: 1px solid #dee2e6 !important;
}
.rounded-3 {
  border-radius: 0.5rem !important;
}

/* =====================================================
   Shadow (기존 코드 유지)
   ===================================================== */
.box-shadow-10 {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.box-shadow-1 {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.box-shadow-1-hover:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* =====================================================
   Table (대폭 확장)
   ===================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.table th,
.table td {
  padding: 0.5rem;
  vertical-align: middle;
  border-color: #dee2e6;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
  font-size: 0.875rem;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-light th {
  background-color: #f8f9fa;
}

.table-hover tbody tr:hover {
  background-color: #f1f3f5;
}

.table-striped tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.table-sm-top th {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.form-select {
	border-radius:10px;
}

.form-select-sm {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: 0.5rem;
	font-size: 0.875rem;
	border-radius:10px;
}

.form-select-lg {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	font-size: 1.25rem;
	border-radius:10px;
}

/* =====================================================
   Button (Bootstrap 체계)
   ===================================================== */
.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.15s;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.btn-dark {
  background: #212529;
  color: #fff;
  border-color: #212529;
}

.btn:hover {
  filter: brightness(0.92);
}
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* =====================================================
   Modal  (더 세밀하게 확장 / 스크롤 완벽 대응)
   ===================================================== */

/* ✅ 오버레이 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;

  /* 기본은 숨김 */
  display: none;

  /* 배경 */
  background: rgba(0, 0, 0, 0.5);

  /* 🔥 핵심: 오버레이 자체도 스크롤 허용 (모달이 긴 경우 대비) */
  overflow-x: hidden;
  overflow-y: auto;

  /* 모바일/사파리 관성 스크롤 */
  -webkit-overflow-scrolling: touch;

  /* 스크롤 체인(배경으로 휠 전파) 방지 */
  overscroll-behavior: contain;

  /* 탭/포커스 이슈 줄임 */
  outline: 0;
  padding: 12px;
}

/* show 시 표시 */
.modal.show {
  display: block;
}

/* ✅ 모달 열릴 때 body 스크롤 잠금(bootstrap 방식 호환 클래스) */
.modal-open {
  overflow: hidden !important;
  /* iOS에서 배경 스크롤 튐 방지용 */
  position: relative;
}

/* ✅ backdrop 분리형도 지원하고 싶으면(선택) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0,0,0,0.5);
}

/* =====================================================
   Dialog layout
   ===================================================== */

/* 기본 dialog */
.modal-dialog {
  width: min(1100px, calc(100% - 24px));
  margin: 1.75rem auto;

  /* 애니메이션/스무스 */
  transform: translateY(0);
}

/* 중앙 정렬 버전(원하면 modal-dialog-centered 추가) */
.modal-dialog-centered {
  min-height: calc(100% - 24px);
  display: flex;
  align-items: center;
}

/* 스크롤 가능한 dialog(bootstrap 유사) */
.modal-dialog-scrollable {
  height: calc(100% - 24px);
}

/* scrollable일 때 content 높이 제한 + 내부만 스크롤 */
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden; /* body만 스크롤 */
}

/* =====================================================
   Content
   ===================================================== */
.modal-content {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;

  /* 그림자 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  /* 테두리 */
  border: 1px solid rgba(0,0,0,0.12);

  /* 레이아웃 (header/body/footer) */
  display: flex;
  flex-direction: column;

  /* 긴 내용 대응 */
  max-height: calc(100vh - 24px);
}

/* =====================================================
   Header
   ===================================================== */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;

  background: #fff;

  /* header 고정 느낌 (선택) */
  flex: 0 0 auto;
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

/* 닫기 버튼 (bootstrap close 유사) */
.btn-close,
.modal-close {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.25rem;
  margin-left: 8px;
  cursor: pointer;
  line-height: 0;
  opacity: 0.7;
}
.btn-close:hover,
.modal-close:hover {
  opacity: 1;
}

/* X 아이콘 간단 구현 */
.btn-close::before,
.modal-close::before {
  content: "×";
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  color: #333;
}

/* =====================================================
   Body (🔥 여기서 스크롤 해결)
   ===================================================== */
.modal-body {
  padding: 1rem;

  /* 핵심: body가 남는 공간을 차지 */
  flex: 1 1 auto;

  /* 🔥 내용이 길면 body 안에서 스크롤 */
  overflow-y: auto;
  overflow-x: hidden;

  /* 모바일/사파리 관성 */
  -webkit-overflow-scrolling: touch;

  /* 내부 스크롤 시 바운스가 바깥으로 전파되지 않게 */
  overscroll-behavior: contain;

  /* 너무 긴 단어 줄바꿈 */
  word-break: break-word;
}

/* body 안에서 테이블/큰 컨텐츠가 있으면横스크롤이 필요할 때 */
.modal-body .table-responsive {
  max-width: 100%;
}

/* =====================================================
   Footer
   ===================================================== */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 0.75rem 1rem;
  border-top: 1px solid #dee2e6;

  background: #fff;

  flex: 0 0 auto;
}

/* =====================================================
   Sizes (bootstrap 유사)
   ===================================================== */
.modal-sm .modal-dialog {
  width: min(360px, calc(100% - 24px));
}
.modal-lg .modal-dialog {
  width: min(900px, calc(100% - 24px));
}
.modal-xl .modal-dialog {
  width: min(1140px, calc(100% - 24px));
}

/* =====================================================
   Animation (선택: 부드럽게)
   ===================================================== */
.modal.fade .modal-dialog {
  transform: translateY(12px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.modal.show.fade .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

/* =====================================================
   Mobile tweaks
   ===================================================== */
@media (max-width: 576px) {
  .modal {
    padding: 8px;
  }
  .modal-dialog {
    width: calc(100% - 16px);
    margin: 0.75rem auto;
  }
  .modal-title {
    font-size: 1rem;
  }
  .modal-body {
    padding: 0.875rem;
  }
  .modal-footer {
    padding: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* =====================================================
   Accessibility / Focus helper (선택)
   ===================================================== */
.modal:focus {
  outline: none;
}

/* =====================================================
   Scrollbar (선택: 보기 좋게)
   ===================================================== */
.modal-body::-webkit-scrollbar {
  width: 10px;
}
.modal-body::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
}
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.35);
}

.btn-radio-group .btn btn-big {
  margin-right: 10px;
  margin-bottom: 10px;
}

.btn-radio-group input[type="radio"]:checked + label {
  background-color: #f0bb57;
  color: white;
  font-size: 13px;
}

.calculate-btn btn-big {
  background-color: #333;
  color: white;
  font-size: 1.1rem;
  padding: 12px 20px;
  border-radius: 30px;
  border: none;
  width: 100%;
}

/* PDF 전용 스타일 */
#pdf-export {
  font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #000;
  padding: 20px;
}

#pdf-export h4 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 25px;
}

#pdf-export p {
  margin: 4px 0;
  font-size: 14px;
}

#pdf-export table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

#pdf-export th,
#pdf-export td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  font-size: 14px;
  vertical-align: middle;
}

#pdf-export th {
  background-color: #f8f8f8;
  font-weight: bold;
}

#pdf-export tfoot th {
  background-color: #fff;
  font-size: 15px;
  color: #d60000;
  text-align: right;
  padding-right: 15px;
}

#pdf-export tbody tr:nth-child(even) {
  background-color: #fafafa;
}
.btn-big {
  margin-left: 10px;
  padding: 10px 20px;
  font-size: 1.1rem;
  /* border-radius: 30px; */
}
.ps-2 {
  padding-left: 20px !important;
}
.result_title {
  width: 30%;
  background-color: #f8f8f8;
  font-weight: bold;
}
.btn-check {
  width: auto;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn-outline-dark {
  border: 1px solid #b4b9be;
  background-color: transparent;
  font-size: 14px;
  color: #212529;
}
.btn-outline-secondary {
  border: 1px solid #b4b9be;
  background-color: transparent;
  font-size: 14px;
  color: #212529;
}
.text-muted {
  font-size: 12px;
  color: #ab4002 !important;
}

/* 기본 */
.text-primary {
  color: #0d6efd !important;
} /* 파랑 */
.text-secondary {
  color: #6c757d !important;
} /* 회색 */
.text-success {
  color: #198754 !important;
} /* 초록 */
.text-danger {
  color: #dc3545 !important;
} /* 빨강 */
.text-warning {
  color: #ffc107 !important;
} /* 노랑 */
.text-info {
  color: #0dcaf0 !important;
} /* 하늘 */
.text-light {
  color: #f8f9fa !important;
} /* 밝음 */
.text-dark {
  color: #212529 !important;
} /* 진한 검정 */
.text-muted {
  color: #6c757d !important;
} /* 흐린 회색 */

.text-black {
  color: #000 !important;
}
.text-white {
  color: #fff !important;
}

.text-gray-500 {
  color: #adb5bd !important;
}
.text-gray-600 {
  color: #6c757d !important;
}
.text-gray-700 {
  color: #495057 !important;
}

.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-warning {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}
.btn-info {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}
.btn-light {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}
.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
}

/* panel base */
.panel {
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* panel parts */
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  font-weight: 700;
  background: #f5f5f5;
}

.panel-title {
  margin: 0;
  font-size: 16px;
}

.panel-body {
  padding: 15px;
}

.panel-footer {
  padding: 10px 15px;
  background: #f5f5f5;
  border-top: 1px solid #ddd;
}

/* panel colors */
.panel-default {
  border-color: #ddd;
}
.panel-primary {
  border-color: #337ab7;
}
.panel-success {
  border-color: #3c763d;
}
.panel-info {
  border-color: #31708f;
}
.panel-warning {
  border-color: #8a6d3b;
}
.panel-danger {
  border-color: #a94442;
}

/* card base */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 6px;
}

/* card parts */
.card-header {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  font-weight: 700;
}

.card-body {
  flex: 1 1 auto;
  padding: 16px;
}

.card-footer {
  padding: 12px 16px;
  background: #f8f9fa;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}

.card-text {
  margin-bottom: 12px;
}

/* card image */
.card-img-top {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.card-img-bottom {
  width: 100%;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.card-primary {
  border-color: #0d6efd;
}
.card-success {
  border-color: #198754;
}
.card-danger {
  border-color: #dc3545;
}
.card-warning {
  border-color: #ffc107;
}
.card-info {
  border-color: #0dcaf0;
}
.card-dark {
  border-color: #212529;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.rounded {
  border-radius: 6px;
}


/* =========================
   TABLE (Bootstrap-like)
   ========================= */

/* base */
.table{
  width:100%;
  margin-bottom:1rem;
  color:#212529;
  border-collapse:collapse;
}

/* 🔥 td / th 세로 중앙 정렬 */
.table > :not(caption) > * > *{
  padding:0.5rem 0.5rem;
  border-bottom:1px solid #dee2e6;
  vertical-align:middle;   /* ← 여기 변경 */
}

.table thead th{
  border-bottom:2px solid #dee2e6;
  height:36px;
  font-weight:700;
}

.table tbody td{
  height:36px;
 
}

/* tbody divider */
.table tbody + tbody{
  border-top:2px solid #dee2e6;
}

/* bordered */
.table-bordered{
  border:1px solid #dee2e6;
}
.table-bordered > :not(caption) > *{
  border-width:1px 0;
}
.table-bordered > :not(caption) > * > *{
  border:1px solid #dee2e6;
}

/* borderless */
.table-borderless > :not(caption) > * > *{
  border-bottom:0;
}
.table-borderless > :not(caption) > *{
  border-width:0;
}

/* striped */
.table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color:rgba(0,0,0,.05);
}

/* hover */
.table-hover > tbody > tr:hover > *{
  background-color:rgba(0,0,0,.075);
}

/* small */
.table-sm > :not(caption) > * > *{
  padding:0.25rem 0.25rem;
}

/* align helpers (선택) */
.align-top{vertical-align:top!important;}
.align-middle{vertical-align:middle!important;}
.align-bottom{vertical-align:bottom!important;}

/* active row */
.table-active > *{
  background-color:rgba(0,0,0,.075);
}

/* table variants */
.table-primary  { --tbl-bg: rgba(13,110,253,.15); }
.table-success  { --tbl-bg: rgba(25,135,84,.15); }
.table-danger   { --tbl-bg: rgba(220,53,69,.15); }
.table-warning  { --tbl-bg: rgba(255,193,7,.18); }
.table-info     { --tbl-bg: rgba(13,202,240,.18); }
.table-light    { --tbl-bg: rgba(248,249,250,1); }
.table-dark     { --tbl-bg: rgba(33,37,41,.9); color:#fff; }

.table-primary > :not(caption) > * > *,
.table-success > :not(caption) > * > *,
.table-danger  > :not(caption) > * > *,
.table-warning > :not(caption) > * > *,
.table-info    > :not(caption) > * > *,
.table-light   > :not(caption) > * > *,
.table-dark    > :not(caption) > * > *{
  background-color:var(--tbl-bg);
}

/* responsive wrapper */
.table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* caption */
.table caption{
  padding:0.5rem 0;
  color:#6c757d;
  text-align:left;
}

/* thead styles */
.thead-light th{
  background:#f8f9fa;
}
.thead-dark th{
  background:#212529;
  color:#fff;
  border-color:#2b3035;
}

/* group divider */
.table-group-divider{
  border-top:2px solid currentColor;
  opacity:.25;
}

/* fixed layout helper */
.table-fixed{
  table-layout:fixed;
}

/* no-wrap helper (선택) */
.table-nowrap td,
.table-nowrap th{
  white-space:nowrap;
}




/* =========================================================
   BOOTSTRAP LABEL / BADGE / BUTTON FULL REPLACEMENT
   Dependency: NONE
   ========================================================= */

/* ---------- COLOR VARIABLES ---------- */
:root {
    --primary:   #0d6efd;
    --secondary: #6c757d;
    --success:   #198754;
    --danger:    #dc3545;
    --warning:   #ffc107;
    --info:      #0dcaf0;
    --light:     #f8f9fa;
    --dark:      #212529;
}

/* =========================================================
   LABEL (Bootstrap 3 compatible)
   ========================================================= */
.label {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 3px;
    background: #777;
    color: #fff;
    vertical-align: middle;
}
.label-primary   { background: var(--primary); }
.label-secondary { background: var(--secondary); }
.label-success   { background: var(--success); }
.label-danger    { background: var(--danger); }
.label-warning   { background: var(--warning); color:#000; }
.label-info      { background: var(--info); }
.label-light     { background: var(--light); color:#000; }
.label-dark      { background: var(--dark); }

/* =========================================================
   BADGE (Bootstrap 4/5 compatible)
   ========================================================= */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 4px;
    background: #777;
    color: #fff;
    vertical-align: middle;
}
.badge-pill { border-radius: 999px; }

.badge-primary   { background: var(--primary); }
.badge-secondary { background: var(--secondary); }
.badge-success   { background: var(--success); }
.badge-danger    { background: var(--danger); }
.badge-warning   { background: var(--warning); color:#000; }
.badge-info      { background: var(--info); }
.badge-light     { background: var(--light); color:#000; }
.badge-dark      { background: var(--dark); }

/* =========================================================
   BUTTON
   ========================================================= */
.btn {
    display: inline-block;
    padding: 0.45em 0.9em;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 4px;
    border: 1px solid transparent;
    background: #e0e0e0;
    color: #000;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    user-select: none;
    transition: opacity .15s ease, transform .05s ease;
}

/* --- button colors --- */
.btn-primary   { background: var(--primary);   color:#fff; }
.btn-secondary { background: var(--secondary); color:#fff; }
.btn-success   { background: var(--success);   color:#fff; }
.btn-danger    { background: var(--danger);    color:#fff; }
.btn-warning   { background: var(--warning);   color:#000; }
.btn-info      { background: var(--info);      color:#000; }
.btn-light     { background: var(--light);     color:#000; border:1px solid #ccc; }
.btn-dark      { background: var(--dark);      color:#fff; }
.btn-link      { background:none; border:none; color:var(--primary); padding:0; }

/* --- outline buttons --- */
.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-success {
    background: transparent;
    color: var(--success);
    border-color: var(--success);
}
.btn-outline-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}
.btn-outline-warning {
    background: transparent;
    color: #856404;
    border-color: var(--warning);
}
.btn-outline-dark {
    background: transparent;
    color: var(--dark);
    border-color: var(--dark);
}

/* --- hover / active / disabled --- */
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }

.btn.disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- sizes --- */
.btn-lg {
    padding: 0.6em 1.2em;
    font-size: 16px;
}
.btn-sm {
    padding: 0.25em 0.6em;
    font-size: 12px;
}

/* --- block button --- */
.btn-block {
    display: block;
    width: 100%;
}

/* =========================================================
   BUTTON GROUP
   ========================================================= */
.btn-group {
    display: inline-flex;
    vertical-align: middle;
}
.btn-group .btn {
    border-radius: 0;
}
.btn-group .btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}



.spinner-grow,
.spinner-border {
	display: inline-block;
	width: var(--bs-spinner-width);
	height: var(--bs-spinner-height);
	vertical-align: var(--bs-spinner-vertical-align);
	border-radius: 50%;
	animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}

@keyframes spinner-border {
	to {
		transform: rotate(360deg) /* rtl:ignore */;
	}
}
.spinner-border {
	--bs-spinner-width: 2rem;
	--bs-spinner-height: 2rem;
	--bs-spinner-vertical-align: -0.125em;
	--bs-spinner-border-width: 0.25em;
	--bs-spinner-animation-speed: 0.75s;
	--bs-spinner-animation-name: spinner-border;
	border: var(--bs-spinner-border-width) solid currentcolor;
	border-right-color: transparent;
}

.spinner-border-sm {
	--bs-spinner-width: 1rem;
	--bs-spinner-height: 1rem;
	--bs-spinner-border-width: 0.2em;
}

@keyframes spinner-grow {
	0% {
		transform: scale(0);
	}
	50% {
		opacity: 1;
		transform: none;
	}
}
.spinner-grow {
	--bs-spinner-width: 2rem;
	--bs-spinner-height: 2rem;
	--bs-spinner-vertical-align: -0.125em;
	--bs-spinner-animation-speed: 0.75s;
	--bs-spinner-animation-name: spinner-grow;
	background-color: currentcolor;
	opacity: 0;
}

.spinner-grow-sm {
	--bs-spinner-width: 1rem;
	--bs-spinner-height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.spinner-border,
	.spinner-grow {
		--bs-spinner-animation-speed: 1.5s;
	}
}