/* ============================================
   공용 모달 / 토스트 (고객 화면 + 관리자 화면 공용)
   --------------------------------------------
   색은 --ui-* 변수로만 씁니다. 고객 화면(style.css)과 관리자 화면(admin.css)이
   각자 자기 팔레트로 이 변수들을 채워주면, 같은 컴포넌트가 양쪽 디자인에
   자연스럽게 녹아듭니다.

   기본값은 일부러 :root에 모아두지 않고 var()의 두 번째 인자로 각각 적습니다.
   이 파일이 style.css/admin.css **뒤에** 실리기 때문에, :root에 모아두면 같은
   우선순위로 나중에 선언된 이 파일의 기본값이 테마 매핑을 덮어써 버립니다
   (실제로 그래서 어두운 테마에서도 모달이 흰색으로 떴습니다).
   ============================================ */
/* ---------- 모달 ---------- */
.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  /* 상담 버튼(70)보다도 위. 모달은 화면에서 가장 위에 있어야 합니다. */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--ui-backdrop, rgba(8, 10, 16, 0.62));
  backdrop-filter: blur(2px);
  animation: ui-fade-in 0.14s ease both;
}
.ui-modal-backdrop.is-closing { animation: ui-fade-out 0.14s ease both; }

.ui-modal {
  width: 100%;
  max-width: 420px;
  /* 내용이 길어도 화면 밖으로 나가지 않게 하고, 넘치면 모달 안에서 스크롤 */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--ui-surface, #ffffff);
  color: var(--ui-text, #1b1f2a);
  border-radius: 16px;
  box-shadow: var(--ui-shadow, 0 18px 50px rgba(0, 0, 0, 0.32));
  padding: 24px 22px 18px;
  animation: ui-pop-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.ui-modal-backdrop.is-closing .ui-modal { animation: ui-fade-out 0.12s ease both; }

.ui-modal-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ui-text, #1b1f2a);
}
.ui-modal-body { margin: 0 0 20px; }
.ui-modal-body p {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ui-text-dim, #5b6377);
  /* 안내문에 주문번호처럼 긴 문자열이 들어가도 가로로 넘치지 않게 */
  overflow-wrap: anywhere;
}
.ui-modal-body p:last-child { margin-bottom: 0; }

.ui-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ui-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 9px;
  /* 손가락으로 누르는 최소 크기 */
  min-height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.14s ease, background 0.14s ease;
}
.ui-btn:focus-visible { outline: 3px solid var(--ui-accent, #3d5afe); outline-offset: 2px; }
.ui-btn-primary { background: var(--ui-accent, #3d5afe); color: var(--ui-accent-text, #ffffff); }
.ui-btn-primary:hover { opacity: 0.88; }
.ui-modal.is-danger .ui-btn-primary { background: var(--ui-danger, #c0392b); color: var(--ui-danger-text, #ffffff); }
.ui-modal.is-danger .ui-btn-primary:focus-visible { outline-color: var(--ui-danger, #c0392b); }
.ui-btn-ghost {
  background: transparent;
  color: var(--ui-text-dim, #5b6377);
  border-color: var(--ui-line, rgba(0, 0, 0, 0.12));
}
.ui-btn-ghost:hover { background: rgba(127, 127, 127, 0.1); color: var(--ui-text, #1b1f2a); }

/* ---------- 토스트 ---------- */
.ui-toast-host {
  position: fixed;
  /* 아래가 아니라 위에 띄웁니다. 화면 아래쪽에는 이미 상담 버튼과 모바일
     구매 바가 있어서, 거기에 토스트까지 겹치면 서로를 가립니다. */
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(440px, calc(100vw - 24px));
  pointer-events: none;
}
.ui-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  border-radius: 11px;
  background: var(--ui-surface, #ffffff);
  color: var(--ui-text, #1b1f2a);
  border: 1px solid var(--ui-line, rgba(0, 0, 0, 0.12));
  border-left: 4px solid var(--ui-success, #1c8a4b);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 13.5px;
  line-height: 1.6;
  animation: ui-toast-in 0.2s ease both;
}
.ui-toast.is-closing { animation: ui-toast-out 0.18s ease both; }
.ui-toast-error { border-left-color: var(--ui-danger, #c0392b); }
.ui-toast-info { border-left-color: var(--ui-accent, #3d5afe); }
.ui-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-toast-close {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ui-text-dim, #5b6377);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ui-toast-close:hover { background: rgba(127, 127, 127, 0.14); color: var(--ui-text, #1b1f2a); }

/* ---------- 움직임 ---------- */
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ui-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes ui-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-modal-backdrop,
  .ui-modal,
  .ui-toast { animation: none !important; }
  .ui-btn { transition: none; }
}

/* ---------- hidden 속성을 항상 존중 ---------- */
/* 실제로 났던 버그: 랜딩의 "궁금한 점이 있으신가요?" 말풍선을 닫아도 안 닫혔습니다.
   원인은 JS가 아니라 CSS였습니다 - 브라우저가 기본으로 갖고 있는
   [hidden] { display: none } 규칙은 **선택자 점수가 0-1-0**이라,
   .chat-nudge { display: inline-flex } 같은 클래스 규칙과 점수가 같으면서
   나중에 선언된 쪽(우리 CSS)이 이깁니다. 그래서 element.hidden = true 를 해도
   화면에서는 그대로 보였습니다(닫기 버튼이 먹통처럼 보인 이유).
   덤으로 처음 2.6초 동안 숨겨둬야 할 말풍선이 들어오자마자 떠 있었습니다.

   이 규칙 하나로 프로젝트 전체에서 hidden 속성이 항상 제대로 동작합니다.
   이 파일은 style.css/admin.css보다 나중에 실리고 !important까지 붙여서,
   앞으로 어떤 클래스가 display를 지정하더라도 hidden이 이깁니다. */
[hidden] { display: none !important; }

/* ---------- 서버가 내려준 알림 배너 ---------- */
/* 평소에는 숨겨두고 ui.js가 토스트로 올립니다. JS가 꺼져 있으면 아래
   noscript 규칙이 다시 보이게 해서, 알림을 통째로 놓치는 일이 없습니다. */
[data-flash] { display: none; }

@media print {
  .ui-modal-backdrop,
  .ui-toast-host { display: none !important; }
}