/* ════════════════════════════════════════════════════════════════════════════
 * 대화상자 정본 (dialog.css) — 2026-10-04 신설(옮김 — 사본 아님)
 * ────────────────────────────────────────────────────────────────────────────
 * 🔴 **커스텀 모달 껍데기(`.dlg-*`)와 확인창(`uiDialog`)의 모양은 이 파일 하나가 정한다.**
 *    종전엔 껍데기가 `problem-bank-cards.css`, 확인창 안쪽이 `problem-bank-share.css` 에 있었다 — 보관함 전용 파일이라
 *    그 둘을 안 싣는 메시지·같이풀기·연결 관리·내 정보 화면은 확인창을 쓸 수 없었고, 그래서 브라우저 기본 창
 *    (`alert`·`confirm`·`prompt` — 테마·서체·버튼 정본 전부 미적용)이 남았다. 설계 implementation_plan-20261003-221652 D2.
 * 🔴 **배포 경로는 `fragments/head-icons.html` 의 `<link>` 한 줄이다**(z-layers·page-width 와 같은 길 — 전 화면 유일 진입점).
 *    `@import` 하지 말 것, 화면이 직접 링크하지 말 것 — 진입 경로가 둘이 되면 갈린다.
 * · head 에서 Bootstrap·화면 CSS 보다 **먼저** 로드된다 → 화면 CSS 의 같은 명시도 규칙(`.pb-webcam-modal` 의 폭 등)이 이긴다.
 * · 색은 테마 토큰 + 폴백(테마가 없는 관리자·가입 화면은 폴백 = 종전 값).
 * · `.dlg-title` 은 종전 두 벌(cards·share)이었다 — 그때 실제로 이기던 share 값 한 벌로 합쳤다(그 화면 5장은 전부 두 파일을 함께 실었다).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── 껍데기 (커스텀 모달 공통 — 확인창·업로드·카메라·삭제·단원 분류) ──────────────── */
.dlg-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: var(--z-layer, 5000);   /* 🔴 [Z1 2026-09-05] 오버레이 층은 열린 순서다 — common.js layerStack 이 --z-layer 를 싣는다. 정적 값 금지 */
    display: none;
    align-items: center;
    justify-content: center;
}

.dlg-backdrop.active {
    display: flex;
}

