/* =============================================================
   admin.css — 어드민 레이아웃 (admin/index.html)
   좌측 사이드바 + 상단바 + 콘텐츠 3분할 셸. 공개 사이트와 같은 --nk-* 토큰만
   쓰되, 여백은 좁은 쪽(space-4~20) 위주로 골라 정보 밀도를 높인다.
   색상·타이포는 전부 css/variables.css 의 --nk-* 토큰만 사용 — 새 hex 없음.
   ============================================================= */

html, body {
  height: 100%;
}
body {
  background: var(--nk-color-bg);
}

.adm-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* ----- 사이드바 (다크 톤 — 공개 사이트 푸터와 같은 --nk-color-footer-* 재사용) --- */
.adm-side {
  flex-shrink: 0;
  width: 232px;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
  padding: var(--nk-space-20) var(--nk-space-12);
  background: var(--nk-color-footer-bg);
}

.adm-side__brand {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
  padding: 0 var(--nk-space-8);
}
.adm-side__brand img {
  display: block;
  height: 32px;
  width: auto;
}

.adm-nav {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-20);
  overflow-y: auto;
}
.adm-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
}
.adm-nav__heading {
  margin: 0;
  padding: 0 var(--nk-space-8);
  font: var(--nk-text-p12-r);
  font-weight: var(--nk-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nk-color-footer-muted);
}
.adm-nav__link {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--nk-space-8);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p14-m);
  color: var(--nk-color-footer-link);
  text-decoration: none;
  white-space: nowrap;
}
.adm-nav__link:hover {
  background: var(--nk-color-footer-divider);
  color: var(--nk-color-white);
}
.adm-nav__link.is-active {
  background: var(--nk-color-primary);
  color: var(--nk-color-white);
  font-weight: var(--nk-font-weight-bold);
}

/* 하위 메뉴가 있는 상위 항목 (예: 리드·사업자 DB 원본) */
.adm-nav__sub {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
}
.adm-nav__sub-list {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  padding-left: var(--nk-space-16);
}
.adm-nav__sublink {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--nk-space-8);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-footer-muted);
  text-decoration: none;
  white-space: nowrap;
}
.adm-nav__sublink:hover {
  background: var(--nk-color-footer-divider);
  color: var(--nk-color-white);
}
.adm-nav__sublink.is-active {
  color: var(--nk-color-white);
  font-weight: var(--nk-font-weight-bold);
}

/* ----- 메인 컬럼 (상단바 + 콘텐츠) --------------------------- */
.adm-main {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.adm-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nk-space-16);
  height: 52px;
  padding: 0 var(--nk-space-20);
  background: var(--nk-color-white);
  border-bottom: 1px solid var(--nk-color-gray-line);
}

.adm-admin {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}
.adm-admin__avatar {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nk-color-cyan-bg);
  font: var(--nk-text-p13-r);
  font-weight: var(--nk-font-weight-bold);
  color: var(--nk-color-black);
}
.adm-admin__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.adm-admin__name {
  font: var(--nk-text-p14-m);
  color: var(--nk-color-black);
}
.adm-admin__role {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}

.adm-logout {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--nk-space-12);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-white);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  text-decoration: none;
  cursor: pointer;
}
.adm-logout:hover {
  border-color: var(--nk-color-gray-1);
  background: var(--nk-color-bg);
}

.adm-content {
  flex: 1 0 auto;
  padding: var(--nk-space-40);
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
}

/* 뉴/플러스 프로그램 탭 패널(js/admin-tabs.js) — .adm-content 의 flex+gap을
   패널 안쪽에도 그대로 적용한다. 이게 없으면 패널 안의 notice/toolbar/card가
   전부 gap 없이 붙어버린다. */
[data-program-panel] {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
}

.adm-page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nk-space-12);
  flex-wrap: wrap;
}
.adm-page-title {
  margin: 0;
}
.adm-page-meta {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
/* 화면 성격 한 줄 안내 (설치파일 이력 ↔ DB 다운로드 이력 구분).
   .adm-page-head 가 flex-wrap 이라 100% 로 잡아 제목 아래 줄로 내린다. */
.adm-page-desc {
  flex-basis: 100%;
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.adm-page-desc a {
  color: var(--nk-color-primary);
}
.adm-page-head__actions {
  display: flex;
  align-items: center;
  gap: var(--nk-space-12);
  flex-wrap: wrap;
}

/* ----- 대시보드: 핵심 지표 카드 ------------------------------ */
.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--nk-space-12);
}
.adm-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-6);
  padding: var(--nk-space-16);
  background: var(--nk-color-white);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-8);
}
/* 지표 카드는 <a>다 — 누르면 해당 관리 화면으로 간다(admin/index.html). */
a.adm-kpi {
  text-decoration: none;
}
a.adm-kpi:hover {
  border-color: var(--nk-color-primary);
}
.adm-kpi__caption[hidden] {
  display: none;
}
.adm-kpi__label {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.adm-kpi__value {
  font: var(--nk-text-p24-b);
  font-variant-numeric: tabular-nums;
  color: var(--nk-color-black);
}
.adm-kpi__value--accent {
  color: var(--nk-color-primary);
}
.adm-kpi__caption {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
.adm-kpi__notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.adm-kpi__notes p {
  margin: 0;
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}

/* ----- 대시보드: 최근 활동 2단 패널 --------------------------- */
.adm-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nk-space-12);
  align-items: start;
}
.adm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nk-space-12) var(--nk-space-16);
  border-bottom: 1px solid var(--nk-color-gray-line);
}
.adm-panel-head h2 {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}
.adm-panel-head a {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
  text-decoration: none;
}
.adm-panel-head a:hover {
  color: var(--nk-color-primary);
}

