/* 모달 기본 스타일 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1060; /* 다른 모달 위에 표시되도록 1050보다 높게 설정 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background: none; /* 배경 제거, 오버레이에서 처리 */
}

/* 모달 상태 */
.modal.modal-visible {
  opacity: 1;
  visibility: visible;
}

.modal.modal-removing {
  opacity: 0;
  visibility: hidden;
}

/* 모달 오버레이 */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 배경 */
  z-index: 1;
}

/* 모달 컨테이너 */
.modal-container {
  position: relative;
  background-color: #ffffff; /* 흰색 배경 */
  border-radius: 12px; /* 더 둥근 모서리 */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1); /* 더 세련된 그림자 */
  max-width: 90%;
  max-height: 90vh;
  width: auto;
  min-width: 420px; /* 기존 300px에서 420px로 증가 */
  margin: 1rem; /* 16px 마진 */
  display: flex;
  flex-direction: column;
  transform: translateY(-20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 더 부드러운 애니메이션 */
  z-index: 10; /* 오버레이보다 높은 z-index */
  border: none; /* 테두리 제거 */
}


.modal.modal-visible .modal-container {
  transform: translateY(0);
}

/* 모달 크기 변형 */
.modal-container.modal-sm {
  max-width: 300px;
}

.modal-container.modal-md {
  max-width: 500px;
}

/* 세션 만료 경고 모달: 기본 md(500px) 대비 width +20% (= 600px) */
.modal.session-expiry-modal .modal-container.modal-md {
  max-width: 600px;
}

.modal-container.modal-lg {
  max-width: 900px;
  min-width: 800px;
}

.modal-container.modal-xl {
  max-width: 1140px;
}

/* 2026-05-11: modal-large — 상세 번역 / Termbase / TM 모달 의 표준 고정 폭
   (이전 정의 부재 → modal-container width:auto 가 content 따라 변동했음).
   상세 번역 모달의 보이는 폭 ≈ 1080px 에 정합. */
.modal-container.modal-large {
  width: 1080px;
  max-width: 95vw;
  min-width: 1080px;
}

@media (max-width: 1100px) {
  .modal-container.modal-large {
    width: 95vw;
    min-width: auto;
  }
}

/* 2026-06-17: 기능 설정 모달 고정 폭 600px (소형 화면은 95vw 로 축소). */
.modal-container.modal-feature-settings {
  width: 600px;
  max-width: 95vw;
  min-width: 600px;
}

@media (max-width: 640px) {
  .modal-container.modal-feature-settings {
    width: 95vw;
    min-width: auto;
  }
}

/* 2026-06-17: TM 사전번역 모달 고정 폭 500px (소형 화면은 95vw 로 축소). */
.modal-container.modal-tm-pretranslate {
  width: 500px;
  max-width: 95vw;
  min-width: 500px;
}

/* "행 범위 지정"의 Bootstrap .row 음수 마진이 body 우측을 넘어 가로 스크롤이 생기는 것 차단. */
.modal-container.modal-tm-pretranslate .modal-body {
  overflow-x: hidden;
}

@media (max-width: 540px) {
  .modal-container.modal-tm-pretranslate {
    width: 95vw;
    min-width: auto;
  }
}

/* 2026-05-13: Termbase modal 전용 width 30% 축소 (1080 → 756px).
   termbase_modal.js 의 onShow 가 modal-container 에 'tb-narrow' class 추가.
   selector chain (.modal-container.modal-large.tb-narrow) 으로 modal-large 의 width 1080px 를 override. */
.modal-container.modal-large.tb-narrow {
  width: 776px;
  min-width: 776px;
  max-width: 95vw;
}

@media (max-width: 820px) {
  .modal-container.modal-large.tb-narrow {
    width: 95vw;
    min-width: auto;
  }
}

/* 모달 헤더 */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem 1.5rem; /* 상단 패딩 증가 */
  border-bottom: 1px solid #f0f0f0; /* 더 연한 테두리 */
  background-color: #fafafa; /* 아주 연한 회색 배경 */
  border-radius: 12px 12px 0 0; /* 상단 모서리 둥글게 */
}

.modal-title {
  margin: 0;
  font-size: 1.375rem; /* 22px, 기존보다 약간 크게 */
  font-weight: 600;
  color: #1a1a1a; /* 더 진한 색상 */
  letter-spacing: -0.02em; /* 약간의 자간 조정 */
}

/* 모달 닫기 버튼 */
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem; /* 4px 패딩 */
  cursor: pointer;
  color: #6c757d; /* 중간 회색 */
  transition: color 0.2s;
}

.modal-close:hover {
  color: #212529; /* 호버 시 진한 회색 */
}

/* 모달 본문 */
/* 2026-05-18: overflow-y: auto 만 명시 시 CSS spec 에 의해 overflow-x 도 암시적 auto 적용.
   → vertical scroll 만 의도였는데 fraction pixel overflow 시 spurious 가로 scrollbar 생성.
   명시적 horizontal hidden + vertical auto 로 차단. */
