/* ═══════════════════════════════════════════════════════════════
   css/b/overlays.css — 떠 있는 것(설계서 §3.2 '떠 있는 것'·'모달·시트·대화상자'·'토스트')
   소유: 스크림(검색·패널·프로필) · 모달(.modal-overlay — 폭 <700 하단 시트, ≥700 가운데 카드) · 시스템 대화상자 ·
        떠 있는 패널(알림·검색 결과·일정·프로필 미리보기) · 컨텍스트 메뉴 위치 · 토스트 · 파일 뷰어 · 보호막.
   ⚠️ 등장은 main.js 의 옵저버가 .modal-fade-init 을 잠깐 붙였다 떼는 방식이다(rAF + setTimeout). 기본 상태는 늘 '보임'이다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 스크림 ── */
/* 검색·알림 — 검색줄·알림줄(39)·topline(40) 아래(35)라 줄 안의 조작은 그대로 된다. 누르면 열린 쪽을 닫는다. */
body #search-scrim { background: var(--scrim-light); opacity: 0; pointer-events: none; transition: opacity var(--fade); }
body:is(.search-open, .notif-open) #search-scrim { opacity: 1; pointer-events: auto; }
/* 떠 있는 패널(일정) 뒤 — ⚠️ pointer-events 는 늘 none(각 모듈의 '바깥 클릭으로 닫기'를 막지 않는다). */
body #panel-scrim { background: var(--scrim-light); opacity: 0; pointer-events: none; transition: opacity var(--move); }
body.panel-open #panel-scrim { opacity: 1; }