.adm-list {
  display: flex;
  flex-direction: column;
}
.adm-list-item {
  display: flex;
  align-items: center;
  gap: var(--nk-space-10);
  padding: var(--nk-space-10) var(--nk-space-16);
  border-bottom: 1px solid var(--nk-color-gray-line);
}
.adm-list-item:last-child {
  border-bottom: 0;
}
.adm-list-item__avatar {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nk-color-icon-bg);
  font: var(--nk-text-p12-r);
  font-weight: var(--nk-font-weight-bold);
  color: var(--nk-color-primary);
}
.adm-list-item__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-list-item__title {
  font: var(--nk-text-p13-r);
  font-weight: var(--nk-font-weight-bold);
  color: var(--nk-color-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-list-item__sub {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-list-item__meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
/* 상태 배지 옆에 "관리자 발급" 같은 배지가 하나 더 붙을 때 한 줄로 둔다. */
.adm-list-item__badges {
  display: flex;
  gap: var(--nk-space-4);
}
.adm-list-item__time {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
  white-space: nowrap;
}

/* ----- 목록 페이지 공통: 섹션 / 툴바(검색·필터·액션) ---------- */
.adm-section {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
}
.adm-section-title {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
}

.adm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-12);
  flex-wrap: wrap;
}
.adm-toolbar__filters {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
  flex-wrap: wrap;
}
.adm-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}

.adm-select {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  padding: 0 26px 0 var(--nk-space-10);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-white) url("../assets/icon-chevron-down.svg") no-repeat right 8px center;
  background-size: 10px 6px;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  cursor: pointer;
}

.adm-search {
  display: flex;
  align-items: center;
  gap: var(--nk-space-6);
  width: 240px;
  max-width: 100%;
  height: 32px;
  padding: 0 var(--nk-space-10);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-white);
}
.adm-search svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--nk-color-gray-1);
}
.adm-search input {
  flex: 1 0 0;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
.adm-search input::placeholder {
  color: var(--nk-color-gray-1);
}

/* ----- 버튼 (툴바/모달용 — .adm-table__action 보다 한 단계 큼) --- */
.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--nk-space-16);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-white);
  font: var(--nk-text-p13-r);
  font-weight: var(--nk-font-weight-bold);
  color: var(--nk-color-black);
  text-decoration: none;
  cursor: pointer;
}
.adm-btn:hover {
  border-color: var(--nk-color-gray-1);
  background: var(--nk-color-bg);
}
.adm-btn--primary {
  background: var(--nk-color-primary);
  border-color: var(--nk-color-primary);
  color: var(--nk-color-white);
}
.adm-btn--primary:hover {
  background: var(--nk-color-primary-hover);
  border-color: var(--nk-color-primary-hover);
}
/* display:inline-flex 가 브라우저 기본 [hidden]{display:none} 을 가린다 — components.css 의
   .nk-btn[hidden] 과 같은 이유로 다시 꺼 준다. 이게 없으면 구독 상세에서 [구독 해지]와
   [해지 취소]가 동시에 보인다(상태에 따라 하나만 보여야 한다). */
.adm-btn[hidden] {
  display: none !important;
}
/* 되돌릴 수 없는 동작(즉시 이용 중지) 전용. 환불처럼 흔히 쓰는 것에는 쓰지 않는다. */
.adm-btn--danger {
  background: var(--nk-color-red-1);
  border-color: var(--nk-color-red-1);
  color: var(--nk-color-white);
}
.adm-btn--danger:hover {
  filter: brightness(0.94);
}
.adm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----- 탭 (승인 큐 등 상태 필터) ------------------------------ */
.adm-tabs {
  display: flex;
  gap: var(--nk-space-6);
}
.adm-tab {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--nk-space-16);
  border: 0;
  border-radius: var(--nk-radius-pill);
  background: var(--nk-color-blue-line);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  cursor: pointer;
}
.adm-tab.is-active {
  background: var(--nk-color-primary);
  color: var(--nk-color-white);
  font-weight: var(--nk-font-weight-bold);
}

