/* =====================================================================
   [공실드림 모듈] modal.css (모든 팝업 모달 & A4 인쇄 서식 전담)
   - B2B 로그인, 직원관리, 매물 등록/수정, 상세 모달, 구독 결제, A4 인쇄
   ===================================================================== */

/* ─── 1. 모달 공통 레이아웃 & 애니메이션 ──────────── */
.modal-overlay { 
  position: fixed; 
  inset: 0; 
  background: rgba(15, 23, 42, 0.72); 
  backdrop-filter: blur(4px); 
  -webkit-backdrop-filter: blur(4px);
  display: none; 
  align-items: center; 
  justify-content: center; 
  z-index: 2000; 
  animation: gp2fade .12s cubic-bezier(.2,0,.2,1);
}

@keyframes gp2fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gp2in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.modal-box, 
.detail-modal-box, 
.modal-content-card, 
.auth-gate-box { 
  background: #ffffff; 
  width: 500px; 
  max-height: 90vh; 
  overflow-y: auto; 
  border-radius: 12px; 
  padding: 24px; 
  box-shadow: 0 16px 36px rgba(0,0,0,0.2); 
  border: 1px solid #e2e8f0; 
  animation: gp2in .18s cubic-bezier(.2,0,.2,1);
}

.modal-title { 
  font-size: 16px; 
  font-weight: 800; 
  margin-bottom: 14px; 
  border-bottom: 1px solid #e2e8f0; 
  padding-bottom: 8px; 
  color: #0f172a; 
  letter-spacing: -0.01em;
}

