/* =========================================================================
   JNC Holdings — Overlays (dialog / drawer / popover)
   Requires colors_and_type.css + semantic-roles.css.
   인지·UX 근거:
   · 모달은 단일 작업으로 주의를 강제 집중시키되, 남용하면 흐름을 끊는다 —
     중요·차단성 결정에만(규칙 1.4 인지부하). scrim으로 배경을 비활성화해
     "지금 처리할 것"을 명확히(게슈탈트 figure/ground, 규칙 1.6).
   · 닫기 경로는 항상 2개 이상 — 통제감(NN/g #3). 단, 푸터에 dismiss 액션
     (취소/확인)이 있는 모달은 상단 X를 두지 않는다: X는 취소와 기능이 중복되고
     "X=취소인가 X=저장인가"라는 모호함을 만든다. Material 기준 X는 전체화면
     대화상자에서 "변경 폐기 후 닫기"를 뜻하는 별개 의미이며, 중앙 확인형 모달의
     닫기 경로는 [취소/확인 버튼 + Esc + scrim 클릭]으로 이미 3개를 충족한다.
     (https://m1.material.io/components/dialogs.html — confirmation dialog)
     X(.jdialog-x)는 푸터 액션이 없는 비액션 모달에만 예외적으로 사용한다.
   · 진입/이탈 모션은 절제(120–320ms), prefers-reduced-motion 존중.
   ========================================================================= */

/* =========================================================================
   SCRIM / BACKDROP  .jscrim
   ========================================================================= */
.jscrim {
  position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-overlay);
  display: grid; place-items: center; padding: var(--sp-6);
  animation: jfade-in var(--dur-base) var(--ease-out);
}
@keyframes jfade-in { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================================
   DIALOG / MODAL  .jdialog
   <div class="jscrim"><div class="jdialog" role="dialog" aria-modal="true">…</div></div>
   ========================================================================= */
.jdialog {
  background: var(--surface-overlay-panel); color: var(--on-surface-overlay-panel);
  border-radius: var(--r-lg); box-shadow: var(--elevation-modal);
  width: 100%; max-width: 480px; max-height: calc(100vh - 96px);
  display: flex; flex-direction: column; overflow: hidden; z-index: var(--z-modal);
  animation: jdialog-in var(--dur-slow) var(--ease-out);
}
@keyframes jdialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.jdialog.sm { max-width: 380px; } .jdialog.lg { max-width: 640px; } .jdialog.xl { max-width: 840px; }
.jdialog-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
}
.jdialog-head .jdialog-title { font: var(--w-bold) var(--fs-h3)/1.25 var(--font-sans);
  letter-spacing: var(--ls-h3); color: var(--fg1); flex: 1; }
.jdialog-head .jdialog-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; background: transparent; color: var(--fg2);
  border-radius: var(--r-sm); cursor: pointer; transition: background var(--transition-base);
}
.jdialog-head .jdialog-x:hover { background: var(--state-hover-surface); color: var(--fg1); }
.jdialog-head .jdialog-x:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.jdialog-body { padding: 0 var(--sp-6); overflow-y: auto; color: var(--fg2);
  font-size: var(--fs-body); line-height: var(--lh-body); }
.jdialog-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-4);
}
/* destructive dialog accent (rule-flagged: --error, not market --negative) */
.jdialog.danger .jdialog-title { color: var(--error); }
/* leading status icon slot (passive/transactional/danger 유형 구분) */
.jdialog-head .jdialog-ico { flex: none; width: 36px; height: 36px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--surface-sunken); color: var(--fg2); }
.jdialog-head .jdialog-ico svg { width: 20px; height: 20px; }
.jdialog.danger  .jdialog-ico { background: var(--error-soft);   color: var(--error); }
.jdialog.warning .jdialog-ico { background: var(--warning-soft);  color: var(--on-warning-container); }
.jdialog.info    .jdialog-ico { background: var(--info-soft);     color: var(--info); }
.jdialog.success .jdialog-ico { background: var(--success-soft);  color: var(--success); }

