/* ═══ 공통 전체 팝업 틀 모양(xpop · #4092) — 한 파일 · 콘솔(index.html)과 점주 앱(owner/index.html)이 같이 싣는다 ═══
   ★컷 3(#4092) 에서 styles/components.css 에서 «옮겨» 왔다(복사 아님 · 두 벌 금지). 점주 앱은 components.css 를 안 읽는다
     (앱 = app-shell.css · 콘솔 = components.css — 서로의 CSS 를 안 읽는 것이 관례) → 틀 모양만 떼어 두 문서가 같이 싣는다.
   값(치수·색)은 tokens.css --xpop-* 한 곳 · 이 파일은 모양만. 자 = web/client/scripts/full-popup-frame-4092.test.mjs */

/* ═══ 공통 전체 팝업 틀(xpop · #4092 · 체크리스트 12) — 부품 = components/common/FullPopup.jsx · 값 = tokens.css --xpop-* ═══
   구조 = .xpop-layer(막) > .xpop-stage(무대 · 막과 같은 크기) > .xpop(상자) > .xpop-hd + [.xpop-sub] + .xpop-body > .xpop-in + [.xpop-ft]
   ★좌우 안쪽 여백은 전부 var(--xpop-pad) 한 값 — 머리·머리 아래 칸·본문·아래 줄의 글 시작선·끝선이 같다(폭 하나).
     --xpop-pad 는 상자(.xpop)에서 선언한다(CSS 변수는 선언 요소에서 풀림 — 폰 갈래도 상자에서 다시 선언).
   ★막·무대에는 클릭 처리 함수가 없다 — 바깥 클릭으로 닫지 않는다(CTO 확정 2026-09-29 ⓐ · 모든 전체 팝업).
   ★무대 한 칸 = 드래그 전역 스크립트(lib/ui-draggable-popups.js)가 상자를 «막의 직계 자식»으로 못 보게 — 전체 팝업은 끌리지 않는다. */
.xpop-layer { background: var(--xpop-scrim); }
.xpop-layer.xpop-phone { background: transparent; }
.xpop-stage { position: absolute; inset: 0; }
.xpop {
  --xpop-pad: var(--xpop-px);
  position: absolute;
  top: var(--xpop-gap); bottom: var(--xpop-gap);
  left: max(var(--xpop-gap), calc((100% - var(--xpop-max-w)) / 2));
  right: max(var(--xpop-gap), calc((100% - var(--xpop-max-w)) / 2));
  background: var(--surface-base);
  border: var(--xpop-line);
  border-radius: var(--xpop-radius);
  box-shadow: var(--xpop-shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.xpop-hd { height: var(--xpop-head-h); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 var(--xpop-pad); border-bottom: 1px solid var(--border-default); background: var(--surface-base); }
.xpop-ic { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.xpop-t { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-caption); font-weight: 800; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; }
/* 여러 줄 제목(titleWrap) — 머리 높이 --xpop-head-h 는 «최소»로 · 제목은 줄바꿈(말줄임 없음) */
.xpop-hd.xpop-hd-wrap { height: auto; min-height: var(--xpop-head-h); padding-top: var(--xpop-head-py); padding-bottom: var(--xpop-head-py); }
.xpop-t.xpop-t-wrap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }
.xpop-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.xpop-esc { font-size: var(--fs-tiny); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; white-space: nowrap; }
.xpop-esc kbd { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 700; padding: 0 5px; line-height: 17px; border: 1px solid var(--border-strong, #CBD0D6); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-sub); color: var(--text-secondary); }
.xpop-x { width: 30px; height: 30px; border: none; background: none; border-radius: 7px; color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; margin-right: -7px; cursor: pointer; padding: 0; }
.xpop-x:hover { background: var(--surface-hover, var(--surface-sub)); color: var(--text-primary); }
.xpop-bk { display: none; width: 32px; height: 32px; margin-left: -8px; border: none; background: none; color: var(--text-secondary); align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.xpop-bk.on { display: inline-flex; }
.xpop-sub { flex: none; background: var(--surface-base); }
.xpop-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-base); }
.xpop-in { padding: 20px var(--xpop-pad) 28px; box-sizing: border-box; }
/* 본문 flex 칸(bodyFlex · 컷 2) — 품은 화면이 제 스크롤러를 가질 때: 틀 본문은 스크롤 끔 + 높이만 · 안쪽 칸 = flex column(min-height 0) ·
   여백 0(좌우는 품은 화면이 var(--xpop-pad) 로) → 스크롤은 자식 한 겹(메모 전체화면 목록·카드·자유 배치 · 할 일 목록) */
.xpop-body.xpop-body-flex { overflow: hidden; display: flex; flex-direction: column; }
.xpop-body-flex > .xpop-in { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.xpop-ft { height: var(--xpop-foot-h); flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 var(--xpop-pad); border-top: 1px solid var(--border-default); background: var(--surface-base); }
/* 폰 = 상자가 화면 가득(여백·모서리·외곽선·그림자 0) · 머리 = ‹ + 제목(X·Esc 안내 숨김) · 아래 줄 버튼은 폭을 나눠 가짐
   두 갈래 — ①폰 판(narrow · 앱 프레임 안) ②PC 화면 폭 ≤640. 같은 값을 두 번 적는다(조건식에 변수를 못 씀). */
.xpop-phone .xpop { --xpop-pad: var(--xpop-px-phone); inset: 0; border: none; border-radius: 0; box-shadow: none; }
.xpop-phone .xpop-t { font-size: var(--fs-h3); }
.xpop-phone .xpop-ft { height: auto; padding-top: 10px; padding-bottom: 10px; }
.xpop-phone .xpop-ft .btn { flex: 1; justify-content: center; }
@media (max-width: 640px) {
  .xpop { --xpop-pad: var(--xpop-px-phone); inset: 0; border: none; border-radius: 0; box-shadow: none; }
  .xpop-t { font-size: var(--fs-h3); }
  .xpop-esc, .xpop-x, .xpop-ic { display: none; }
  .xpop-bk { display: inline-flex; }
  .xpop-ft { height: auto; padding-top: 10px; padding-bottom: 10px; }
  .xpop-ft .btn { flex: 1; justify-content: center; }
}