/* ----- 표 하단: 건수 + 페이지네이션 --------------------------- */
.adm-table-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nk-space-12);
  padding: var(--nk-space-12) var(--nk-space-16);
  border-top: 1px solid var(--nk-color-gray-line);
  flex-wrap: wrap;
}
.adm-table-foot__count {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
/* 페이지네이션은 건수 텍스트 길이와 무관하게 표 하단 정중앙에 오도록 절대배치 */
.adm-table-foot .nk-pager {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ----- 상세 모달 (components.css .nk-modal 재사용 + 폭/정렬만 조정) --- */
/* 내용이 길어져도 모달 자체가 화면 밖으로 잘리지 않도록 뷰포트 90%
   높이로 제한한다. sticky top/bottom은 같은 스크롤 컨테이너 안에서
   헤더·푸터가 "고정되기 전" 구간에 스크롤되는 내용과 시각적으로
   겹치는 문제가 있어(제목이 아래 필드와 겹쳐 보임), 대신 헤더/본문
   스크롤 영역/푸터를 아예 별도 박스로 분리한다 — 헤더·푸터는 스크롤
   영역 밖에 있어서 애초에 겹칠 대상이 없다.
   (요금제 표 내부 스크롤은 .adm-table-wrap--scroll이 별도로 담당)

   ⚠️ .adm-modal .nk-modal__dialog는 padding을 0으로 비우고 그 여백을
   .adm-modal-head / .adm-modal-scroll / .adm-modal-foot 세 박스에
   나눠서 준다. 즉 `class="nk-modal adm-modal"` 모달을 새로 만들 때
   버튼(닫기)+제목은 반드시 .adm-modal-head로, 본문은 반드시
   .adm-modal-scroll로, 하단 버튼 행은 .adm-modal-foot으로 감싸야
   한다 — 이 세 래퍼 없이 내용을 .nk-modal__dialog에 바로 넣으면
   padding이 전부 0이 되어 내용이 모달 테두리에 바로 붙어버린다.
   (admin/programs.html이 올바른 예시.) */
.adm-modal .nk-modal__dialog {
  width: 520px;
  align-items: stretch;
  gap: 0;
  padding: 0;
  max-height: 90vh;
  overflow: hidden;
}
.adm-modal-head {
  flex-shrink: 0;
  padding: var(--nk-space-24) var(--nk-space-24) var(--nk-space-16);
}
.adm-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  padding: 0 var(--nk-space-24) var(--nk-space-16);
}
.adm-modal .nk-modal__title {
  text-align: left;
  font: var(--nk-text-p18-b);
}
.adm-kv-list {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.adm-kv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nk-space-16);
  font: var(--nk-text-p13-r);
}
/* ⚠️ display:flex 는 브라우저 기본 [hidden]{display:none} 보다 우선한다 — 복구해 준다
   (.adm-field[hidden] 과 같은 이유). 구독·주문 상세는 "결제 실패"·"이용 종료일"·
   "해지 신청일"·"해지 사유" 줄을 data-row 로 숨기는데, 이게 없으면 해당 없는 건에서도
   라벨만 남은 빈 줄이 보인다. */
.adm-kv[hidden] {
  display: none !important;
}
.adm-kv__label {
  flex-shrink: 0;
  color: var(--nk-color-gray-2);
}
.adm-kv__value {
  text-align: right;
  color: var(--nk-color-black);
}
.adm-notice {
  padding: var(--nk-space-10) var(--nk-space-12);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p13-r);
  line-height: 1.5;
}
.adm-notice--block {
  background: var(--nk-color-gray-input-bg);
  border: 1px solid var(--nk-color-gray-line);
  color: var(--nk-color-black);
}
.adm-notice--ok,
.adm-notice--info {
  background: var(--nk-color-blue-bg);
  border: 1px solid var(--nk-color-blue-line);
  color: var(--nk-color-primary);
}
.adm-notice--danger {
  background: var(--nk-color-red-bg);
  border: 1px solid var(--nk-color-red-line);
  color: var(--nk-color-red-1);
}
.adm-notice--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--nk-space-12);
}
.adm-notice a {
  color: inherit;
  text-decoration: underline;
}
.adm-notice strong {
  font-weight: var(--nk-font-weight-bold);
}

/* ----- 표 셀 안 2줄 표기 (날짜 + 보조 캡션) -------------------- */
.adm-table__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-table__stack-sub {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}

.adm-modal-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--nk-space-8);
  padding: var(--nk-space-16) var(--nk-space-24) var(--nk-space-24);
}
.adm-field {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-6);
  width: 100%;
}
.adm-field[hidden] {
  display: none;
}
.adm-field label {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
.adm-field .adm-select,
.adm-field input {
  width: 100%;
}
.adm-field input {
  height: 32px;
  padding: 0 var(--nk-space-10);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  background: var(--nk-color-white);
}

/* 라디오 선택지 한 줄 (결제 요청 발급의 「첫 결제 방식」).
   .adm-field input 의 width:100%·height:32px 가 라디오에도 걸리므로 여기서 되돌린다. */
.adm-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--nk-space-8);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  cursor: pointer;
}
.adm-choice input[type="radio"] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 2px 0 0;
  padding: 0;
}
.adm-choice__sub {
  display: block;
  margin-top: var(--nk-space-4);
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}

/* 입력창 + 바로 옆 버튼 한 줄 (회원 아이디 조회 등) */
.adm-field__row {
  display: flex;
  gap: var(--nk-space-8);
}
.adm-field__row .adm-btn {
  flex-shrink: 0;
}