/* ── 모달 ── */
body .modal-overlay { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* 화면 키보드를 뺀 실제 표시 영역에 맞춘다(main.js initVisualViewport). */
body .modal-overlay, body .sys-dialog { top: var(--visual-viewport-top); bottom: auto; height: var(--visual-viewport-height); }
body .modal-overlay:not(#modal-viewer) {
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) calc(16px + var(--safe-bottom)) max(16px, var(--safe-left));
}
/* 카드 — ⚠️ 구조(`:scope > .w-full`)를 유지한다(프로브가 본다). 폭 상한은 마크업의 max-w-* 가 정한다. */
body .modal-overlay:not(#modal-viewer) > div, .modal-card {
  min-height: 0; max-width: calc(100vw - 32px);
  max-height: min(88vh, 760px, calc(var(--visual-viewport-height) - max(16px, var(--safe-top)) - 16px - var(--safe-bottom)));
  overflow-y: auto; padding: 22px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-modal);
}
body .modal-overlay:not(#modal-viewer) > .w-full { width: min(100%, var(--max)); }
/* 저장/취소 줄 — 중앙 카드에서는 본문 흐름, 휴대폰 하단 시트에서만 바닥에 남는다. */
body .modal-overlay .modal-actions {
  position: static; display: flex; gap: 8px; padding-top: 16px; background: var(--paper);
}
.modal-title, body .modal-overlay h2.type-heading, body .modal-overlay h2 { font-size: 20px; font-weight: 650; letter-spacing: -.03em; line-height: 1.3; color: var(--ink); }
body .modal-overlay h3.type-title, body .modal-overlay h3.type-title-lg { font-size: 16px; font-weight: 680; }
body .modal-overlay label[class*="text-xs"] { color: var(--text-2); font-size: 12px; font-weight: 560; }
body .modal-overlay p[class*="text-xs"] { font-size: 12px; line-height: 1.6; color: var(--text-2); }
/* 닫기(아이콘) */
body .modal-overlay:not(#modal-viewer) [data-close-modal][aria-label="닫기"] {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--r-btn);
  color: var(--t-nav); background: transparent;
}
body .modal-overlay:not(#modal-viewer) [data-close-modal][aria-label="닫기"]:hover { background: var(--nav-hover); color: var(--green-deep); }
/* 마크업의 Tailwind 버튼 → B 큰 버튼(.b-btn) 모양. `~=` 는 클래스 낱말과 정확히 맞춘다(accent-soft 를 accent 로 오인하지 않게). */
:is(.modal-overlay, .sys-dialog, #modal-my-info, #onboarding-view) button:is([class~="bg-ui-accent"], [class~="bg-ui-accent-soft"], [class~="bg-ui-surface-soft"]) {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r-item); background: var(--paper); color: var(--green-deep);
  font-size: 14px; font-weight: 650; line-height: 1.2; white-space: nowrap; box-shadow: none;
  transition: background-color var(--move), border-color var(--move), transform var(--move);
}
:is(.modal-overlay, .sys-dialog, #modal-my-info, #onboarding-view) button:is([class~="bg-ui-accent-soft"], [class~="bg-ui-surface-soft"]):hover { background: var(--nav-hover); }
:is(.modal-overlay, .sys-dialog, #modal-my-info, #onboarding-view) button[class~="bg-ui-accent"] {
  background: var(--action); border-color: var(--action); color: #fff; box-shadow: var(--action-shadow);
}
:is(.modal-overlay, .sys-dialog, #modal-my-info, #onboarding-view) button[class~="bg-ui-accent"]:hover { background: var(--action-hover); border-color: var(--action-hover); }
:is(.modal-overlay, .sys-dialog, #modal-my-info, #onboarding-view) button:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
body .modal-overlay button[class*="text-ui-danger"][class*="rounded-full"] { color: var(--danger); border: 1px solid var(--danger-line); background: var(--paper); border-radius: var(--r-item); }
/* 준비 팝업의 줄 */
#modal-setup-prompt .setup-row { padding: 10px 12px; border-radius: var(--r-item); background: var(--paper-2); }

/* ── 시스템 대화상자(customAlert/Confirm/Prompt) — 늘 가운데 카드 ── */
body .sys-dialog { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left)); }
body .sys-dialog > div {
  width: min(360px, 100%); max-height: calc(var(--visual-viewport-height) - max(16px, var(--safe-top)) - max(16px, var(--safe-bottom)));
  overflow-y: auto; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-modal);
}
.sys-dialog-msg { font-size: 14px !important; line-height: 1.65; color: var(--ink); }
.sys-dialog button { flex: 1; }
/* 등장 — 오버레이 .22s, 카드는 6px 아래에서 */
.modal-overlay:not(.hidden), .sys-dialog:not(.hidden) { opacity: 1; transition: opacity var(--fade); }
.modal-overlay:not(.hidden) > div, .sys-dialog:not(.hidden) > div { opacity: 1; transform: none; transition: opacity var(--fade), transform var(--fade); }
.modal-overlay.modal-fade-init:not(.hidden), .sys-dialog.modal-fade-init:not(.hidden) { opacity: 0; }
.modal-overlay.modal-fade-init:not(.hidden) > div, .sys-dialog.modal-fade-init:not(.hidden) > div { opacity: 0; transform: translateY(6px); }

/* ── 떠 있는 패널(알림 목록·검색 결과·일정·프로필 미리보기) — JS 가 left/top 을 넣는다 ── */
#notif-panel, #search-panel, #modal-cal-day {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-phone); box-shadow: var(--shadow-pop); padding: 16px; color: var(--ink);
}
#search-panel { padding: 6px; }
/* 알림 목록 — 상자·위치·등장은 검색 결과 패널과 같다(알림줄 아래 6px, 3px 위에서 .18s). 안의 필터·줄·빈 상태는 사용자 가안(Baby Sage)이며
   읽지 않은 줄의 옅은 면이 보이도록 면만 흰색이다. */
#notif-panel { padding: 0; background: var(--sage-paper); color: var(--sage-ink); overscroll-behavior: contain; }
#notif-panel .notif-filters {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 11px 18px;
  background: var(--sage-paper); border-bottom: 1px solid var(--sage-line);
}
#notif-panel .notif-filter {
  min-height: 37px; padding: 6px 15px; border: 1px solid transparent; border-radius: 999px; background: transparent;
  color: var(--sage-muted); font-size: 13px; font-weight: 650; transition: background-color var(--move), color var(--move);
}
#notif-panel .notif-filter:hover { background: var(--sage-row-hover); }
#notif-panel .notif-filter[aria-pressed="true"] { background: var(--sage-filter-on); color: var(--sage-filter-on-ink); }
#notif-panel .notif-group { margin: 0; padding: 16px 18px 6px; font-size: 12px; font-weight: 740; color: var(--sage-muted); }
#notif-panel .notif-item {
  position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 14px 30px 14px 18px;
  border-bottom: 1px solid var(--sage-row-line); background: var(--sage-paper); color: var(--sage-ink); text-decoration: none;
  transition: background-color var(--move);
}
#notif-panel .notif-item:hover { background: var(--sage-row-hover); }
#notif-panel .notif-item.is-unread { background: var(--sage-unread); }
#notif-panel .notif-item.is-unread:hover { background: var(--sage-unread-hover); }
#notif-panel :is(.notif-item, .notif-filter):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#notif-panel .notif-box {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--r-item);
  background: var(--sage-note); color: var(--sage-note-ink);
}
#notif-panel .notif-box .ui-icon { font-size: 21px; }
#notif-panel .notif-box.is-plan { background: var(--sage-plan); color: var(--sage-plan-ink); }
#notif-panel .notif-box.is-voice { background: var(--sage-voice); color: var(--sage-voice-ink); }
#notif-panel .notif-copy { flex: 1 1 0%; min-width: 0; padding-top: 1px; }
#notif-panel .notif-title { display: block; margin: 0 0 3px; font-size: 15px; font-weight: 585; line-height: 1.4; overflow-wrap: anywhere; }
#notif-panel .notif-item.is-unread .notif-title { font-weight: 700; }
#notif-panel .notif-desc { display: block; font-size: 13px; line-height: 1.55; color: var(--sage-muted); overflow-wrap: anywhere; }
#notif-panel .notif-time { flex: none; margin-top: 3px; font-size: 11px; color: var(--sage-muted); white-space: nowrap; }
#notif-panel .notif-dot { position: absolute; right: 12px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-dot); }
#notif-panel .notif-empty {
  min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 28px 18px; text-align: center; color: var(--sage-muted); font-size: 13px;
}
#notif-panel .notif-empty .ui-icon { font-size: 32px; color: var(--sage-focus); }
#notif-panel .notif-empty strong { color: var(--sage-filter-on-ink); font-size: 16px; font-weight: 700; }
#notif-panel .notif-loading { margin: 0; padding: 28px 18px; text-align: center; font-size: 13px; color: var(--sage-muted); }
#notif-panel .notif-footer { margin: 0; padding: 14px 18px 16px; text-align: center; font-size: 12px; color: var(--sage-muted); }
@media (max-width: 460px) {
  #notif-panel .notif-filters, #notif-panel .notif-group, #notif-panel .notif-footer { padding-left: 14px; padding-right: 14px; }
  #notif-panel .notif-item { gap: 11px; padding: 13px 26px 13px 14px; }
  #notif-panel .notif-box { width: 38px; height: 38px; }
}
#notif-panel:not(.hidden), #modal-my-info:not(.hidden), #search-panel:not(.hidden), #modal-cal-day:not(.hidden) {
  opacity: 1; transform: none; transition: opacity var(--move), transform var(--move), left var(--move), top var(--move);
}
:is(#notif-panel, #modal-my-info, #search-panel, #modal-cal-day):is(.modal-fade-init, .floating-panel-closing):not(.hidden) { opacity: 0; transform: translateY(-3px); }
#search-panel .card-lift { border-color: var(--rule-3); }
/* 내 프로필·프로필 수정은 profile-a.css 가 사용자 가안(Baby Sage) 모양을 독립 소유한다. */

/* ── 컨텍스트 메뉴(본문 밖, fixed) — 모양은 components.css 의 .popup-menu ── */
#copy-menu, #gallery-context-menu, #archive-context-menu { position: fixed; }
#copy-menu [data-copy-hint] { font-size: 11px; color: var(--muted); }

/* ── 토스트 — B 하단 바 재질(--bar-bg + blur 18). 위치·등장은 기존 기능 그대로(.sys-toast-show) ── */
#sys-toast {
  position: fixed; left: 50%; z-index: 105; bottom: calc(var(--nav-clear) + 16px + var(--safe-bottom));
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(92vw, 520px); padding: 10px 16px 10px 10px;
  background: var(--bar-bg); border: 1px solid var(--line); border-radius: var(--r-item); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink); font-size: 13px; font-weight: 560;
  transform: translate(-50%, 6px); opacity: 0; pointer-events: none; transition: opacity var(--fade), transform var(--fade);
}
#sys-toast.sys-toast-show { transform: translate(-50%, 0); opacity: 1; }
#sys-toast-msg { font-size: 13px; font-weight: 560; line-height: 1.45; }
#sys-toast[aria-hidden="true"] { visibility: hidden; }
#sys-toast-action { pointer-events: auto; flex: none; min-height: 44px; padding: 0 10px; color: var(--green-deep); font-weight: 700; border-radius: var(--r-btn); background: var(--green-soft); }
#sys-toast-action[hidden] { display: none; }
#sys-toast-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sys-toast-mark { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-deep); font-size: 11px; font-weight: 700; }