.modal-body {
  padding: 1.5rem; /* 24px 패딩, 기존보다 증가 */
  overflow-x: hidden;
  overflow-y: auto;
  flex-grow: 1;
  font-size: 1rem; /* 16px */
  line-height: 1.6; /* 더 읽기 쉬운 줄 간격 */
  color: #4a4a4a; /* 부드러운 회색 */
}

/* 모달 푸터 */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem; /* 12px 간격, 기존보다 증가 */
  padding: 1rem 1.5rem 1.5rem 1.5rem; /* 하단 패딩 증가 */
  border-top: 1px solid #f0f0f0; /* 더 연한 테두리 */
  background-color: #ffffff; /* 흰색 배경 */
  border-radius: 0 0 12px 12px; /* 하단 모서리 둥글게 */
}

/* 모달 버튼 */
.modal-button {
  padding: 0.75rem 1.5rem; /* 12px 24px 패딩, 기존보다 증가 */
  border: 1px solid transparent;
  border-radius: 8px; /* 더 둥근 모서리 */
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem; /* 약간 크게 */
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 애니메이션 */
  min-width: 100px; /* 기존 80px에서 100px로 증가 */
  position: relative;
  overflow: hidden;
}

.modal-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* 기본 버튼 (취소) */
.modal-button.btn-secondary {
  color: #6b7280;
  background-color: #f9fafb;
  border-color: #e5e7eb;
}

.modal-button.btn-secondary:hover {
  color: #374151;
  background-color: #f3f4f6;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 주요 버튼 (확인) */
.modal-button.btn-primary {
  color: #ffffff;
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.modal-button.btn-primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 위험 버튼 (삭제) */
.modal-button.btn-danger {
  color: #ffffff;
  background-color: #ef4444;
  border-color: #ef4444;
}

.modal-button.btn-danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 특수 모달 스타일 */
.error-modal .modal-header {
  background-color: #dc3545; /* 빨간색 배경 */
  color: #ffffff; /* 흰색 텍스트 */
}

.error-modal .modal-close {
  color: #ffffff; /* 흰색 닫기 버튼 */
}

.error-modal .error-details {
  margin: 0;
  padding: 1rem; /* 16px 패딩 */
  background-color: #f8f9fa; /* 연한 회색 배경 */
  border-radius: 4px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 확인 다이얼로그 전용 스타일 */
.confirm-modal .modal-container,
.alert-modal .modal-container {
  max-width: 480px; /* 기존 400px에서 480px로 증가 */
  min-width: 420px; /* 최소 너비 설정 */
}

.confirm-modal .modal-header {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.confirm-modal .modal-title {
  color: #1e293b;
  font-weight: 600;
}

.confirm-modal .modal-body {
  text-align: center;
  padding: 2rem 1.5rem;
}

.confirm-modal .modal-footer {
  padding: 1.5rem;
  justify-content: center;
  gap: 1rem;
}

/* 삭제 확인 다이얼로그 스타일 */
.delete-confirm-modal .modal-header {
  background-color: #fef2f2;
  border-bottom: 1px solid #fecaca;
}

.delete-confirm-modal .modal-title {
  color: #991b1b;
  font-weight: 600;
}

.delete-confirm-modal .modal-body {
  text-align: center;
  padding: 2rem 1.5rem;
}

.delete-confirm-modal .modal-footer {
  padding: 1.5rem;
  justify-content: center;
  gap: 1rem;
}

/* 반응형 스타일 */
@media (max-width: 576px) {
  .modal-container {
    width: calc(100% - 2rem);
    margin: 0.5rem; /* 8px 마진 */
    min-width: 320px; /* 모바일에서 최소 너비 */
  }

  .modal-header {
    padding: 1.25rem 1rem 0.75rem 1rem;
  }

  .modal-title {
    font-size: 1.25rem;
  }

  .modal-body {
    padding: 1.25rem 1rem;
  }

  .modal-footer {
    flex-direction: column;
    gap: 0.5rem; /* 8px 간격 */
    padding: 1rem;
  }

  .modal-button {
    width: 100%;
    padding: 0.875rem 1rem;
  }

  /* 확인 다이얼로그 모바일 스타일 */
  .confirm-modal .modal-container,
  .alert-modal .modal-container {
    min-width: 320px;
    max-width: calc(100% - 2rem);
  }

  .confirm-modal .modal-body,
  .delete-confirm-modal .modal-body {
    padding: 1.5rem 1rem;
  }

  .confirm-modal .modal-footer,
  .delete-confirm-modal .modal-footer {
    padding: 1rem;
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* 접근성 스타일 */
.modal:focus-visible {
  outline: none;
}

.modal-container:focus-visible {
  outline: 2px solid #0d6efd; /* 파란색 포커스 아웃라인 */
  outline-offset: 2px;
}