.dlg-panel {
    background: var(--t-surface, #fff);   /* [G-2 2026-08-14] 표면 정본 토큰 */
    color: var(--t-on-surface, inherit);
    border-radius: 18px;
    padding: 24px;
    width: min(92vw, 550px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: dlg-in 0.22s cubic-bezier(.34,1.56,.64,1);

    /* 🔴 [오버레이 높이 계약 2026-09-14 · 제보] **모달은 뷰포트를 넘지 않는다.**
       종전엔 `max-height`·`overflow` 가 없어 내용만큼 무한히 커졌고, backdrop 이
       `align-items:center` 라 넘치는 만큼 **위아래로 똑같이 잘렸다**(실측 412×730 에서
       사진 3장+진행표시 = 913px → 위아래 92px 씩 소실). backdrop 은 `overflow:visible` 이라
       스크롤 컨테이너가 되지도 못해 **잘린 곳에 닿을 방법이 아예 없었다** — 제목도 [업로드] 버튼도.
       🔴 `dvh` 를 함께 보는 이유: 폰은 주소창이 접히며 `vh` 가 실제 가시영역과 어긋난다.
       🔴 `overscroll-behavior` 는 배경 잠금(layerStack)의 **대체가 아니라 보완**이다 —
          내용이 짧아 스크롤이 없으면 이 속성은 아무것도 막지 못한다(그때는 잠금이 막는다). */
    max-height: min(88dvh, 100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 🔴 제목과 액션은 **스크롤을 따라가지 않는다** — 이 두 규칙이 위 계약의 절반이다.
   모달 전체만 스크롤시키면 `[업로드]` 가 스크롤 밖으로 나가 "어떻게 진행하는지 모르는" 상태가 된다
   (제보 증상의 절반이 그것이었다). 음수 offset 은 `.dlg-panel` 의 padding 24px 보정이다.
   🔴 마크업을 고치지 않는다 — 커스텀 모달 5종이 **전부** 이 두 공통 클래스를 쓴다(grep 전수).
      본문 래퍼를 새로 만들면 화면이 계약을 손으로 조립하게 된다. */
.dlg-panel > .dlg-title {
    position: sticky;
    top: -24px;
    z-index: 1;
    background: inherit;          /* 투명하면 스크롤된 내용이 뒤로 비친다 */
    padding-top: 24px;
    margin-top: -24px;
}
.dlg-panel > .dlg-actions {
    position: sticky;
    bottom: -24px;
    z-index: 1;
    background: inherit;
    padding-bottom: 24px;
    margin-bottom: -24px;
}

@keyframes dlg-in {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.dlg-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--t-on-surface, #0f172a);
}

.dlg-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

/* ── 확인창 (`uiDialog` — 마크업은 common.js 가 스스로 만든다) ─────────────────────
   🔴 아래 규칙은 위 껍데기 규칙 **뒤**에 둔다 — `.dlg-confirm .dlg-title`(0,2,0) 이 `.dlg-panel > .dlg-title`(0,2,0) 의
      margin-bottom 을 순서로 이긴다(종전 cards → share 적재 순서를 파일 안 순서로 옮긴 것). */
.dlg-confirm {
    width: min(90vw, 400px);   /* 컴팩트한 확인창 — `.dlg-panel` 550 을 순서로 이긴다 */
    border-radius: 20px;
    border: 1px solid var(--t-card-border, rgba(226, 232, 240, 0.8));
}

.dlg-confirm .dlg-title {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.dlg-icon { margin-right: 6px; }
.dlg-icon--danger  { color: var(--t-danger-on-surface, #ef4444); }
.dlg-icon--warning { color: var(--t-warning-on-surface, #f59e0b); }
.dlg-icon--info    { color: var(--t-accent, #7c3aed); }

.dlg-confirm .dlg-message {
    font-size: 0.92rem;
    color: var(--t-on-surface-muted, #475569);
    line-height: 1.6;
    margin: 10px 0 0;
    white-space: pre-line;     /* 문구 키의 `\n` 을 줄바꿈으로 — 네이티브 창에서 옮겨 온 문구가 그대로 읽히게 */
    word-break: keep-all;
}

.dlg-confirm .dlg-warn {       /* 되돌릴 수 없는 행동의 경고 한 줄(안 푼 문제 N개 등) — 시험 제출 두 화면이 같은 모양으로 말한다 */
    color: var(--t-danger-on-surface, #ef4444);
    font-size: 0.85rem;
}

.dlg-confirm .dlg-input {
    margin-top: 12px;
}

.dlg-confirm .dlg-actions {
    justify-content: flex-end;
    margin-top: 20px;
}

/* ── 덮개 → 페이지 (폰 2단계 · 2026-10-05) ───────────────────────────────────────────────
 * 🔴 폰(맥락 바가 있는 대역)에서 **페이지급 덮개**(검토 작업면·해설 확인·월간 리포트 상세·받은 피드백 모아보기 — 📎 2026-10-07 개편 2차로
 *    「검토 서랍」(매트릭스 위 드로어 층) 폐지 · 4종)는 맥락 바 아래 ~ 하단 탭 위를 채우는 **페이지**로 보인다
 *    (검토 작업면은 몰입 `immersive 'review'` 로 하단 탭을 걷어 그 자리까지 쓴다 — `--snav-pad-bottom` 이 safe-area 만 남는다)(사용자 결정 D4 · 설계 plan/2026-10-05/implementation_plan-20261005-234806.md §2-5).
 *    겹침·배경 잠금·뒤로가기는 그대로 `layerStack` 이 소유하고(`acquire(…, { page: true })` — 「지금 2단계」 신호의 세 번째 입력),
 *    모양은 **표식 세 개**로만 정한다 — 덮개마다 CSS 를 따로 쓰지 않는다:
 *      `[data-layer-page]` 루트 · `[data-layer-page-panel]` 패널 · `[data-layer-page-head]` 맥락 바가 대신 말하는 자기 머리(✕·제목)
 *    Bootstrap 모달은 배경막이 body 끝의 별도 요소라 bsModal 이 그 배경막에 `[data-layer-page-backdrop]` 를 붙인다(안 걷으면 맥락 바 ← 를 가린다).
 * 🔴 `!important` 는 이 파일이 화면 CSS 보다 **먼저** 실리기 때문이다 — 같은 명시도의 화면 규칙(덮개 자리·폭·모서리)이 이겨 버린다.
 *    열고 닫는 표시(display·opacity·visibility)는 건드리지 않는다 — 닫힌 덮개가 페이지로 드러나면 안 된다.
 * 넓은 대역은 지금처럼 덮개다. 경계는 §레이아웃 판정의 폰 대역 표기와 같다.
 * 🔴 [2026-10-07 제보 — 폰 해설 확인이 스크롤 안 됨] **스크롤 주체는 덮개 자신의 것을 그대로 둔다.** 이 정본은 자리만 바꾼다.
 *    종전엔 루트가 `overflow-y:auto` 이고 패널이 `height:auto` 라 패널이 내용만큼(해설 2888px) 자랐다 → 덮개가 설계한 본문 스크롤러
 *    (`.pb-review-sheet-body` — 넘침 0)가 `overscroll-behavior: contain` 으로 루트 쪽 체이닝을 끊어 터치·휠 0(dev 실측 · 대조군 422px).
 *    그래서 루트는 자르고(`overflow:hidden`) 패널은 페이지 자리를 꽉 채운다(`height:100%`) — 머리 고정·본문 스크롤·sticky 문제 띠가 폰에서도 산다.
 *    전제: 페이지급 덮개는 **자기 스크롤러를 가진다**(4종 전부 — 본문 `overflow-y:auto` · 작업면은 표 래퍼). 측정 축 `overlay_probe.js` P8(스크롤 함정). */
/* 🔴 [2026-10-07 개편 2차 P3a] **작업면**(`data-layer-page="workspace"` — 검토 매트릭스) — 넓은 대역에서도 덮개가 아니라 **화면 전체**다.
 *    자리 = nav 여백 안쪽 전부(상단바·레일·하단 탭은 남는다 — 값은 nav 판정 블록의 `--snav-pad-*` 를 읽는다). 폰은 아래 페이지 블록이 같은 일을 한다.
 *    층·뒤로가기·배경 잠금은 그대로 `layerStack` 이다(새 라우트 없음 — 08-30 기각 근거 ③ 획 유실 존중). 스크롤 주인은 덮개 안 표 래퍼 하나(R1).
 *    !important 는 위 머리말과 같은 이유(이 파일이 화면 CSS 보다 먼저 실린다). 설계 plan/2026-10-07/implementation_plan-20261007-041430.md §5-4 */
[data-layer-page="workspace"] {
    position: fixed !important;
    top: var(--snav-pad-top, 0px) !important;
    bottom: var(--snav-pad-bottom, 0px) !important;
    left: var(--snav-pad-left, 0px) !important;
    right: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}
[data-layer-page="workspace"] > [data-layer-page-panel] {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
@media screen and (max-width: 599.98px) {
    [data-layer-page] {
        position: fixed !important;
        top: var(--snav-pad-top, 48px) !important;
        bottom: var(--snav-pad-bottom, 56px) !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--t-surface, #fff) !important;
        overflow: hidden !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    [data-layer-page] [data-layer-page-panel] {
        /* 패널마다 배치 방식이 다르다(가운데 정렬 `left:50%` + `translateX(-50%)` · 아래 붙임 `bottom:0` …) — 위치를 통째로 되돌린다.
           transform 만 지우고 위치를 두면 `left:50%` 가 남아 화면 폭 절반만큼 밀린다(dev 실측 — 해설 확인 시트 206px). */
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }
    [data-layer-page] [data-layer-page-head],
    .modal-backdrop[data-layer-page-backdrop] { display: none !important; }
}