@charset "UTF-8";
/* ════════════════════════════════════════════════════════════
   dialog.css — 공용 알림 · 확인 다이얼로그

   ess83/js/dialog.js 가 만드는 DOM 의 표현이다.
   쪽지함 삭제 확인(.mc-confirm) 표현을 그대로 승계했다.

   Scope 규약
   · 모든 규칙을 .ess83-dlg-bg / .ess83-dlg / body.ess83-dlg-open 안으로 둔다.
     공통 Header · Drawer · Navigation 에 닿는 Selector 를 두지 않는다.
   · z-index 는 Drawer(8900) · 베팅카트(9200) 보다 위,
     Login Modal(9000) 보다도 위여야 한다. 로그인 창 위에서도 알림이 뜬다.
   ════════════════════════════════════════════════════════════ */

.ess83-dlg-bg {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.62);
  overscroll-behavior: contain;
}
.ess83-dlg-bg[hidden] { display: none; }

/* 배경 스크롤 차단. 스크롤바 자리는 02-app-shell.css 의
   html { scrollbar-gutter: stable } 이 잡아 두므로 화면이 밀리지 않는다. */
body.ess83-dlg-open { overflow: hidden; }

@media (max-width:767px){
  .ess83-dlg-bg {
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px
             calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

.ess83-dlg {
  width: 100%;
  max-width: 380px;
  padding: 24px 20px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: #141518;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  text-align: center;
  animation: ess83-dlg-in .16s ease-out;
}
@keyframes ess83-dlg-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .ess83-dlg { animation: none; }
}

/* 아이콘 — 알림은 골드, 확인은 흰색 계열 */
.ess83-dlg-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(212,175,90,.10);
  border: 1px solid rgba(212,175,90,.26);
  color: #D4AF5A;
}
.ess83-dlg.is-confirm .ess83-dlg-ico {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
}
.ess83-dlg-ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ess83-dlg-ttl {
  margin: 0 0 8px;
  color: rgba(255,255,255,.94);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* 메시지 — 원본이 \n 으로 줄을 나눠 오는 경우가 많아 그대로 살린다.
   긴 URL·계좌번호가 상자를 넘지 않도록 강제 줄바꿈을 둔다. */
.ess83-dlg-txt {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-height: 46dvh;
  overflow-y: auto;
}

.ess83-dlg-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.ess83-dlg-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ess83-dlg-btn[hidden] { display: none; }
.ess83-dlg-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.ess83-dlg-btn:focus-visible { outline: 2px solid #8FB6FB; outline-offset: 2px; }

/* 확인 — 화면 공통 CTA 와 같은 샴페인 골드 */
.ess83-dlg-btn.confirm {
  border-color: rgba(212,175,90,.42);
  background: rgba(212,175,90,.16);
  color: #E8CE92;
  font-weight: 700;
}
.ess83-dlg-btn.confirm:hover {
  background: rgba(212,175,90,.24);
  color: #F3E3BC;
}

/* 알림은 버튼이 하나뿐이라 폭을 과하게 늘리지 않는다 */
.ess83-dlg.is-alert .ess83-dlg-btns { justify-content: center; }
.ess83-dlg.is-alert .ess83-dlg-btn.confirm { flex: 0 1 160px; }