/* nx-list — 목록 화면의 틀 하나 (사장님 지시 dxx145-3 · 2026-09-30). 마크업 = ui.listpage · 동작 = list.ts
 *
 *  ┌ .nx-list__stats ───────────────── (있을 때만) 통계 한 줄 — 메일 미인증·정지·답변 대기 같은 수 · 안내 글 ┐
 *  ├ .nx-list__tools ───────────────── 한 줄 · 좁으면 가로 드래그(얇은 막대) · 오른쪽 기어 고정(고정 열 · 한 쪽 줄 수) ┤
 *  ├ .nx-list__body (.nxe-twx) ─────── 높이 = 브라우저 세로에서 도구줄·발을 뺀 것(list.ts 가 --nx-list-h 로) ┤
 *  │   .nx-list__scroll (.nxe-tw)      가로·세로 스크롤 · thead sticky · 고정 열(data-fix-lead/tail + --nxl/--nxr 변수 · nth-child) · 오른쪽 «더 있음» 화살표(.nxe-twa)
 *  └ .nx-list__foot ─────────────────── 페이징 · 스크롤 밖 · 브라우저 하단 ┘
 *  ★ 좁은 화면에서도 카드로 펼치지 않는다(nx-rtable 을 안 붙인다) — 가로 스크롤이 규칙.
 */
/* ★ 2026-10-01 사장님 «ehub24 이미지와 같은 셀 높이·패딩·배경색·느낌» — 이미지에서 잰 값:
 *   행 38px(글자 13px · 칸 높이 38 고정 · 패딩 7px 8px · 단추 22px) · 머리 39px 연푸른 바탕 #f2f8ff 검정 글자 · 칸 선 #e6e6e6 · 바깥 선 #ccc ·
 *   줄무늬 흰색/#fafafa · 도구줄 조절칸 34px 흰 바탕 1px 회색 선 · 라운드 0.                                                       */