/* ----- 설정 카드 (표가 아닌 폼 콘텐츠를 담는 .adm-card 안쪽 여백) ------ */
.adm-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  padding: var(--nk-space-16);
}
.adm-form-row {
  display: flex;
  gap: var(--nk-space-12);
  flex-wrap: wrap;
}
.adm-form-row .adm-field {
  flex: 1 1 160px;
}
.adm-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--nk-space-8);
}
.adm-form-actions--split {
  justify-content: space-between;
}
.adm-field__hint {
  margin: 0;
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
.adm-text-muted {
  color: var(--nk-color-gray-2);
}
.adm-text-danger {
  color: var(--nk-color-red-1);
}
.adm-text-primary {
  color: var(--nk-color-primary);
}
.adm-strike {
  text-decoration: line-through;
}
.adm-empty-panel {
  align-items: center;
  text-align: center;
  padding: var(--nk-space-48) var(--nk-space-16);
}
.adm-daterange {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}
.adm-daterange input {
  height: 32px;
  padding: 0 var(--nk-space-10);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  background: var(--nk-color-white);
}
/* ----- 사유 통계 막대 (회원 탈퇴 관리) ------------------------ */
.adm-stat-bars {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-12);
}
.adm-stat-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-stat-bar__head {
  display: flex;
  justify-content: space-between;
  gap: var(--nk-space-8);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
.adm-stat-bar__track {
  width: 100%;
  height: 8px;
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-bg);
  overflow: hidden;
}
.adm-stat-bar__fill {
  height: 100%;
  background: var(--nk-color-primary);
  border-radius: var(--nk-radius-4);
}

/* ----- 보관기간 스케줄 행 (라벨 + 인라인 편집) ----------------- */
.adm-sched-row {
  display: flex;
  align-items: center;
  gap: var(--nk-space-12);
  width: 100%;
}
.adm-sched-row__label {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
.adm-sched-row__value {
  flex-shrink: 0;
  width: 110px;
  height: 32px;
  padding: 0 var(--nk-space-10);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
.adm-sched-row .adm-select {
  flex-shrink: 0;
  width: 100px;
}

.adm-thumb {
  display: block;
  width: 48px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--nk-radius-4);
  border: 1px solid var(--nk-color-gray-line);
  background: var(--nk-color-bg);
}

/* ----- 프로그램 상세 모달: 썸네일 업로드(파일 선택 + 업로드 버튼 + 미리보기) --- */
.adm-thumb-preview {
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: var(--nk-space-8);
  object-fit: cover;
  border-radius: var(--nk-radius-4);
  border: 1px solid var(--nk-color-gray-line);
  background: var(--nk-color-bg);
}
.adm-thumb-upload-row {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
}
.adm-thumb-upload-row input[type="file"] {
  flex: 1 0 0;
  min-width: 0;
}

/* ----- 카드 / 표 (여백 좁힘: 공개 사이트 .nk-my-card/.nk-my-table 대비 밀도↑) --- */
.adm-card {
  width: 100%;
  background: var(--nk-color-white);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-8);
  overflow: hidden;
}

.adm-table-wrap {
  width: 100%;
  overflow-x: auto;
}
/* 행이 많아져도 모달/카드 높이가 무한정 늘어나지 않도록 세로 스크롤 + 헤더 고정
   (프로그램 상세 모달의 요금제 표처럼 행 개수가 가변적인 곳에서 사용) */