/* =========================================================================
   DRAWER / SHEET  .jdrawer  (side-anchored panel; filters, detail, nav)
   ========================================================================= */
.jdrawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(420px, 90vw);
  background: var(--surface-overlay-panel); box-shadow: var(--elevation-modal);
  z-index: var(--z-modal); display: flex; flex-direction: column;
  animation: jdrawer-in-right var(--dur-slow) var(--ease-out);
}
.jdrawer.left { right: auto; left: 0; animation-name: jdrawer-in-left; }
@keyframes jdrawer-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes jdrawer-in-left  { from { transform: translateX(-100%); } to { transform: none; } }
.jdrawer-head { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--outline); }
.jdrawer-head .jdrawer-title { font: var(--w-bold) var(--fs-h4)/1.3 var(--font-sans); color: var(--fg1); flex: 1; }
.jdrawer-body { flex: 1; overflow-y: auto; padding: var(--sp-6); }
.jdrawer-foot { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--outline);
  display: flex; gap: var(--sp-3); justify-content: flex-end; }
/* bottom sheet (mobile) */
.jdrawer.bottom { top: auto; left: 0; right: 0; width: auto; max-height: 86vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0; animation-name: jdrawer-in-bottom; }
@keyframes jdrawer-in-bottom { from { transform: translateY(100%); } to { transform: none; } }
.jdrawer.bottom .grip { width: 36px; height: 4px; border-radius: var(--r-pill);
  background: var(--border-strong); margin: var(--sp-3) auto 0; }

/* =========================================================================
   POPOVER  .jpopover  (anchored, non-blocking; rich content vs plain tooltip)
   ========================================================================= */
.jpopover {
  background: var(--surface-popover); color: var(--on-surface-popover);
  border: 1px solid var(--outline); border-radius: var(--r-md);
  box-shadow: var(--elevation-overlay); z-index: var(--z-popover); position: relative;
  min-width: 220px; max-width: 340px; padding: var(--sp-4);
  animation: jpop-in var(--dur-base) var(--ease-out);
}
@keyframes jpop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.jpopover-title { font: var(--w-semibold) var(--fs-body-sm)/1.3 var(--font-sans); color: var(--fg1); margin-bottom: var(--sp-2); }
.jpopover-body  { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg2); }
/* directional caret — placement names where the popover sits RELATIVE to its anchor.
   .bottom = popover below anchor (caret points up), etc. .no-caret hides it. */
.jpopover::after { content: ""; position: absolute; width: 10px; height: 10px;
  background: var(--surface-popover); transform: rotate(45deg); }
.jpopover.bottom::after { top: -6px;  left: 50%; margin-left: -5px; border-top: 1px solid var(--outline);    border-left: 1px solid var(--outline); }
.jpopover.top::after    { bottom: -6px; left: 50%; margin-left: -5px; border-bottom: 1px solid var(--outline); border-right: 1px solid var(--outline); }
.jpopover.right::after  { left: -6px;  top: 50%;  margin-top: -5px;  border-bottom: 1px solid var(--outline); border-left: 1px solid var(--outline); }
.jpopover.left::after   { right: -6px; top: 50%;  margin-top: -5px;  border-top: 1px solid var(--outline);    border-right: 1px solid var(--outline); }
.jpopover.no-caret::after { display: none; }
/* popover header with dismiss (richer than tooltip) */
.jpopover-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.jpopover-head .jpopover-title { margin: 0; flex: 1; }
.jpopover-x { flex: none; width: 24px; height: 24px; border: 0; background: transparent; color: var(--fg3);
  cursor: pointer; border-radius: var(--r-xs); display: inline-grid; place-items: center; }
.jpopover-x:hover { background: var(--state-hover-surface); color: var(--fg1); }
.jpopover-x svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .jscrim, .jdialog, .jdrawer, .jpopover { animation: none; }
}