/* ── 파일 뷰어 — 전체 화면, 노치·홈 인디케이터만 피한다 ── */
body #modal-viewer {
  background: var(--viewer-bg);
  padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));
}
#modal-viewer button, #modal-viewer a { border-radius: var(--r-btn); color: var(--paper); }

/* ══ 반응형(B 순서 + 시트 분기) ══════════════════════════════════════ */
@media (orientation: landscape) and (min-width: 760px) {
  #sys-toast { left: calc(50% + var(--nav-size) / 2); }
}
/* 폭 <700 — 폼 모달은 하단 시트(카드가 바닥에 붙는다, 위 모서리 22 · 아래 0, 맨 위 손잡이). 사진 뷰어는 제외.
   ⚠️ 바닥은 화면 키보드를 뺀 표시 영역의 아래 끝이고, 홈 표시줄(safe-area)은 비켜 선다 — 그 아래로 내려가면
      저장/취소가 가려진다(tools/run.sh safe-modal 이 잰다). 노치 없는 기기에서는 간격 0 이다.
   ⚠️ 시트는 등장할 때 투명도만 바뀐다(위치는 그대로) — 프로브가 등장 도중의 위치를 재도 바닥을 넘지 않는다. */
@media (max-width: 699.98px) {
  body .modal-overlay:not(#modal-viewer) { align-items: flex-end; padding: max(12px, var(--safe-top)) 0 var(--safe-bottom); }
  body .modal-overlay:not(#modal-viewer) > div {
    width: 100%; max-width: none; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0;
    padding: 10px 18px 18px;
    max-height: calc(var(--visual-viewport-height) - max(12px, var(--safe-top)) - var(--safe-bottom));
  }
  body .modal-overlay.modal-fade-init:not(.hidden):not(#modal-viewer) > div { transform: none; }
  body .modal-overlay:not(#modal-viewer) > div::before {
    content: ''; display: block; flex: none; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: var(--r-bar); background: var(--line-strong);
  }
  body .modal-overlay .modal-actions { position: sticky; bottom: 0; z-index: 1; padding-bottom: 2px; }
}
@media (max-width: 460px) {
  body .sys-dialog > div { padding: 18px; }
}
/* Per-class seating form. No password dialog or fixed seat-count assumption. */
.seat-layout-groups { display:grid; gap:12px; }
.seat-layout-groups fieldset { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; border:1px solid var(--line); border-radius:12px; padding:12px; }
.seat-layout-groups legend { font-weight:700; padding:0 6px; }
.seat-layout-groups label { display:grid; min-width:0; gap:5px; }
.seat-layout-groups input { width:100%; min-width:0; }
.seat-layout-groups fieldset > button { grid-column:1/-1; justify-self:start; }