.adm-table-wrap--scroll {
  max-height: 320px;
  overflow-y: auto;
}
.adm-table-wrap--scroll .adm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.adm-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.adm-table--wide {
  min-width: 980px;
}
.adm-table th {
  height: 36px;
  padding: 0 var(--nk-space-12);
  background: var(--nk-color-bg);
  border-bottom: 1px solid var(--nk-color-gray-line);
  font: var(--nk-text-p12-r);
  font-weight: var(--nk-font-weight-bold);
  letter-spacing: 0.02em;
  color: var(--nk-color-gray-2);
  text-align: left;
  white-space: nowrap;
}
.adm-table td {
  height: 40px;
  padding: 0 var(--nk-space-12);
  border-bottom: 1px solid var(--nk-color-gray-line);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  white-space: nowrap;
}
.adm-table tbody tr:last-child td {
  border-bottom: 0;
}
.adm-table tbody tr:hover td {
  background: var(--nk-color-bg);
}
.adm-table tbody tr.adm-table__row--clickable {
  cursor: pointer;
}
.adm-table td.adm-table__cell--muted {
  color: var(--nk-color-gray-2);
}
.adm-table td.adm-table__cell--truncate {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-table__col--desc,
.adm-table td.adm-table__cell--desc {
  width: 300px;
  max-width: 300px;
}
.adm-table td.adm-table__cell--desc {
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-table td.adm-table__empty {
  padding: var(--nk-space-24);
  text-align: center;
  color: var(--nk-color-gray-2);
}
.adm-table td.adm-table__cell--wrap {
  white-space: normal;
}
.adm-table tr.adm-table__row--danger td {
  background: var(--nk-color-red-bg);
}
.adm-table tr.adm-table__row--danger:hover td {
  background: var(--nk-color-red-bg);
}
.adm-table__note {
  display: block;
  margin-top: 2px;
  font: var(--nk-text-p12-r);
  color: var(--nk-color-red-1);
}

/* ----- 체크박스 한 줄 (리드 보호 사용 켜기/끄기) -------------------- */
.adm-check {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  cursor: pointer;
}
.adm-check input:disabled + span {
  color: var(--nk-color-gray-2);
}

/* ----- 다운로드 이력: 오늘 사용량 / 일일 한도 ----------------------- */
.adm-dbdl-usage {
  font-variant-numeric: tabular-nums;
}
/* 한도의 80% 이상 주황, 100% 이상 빨강 (한도가 없으면 강조하지 않는다) */
.adm-dbdl-usage--warn {
  color: var(--nk-orange);
  font-weight: var(--nk-font-weight-bold);
}
.adm-dbdl-usage--over {
  color: var(--nk-color-red-1);
  font-weight: var(--nk-font-weight-bold);
}

/* ----- 다운로드 이력 관리: 회원+프로그램 묶음 행 펼치기 ------------- */
.adm-dl-count--warn {
  color: var(--nk-orange);
  font-weight: var(--nk-font-weight-bold);
}
.adm-dl-caret {
  display: inline-block;
  color: var(--nk-color-gray-2);
  transition: transform 0.15s ease;
}
.adm-table__row--clickable.is-open .adm-dl-caret {
  transform: rotate(180deg);
}
.adm-dl-detail > td {
  padding: var(--nk-space-12);
  background: var(--nk-color-bg);
  white-space: normal;
  height: auto;
}
.adm-dl-subtable {
  width: 100%;
  border-collapse: collapse;
}
.adm-dl-subtable th,
.adm-dl-subtable td {
  padding: var(--nk-space-4) var(--nk-space-8);
  border-bottom: 1px solid var(--nk-color-gray-line);
  font: var(--nk-text-p12-r);
  text-align: left;
  white-space: nowrap;
}
.adm-dl-subtable th {
  color: var(--nk-color-gray-2);
  font-weight: var(--nk-font-weight-bold);
}
.adm-dl-subtable tbody tr:last-child th,
.adm-dl-subtable tbody tr:last-child td {
  border-bottom: 0;
}
/* 펼침 안쪽: 불러오는 중 / 오류 문구 + 총 건수 + 작은 페이저 */
.adm-dl-detail__msg {
  margin: 0;
  padding: var(--nk-space-8) 0;
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
.adm-dl-detail__msg--error {
  color: var(--nk-color-red-1);
}
.adm-dl-detail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-8);
  margin-top: var(--nk-space-8);
  flex-wrap: wrap;
}
.adm-dl-detail__count {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
.adm-dl-minipager {
  display: flex;
  gap: 2px;
}
.adm-dl-minipager__btn {
  min-width: 22px;
  height: 22px;
  padding: 0 var(--nk-space-4);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-white);
  font: var(--nk-text-p12-r);
  color: var(--nk-color-black);
  cursor: pointer;
}
.adm-dl-minipager__btn:hover:not(:disabled) {
  border-color: var(--nk-color-gray-1);
  background: var(--nk-color-bg);
}
.adm-dl-minipager__btn.is-active {
  border-color: var(--nk-color-primary);
  background: var(--nk-color-primary);
  color: var(--nk-color-white);
}
.adm-dl-minipager__btn:disabled {
  color: var(--nk-color-gray-2);
  cursor: default;
}

.adm-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--nk-space-8);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p12-r);
  font-weight: var(--nk-font-weight-bold);
  background: var(--nk-color-bg);
  color: var(--nk-color-gray-2);
  border: 1px solid var(--nk-color-gray-line);
}
.adm-badge--active {
  background: var(--nk-color-blue-bg);
  color: var(--nk-color-primary);
  border-color: var(--nk-color-blue-line);
}
.adm-badge--danger {
  background: var(--nk-color-red-bg);
  color: var(--nk-color-red-1);
  border-color: var(--nk-color-red-line);
}
/* 정상·이용중·결제 완료처럼 "문제 없음"을 파란 강조(--active)와 구분해서 보여줄 때. */
.adm-badge--ok {
  background: var(--nk-color-green-bg);
  color: var(--nk-color-green-1);
  border-color: var(--nk-color-green-line);
}
/* 결제 대기·결제 실패 유예처럼 "아직 끝나지 않음 / 손이 필요함". */
.adm-badge--warn {
  background: var(--nk-orange-bg);
  color: var(--nk-orange);
  border-color: var(--nk-orange);
}

.adm-table__actions {
  display: flex;
  gap: var(--nk-space-4);
}
.adm-table__action {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--nk-space-8);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-white);
  font: var(--nk-text-p12-r);
  color: var(--nk-color-black);
  text-decoration: none;
  cursor: pointer;
}
.adm-table__action:hover {
  border-color: var(--nk-color-gray-1);
  background: var(--nk-color-bg);
}

