/* ============================================================================
 *  nx-modal.css — nxModal 의 "열림/닫힘" 과 배경막만.
 *
 *  ★ 팝업의 모양은 전부 Zynix 의 `.ti-modal-*` 클래스가 만든다.
 *    이 파일은 그 CSS 가 다루지 않는 두 가지만 담당한다:
 *      ① 오버레이를 실제로 보이게 하는 상태 클래스
 *      ② 배경막(backdrop) — Preline JS 가 만들던 요소를 우리가 직접 만든다
 *
 *  왜 Preline JS 를 쓰지 않나
 *  ------------------------
 *  Preline 의 HSOverlay 는 페이지 로드 시점에 존재하는 요소를 등록한다.
 *  우리는 팝업을 **동적으로 만들고 AJAX 로 내용을 채우고 history 까지** 다루므로,
 *  등록 시점·내부 상태를 두 곳에서 만지면 어긋난다. 열고 닫는 것만 직접 한다.
 *  (Zynix 의 `hs-overlay-open:` 변형이 동작하도록 `open` 클래스도 함께 붙인다)
 * ========================================================================= */

/* .ti-modal 은 opacity:0 · pointer-events:none 로 숨어 있다. 이걸 되돌린다. */
.ti-modal.nx-open {
  opacity: 1;
  pointer-events: auto;
}

/* ★★★★ F492 — **카드는 언제나 막 바로 위**다.
   벤더(styles.css)가 `.ti-modal { z-index: 999 }` 를 준다. 막을 사다리로
   올리면서 카드를 안 올리면 **카드가 막 뒤로 숨는다**(팝업을 열었는데 내용이
   안 보이는 그 화면이다). 둘은 반드시 **같이** 움직인다.
   ★ 벤더 파일은 안 고친다 — 재수입하면 사라진다(6절 함정 4). */
.ti-modal { z-index: calc(var(--nx-z-modal) + 1); }

/* 배경막 — Zynix 다크모드 값과 같은 톤 */
.nx-modal-backdrop {
  position: fixed;
  inset: 0;
  /* ★ F492: 층은 사다리(nx-shell-parts.css)가 정한다 — 숫자를 안 적는다.
     카드(.ti-modal)는 막 바로 위 한 칸이다. */
  z-index: var(--nx-z-modal);
  background-color: rgb(17 24 39 / 0.5);
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nx-modal-backdrop.nx-open {
  opacity: 1;
}
.dark .nx-modal-backdrop {
  background-color: rgb(17 24 39 / 0.8);
}

/* 2단 중첩 — 뒤 팝업 위에 얹힌다(사다리의 «한 칸 위» 규칙) */
.nx-modal-backdrop[data-nx-depth="2"] {
  z-index: calc(var(--nx-z-modal) + var(--nx-z-step)); }
.ti-modal[data-nx-depth="2"] {
  z-index: calc(var(--nx-z-modal) + var(--nx-z-step) + 1); }

/* ★★★★ F484(사장님 2026-08-16): *"이 기어아이콘 클릭하면 수정창 안 뜬다.
   수정창이 이 모달창 뒤에 DOX 리스트에 떠서 안 보인다."* — **맞다.**
   전체화면 시트(`nx-sheet`)는 1150 인데 이 팝업은 998/999 다. 시트 안에서
   «부모가 열어 달라»고 넘긴 팝업이 **시트 뒤에** 깔려 보이지 않았다.
   ★ 숫자를 새로 지어내지 않는다 — **시트 층 정본**(`--nx-sheet-z`)을 읽어
     그 위로 올린다. 시트가 층을 바꾸면 여기도 저절로 따라온다.
   ★ 시트가 열려 있을 때만이다(`body.nx-sheet-on`) — 평소 팝업의 층은
     그대로 둔다. 규칙을 약하게 만들지 않고 **범위를 정확히** 한다. */
body.nx-sheet-on .nx-modal-backdrop { z-index: var(--nx-z-over); }
body.nx-sheet-on .ti-modal          { z-index: calc(var(--nx-z-over) + 1); }
body.nx-sheet-on .nx-modal-backdrop[data-nx-depth="2"] {
  z-index: calc(var(--nx-z-over) + var(--nx-z-step)); }
body.nx-sheet-on .ti-modal[data-nx-depth="2"] {
  z-index: calc(var(--nx-z-over) + var(--nx-z-step) + 1); }

/* 팝업이 열려 있는 동안 뒤 페이지 스크롤을 막는다.
   position:fixed 를 쓰지 않는 이유 — 스크롤 위치가 초기화된다. */
body.nx-modal-open {
  overflow: hidden;
}

/* 팝업 안에서 불러온 조각이 자체 여백을 갖고 오는 경우가 많아,
   본문 첫/마지막 요소의 위·아래 여백을 접어 준다(이중 여백 방지). */
.ti-modal-body > [data-nx-fragment] > :first-child { margin-top: 0; }
.ti-modal-body > [data-nx-fragment] > :last-child  { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   F780-6(사장님 실기동 2026-09-08) — 팝업 안의 **「사유 목록」 한 벌**.

   이 규칙들은 원래 `dox_report.html` 의 <style> 안에만 있었다. 그런데
   같은 목록을 그림글자 팝업(`dox_figtext.html`)이 그리기 시작하면서
   **그 팝업에는 규칙이 하나도 없었다** — 사유와 수가 붙어서 한 문장처럼
   나왔다(사장님 화면: 「사진이라 손대지 않습니다5장」). 마크업만 베끼고
   모양은 안 베낀 것이다.

   ⇒ 두 팝업이 쓰는 것은 **여기 한 벌**이다(0-0). 리포트에만 있는 것
     (`.nx-rp-grid`·`.nx-rp-c`·`.nx-rp-k`·`.nx-rp-v`)은 그 파일에 둔다.
   ═══════════════════════════════════════════════════════════════════════ */
.nx-rp-h { font-weight: 600; font-size: 13px; margin: 14px 0 6px;
  color: var(--defaulttextcolor, #536485); }
.nx-rp-h:first-of-type { margin-top: 0; }
.nx-rp-m { margin: 0; padding: 0 0 0 4px; list-style: none; font-size: 12px;
  max-height: 210px; overflow-y: auto;
  border: 1px solid rgba(128, 138, 165, .3); }
.nx-rp-m li { padding: 4px 8px;
  border-bottom: 1px solid rgba(128, 138, 165, .18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-rp-m li:last-child { border-bottom: 0; }
.nx-rp-m span { display: inline-block; min-width: 42px;
  color: var(--textmuted, #8c9097); }

/* 「원본 그대로 둔 그림」 — 사유가 왼쪽(굵게), 장 수가 오른쪽 끝.
   붙어 나오지 않게 **자리를 나눈다**(가운데를 늘린다). */
/* ★ 자르기(`white-space`·`overflow`·`text-overflow`)를 **여기 또 쓰지 않는다.**
   위 `.nx-rp-m li` 가 이미 한다 — 두 벌이면 한쪽을 떼도 다른 쪽이 가려서
   검사가 결함을 못 본다(실측 2026-09-08: 변이 C1331 이 «안잡힘» 이었다). */
.nx-rp-f li { color: var(--textmuted, #8c9097);
  display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; }
/* 사유가 길면 **사유가** 잘린다 — 장 수는 끝까지 보여야 하는 값이다.
   (flex 칸이라 `min-width:0` 이 없으면 안 줄어들어 잘리지 않는다.) */
.nx-rp-f span { min-width: 0; font-weight: 600; flex: 0 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--defaulttextcolor, #536485); }