.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 4px; }
.form-group input, 
.form-group select { 
  width: 100%; 
  height: 34px;
  padding: 0 10px; 
  border: 1px solid #cbd5e1; 
  border-radius: 6px; 
  font-size: 12.5px; 
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-group input:focus, 
.form-group select:focus { 
  border-color: #991b1b; 
  box-shadow: 0 0 0 3px #fef2f2;
}

.form-buttons { display: flex; gap: 8px; margin-top: 18px; }
.btn-submit { 
  flex: 1; 
  padding: 11px 0; 
  background: #991b1b; 
  color: white; 
  border: none; 
  border-radius: 6px; 
  font-weight: 700; 
  font-size: 12.5px;
  cursor: pointer; 
  transition: background 0.15s; 
}
.btn-submit:hover { background: #7f1d1d; }
.btn-cancel { 
  flex: 1; 
  padding: 11px 0; 
  background: #475569; 
  color: white; 
  border: none; 
  border-radius: 6px; 
  font-size: 12.5px; 
  cursor: pointer; 
}
.btn-close { 
  width: 100%; 
  padding: 10px 0; 
  background: #0f172a; 
  color: white; 
  border: none; 
  border-radius: 6px; 
  font-size: 13px; 
  cursor: pointer; 
}

/* ─── 2. B2B 로그인 게이트 모달 ────────────────── */
.auth-gate-modal { 
  position: fixed; 
  inset: 0; 
  background: rgba(15, 23, 42, 0.82); 
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  padding: 20px; 
}
.auth-gate-box { 
  background: #ffffff; 
  width: 440px; 
  border-radius: 14px; 
  padding: 32px 28px; 
  box-shadow: 0 20px 45px rgba(0,0,0,0.35); 
  text-align: center; 
  border: 1px solid #e2e8f0; 
}
.auth-lock-icon { 
  width: 54px; 
  height: 54px; 
  background: #fef2f2; 
  border: 1px solid #fecaca; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 24px; 
  margin: 0 auto 14px; 
}
.auth-gate-title { font-size: 20px; font-weight: 900; color: #0f172a; margin-bottom: 6px; }
.auth-gate-desc { font-size: 13px; color: #64748b; line-height: 1.5; margin-bottom: 18px; }

.auth-input-group { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 12px; }
.auth-input-group label { font-size: 12px; font-weight: 600; color: #334155; }
.auth-input-group input { 
  height: 36px;
  padding: 0 12px; 
  border: 1px solid #cbd5e1; 
  border-radius: 6px; 
  font-size: 13px; 
  outline: none; 
}
.auth-input-group input:focus { 
  border-color: #991b1b; 
  box-shadow: 0 0 0 3px #fef2f2;
}
.btn-auth-submit { 
  width: 100%; 
  background: #991b1b; 
  color: white; 
  border: none; 
  padding: 12px 0; 
  border-radius: 6px; 
  font-size: 14px; 
  font-weight: 700; 
  cursor: pointer; 
  margin-top: 4px; 
  margin-bottom: 14px; 
  transition: background 0.15s; 
}
.btn-auth-submit:hover { background: #7f1d1d; }

/* ─── 3. 직원 계정 관리 모달 ──────────────────── */
.staff-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.staff-table th, .staff-table td { padding: 9px 8px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.staff-table th { background: #f8fafc; color: #334155; font-weight: 700; }
.btn-staff-status { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; border: none; }
.btn-staff-status.active { background: #dcfce7; color: #15803d; }
.btn-staff-status.blocked { background: #fee2e2; color: #dc2626; }

/* ─── 4. 매물 등록 / 수정 모달 & 사진 업로드 ─────── */
.preview-grid { 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap; 
  margin-top: 8px; 
  min-height: 64px; 
  padding: 8px; 
  background: #f8fafc; 
  border: 1px dashed #cbd5e1; 
  border-radius: 6px; 
  align-items: center; 
}
.preview-item { 
  width: 76px; 
  height: 57px; 
  aspect-ratio: 4 / 3; 
  border-radius: 4px; 
  overflow: hidden; 
  position: relative; 
  border: 1px solid #94a3b8; 
  background: #0f172a; 
}
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item .btn-del-img { 
  position: absolute; 
  top: 2px; 
  right: 2px; 
  background: rgba(0,0,0,0.75); 
  color: #fff; 
  border: none; 
  border-radius: 50%; 
  width: 18px; 
  height: 18px; 
  font-size: 11px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

/* ─── 5. 상세 모달 (PRO-PHOTO 블러 배경 & 인맥 계통도) ── */
#detailModal .detail-modal-box { 
  width: 760px; 
  max-width: 94vw; 
  background: #ffffff; 
  border-radius: 8px; 
  overflow-y: auto; 
  padding: 24px 28px 22px; 
  border: 1px solid #e4e4e7; 
}
#detailModal .detail-top-bar { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  margin-bottom: 16px; 
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e4e7;
}
#detailModal .detail-top-bar h2 {
  font-size: 16px;
  font-weight: 700;
  color: #18181b;
  margin-top: 6px;
  line-height: 1.4;
}

/* [PRO-PHOTO] 대표사진 블러 배경 + 중앙 원본비율 보존 */
#detailModal .detail-main-img-box {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: 48vh;
  background: #f4f4f5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid #e4e4e7;
}
#detailModal .detail-main-img-box::before {
  content: "";
  position: absolute;
  inset: -24px;
  background-image: var(--gd-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(24px) saturate(1.1);
  opacity: .5;
}
#detailModal .detail-main-img-box img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
#detailModal .detail-main-img-box.gp-no-image::before { display: none; }
#detailModal .detail-main-img-box.gp-no-image img { display: none; }
#detailModal .gp-img-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #a1a1aa;
}
#detailModal .detail-main-img-box.gp-no-image .gp-img-placeholder { display: flex; }

/* 썸네일 리스트 */
#detailModal .detail-thumbs-scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
#detailModal .detail-thumb-item { width: 68px; height: 51px; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; cursor: pointer; opacity: 0.6; flex-shrink: 0; border: 2px solid transparent; background: #000; }
#detailModal .detail-thumb-item.active { opacity: 1; border-color: #991b1b; }
#detailModal .detail-thumb-item img { width: 100%; height: 100%; object-fit: cover; }

/* 가격 배너 */
#detailModal .detail-price-banner { 
  background: #fafafa; 
  border: 1px solid #e4e4e7; 
  border-left: 3px solid #991b1b;
  border-radius: 4px; 
  padding: 14px 18px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 18px; 
}
#detailModal .detail-price-big { font-size: 20px; font-weight: 900; color: #991b1b; font-variant-numeric: tabular-nums; }
#detailModal .detail-price-banner [id="modalDetailFee"] { font-size: 12.5px; font-weight: 600; color: #71717a; margin-left: 6px; }

/* 6대 스펙 그리드 */
#detailModal .detail-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
#detailModal .spec-grid-item { background: #ffffff; border: 1px solid #e4e4e7; padding: 10px 12px; border-radius: 3px; min-height: 54px; }
#detailModal .spec-grid-label { font-size: 10.5px; font-weight: 700; color: #a1a1aa; text-transform: uppercase; margin-bottom: 5px; }
#detailModal .spec-grid-value { font-size: 12.5px; font-weight: 700; color: #18181b; }

/* 비밀메모 박스 */
#detailModal #modalDetailSecretWrap { 
  padding: 12px 14px; 
  border-radius: 4px; 
  background: #fffbeb; 
  border: 1px solid #fde68a; 
  border-left: 3px solid #d97706; 
  margin-bottom: 16px; 
}
#detailModal #modalDetailSecretWrap > div:first-child { font-size: 11px; font-weight: 700; color: #92400e; margin-bottom: 6px; text-transform: uppercase; }
#detailModal #modalDetailSecretText { font-size: 12.5px; font-weight: 500; color: #78350f; line-height: 1.6; white-space: pre-wrap; }

/* 건물 인맥 계통도 */
#detailModal #modalStakeholderWrap { 
  padding: 14px 16px; 
  border-radius: 4px; 
  background: #fafafa; 
  border: 1px solid #e4e4e7; 
  margin-bottom: 16px; 
}
#detailModal #modalStakeholderWrap > div:first-child { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #e4e4e7; }
#detailModal #modalStakeholderWrap > div:first-child strong { font-size: 12.5px; font-weight: 700; color: #18181b; }
#detailModal #modalStakeholderWrap > div:first-child button { font-size: 11px; padding: 4px 10px; background: #991b1b; color: #fff; border: none; border-radius: 3px; font-weight: 600; cursor: pointer; }
#detailModal #stakeholderCurrentCards > div { padding: 10px 12px; border-radius: 4px; background: #ffffff; border: 1px solid #e4e4e7; }

/* 관리자 전용 업로드 원본 추적 박스 */
#detailModal #modalDetailAuditBox {
  padding: 12px 14px !important;
  border-radius: 4px !important;
  background: #fafafa !important;
  border: 1px dashed #d4d4d8 !important;
  margin-bottom: 14px !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #334155 !important;
}
#detailModal #modalDetailAuditBox > div:first-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #52525b !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

/* 관리자 제어 박스 */
#detailModal #adminMasterControlBox { 
  padding: 14px 16px; 
  border-radius: 4px; 
  background: #fffbeb; 
  border: 1px dashed #f59e0b; 
  margin-bottom: 16px; 
  font-size: 12px; 
}

/* 하단 4대 액션 버튼 */
#detailModal .detail-actions-bar { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 8px; 
  margin-top: 16px; 
  padding-top: 16px; 
  border-top: 1px solid #e4e4e7; 
}
#detailModal .btn-detail-action { 
  height: 38px; 
  padding: 0 10px; 
  border-radius: 6px; 
  font-size: 12.5px; 
  font-weight: 700; 
  cursor: pointer; 
  text-align: center; 
  text-decoration: none; 
  border: none; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 4px; 
}