/* ----- 리치 텍스트 에디터(Quill) 스킨 — policies.html 문서 수정 모달 --- */
.adm-quill-wrap {
  width: 100%;
}
.adm-quill-wrap .ql-toolbar.ql-snow {
  border-color: var(--nk-color-gray-line);
  border-top-left-radius: var(--nk-radius-4);
  border-top-right-radius: var(--nk-radius-4);
  background: var(--nk-color-bg);
  padding: var(--nk-space-8);
  font-family: var(--nk-font-family);
}
.adm-quill-wrap .ql-container.ql-snow {
  border-color: var(--nk-color-gray-line);
  border-bottom-left-radius: var(--nk-radius-4);
  border-bottom-right-radius: var(--nk-radius-4);
  font-family: var(--nk-font-family);
  font-size: 13px;
}
.adm-quill-wrap .ql-editor {
  min-height: 500px;
  color: var(--nk-color-black);
}
.adm-quill-wrap .ql-editor.ql-blank::before {
  color: var(--nk-color-gray-1);
  font-style: normal;
}
.adm-quill-wrap .ql-editor a {
  color: var(--nk-color-primary);
}
.adm-quill-wrap .ql-snow .ql-stroke {
  stroke: var(--nk-color-gray-2);
}
.adm-quill-wrap .ql-snow .ql-fill {
  fill: var(--nk-color-gray-2);
}
.adm-quill-wrap .ql-snow .ql-picker {
  color: var(--nk-color-black);
  font-family: var(--nk-font-family);
}
.adm-quill-wrap .ql-snow.ql-toolbar button:hover,
.adm-quill-wrap .ql-snow.ql-toolbar button.ql-active,
.adm-quill-wrap .ql-snow.ql-toolbar .ql-picker-label:hover,
.adm-quill-wrap .ql-snow.ql-toolbar .ql-picker-item:hover,
.adm-quill-wrap .ql-snow.ql-toolbar .ql-picker-label.ql-active {
  color: var(--nk-color-primary);
}
.adm-quill-wrap .ql-snow.ql-toolbar button:hover .ql-stroke,
.adm-quill-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.adm-quill-wrap .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.adm-quill-wrap .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: var(--nk-color-primary);
}
.adm-quill-wrap .ql-snow.ql-toolbar button:hover .ql-fill,
.adm-quill-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--nk-color-primary);
}
.adm-quill-wrap .ql-snow .ql-picker-options {
  background: var(--nk-color-white);
  border-color: var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
}
.adm-quill-wrap .ql-snow .ql-tooltip {
  background: var(--nk-color-white);
  border-color: var(--nk-color-gray-line);
  color: var(--nk-color-black);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
.adm-quill-wrap .ql-snow .ql-tooltip input[type="text"] {
  border-color: var(--nk-color-gray-line);
  font-family: var(--nk-font-family);
}

/* ----- 막대 그래프 (리드·사업자 DB 원본 / 수집 현황) ------------ */
.adm-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--nk-space-8);
  height: 160px;
  padding-bottom: var(--nk-space-8);
  border-bottom: 1px solid var(--nk-color-gray-line);
}
.adm-chart__col {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nk-space-6);
  height: 100%;
}
.adm-chart__bar {
  width: 100%;
  max-width: 56px;
  min-height: 3px;
  background: var(--nk-color-primary);
  border-radius: var(--nk-radius-4) var(--nk-radius-4) 0 0;
}
.adm-chart__value {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
  font-variant-numeric: tabular-nums;
}
.adm-chart__labels {
  display: flex;
  gap: var(--nk-space-8);
  margin-top: var(--nk-space-6);
}
.adm-chart__label {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}

/* ----- 설정 행 (라벨 | 입력 | 설명), 리드·사업자 DB 원본 / 운영 설정 --- */
.adm-setting-list {
  display: flex;
  flex-direction: column;
}
.adm-setting-row {
  display: flex;
  align-items: center;
  gap: var(--nk-space-16);
  padding: var(--nk-space-12) 0;
  border-bottom: 1px solid var(--nk-color-gray-line);
  flex-wrap: wrap;
}
.adm-setting-row:last-child {
  border-bottom: 0;
}
.adm-setting-row__label {
  width: 180px;
  flex-shrink: 0;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-black);
}
.adm-setting-row__control {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
  width: 220px;
  flex-shrink: 0;
}
.adm-setting-row__control input {
  width: 100%;
  height: 32px;
  padding: 0 var(--nk-space-10);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
  background: var(--nk-color-white);
}
.adm-setting-row__range {
  flex-shrink: 0;
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
  white-space: nowrap;
}
.adm-setting-row__desc {
  flex: 1 1 240px;
  min-width: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}

/* ============================================================
   반응형 : 768 / 375
   ============================================================ */
/* ----- 회원 상세 모달 (admin/members.html + js/admin-members.js) ----------
   기본 어드민 모달(520px)보다 넓은 760px 를 쓰고, 높이는 85vh 안에서
   .adm-modal-scroll 만 스크롤한다(헤더·푸터는 flex-shrink:0 으로 고정).
   모바일 전체 화면 처리는 아래 768px 블록에 있다. */
.adm-modal--wide .nk-modal__dialog {
  width: 760px;
  max-height: 85vh;
}
/* 헤더 2줄. 닫기 버튼(.nk-modal__close, 40px)이 오른쪽 위에 absolute 로
   얹히므로 1줄이 그 밑으로 들어가지 않게 오른쪽을 비워 둔다. */