.nx-list { display: flex; flex-direction: column; min-width: 0; min-height: 240px; height: var(--nx-list-h, calc(100vh - 230px)); }
/* 목록 화면에서는 레이아웃 푸터를 숨긴다 — 페이징이 진짜 바닥(사장님 2026-10-01 ⓑ). list.ts 가 body 에 표식을 단다. */
body.nx-haslist footer.footer { display: none; }
.nx-list__tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 0 0 6px; }
.nx-list__toolscroll { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: thin; }
.nx-list__toolscroll > * { flex: 0 0 auto; }
.nx-list__toolscroll::-webkit-scrollbar { height: 4px; }
.nx-list__toolscroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); border-radius: 0; }
.nx-list__toolscroll form { display: flex; align-items: center; gap: 6px; margin: 0; }
/* 도구줄 조절칸 — 이미지의 흰 바탕 · 1px 회색 선 · 34px 한 줄. 셀렉트·검색칸·단추가 같은 키. */
.nx-list__tools .form-control, .nx-list__tools .ti-form-select, .nx-list__tools select, .nx-list__tools .ti-btn {
  height: 34px; min-height: 34px; padding: 0 var(--nx-btn-px, 10px) !important; font-size: 13px; line-height: 32px; border-radius: 0 !important;
  border: 1px solid #8e8e8e; background-color: rgb(var(--bg-white, 255 255 255)); color: inherit; margin: 0 !important; }
/* dx146-2(사장님 2026-10-01 «셀렉트는 자기 너비 · 인풋은 3/5 로»): 셀렉트는 글자 폭(최소폭 없음) · 검색칸은 7rem(종전 내용 폭 188px 의 3/5 ≈ 113px). */
.nx-list__tools .ti-form-select, .nx-list__tools select { padding-right: 28px !important; width: auto; min-width: 0; }
.nx-list__tools .form-control { width: 7rem; min-width: 0; }
.nx-list__tools .ti-btn-primary { background-color: rgb(var(--color-primary, 99 102 241)); border-color: rgb(var(--color-primary, 99 102 241)); color: #fff; }
.nx-list__tools .ti-btn-danger { background-color: rgb(var(--color-danger, 220 38 38)); border-color: rgb(var(--color-danger, 220 38 38)); color: #fff; }
/* dx146-2: MY DOX 도구줄이 이 부품으로 들어왔다 — 거기 단추의 success/info(F703 색 무리)도 같은 식으로 남긴다(outline 은 흰 바탕 그대로). 변수 이름은 벤더 styles.css 의 --success·--info·--primary 다. */
.nx-list__tools .ti-btn-success { background-color: rgb(var(--success, 12 199 99)); border-color: rgb(var(--success, 12 199 99)); color: #fff; }
.nx-list__tools .ti-btn-info { background-color: rgb(var(--info, 12 156 252)); border-color: rgb(var(--info, 12 156 252)); color: #fff; }
.nx-list__tools .ti-btn-outline-success { border-color: rgb(var(--success, 12 199 99)); color: rgb(var(--success, 12 199 99)); }
.nx-list__tools .ti-btn-outline-primary { border-color: rgb(var(--primary, 115 93 255)); color: rgb(var(--primary, 115 93 255)); }
.nx-list__tools .ti-btn i { line-height: 1; }
.nx-list__count { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.nx-list__gearwrap { position: relative; flex: 0 0 auto; }
.nx-list__gear { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #8e8e8e;
  border-radius: 0; background: rgb(var(--bg-white, 255 255 255)); color: inherit; cursor: pointer; font-size: 18px; }
.nx-list__gear[aria-expanded="true"] { background: rgba(var(--color-primary, 99 102 241), .12); }
.nx-list__gearpop { position: absolute; right: 0; top: 40px; z-index: 30; min-width: 220px; padding: 12px 14px; font-size: 13px;
  background: rgb(var(--bg-white, 255 255 255)); color: inherit; border: 1px solid rgb(var(--default-border, 226 232 240));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.dark .nx-list__gearpop { background: rgb(var(--bodybg, 17 24 39)); }
.nx-list__geartitle { margin: 0 0 8px; font-weight: 600; }
.nx-list__geargrp { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.nx-list__geargrp > span { min-width: 4.5em; color: rgb(var(--text-muted, 100 116 139)); }
.nx-list__geargrp label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.nx-list__gearhint { margin: 8px 0 0; color: rgb(var(--text-muted, 100 116 139)); font-size: 12px; }
.nx-list__geartitle--2 { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgb(var(--default-border, 226 232 240)); }
/* 통계 줄 — 도구줄 위 한 줄(사장님 2026-09-30). 목록 높이는 그만큼 줄어든다(list.ts 가 잰다). 좁으면 가로 스크롤(줄 바꿈 없음). */
.nx-list__stats { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; overflow-x: auto; padding: 0 0 6px;
  scrollbar-width: thin; font-size: 12px; color: rgb(var(--text-muted, 100 116 139)); }
.nx-list__stats::-webkit-scrollbar { height: 4px; }
.nx-list__stats .nx-list__stat { font-size: 12px; }

.nx-list__body { position: relative; flex: 1 1 auto; min-height: 120px; border: 1px solid #c9c9c9; }
.dark .nx-list__body { border-color: rgb(var(--default-border, 55 65 81)); }
.nx-list__scroll { position: absolute; inset: 0; overflow: auto; scrollbar-width: thin; }
.nx-list__scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.nx-list__scroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); border-radius: 0; }
.nx-list__scroll.nxe-tw--dragging { cursor: grabbing; user-select: none; }
/* 표 — 이미지 그대로: 칸마다 #e6e6e6 선 · 머리 #f2f8ff · 가운데 정렬 · 행 38px · 줄무늬 */
.nx-ltable { margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #222; }
.dark .nx-ltable { color: inherit; }
.nx-ltable th, .nx-ltable td { border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
  padding: 7px 8px !important; text-align: center; vertical-align: middle; line-height: 17px; height: 38px; box-sizing: border-box; }
.dark .nx-ltable th, .dark .nx-ltable td { border-color: rgb(var(--default-border, 55 65 81)); }
.nx-ltable tr > :last-child { border-right: 0; }
.nx-ltable th { font-weight: 500; white-space: nowrap; }
.nx-ltable thead th { position: sticky; top: 0; z-index: 3; background: #f2f8ff; color: #222; height: 39px; border-bottom-color: #cfd8e3; }
.dark .nx-ltable thead th { background: rgb(var(--bodybg, 17 24 39)); color: inherit; }
.nx-ltable td { background: #fff; }
.nx-ltable tbody tr:nth-child(even) td { background: #fafafa; }
.dark .nx-ltable td { background: rgb(var(--bodybg, 17 24 39)); }
.dark .nx-ltable tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
.nx-ltable td.text-start, .nx-ltable th.text-start { text-align: center; }
.nx-ltable td.nx-cell--left { text-align: left; }
.nx-ltable td.nx-cell--right { text-align: right; font-variant-numeric: tabular-nums; }
/* 칸 안의 단추·배지는 행 38px 안에 들어가야 한다(단추 24px) — 안 그러면 행이 54px 로 늘어난다(2026-10-01 실측) */
.nx-ltable .ti-btn, .nx-ltable .ti-btn-sm { height: 22px; min-height: 0; padding: 0 8px !important; line-height: 20px; font-size: 12px; border-radius: 0 !important; margin: 0 !important; }
.nx-ltable .badge { border-radius: 0; line-height: 16px; padding: 1px 6px; }
.nx-ltable .form-check-input { margin: 0; vertical-align: middle; }
/* 고정 열 — list.ts 가 표 뿌리에 --nxl-1..3 / --nxr-1..3 과 data-fix-lead/tail 을 적는다. 셀에는 아무것도 안 쓴다(2026-10-01 검수).
 *   thead 는 위·옆 둘 다 sticky 라 z 가 하나 더 높다. 배경은 위 td/th 규칙이 이미 불투명하게 깔아 둔다. */
.nx-ltable[data-fix-lead="1"] tr > :nth-child(1),
.nx-ltable[data-fix-lead="2"] tr > :nth-child(-n+2),
.nx-ltable[data-fix-lead="3"] tr > :nth-child(-n+3) { position: sticky; z-index: 2; }
.nx-ltable[data-fix-tail="1"] tr > :nth-last-child(1),
.nx-ltable[data-fix-tail="2"] tr > :nth-last-child(-n+2),
.nx-ltable[data-fix-tail="3"] tr > :nth-last-child(-n+3) { position: sticky; z-index: 2; }
/* left/right 는 **고정 범위 안의 칸에만** — 머리 칸은 top:0 으로 이미 sticky 라, 범위 밖 칸에 right 를 주면 옆으로도 붙어 버린다(2026-10-01 폰 실측) */
.nx-ltable:is([data-fix-lead="1"], [data-fix-lead="2"], [data-fix-lead="3"]) tr > :nth-child(1) { left: var(--nxl-1, 0); }
.nx-ltable:is([data-fix-lead="2"], [data-fix-lead="3"]) tr > :nth-child(2) { left: var(--nxl-2, 0); }
.nx-ltable[data-fix-lead="3"] tr > :nth-child(3) { left: var(--nxl-3, 0); }
.nx-ltable:is([data-fix-tail="1"], [data-fix-tail="2"], [data-fix-tail="3"]) tr > :nth-last-child(1) { right: var(--nxr-1, 0); }
.nx-ltable:is([data-fix-tail="2"], [data-fix-tail="3"]) tr > :nth-last-child(2) { right: var(--nxr-2, 0); }
.nx-ltable[data-fix-tail="3"] tr > :nth-last-child(3) { right: var(--nxr-3, 0); }
/* 머리 행의 고정 칸만 z 4 — 고정 아닌 머리 칸까지 올리면 옆으로 밀려온 칸이 고정 칸 위에 그려진다(2026-10-01 폰 실측) */
.nx-ltable[data-fix-lead="1"] thead tr > :nth-child(1),
.nx-ltable[data-fix-lead="2"] thead tr > :nth-child(-n+2),
.nx-ltable[data-fix-lead="3"] thead tr > :nth-child(-n+3),
.nx-ltable[data-fix-tail="1"] thead tr > :nth-last-child(1),
.nx-ltable[data-fix-tail="2"] thead tr > :nth-last-child(-n+2),
.nx-ltable[data-fix-tail="3"] thead tr > :nth-last-child(-n+3) { z-index: 4; }
/* 고정 열의 끝 — 그림자 한 줄로 «여기까지 고정» 을 알린다 */
.nx-ltable[data-fix-lead="1"] tr > :nth-child(1),
.nx-ltable[data-fix-lead="2"] tr > :nth-child(2),
.nx-ltable[data-fix-lead="3"] tr > :nth-child(3) { box-shadow: inset -1px 0 0 #e6e6e6, 4px 0 8px -4px rgba(0, 0, 0, .12); }
.nx-ltable[data-fix-tail="1"] tr > :nth-last-child(1),
.nx-ltable[data-fix-tail="2"] tr > :nth-last-child(2),
.nx-ltable[data-fix-tail="3"] tr > :nth-last-child(3) { box-shadow: inset 1px 0 0 #e6e6e6, -4px 0 8px -4px rgba(0, 0, 0, .12); }
/* 행 갱신 깜빡임 — background-color 는 전환이 된다(background-image 는 안 됐다 · 2026-10-01 검수) */
.nx-ltable tr.nx-row--flash > td { background-color: rgba(var(--color-primary, 99 102 241), .16); transition: background-color .6s; }
.nx-list__stat { color: rgb(var(--text-muted, 100 116 139)); font-size: 12px; }
.nx-list__stat b { color: inherit; font-weight: 600; }

/* 오른쪽 «더 있음» 화살표 — 뷰어 표(nx-doc-util.css .nxe-doc …)와 같은 부품 · 여기서는 목록 상자 기준 */
.nx-list__body > .nxe-twa { display: none; position: absolute; top: 0; right: 8px; bottom: 8px; width: 28px; z-index: 5; pointer-events: none; }
.nx-list__body:has(> .nxe-tw--more) > .nxe-twa { display: block; }
.nx-list__body > .nxe-twa > i { position: sticky; top: 44px; display: block; width: 28px; height: 28px; border-radius: 0;
  background: rgba(15, 23, 42, .45); color: #fff; }
.nx-list__body > .nxe-twa > i::after { content: ""; position: absolute; left: 9px; top: 9px; width: 8px; height: 8px;
  border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }

/* fill=False — 다른 상자 옆에 서는 목록(고객센터 «나의 문의»): 내용만큼 · 최대 60vh 안에서 스크롤 · 푸터 안 숨김(list.ts) */
.nx-list--fit { height: auto; min-height: 0; }
.nx-list--fit .nx-list__body { flex: 0 0 auto; min-height: 0; }
.nx-list--fit .nx-list__scroll { position: static; max-height: 60vh; }
.nx-list--busy .nx-list__body { opacity: .55; transition: opacity .15s; }   /* fetch 로 받는 동안 — 2026-10-01 */
/* ↻ 새로 읽기(2026-10-03) — 기어와 같은 단추 꼴(.nx-list__gear) · 기어 오른쪽에 붙는다 · 받는 동안 돈다 */
.nx-list__reload { flex: 0 0 auto; margin-left: -1px; }
.nx-list--busy .nx-list__reload i { display: inline-block; animation: nx-list-spin .8s linear infinite; }
@keyframes nx-list-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nx-list--busy .nx-list__reload i { animation: none; } }
.nx-list__foot { flex: 0 0 auto; padding-top: 8px; }
.nx-list__foot > div { margin-bottom: 0 !important; }
/* ★ dx155-3(사장님 2026-10-04 «리스트 디자인 정의가 나의 DOX 에 적용되어 있지 않다» → «그래») — 카드 목록 갈래(ui.listpage cards=True).
 *   틀은 같다: 높이 = 브라우저 세로(list.ts) · 세로 스크롤은 이 상자 안 · 발(페이징)은 스크롤 밖 바닥. 카드는 제 테두리가 있어 상자 테두리는 없다. */
.nx-list--cards .nx-list__body { border: 0; }
.nx-list__cards { overflow-x: hidden; overflow-y: auto; padding-right: 4px; }
.nx-list__under { flex: 0 0 auto; padding: 0 0 6px; }