/* =========================================
   MPS Modal — Blue theme (Optimized)
   ========================================= */

/* ---- Tokens ---- */
:root{
  --mps-modal-z: 1000;

  /* Palette */
  --mps-bg: #fff;
  --mps-fg: #1f2b3a;          /* 본문(강화) */
  --mps-head-fg: #223246;     /* 헤더 */
  --mps-accent: #2F7DD1;
  --mps-accent-hover: #276CB8;
  --mps-accent-soft: #E7F1FF;
  --mps-danger: #E25D5D;

  /* Lines & Shadow */
  --mps-line-1: #dfe6f0;      /* 헤더 경계 */
  --mps-line-2: #e3e9f2;      /* 푸터 경계 */
  --mps-field:  #CFD6E4;      /* 입력/버튼 테두리 */
  --mps-shadow: 0 16px 50px rgba(0,0,0,.28);

  /* Motion */
  --mps-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Backdrop ---- */
.mps-backdrop{
  position: fixed; inset: 0;
  z-index: var(--mps-modal-z);
  background: rgba(17,23,34,.55);
  display: none;
}
.mps-backdrop.is-open{ display:block; }

/* 지원 시 블러 적용 (강도 완화) */
@supports (backdrop-filter: blur(2px)) {
  .mps-backdrop.is-open { backdrop-filter: blur(2px); }
}

/* ---- Root/Container ---- */
.mps-modal{
  position: fixed; inset: 0;
  z-index: calc(var(--mps-modal-z) + 1);
  display: none; place-items: center;
  padding: 24px;
  isolation: isolate;            /* 텍스트 블러 전파 차단 */
  will-change: opacity;
}
.mps-modal.is-open{ display:grid; }

/* ---- Dialog ---- */
.mps-modal__dialog{
  background: var(--mps-bg);
  color: var(--mps-fg);
  border-radius: 12px;
  min-width: 320px; max-width: 90vw; width: 520px;
  max-height: 85vh; overflow: hidden;
  box-shadow: var(--mps-shadow);
  display: grid; grid-template-rows: auto 1fr auto;
  outline: none;

  /* 선명도 보장 */
  position: relative; z-index: 1;
  filter: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sizes */
.mps-modal__dialog.is-sm { width: 420px; }
.mps-modal__dialog.is-lg { width: 960px; }
.mps-modal__dialog.is-xl { width: 1120px; }
.mps-modal__dialog.is-full{ width: min(1280px,96vw); height: min(92vh,920px); }

/* ---- Motion ---- */
@media (prefers-reduced-motion: no-preference){
  .mps-backdrop.is-open{ animation: mpsFadeIn .14s var(--mps-ease) both; }
  .mps-modal.is-open .mps-modal__dialog{ animation: mpsElevate .16s var(--mps-ease) both; }
}
@keyframes mpsFadeIn { from{opacity:0} to{opacity:1} }
@keyframes mpsElevate { from{transform:translateY(6px);opacity:.98} to{transform:none;opacity:1} }

/* ---- Header ---- */
.mps-modal__header{
  background: #fff;
  color: var(--mps-head-fg);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--mps-line-1);
  display:flex; align-items:center; gap:10px;
  position: relative;
}
.mps-modal__title{
  margin: 0;
  font: 800 15px/1.25 system-ui, "Noto Sans KR", sans-serif;
  letter-spacing: .01em;
  flex: 1;
}
.mps-modal__close{
  appearance:none; border:0; background: transparent;
  color:#66758e; font-size:18px; line-height:1; cursor:pointer;
  padding:6px; border-radius:8px;
}
.mps-modal__close:hover{ background:#f3f6fb; }

/* ---- Body / Footer ---- */
.mps-modal__body{
  padding:16px; overflow:auto;
  color: var(--mps-fg);
  font-weight: 500;        /* 가독성 보강 */
  line-height: 1.55;
}
.mps-modal__footer{
  padding: 12px 16px; display:flex; gap:10px; justify-content:flex-end;
  background:#fff; border-top:1px solid var(--mps-line-2);
}

/* ---- Buttons ---- */
.mps-btn{
  appearance:none; border:1.5px solid var(--mps-field);
  background:#fff; color:#2B384A; font-weight:800;
  border-radius:9px; padding:8px 16px; line-height:1; cursor:pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.mps-btn:hover{ background:#F6F8FC; }
.mps-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(47,125,209,.28); }
.mps-btn:disabled{ opacity:.55; cursor:not-allowed; }

.mps-btn--primary{
  background: var(--mps-accent);
  border-color: var(--mps-accent);
  color:#fff;
}
.mps-btn--primary:hover{
  background: var(--mps-accent-hover);
  border-color: var(--mps-accent-hover);
}
.mps-btn--danger{
  background:#fff; border-color: var(--mps-danger); color: var(--mps-danger);
}
.mps-btn--danger:hover{ background:#FFF4F4; }
.mps-btn--ghost{
  background: transparent; color: var(--mps-accent); border-color: transparent;
}
.mps-btn--ghost:hover{ background: var(--mps-accent-soft); }
.mps-btn--subtle{
  background:#F3F6FB; color:#2B384A; border-color:#E3E8F0;
}
.mps-btn--subtle:hover{ background:#EAF1FB; }

/* ---- Compact ---- */
.mps-modal__dialog.is-compact .mps-modal__header{ padding: 8px 12px; }
.mps-modal__dialog.is-compact .mps-modal__body  { padding: 12px; }
.mps-modal__dialog.is-compact .mps-modal__footer{ padding: 8px 12px; }

/* ---- Form inside modal ---- */
.mps-modal__body .form-row { display:flex; gap:10px; align-items:center; margin:.5rem 0; }
.mps-modal__body label     { font-weight:700; min-width:92px; align-content: center; }
.mps-modal__body input,
.mps-modal__body select,
.mps-modal__body textarea  { width:100%; border:1px solid var(--mps-field); border-radius:8px; padding:.5rem .6rem; }

/* ---- Theme: Bar ---- */
.mps-modal__dialog.theme--bar .mps-modal__header::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  /* background: var(--mps-accent); */
  border-radius: 12px 12px 0 0;
}

/* ---- Theme: Float Icon ---- */
.mps-modal__dialog.theme--float{ overflow:visible; }
.mps-modal__dialog.theme--float .mps-modal__header{ padding-top: 18px; }
.mps-modal__dialog.theme--float .mps-float-badge{
  position:absolute; left:18px; top:-14px;
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--mps-accent); color:#fff;
  font-weight:900; font-size:14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.mps-modal__dialog.theme--float .mps-float-badge.is-warn   { background:#F0A22F; }
.mps-modal__dialog.theme--float .mps-float-badge.is-danger { background:#E25D5D; }
.mps-modal__dialog.theme--float .mps-float-badge.is-ok     { background:#3FBF74; }

/* ---- Misc ---- */
p { margin: 0; }
.mps-scroll-lock { overflow:hidden; overscroll-behavior:contain; touch-action:none; }

/* Forced-colors (Accessibility) */
@media (forced-colors: active){
  .mps-modal__dialog { border: 1px solid CanvasText; }
  .mps-modal__header { border-bottom: 2px solid CanvasText; }
  .mps-btn           { border: 1px solid ButtonText; }
}

/* Keep site chat below modal */
#chat-toggle-btn, #chat-container { z-index: calc(var(--mps-modal-z) - 100); }

/* ---- Responsive ---- */
@media (max-width: 640px){
  .mps-modal { padding: 10px; }
  .mps-modal__dialog { width: 100%; max-width: 100%; }
  .mps-modal__dialog.is-mobile-full{
    height: calc(100vh - 20px);
    max-height: none;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
}

/* ===== Fix: prevent click-through & keep text crisp ===== */

/* 컨테이너는 이벤트 비활성, 백드롭/다이얼로그만 활성 */
.mps-modal { pointer-events: none; }
.mps-backdrop,
.mps-modal__dialog { pointer-events: auto; }

/* 다이얼로그 선명도 보장 */
.mps-modal { isolation: isolate; will-change: opacity; }
.mps-modal__dialog{
  position: relative; z-index: 1;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #1f2b3a;
}

/* 본문 타이포 보강 */
.mps-modal__body{ color:#1f2b3a; font-weight:500; line-height:1.55; }

/* 경계선 대비 보강 */
.mps-modal__header{ border-bottom-color:#dfe6f0; }
.mps-modal__footer{ border-top-color:#e3e9f2; }

/* 백드롭 블러 약화(선택) */
@supports (backdrop-filter: blur(6px)) {
  .mps-backdrop.is-open { backdrop-filter: blur(2px); }
}