.adm-mem-head {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-6);
  padding-right: var(--nk-space-60);
  border-bottom: 1px solid var(--nk-color-gray-line);
}
.adm-mem-head__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nk-space-8);
}
.adm-modal .adm-mem-head__name {
  width: auto;
  font: var(--nk-text-p18-b);
}
.adm-mem-head__userid {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.adm-mem-head__meta {
  margin: 0;
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
/* 관리자 배지 — 상태 배지와 구분되게 브랜드색 외곽선만. */
.adm-badge--admin {
  background: var(--nk-color-blue-bg-2);
  color: var(--nk-color-primary);
  border-color: var(--nk-color-primary);
}

/* 요약 카드 3개 — 누르면 해당 탭으로 이동한다. */
.adm-mem-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nk-space-8);
}
.adm-mem-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--nk-space-12);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-8);
  background: var(--nk-color-white);
  text-align: left;
  cursor: pointer;
}
.adm-mem-card:hover {
  background: var(--nk-color-blue-bg);
  border-color: var(--nk-color-blue-line);
}
.adm-mem-card__label {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
.adm-mem-card__value {
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
}
/* 구매 카드 둘째 줄(전체 주문 건수). 값이 없으면 비어 있어도 줄 높이만 차지한다. */
.adm-mem-card__sub {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}

/* 탭 패널 — display:flex 가 [hidden] 을 가리므로 같이 복구한다(.adm-kv 와 같은 이유). */
.adm-mem-panel {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-12);
}
.adm-mem-panel[hidden] {
  display: none !important;
}
.adm-mem-manage__actions {
  display: flex;
  justify-content: flex-end;
}
/* 금액 칸은 오른쪽 정렬(.adm-dl-subtable 의 기본 왼쪽 정렬을 덮는다). */
.adm-mem-panel .adm-dl-subtable .adm-mem-amount {
  text-align: right;
}
/* 끝난 구독은 접어 둔다(native <details> — JS 없이). */
.adm-mem-past {
  border-top: 1px solid var(--nk-color-gray-line);
  padding-top: var(--nk-space-12);
}
.adm-mem-past > summary {
  cursor: pointer;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.adm-mem-past > summary::marker {
  color: var(--nk-color-gray-1);
}
.adm-mem-past__body {
  padding-top: var(--nk-space-8);
}

/* ----- 판매원 교육 관리 (admin/sales-agent-training.html) ----------------
   영상 미리보기와 확인 문제 목록. 표·배지·버튼은 기존 어드민 클래스를 쓴다. */
.adm-tr-video {
  width: 100%;
  max-height: 60vh;
  background: var(--nk-color-black);
  border-radius: var(--nk-radius-8);
}
.adm-tr-q {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-6);
  padding: var(--nk-space-12) 0;
  border-bottom: 1px solid var(--nk-color-gray-line);
}
.adm-tr-q:last-child {
  border-bottom: 0;
}
.adm-tr-q__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nk-space-8);
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
/* 보기 목록 — 정답에는 ✓ 가 붙어 온다(어드민 화면에서만 정답을 본다). */
.adm-tr-q__choices {
  margin: 0;
  padding-left: var(--nk-space-20);
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
/* 업로드 진행률 — 기본 progress 모양이 OS 마다 달라 폭만 맞춘다. */
#adm-tr-progress {
  width: 100%;
  height: 10px;
}

@media (max-width: 768px) {
  .adm-shell {
    flex-direction: column;
  }
  .adm-side {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: var(--nk-space-16);
    padding: var(--nk-space-8) var(--nk-space-16);
  }
  .adm-nav {
    flex-direction: row;
    gap: var(--nk-space-8);
    overflow-x: auto;
  }
  .adm-nav__group {
    flex-direction: row;
    align-items: center;
    gap: var(--nk-space-4);
  }
  .adm-nav__heading {
    display: none;
  }
  .adm-content {
    padding: var(--nk-space-16);
  }
  .adm-panels {
    grid-template-columns: 1fr;
  }
  .adm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .adm-search {
    width: 100%;
  }
  .adm-toolbar__filters {
    width: 100%;
  }
  .adm-modal .nk-modal__dialog {
    width: 100%;
  }
  /* 회원 상세는 모바일에서 전체 화면 — 바깥 여백·둥근 모서리를 없앤다
     (.adm-modal--wide 가 .nk-modal 자신에 붙어 있어 padding 을 바로 끈다). */
  .adm-modal--wide {
    padding: 0;
  }
  .adm-modal--wide .nk-modal__dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .adm-setting-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nk-space-6);
  }
  .adm-setting-row__label,
  .adm-setting-row__control {
    width: 100%;
  }
  .adm-chart__label {
    font-size: 10px;
  }
}

@media (max-width: 375px) {
  .adm-topbar {
    padding: 0 var(--nk-space-12);
  }
  .adm-admin__meta {
    display: none;
  }
  .adm-content {
    padding: var(--nk-space-12);
  }
  .adm-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .adm-table-foot {
    flex-direction: column;
    align-items: center;
  }
  .adm-table-foot .nk-pager {
    position: static;
    transform: none;
  }
}

/* ----- 해지 사유 집계 (admin/billing.html) -----------------------
   사유는 복수 선택이라 건수의 합이 해지 건수보다 클 수 있다 — 그래서 비율이
   아니라 건수만 보여주고, 분모(사유 남김/미입력)는 위 한 줄에 적는다. */