/* ─── 6. 멤버십 구독 결제 모달 ────────────────── */
#subscriptionModal .modal-content-card { width: 640px; max-width: 92vw; padding: 32px 32px 28px; }
#subscriptionModal .pricing-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
#subscriptionModal .pricing-card { padding: 22px 20px; border-radius: 6px; border: 1px solid #e2e8f0; background: #ffffff; }
#subscriptionModal .pricing-card.selected { border-color: #991b1b; box-shadow: 0 0 0 3px #fef2f2; }
#subscriptionModal .plan-price { font-size: 20px; font-weight: 900; color: #0f172a; margin-bottom: 14px; }
#subscriptionModal .payment-method-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
#subscriptionModal .pay-method-btn { padding: 13px 8px; border-radius: 4px; font-size: 12.5px; font-weight: 600; }
#subscriptionModal .btn-submit-registration { padding: 16px 0; border-radius: 6px; font-size: 14px; font-weight: 700; background: #991b1b; color: #fff; width: 100%; border: none; cursor: pointer; }

/* ─── 7. A4 인쇄 모달 & 브리핑 인쇄 전용 서식 ─────── */
.print-modal-box { width: 760px; max-height: 92vh; background: #fff; padding: 25px; border-radius: 10px; }
.briefing-paper { background: #ffffff; border: 1px solid #cbd5e1; padding: 25px; border-radius: 6px; }
.briefing-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #0f172a; padding-bottom: 14px; margin-bottom: 16px; }
.briefing-title { font-size: 22px; font-weight: 900; color: #0f172a; }
.briefing-card { display: flex; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; gap: 16px; background: #f8fafc; margin-bottom: 12px; }
.briefing-card-thumb { width: 140px; height: 105px; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: #000; flex-shrink: 0; }
.briefing-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.briefing-card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

@media print {
  body * { visibility: hidden !important; }
  #printModal, #printModal * { visibility: visible !important; }
  #printModal { position: fixed !important; inset: 0 !important; background: white !important; z-index: 99999 !important; display: block !important; padding: 0 !important; }
  .print-modal-box { width: 100% !important; max-height: none !important; border: none !important; }
  .no-print, #printModalPrivateToolbar { display: none !important; }
}