/* 모달 기본 스타일 */
.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;
}

/* 결제 내역 모달 — 고정 width(=601px, 이전 546px 대비 +10%). modifierClass 스코프. */
.modal.payment-history-modal .modal-container {
  width: 601px;
  min-width: 601px;
  max-width: 92vw;
}
/* 결제 목록은 내부 스크롤로 높이 상한 — 행이 많아도 모달이 세로로 무한정 길어지지 않음. */
.modal.payment-history-modal #ph-list {
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;   /* 스크롤바와 카드 테두리 간섭 방지 */
}
/* 관리자 답변 토글(💬) — 아이콘 원형 칩(옵션 C). */
.modal.payment-history-modal .ph-reply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.modal.payment-history-modal .ph-reply-btn:hover { background: #f3f4f6; }

/* 2026-06-28: 스타일 QA(스타일 가이드 생성) 모달 전용 — 미리보기 콘텐츠에 따라 width 가
   800~900px 로 가변하던 문제 차단. modal-lg 위에 width 명시 고정. (.styleqa-modal 은
   modifierClass 로 #globalModal 에 부여됨 → 다른 lg 모달엔 영향 없음.) */
.modal.styleqa-modal .modal-container.modal-lg {
  width: 900px;
  min-width: 900px;
  max-width: 95vw;
}

@media (max-width: 940px) {
  .modal.styleqa-modal .modal-container.modal-lg {
    width: 95vw;
    min-width: auto;
  }
}

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

/* 2026-07-25: 삭제 확인 모달 — 긴 파일명이 들어가도 폭이 400~500px 로 고정.
   파일명은 body 내부 박스에서 말줄임(…) 처리(호출부). */
.modal.delete-confirm-modal .modal-container {
  min-width: 400px;
  max-width: 600px;
}

/* 2026-07-03: 전체 프롬프트 미리보기 — 콘텐츠 변경 시 width 흔들림 방지 + 고정 폭.
   상세 번역 모달(918px)과 동일 폭으로 통일. */
.modal.wsprompt-preview .modal-container.modal-xl {
  width: 918px;
  max-width: 95vw;
}
@media (max-width: 980px) {
  .modal.wsprompt-preview .modal-container.modal-xl {
    width: 95vw;
  }
}

/* 2026-07-03: 상세 번역 모달 — modal-large(1080px) 대비 width 15% 축소(= 918px).
   다른 large 모달(termbase/TM 등)과 분리하기 위해 modifierClass 로 스코프. */
.modal.wsadvtrans-narrow .modal-container.modal-large {
  width: 918px;
  min-width: 918px;   /* base modal-large 의 min-width:1080px 를 반드시 override */
  max-width: 95vw;
}
@media (max-width: 980px) {
  .modal.wsadvtrans-narrow .modal-container.modal-large {
    width: 95vw;
    min-width: auto;
  }
}

/* 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 사전번역 모달 폭. 2026-07-18: +30% (500 → 650px). 소형 화면은 95vw. */
.modal-container.modal-tm-pretranslate {
  width: 650px;
  max-width: 95vw;
  min-width: 650px;
}

/* "행 범위 지정"의 Bootstrap .row 음수 마진이 body 우측을 넘어 가로 스크롤이 생기는 것 차단.
   패딩은 일반 .modal-body(1.5rem) 유지 — 콘텐츠가 테두리에 붙지 않도록. */
.modal-container.modal-tm-pretranslate .modal-body {
  overflow-x: hidden;
}

/* 2026-07-18: body 세로 스크롤 활성 시 overflow 가 좌측 끝 radio/checkbox/input 의 focus
   ring(box-shadow 0.25rem=4px 글로우) 왼쪽을 자르던 문제 — 근본 해결: 콘텐츠 래퍼 1곳을
   6px 우측 이격 → 모든 컨트롤의 좌측 글로우가 clip 경계를 벗어남(요소별 대응 폐기). */
.modal-container.modal-tm-pretranslate .modal-body .tm-pretranslate-dialog {
  padding-left: 6px;
}

@media (max-width: 680px) {
  .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;
  }
}

/* 2026-07-02: "행/열 설정" 모달 전용 — modal-large(1080px) 대비 width 20% 축소(= 864px).
   column_mapping_modal.js 가 show({ modifierClass: 'colmap-narrow' }) 로 .modal 에 class 부여. */
.modal.colmap-narrow .modal-container.modal-large {
  width: 864px;
  min-width: 864px;
  max-width: 95vw;
}

@media (max-width: 900px) {
  .modal.colmap-narrow .modal-container.modal-large {
    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;
}