/* 해지 건이 없으면 숨긴다 — display:flex 가 [hidden] 을 가리므로 같이 복구한다. */
.adm-cancel-stats[hidden] {
  display: none !important;
}
.adm-cancel-stats {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  padding: var(--nk-space-16) var(--nk-space-20);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-white);
}
.adm-cancel-stats__title {
  margin: 0;
}
.adm-cancel-stats__sum {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.adm-cancel-stats__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nk-space-8) var(--nk-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.adm-cancel-stats__list li {
  font: var(--nk-text-p14-r);
  color: var(--nk-color-black);
}
.adm-cancel-stats__list b {
  margin-left: var(--nk-space-4);
}
/* 직접 입력한 해지 사유는 줄바꿈을 살려서 보여준다. */
.adm-kv__value--pre {
  white-space: pre-line;
}

/* ----- 회차별 결제 내역 표 (js/admin-payments.js · 주문 상세 + 구독 상세 공용) ---
   한 주문에 1회차 + 월 갱신 회차가 쌓인다. 맨 위 요약(첫 결제 / 정기결제 / 합계)은
   **성공한 결제만** 세고, 실패·환불 회차는 표에 남되 금액을 흐리게 둔다. */
.adm-pay {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-10);
}
.adm-pay__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nk-space-6) var(--nk-space-16);
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
.adm-pay__summary b {
  margin-left: var(--nk-space-4);
  color: var(--nk-color-black);
}
/* 환불·실패는 합계에 들어가지 않는 금액이다 — 같은 굵기로 두면 더해지는 값으로 읽힌다. */
.adm-pay__summary--void,
.adm-pay__summary--void b {
  color: var(--nk-color-red-1);
}
/* 칸이 6개라 좁은 화면에서는 표만 가로로 민다(모달 전체가 밀리지 않게). */
.adm-pay__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.adm-pay__table {
  width: 100%;
  font: var(--nk-text-p13-r);
}
.adm-pay__table th,
.adm-pay__table td {
  white-space: nowrap;
  vertical-align: top;
}
/* 마지막 칸(결제번호/거래번호)만 줄바꿈을 허용한다 — nowrap 으로 두면 번호가 길어
   표가 모달 밖으로 밀려 잘려 보인다. 두 번호는 원래 두 줄로 쌓아 보여준다. */
.adm-pay__table th:last-child,
.adm-pay__table td:last-child {
  white-space: normal;
  word-break: break-all;
}
.adm-pay__tag {
  display: inline-block;
  padding: 0 var(--nk-space-6);
  border-radius: var(--nk-radius-4);
  background: var(--nk-color-gray-input-bg);
  font: var(--nk-text-p12-r);
  color: var(--nk-color-gray-2);
}
/* 성공하지 않은 회차 — 요약 합계에 들어가지 않는다는 것이 보여야 한다. */
.adm-pay__row--void b {
  color: var(--nk-color-gray-2);
  text-decoration: line-through;
}
/* 접은 정기결제 회차. tr 에 display 를 주는 규칙이 생겨도 숨김이 풀리지 않게 못을 박는다
   (이 저장소에서 [hidden] 이 display 에 가려지는 일을 여러 번 겪었다). */
.adm-pay__row[hidden] {
  display: none !important;
}
/* 결제번호·거래번호 — 눌러서 복사한다. 값 자체가 글자라 버튼 티를 내지 않고
   점선 밑줄만 둔다(복사되면 잠깐 "복사됨" 으로 바뀐다). */
.adm-pay__copy {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.adm-pay__copy:hover {
  color: var(--nk-color-primary);
}
.adm-pay__copy.is-copied {
  color: var(--nk-color-primary);
  text-decoration: none;
  font-weight: var(--nk-font-weight-bold);
}
.adm-pay__toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-primary);
  cursor: pointer;
}
.adm-pay__empty {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-gray-2);
}
/* 결제 내역 표(6칸)가 들어가는 두 상세 모달만 넓힌다. 기본 520px 로는 칸이 눌리고,
   720px 에서도 마지막 "결제번호/거래번호" 가 잘렸다. max-width:100% 는 그대로라
   좁은 화면에서는 줄어들고 표만 가로로 밀린다(.adm-pay__wrap). */
#adm-order-detail-modal .nk-modal__dialog,
#adm-billing-detail-modal .nk-modal__dialog {
  width: 820px;
}

/* 보기 전환 패널 — display 를 주지 않아 [hidden] 이 그대로 먹지만, 나중에 누가
   display 를 붙여도 깨지지 않게 못을 박아 둔다(이 저장소에서 두 번 겪은 함정이다). */
[data-program-panel][hidden] {
  display: none !important;
}

/* ----- 어드민 로그인 (admin/login.html) ----------------------
   사이드바·상단바가 없는 단독 화면이라 .adm-shell 을 쓰지 않는다.
   입력칸·버튼은 어드민 공용(.adm-field / .adm-btn)을 그대로 재사용한다. */
.adm-login-page {
  background: var(--nk-color-footer-bg);   /* 사이드바와 같은 다크 톤 */
}
.adm-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--nk-space-24) var(--nk-space-16);
}
.adm-login__card {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);
  width: 100%;
  max-width: 360px;
  padding: var(--nk-space-32) var(--nk-space-24);
  background: var(--nk-color-white);
  border-radius: var(--nk-radius-8);
}
.adm-login__logo {
  display: block;
  height: 32px;
  width: auto;
  align-self: flex-start;
}
.adm-login__title {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
}
/* 입력칸은 어드민 기본(32px)보다 조금 키운다 — 이 화면은 밀도보다 조작감 */
.adm-login__card .adm-field input {
  height: 40px;
}
.adm-login__error {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-red-1);
}
.adm-login__submit {
  height: 40px;
  font: var(--nk-text-p15-b);
}