/* =====================================================
   UTOPSOFT 관리자 포털 — 공통 스타일 v6
   Inter UI + JetBrains Mono · 라이트(뉴트럴 그레이) / 다크(슬레이트·네이비) · 블루 액센트
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------------------
   Design tokens (CSS custom properties)
   - 색·간격·모서리·그림자·트랜지션을 한 곳에서 관리
   --------------------------------------------------------------------------- */
:root {
  /* Typography — Inter: US SaaS / dev-tool 표준 가독성 */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Malgun Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  color-scheme: light;

  /* 라이트 — 뉴트럴 그레이 베이스(#f5f5f5) + 블루 액센트 */
  --color-text: #1f2328;
  --color-text-secondary: #656d76;
  --color-text-muted: #6e7781;
  --color-text-muted-light: #8c959f;
  --color-heading: #1f2937;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-border-focus: #64748b;
  /* 체크·라디오 등 — 파란 accent 방지 */
  --color-ui-accent: #64748b;
  --color-bg: #f8f9fa;
  --color-bg-subtle: #f1f3f5;
  --color-bg-card: #ffffff;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-darker: #1e40af;
  --color-primary-light: #60a5fa;
  --color-indigo-soft: rgba(100, 116, 139, 0.18);
  --color-indigo-shadow: rgba(100, 116, 139, 0.32);
  --color-success: #1a7f37;
  --color-success-bg: #dafbe1;
  --color-success-border: #4ac26b;
  --color-danger: #cf222e;
  --color-danger-bg: #ffebe9;
  --color-danger-border: #ff8182;
  --color-warning: #9a6700;
  --color-warning-bg: #fff8c5;
  --color-warning-border: #d4a72c;
  --color-info: #0969da;
  --color-info-bg: #ddf4ff;
  --color-purple: #8250df;
  --color-purple-bg: #fbefff;
  --color-indigo-pale: #eef2ff;

  /* 그리드 배지 — 연한 면 + 옅은 테두리(고채도 라인 완화) */
  --badge-success-bg: #ecfdf5;
  --badge-success-fg: #166534;
  --badge-success-border: #a7f3d0;
  --badge-danger-bg: #fef2f2;
  --badge-danger-fg: #991b1b;
  --badge-danger-border: #fecaca;
  --badge-warning-bg: #fffbeb;
  --badge-warning-fg: #92400e;
  --badge-warning-border: #fde68a;
  --badge-info-bg: #f0f9ff;
  --badge-info-fg: #1d4ed8;
  --badge-info-border: #bae6fd;
  --badge-purple-bg: #faf5ff;
  --badge-purple-fg: #6b21a8;
  --badge-purple-border: #e9d5ff;
  --badge-neutral-bg: #f1f5f9;
  --badge-neutral-fg: #475569;
  --badge-neutral-border: #e2e8f0;
  --color-white: #ffffff;
  --color-input-border: #e2e8f0;
  --color-input-border-hover: #8c959f;
  --color-input-text: #1f2328;
  --color-body: #24292f;
  --color-border-hover: #cbd5e1;
  --color-bg-row-hover: #f1f5f9;
  --color-bg-muted: #f1f3f5;
  --color-table-header-bg: #475569;
  --color-table-header-bg-hover: #334155;
  --color-table-header-text: #f8fafc;
  --color-table-row-odd: #fafafa;
  --color-table-row-even: #f1f5f9;
  --color-panel-bg: #f1f3f5;
  --color-panel-border: #e2e8f0;
  --color-grid-border: #e2e8f0;
  --color-topbar-bg: rgba(248, 249, 250, 0.92);
  --color-topbar-border: #e2e8f0;
  --color-modal-footer-bg: #f1f3f5;
  --color-required: #cf222e;
  --color-link: #0969da;
  --color-link-hover: #0550ae;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-shadow: rgba(207, 34, 46, 0.22);
  --color-blue-shadow: rgba(100, 116, 139, 0.28);
  --color-blue-shadow-hover: rgba(100, 116, 139, 0.38);
  --color-403: #8250df;
  --color-404: #d4a72c;
  --color-500: #cf222e;
  --color-overlay-scrim: rgba(1, 4, 9, 0.55);
  --shadow-modal: 0 24px 80px rgba(1, 4, 9, 0.12), 0 12px 40px rgba(1, 4, 9, 0.06);
  --shadow-error-box: 0 4px 24px rgba(1, 4, 9, 0.06);
  --color-header-bg: rgba(248, 249, 250, 0.88);
  --color-toast-info-bg: #0f172a;
  --color-toast-info-fg: #f8fafc;
  --color-toast-success-bg: #1a7f37;
  --color-toast-error-bg: #cf222e;
  --color-toast-warn-bg: #9a6700;

  /* 레거시 호환 — 사이드바 토큰(실제 그리기는 --sidebar-* ) */
  --color-sidebar-bg: #f3f4f6;
  --color-sidebar-text: #656d76;
  --color-sidebar-text-hover: #24292f;
  --color-sidebar-divider: #e2e8f0;
  --color-sidebar-divider-strong: #cbd5e1;
  --color-sidebar-overlay: rgba(175, 184, 193, 0.2);
  --color-sidebar-accent: #24292f;
  --color-sidebar-accent-hover: #1f2937;
  --color-sidebar-accent-bg: #e9ecef;
  --color-sidebar-overlay-light: rgba(208, 215, 222, 0.4);
  --color-nav-sub-active: linear-gradient(90deg, #e9ecef 0%, #f1f3f5 100%);

  /* 사이드바 전용 (라이트: 밝은 패널 + 선명한 보더) */
  --sidebar-bg: #f3f4f6;
  --sidebar-border: #e2e8f0;
  --sidebar-brand-bg: #ffffff;
  --sidebar-brand-border: #e2e8f0;
  --sidebar-fg: #24292f;
  --sidebar-fg-muted: #656d76;
  --sidebar-section-label: #6e7781;
  --sidebar-hover-bg: #e9ecef;
  --sidebar-hover-border: #e2e8f0;
  --sidebar-active-bg: #e5e7eb;
  --sidebar-active-fg: #1f2937;
  --sidebar-active-bar: #64748b;
  --sidebar-icon-bg: #ffffff;
  --sidebar-icon-border: #e2e8f0;
  --sidebar-icon-bg-hover: #f1f5f9;
  --sidebar-sub-bg: #ffffff;
  --sidebar-sub-border: #e2e8f0;
  --sidebar-sub-inset: rgba(226, 232, 240, 0.65);
  --sidebar-dot: rgba(36, 41, 47, 0.22);
  --sidebar-dot-hover: rgba(100, 116, 139, 0.5);
  --sidebar-dot-active: #475569;
  --sidebar-sub-active-fg: #374151;
  --sidebar-shadow: 1px 0 0 var(--sidebar-border);

  /* Swagger / API 문서 메뉴 (브랜드 톤으로 구분) */
  --swagger-menu-bg: #e8f6f0;
  --swagger-menu-border: #49cc90;
  --swagger-menu-fg: #0d3d2c;
  --swagger-menu-hover-bg: #d8f0e6;
  --swagger-menu-hover-border: #3dc29a;
  --swagger-icon-bg: #85ea2d;
  --swagger-icon-fg: #173409;
  --swagger-icon-border: #5cbf4a;
  --swagger-external-badge: #1e8a62;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --sidebar-width: 260px;
  /* 본문 가로 패딩(헤더와 동일 값으로 정렬) — max-width 캡 없이 메인 영역 전폭 사용 */
  --layout-content-pad-x: clamp(12px, 2.2vw, 28px);

  /* 콘텐츠 상세 트리 */
  --lesson-tree-shell-border: #e2e8f0;
  --lesson-tree-shell-bg: #f8f9fa;
  --lesson-tree-row-border: #e2e8f0;
  --lesson-tree-row-bg: #ffffff;
  --lesson-tree-row-hover: #f1f5f9;
  --lesson-tree-row-selected: #f1f5f9;
  --lesson-tree-label: #1f2328;
  --lesson-tree-label-selected: #334155;
  --lesson-tree-chevron: #6e7781;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  --shadow-sm: 0 1px 0 rgba(208, 215, 222, 0.6), 0 1px 3px rgba(1, 4, 9, 0.06);
  --shadow-md: 0 4px 12px rgba(1, 4, 9, 0.08);
  --shadow-lg: 0 12px 48px rgba(1, 4, 9, 0.1);
  --shadow-card: 0 1px 0 rgba(208, 215, 222, 0.8), 0 1px 3px rgba(1, 4, 9, 0.04);
  --shadow-focus: 0 0 0 2px var(--color-bg-card), 0 0 0 4px rgba(100, 116, 139, 0.22);

  --duration-fast: 0.12s;
  --duration-normal: 0.18s;
  --duration-slow: 0.26s;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* DataTables 기본 선택색(파랑) 덮어쓰기 — jquery.dataTables.min.css 와 동일 변수명 */
  --dt-row-selected: 100, 116, 139;
  --dt-row-selected-text: 248, 250, 252;
  --dt-row-selected-link: 248, 250, 252;

  /* ai-roleplay.css 등 — 다크에서 네이비 고정색 대체 */
  --ai-mockup-frame: #111827;
}

*, *::before, *::after { box-sizing: border-box; }

/* 브라우저 기본 파란 포커스 링 제거 — 키보드는 중립색만 */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* 버튼류: 파란 링 대신 중립 그림자만 */
button:focus-visible,
.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =====================================================
   레이아웃
   ===================================================== */

.layout-wrapper {
  display: flex;
  min-height: 100vh;
}

.layout-main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-width);
  transition: margin-left var(--duration-slow) var(--ease-out);
  background: var(--color-bg-card);
}
.layout-main.collapsed { margin-left: 0; }
html.sidebar-collapsed .layout-main { margin-left: 0; }
html.sidebar-no-transition .sidebar,
html.sidebar-no-transition .layout-main { transition: none !important; }
html.sidebar-preload .sidebar,
html.sidebar-preload .layout-main {
  visibility: hidden;
}

/* =====================================================
   사이드바
   ===================================================== */

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 200;
  transform: translateX(0);
  transition: transform var(--duration-slow) var(--ease-out);
  flex-shrink: 0;
  border-right: 1px solid var(--sidebar-border);
}
.sidebar.collapsed,
html.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); }

.sidebar::-webkit-scrollbar {
  display: none; /* WebKit: 스크롤바 숨김 */
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4) 0 var(--space-5);
  min-height: 60px;
  background: var(--sidebar-brand-bg);
  border-bottom: 1px solid var(--sidebar-brand-border);
  flex-shrink: 0;
}
.brand-mark-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.brand-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: var(--font-bold); color: var(--color-white);
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--color-indigo-shadow);
}
.brand-logo {
  width: 26px; height: 26px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.brand-name {
  font-size: 19px;
  font-weight: var(--font-bold);
  color: var(--sidebar-fg);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* 내비 영역 */
.sidebar-nav {
  flex: 1; overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0 16px;
  display: flex; flex-direction: column;
}
.sidebar-nav::-webkit-scrollbar {
  display: none;
}
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; flex: 1;
}

.nav-section {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-section-label {
  display: block;
  padding: 16px var(--space-5) 6px;
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-section-label);
}
.nav-section:first-child .nav-section-label {
  padding-top: 12px;
}
.nav-section--tools {
  margin-top: auto;
  border-top: 1px solid var(--sidebar-border);
  padding-top: var(--space-2);
}

.nav-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--sidebar-icon-bg);
  border: 1px solid var(--sidebar-icon-border);
  color: var(--sidebar-fg-muted);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}
.nav-icon-wrap--compact {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}
.nav-icon-wrap .nav-svg {
  width: 18px;
  height: 18px;
  opacity: 0.95;
}
.nav-icon-wrap--compact .nav-svg {
  width: 16px;
  height: 16px;
}

.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item .nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-3);
  color: var(--sidebar-fg-muted);
  text-decoration: none;
  font-size: 13px; font-weight: var(--font-medium);
  transition: background var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
  white-space: nowrap;
  margin: 2px var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.nav-item .nav-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-fg);
  border-color: var(--sidebar-hover-border);
}
.nav-item .nav-link:hover .nav-icon-wrap {
  background: var(--sidebar-icon-bg-hover);
  border-color: var(--sidebar-icon-border);
  color: var(--sidebar-fg);
}
.nav-item .nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-fg);
  border-color: transparent;
  box-shadow: none;
  font-weight: var(--font-semibold);
}
.nav-item .nav-link.active .nav-icon-wrap {
  background: var(--sidebar-hover-bg);
  border-color: var(--sidebar-icon-border);
  color: var(--sidebar-active-fg);
}
.nav-item .nav-link:focus-visible,
.nav-sub-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.nav-link--external .nav-external-badge {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.45;
  font-weight: var(--font-semibold);
  transition: opacity var(--duration-fast);
}
.nav-link--external:hover .nav-external-badge {
  opacity: 0.85;
}

/* API 문서(Swagger) — 브랜드 색으로 일반 메뉴와 구분 */
.nav-item .nav-link.nav-link--swagger {
  background: var(--swagger-menu-bg);
  border: 1px solid var(--swagger-menu-border);
  color: var(--swagger-menu-fg);
  font-weight: var(--font-semibold);
}
.nav-item .nav-link.nav-link--swagger:hover {
  background: var(--swagger-menu-hover-bg);
  border-color: var(--swagger-menu-hover-border);
  color: var(--swagger-menu-fg);
}
.nav-item .nav-link.nav-link--swagger:hover .nav-icon-wrap--swagger {
  background: transparent;
  border-color: var(--swagger-icon-border);
  box-shadow: 0 0 0 1px rgba(73, 204, 144, 0.35);
}
.nav-item .nav-link.nav-link--swagger .nav-icon-wrap--swagger {
  /* SVG 자체에 #85EA2D 면 — 이중 라임 방지 */
  background: transparent;
  border: 1px solid var(--swagger-icon-border);
  box-shadow: 0 1px 3px rgba(23, 52, 9, 0.1);
}
.nav-link--swagger .nav-external-badge {
  color: var(--swagger-external-badge);
  opacity: 0.75;
}
.nav-link--swagger:hover .nav-external-badge {
  opacity: 1;
}
.nav-icon-wrap .nav-svg--swagger {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  border-radius: 6px;
}

/* 하단 API 메뉴 */
.nav-item-bottom {
  margin-top: 0;
  padding-bottom: var(--space-3);
}
.nav-item-bottom .nav-link:not(.nav-link--swagger) {
  color: var(--sidebar-fg-muted);
  font-size: 12.5px;
}
.nav-item-bottom .nav-link:not(.nav-link--swagger):hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-fg);
}

/* SVG 아이콘 (래퍼 내부) */
.nav-svg { flex-shrink: 0; }

/* 그룹 헤더 */
.nav-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  margin: 2px var(--space-2);
  border-radius: var(--radius-md);
  color: var(--sidebar-fg-muted);
  font-size: 13px;
  font-weight: var(--font-semibold);
  cursor: pointer; user-select: none;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  white-space: nowrap;
  border: 1px solid transparent;
}
.nav-group-header:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-fg);
  border-color: var(--sidebar-hover-border);
}
.nav-group-header:hover .nav-icon-wrap {
  background: var(--sidebar-icon-bg-hover);
  border-color: var(--sidebar-icon-border);
  color: var(--sidebar-fg);
}
/* 펼침 상태여도 행 배경은 사이드바와 동일(별도 활성 하이라이트 없음) */
.nav-group.open .nav-group-header {
  color: var(--sidebar-fg);
  background: transparent;
  border-color: transparent;
}
.nav-group.open .nav-group-header .nav-icon-wrap {
  background: var(--sidebar-icon-bg);
  border-color: var(--sidebar-icon-border);
  color: var(--sidebar-fg-muted);
}
.nav-group.open .nav-group-header:hover .nav-icon-wrap {
  background: var(--sidebar-icon-bg-hover);
  border-color: var(--sidebar-icon-border);
  color: var(--sidebar-fg);
}
/* 현재 페이지가 속한 대메뉴만 — 서브 active일 때 그룹 아이콘 액센트 테두리 */
.nav-group:has(.nav-sub-link.active) .nav-group-header .nav-icon-wrap,
.nav-group:has(.nav-sub-link.active) .nav-group-header:hover .nav-icon-wrap {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  color: var(--color-primary);
}
.nav-group-header:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.nav-group-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 펼침 화살표 — IntelliJ처럼 사이드바와 동일 톤(별도 카드 배경 없음) */
.nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: transparent;
  transition: opacity var(--duration-fast);
}
.nav-group-header:hover .nav-chevron {
  background: transparent;
}

/* 화살표 — 배경 없이 아이콘만 보이므로 대비 약간 상향 */
.nav-arrow { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.78; color: var(--sidebar-fg-muted); transition: transform .22s ease, opacity .22s ease, color .22s ease; }
.nav-group.open .nav-arrow { transform: rotate(90deg); opacity: 0.92; color: var(--sidebar-fg); }
.nav-group-header:hover .nav-arrow { opacity: 0.9; color: var(--sidebar-fg); }

/* 서브메뉴 */
.nav-sub {
  list-style: none; margin: 4px 10px 8px; padding: 6px 0;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, margin 0.2s ease, padding 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  background: var(--sidebar-sub-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--sidebar-sub-border);
  box-shadow: inset 0 1px 2px var(--sidebar-sub-inset);
}
/* 접힘: 높이 0일 때도 테두리·여백으로 남는 막대 제거 */
.nav-group:not(.open) .nav-sub {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}
.nav-group.open .nav-sub { max-height: 560px; }
html.sidebar-no-transition .nav-group-header,
html.sidebar-no-transition .nav-arrow,
html.sidebar-no-transition .nav-sub {
  transition: none !important;
}
.nav-sub-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 12px 7px 14px;
  margin: 1px 8px;
  color: var(--sidebar-fg-muted); text-decoration: none;
  font-size: 12.5px; font-weight: var(--font-medium);
  transition: background .15s, color .15s;
  white-space: normal;
  border-radius: var(--radius-sm);
}
.nav-sub-dot {
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sidebar-dot);
  transition: background var(--duration-fast), box-shadow var(--duration-fast);
}
.nav-sub-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
}
.nav-sub-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-fg);
}
.nav-sub-link:hover .nav-sub-dot {
  background: var(--sidebar-dot-hover);
}
.nav-sub-link.active {
  background: var(--color-nav-sub-active);
  color: var(--sidebar-sub-active-fg);
  box-shadow: none;
  font-weight: var(--font-semibold);
}
.nav-sub-link.active .nav-sub-dot {
  background: var(--color-primary);
  box-shadow: none;
}

/* 라이트 모드 — 내비 선택 강조는 슬레이트(버튼·링크용 primary 블루와 분리) */
html[data-theme="light"] .nav-group:has(.nav-sub-link.active) .nav-group-header .nav-icon-wrap,
html[data-theme="light"] .nav-group:has(.nav-sub-link.active) .nav-group-header:hover .nav-icon-wrap {
  border-color: var(--sidebar-active-bar);
  box-shadow: 0 0 0 1px var(--sidebar-active-bar);
  color: var(--sidebar-active-bar);
}
html[data-theme="light"] .nav-sub-link.active .nav-sub-dot {
  background: var(--sidebar-dot-active);
}

/* =====================================================
   헤더
   ===================================================== */

.site-header {
  background: var(--color-header-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 100; flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--layout-content-pad-x);
  height: 60px;
}
.header-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: flex-end; }
.header-lang {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: var(--text-xs); white-space: nowrap;
}
.header-lang-link {
  color: var(--color-text-secondary); text-decoration: none; padding: 2px 4px; border-radius: var(--radius-sm);
}
.header-lang-link:hover { color: var(--color-primary); }
.header-lang-link.is-active { font-weight: var(--font-semibold); color: var(--color-primary); }
.header-lang-sep { color: var(--color-border); user-select: none; opacity: 0.85; }
.header-session {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border);
  font-size: 12.5px; color: var(--color-text-secondary);
}
.header-session-label { white-space: nowrap; }
.header-session-time {
  font-variant-numeric: tabular-nums; min-width: 7.2em; letter-spacing: 0.02em;
  color: var(--color-text);
}
.header-session-time.session-warn { color: var(--color-warning, #b45309); }
.header-session-time.session-danger { color: var(--color-danger, #b91c1c); }
.btn-session-extend {
  padding: 4px 10px; margin-left: 2px;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-table-header-bg);
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.btn-session-extend:hover {
  background: var(--color-bg); border-color: var(--color-border-hover);
}
.header-user { font-size: 13px; font-weight: var(--font-medium); color: var(--color-text-secondary); }
button.header-user {
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-medium);
  background: transparent;
  border: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast);
}
button.header-user:hover {
  color: var(--color-primary);
  background: var(--color-bg-subtle);
}
.logout-form { display: inline; }
.btn-logout {
  padding: 5px 14px;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text-muted);
  font-size: 12.5px; cursor: pointer;
  transition: all var(--duration-fast);
}
.btn-logout:hover { background: var(--color-bg-subtle); border-color: var(--color-border-hover); color: var(--color-text); }
html[data-theme="dark"] .btn-session-extend {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
html[data-theme="dark"] .btn-session-extend:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}
html[data-theme="dark"] .btn-logout {
  color: var(--color-text-secondary);
  border-color: var(--color-border-hover);
  background: rgba(188, 191, 196, 0.06);
}
html[data-theme="dark"] .btn-logout:hover {
  color: var(--color-heading);
  border-color: var(--color-primary);
  background: rgba(53, 116, 240, 0.12);
}

/* 세션 만료 모달 — 가로 프로그레스 (rAF로 부드럽게 채움) */
.portal-session-warn-box {
  max-width: 420px;
}
.portal-session-warn-msg {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.session-warn-progress {
  margin-top: var(--space-2);
}
.session-warn-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.session-warn-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary, #3574f0), var(--color-warning, #d97706));
  transition: none;
  will-change: width;
}
.session-warn-progress-label {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.session-warn-remain {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
html[data-theme="dark"] .session-warn-progress-track {
  background: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .session-warn-progress-bar {
  background: linear-gradient(90deg, #3574f0, #f59e0b);
}

.btn-sidebar-toggle {
  background: none; border: none; color: var(--color-text-secondary);
  font-size: 20px; cursor: pointer;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); line-height: 1;
  transition: background var(--duration-fast);
}
.btn-sidebar-toggle:hover { background: var(--color-bg); }

.btn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}
.btn-theme-toggle:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-hover);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.btn-theme-toggle .theme-icon { display: block; }
html[data-theme="light"] .btn-theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .btn-theme-toggle .theme-icon-moon { display: none; }

/* 다크 UI — 테마 토글: IDE 뉴 UI 톤(차콜 #1E1F22·#2B2D30 + Run 그린 #59A869 계열) */
html[data-theme="dark"] .btn-theme-toggle {
  background: #1e1f22;
  border-color: #59a869;
  color: #6bc77e;
  box-shadow: 0 0 0 1px rgba(89, 168, 105, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .btn-theme-toggle:hover {
  background: #2b2d30;
  border-color: #6bc77e;
  color: #7fd492;
  box-shadow: 0 0 14px rgba(89, 168, 105, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .btn-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #1e1f22, 0 0 0 4px rgba(89, 168, 105, 0.42);
}
.login-lang {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--text-xs);
}
.login-lang-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.login-lang-link:hover { color: var(--color-primary); }
.login-lang-link.is-active { font-weight: var(--font-semibold); color: var(--color-primary); }
.login-lang-sep { color: var(--color-border); user-select: none; opacity: 0.85; }
.login-theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50;
}

/* =====================================================
   본문
   ===================================================== */

.page-content {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding-block: var(--space-6);
  padding-inline: var(--layout-content-pad-x);
  background: var(--color-bg-card);
  box-sizing: border-box;
}

.page-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6); gap: var(--space-4);
}
.page-header h1 {
  margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold);
  color: var(--color-heading); letter-spacing: -0.3px;
}
.page-desc { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted-light); }
.breadcrumb-nav {
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-muted);
}
.breadcrumb-nav a {
  color: var(--color-heading);
  text-decoration: none;
  font-weight: var(--font-semibold);
}
.breadcrumb-nav a:hover {
  color: var(--color-text);
  text-decoration: underline;
}
.breadcrumb-nav span:not(.breadcrumb-sep) {
  color: var(--color-text-secondary);
  font-weight: 500;
}
.breadcrumb-sep {
  margin: 0 var(--space-2);
  color: var(--color-text-muted-light);
  font-weight: 400;
}
.page-header-actions,
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* =====================================================
   검색 박스
   ===================================================== */

.search-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
  box-shadow: none;
}
.search-box .search-item { display: flex; align-items: center; gap: var(--space-2); }
.search-box .search-label {
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--color-text-secondary); white-space: nowrap;
}
.search-box .search-input,
.search-box .search-select {
  padding: 7px 11px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-base); color: var(--color-text);
  background: var(--color-bg-subtle); min-width: 130px;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search-box .search-input:focus,
.search-box .search-select:focus {
  outline: none;
  border-color: var(--color-input-border-hover);
  box-shadow: var(--shadow-focus);
  background: var(--color-bg-card);
}
.search-box .search-divider { width: 1px; height: 22px; background: var(--color-border); margin: 0 var(--space-1); }
.search-box .search-btns { display: flex; gap: var(--space-2); margin-left: auto; }

/* =====================================================
   리스트 페이지 — 공지사항 컨셉 통일
   ===================================================== */

.list-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
  flex: 0 0 auto;
}
.list-page .page-header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-panel-border);
}
.list-page .page-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--color-heading);
  margin: 0 0 var(--space-1);
}
.list-page .page-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.list-page .search-box {
  margin-bottom: var(--space-5);
}

/* list-page 공통: 상단 조회 — 카드형 필터 패널 (라벨 상단·반응형 그리드) */
.search-box--panel {
  display: block;
  padding: 0;
  margin-bottom: var(--space-5);
  background: transparent;
  box-shadow: none;
}
.search-box--panel .list-filter__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-xl, 12px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 4px 12px rgba(15, 23, 42, 0.03);
}
html[data-theme="dark"] .search-box--panel .list-filter__inner {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.22);
}
.search-box--panel .list-filter__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4) var(--space-5);
  align-items: end;
}
@media (max-width: 560px) {
  .search-box--panel .list-filter__inner {
    padding: var(--space-4);
  }
}
.search-box--panel .filter-field {
  min-width: 0;
}
.search-box--panel .filter-field__label {
  display: block;
  margin-bottom: 6px;
  padding-inline-start: 15px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.search-box--panel .filter-field__control {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.search-box--panel .filter-field__control.form-control {
  font-size: var(--text-sm);
}
.search-box--panel .filter-field__control:hover {
  border-color: var(--color-input-border-hover);
}
.search-box--panel .filter-field__control:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  background: var(--color-bg-card);
}
.search-box--panel select.filter-field__control {
  cursor: pointer;
  appearance: auto;
  background-image: none;
}
.search-box--panel .filter-field__daterange {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.search-box--panel .filter-field__daterange .filter-field__control {
  flex: 1 1 0;
}
.search-box--panel .filter-field__range-sep {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  user-select: none;
}
.search-box--panel .list-filter__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-panel-border);
}
.search-box--panel .list-filter__actions .btn {
  min-width: 88px;
  min-height: 40px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
}

.list-page .dataTables_wrapper,
.list-page .table-card {
  margin-bottom: 0;
}

.text-primary { color: var(--color-primary); font-weight: 600; }

/* =====================================================
   테이블 카드 컨테이너
   ===================================================== */

.table-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

/* 카드 안의 DataTables 래퍼는 외곽 카드만 테두리·그림자 (이중 테·모서리 불일치 방지) */
.table-card .dataTables_wrapper {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* =====================================================
   DataTables 커스텀 스타일
   ===================================================== */

/* 단독 사용 시에만 카드형 (대부분 페이지는 .table-card가 외곽) */
.dataTables_wrapper {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

/* ── 상단 컨트롤 바 ────────────────────────────────── */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding: 0; float: none;
}
.dataTables_wrapper .dt-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-topbar-border);
  background: var(--color-topbar-bg);
  gap: 16px;
  min-height: 58px;
  overflow: visible;
  position: relative;
  z-index: 1;
  border-radius: 0;
}

/* ── length: [10 ▼] 건씩 보기 */
.dataTables_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_length select {
  height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-input-text);
  background-color: var(--color-bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  min-width: 68px;
}
.dataTables_wrapper .dataTables_length select:hover {
  border-color: var(--color-input-border-hover);
}
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

/* ── filter: Search... */
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 0; /* DataTables 생성 "검색:" 텍스트 숨김 */
}
.dataTables_wrapper .dataTables_filter input[type=search] {
  height: 36px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-input-text);
  background-color: var(--color-bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='%23adb5bd'%3E%3Cpath fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  width: 220px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, width .2s;
  box-sizing: border-box;
}
.dataTables_wrapper .dataTables_filter input[type=search]::placeholder {
  color: var(--color-input-border-hover);
  font-size: 14px;
}
.dataTables_wrapper .dataTables_filter input[type=search]:hover {
  border-color: var(--color-input-border-hover);
}
.dataTables_wrapper .dataTables_filter input[type=search]:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  width: 260px;
}

/* ── 테이블 본체 ────────────────────────────────────── */
.code-table {
  border-collapse: collapse;
  width: 100%;
  background: var(--color-bg-card);
}

/* ▶ thead — 슬레이트 헤더 */
.code-table thead tr,
table.dataTable.code-table thead tr {
  background: var(--color-table-header-bg) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.code-table thead th:first-child,
.code-table thead th:last-child,
table.dataTable.code-table thead th:first-child,
table.dataTable.code-table thead th:last-child {
  border-radius: 0;
}
.code-table th,
table.dataTable.code-table thead th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-table-header-text) !important;
  white-space: nowrap;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  user-select: none;
  position: relative;
  background: var(--color-table-header-bg) !important;
  opacity: 1 !important;
}
/* 코드 그룹 전환 시 DataTable 재생성 후 헤더 텍스트 가시성 보장 */
.code-manager-page .code-table thead th,
.code-manager-page table.dataTable thead th {
  color: #fff !important;
  background: var(--color-table-header-bg) !important;
  opacity: 1 !important;
}

.code-table td {
  padding: 13px var(--space-5);
  font-size: var(--text-md);
  color: var(--color-body);
  border-bottom: 1px solid var(--color-border-light);
  border-right: none; border-left: none; border-top: none;
  vertical-align: middle;
  line-height: var(--leading-normal);
}
.code-table tbody tr { transition: background 0.1s; }
.code-table tbody tr:nth-child(odd),
table.dataTable.code-table tbody tr.odd { background: var(--color-table-row-odd) !important; }
.code-table tbody tr:nth-child(even),
table.dataTable.code-table tbody tr.even { background: var(--color-table-row-even) !important; }
.code-table tbody tr:hover { background: var(--color-bg-row-hover) !important; }
.code-table tbody tr:last-child td { border-bottom: none; }

/* DataTables 기본(display/stripe) 인셋 그림자 제거 — 얼룩·파란 선택 톤 방지 */
table.dataTable.code-table tbody tr > th,
table.dataTable.code-table tbody tr > td {
  box-shadow: none !important;
}

/* ▶ DataTables 테이블 항상 컨테이너 100% 채움 */
table.dataTable {
  width: 100% !important;
  table-layout: auto;
}

/* ▶ DataTables 정렬 아이콘 — 이미지와 동일한 ↑↓ 형태 */
table.dataTable thead th { padding-right: 30px !important; }
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { cursor: pointer; }

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  font-family: Arial, sans-serif;
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-xs); line-height: 1;
}
table.dataTable thead th.sorting::after {
  content: '↑↓';
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -2px;
}
table.dataTable thead th.sorting_asc::after {
  content: '↑';
  color: var(--color-table-header-text);
  font-size: var(--text-sm);
}
table.dataTable thead th.sorting_desc::after {
  content: '↓';
  color: var(--color-table-header-text);
  font-size: var(--text-sm);
}
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { color: var(--color-table-header-text); }

/* ▶ 목록 체크박스 열 — 둥근 사각 + 체크 아이콘 */
.code-table th input[type="checkbox"],
.code-table td input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-card);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.code-table th input[type="checkbox"]:checked,
.code-table td input[type="checkbox"]:checked {
  background: var(--color-ui-accent);
  border-color: var(--color-ui-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5L9.5 3'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}
.code-table th input[type="checkbox"]:focus-visible,
.code-table td input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ── 하단 컨트롤 바 ─────────────────────────────────── */
.dataTables_wrapper .dt-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid var(--color-topbar-border);
  background: var(--color-topbar-bg);
  position: relative;
  min-height: 56px;
  border-radius: 0;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: 0; float: none;
  font-size: .855rem;
}
.dataTables_wrapper .dataTables_info {
  color: var(--color-text-secondary); font-weight: 500;
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
}
.dataTables_wrapper .dataTables_paginate {
  display: flex; align-items: center; gap: 3px;
}

/* ── 페이지네이션 버튼 — 번호형 */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 8px; margin: 0;
  border: 1px solid var(--color-grid-border) !important;
  border-radius: var(--radius-md) !important;
  font-size: .855rem; font-weight: 500;
  color: var(--color-input-text) !important;
  cursor: pointer;
  transition: all .15s;
  background: var(--color-bg-card) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-topbar-bg) !important;
  border-color: var(--color-grid-border) !important;
  color: var(--color-body) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-table-header-bg) !important;
  border-color: var(--color-table-header-bg) !important;
  color: var(--color-table-header-text) !important;
  font-weight: var(--font-bold);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--color-input-border) !important;
  background: var(--color-bg-card) !important;
  border-color: var(--color-border-light) !important;
  cursor: not-allowed;
  box-shadow: none;
}
/* 이전/다음 화살표 버튼 */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  font-size: 1rem;
}

/* clearfix */
.dataTables_wrapper::after { content: ''; display: table; clear: both; }

/* dt-center 유틸 */
.dt-center { text-align: center !important; }

/* 목록 '관리' 셀 — 버튼(복사/수정/삭제)이 줄바꿈 없이 한 줄로 유지되도록 */
.dt-actions { white-space: nowrap; }

/* =====================================================
   배지
   ===================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.25;
  box-sizing: border-box;
}
.badge-active,
.badge-success {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
  border-color: var(--badge-success-border);
}
.badge-inactive,
.badge-danger {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-fg);
  border-color: var(--badge-danger-border);
}
.badge-primary {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  border-color: var(--badge-neutral-border);
}
.badge-warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
  border-color: var(--badge-warning-border);
}
.badge-default {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  border-color: var(--badge-neutral-border);
}
.badge-info {
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
  border-color: var(--badge-info-border);
}
.badge-purple {
  background: var(--badge-purple-bg);
  color: var(--badge-purple-fg);
  border-color: var(--badge-purple-border);
}
/* BADGE_CLS GROUP/VIP 등 — 계약·회원 그리드와 동일 배지 톤(연한 배경 + 진한 글자 + 테두리) */
.badge-indigo {
  background: var(--badge-purple-bg);
  color: var(--badge-purple-fg);
  border-color: var(--badge-purple-border);
}

/* 그리드 내 강조 문구 — 링크처럼 보이는 파란색 대신 본문 톤 */
.code-table tbody td .text-primary {
  color: var(--color-text);
  font-weight: var(--font-semibold);
}

/* 테이블 행 액션 버튼 — 검색 영역 .btn 과 동일 반경·최소 높이 */
.code-table .btn-sm {
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
}

/* 배치 관리 — 관리 열: 버튼 가로 배치 (좁으면 줄바꿈) */
.code-table .batch-job-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-start;
}
.code-table .batch-job-actions .btn-sm {
  width: auto;
  flex: 0 0 auto;
}

/* =====================================================
   공통 버튼
   ===================================================== */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-base); font-weight: var(--font-semibold);
  cursor: pointer; white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  border-color: var(--color-table-header-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.btn-primary:hover {
  background: var(--color-table-header-bg-hover);
  border-color: var(--color-table-header-bg-hover);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.btn-indigo {
  background: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  border-color: var(--color-table-header-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.btn-indigo:hover {
  background: var(--color-table-header-bg-hover);
  border-color: var(--color-table-header-bg-hover);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.btn-outline {
  background: var(--color-bg-card); color: var(--color-table-header-bg);
  border-color: var(--color-grid-border);
}
.btn-outline:hover { background: var(--color-topbar-bg); border-color: var(--color-table-header-bg); color: var(--color-table-header-bg); }

/** 테이블·카드 보조 액션 — 조회/통합보기 등 (흰 배경 + 연한 테 + 인디고 글자, 캡슐형) */
.btn-pill-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.btn-pill-outline:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-hover);
  color: var(--color-heading);
  box-shadow: var(--shadow-sm);
}
.btn-pill-outline:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn-pill-outline:active {
  transform: scale(0.98);
}
.btn-pill-outline svg {
  flex-shrink: 0;
  opacity: 0.92;
}
.btn-pill-outline--compact {
  padding: 3px 10px;
  font-size: 11px;
  gap: 4px;
}

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger); border: 1px solid var(--color-danger-border);
}
.btn-danger:hover {
  background: var(--color-danger-border); color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-sm { padding: 5px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }

/* =====================================================
   모달
   ===================================================== */

.modal-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 1000;
  align-items: center; justify-content: center;
}
.modal-overlay.open {
  display: flex;
  background: transparent;
}

#portalConfirmOverlay {
  z-index: 1100;
}
.portal-confirm-message {
  margin: 0;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.modal-box {
  background: var(--color-bg-card); border-radius: var(--radius-2xl);
  max-width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--color-panel-border);
  box-shadow: var(--shadow-modal);
  animation: modalIn var(--duration-normal) var(--ease-bounce);
}
.modal-box--wide {
  max-width: 900px;
  width: 90vw;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6) var(--space-4);
  background: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.modal-header span {
  font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--color-table-header-text); letter-spacing: -0.2px;
}
.modal-header h2 { font-size: var(--text-lg); font-weight: var(--font-bold); margin: 0; color: var(--color-table-header-text); }
.modal-header .modal-sub {
  font-size: var(--text-sm); color: rgba(255,255,255,0.85); margin-top: 3px;
}
.modal-close {
  background: rgba(255,255,255,0.15); border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--color-table-header-text);
  width: 28px; height: 28px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-fast); flex-shrink: 0;
}
.modal-close:hover { background: rgba(255,255,255,0.25); color: var(--color-table-header-text); }

.modal-body { overflow-y: auto; padding: var(--space-5) var(--space-6); flex: 1; }

.modal-sm { width: 500px; }
.modal-lg { width: 660px; }
.modal-xl { width: 1100px; max-width: 95vw; }
.modal-xxl { width: 1280px; max-width: 96vw; min-height: 680px; }
.modal-move { width: 560px; min-height: 260px; }

/* 클래스 등록·수정 모달 — 2열 폼, 전체 높이 제한 + 본문 스크롤 */
.modal-box.class-modal-form {
  width: min(920px, 96vw);
  max-height: min(92vh, 880px);
}
.modal-box.class-modal-form .modal-body {
  max-height: min(calc(92vh - 132px), 720px);
}
.form-table.form-table--2col {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  table-layout: fixed;
}
.form-table.form-table--2col > tbody > tr > th {
  width: 12%;
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  white-space: nowrap;
}
.form-table.form-table--2col > tbody > tr > td {
  width: 38%;
  vertical-align: top;
  padding: 4px 8px 4px 0;
}
.form-table.form-table--2col > tbody > tr.row-full > th {
  vertical-align: top;
  padding-top: 10px;
}
.form-table.form-table--2col > tbody > tr.row-full > td {
  width: auto;
}
.form-table.form-table--2col .form-control,
.form-table.form-table--2col select.form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.form-table.form-table--2col textarea.form-control {
  min-height: 64px;
  resize: vertical;
}

.assign-table { width: 100%; border-collapse: collapse; }
.assign-table thead tr { background: var(--color-bg-subtle); }
.assign-table th { padding: 8px; text-align: left; }
.assign-table th:first-child { width: 36px; text-align: center; }
.assign-table td { padding: 8px; }
.assign-table td:first-child { text-align: center; }
.assign-table tbody tr:hover { background: var(--color-bg-row-hover); }
.assign-table tbody tr td { border-top: 1px solid var(--color-border-light); }
.assign-btn-lg { font-size: var(--text-md); padding: 8px 16px; font-weight: var(--font-semibold); }

.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-topbar-border);
  background: var(--color-topbar-bg);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* =====================================================
   단체 회원 — 단체 정보 상세 팝업
   ===================================================== */
.is-hidden { display: none !important; }

.org-detail-modal .modal-body { background: var(--color-bg-card); }

.org-detail-modal__header .modal-close { color: var(--color-white); }

.org-detail-modal__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.88);
}

.org-detail-modal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0 var(--space-6);
  background: var(--color-table-header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.org-detail-tab {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.72);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.org-detail-tab:hover { color: var(--color-white); }
.org-detail-tab.is-active {
  color: var(--color-white);
  border-bottom-color: var(--color-blue-500);
}

.org-detail-modal__body { min-height: 420px; }

.org-detail-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-table-header-bg);
  margin: 0 0 var(--space-4);
}
.org-detail-section-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue-500);
  flex-shrink: 0;
}
.org-detail-section-bullet--orange { background: var(--color-warning); }

.org-contract-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  max-width: 920px;
}
.org-contract-grid .form-field--full { grid-column: 1 / -1; }
.org-contract-grid .modal-label { display: block; margin-bottom: 4px; }

.org-detail-readonly-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.org-code-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.org-code-card {
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--color-bg-card);
}
.org-code-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.org-code-card__head-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.org-code-card__key { font-weight: var(--font-semibold); color: var(--color-table-header-bg); }
.org-code-card__created { font-size: var(--text-xs); color: var(--color-text-muted); }
.org-code-card__field { margin-bottom: var(--space-4); }
.org-code-card__field .modal-label { margin-bottom: 4px; display: block; }
.org-code-card__period {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.org-code-card__period .form-control { max-width: 200px; }
.org-code-card__tilde { color: var(--color-text-muted); font-size: var(--text-sm); }
.org-code-program-select { max-width: 360px; }

.org-code-course-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-2);
}
.org-code-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  cursor: pointer;
}

.org-target-register__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr auto;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-4);
}
@media (max-width: 960px) {
  .org-target-register__row { grid-template-columns: 1fr; }
}
.org-target-register__actions .modal-label { visibility: hidden; }
.org-target-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.org-target-extra-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.org-target-extra-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) 1fr 1.2fr auto;
  gap: var(--space-2);
  align-items: center;
  max-width: 900px;
}
@media (max-width: 960px) {
  .org-target-extra-row { grid-template-columns: 1fr; }
}

.org-target-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.org-target-bulk__hint { margin-top: var(--space-2); flex-basis: 100%; }

.org-detail-placeholder {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-panel-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.org-detail-placeholder__icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-2);
  line-height: 1;
}

.org-target-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  max-width: 480px;
}
.org-target-table-toolbar .modal-label { margin-bottom: 0; white-space: nowrap; }
.org-target-search-input { flex: 1; min-width: 200px; max-width: 360px; }
.org-target-search-empty { color: var(--color-text-muted); padding: var(--space-6) !important; }

.org-target-table-wrap { margin-top: var(--space-3); }
.org-target-col-action { width: 5.5rem; text-align: center; white-space: nowrap; vertical-align: middle; }

/* =====================================================
   폼 테이블
   ===================================================== */

.form-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.form-table th,
.form-table td { padding: 7px 6px; vertical-align: middle; }
.form-table th {
  width: 120px; font-size: .82rem; font-weight: 600;
  color: var(--color-input-text); white-space: nowrap;
}

/* ── 입력 필드 그룹 (라벨 위 + 입력 아래) ── */
.form-group {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 14px;
}
.form-group label {
  font-size: .82rem; font-weight: 600; color: var(--color-input-text);
}

/* ── form-control (이미지 스타일) ── */
.form-control {
  width: 100%;
  padding: var(--space-2) 14px;
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-family: inherit;
  color: var(--color-body);
  background: var(--color-bg-card);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  box-sizing: border-box;
  line-height: var(--leading-normal);
}
.form-control::placeholder { color: var(--color-input-border-hover); }
.form-control:hover:not(:focus):not([readonly]):not(:disabled) {
  border-color: var(--color-input-border-hover);
}
.form-control:focus,
.form-control:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  background: var(--color-bg-card);
}
.form-control[readonly] {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-light);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.form-control:disabled {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-light);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
select.form-control {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
textarea.form-control {
  resize: vertical;
  line-height: 1.65;
  min-height: 80px;
}
.req { color: var(--color-required); margin-left: 2px; }

/* =====================================================
   링크 스타일
   ===================================================== */

.link-title, .link-row {
  color: var(--color-link); text-decoration: none;
  font-weight: 500; transition: color .15s;
}
.link-title:hover, .link-row:hover {
  color: var(--color-link-hover); text-decoration: underline;
}

/* =====================================================
   체크박스 — 폼 라벨: 토글 스위치 / 테이블: 위 code-table 규칙
   ===================================================== */

label.auth-child-item,
label.auth-check-row,
label.auth-group-header,
label.usr-log-dt-refresh-label,
label.org-code-check,
label.portal-cb-toggle {
  position: relative;
  cursor: pointer;
}
/* 모달·동적 목록 내 토글 행 — 인라인 #fff 제거, 라이트/다크 공통 */
label.portal-cb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  box-sizing: border-box;
  background: var(--color-bg-muted);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: 1.4;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
label.portal-cb-toggle:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-row-hover);
}
label.portal-cb-toggle.portal-cb-toggle--multiline {
  align-items: flex-start;
  gap: 10px;
}
label.auth-child-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
label.auth-check-row,
label.auth-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
label.auth-child-item::before,
label.org-code-check::before,
label.portal-cb-toggle::before,
label.auth-check-row::before,
label.auth-group-header::before,
label.usr-log-dt-refresh-label::before {
  content: "";
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-muted);
  background-image: radial-gradient(
    circle at 0.65rem 50%,
    var(--color-bg-card) 0,
    var(--color-bg-card) 0.45rem,
    transparent 0.46rem
  );
  background-repeat: no-repeat;
  transition: background-color 0.2s ease, border-color 0.2s ease, background-image 0.2s ease;
  box-sizing: border-box;
}
label.auth-child-item:has(input:checked)::before,
label.org-code-check:has(input:checked)::before,
label.portal-cb-toggle:has(input:checked)::before,
label.auth-check-row:has(input:checked)::before,
label.auth-group-header:has(input:checked)::before,
label.usr-log-dt-refresh-label:has(input:checked)::before {
  background-color: rgba(147, 197, 253, 0.45);
  border-color: var(--color-primary-light, #60a5fa);
  background-image: radial-gradient(
    circle at calc(100% - 0.65rem) 50%,
    var(--color-primary, #2563eb) 0,
    var(--color-primary, #2563eb) 0.45rem,
    transparent 0.46rem
  );
}
label.auth-child-item:has(input:focus-visible)::before,
label.org-code-check:has(input:focus-visible)::before,
label.portal-cb-toggle:has(input:focus-visible)::before,
label.auth-check-row:has(input:focus-visible)::before,
label.auth-group-header:has(input:focus-visible)::before,
label.usr-log-dt-refresh-label:has(input:focus-visible)::before {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/* auth-child-item 의 ::before 토글은 체크박스 전용 — 라디오와 함께 쓰면 이중 UI가 됨 */
label.auth-child-item:has(> input[type="radio"])::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
label.auth-child-item input[type="checkbox"],
label.org-code-check input[type="checkbox"],
label.portal-cb-toggle input[type="checkbox"],
label.auth-check-row input[type="checkbox"],
label.auth-group-header input[type="checkbox"],
label.usr-log-dt-refresh-label input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
label.auth-child-item input[type="radio"] {
  flex-shrink: 0;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  label.auth-child-item::before,
  label.org-code-check::before,
  label.portal-cb-toggle::before,
  label.auth-check-row::before,
  label.auth-group-header::before,
  label.usr-log-dt-refresh-label::before {
    transition: none;
  }
}
html[data-theme="dark"] label.portal-cb-toggle::before {
  background-color: var(--color-panel-bg);
  border-color: var(--color-border-hover);
  background-image: radial-gradient(
    circle at 0.65rem 50%,
    var(--color-text-secondary) 0,
    var(--color-text-secondary) 0.45rem,
    transparent 0.46rem
  );
}
html[data-theme="dark"] label.auth-child-item:has(input:checked)::before,
html[data-theme="dark"] label.org-code-check:has(input:checked)::before,
html[data-theme="dark"] label.portal-cb-toggle:has(input:checked)::before,
html[data-theme="dark"] label.auth-check-row:has(input:checked)::before,
html[data-theme="dark"] label.auth-group-header:has(input:checked)::before,
html[data-theme="dark"] label.usr-log-dt-refresh-label:has(input:checked)::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary-dark);
  background-image: radial-gradient(
    circle at calc(100% - 0.65rem) 50%,
    #ffffff 0,
    #ffffff 0.45rem,
    transparent 0.46rem
  );
}

/* =====================================================
   권한 관리 모달
   ===================================================== */

.auth-section-label {
  font-size: .75rem; font-weight: 700; color: var(--color-text-muted-light);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.auth-check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border: 1.5px solid var(--color-grid-border); border-radius: 6px;
  margin-bottom: 10px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--color-topbar-bg);
}
.auth-check-row:hover  { border-color: var(--color-table-header-bg); background: rgba(100, 116, 139, 0.12); }
.auth-check-row.all-row { font-size: .95rem; }
.auth-group-card {
  border: 1px solid var(--color-border); border-radius: 6px;
  margin-bottom: 8px; overflow: hidden;
}
.auth-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--color-bg-subtle);
  cursor: pointer; font-weight: 600; font-size: .88rem;
  transition: background .15s;
}
.auth-group-header:hover { background: var(--color-bg); }
.auth-children {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; padding: 6px 16px 10px 36px;
}
.auth-child-item {
  padding: 6px 4px;
  font-size: 0.875rem;
}
.auth-check-row input[type="checkbox"],
.auth-group-header input[type="checkbox"],
.auth-child-item input[type="checkbox"] {
  flex-shrink: 0;
}
.btn-auth-open {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg-subtle); color: var(--color-text-secondary);
  font-size: .8rem; cursor: pointer; transition: all .15s;
}
.btn-auth-open:hover { background: var(--color-bg); border-color: var(--color-border-hover); color: var(--color-text); }

/* =====================================================
   알림
   ===================================================== */

.alert-success {
  color: var(--color-success); background: var(--color-success-bg);
  border: 1px solid var(--color-success-border); border-radius: 8px;
  padding: 11px 16px; margin-bottom: 16px; font-size: .855rem;
}
.alert-error {
  color: var(--color-danger); background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border); border-radius: 8px;
  padding: 11px 16px; margin-bottom: 16px; font-size: .855rem;
}
.code-msg {
  color: var(--color-success); background: var(--color-success-bg);
  border: 1px solid var(--color-success-border); border-radius: 8px;
  padding: 11px 16px; margin-bottom: 16px; font-size: .855rem;
}

/* =====================================================
   대시보드 (홈 TODAY 종합 현황)
   ===================================================== */

.page-content.dash-home {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.dash-home-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.dash-home-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl, 1.35rem);
  font-weight: var(--font-bold);
  color: var(--color-heading);
  letter-spacing: -0.02em;
}
.dash-home-sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.dash-home-ref {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.dash-home-ref-time { font-variant-numeric: tabular-nums; color: var(--color-text); }

.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 1100px) {
  .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dash-kpi-row { grid-template-columns: 1fr; }
}
.dash-kpi-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-panel-border);
  border-radius: 12px;
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.dash-kpi-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dash-kpi-card-top--single {
  justify-content: flex-start;
}
.dash-kpi-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--dash-kpi-ico-bg);
  color: var(--dash-kpi-ico-fg);
}
.dash-kpi-svg {
  width: 22px;
  height: 22px;
}
.dash-kpi-icon--members {
  --dash-kpi-ico-fg: #2563eb;
  --dash-kpi-ico-bg: #dbeafe;
}
.dash-kpi-icon--org {
  --dash-kpi-ico-fg: #2563eb;
  --dash-kpi-ico-bg: #e0e7ff;
}
.dash-kpi-icon--teacher {
  --dash-kpi-ico-fg: #7c3aed;
  --dash-kpi-ico-bg: #ede9fe;
}
.dash-kpi-icon--sales {
  --dash-kpi-ico-fg: #16a34a;
  --dash-kpi-ico-bg: #dcfce7;
}
.dash-kpi-label {
  display: block;
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}
.dash-kpi-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--color-success-bg);
  color: var(--color-success, #15803d);
}
.dash-kpi-badge--muted {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-weight: 500;
}
.dash-kpi-value {
  margin: 0 0 var(--space-2);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.dash-kpi-sub { margin: 0; font-size: 12.5px; color: var(--color-text-secondary); }
.dash-kpi-muted { color: var(--color-text-muted); }
.dash-kpi-link {
  font-size: 12.5px;
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
}
.dash-kpi-link:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}

.dash-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(280px, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 992px) {
  .dash-home-grid { grid-template-columns: 1fr; align-items: start; }
}

.dash-chart-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-panel-border);
  border-radius: 12px;
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  min-height: 280px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.dash-chart-card-head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.dash-chart-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-table-header-bg, #2563eb);
  flex-shrink: 0;
}
.dash-chart-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-heading);
}
.dash-chart-note {
  margin: 0 0 var(--space-4);
  font-size: 12px;
  color: var(--color-text-muted);
}
.dash-chart-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-chart-canvas-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 240px;
}
.dash-chart-canvas-wrap canvas {
  max-height: none;
}

.board-stats-page .board-stats-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.board-stats-page .board-stats-chart-grid--single {
  grid-template-columns: 1fr;
}
@media (max-width: 992px) {
  .board-stats-page .board-stats-chart-grid {
    grid-template-columns: 1fr;
  }
}
.board-stats-page .board-stats-canvas {
  min-height: 260px;
}
.board-stats-page .board-stats-canvas--tall {
  min-height: 320px;
}
.board-stats-page .board-stats-table-wrap {
  margin-top: var(--space-5);
  overflow-x: auto;
}
.board-stats-page .board-stats-total-row th,
.board-stats-page .board-stats-total-row td {
  font-weight: var(--font-semibold);
}
.board-stats-page .board-stats-donut-wrap {
  max-width: 360px;
  margin: 0 auto;
  min-height: 260px;
}
.board-stats-page .board-stats-grade-table-wrap {
  flex: 1;
  min-height: 200px;
  overflow: auto;
}

.dash-home .dash-home-social-kpis {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  margin-bottom: var(--space-3);
}
.dash-home .dash-home-social-kpi {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid var(--color-panel-border);
  background: var(--color-bg-muted, rgba(0, 0, 0, 0.03));
}
.dash-home .dash-home-social-kpi-label {
  display: block;
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-heading);
  margin-bottom: 3px;
  line-height: 1.2;
  white-space: nowrap;
}
.dash-home .dash-home-social-kpi-value {
  display: block;
  font-size: 17px;
  font-weight: var(--font-semibold);
  line-height: 1.15;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.dash-home .dash-home-social-kpi-value--muted {
  color: var(--color-text-muted);
  font-weight: var(--font-medium, 500);
}
html[data-theme="dark"] .dash-home .dash-home-social-kpi {
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 560px) {
  .dash-home .dash-home-social-kpis {
    flex-wrap: wrap;
  }
  .dash-home .dash-home-social-kpi {
    flex: 1 1 calc(50% - 6px);
  }
}

.board-stats-page .board-stats-social-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
  align-items: stretch;
  padding: var(--space-2) 0 var(--space-1);
  flex: 1;
}
.board-stats-page .board-stats-social-kpi {
  flex: 1 1 0;
  min-width: 100px;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border-radius: 10px;
  border: 1px solid var(--color-panel-border);
  background: var(--color-bg-muted, rgba(0, 0, 0, 0.03));
}
.board-stats-page .board-stats-social-kpi-label {
  display: block;
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.board-stats-page .board-stats-social-kpi-value {
  display: block;
  font-size: 28px;
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--color-text);
}
.board-stats-page .board-stats-social-kpi-value--muted {
  color: var(--color-text-muted);
  font-weight: var(--font-medium, 500);
}
html[data-theme="dark"] .board-stats-page .board-stats-social-kpi {
  background: rgba(255, 255, 255, 0.04);
}

.dash-home-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  min-height: 100%;
}
.dash-aside-card--stretch {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dash-aside-card--stretch a.dash-aside-btn {
  margin-top: auto;
}
.dash-aside-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-panel-border);
  border-radius: 12px;
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.dash-aside-title {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  font-weight: var(--font-semibold);
  color: var(--color-heading);
}
.dash-reward-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-3);
}
.dash-reward-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 10px;
  font-size: 13px;
  border: none;
}
.dash-reward-row--bolt {
  background: #fffbeb;
}
.dash-reward-row--flame {
  background: #fff7ed;
}
.dash-reward-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.dash-reward-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-reward-icon--bolt {
  background: #fef9c3;
  color: #ca8a04;
}
.dash-reward-icon--flame {
  background: #ffedd5;
  color: #ea580c;
}
.dash-reward-text { min-width: 0; }
.dash-reward-name { color: var(--color-text-secondary); }
.dash-reward-hint {
  font-weight: 400;
  font-size: 10px;
  color: var(--color-text-muted);
}
.dash-reward-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}
.dash-reward-warn {
  margin: 0 0 var(--space-4);
  font-size: 12px;
  color: var(--color-text-muted);
}
a.dash-aside-btn {
  display: block; width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  padding: 11px 16px;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  background: var(--color-table-header-bg, #1e3a5f);
  color: var(--color-white);
  transition: opacity .15s;
}
a.dash-aside-btn:hover { opacity: 0.92; color: var(--color-white); }

.dash-shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.dash-shortcut {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  text-align: center;
  transition: background .15s, border-color .15s;
}
.dash-shortcut:hover {
  background: var(--color-bg);
  border-color: var(--color-border-hover);
  color: var(--color-text);
}

/* 대시보드 — 다크 모드(보상 행·KPI 아이콘 톤) */
html[data-theme="dark"] .dash-kpi-icon--members {
  --dash-kpi-ico-fg: #60a5fa;
  --dash-kpi-ico-bg: rgba(96, 165, 250, 0.14);
}
html[data-theme="dark"] .dash-kpi-icon--org {
  --dash-kpi-ico-fg: #a5b4fc;
  --dash-kpi-ico-bg: rgba(165, 180, 252, 0.14);
}
html[data-theme="dark"] .dash-kpi-icon--teacher {
  --dash-kpi-ico-fg: #c4b5fd;
  --dash-kpi-ico-bg: rgba(196, 181, 253, 0.14);
}
html[data-theme="dark"] .dash-kpi-icon--sales {
  --dash-kpi-ico-fg: #4ade80;
  --dash-kpi-ico-bg: rgba(74, 222, 128, 0.12);
}
html[data-theme="dark"] .dash-reward-row--bolt {
  background: rgba(234, 179, 8, 0.09);
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.22);
}
html[data-theme="dark"] .dash-reward-row--flame {
  background: rgba(249, 115, 22, 0.09);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.24);
}
html[data-theme="dark"] .dash-reward-icon--bolt {
  background: rgba(234, 179, 8, 0.16);
  color: #fbbf24;
}
html[data-theme="dark"] .dash-reward-icon--flame {
  background: rgba(249, 115, 22, 0.16);
  color: #fb923c;
}

/* =====================================================
   로그인
   ===================================================== */

.login-body {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; margin: 0;
  position: relative;
  background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-purple-bg) 100%);
}
.login-wrap {
  background: var(--color-bg-card); padding: 48px 42px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg), var(--shadow-md);
  width: 380px;
}
.login-wrap h1 {
  margin: 0 0 8px; font-size: 26px;
  color: var(--color-heading); text-align: center; font-weight: 800;
  letter-spacing: -.5px;
}
.login-wrap p.subtitle { margin: 0 0 32px; color: var(--color-text-muted-light); font-size: 13px; text-align: center; }
.login-wrap .form-group { margin-bottom: 16px; }
.login-wrap .form-group label {
  display: block; margin-bottom: 6px;
  font-size: 13px; color: var(--color-text-secondary); font-weight: 600;
}
.login-wrap .form-group input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--color-border); border-radius: 6px;
  font-size: 14px; background: var(--color-bg-subtle);
  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.login-wrap .form-group input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  background: var(--color-bg-card);
}
.btn-login {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-white); border: none; border-radius: 6px;
  font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 8px;
  transition: all .18s;
  box-shadow: 0 4px 16px var(--color-indigo-shadow);
}
.btn-login:hover { background: linear-gradient(135deg, var(--color-primary-darker), var(--color-primary-dark)); box-shadow: 0 6px 20px var(--color-indigo-shadow); }
.msg-error {
  background: var(--color-danger-bg); border: 1px solid var(--color-danger-border);
  color: var(--color-danger); padding: 10px 14px; border-radius: 8px;
  font-size: 13px; margin-bottom: 16px;
}
.msg-success {
  background: var(--color-success-bg); border: 1px solid var(--color-success-border);
  color: var(--color-success); padding: 10px 14px; border-radius: 8px;
  font-size: 13px; margin-bottom: 16px;
}

/* =====================================================
   푸터
   ===================================================== */

.site-footer {
  background: var(--color-bg-subtle); border-top: 1px solid var(--color-border);
  color: var(--color-text-muted-light); font-size: 12px; flex-shrink: 0;
}
.footer-inner { padding: 12px 24px; text-align: center; line-height: 1.7; }
.footer-copy  { margin-top: 2px; color: var(--color-border-hover); }

/* =====================================================
   앱 클라이언트 관리
   ===================================================== */

/* 입력 + 버튼 가로 배치 */
.input-with-btn { display: flex; gap: 8px; align-items: center; }
.input-with-btn .form-control { flex: 1; }

/* 중복확인 결과 메시지 */
#idCheckMsg { font-size: .78rem; margin-top: 4px; display: block; }

/* 경고 안내 문구 */
.warn-text {
  margin-top: 12px; font-size: .82rem;
  color: var(--color-404); line-height: 1.5;
}
.warn-text-danger {
  font-size: .88rem; color: var(--color-red-500);
  margin-bottom: 16px; line-height: 1.6;
}

/* 시크릿 표시 모달 폭 */
.modal-box.modal-secret { max-width: 520px; }

/* 코드 블록 (appId / secret 표시) */
.code-box {
  font-size: .88rem; background: var(--color-bg);
  padding: 4px 8px; border-radius: 4px;
  word-break: break-all;
}

/* readonly 입력 필드 */
.form-control[readonly] { background: var(--color-bg-subtle); }

/* 검색 입력 최소 너비 */
.search-input-wide { min-width: 200px; }

/* =====================================================
   유틸리티
   ===================================================== */

button.link-btn {
  border: none; background: none; padding: 0; margin: 0;
  color: var(--color-link); cursor: pointer; font-weight: 500;
  font-size: inherit; transition: color .15s;
}
button.link-btn:hover { color: var(--color-link-hover); text-decoration: underline; }

/* 스크롤바 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-hover); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted-light); }

/* 리스트 테이블 공통 (활동 로그 + 기타 리스트) */
.list-table-wrap .dt-top-bar,
.usr-log-table-wrap .dt-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-topbar-border);
  background: var(--color-topbar-bg);
  gap: 16px;
  min-height: 58px;
  border-radius: 0;
}
.usr-log-table-wrap .usr-log-dt-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.usr-log-table-wrap .usr-log-dt-refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.usr-log-table-wrap .usr-log-dt-refresh-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 0;
  font-weight: 500;
  user-select: none;
}
.usr-log-table-wrap .usr-log-dt-refresh-label input[type="checkbox"] {
  cursor: pointer;
}
.usr-log-table-wrap .usr-log-refresh-interval {
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-input-text);
  background-color: var(--color-bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  min-width: 76px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.usr-log-table-wrap .usr-log-refresh-interval:hover {
  border-color: var(--color-input-border-hover);
}
.usr-log-table-wrap .usr-log-refresh-interval:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.list-table-wrap .dataTables_length label,
.usr-log-table-wrap .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.list-table-wrap .list-length-select,
.list-table-wrap .dataTables_length select,
.usr-log-table-wrap .usr-log-length-select {
  height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-input-text);
  background-color: var(--color-bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  min-width: 68px;
}
.list-table-wrap .list-length-select:hover,
.list-table-wrap .dataTables_length select:hover,
.usr-log-table-wrap .usr-log-length-select:hover {
  border-color: var(--color-input-border-hover);
}
.list-table-wrap .list-length-select:focus,
.list-table-wrap .dataTables_length select:focus,
.usr-log-table-wrap .usr-log-length-select:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.list-table-wrap .dataTables_filter,
.usr-log-table-wrap .usr-log-filter {
  padding: 0;
}
.list-table-wrap .dataTables_filter input[type=search],
.list-table-wrap .list-search-input,
.usr-log-table-wrap .usr-log-search-input {
  height: 36px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-input-text);
  background-color: var(--color-bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20' fill='%23adb5bd'%3E%3Cpath fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  width: 220px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, width .2s;
  box-sizing: border-box;
}
.list-table-wrap .dataTables_filter input[type=search]::placeholder,
.list-table-wrap .list-search-input::placeholder,
.usr-log-table-wrap .usr-log-search-input::placeholder {
  color: var(--color-input-border-hover);
  font-size: 14px;
}
.list-table-wrap .dataTables_filter input[type=search]:hover,
.list-table-wrap .list-search-input:hover,
.usr-log-table-wrap .usr-log-search-input:hover {
  border-color: var(--color-input-border-hover);
}
.list-table-wrap .dataTables_filter input[type=search]:focus,
.list-table-wrap .list-search-input:focus,
.usr-log-table-wrap .usr-log-search-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  width: 260px;
}

/* 리스트 테이블 — 페이징 바 */
.list-table-wrap .dt-bottom-bar,
.usr-log-table-wrap .dt-bottom-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 12px; padding: 13px 20px; border-top: 1px solid var(--color-topbar-border);
  background: var(--color-topbar-bg); min-height: 56px;
  border-radius: 0;
}
.list-table-wrap .dataTables_info,
.usr-log-table-wrap .dataTables_info {
  color: var(--color-text-secondary); font-size: .855rem; font-weight: 500;
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
}
.list-table-wrap .dataTables_paginate,
.usr-log-table-wrap .dataTables_paginate {
  display: flex; align-items: center; gap: 3px;
}
.list-table-wrap .dataTables_paginate .paginate_button,
.usr-log-table-wrap .dataTables_paginate .paginate_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; margin: 0;
  border: 1px solid var(--color-grid-border) !important;
  border-radius: var(--radius-md) !important; font-size: .855rem; font-weight: 500;
  color: var(--color-input-text) !important; cursor: pointer;
  background: var(--color-bg-card) !important;
}
.list-table-wrap .dataTables_paginate .paginate_button:hover,
.usr-log-table-wrap .dataTables_paginate .paginate_button:hover {
  background: var(--color-topbar-bg) !important;
  border-color: var(--color-grid-border) !important;
  color: var(--color-body) !important;
}
.list-table-wrap .dataTables_paginate .paginate_button.current,
.usr-log-table-wrap .dataTables_paginate .paginate_button.current {
  background: var(--color-table-header-bg) !important;
  border-color: var(--color-table-header-bg) !important;
  color: var(--color-table-header-text) !important; font-weight: var(--font-bold);
}
.list-table-wrap .dataTables_paginate .paginate_button.disabled,
.usr-log-table-wrap .dataTables_paginate .paginate_button.disabled {
  color: var(--color-input-border) !important;
  background: var(--color-bg-card) !important;
  cursor: not-allowed;
}
.list-table-wrap .dt-bottom-bar,
.usr-log-table-wrap .dt-bottom-bar { position: relative; }

/* 관리자 활동 로그 — 요청·응답「통합 보기」: 회원현황·계약상태 그리드와 동일 .badge 규격 */
.usr-log-table-wrap .code-table button.badge.usr-log-open-dual {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  line-height: 1.25;
  box-sizing: border-box;
  gap: 6px;
  cursor: pointer;
  vertical-align: middle;
}
.usr-log-table-wrap .code-table button.badge.usr-log-open-dual .usr-log-open-dual__icon {
  flex-shrink: 0;
  opacity: 0.88;
}
.usr-log-table-wrap .code-table button.badge.usr-log-open-dual:hover {
  filter: brightness(0.97);
}
.usr-log-table-wrap .code-table button.badge.usr-log-open-dual:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
html[data-theme="dark"] .usr-log-table-wrap .code-table button.badge.usr-log-open-dual:hover {
  filter: brightness(1.06);
}

.usr-log-table-wrap .usr-log-request-uri {
  display: inline-block;
  max-width: 100%;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
  color: var(--color-body);
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
}

/* 관리자 활동 로그 — 에러만 필터 (체크박스는 filter-field__control 미사용) */
.search-box--panel .filter-field--usr-log-errors {
  min-width: 0;
}
.search-box--panel .usr-log-errors-filter {
  min-width: 0;
}
.search-box--panel .usr-log-errors-filter__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search-box--panel .usr-log-errors-filter__check:hover {
  border-color: var(--color-input-border-hover);
}
.search-box--panel .usr-log-errors-filter__check:has(input:focus-visible) {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.search-box--panel .usr-log-errors-filter__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-primary, #2563eb);
}
.search-box--panel .usr-log-errors-filter__text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  line-height: 1.35;
  white-space: nowrap;
}
.usr-log-table-wrap tr.usr-log-row--api-error > td {
  background: rgba(220, 53, 69, 0.06);
}

html[data-theme="dark"] .usr-log-table-wrap tr.usr-log-row--api-error > td {
  background: rgba(248, 113, 113, 0.1);
}

.usr-log-table-wrap .usr-log-res-message {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  font-size: 0.82rem;
}

.usr-log-table-wrap .usr-log-res-message--error {
  color: var(--color-danger, #c0392b);
  font-weight: 500;
}

/* =====================================================
   포털 공통 유틸 — 인라인 스타일 대체 (table/폼/모달)
   ===================================================== */

/* 테이블 컬럼 너비 (code-table, form-table 공통) */
th.col-w-40 { width: 40px; }
th.col-w-50 { width: 50px; }
th.col-w-60 { width: 60px; }
th.col-w-70 { width: 70px; }
th.col-w-80 { width: 80px; }
th.col-w-90 { width: 90px; }
th.col-w-100 { width: 100px; }
th.col-w-110 { width: 110px; }
th.col-w-120 { width: 120px; }
th.col-w-130 { width: 130px; }
th.col-w-140 { width: 140px; }
th.col-w-150 { width: 150px; }
th.col-w-160 { width: 160px; }
th.col-w-180 { width: 180px; }
th.col-w-190 { width: 190px; }
th.col-w-200 { width: 200px; }
th.col-w-280 { width: 280px; }

/* 검색/폼 입력 */
.search-input--date { width: 140px; }
.search-input--keyword { min-width: 220px; }
.search-input--keyword-sm { min-width: 200px; }
.search-range-sep { margin: 0 4px; }

/* 모달 */
.modal-box--sm { max-width: 420px; }
.json-modal-content {
  max-height: 70vh; overflow: auto; padding: 16px;
  background: var(--color-bg-muted); border-radius: 6px; font-size: 13px;
  white-space: pre-wrap; word-break: break-all;
}

/* 관리자 활동 로그 — 요청·응답 통합 모달 (split panes) */
.modal-box--usr-log-dual {
  width: min(1920px, 99vw);
  max-width: 99vw;
  max-height: 94vh;
  min-height: min(84vh, 1060px);
}
.modal-box--usr-log-dual.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  z-index: 1001;
}
.modal-box--usr-log-dual.is-fullscreen .modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.modal-box--usr-log-dual.is-fullscreen .usr-log-dual-grid {
  min-height: 0;
  flex: 1;
  height: auto;
}
.modal-header--usr-log-dual {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  cursor: grab;
  user-select: none;
  padding: 6px 14px 8px !important;
}
.modal-header--usr-log-dual .usr-log-dual-subtitle {
  user-select: text;
  cursor: text;
}
.modal-header--usr-log-dual button {
  cursor: pointer;
}
.modal-header--usr-log-dual .modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.modal-box--usr-log-dual #jsonModalTitle {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  line-height: 1.2;
}
.json-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.modal-box--usr-log-dual .modal-close,
.modal-box--usr-log-dual .modal-icon-btn {
  width: 24px;
  height: 24px;
  font-size: 1rem;
}
.modal-icon-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  color: var(--color-table-header-text);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast);
  padding: 0;
}
.modal-icon-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
body.usr-log-json-modal-dragging {
  cursor: grabbing !important;
  user-select: none;
}
body.usr-log-json-modal-dragging .modal-header--usr-log-dual {
  cursor: grabbing;
}
.usr-log-dual-subtitle {
  font-size: 11px;
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.9);
  word-break: break-all;
  line-height: 1.35;
  margin: 0;
}
.usr-log-dual-subtitle code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82em;
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.usr-log-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  flex: 1;
  min-height: min(64vh, 780px);
}
@media (max-width: 900px) {
  .modal-box--usr-log-dual {
    min-height: auto;
    max-height: 92vh;
    width: min(100vw - 12px, 99vw);
  }
  .usr-log-dual-grid {
    grid-template-columns: 1fr;
    min-height: 36vh;
    flex: none;
  }
}
.usr-log-dual-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-card) 0%, var(--color-bg-subtle) 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.usr-log-dual-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}
.usr-log-dual-pane__head span.label-req,
.usr-log-dual-pane__head span.label-res { color: var(--color-text-secondary); }
.usr-log-dual-pane__head--json {
  flex-wrap: wrap;
  gap: var(--space-2);
  text-transform: none;
  letter-spacing: 0;
}
.usr-log-json-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.usr-log-json-tool {
  flex-shrink: 0;
}
/* 본문(JSON 트리) 바로 위 — 긴 JSON Pointer 전용 */
.usr-log-json-path-bar {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, #f1f5f9 0%, #e8eef5 100%);
  border-bottom: 1px solid var(--color-border-light);
}
.usr-log-json-path-bar--res {
  background: linear-gradient(180deg, #f1f5f9 0%, #e8eef5 100%);
}
.usr-log-json-path-bar__label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.usr-log-json-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.usr-log-json-search {
  flex: 1;
  min-width: 120px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
}
.usr-log-json-search:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.usr-log-json-search-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.json-tree-key.json-tree-search-hit,
.json-tree-val.json-tree-search-hit,
.json-tree-idx.json-tree-search-hit {
  background: rgba(250, 204, 21, 0.38);
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.45);
  border-radius: 2px;
}
pre.usr-log-json-raw-fallback.json-tree-search-hit {
  background: rgba(250, 204, 21, 0.22);
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.45);
  border-radius: var(--radius-md);
}
.usr-log-json-path-bar__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
.usr-log-json-path-code {
  flex: 1;
  min-width: 0;
  display: block;
  margin: 0;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', ui-monospace, 'Malgun Gothic', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: #0f172a;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 6.5em;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.usr-log-json-path-code:empty::before {
  content: attr(data-path-hint);
  color: var(--color-text-muted-light);
  font-style: italic;
  font-size: 11px;
}
.usr-log-json-path-copy {
  flex-shrink: 0;
  margin-top: 2px;
}
.usr-log-json-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.usr-log-json-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-2) var(--space-3);
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 0;
}
.usr-log-json-raw.is-hidden { display: none !important; }
.usr-log-json-empty,
.usr-log-json-notjson {
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.usr-log-json-notjson {
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-2);
}
.usr-log-json-raw-fallback {
  margin: 0;
  max-height: none;
  background: var(--color-bg-card);
  color: var(--color-text);
}
/* JSON 트리 뷰어 */
.json-tree-root { font-size: 12px; line-height: 1.55; }
.json-tree-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0; }
.json-tree-caret {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-user-select: none;
  user-select: none;
}
.json-tree-caret:hover {
  background: rgba(100, 116, 139, 0.25);
  color: #e2e8f0;
}
.json-tree-caret:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 1px;
}
.json-bracket { color: #94a3b8; font-weight: 600; }
.json-ellipsis { color: #64748b; padding: 0 2px; }
.json-tree-meta { color: #64748b; font-size: 11px; font-weight: 400; }
.json-tree-body { margin: 2px 0 4px; }
.json-tree-foot { margin: 2px 0; }
.json-tree-kv {
  margin: 1px 0;
  border-radius: 4px;
}
.json-tree-key { color: #7dd3fc; }
.json-tree-colon { color: #94a3b8; }
.json-tree-idx {
  color: #a5b4fc;
  margin-right: 4px;
  -webkit-user-select: none;
  user-select: none;
}
.json-tree-val.json-str { color: #86efac; }
.json-tree-val.json-num { color: #fcd34d; }
.json-tree-val.json-bool { color: #f472b6; }
.json-tree-val.json-null { color: #94a3b8; font-style: italic; }
.modal-box--usr-log-dual .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: var(--space-2) var(--space-4) var(--space-3) !important;
}
.usr-log-dual-pre {
  margin: 0;
  padding: var(--space-3);
  flex: 1;
  overflow: auto;
  min-height: 0;
  max-height: none;
  font-family: 'JetBrains Mono', ui-monospace, 'Malgun Gothic', monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text);
  background: var(--color-bg-card);
}
.usr-log-dual-pre.is-empty {
  color: var(--color-text-muted-light);
  font-style: italic;
}
.modal-desc { font-size: var(--text-md); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.modal-divider { border: none; border-top: 1px solid var(--color-topbar-border); margin: var(--space-4) 0; }
.modal-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); margin-bottom: var(--radius-sm); }
.modal-content-box {
  background: var(--color-topbar-bg); border: 1px solid var(--color-topbar-border); border-radius: var(--radius-md);
  padding: var(--space-3); min-height: 80px; font-size: var(--text-md); line-height: var(--leading-relaxed); white-space: pre-wrap;
}

/* 레이아웃/유틸 */
.pagination-wrap { margin-top: var(--space-4); text-align: center; }
.d-none { display: none !important; }
.form-inline { display: inline; }
.form-row-flex { display: flex; gap: var(--space-2); align-items: center; }
.flex-1 { flex: 1; }
.form-hint { font-size: var(--text-xs); margin-top: var(--space-1); display: block; }
.form-hint-sm { font-size: var(--text-xs); color: var(--color-text-muted-light); margin-top: 3px; display: block; }
.btn-nowrap { white-space: nowrap; }
.form-control--w-80 { width: 80px; }
.form-control--w-100 { width: 100px; }
.form-control--w-150 { width: 150px; }
.form-control--w-160 { width: 160px; }
.form-control--w-200 { width: 200px; }
.input-hidden { display: none; }
.attach-list-wrap { margin-bottom: var(--space-2); }
.new-file-list { margin-top: var(--space-2); }
.btn-add-file { font-size: 12px; padding: var(--space-1) var(--space-3); }
.file-hint { font-size: 11px; color: var(--color-text-muted-light); margin-left: var(--space-2); }
.text-muted { color: var(--color-text-muted-light); }
.muted { color: var(--color-text-muted); }
.badge-mr { margin-right: var(--space-1); }

/* FAQ 첨부 아이템 (JS에서 class로 사용) */
.attach-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.attach-item-name { font-size: 12px; color: var(--color-text); flex: 1; }
.attach-item-size { color: var(--color-text-muted-light); }
.attach-item-link { font-size: 12px; color: var(--color-blue-500); flex: 1; text-decoration: none; }
.btn-remove-attach {
  background: none; border: none; color: var(--color-red-500); cursor: pointer; font-size: 14px; padding: 0 4px;
}
.form-control--readonly-bg { background: var(--color-bg); }

/* LIST.TEXT 보기 추가 UI */
.list-text-container { margin-bottom: var(--space-2); }
.list-text-items { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.list-text-item {
  display: flex; align-items: center; gap: var(--space-3);
}
.list-text-item .list-text-input { flex: 1; }
.list-text-item .btn-remove-list-item {
  flex-shrink: 0;
}

.list-pair-container { margin-bottom: var(--space-2); }
.list-pair-items { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.list-pair-item .list-pair-extra--hidden,
.list-pair-grid-head .list-pair-extra--hidden {
  display: none !important;
}
.list-pair-item .btn-remove-pair-item {
  flex-shrink: 0;
}

/* =====================================================
   공통코드 관리 (master-detail)
   ===================================================== */
.code-manager-page .page-header { margin-bottom: var(--space-5); }
.code-manager-layout {
  display: flex; gap: var(--space-6); min-height: 760px;
}
.code-grp-panel {
  flex: 0 0 680px;
  text-align: left;
  background: var(--color-bg-card);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
}
.code-grp-panel .panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-4); border-bottom: 1px solid var(--color-topbar-border);
  background: var(--color-topbar-bg);
}
.code-grp-panel .panel-title {
  margin: 0; font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-heading);
}
.grp-list {
  overflow-y: auto;
  max-height: 700px;
  font-size: var(--text-md);
  text-align: left;
  border-top: 1px solid var(--color-grid-border);
  display: flex;
  flex-direction: column;
}
.grp-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-grid-border);
  transition: background 0.15s ease;
}
.grp-item:nth-child(odd) { background: var(--color-table-row-odd); }
.grp-item:nth-child(even) { background: var(--color-table-row-even); }
.grp-item:hover { background: var(--color-topbar-bg) !important; }
.grp-item.active { background: rgba(100, 116, 139, 0.18) !important; }
.grp-item-label {
  flex: 2 1 260px;
  min-width: 0;
  font-weight: var(--font-medium);
  color: var(--color-heading);
  font-size: var(--text-md);
  line-height: 1.4;
  text-align: left;
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
  cursor: pointer;
}
.grp-item-code,
.grp-item-badge,
.grp-item-actions { cursor: pointer; }
.grp-item.active .grp-item-label { color: var(--color-table-header-bg); }
.grp-item-code {
  flex: 1 1 200px;
  min-width: 0;
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  text-align: left;
  white-space: nowrap;
  overflow-x: auto;
}
.grp-item.active .grp-item-code { color: var(--color-table-header-bg); opacity: 0.9; }
/* 우측 코드 그리드와 동일: .badge.badge-active / .badge-inactive */
.grp-item-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}
.grp-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
}
.code-grp-panel .btn-xs { padding: 6px 10px; font-size: 13px; min-width: 28px; min-height: 28px; }
.btn-xs { padding: 2px 6px; font-size: 11px; }
.code-detail-panel {
  flex: 1; min-width: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.code-content { padding: var(--space-5); }
.code-content--hidden { display: none; }
.code-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-topbar-border);
}
.code-detail-header .detail-title { margin: 0 0 var(--space-1); }
.code-detail-header .code-detail-grp-cd { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.code-manager-page .detail-empty {
  margin: var(--space-6);
}
.grp-empty {
  width: 100%;
  padding: var(--space-6); text-align: center; color: var(--color-text-muted);
  border-top: 1px solid var(--color-grid-border);
  border-bottom: 1px solid var(--color-grid-border);
  background: var(--color-table-row-odd);
}

/* =====================================================
   강좌 구조 편집 (tree + detail panel)
   ===================================================== */
.structure-editor {
  display: flex; gap: var(--space-6); min-height: 420px;
}
.structure-tree-panel,
.structure-detail-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.structure-tree-panel { flex: 0 0 340px; }
.structure-editor--template .structure-tree-panel { flex-basis: 440px; }
.structure-editor--template .structure-tree-panel--scroll { flex-basis: 440px; }
.structure-detail-panel { flex: 1; min-width: 0; }
/* 콘텐츠 상세: 구성 목록 스크롤 + 검색 */
.structure-tree-panel--scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 140px);
}
.structure-tree-panel--scroll .tree-container--scroll {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.structure-tree-panel--scroll .panel-title,
.structure-tree-panel--scroll .tree-panel-search {
  flex-shrink: 0;
}
.structure-tree-panel--scroll .tree-add-section {
  flex-shrink: 0;
}
.tree-item.tree-item--filter-hidden {
  display: none !important;
}
/* 콘텐츠 상세: 스크롤 영역 + 하단 저장 바 */
.structure-detail-panel--lesson {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 140px);
}
.structure-detail-panel--lesson #detailContent.lesson-content-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  scroll-padding-bottom: var(--space-4);
}
.structure-editor:has(.structure-detail-panel--lesson) {
  gap: var(--space-5);
  min-height: min(68vh, 680px);
}
.structure-editor:has(.structure-detail-panel--lesson) .structure-tree-panel--scroll .panel-title {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom-width: 1px;
  border-bottom-color: var(--color-border);
}
.structure-editor:has(.structure-detail-panel--lesson) .structure-tree-panel--scroll .tree-panel-search {
  margin-bottom: var(--space-2);
}
.structure-editor:has(.structure-detail-panel--lesson) .tree-add-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top-color: var(--color-border-light);
}
.structure-detail-panel--lesson .detail-empty {
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.structure-detail-panel--lesson .detail-form > .detail-type-badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 3px 9px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.structure-detail-panel--lesson #lessonForm .detail-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
.structure-detail-panel--lesson .content-detail-accordion {
  border-color: var(--color-border);
}
.structure-detail-panel--lesson .content-detail-accordion-header {
  background: var(--color-bg-muted);
}
.structure-detail-panel--lesson .lesson-editor-sticky-save {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  margin-top: auto;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.05);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  z-index: 5;
}
.structure-detail-panel--lesson .lesson-editor-sticky-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.structure-detail-panel--lesson .lesson-editor-kbd {
  display: inline-block;
  padding: 2px 7px;
  font-size: 0.7rem;
  font-family: ui-monospace, monospace;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}
.structure-detail-panel--lesson .lesson-editor-kbd-plus {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin: 0 1px;
}
/* 레슨 편집 — 썸네일 업로드 카드 */
.structure-detail-panel--lesson .lesson-thumb-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-4);
  max-width: 100%;
}
.structure-detail-panel--lesson .lesson-thumb-preview-wrap {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-muted);
  box-shadow: var(--shadow-card);
}
.structure-detail-panel--lesson .lesson-thumb-preview-wrap[hidden] {
  display: none !important;
}
.structure-detail-panel--lesson .lesson-thumb-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: top;
}
.structure-detail-panel--lesson .lesson-thumb-upload-col {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.structure-detail-panel--lesson .lesson-thumb-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.structure-detail-panel--lesson .lesson-thumb-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 108px;
  padding: var(--space-4) var(--space-3);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.structure-detail-panel--lesson .lesson-thumb-dropzone:hover,
.structure-detail-panel--lesson .lesson-thumb-dropzone:focus-within {
  border-color: var(--color-table-header-bg);
  background: var(--color-bg-muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-table-header-bg) 18%, transparent);
}
.structure-detail-panel--lesson .lesson-thumb-dropzone--active {
  border-color: var(--color-table-header-bg);
  background: var(--color-bg-muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-table-header-bg) 28%, transparent);
}
.structure-detail-panel--lesson .lesson-thumb-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
}
.structure-detail-panel--lesson .lesson-thumb-dropzone-icon::before {
  content: '+';
}
.structure-detail-panel--lesson .lesson-thumb-dropzone-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-heading);
}
.structure-detail-panel--lesson .lesson-thumb-dropzone-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  max-width: 280px;
}
.structure-detail-panel--lesson .lesson-thumb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.panel-title {
  margin: 0 0 var(--space-4); font-size: var(--text-md); font-weight: var(--font-semibold);
  color: var(--color-heading); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-table-header-bg);
}
.panel-badge { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; margin-left: 8px; }
.tree-panel-search {
  display: flex; gap: 8px; align-items: stretch; margin-bottom: var(--space-3);
}
.tree-panel-search .form-control { flex: 1; min-width: 0; }
.tree-panel-search .btn { flex-shrink: 0; white-space: nowrap; }
.detail-title--edit-label {
  font-size: var(--text-sm); margin: 0 0 6px; font-weight: var(--font-semibold); color: var(--color-text-muted);
}
.template-detail-title-input {
  font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-4); width: 100%;
}
.tree-add-section { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-panel-border); }
.tree-container { font-size: var(--text-md); }
.tree-root, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree-children { padding-left: var(--space-5); display: none; }
.tree-children.open, .tree-item.open > .tree-children { display: block; }

/* 콘텐츠 상세 편집 — 구성 목록 트리 (조직도형 아코디언 UI) */
.lesson-edit-tree {
  border: 1px solid var(--lesson-tree-shell-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--lesson-tree-shell-bg);
}
.lesson-edit-tree .tree-root,
.lesson-edit-tree .tree-children {
  background: transparent;
}
.lesson-edit-tree .tree-children {
  padding-left: 0;
}
.lesson-edit-tree .tree-item {
  margin: 0;
  padding: 0;
}
.lesson-edit-tree .tree-item > .tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--lesson-tree-row-border);
  background: var(--lesson-tree-row-bg);
  transition: background 0.12s ease;
}
.lesson-edit-tree .tree-activity-group > .tree-row {
  padding-left: 28px;
}
.lesson-edit-tree .tree-activity > .tree-row {
  padding-left: 48px;
}
.lesson-edit-tree .tree-node-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-radius: 0;
}
.lesson-edit-tree .tree-row-trail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.lesson-edit-tree .tree-marker {
  flex-shrink: 0;
}
.lesson-edit-tree .tree-marker--lesson {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.2);
}
.lesson-edit-tree .lesson-activity-drag-handle {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  cursor: grab;
  color: var(--lesson-tree-chevron);
  user-select: none;
  line-height: 1;
}
.lesson-edit-tree .lesson-activity-drag-handle:active { cursor: grabbing; }
.lesson-edit-tree .lesson-activity-group-ghost {
  opacity: 0.45;
  background: var(--color-topbar-bg);
}
.lesson-edit-tree .tree-marker--group {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fb8c00;
  box-shadow: 0 0 0 1px rgba(251, 140, 0, 0.25);
}
.lesson-edit-tree .tree-marker--leaf {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #43a047;
  box-shadow: 0 0 0 1px rgba(67, 160, 71, 0.25);
}
.lesson-edit-tree .lesson-tree-chevron {
  width: 24px;
  height: 24px;
  font-size: 13px;
  line-height: 1;
  color: var(--lesson-tree-chevron);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.lesson-edit-tree .tree-item > .tree-row:hover {
  background: var(--lesson-tree-row-hover);
}
.lesson-edit-tree .tree-item > .tree-row:hover .tree-node-inner {
  background: transparent !important;
}
.lesson-edit-tree .tree-item.selected > .tree-row {
  background: var(--lesson-tree-row-selected);
}
.lesson-edit-tree .tree-item.selected .tree-node-inner {
  background: transparent !important;
  color: inherit;
}
.lesson-edit-tree .tree-item.selected .tree-label {
  color: var(--lesson-tree-label-selected);
  font-weight: var(--font-semibold);
}
.lesson-edit-tree .tree-label {
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--lesson-tree-label);
}
.tree-item {
  padding: var(--space-2) var(--space-2); cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s ease;
}
/* 항목별 개별 hover (계층 트리에서 자식 hover 시 부모 배경 방지) */
.tree-item > .tree-row:hover .tree-node-inner {
  background: var(--color-topbar-bg);
  border-radius: var(--radius-md);
}
.tree-item.selected .tree-node-inner {
  background: rgba(100, 116, 139, 0.18);
  color: var(--color-table-header-bg);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
}
.tree-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 32px; width: 100%;
}
.tree-node-inner {
  display: flex; align-items: center; gap: var(--space-2); min-height: 28px; flex: 1; min-width: 0;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}
.tree-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  opacity: 0; transition: opacity 0.15s ease;
}
/* 항목별 개별 hover - 해당 행에만 삭제 버튼 표시 (계층 트리 통일) */
.tree-item > .tree-row:hover .tree-actions, .tree-item.selected .tree-actions { opacity: 1; }
.tree-btn {
  width: 24px; height: 24px; padding: 0; border-radius: var(--radius-sm);
  background: var(--color-bg-card); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.tree-btn-add {
  color: var(--color-table-header-bg); border: 1px solid var(--color-grid-border);
}
.tree-btn-add:hover { background: var(--color-topbar-bg); border-color: var(--color-table-header-bg); color: var(--color-table-header-bg); }
.tree-btn-delete {
  color: var(--color-danger); border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
}
.tree-btn-delete:hover { background: var(--color-danger-border); color: var(--color-danger); border-color: var(--color-danger); }
.tree-btn-linked {
  color: var(--color-table-header-bg);
  border: 1px solid var(--color-grid-border);
  background: var(--color-bg-card);
}
.tree-btn-linked:hover {
  background: var(--color-topbar-bg);
  border-color: var(--color-table-header-bg);
}
.tree-template .tree-btn-linked { flex-shrink: 0; }
.tree-action-svg { width: 14px; height: 14px; }
.tree-toggle {
  width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); transition: transform 0.2s ease;
}
.tree-toggle .tree-chevron { width: 14px; height: 14px; }
.tree-toggle.open .tree-chevron { transform: rotate(-90deg); }
.tree-toggle--leaf { opacity: 0.4; }
.tree-toggle--leaf .tree-chevron { width: 10px; height: 10px; }
.tree-icon { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.tree-icon .tree-svg { width: 100%; height: 100%; flex-shrink: 0; }
.tree-program .tree-icon { color: var(--color-table-header-bg); }
.tree-course .tree-icon { color: var(--color-table-header-bg); }
.tree-unit .tree-icon { color: var(--color-table-header-bg); }
.tree-lesson .tree-icon { color: var(--color-table-header-bg); }
.tree-template .tree-icon { color: var(--color-table-header-bg); }
.tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-template .tree-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 8px;
  align-items: center;
  white-space: nowrap;
  overflow: visible;
}
.tree-template .tree-label-title {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.tree-template .tree-label-pk { margin-left: 0; }
.tree-template .tree-label-ver { margin-left: 0; }
.tree-template .tree-label-pk--empty { display: none; }

/* 템플릿 트리: 한 줄 전체 표시를 위해 가로 스크롤 허용 */
.structure-editor--template .tree-container--scroll { overflow-x: auto; }
.structure-editor--template #treeRoot .tree-template .tree-node-inner { min-width: max-content; }

/* 템플릿 — 연결 액티비티 모달 */
.modal-box.modal-template-linked { max-width: 920px; width: min(92vw, 920px); }
.modal-header--template-linked .modal-header-text { min-width: 0; }
.modal-header--template-linked .modal-title { margin: 0; }
.modal-body--template-linked { padding: var(--space-4) var(--space-5); background: var(--color-topbar-bg); }
.template-linked-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.template-linked-count {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--color-table-header-bg); background: rgba(100, 116, 139, 0.12);
  border: 1px solid var(--color-grid-border);
}
.template-linked-hint { font-size: var(--text-sm); }
.template-linked-loading {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm);
}
.template-linked-loading-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-table-header-bg);
  animation: templateLinkedPulse 0.9s ease-in-out infinite;
}
@keyframes templateLinkedPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
.template-linked-empty {
  text-align: center; padding: var(--space-8) var(--space-5);
  background: var(--color-bg-card); border: 1px dashed var(--color-panel-border);
  border-radius: var(--radius-lg);
}
.template-linked-empty-icon { font-size: 2rem; margin-bottom: var(--space-2); }
.template-linked-empty-title { font-weight: var(--font-semibold); margin: 0 0 4px; }
.template-linked-empty-desc { margin: 0; font-size: var(--text-sm); }
.template-linked-table-wrap {
  max-height: min(52vh, 480px); overflow: auto;
  border: 1px solid var(--color-panel-border); border-radius: var(--radius-lg);
  background: var(--color-bg-card);
}
.template-linked-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.template-linked-table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 12px; text-align: left; font-weight: var(--font-semibold);
  background: var(--color-table-header-bg); color: var(--color-table-header-text);
  border-bottom: 1px solid var(--color-panel-border);
}
.template-linked-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--color-topbar-border);
  vertical-align: middle;
}
.template-linked-table tbody tr:hover td { background: rgba(100, 116, 139, 0.06); }
.template-linked-table tbody tr:last-child td { border-bottom: none; }
.template-linked-table__lesson { font-weight: var(--font-medium); color: var(--color-text-primary); }
.template-linked-table__sub { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.template-linked-table__activity { color: var(--color-text-secondary); }
.template-linked-table__ver {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: var(--font-semibold);
  background: rgba(100, 116, 139, 0.1); color: var(--color-table-header-bg);
}
.template-linked-table__edit {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.template-linked-table__icon { width: 14px; height: 14px; flex-shrink: 0; }
.template-linked-modal__footer { border-top: 1px solid var(--color-panel-border); }
.tree-label-pk {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--color-grid-border);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--font-semibold);
  color: var(--color-table-header-bg);
  background: rgba(100, 116, 139, 0.08);
}
.tree-label-ver {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.tree-add {
  font-size: 13px; font-weight: 600; color: var(--color-table-header-bg); cursor: pointer;
  padding: 0 6px; opacity: 0.7; flex-shrink: 0;
}
.tree-add:hover { opacity: 1; color: var(--color-table-header-bg); }
.tree-footer {
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-panel-border);
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.tree-footer-btn {
  font-size: var(--text-sm); padding: var(--space-1) var(--space-3);
  background: var(--color-topbar-bg); border: 1px solid var(--color-grid-border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-secondary);
  transition: all 0.15s ease;
}
.tree-footer-btn:hover {
  background: rgba(100, 116, 139, 0.15); color: var(--color-table-header-bg); border-color: var(--color-table-header-bg);
}
.detail-empty {
  color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-8);
  text-align: center; border: 2px dashed var(--color-panel-border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-topbar-bg) 0%, rgba(100, 116, 139, 0.04) 100%);
}
.detail-content { padding: var(--space-2); }
.detail-form { }
.detail-header {
  margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-topbar-border);
}
.detail-type-badge {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold);
  padding: 4px 10px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--color-topbar-bg) 0%, rgba(100, 116, 139, 0.12) 100%);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.detail-title {
  font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-heading);
  margin: 0; line-height: var(--leading-tight);
}
.detail-actions { margin-top: var(--space-4); display: flex; gap: var(--space-2); }
.lesson-connect-section {
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-topbar-border);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.lesson-connect-block {
  border: 1px solid var(--color-panel-border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-bg-card);
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.06);
}
.lesson-connect-block-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); font-weight: var(--font-semibold);
}
.lesson-connect-add-block .lesson-connect-block-header {
  background: linear-gradient(135deg, var(--color-topbar-bg) 0%, rgba(100, 116, 139, 0.06) 100%);
  border-bottom: 1px solid var(--color-topbar-border);
}
.lesson-connect-connected-block .lesson-connect-block-header {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.12) 0%, var(--color-topbar-bg) 100%);
  border-bottom: 1px solid var(--color-panel-border);
}
.lesson-connect-block-title {
  font-size: var(--text-md);
  color: var(--color-heading);
}
.lesson-connect-block-badge {
  font-size: var(--text-xs); font-weight: 500; padding: 4px 10px;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-grid-border);
}
.lesson-connect-add-block .form-control { margin: var(--space-3) var(--space-4) var(--space-2); }
.lesson-connect-add-block .lesson-connect-list { margin: 0 var(--space-4) var(--space-4); padding: 0; }
.lesson-connect-connected-block .connected-lesson-list { margin: 0; padding: var(--space-3) var(--space-4); }
.lesson-connect-list > p,
.connected-lesson-list > p,
.lesson-connect-list-msg {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  margin: 0;
  border-radius: var(--radius-md);
}
.lesson-connect-list > p,
.connected-lesson-list > p,
.lesson-connect-list-msg--empty {
  color: var(--color-text-muted);
  border: 2px dashed var(--color-panel-border);
  background: var(--color-topbar-bg);
}
.lesson-connect-list-msg--error {
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
}
.lesson-connect-item-main {
  flex: 1;
  min-width: 0;
}
.lesson-connect-item-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.lesson-connect-section .form-control { margin-bottom: 0; }
.lesson-connect-list, .connected-lesson-list { max-height: 200px; overflow-y: auto; }
.lesson-connect-item, .connected-lesson-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-topbar-border);
  transition: background 0.15s ease;
}
.connected-lesson-sortable {
  list-style: none; margin: 0; padding: 0;
}
.connected-lesson-item {
  justify-content: flex-start; gap: var(--space-2);
}
.connected-lesson-drag-handle {
  cursor: grab; flex-shrink: 0; color: var(--color-text-muted);
  padding: 0 var(--space-1); line-height: 1; user-select: none; font-size: var(--text-md);
}
.connected-lesson-drag-handle:active { cursor: grabbing; }
.connected-lesson-main {
  flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
}
.connected-lesson-ord {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--color-heading);
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.connected-lesson-item .btn-disconnect-lesson { flex-shrink: 0; margin-left: auto; }
.connected-lesson-ghost {
  opacity: 0.55; background: var(--color-topbar-bg) !important;
}
.lesson-connect-item:last-child, .connected-lesson-item:last-child { border-bottom: none; }
.lesson-connect-item:hover, .connected-lesson-item:hover { background: var(--color-topbar-bg); }

.lesson-access-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 4px;
}
.lesson-access-pill--free {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.lesson-access-pill--paid {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.3);
}
html[data-theme="dark"] .lesson-access-pill--free {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.4);
}
html[data-theme="dark"] .lesson-access-pill--paid {
  background: rgba(129, 140, 248, 0.18);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.35);
}
.linked-lesson-info { padding: var(--space-2); }
.linked-lesson-box {
  background: linear-gradient(135deg, var(--color-topbar-bg) 0%, rgba(100, 116, 139, 0.08) 50%, rgba(100, 116, 139, 0.04) 100%);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: 0 2px 12px rgba(100, 116, 139, 0.1);
}
.linked-lesson-title {
  font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-heading);
  margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2);
}
.linked-lesson-title::before {
  content: ''; width: 4px; height: 18px; background: var(--color-primary); border-radius: 2px;
}
.linked-lesson-desc {
  font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-2);
  line-height: var(--leading-relaxed);
}
.linked-lesson-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); padding: var(--space-2) var(--space-4);
  background: var(--color-bg-card); border: 1px solid var(--color-grid-border);
  border-radius: var(--radius-md); color: var(--color-table-header-bg);
  font-weight: var(--font-medium); text-decoration: none;
  transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(100, 116, 139, 0.12);
}
.linked-lesson-link:hover {
  background: var(--color-topbar-bg); border-color: var(--color-table-header-bg);
  color: var(--color-table-header-bg); transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.2);
}
.linked-lesson-id {
  font-weight: var(--font-semibold); margin-left: var(--space-1);
  padding: 2px 8px; background: var(--color-topbar-bg); color: var(--color-table-header-bg);
  border: 1px solid var(--color-grid-border); border-radius: var(--radius-sm);
}
.btn-back { margin-bottom: var(--space-2); }

/* =====================================================
   템플릿 관리 — 리소스 카드/탭
   ===================================================== */
.edit-section .section-title { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-table-header-bg); margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-table-header-bg); }
.link-add-resource {
  display: inline-block; margin-top: var(--space-3); color: var(--color-table-header-bg);
  font-weight: var(--font-medium); cursor: pointer;
}
.link-add-resource:hover { text-decoration: underline; color: var(--color-table-header-bg); }
.resource-card {
  border: 1px solid var(--color-panel-border); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-2);
  background: var(--color-bg-card);
}
.resource-card-header {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.resource-sort-handle {
  cursor: grab; color: var(--color-text-muted); font-size: 1.1em; padding: 0 4px;
  user-select: none; -webkit-user-select: none;
}
.resource-sort-handle:active { cursor: grabbing; }
.resource-ord {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  background: var(--color-table-header-bg); color: var(--color-table-header-text);
  border-radius: var(--radius-sm);
}
.resource-label { font-weight: var(--font-semibold); color: var(--color-heading); }
.resource-key { font-size: var(--text-xs); color: var(--color-text-muted); }
.resource-type {
  font-size: var(--text-xs); padding: 2px 6px;
  background: var(--color-topbar-bg); border: 1px solid var(--color-grid-border);
  border-radius: var(--radius-sm); color: var(--color-table-header-bg);
}
.resource-required { font-size: var(--text-xs); color: var(--color-danger); font-weight: var(--font-medium); }
.resource-actions { margin-left: auto; }
.resource-add-box {
  padding: var(--space-4); border: 2px dashed var(--color-panel-border);
  border-radius: var(--radius-md); background: linear-gradient(180deg, var(--color-topbar-bg) 0%, rgba(100, 116, 139, 0.04) 100%);
}
.resource-edit-title { font-size: var(--text-md); font-weight: var(--font-semibold); margin: 0 0 var(--space-3); color: var(--color-table-header-bg); }
.resource-edit-actions { margin-top: var(--space-3); display: flex; justify-content: flex-end; }
.section-subtitle { font-size: var(--text-md); font-weight: var(--font-semibold); margin: 0 0 var(--space-3); color: var(--color-table-header-bg); }
.section-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.tab-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-grid-border);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-weight: var(--font-semibold);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.tab-btn:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-hover);
  color: var(--color-text);
}
.tab-btn.active {
  background: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  border-color: var(--color-table-header-bg);
}
.section-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.form-actions { margin-top: var(--space-3); }

/* =====================================================
   콘텐츠 상세 편집 — 섹션/아코디언
   ===================================================== */
.content-detail-section { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-topbar-border); }
.content-detail-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.content-detail-section-title { font-size: var(--text-md); font-weight: var(--font-semibold); margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2); color: var(--color-heading); }
.content-detail-section-title .info-icon { color: var(--color-text-muted); font-size: var(--text-sm); cursor: help; }
.content-detail-accordion { border: 1px solid var(--color-panel-border); border-radius: var(--radius-md); overflow: hidden; }
.content-detail-accordion-header { padding: var(--space-3) var(--space-4); background: var(--color-topbar-bg); cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.content-detail-accordion-header:hover { background: rgba(100, 116, 139, 0.08); }
.content-detail-accordion-body { padding: var(--space-4); background: var(--color-bg-card); }
.content-detail-placeholder {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.content-detail-placeholder p { margin: 0; }
.content-detail-placeholder .btn { margin-top: var(--space-3); }
.template-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.content-detail-section-title-meta {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-text-muted-light);
}
.group-org-course-table-wrap { margin-top: var(--space-3); }
.badge--org {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  border: 1px solid var(--badge-neutral-border);
}
.badge--code {
  background: var(--badge-purple-bg);
  color: var(--badge-purple-fg);
  border: 1px solid var(--badge-purple-border);
}
/* 목록 그리드: 행 클릭 링크(table-link / link-title / link-row) 색·밑줄 통일 */
.list-page .code-table a.table-link,
.list-page .code-table button.table-link,
.list-page .code-table a.link-title,
.list-page .code-table a.link-row {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--font-medium);
  transition: color 0.15s ease;
}
.list-page .code-table button.table-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}
.list-page .code-table a.table-link:hover,
.list-page .code-table button.table-link:hover,
.list-page .code-table a.link-title:hover,
.list-page .code-table a.link-row:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
.list-page .code-table a.table-link:focus-visible,
.list-page .code-table button.table-link:focus-visible,
.list-page .code-table a.link-title:focus-visible,
.list-page .code-table a.link-row:focus-visible {
  color: var(--color-primary-dark);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.question-card { border: 1px solid var(--color-panel-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--color-bg-card); }
.question-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); font-weight: var(--font-semibold); color: var(--color-heading); }
.question-add-row { margin-top: var(--space-3); }

/* =====================================================
   콘텐츠 상세 편집 (portal/learn/lesson/lessonEdit.html)
   ===================================================== */
.select-options-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.select-options-row .btn-add-extra-col:disabled,
.select-options-row .btn-remove-extra-col:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   콘텐츠 상세 편집 — lessonEdit (포털 공통 폼·패널 톤과 정렬)
   --------------------------------------------------------------------------- */
.lesson-content-editor {
  margin: var(--space-2) 0 0;
  padding: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.lesson-content-editor .detail-title {
  margin: 0 0 var(--space-4);
}
.lesson-content-editor .detail-form .page-header-actions {
  margin-bottom: var(--space-3);
}
.lesson-content-editor #activityForm .activity-form-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.lesson-content-editor .activity-form-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.lesson-content-editor .activity-version-check {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.lesson-content-editor .activity-form-toolbar--policy .auth-child-item {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* 액티비티: 2열 + 설명(낮은 최소 높이) + 템플릿·프롬프트 */
.lesson-content-editor .activity-meta-grid {
  width: 100%;
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lesson-content-editor .activity-meta-row--2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: 0;
  align-items: start;
}
.lesson-content-editor .activity-meta-row--full {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 6px 12px;
  align-items: start;
  margin: 0;
}
.lesson-content-editor .activity-meta-pair {
  display: grid;
  grid-template-columns: minmax(88px, 108px) minmax(0, 1fr);
  gap: 6px 10px;
  align-items: start;
  min-width: 0;
}
.lesson-content-editor .activity-meta-th {
  padding: 6px 4px 6px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-input-text);
  line-height: 1.35;
}
.lesson-content-editor .activity-meta-td {
  min-width: 0;
}
.lesson-content-editor .activity-meta-td > .form-control:first-child {
  width: 100%;
  max-width: 100%;
}
.lesson-content-editor .activity-meta-row--full .activity-meta-th {
  padding-top: 8px;
}
@media (max-width: 768px) {
  .lesson-content-editor .activity-meta-row--2 {
    grid-template-columns: 1fr;
  }
}

.lesson-content-editor .detail-form table.form-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--space-2);
}
.lesson-content-editor .detail-form table.form-table > tbody > tr > th,
.lesson-content-editor .detail-form table.form-table > tr > th {
  display: table-cell;
  width: 120px;
  padding: 7px 6px;
  vertical-align: middle;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-input-text);
  white-space: nowrap;
  background: transparent;
  border: none;
}
.lesson-content-editor .detail-form table.form-table > tbody > tr > td,
.lesson-content-editor .detail-form table.form-table > tr > td {
  display: table-cell;
  padding: 7px 6px;
  vertical-align: middle;
  background: transparent;
  border: none;
}
.lesson-content-editor .detail-form table.form-table .form-control,
.lesson-content-editor .detail-form table.form-table textarea.form-control,
.lesson-content-editor .detail-form table.form-table select.form-control,
.lesson-content-editor .activity-meta-grid .form-control,
.lesson-content-editor .activity-meta-grid textarea.form-control,
.lesson-content-editor .activity-meta-grid select.form-control {
  display: block;
  width: 100%;
  font-size: var(--text-md);
  font-family: inherit;
  color: var(--color-body);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) 14px;
  box-sizing: border-box;
  box-shadow: none;
}
.lesson-content-editor .detail-form table.form-table textarea.form-control {
  min-height: 80px;
  resize: vertical;
  line-height: 1.65;
}
.lesson-content-editor .activity-meta-grid textarea.form-control {
  resize: vertical;
  line-height: 1.5;
  min-height: 2.75rem;
  max-height: 7.5rem;
}
.lesson-content-editor .activity-meta-grid textarea.activity-desc-input {
  min-height: 3.25rem;
}
.lesson-content-editor .detail-form table.form-table tr:has(textarea) > th {
  vertical-align: top;
  padding-top: 10px;
}
.lesson-content-editor .detail-form table.form-table .form-control:focus,
.lesson-content-editor .activity-meta-grid .form-control:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item > .form-control {
  width: auto;
  min-width: 0;
}
.lesson-content-editor .detail-form table.form-table td .form-hint,
.lesson-content-editor .detail-form table.form-table td .template-desc,
.lesson-content-editor .detail-form table.form-table td .text-muted {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.lesson-content-editor .activity-meta-td .form-hint,
.lesson-content-editor .activity-meta-td .template-desc,
.lesson-content-editor .activity-meta-td .text-muted {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.lesson-content-editor .detail-form table.form-table td .template-desc,
.lesson-content-editor .activity-meta-td .template-desc {
  display: block;
}
.lesson-content-editor .activity-meta-td .template-desc + .form-hint {
  margin-top: 2px;
}
.lesson-content-editor #activityForm > #commonSection.content-detail-section {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}

.content-detail-section-head {
  margin-bottom: var(--space-4);
}
.lesson-content-editor .content-detail-section--questions .content-detail-section-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3);
  color: var(--color-heading);
}
.lesson-content-editor .content-detail-section--questions .content-detail-section-desc {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.lesson-content-editor .content-detail-section--questions {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-topbar-border);
}
.lesson-content-editor #commonSection {
  margin-top: 0;
}
.lesson-content-editor .question-add-row {
  margin-top: var(--space-3);
}

.lesson-content-editor .question-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--color-bg-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.03);
}
.lesson-content-editor .question-card-header {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-md);
  color: var(--color-heading);
}
.lesson-content-editor .question-card .btn-sm,
.lesson-content-editor .question-add-row .btn-sm,
.lesson-content-editor .select-options-row .btn-sm {
  min-height: 34px;
  padding: 7px 14px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.25;
  border-radius: var(--radius-md);
}
.lesson-content-editor .detail-form table.form-table tr:has(.list-pair-container) > th,
.lesson-content-editor .detail-form table.form-table tr:has(.list-text-container) > th {
  vertical-align: top;
  padding-top: 11px;
}

.content-detail-section-desc {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 52rem;
  font-weight: var(--font-medium);
}
.content-detail-section-desc--inline {
  display: block;
  margin: 4px 0 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* 공통 설정 아코디언 본문: 공통 섹션과 동일 패딩 */
.lesson-content-editor .content-detail-accordion--common .content-detail-accordion-header-text .content-detail-section-title {
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-heading);
}
.lesson-content-editor .content-detail-accordion--common .content-detail-section-desc--inline {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* 키 리스트: 표 형태 유지 + 포털 색·입력 필드 */
.lesson-content-editor .list-pair-container {
  --lpw-idx: 2.25rem;
  --lpw-key: 120px;
  --lpw-val: 120px;
  --lpw-e1: 96px;
  --lpw-e2: 96px;
  --lpw-e3: 96px;
  --lpw-dyn: 80px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
body.list-pair-col-resizing {
  cursor: col-resize !important;
  user-select: none;
}
.lesson-content-editor .list-pair-grid-wrap {
  overflow-x: auto;
  overflow-anchor: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.035);
}
.lesson-content-editor .list-pair-grid-head {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--space-3) var(--space-3);
  min-height: auto;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-secondary);
  width: 100%;
  min-width: max-content;
  box-sizing: border-box;
}
.lesson-content-editor .list-pair-h-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-right: 1px solid var(--color-border-light);
  box-sizing: border-box;
  position: relative;
}
.lesson-content-editor .list-pair-h-cell:last-child {
  border-right: none;
}
.lesson-content-editor .list-pair-grid-head .list-pair-h-cell:not(.list-pair-h-dyn) {
  padding-left: 0;
  padding-right: 0;
}
.lesson-content-editor .list-pair-col-resize {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  margin-right: -3px;
  cursor: col-resize;
  z-index: 8;
  background: transparent;
}
.lesson-content-editor .list-pair-col-resize:hover {
  background: rgba(100, 116, 139, 0.15);
}
.lesson-content-editor .list-pair-h-idx {
  flex: 0 0 var(--lpw-idx);
  width: var(--lpw-idx);
  justify-content: center;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  position: sticky;
  left: 0;
  z-index: 6;
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.05);
}
.lesson-content-editor .list-pair-row-idx {
  flex: 0 0 var(--lpw-idx);
  width: var(--lpw-idx);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  background: inherit;
  border-right: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  align-self: stretch;
  min-height: 38px;
  padding: 2px 0;
  box-sizing: border-box;
  position: sticky;
  left: 0;
  z-index: 4;
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.05);
}
.lesson-content-editor .list-pair-grid-head .list-pair-h-key {
  flex: 0 0 var(--lpw-key);
  width: var(--lpw-key);
  min-width: 0;
  position: sticky;
  left: var(--lpw-idx);
  z-index: 6;
  background: var(--color-bg-muted);
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.05);
}
.lesson-content-editor .list-pair-item .list-pair-key {
  flex: 0 0 var(--lpw-key);
  width: var(--lpw-key);
  min-width: 0;
  position: sticky;
  left: var(--lpw-idx);
  z-index: 3;
  background: inherit;
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.06);
}
.lesson-content-editor .list-pair-grid-head .list-pair-h-val,
.lesson-content-editor .list-pair-item .list-pair-value {
  flex: 0 0 var(--lpw-val);
  width: var(--lpw-val);
  min-width: 0;
}
.lesson-content-editor .list-pair-grid-head .list-pair-h-extra1,
.lesson-content-editor .list-pair-item .list-pair-extra1 {
  flex: 0 0 var(--lpw-e1);
  width: var(--lpw-e1);
  min-width: 0;
}
.lesson-content-editor .list-pair-grid-head .list-pair-h-extra2,
.lesson-content-editor .list-pair-item .list-pair-extra2 {
  flex: 0 0 var(--lpw-e2);
  width: var(--lpw-e2);
  min-width: 0;
}
.lesson-content-editor .list-pair-grid-head .list-pair-h-extra3,
.lesson-content-editor .list-pair-item .list-pair-extra3 {
  flex: 0 0 var(--lpw-e3);
  width: var(--lpw-e3);
  min-width: 0;
}
.lesson-content-editor .list-pair-dynamic-head-cells {
  display: contents;
}
.lesson-content-editor .list-pair-h-dyn {
  flex: 0 0 var(--lpw-dyn);
  width: var(--lpw-dyn);
  min-width: 0;
  padding: 0 8px;
  border-right: 1px solid var(--color-border-light);
}
.lesson-content-editor .list-pair-dyn-cells {
  display: contents;
}
.lesson-content-editor .list-pair-dyn-col {
  flex: 0 0 var(--lpw-dyn);
  width: var(--lpw-dyn);
  min-width: 0;
  padding: 0 8px;
  border-right: 1px solid var(--color-border-light);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.lesson-content-editor .list-pair-dyn-col .list-pair-dyn-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.lesson-content-editor .list-pair-grid-head .list-pair-h-input,
.lesson-content-editor .list-pair-grid-head .list-pair-h-dyn-input {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  width: 100%;
  min-height: 34px;
}
.lesson-content-editor .list-pair-h-actions {
  flex: 0 0 auto;
  min-width: calc(2.75rem + var(--space-3));
  box-sizing: border-box;
}
.lesson-content-editor .list-pair-item .btn-remove-pair-item {
  flex: 0 0 auto;
  align-self: center;
  margin-left: var(--space-3);
}
.lesson-content-editor .list-pair-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: max-content;
  box-sizing: border-box;
}
.lesson-content-editor .list-pair-item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  padding: var(--space-3) var(--space-3);
  margin: 0;
  background: var(--color-bg-card);
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 0;
  min-height: 44px;
  width: 100%;
  min-width: max-content;
  box-sizing: border-box;
}
.lesson-content-editor .list-pair-items .list-pair-item:last-child {
  border-bottom: none;
}
.lesson-content-editor .list-pair-item:nth-child(even) {
  background: var(--color-table-row-odd);
}
.lesson-content-editor .list-pair-item .form-control {
  margin: 0;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-input-border);
  min-height: 38px;
  height: auto;
  padding: var(--space-2) 10px;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-body);
  background: var(--color-bg-card);
  box-shadow: none;
  scroll-margin: 0;
}
.lesson-content-editor .list-pair-grid-head .form-control {
  scroll-margin: 0;
}
.lesson-content-editor .list-pair-item .form-control:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: inset 0 0 0 2px var(--color-indigo-soft);
}
.lesson-content-editor .list-pair-item .list-pair-key:focus {
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.06), inset 0 0 0 2px var(--color-indigo-soft);
}
.lesson-content-editor .detail-form table.form-table .list-pair-container .form-control:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: inset 0 0 0 2px var(--color-indigo-soft);
}
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-key:focus {
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.06), inset 0 0 0 2px var(--color-indigo-soft);
}
.lesson-content-editor .list-pair-item .form-control:hover:not(:focus) {
  border-color: var(--color-input-border-hover);
}
.lesson-content-editor .list-pair-item input.form-control::placeholder,
.lesson-content-editor .list-pair-item input.form-control::-webkit-input-placeholder,
.lesson-content-editor .list-pair-item input.form-control::-moz-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}
.lesson-content-editor .select-options-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-1);
  border-top: 1px solid var(--color-border-light);
  background: transparent;
  position: relative;
}
.lesson-content-editor .list-pair-excel-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lesson-content-editor .list-pair-os-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lesson-content-editor .list-pair-os-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border-light);
}
.lesson-content-editor .list-pair-os-hint {
  display: block;
  flex: 1 1 12rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted, var(--text-muted, #6b7280));
}
/* 오브젝트 스토리지 URL·임시 첨부 — .detail-form table... 보다 낮은 특이도로는 border(회색)가 이김 */
.lesson-content-editor .list-pair-item .form-control.list-pair-cell--pending-os {
  border-color: var(--color-warning, #d97706);
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.35);
}
.lesson-content-editor .detail-form table.form-table .form-control.lesson-field--os-url,
.lesson-content-editor .activity-meta-grid .form-control.lesson-field--os-url,
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .form-control.lesson-field--os-url {
  border-color: var(--color-success-border, #4ac26b);
  box-shadow: none;
}
/* http URL 이지만 tb_object_storage_file 메타(data-os-file-no) 없음 — 붙여넣기·외부 링크 */
.lesson-content-editor .detail-form table.form-table .form-control.lesson-field--url-plain-http,
.lesson-content-editor .activity-meta-grid .form-control.lesson-field--url-plain-http,
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .form-control.lesson-field--url-plain-http {
  border-color: var(--color-border-strong, #94a3b8);
  box-shadow: none;
}
.lesson-content-editor .detail-form table.form-table .form-control.lesson-field--url-plain-http:focus,
.lesson-content-editor .detail-form table.form-table .form-control.lesson-field--url-plain-http:focus-visible,
.lesson-content-editor .activity-meta-grid .form-control.lesson-field--url-plain-http:focus,
.lesson-content-editor .activity-meta-grid .form-control.lesson-field--url-plain-http:focus-visible,
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .form-control.lesson-field--url-plain-http:focus,
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .form-control.lesson-field--url-plain-http:focus-visible {
  outline: none;
  border-color: var(--color-border-strong, #64748b);
  box-shadow: inset 0 0 0 2px rgba(100, 116, 139, 0.22);
}
.lesson-content-editor .detail-form table.form-table .form-control.lesson-field--url-plain-http:hover:not(:focus):not(:focus-visible),
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .form-control.lesson-field--url-plain-http:hover:not(:focus):not(:focus-visible) {
  border-color: var(--color-border, #64748b);
}
.lesson-content-editor .detail-form table.form-table .form-control.lesson-field--os-url:focus,
.lesson-content-editor .detail-form table.form-table .form-control.lesson-field--os-url:focus-visible,
.lesson-content-editor .activity-meta-grid .form-control.lesson-field--os-url:focus,
.lesson-content-editor .activity-meta-grid .form-control.lesson-field--os-url:focus-visible,
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .form-control.lesson-field--os-url:focus,
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .form-control.lesson-field--os-url:focus-visible {
  outline: none;
  border-color: var(--color-success-border, #4ac26b);
  box-shadow: inset 0 0 0 2px rgba(74, 194, 107, 0.28);
}
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .list-pair-key.lesson-field--os-url:focus,
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .list-pair-key.lesson-field--os-url:focus-visible {
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.06), inset 0 0 0 2px rgba(74, 194, 107, 0.28);
}
.lesson-content-editor .detail-form table.form-table .form-control.lesson-field--os-url:hover:not(:focus):not(:focus-visible) {
  border-color: var(--color-success-border, #4ac26b);
}
.lesson-content-editor .detail-form table.form-table .list-pair-container .list-pair-item .form-control.lesson-field--os-url:hover:not(:focus):not(:focus-visible) {
  border-color: var(--color-success-border, #3ba85a);
}
/* 우클릭 — LIST/PAIR 셀 컨텍스트 메뉴 */
#listPairCtxMenu.list-pair-ctx-menu {
  position: fixed;
  z-index: 10070;
  min-width: 10rem;
  max-width: min(20rem, 90vw);
  margin: 0;
  padding: var(--space-1, 0.25rem) 0;
  list-style: none;
  background: var(--color-bg-elevated, #fff);
  border: 1px solid var(--color-border, #d0d7de);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
#listPairCtxMenu.list-pair-ctx-menu .list-pair-ctx-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.9rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-text, #1e293b);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
#listPairCtxMenu.list-pair-ctx-menu .list-pair-ctx-item:hover,
#listPairCtxMenu.list-pair-ctx-menu .list-pair-ctx-item:focus-visible {
  background: var(--color-bg-muted, #f1f5f9);
  outline: none;
}
html[data-theme="dark"] #listPairCtxMenu.list-pair-ctx-menu {
  background: var(--color-bg-elevated, #1e293b);
  border-color: var(--color-border, #334155);
}
html[data-theme="dark"] #listPairCtxMenu.list-pair-ctx-menu .list-pair-ctx-item {
  color: var(--color-text, #e2e8f0);
}
html[data-theme="dark"] #listPairCtxMenu.list-pair-ctx-menu .list-pair-ctx-item:hover,
html[data-theme="dark"] #listPairCtxMenu.list-pair-ctx-menu .list-pair-ctx-item:focus-visible {
  background: var(--color-bg-muted, #334155);
}
.lesson-content-editor .list-pair-os-file-box {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-elevated, var(--color-bg-input));
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  min-height: 2rem;
}
.lesson-content-editor .list-pair-os-file-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--color-text-muted, var(--text-muted, #6b7280));
}
.lesson-content-editor .list-pair-os-file-name.has-file {
  color: var(--color-text, inherit);
  font-weight: var(--font-medium, 500);
}
.lesson-content-editor .btn-list-pair-os-upload:disabled,
.lesson-content-editor .btn-list-pair-os-delete:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lesson-content-editor .list-pair-grid-wrap.list-pair-drop--active {
  outline: 2px dashed var(--color-border, #d0d7de);
  outline-offset: 2px;
  border-radius: var(--radius-md, 6px);
  background: rgba(100, 116, 139, 0.06);
}

/* 관리자 활동 로그 — 신규 API 오류 응답(ApiResponse code≠200) 토스트 */
#usr-log-api-toast.usr-log-api-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10060;
  max-width: min(94vw, 520px);
  max-height: min(40vh, 280px);
  overflow-y: auto;
  padding: 12px 18px;
  border-radius: var(--radius-md, 8px);
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fbbf24;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
#usr-log-api-toast.usr-log-api-toast--visible {
  opacity: 1;
}
html[data-theme="dark"] #usr-log-api-toast.usr-log-api-toast {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
  border-color: var(--badge-warning-border);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.lesson-content-editor .list-pair-item.list-pair-row--flash {
  animation: listPairRowFlash 1.2s ease;
}
@keyframes listPairRowFlash {
  0% {
    box-shadow: inset 0 0 0 2px rgba(100, 116, 139, 0.45);
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent;
  }
}
.lesson-content-editor .list-pair-container input.form-control.list-pair-cell--paste-flash {
  animation: listPairCellPasteFlash 1.4s ease;
}
@keyframes listPairCellPasteFlash {
  0% {
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.55);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.lesson-content-editor .list-pair-container input.form-control.list-pair-cell--selected {
  outline: 2px solid var(--color-border-focus, #64748b);
  outline-offset: -1px;
}
body.list-pair-drag-select {
  user-select: none;
  cursor: cell;
}

.lesson-content-editor .list-text-container {
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-panel-border);
}
.lesson-content-editor .list-text-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lesson-content-editor .list-text-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-bottom: none;
}
.lesson-content-editor .list-text-item .list-text-input {
  flex: 1;
  min-width: 96px;
  min-height: 38px;
  font-size: var(--text-md);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-input-border);
  background: var(--color-bg-card);
  padding: var(--space-2) 14px;
}
.lesson-content-editor .list-text-item .list-text-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.lesson-content-editor .list-text-container > .btn-add-list-item {
  margin-top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .lesson-content-editor .detail-form table.form-table > tbody > tr,
  .lesson-content-editor .question-card,
  .lesson-content-editor .content-detail-accordion {
    transition: none;
  }
}

/* 공통/문항 설정: DB·프롬프트와 매핑되는 field_key 표시 */
.form-field-key {
  display: inline-block;
  margin-left: 6px;
  font-size: 1em;
  font-weight: var(--font-semibold);
  font-family: ui-monospace, SFMono-Regular, "Consolas", monospace;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  vertical-align: middle;
  line-height: 1.35;
}

/* =====================================================
   에러 페이지 (403 / 404 / 500)
   ===================================================== */
body.error-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--color-bg-subtle); margin: 0;
}
.error-page .error-box {
  text-align: center; padding: var(--space-10) var(--space-10); background: var(--color-bg-card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-error-box);
  max-width: 480px; width: 100%;
}
.error-page .error-code {
  font-size: 72px; font-weight: var(--font-extrabold); line-height: 1; margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}
.error-page .error-code--403 { color: var(--color-403); }
.error-page .error-code--404 { color: var(--color-404); }
.error-page .error-code--500 { color: var(--color-500); }
.error-page .error-title {
  font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--color-text); margin-bottom: var(--space-2);
}
.error-page .error-msg {
  color: var(--color-text-muted); font-size: 14px; margin-bottom: var(--space-8); line-height: var(--leading-relaxed);
}
.error-page .error-path {
  font-size: 12px; color: var(--color-text-muted-light); margin-bottom: var(--space-6); word-break: break-all;
}
.error-page .btn-home {
  display: inline-block; padding: var(--space-2) 28px; background: var(--color-blue-500); color: var(--color-white);
  border-radius: var(--radius-md); text-decoration: none; font-size: 14px; font-weight: var(--font-medium);
}
.error-page .btn-home:hover { background: var(--color-table-header-bg); }

/* 쿠폰·기프트카드 — 회원사 셀렉트 폭 (search-box--panel + list-filter 내부) */
.list-page .search-box--coupon .search-select--wide {
  min-width: 200px;
  max-width: 280px;
}
.form-hint-inline {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted-light);
  white-space: nowrap;
}
.form-inline-gap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* 기프트카드 등: 양끝 라벨 + 포털 공통 토글 스위치 */
.form-toggle-between {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.form-toggle-between .form-toggle-side {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  user-select: none;
}
.form-toggle-between .form-toggle-side--on {
  color: var(--color-text);
  font-weight: var(--font-medium);
}
label.form-toggle-switch-only.auth-child-item {
  margin: 0;
  padding: 4px 0;
}
.search-sep {
  margin: 0 var(--space-1);
  color: var(--color-text-muted-light);
  font-size: var(--text-sm);
}
.modal-md {
  width: 520px;
  max-width: 96vw;
}

/* 프로그램 표시 순서 모달 — 가로·세로 여유 */
.modal-box.modal-program-reorder {
  width: min(880px, 94vw);
  max-height: min(92vh, 900px);
}
.modal-box.modal-program-reorder .modal-body {
  min-height: 240px;
  max-height: min(calc(92vh - 140px), 760px);
}

/* 구독 쿠폰·요금제 — 스토어 SKU 그리드 (가로·세로 여유) */
.modal-box.subscription-store-modal {
  width: min(1080px, 96vw);
  max-height: min(94vh, 940px);
}
.modal-box.subscription-store-modal .modal-body {
  max-height: min(calc(94vh - 132px), 820px);
}
.subscription-store-modal .table-card--nested {
  max-height: min(48vh, 480px);
}
.subscription-store-modal .code-table .col-w-200 {
  min-width: 220px;
}

.usage-modal-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.table-card--nested {
  margin-top: 0;
  box-shadow: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: auto;
  max-height: 320px;
}
.empty-hint {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* =====================================================
   템플릿 관리 — JSON 패널·공통코드 참조 (펼침 시각·코드 에디터 톤)
   ===================================================== */
.template-json-panel.is-json-expanded {
  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.2), 0 4px 24px rgba(15, 23, 42, 0.06);
}
.template-json-accordion-head {
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.template-json-accordion-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.06) 0%, transparent 45%, rgba(34, 197, 94, 0.04) 100%);
  pointer-events: none;
}
.template-json-head-visual {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.template-json-bracket {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text-muted);
  opacity: 0.45;
  line-height: 1;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.template-json-panel.is-json-expanded .template-json-bracket {
  color: #64748b;
  opacity: 0.9;
}
.template-json-bracket--r { margin-left: 2px; }
.template-json-head-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.template-json-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(145deg, #334155 0%, #475569 100%);
  color: #f8fafc;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.template-json-chip--syntax-key {
  font-weight: 600;
  color: #475569;
  background: rgba(15, 23, 42, 0.06);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--color-border, #d0d7de);
}
.template-json-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
  position: relative;
  z-index: 1;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.template-json-chevron::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 -4px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.template-json-chevron.is-open {
  background: rgba(100, 116, 139, 0.12);
}
.template-json-chevron.is-open::after {
  transform: rotate(225deg);
  margin-top: -2px;
}
.template-json-accordion-head:hover .template-json-chevron {
  background: rgba(100, 116, 139, 0.1);
}
.template-json-code-ref-outer {
  padding: 8px 0 12px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-panel-border);
}
.json-code-ref-sheet {
  margin-bottom: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-panel-border);
  background: var(--color-bg-card);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.json-code-ref-sheet:hover {
  border-color: rgba(100, 116, 139, 0.35);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
.json-code-ref-sheet.is-expanded {
  border-color: rgba(100, 116, 139, 0.45);
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08);
}
.json-code-ref-sheet:last-child { margin-bottom: 4px; }
.json-code-ref-sheet-title {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.4;
}
.json-code-ref-field {
  font-weight: 600;
  margin-right: 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: #7c3aed;
}
.json-code-ref-grp-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--color-panel-border);
  font-family: ui-monospace, Consolas, monospace;
}
.json-code-ref-excel {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  line-height: 1.35;
}
.json-code-ref-excel th {
  background: #e7e6e6;
  border: 1px solid #bfbfbf;
  padding: 5px 10px;
  text-align: left;
  font-weight: 600;
  color: #1a1a1a;
}
.json-code-ref-excel td {
  border: 1px solid #bfbfbf;
  padding: 4px 10px;
  background: #fff;
  vertical-align: top;
  word-break: break-word;
  color: #222;
}
.json-code-ref-excel tbody tr:nth-child(even) td {
  background: #f2f2f2;
}
.json-excel-code {
  font-family: var(--font-mono), Consolas, "Courier New", monospace;
  font-size: 11px;
  color: #475569;
}
.json-code-ref-excel col.col-code { width: 38%; }
.json-code-ref-excel col.col-name { width: 62%; }
.json-code-ref-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.2s ease;
}
.json-code-ref-sheet-head:hover {
  background: linear-gradient(90deg, rgba(100, 116, 139, 0.06) 0%, transparent 100%);
}
.json-code-ref-sheet-head:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}
.json-code-ref-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.json-code-ref-chevron::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -3px 0 0 -4px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.json-code-ref-sheet.is-expanded .json-code-ref-chevron {
  background: rgba(100, 116, 139, 0.12);
}
.json-code-ref-sheet.is-expanded .json-code-ref-chevron::after {
  transform: rotate(225deg);
  margin-top: -1px;
}

.json-code-ref-head-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.json-code-ref-head-labels .json-code-ref-field { font-weight: 600; margin-right: 0; }
.json-code-ref-sheet-body {
  display: none;
  padding: 0 12px 12px 12px;
  margin-left: 0;
}

/* 포털 공통 토스트 (footer showToast) — 하단 우측, 아래로 쌓임(위=오래됨·아래=최신, appendChild 순서) */
.portal-toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  top: auto;
  transform: none;
  z-index: 11050;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  pointer-events: none;
  width: min(400px, calc(100vw - 48px));
  box-sizing: border-box;
}
.portal-toast-host .portal-toast {
  pointer-events: auto;
  width: 100%;
  max-width: 100%;
  max-height: min(240px, 40vh);
  overflow-y: auto;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  word-break: break-word;
  text-align: left;
  white-space: pre-wrap;
  animation: portalToastIn 0.22s ease;
}
@keyframes portalToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.portal-toast--info {
  background: var(--color-toast-info-bg);
  color: var(--color-toast-info-fg);
}
.portal-toast--success {
  background: var(--color-toast-success-bg);
  color: #fff;
}
.portal-toast--error {
  background: var(--color-toast-error-bg);
  color: #fff;
}
.portal-toast--warn {
  background: var(--color-toast-warn-bg);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .portal-toast-host .portal-toast {
    animation: none;
  }
}

/* =====================================================
   다크 모드 — JetBrains New UI Dark (1E1F22 / 2B2D30 계열, 네이비 제거)
   ===================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-text: #bcbfc4;
  --color-text-secondary: #9da0a6;
  --color-text-muted: #7f8388;
  --color-text-muted-light: #6c7075;
  --color-heading: #dfe1e5;
  --color-border: #393b40;
  --color-border-light: #2f3136;
  --color-border-focus: #3574f0;
  --color-ui-accent: #8a9099;
  --color-bg: #1e1f22;
  --color-bg-subtle: #313438;
  --color-bg-card: #2b2d30;
  /* JetBrains New UI — Action Blue */
  --color-primary: #3574f0;
  --color-primary-dark: #2e67d8;
  --color-primary-darker: #2658c4;
  --color-primary-light: #689ef6;
  --color-indigo-soft: rgba(53, 116, 240, 0.14);
  --color-indigo-shadow: rgba(53, 116, 240, 0.35);
  --color-success: #6aab73;
  --color-success-bg: rgba(106, 171, 115, 0.14);
  --color-success-border: rgba(106, 171, 115, 0.38);
  --color-danger: #f26565;
  --color-danger-bg: rgba(242, 101, 101, 0.12);
  --color-danger-border: rgba(242, 101, 101, 0.35);
  --color-warning: #d1a347;
  --color-warning-bg: rgba(209, 163, 71, 0.14);
  --color-warning-border: rgba(209, 163, 71, 0.38);
  --color-info: #3574f0;
  --color-info-bg: rgba(53, 116, 240, 0.12);
  --color-purple: #b794f6;
  --color-purple-bg: rgba(183, 148, 246, 0.12);
  --color-indigo-pale: rgba(53, 116, 240, 0.1);

  --badge-success-bg: rgba(106, 171, 115, 0.2);
  --badge-success-fg: #b8e0bf;
  --badge-success-border: rgba(106, 171, 115, 0.45);
  --badge-danger-bg: rgba(242, 101, 101, 0.18);
  --badge-danger-fg: #ffc4c4;
  --badge-danger-border: rgba(242, 101, 101, 0.42);
  --badge-warning-bg: rgba(209, 163, 71, 0.2);
  --badge-warning-fg: #f0d9a0;
  --badge-warning-border: rgba(209, 163, 71, 0.45);
  --badge-info-bg: rgba(53, 116, 240, 0.2);
  --badge-info-fg: #b8d4ff;
  --badge-info-border: rgba(53, 116, 240, 0.45);
  --badge-purple-bg: rgba(183, 148, 246, 0.18);
  --badge-purple-fg: #e2d4ff;
  --badge-purple-border: rgba(183, 148, 246, 0.42);
  --badge-neutral-bg: rgba(129, 140, 148, 0.16);
  --badge-neutral-fg: #b8c2cc;
  --badge-neutral-border: rgba(129, 140, 148, 0.38);
  --color-input-border: #393b40;
  --color-input-border-hover: #4e5156;
  --color-input-text: #bcbfc4;
  --color-body: #bcbfc4;
  --color-border-hover: #4e5156;
  --color-bg-row-hover: rgba(255, 255, 255, 0.06);
  --color-bg-muted: #35373c;
  --color-table-header-bg: #323438;
  --color-table-header-bg-hover: #3e4248;
  --color-table-header-text: #c9ccd1;
  --color-table-row-odd: #1e1f22;
  --color-table-row-even: #25262b;
  --color-panel-bg: #1e1f22;
  --color-panel-border: #393b40;
  --color-grid-border: #393b40;
  --color-topbar-bg: rgba(43, 45, 48, 0.97);
  --color-topbar-border: #393b40;
  --color-modal-footer-bg: #313438;
  --color-header-bg: rgba(30, 31, 34, 0.94);
  --color-link: #548af7;
  --color-link-hover: #8eb4ff;
  --color-required: #f26565;
  --color-overlay-scrim: rgba(0, 0, 0, 0.58);
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.72);
  --shadow-focus: 0 0 0 2px #2b2d30, 0 0 0 4px rgba(53, 116, 240, 0.42);

  --lesson-tree-shell-border: #393b40;
  --lesson-tree-shell-bg: #1e1f22;
  --lesson-tree-row-border: #393b40;
  --lesson-tree-row-bg: #2b2d30;
  --lesson-tree-row-hover: #323438;
  --lesson-tree-row-selected: rgba(74, 77, 82, 0.55);
  --lesson-tree-label: #bcbfc4;
  --lesson-tree-label-selected: #dfe1e5;
  --lesson-tree-chevron: #9da0a6;
  /* 토스트 — Darcula/IDE 알림 패널 톤 */
  --color-toast-info-bg: #3c3f41;
  --color-toast-info-fg: #bbbbbb;
  --color-toast-success-bg: #3c3f41;
  --color-toast-error-bg: #3c3f41;
  --color-toast-warn-bg: #3c3f41;

  --color-sidebar-bg: #2b2d30;
  --color-sidebar-text: #8a8e94;
  --color-sidebar-text-hover: #c9ccd1;
  --color-sidebar-divider: #393b40;
  --color-sidebar-divider-strong: #4e5156;
  --color-sidebar-overlay: rgba(0, 0, 0, 0.2);
  --color-sidebar-accent-bg: #35373c;
  --color-sidebar-overlay-light: rgba(255, 255, 255, 0.03);
  --color-nav-sub-active: linear-gradient(90deg, #35373c 0%, #2f3136 100%);

  --sidebar-bg: #2b2d30;
  --sidebar-border: #393b40;
  --sidebar-brand-bg: #1e1f22;
  --sidebar-brand-border: #393b40;
  --sidebar-fg: #c9ccd1;
  --sidebar-fg-muted: #8a8e94;
  --sidebar-section-label: #6c7075;
  --sidebar-hover-bg: #35373c;
  --sidebar-hover-border: #45474c;
  --sidebar-active-bg: #3e4248;
  --sidebar-active-fg: #dfe1e5;
  --sidebar-active-bar: #3574f0;
  --sidebar-icon-bg: #35373c;
  --sidebar-icon-border: #45474c;
  --sidebar-icon-bg-hover: #3e4248;
  --sidebar-sub-bg: #1e1f22;
  --sidebar-sub-border: #393b40;
  --sidebar-sub-inset: rgba(0, 0, 0, 0.28);
  --sidebar-dot: rgba(188, 191, 196, 0.22);
  --sidebar-dot-hover: rgba(188, 191, 196, 0.4);
  --sidebar-dot-active: #bcbfc4;
  --sidebar-sub-active-fg: #dfe1e5;
  --sidebar-shadow: 1px 0 0 var(--sidebar-border);

  --swagger-menu-bg: rgba(73, 204, 144, 0.1);
  --swagger-menu-border: #49cc90;
  --swagger-menu-fg: #9dd9be;
  --swagger-menu-hover-bg: rgba(73, 204, 144, 0.16);
  --swagger-menu-hover-border: #5ed9a8;
  --swagger-icon-bg: #85ea2d;
  --swagger-icon-fg: #173409;
  --swagger-icon-border: #49cc90;
  --swagger-external-badge: #7dcea8;

  --dt-row-selected: 74, 77, 82;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 168, 199, 255;

  --ai-mockup-frame: #1e1f22;
}

/* 다크 — 주요 버튼: JB Action Blue (기본은 테이블 헤더 토큰과 동일해 회색이었음) */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-indigo {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 1px 3px rgba(0, 0, 0, 0.32);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-indigo:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 2px 10px rgba(53, 116, 240, 0.38);
}
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-indigo:active {
  background: var(--color-primary-darker);
  border-color: var(--color-primary-darker);
}
html[data-theme="dark"] .btn-primary:disabled,
html[data-theme="dark"] .btn-indigo:disabled {
  background: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-text-muted-light);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

html[data-theme="dark"] .btn-outline {
  background: rgba(188, 191, 196, 0.06);
  color: var(--color-text);
  border-color: var(--color-border-hover);
}
html[data-theme="dark"] .btn-outline:hover {
  background: rgba(188, 191, 196, 0.1);
  border-color: var(--color-text-muted-light);
  color: var(--color-heading);
}

html[data-theme="dark"] .code-table thead tr,
html[data-theme="dark"] table.dataTable.code-table thead tr {
  border-bottom-color: rgba(188, 191, 196, 0.1);
}
html[data-theme="dark"] .code-table th,
html[data-theme="dark"] table.dataTable.code-table thead th {
  border-bottom-color: rgba(188, 191, 196, 0.1);
}
html[data-theme="dark"] .code-table td {
  border-bottom-color: var(--color-border);
}

/* Darcula/IDE 알림: 동일 패널 + 타입별 왼쪽 강조선 */
html[data-theme="dark"] .portal-toast-host .portal-toast {
  padding: 14px 18px 15px 16px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  background: #3c3f41;
  color: #bbbbbb;
  border: 1px solid #515151;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: #589df6;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .portal-toast--info { border-left-color: #589df6; }
html[data-theme="dark"] .portal-toast--success { border-left-color: #6aab73; }
html[data-theme="dark"] .portal-toast--warn { border-left-color: #ffc66d; }
html[data-theme="dark"] .portal-toast--error { border-left-color: #f26565; }
html[data-theme="dark"] .portal-toast-host .portal-toast a {
  color: #589df6;
  text-decoration: none;
}
html[data-theme="dark"] .portal-toast-host .portal-toast a:hover {
  color: #7aa6f0;
  text-decoration: underline;
}

html[data-theme="dark"] .template-json-chip--syntax-key {
  color: #bcbfc4;
  background: rgba(188, 191, 196, 0.08);
  border-color: var(--color-border-hover);
}
html[data-theme="dark"] .muted {
  color: var(--color-text-secondary);
}

/* 템플릿 관리·프로그램 구조 편집 — 다크 가독성 */
html[data-theme="dark"] .structure-editor .tree-item.selected .tree-node-inner {
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.07);
  font-weight: var(--font-semibold);
}
html[data-theme="dark"] .structure-editor .tree-item:not(.selected) .tree-label {
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .structure-editor .tree-item.selected .tree-label {
  color: var(--color-heading);
}
html[data-theme="dark"] .structure-editor .tree-program .tree-icon,
html[data-theme="dark"] .structure-editor .tree-course .tree-icon,
html[data-theme="dark"] .structure-editor .tree-unit .tree-icon,
html[data-theme="dark"] .structure-editor .tree-lesson .tree-icon,
html[data-theme="dark"] .structure-editor .tree-template .tree-icon {
  color: var(--color-text-muted);
}
html[data-theme="dark"] .structure-editor .tree-item.selected .tree-icon {
  color: var(--color-primary-light);
}
html[data-theme="dark"] .structure-editor .tree-btn-add {
  color: var(--color-text-secondary);
  border-color: var(--color-border-hover);
}
html[data-theme="dark"] .structure-editor .tree-btn-add:hover {
  color: var(--color-heading);
  border-color: var(--color-primary);
}
html[data-theme="dark"] .structure-editor .tree-add {
  color: var(--color-link);
}
html[data-theme="dark"] .structure-editor .tree-add:hover {
  color: var(--color-link-hover);
}
/* 강좌 구조 편집 — 레슨 연결·메타 행 다크 대비 */
html[data-theme="dark"] .structure-detail-panel #dCreated,
html[data-theme="dark"] .structure-detail-panel #dUpdated {
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .lesson-connect-section .form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
html[data-theme="dark"] .lesson-connect-item,
html[data-theme="dark"] .connected-lesson-item {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
html[data-theme="dark"] .connected-lesson-drag-handle {
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .connected-lesson-item .btn-disconnect-lesson {
  border-color: var(--color-border-hover);
  color: var(--color-heading);
  background: var(--color-bg-subtle);
}
html[data-theme="dark"] .connected-lesson-item .btn-disconnect-lesson:hover {
  border-color: var(--color-danger-border);
  color: var(--color-danger);
  background: var(--color-danger-bg);
}
html[data-theme="dark"] .edit-section .section-title,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .resource-edit-title {
  color: var(--color-heading);
  border-bottom-color: var(--color-border-hover);
}
html[data-theme="dark"] .link-add-resource {
  color: var(--color-link);
}
html[data-theme="dark"] .link-add-resource:hover {
  color: var(--color-link-hover);
}
html[data-theme="dark"] .resource-type {
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
}
html[data-theme="dark"] .edit-section .section-desc {
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .tab-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
html[data-theme="dark"] .panel-title {
  border-bottom-color: var(--color-border-hover);
}
html[data-theme="dark"] .json-code-ref-field {
  color: #c4b5fd;
}
html[data-theme="dark"] .json-code-ref-excel th {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-heading);
}
html[data-theme="dark"] .json-code-ref-excel td {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  color: var(--color-text);
}
html[data-theme="dark"] .json-code-ref-excel tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .json-excel-code {
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .json-code-ref-chevron {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .json-code-ref-chevron::after {
  border-right-color: var(--color-text-muted);
  border-bottom-color: var(--color-text-muted);
}
html[data-theme="dark"] .template-json-chevron {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .template-json-chevron::after {
  border-right-color: var(--color-text-secondary);
  border-bottom-color: var(--color-text-secondary);
}
html[data-theme="dark"] .template-json-panel.is-json-expanded .template-json-bracket {
  color: var(--color-text-secondary);
  opacity: 0.95;
}
html[data-theme="dark"] .template-json-chip:not(.template-json-chip--syntax-key) {
  background: linear-gradient(145deg, #3e4248 0%, #4e5258 100%);
  color: #e8eaed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .template-json-accordion-head::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 50%, rgba(106, 171, 115, 0.06) 100%);
}
html[data-theme="dark"] .template-json-textarea {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-input-border-hover);
}
html[data-theme="dark"] .detail-form textarea.form-control,
html[data-theme="dark"] .detail-form input.form-control.template-detail-title-input {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border-color: var(--color-input-border-hover);
}
html[data-theme="dark"] .json-code-ref-grp-pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
html[data-theme="dark"] .json-code-ref-sheet-head {
  color: var(--color-text);
}

html[data-theme="dark"] .usr-log-json-path-bar,
html[data-theme="dark"] .usr-log-json-path-bar--res {
  background: linear-gradient(180deg, var(--color-bg-muted) 0%, var(--color-bg-subtle) 100%);
  border-bottom-color: var(--color-border);
}
html[data-theme="dark"] .usr-log-json-path-bar__label {
  color: var(--color-text-muted);
}
html[data-theme="dark"] .usr-log-json-path-code {
  color: var(--color-text);
  background: var(--color-bg);
  border-color: var(--color-input-border-hover);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .usr-log-json-search {
  background: var(--color-bg);
  color: var(--color-input-text);
  border-color: var(--color-input-border-hover);
}
html[data-theme="dark"] .usr-log-json-search::placeholder {
  color: var(--color-text-muted);
}
html[data-theme="dark"] .usr-log-dual-pane .btn-pill-outline {
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border-color: var(--color-border-hover);
}
html[data-theme="dark"] .usr-log-dual-pane .btn-pill-outline:hover {
  background: var(--color-bg-subtle);
  color: var(--color-heading);
  border-color: var(--color-border-hover);
}
html[data-theme="dark"] .usr-log-json-view {
  background: var(--color-bg);
  color: var(--color-text);
}

/* 공통코드 관리 등 — 다크에서 대비·뱃지·선택 행 보강 */
html[data-theme="dark"] .page-desc {
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .breadcrumb-nav a {
  color: var(--color-link);
}
html[data-theme="dark"] .breadcrumb-nav a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
html[data-theme="dark"] .detail-type-badge {
  background: var(--color-bg-subtle);
  color: var(--color-heading);
  border: 1px solid var(--color-border-hover);
  box-shadow: none;
}
html[data-theme="dark"] .detail-empty {
  border-color: var(--color-border-hover);
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
}
html[data-theme="dark"] .code-grp-panel .panel-header .form-control {
  background: var(--color-bg-subtle);
  border-color: var(--color-input-border-hover);
}
html[data-theme="dark"] .code-manager-page .list-table-wrap .list-search-input,
html[data-theme="dark"] .code-manager-page .list-table-wrap .dataTables_filter input[type="search"] {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-input-border-hover);
}
html[data-theme="dark"] .grp-item.active {
  background: rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="dark"] .grp-item.active .grp-item-label {
  color: var(--color-heading);
}
html[data-theme="dark"] .grp-item.active .grp-item-code {
  color: var(--color-text-secondary);
  opacity: 1;
}
html[data-theme="dark"] .grp-item .btn-xs.btn-outline {
  background: rgba(188, 191, 196, 0.08);
  border-color: var(--color-border-hover);
  color: var(--color-heading);
}
html[data-theme="dark"] .grp-item .btn-xs.btn-outline:hover {
  background: rgba(188, 191, 196, 0.14);
  border-color: var(--color-text-muted);
  color: var(--color-heading);
}
html[data-theme="dark"] .code-manager-page .grp-empty {
  color: var(--color-text-secondary);
}

/* AI prompt admin merge */
.pa-filter-keyword { min-width: 280px; max-width: 420px; }
.pa-empty-message { padding: 12px 0; }

/* AI 프롬프트 관리 — 포털 CSS 변수 연동 (라이트/다크) */
.pa-editor-wrap { max-width: 1400px; margin: 0 auto; padding: 0 0 2rem; }
.pa-list-table tbody tr { cursor: pointer; }
.pa-list-table tbody tr:hover { background: var(--color-bg-row-hover, #f6f8fa); }
.pa-list-table tbody tr.selected { background: var(--color-indigo-pale, #eef2ff); }
.pa-table-empty { margin: 0; }
.pa-wrap { max-width: 1400px; margin: 0 auto; padding: 1rem 1.25rem 2rem; }
.pa-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.pa-head h1 { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--color-heading, #09090b); }
.pa-select { min-width: 220px; padding: 0.45rem 0.6rem; border: 1px solid var(--color-input-border, #d4d4d8); border-radius: var(--radius-md, 8px); background: var(--color-bg-card, #fff); color: var(--color-input-text, #18181b); }
.pa-btn { padding: 0.45rem 1rem; border-radius: var(--radius-md, 8px); border: none; cursor: pointer; font-size: 0.9rem; }
.pa-btn-primary { background: var(--color-primary-dark, #1d4ed8); color: #fff; }
.pa-btn-primary:hover { background: var(--color-primary-darker, #1e40af); }
.pa-btn-secondary { background: var(--color-bg-muted, #f4f4f5); color: var(--color-text, #18181b); border: 1px solid var(--color-border, #e4e4e7); }
.pa-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.pa-meta label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--color-text-muted, #71717a); }
.pa-meta input { padding: 0.4rem 0.5rem; border: 1px solid var(--color-input-border, #d4d4d8); border-radius: var(--radius-sm, 6px); background: var(--color-bg-card, #fff); color: var(--color-input-text, #18181b); }
.pa-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--color-border, #e4e4e7); margin-bottom: 0.5rem; flex-wrap: wrap; }
.pa-tab { padding: 0.5rem 0.9rem; border: none; background: transparent; cursor: pointer; color: var(--color-text-muted, #71717a); border-radius: 6px 6px 0 0; font-size: 0.9rem; }
.pa-tab.active { background: var(--color-bg-subtle, #f4f4f5); color: var(--color-heading, #09090b); font-weight: 600; }
.pa-tab:hover { background: var(--color-bg-muted, #f4f4f5); }
.pa-editor { display: none; }
.pa-editor.active { display: block; }
.pa-editor textarea { width: 100%; min-height: 320px; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.82rem; line-height: 1.45; padding: 0.75rem; border: 1px solid var(--color-input-border, #d4d4d8); border-radius: var(--radius-md, 8px); resize: vertical; box-sizing: border-box; background: var(--color-bg-card, #fff); color: var(--color-input-text, #18181b); }
.pa-hint { font-size: 0.8rem; color: var(--color-text-muted, #71717a); margin: 0.35rem 0 0.75rem; }
.pa-split { display: grid; grid-template-columns: 1fr 380px; gap: 1.25rem; margin-top: 1.25rem; }
@media (max-width: 1024px) { .pa-split { grid-template-columns: 1fr; } }
.pa-panel { border: 1px solid var(--color-panel-border, #e4e4e7); border-radius: var(--radius-lg, 10px); padding: 1rem; background: var(--color-bg-subtle, #f4f4f5); }
.pa-panel h2 { font-size: 1rem; margin: 0 0 0.75rem; color: var(--color-heading, #09090b); }
.pa-test-layer { margin-bottom: 0.75rem; }
.pa-test-layer select { width: 100%; padding: 0.4rem; border: 1px solid var(--color-input-border, #d4d4d8); border-radius: var(--radius-sm, 6px); background: var(--color-bg-card, #fff); color: var(--color-input-text, #18181b); }
.pa-vars { display: flex; flex-direction: column; gap: 0.5rem; max-height: 220px; overflow-y: auto; margin-bottom: 0.75rem; }
.pa-vars label { display: grid; grid-template-columns: 100px 1fr; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--color-text-muted, #71717a); }
.pa-vars input { padding: 0.35rem 0.45rem; border: 1px solid var(--color-input-border, #d4d4d8); border-radius: var(--radius-sm, 6px); background: var(--color-bg-card, #fff); color: var(--color-input-text, #18181b); }
.pa-chat-log { min-height: 160px; max-height: 280px; overflow-y: auto; background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e4e4e7); border-radius: var(--radius-md, 8px); padding: 0.5rem; font-size: 0.85rem; margin-bottom: 0.5rem; color: var(--color-text, #18181b); }
.pa-chat-log .u { color: var(--color-blue-700, #1d4ed8); margin: 0.25rem 0; }
.pa-chat-log .a { color: var(--color-success, #15803d); margin: 0.25rem 0; white-space: pre-wrap; }
.pa-json { font-family: ui-monospace, monospace; font-size: 0.75rem; background: var(--color-table-header-bg, #27272a); color: var(--color-table-header-text, #fafafa); padding: 0.5rem; border-radius: var(--radius-sm, 6px); max-height: 160px; overflow: auto; }
.pa-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.pa-row input[type="text"] { flex: 1; padding: 0.45rem; border: 1px solid var(--color-input-border, #d4d4d8); border-radius: var(--radius-sm, 6px); background: var(--color-bg-card, #fff); color: var(--color-input-text, #18181b); }
.pa-msg { padding: 0.5rem; border-radius: var(--radius-sm, 6px); font-size: 0.85rem; margin-top: 0.5rem; }
.pa-msg.ok { background: var(--color-success-bg, #ecfdf5); color: var(--color-success, #15803d); }
.pa-msg.err { background: var(--color-danger-bg, #fef2f2); color: var(--color-danger, #dc2626); }
.pa-list-search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pa-list-search .list-search-input { min-width: 220px; }
.pa-prompt-grid tbody tr.pa-row-clickable { cursor: pointer; }
.pa-prompt-grid tbody tr.pa-row-clickable:hover { background: var(--color-bg-row-hover, #f4f4ff); }
.pa-row-actions { white-space: nowrap; }
.pa-row-actions a, .pa-row-actions button { position: relative; z-index: 1; }
.pa-pager { margin-top: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--color-border, #e4e4e7); }
.pa-pager-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pa-pager-info { font-size: 0.85rem; color: var(--color-text-muted, #71717a); }
.pa-pager-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
/* ---------- AI 프롬프트 상세 (최신 레이아웃: 카드 + 2열 + 세그먼트 탭) ---------- */
.page-content.pa-detail-page { max-width: none; width: 100%; box-sizing: border-box; padding: var(--space-5, 20px) var(--space-3, 12px) var(--space-10, 40px); }
.pa-detail-page { width: 100%; max-width: none; margin: 0; padding: 0; box-sizing: border-box; }
.pa-detail-page .page-desc { max-width: none; }
.pa-detail-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4, 16px); margin-bottom: var(--space-4, 16px); }
.pa-detail-header-text h1 { margin-bottom: var(--space-2, 8px); }
.pa-detail-desc { color: var(--color-text-secondary, #475569); line-height: var(--leading-relaxed, 1.6); }
.pa-detail-desc code { font-size: 0.85em; padding: 0.1em 0.35em; border-radius: 4px; background: var(--color-bg-subtle, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); }
.pa-detail-main { display: flex; flex-direction: column; gap: var(--space-3, 12px); min-width: 0; height: 100%; min-height: 0; }
.pa-detail-main .pa-card { margin-bottom: 0; }
.pa-detail-main .pa-card.pa-card-layers { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: var(--space-4, 16px); }
.pa-card-layers .pa-card-head { margin-bottom: var(--space-2, 8px); }
.pa-card-layers .pa-card-head, .pa-card-layers .pa-segment-tabs, .pa-card-layers .pa-editor-hint { flex-shrink: 0; }
.pa-card-layers .pa-segment-tabs { margin-bottom: var(--space-2, 8px); }
.pa-card-layers .pa-editor-hint { margin-bottom: var(--space-2, 8px); }
.pa-card-layers .pa-editor { display: none; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pa-card-layers .pa-editor.active { display: flex; }
.pa-card-layers .pa-code-area { flex: 1 1 auto; min-height: min(58vh, 640px); height: auto; max-height: none; }
.pa-detail-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-5, 20px); align-items: stretch; width: 100%; }
@media (min-width: 1100px) {
  .pa-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  }
}
@media (max-width: 1099px) { .pa-detail-layout { grid-template-columns: 1fr; } }
.pa-detail-aside { display: flex; flex-direction: column; min-height: 0; align-self: stretch; }
.pa-detail-aside--vars > .pa-card.pa-card-test { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; overflow: hidden; }
.pa-card-test > .pa-card-title, .pa-card-test > .pa-test-context, .pa-card-test > .pa-var-chips-wrap { flex-shrink: 0; }
@media (max-width: 1100px) {
  .pa-detail-main { height: auto; }
  .pa-detail-main .pa-card.pa-card-layers { flex: 0 1 auto; min-height: auto; }
  .pa-card-layers .pa-editor { flex: none; }
  .pa-card-layers .pa-editor.active { display: block; }
  .pa-card-layers .pa-code-area { flex: none; min-height: min(56vh, 560px); }
  .pa-detail-aside--vars > .pa-card.pa-card-test { min-height: auto; overflow: visible; }
}
.pa-card { background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)); padding: var(--space-5, 20px); margin-bottom: var(--space-5, 20px); }
.pa-card:last-child { margin-bottom: 0; }
.pa-card-title { font-size: var(--text-md, 0.9rem); font-weight: var(--font-semibold, 600); color: var(--color-heading, #0f172a); margin: 0 0 var(--space-4, 16px); letter-spacing: -0.02em; }
.pa-card-meta .pa-card-title { font-size: var(--text-md, 0.9rem); margin-bottom: var(--space-2, 8px); }
.pa-detail-main .pa-card.pa-card-meta { flex: 0 0 auto; padding: var(--space-3, 12px) var(--space-4, 16px); }
.pa-card-test .pa-card-title { font-size: var(--text-lg, 1rem); }
.pa-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); margin-bottom: var(--space-3, 12px); }
.pa-card-head .pa-card-title { margin-bottom: 0; }
.pa-editor-stats { display: flex; align-items: center; gap: var(--space-3, 12px); font-size: var(--text-sm, 0.82rem); color: var(--color-text-muted, #64748b); }
.pa-stat-label { margin-right: 0.25rem; }
.pa-stat strong { color: var(--color-text, #1e293b); font-weight: 600; }
.pa-meta-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2, 8px) var(--space-3, 12px); align-items: start; }
.pa-card-meta .pa-field-label { font-size: var(--text-sm, 0.82rem); font-weight: 600; color: var(--color-text-secondary, #475569); letter-spacing: -0.01em; }
.pa-card-meta .pa-field { gap: 4px; }
.pa-card-meta .form-control { font-size: var(--text-sm, 0.82rem); padding: 0.35rem 0.55rem; min-height: 34px; }
.pa-field { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin: 0; min-width: 0; }
@media (max-width: 1200px) { .pa-meta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pa-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pa-meta-grid { grid-template-columns: 1fr; } }
.pa-field-label { font-size: var(--text-xs, 0.75rem); font-weight: 500; color: var(--color-text-muted, #64748b); }
.pa-segment-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3, 12px); }
.pa-segment { padding: 0.45rem 0.95rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: 999px; background: var(--color-bg-subtle, #f8fafc); color: var(--color-text-secondary, #475569); font-size: var(--text-sm, 0.82rem); font-weight: 500; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.pa-segment:hover { background: var(--color-indigo-soft, rgba(13, 148, 136, 0.15)); border-color: var(--color-primary-light, #818cf8); color: var(--color-heading, #0f172a); }
.pa-segment.active { background: linear-gradient(135deg, var(--color-primary, #0d9488), var(--color-primary-dark, #0f766e)); border-color: transparent; color: #fff; box-shadow: 0 2px 8px var(--color-indigo-shadow, rgba(13, 148, 136, 0.35)); }
.pa-editor-hint { font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted, #64748b); margin: 0 0 var(--space-3, 12px); line-height: 1.5; }
.pa-code-area { width: 100%; min-height: min(58vh, 640px); font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace; font-size: 0.8125rem; line-height: 1.55; tab-size: 2; padding: var(--space-4, 16px); border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 8px); resize: vertical; box-sizing: border-box; background: var(--color-bg-subtle, #f8fafc); color: var(--color-heading, #0f172a); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.pa-code-area:hover { border-color: var(--color-border-hover, #cbd5e1); }
.pa-code-area:focus { outline: none; border-color: var(--color-border-focus, #0d9488); box-shadow: 0 0 0 3px var(--color-indigo-soft, rgba(13, 148, 136, 0.15)); background: var(--color-bg-card, #fff); }
.pa-test-context { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin-bottom: var(--space-4, 16px); }
.pa-badge-layer { display: inline-flex; align-self: flex-start; padding: 0.3rem 0.75rem; border-radius: 6px; font-size: var(--text-sm, 0.82rem); font-weight: 600; letter-spacing: 0.04em; background: var(--color-indigo-pale, #ccfbf1); color: var(--color-primary-darker, #4338ca); }
.pa-test-context-note { margin: 0; font-size: var(--text-sm, 0.82rem); line-height: 1.55; color: var(--color-text-secondary, #475569); }
.pa-test-context-note strong { font-weight: 600; color: var(--color-heading, #0f172a); }
.pa-var-chips-wrap { padding: var(--space-3, 12px) var(--space-4, 16px); margin-bottom: var(--space-4, 16px); border-radius: var(--radius-md, 8px); border: 1px solid var(--color-border, #e2e8f0); background: linear-gradient(165deg, rgba(13, 148, 136, 0.08) 0%, var(--color-bg-card, #fff) 48%); }
.pa-var-chips-label { display: block; font-size: var(--text-sm, 0.82rem); font-weight: 700; color: var(--color-heading, #0f172a); margin-bottom: var(--space-2, 8px); letter-spacing: -0.02em; }
.pa-var-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 1.75rem; }
.pa-var-empty { font-size: var(--text-sm, 0.82rem); color: var(--color-text-muted, #64748b); font-style: italic; line-height: 1.5; }
.pa-chip { display: inline-flex; align-items: center; padding: 0.35rem 0.65rem; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; font-family: ui-monospace, monospace; }
.pa-chip-brace { background: var(--color-info-bg, #e0f2fe); color: var(--color-info, #0369a1); border: 1px solid #bae6fd; }
.pa-chip-dollar { background: var(--color-purple-bg, #ede9fe); color: var(--color-purple, #6d28d9); border: 1px solid #ddd6fe; }
/* =====================================================
   회원 현황·탈퇴·휴면 — KPI·진도율 (라이트/다크)
   ===================================================== */
.member-kpi-point { color: #b8860b; font-weight: 700; }
.member-kpi-exp { color: #c2410c; font-weight: 700; }
.member-kpi-sub { color: var(--color-text-muted); font-size: 0.7rem; }
html[data-theme="dark"] .member-kpi-point { color: #e8c547; text-shadow: 0 0 1px rgba(0,0,0,0.4); }
html[data-theme="dark"] .member-kpi-exp { color: #f0a050; text-shadow: 0 0 1px rgba(0,0,0,0.4); }

.member-progress-wrap { display: flex; align-items: center; gap: 6px; }
.member-progress-track {
  flex: 1; min-width: 60px; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--color-border-light);
}
html[data-theme="light"] .member-progress-track { background: #e5e7eb; }
.member-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--color-success), #2d8a47);
}
html[data-theme="dark"] .member-progress-fill {
  background: linear-gradient(90deg, #5a9e63, var(--color-success));
  box-shadow: 0 0 6px rgba(106, 171, 115, 0.35);
}
.member-progress-pct {
  font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--color-success);
}
html[data-theme="dark"] .member-progress-pct { color: var(--badge-success-fg); }

/* 그리드 상태 배지: 단체 회원「계약 상태」와 동일 — 전역 .badge + .badge-* (회원 현황 구분·현재 단계 포함) */
.code-table tbody td .badge {
  vertical-align: middle;
}

.text-muted-teacher { color: var(--color-text-muted); font-size: 0.85em; }

/* 회원 상세 팝업 */
.member-popup-overlay.open { display: flex !important; background: rgba(0, 0, 0, 0.45) !important; }
html[data-theme="dark"] .member-popup-overlay.open { background: rgba(0, 0, 0, 0.62) !important; }
.member-popup-overlay--nested.open { z-index: 1100; }

/* 세션 문항 이력 중첩 팝업 */
.member-session-modal { width: min(960px, 94vw); max-width: 94vw; max-height: 85vh; display: flex; flex-direction: column; }
.member-session-modal.member-session-modal--chat { width: min(960px, 94vw); }
.member-session-modal .modal-header { flex-shrink: 0; background: var(--color-primary); color: #fff; padding: 14px 20px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.member-session-modal .modal-body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; }
.member-session-modal .modal-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.35; }
.member-session-modal .modal-close { color: #fff; opacity: 0.85; font-size: 22px; }
.member-session-badge {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  font-size: 12px; font-weight: 600; border-radius: 12px;
  background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.4);
}
.member-session-badge:empty { display: none; }
.member-review-result {
  margin-bottom: 16px; padding: 12px 14px; border-radius: 12px;
  background: #f8fafc; border: 1px solid #e2e8f0;
}
.member-review-result__title {
  font-size: 12px; font-weight: 700; color: var(--color-text-secondary);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.02em;
}
html[data-theme="dark"] .member-review-result {
  background: var(--color-surface-elevated, #1e293b);
  border-color: var(--color-border, #334155);
}
.member-flex-data { font-size: 12px; line-height: 1.5; }
.member-flex-data__obj { margin: 0; }
.member-flex-data__row {
  display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 8px 14px;
  padding: 6px 0; border-bottom: 1px solid #e2e8f0;
}
.member-flex-data__row:last-child { border-bottom: none; }
.member-flex-data__row dt {
  margin: 0; font-weight: 600; color: var(--color-text-secondary);
  word-break: break-all;
}
.member-flex-data__row dd { margin: 0; min-width: 0; }
.member-flex-data__list { margin: 0; padding: 0; list-style: none; }
.member-flex-data__list-item {
  display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #e2e8f0;
}
.member-flex-data__list-item:last-child { border-bottom: none; }
.member-flex-data__idx {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #e2e8f0; color: #475569; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.member-flex-data__list-body { flex: 1; min-width: 0; }
.member-flex-data__text { white-space: pre-wrap; word-break: break-word; }
.member-flex-data__empty { color: var(--color-text-secondary); }
.member-flex-data--review > .member-flex-data__obj > .member-flex-data__row {
  grid-template-columns: minmax(140px, 32%) 1fr;
}
.member-flex-data--in-bubble { max-height: 420px; overflow: auto; }
.member-chat-thread { display: flex; flex-direction: column; gap: 14px; }
.member-chat-bubble { max-width: min(88%, 820px); display: flex; flex-direction: column; gap: 6px; }
.member-chat-bubble--user { align-self: flex-end; align-items: flex-end; }
.member-chat-bubble--assistant,
.member-chat-bubble--system { align-self: flex-start; align-items: flex-start; }
.member-chat-bubble__body {
  padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55;
  word-break: break-word; white-space: pre-wrap;
}
.member-chat-bubble--user .member-chat-bubble__body {
  background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px;
}
.member-chat-bubble--assistant .member-chat-bubble__body {
  background: #f1f5f9; color: var(--color-text); border-bottom-left-radius: 4px;
  border: 1px solid #e2e8f0;
}
.member-chat-bubble--system .member-chat-bubble__body {
  background: #fffbeb; color: var(--color-text); border-bottom-left-radius: 4px;
  border: 1px solid #fde68a; font-size: 12px;
}
html[data-theme="dark"] .member-chat-bubble--assistant .member-chat-bubble__body {
  background: var(--color-surface-elevated, #1e293b); border-color: var(--color-border, #334155);
}
.member-chat-bubble__text { margin: 0; }
.member-chat-bubble__sub { margin: 6px 0 0; font-size: 12px; opacity: 0.85; }
.member-chat-bubble__tag {
  display: inline-block; margin-top: 6px; padding: 1px 8px; font-size: 11px; font-weight: 600;
  border-radius: 8px; background: rgba(0,0,0,0.08);
}
.member-chat-bubble--user .member-chat-bubble__tag { background: rgba(255,255,255,0.2); }
.member-chat-bubble__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 11px; color: var(--color-text-secondary);
}
.member-chat-bubble__role { font-weight: 600; color: var(--color-text); }
.member-chat-bubble--user .member-chat-bubble__role { color: var(--color-primary); }
.member-chat-bubble__layer {
  padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 600;
  background: #e2e8f0; color: #475569;
}
.member-chat-bubble__time { font-variant-numeric: tabular-nums; }
.member-chat-review { display: flex; flex-direction: column; gap: 10px; }
.member-chat-review__item {
  padding: 8px 0; border-bottom: 1px dashed #e2e8f0;
}
.member-chat-review__item:last-child { border-bottom: none; padding-bottom: 0; }
.member-chat-review__kw { font-size: 11px; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; }
.member-chat-review__line { margin: 0 0 4px; font-weight: 600; }
.member-chat-review__corr { margin: 0 0 4px; color: #0369a1; font-size: 12px; }
.member-chat-review__exp { margin: 0; font-size: 12px; color: var(--color-text-secondary); line-height: 1.45; }
.member-redo-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 11px; font-weight: 600; border-radius: 10px;
  background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc;
  vertical-align: middle;
}
.member-correct-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.member-correct-badge--y { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.member-correct-badge--n { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.btn-xs { padding: 2px 8px; font-size: 11px; line-height: 1.5; }
.member-session-table td, .member-session-table th { font-size: 12px; }
.member-history-table th { font-size: 11px; white-space: nowrap; }
.member-history-table td { font-size: 12px; }
.td-nowrap { white-space: nowrap; }
.td-center { text-align: center; }
.td-mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 11px; color: var(--color-text-secondary); }
.td-ellipsis { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 학습 현황 탭 - 프로그램 → 코스 계층 */
.member-program-group {
  margin-bottom: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.member-program-group__header {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
html[data-theme="dark"] .member-program-group__header { background: #1e293b; color: #f1f5f9; border-color: #334155; }
html[data-theme="dark"] .member-program-group { border-color: #334155; }

.member-course-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.member-course-row:last-child { border-bottom: none; }
.member-course-row--active { background: #eff6ff; }
html[data-theme="dark"] .member-course-row--active { background: rgba(59,130,246,0.08); }
html[data-theme="dark"] .member-course-row { border-color: #1e293b; }

.member-course-row__name {
  flex: 0 1 auto;
  width: fit-content;
  max-width: min(420px, 52%);
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
html[data-theme="dark"] .member-course-row__name { color: #f1f5f9; }

.member-course-row__bar {
  flex: 0 0 120px;
  max-width: 120px;
  height: 8px;
  margin-top: 4px;
  flex-shrink: 0;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}
.member-course-row__bar .member-progress-bar__fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 4px;
  transition: width .3s;
}

.member-course-row__pct {
  flex: 0 0 40px;
  font-weight: 700;
  font-size: 13px;
  color: #3b82f6;
  text-align: right;
  margin-top: 2px;
  flex-shrink: 0;
}
.member-course-row__cnt {
  flex: 0 0 auto;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  margin-top: 2px;
  flex-shrink: 0;
}
.member-course-row__pos {
  flex: 0 0 100%;
  font-size: 11px;
  color: #3b82f6;
  padding-left: 0;
  margin-top: -2px;
}
.member-course-row__pos strong { font-weight: 600; }

.member-lesson-list {
  flex: 0 0 100%;
  padding-left: 16px;
  margin-top: 4px;
}
.member-lesson-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  color: #475569;
}
.member-lesson-row__name {
  flex: 0 1 auto;
  width: fit-content;
  max-width: min(340px, 48%);
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.member-lesson-row__bar {
  flex: 0 0 80px;
  height: 6px;
  margin-top: 3px;
  flex-shrink: 0;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.member-lesson-row__bar .member-progress-bar__fill {
  height: 100%;
  background: #60a5fa;
  border-radius: 3px;
}
.member-lesson-row__pct {
  flex: 0 0 32px;
  font-size: 11px;
  font-weight: 600;
  color: #60a5fa;
  text-align: right;
  flex-shrink: 0;
  margin-top: 1px;
}
.member-lesson-row__cnt {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
  margin-top: 1px;
  white-space: nowrap;
}
html[data-theme="dark"] .member-lesson-row { color: #cbd5e1; }
html[data-theme="dark"] .member-lesson-row__bar { background: #334155; }

@media (max-width: 800px) {
  .member-course-row__name { max-width: min(100%, 340px); font-size: 12px; }
  .member-lesson-row__name { max-width: min(100%, 260px); }
  .member-course-row { padding: 8px 12px; gap: 8px; }
}

.member-progress-bar { flex: 0 0 140px; max-width: 140px; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.member-progress-bar__fill { height: 100%; background: #3b82f6; border-radius: 4px; transition: width .3s; }
.member-progress-pct { font-weight: 700; font-size: 13px; color: #3b82f6; min-width: 38px; text-align: right; }

.member-learning-summary-row {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-bottom: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%); border-radius: 10px;
  border: 1px solid #bfdbfe;
}
html[data-theme="dark"] .member-learning-summary-row { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.25); }
.member-learning-summary-row .member-progress-bar { height: 10px; }
.member-learning-summary-stat { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.member-learning-summary-stat b { font-size: 15px; color: var(--color-heading); }

.member-detail-modal { width: 1100px; max-width: 96vw; max-height: 92vh; overflow-y: auto; }
.member-detail-modal__header { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.member-detail-modal__title { margin: 0; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.member-detail-modal__subtitle { margin: 5px 0 0; font-size: 14px; color: rgba(255,255,255,0.88); font-weight: 500; }

.member-detail-modal__tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--color-border); padding: 0 var(--space-6); background: var(--color-bg-card);
}
.member-detail-tab {
  padding: 10px 18px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--color-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.member-detail-tab:hover { color: var(--color-heading); }
.member-detail-tab.is-active {
  color: var(--color-primary); border-bottom-color: var(--color-primary);
}

.member-detail-modal__body { min-height: 360px; padding: var(--space-5) var(--space-6); }

.member-detail-card {
  background: var(--color-bg-card); border: 1px solid var(--color-panel-border); border-radius: 10px; padding: 18px 20px;
}
.member-detail-card + .member-detail-card { margin-top: var(--space-4); }
.member-detail-card__title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--color-heading);
}
.member-detail-card__bullet {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0;
}
.member-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .member-detail-grid { grid-template-columns: repeat(2, 1fr); } }
.member-detail-grid--3 { grid-template-columns: repeat(3, 1fr); }

.member-detail-field__label { color: var(--color-text-muted); font-size: 12px; margin-bottom: 4px; }
.member-detail-field__value { font-weight: 600; color: var(--color-heading); word-break: break-word; }
.member-detail-coupon { font-weight: 700; color: var(--color-warning); }

.member-detail-banner {
  padding: 10px 14px; background: var(--color-bg-subtle); border-radius: 8px; margin-bottom: 12px; font-size: 13px; color: var(--color-body);
}
.member-detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.member-detail-chip {
  background: var(--color-success-bg); color: var(--color-success); padding: 4px 12px; border-radius: 20px;
  font-size: 13px; font-weight: 600; border: 1px solid var(--color-success-border);
}
html[data-theme="dark"] .member-detail-chip {
  background: rgba(106, 171, 115, 0.14); color: var(--badge-success-fg); border-color: var(--badge-success-border);
}
.member-detail-chip-sep { color: var(--color-text-muted); }

.member-detail-stat {
  border-radius: 10px; padding: 16px 20px; text-align: center; border: 1px solid var(--color-panel-border);
  background: var(--color-bg-subtle);
}
.member-detail-stat__label { color: var(--color-text-muted); font-size: 12px; margin-bottom: 4px; }
.member-detail-stat__value { font-size: 22px; font-weight: 800; color: var(--color-primary); }

.member-detail-table { width: 100%; font-size: 13px; border-collapse: collapse; color: var(--color-body); }
.member-detail-table th {
  text-align: left; padding: 8px 6px; color: var(--color-text-muted); font-weight: 500; border-bottom: 1px solid var(--color-border);
}
.member-detail-table td { padding: 8px 6px; border-bottom: 1px solid var(--color-border-light); }

.member-reward-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.member-reward-card {
  border-radius: 10px; padding: 18px 20px; border: 1px solid var(--color-panel-border);
  background: var(--color-bg-subtle);
}
html[data-theme="light"] .member-reward-card--point { background: #fffbeb; border-color: #fde68a; }
html[data-theme="light"] .member-reward-card--exp { background: #fff7ed; border-color: #fdba74; }
html[data-theme="dark"] .member-reward-card--point { background: rgba(232, 197, 71, 0.1); border-color: rgba(232, 197, 71, 0.35); }
html[data-theme="dark"] .member-reward-card--exp { background: rgba(240, 160, 80, 0.1); border-color: rgba(240, 160, 80, 0.35); }
.member-reward-card__icon {
  width: 44px; height: 44px; background: var(--color-bg-card); border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 22px; border: 1px solid var(--color-border);
}
.member-reward-card__num { font-size: 24px; font-weight: 800; color: var(--color-heading); }
.member-reward-card__sub { font-size: 11px; color: var(--color-text-muted); }

.member-reward-pill-row { display: flex; gap: 8px; }
.member-reward-pill {
  flex: 1; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;
  border: 2px solid var(--color-border); background: var(--color-bg-subtle); color: var(--color-body);
}
.member-reward-pill--point.is-active { border-color: #e8c840; background: #fffde7; }
.member-reward-pill--exp.is-active { border-color: #fdba74; background: #fff7ed; }
.member-reward-pill--give.is-active { border-color: var(--color-success); background: var(--color-success-bg); }
.member-reward-pill--deduct.is-active { border-color: var(--color-danger); background: var(--color-danger-bg); }
html[data-theme="dark"] .member-reward-pill--point.is-active { background: rgba(232, 197, 71, 0.12); border-color: #c9a227; color: var(--color-heading); }
html[data-theme="dark"] .member-reward-pill--exp.is-active { background: rgba(240, 160, 80, 0.12); border-color: #c2410c; color: var(--color-heading); }
html[data-theme="dark"] .member-reward-pill--give.is-active { background: rgba(106, 171, 115, 0.15); }
html[data-theme="dark"] .member-reward-pill--deduct.is-active { background: rgba(242, 101, 101, 0.12); }

/* 수동 보상 팝업 — 가로·세로 여유 (본문·필드 간격) */
.member-manual-reward-modal {
  width: min(580px, 96vw);
}
.member-manual-reward-modal .modal-header {
  padding: var(--space-5) var(--space-8);
}
.member-manual-reward-modal .modal-body {
  padding: var(--space-8) var(--space-8);
}
.member-manual-reward-modal .modal-footer {
  padding: var(--space-5) var(--space-8);
}
.member-manual-reward-modal .form-field:not(:last-child) {
  margin-bottom: var(--space-6);
}
.member-manual-reward-modal .member-reward-pill {
  padding: 12px 14px;
}
.member-manual-reward-modal .form-hint-sm {
  margin-top: var(--space-2);
}
.member-manual-reward-modal .modal-label {
  margin-bottom: var(--space-2);
}
.member-manual-expire-radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-2);
}
.member-manual-expire-radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-body);
  font-weight: 500;
}
.member-manual-expire-radio-label input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.member-manual-expire-date-wrap {
  margin-top: var(--space-4);
}
.member-manual-expire-date-wrap .form-control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.member-badge-earn { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.member-badge-earn--yes { background: var(--color-success-bg); color: var(--color-success); }
.member-badge-earn--no { background: var(--color-danger-bg); color: var(--color-danger); }
html[data-theme="dark"] .member-badge-earn--yes { color: var(--badge-success-fg); }
html[data-theme="dark"] .member-badge-earn--no { color: var(--badge-danger-fg); }

.member-detail-loading { text-align: center; padding: 40px; color: var(--color-text-muted); }
.member-detail-empty { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.member-detail-stack { display: flex; flex-direction: column; gap: 16px; }
.member-detail-card__title--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; }
.member-detail-card__title__start { display: flex; align-items: center; gap: 8px; }

/* 연속 그리드 간격 */
.member-detail-grid + .member-detail-grid { margin-top: 12px; }

/* 최근 학습일 값 */
.member-detail-stat__date { font-size: 15px; margin-top: 4px; font-weight: 600; color: var(--color-heading); }

/* 학습 이력 페이지네이션 */
.member-detail-pager { margin-top: 12px; text-align: center; }
.member-detail-pager__info {
  display: inline-block; margin: 0 10px; font-size: 12px; color: var(--color-text-muted);
}

/* 보상 카드 내부 레이아웃 */
.member-reward-card__inner { display: flex; align-items: center; gap: 10px; }

/* 상세 테이블 정렬 헬퍼 */
.member-detail-table .th-center,
.member-detail-table .td-center { text-align: center; }
.member-detail-table .th-right,
.member-detail-table .td-right { text-align: right; }
.member-detail-table .td-num { text-align: right; font-weight: 700; }

/* 탭 패널 기본 숨김 (JS .show()/.hide() 로 제어) */
.tab-panel { display: none; }

.member-status-pill { font-weight: 600; }
.member-status-pill--active { color: var(--color-success); }
.member-status-pill--withdrawn { color: var(--color-danger); }
.member-status-pill--dormant { color: var(--color-text-secondary); }

.member-amt-earn { color: var(--color-success); }
.member-amt-use { color: var(--color-danger); }
html[data-theme="dark"] .member-amt-earn { color: var(--badge-success-fg); }
html[data-theme="dark"] .member-amt-use { color: var(--badge-danger-fg); }

/* =====================================================
   유틸리티 — 간격
   ===================================================== */
.u-mb-2 { margin-bottom: 8px; }
.u-mb-4 { margin-bottom: 16px; }
.u-mb-5 { margin-bottom: 20px; }
.u-mt-4 { margin-top: 16px; }
.text-no-margin { margin: 0; }
.text-muted--sm { font-size: 12px; }
.td-empty-state { padding: 24px; text-align: center; }
.td-empty-state--sm { padding: 8px; text-align: center; }

/* =====================================================
   탭 네비게이션 바 / 버튼 아이콘
   ===================================================== */
.tab-wrap { margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.btn-icon { vertical-align: middle; margin-right: 6px; }

/* =====================================================
   form-control 너비·최소너비 확장
   ===================================================== */
.form-control--w-180 { width: 180px; }
.form-control--mw-180 { min-width: 180px; }
.form-control--mw-240 { min-width: 240px; }
.form-control--mw-280 { min-width: 280px; }
.search-date-sep { margin-left: 8px; }

/* =====================================================
   코드 박스 (appClientList)
   ===================================================== */
.code-box--block { display: block; padding: 8px; }
.secret-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.secret-cell code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.secret-cell .btn { flex-shrink: 0; }

/* =====================================================
   카드 섹션 헤더/바디 (orgDetail 등)
   ===================================================== */
.card-section-head { border-bottom: 1px solid var(--color-border); padding: 12px 16px; }
.card-section-body { padding: 16px; }
.table-card--mb { margin-bottom: 24px; }
.org-section-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--color-border); padding: 12px 16px;
}
.org-section-actions { display: flex; align-items: center; gap: 8px; }

/* 단체 상세 — 단체 정보 (격자 라인 + 테두리) */
.card-section-body--org-info { padding: 16px 18px 18px; }
.org-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 920px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.org-detail-info-grid .member-detail-field {
  padding: 14px 18px;
  background: var(--color-bg-card);
  min-width: 0;
}
.org-detail-info-grid .member-detail-field__label {
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.org-detail-info-grid .member-detail-field__value {
  font-size: 15px;
  line-height: 1.45;
}
.org-detail-info-grid__span2 { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .org-detail-info-grid { grid-template-columns: 1fr; }
  .org-detail-info-grid__span2 { grid-column: auto; }
}
html[data-theme="dark"] .org-detail-info-grid {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 단체 상세 — 부서 행 버튼 (목록 화면과 동일 계열) */
.dept-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.form-th--w-120 { width: 120px; }

/* =====================================================
   모달 내 섹션 제목 · 스크롤 테이블
   ===================================================== */
.modal-section-title { margin-bottom: 12px; font-size: 1rem; font-weight: 600; }
.table-scroll-wrap { border: 1px solid var(--color-border); border-radius: 6px; overflow-x: auto; }
.code-table--flush { margin: 0; }

/* =====================================================
   진도율 바
   ===================================================== */
.progress-wrap { display: flex; align-items: center; gap: 8px; }
.progress-track { flex: 1; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-success); border-radius: 4px; }

/* =====================================================
   배정 패널 (classList)
   ===================================================== */
.assign-panel-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.assign-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.assign-panel-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.assign-list-wrap { border: 1px solid var(--color-border); border-radius: 6px; overflow-y: auto; max-height: 480px; }
.assign-search-input { max-width: 300px; }

/* =====================================================
   강좌 배정 강좌 선택기 (classList JS 생성 HTML)
   ===================================================== */
.course-picker-scroll {
  max-height: min(44vh, 380px); overflow-y: auto;
  padding: 2px 4px 6px 0;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg-subtle);
}
.course-picker-group {
  margin: 8px;
  border: 1px solid var(--color-border-light); border-radius: 8px;
  overflow: hidden; background: var(--color-bg-card); box-shadow: var(--shadow-sm);
}
.course-picker-group-header {
  font-weight: 700; padding: 9px 12px; font-size: 13px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-subtle);
}
.course-picker-group-body { padding: 8px 10px 10px; }
.portal-cb-toggle--multiline { margin: 0 0 8px; }

/* =====================================================
   강좌 배정 — 단체/학생 섹션 (courseAssignList JS 생성 HTML)
   ===================================================== */
.course-assign-section { margin-bottom: 12px; }
/* 조건별 앱 노출 메뉴 — 배정 구분 컬럼(긴 공통코드명) 줄바꿈 */
#appMenuDefaultTable td.td-assign-kind-wide {
  white-space: normal;
  word-break: keep-all;
  line-height: 1.35;
}
.course-assign-list { margin: 6px 0 0 18px; padding: 0; line-height: 1.55; }
/* 현재 배정 강좌 셀 → 상세 팝업 링크 */
.course-detail-link { color: var(--color-primary); text-decoration: none; cursor: pointer; }
.course-detail-link:hover { text-decoration: underline; }

/* ── 현재 배정 강좌 상세 팝업 (member-detail-card 패턴 차용) ── */
.course-detail-modal .modal-body { background: var(--color-bg-subtle); }
.course-detail-card { padding: 16px 18px; }
.course-detail-card + .course-detail-card { margin-top: var(--space-4); }
.course-detail-bullet--direct  { background: var(--color-primary); }
.course-detail-bullet--org     { background: var(--badge-info-fg); }
.course-detail-bullet--default { background: var(--badge-purple-fg); }
.course-detail-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--color-bg-subtle); border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 12px; font-weight: 700; line-height: 1;
}
.course-detail-prog { margin-top: 12px; }
.course-detail-prog:first-of-type { margin-top: 2px; }
.course-detail-prog__title { font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 8px; }
.course-detail-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.course-detail-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 10px; border-radius: 8px;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  font-size: 13px; color: var(--color-heading);
}
.course-detail-chip__no {
  font-size: 11px; color: var(--color-text-muted);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-light);
  border-radius: 5px; padding: 1px 6px; line-height: 1.4;
}
.course-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 16px; color: var(--color-text-muted);
}
.course-detail-empty svg { opacity: 0.45; }
.course-detail-empty p { margin: 0; font-size: 14px; }
.course-assign-options { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.direct-assign-section { margin-bottom: 16px; }
.direct-assign-options { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.program-assign-card {
  margin-bottom: 16px; padding: 12px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg-subtle);
}
.program-assign-card-header {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; justify-content: space-between;
}
.program-assign-card-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; white-space: nowrap; }
.program-assign-card-courses { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.course-assign-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-bg-muted);
}
.member-change-modal-wrap {
  margin-top: 12px; max-height: 480px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.member-org-assign-block {
  padding: 12px 14px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border); border-radius: 8px;
}
.member-assign-block-head { font-weight: 600; margin-bottom: 6px; }
.member-assign-block-note { font-size: 12px; margin: 8px 0 0; }
.program-check-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }

/* 전역 기본 액티비티 모달 — 넓은 창 + 트리 접기/펼치기 (details) */
#globalDefaultModal .modal-box.global-default-activity-modal {
  width: min(1280px, 96vw);
  max-height: min(94vh, 920px);
}
#globalDefaultModal .modal-box.global-default-activity-modal .modal-body {
  max-height: min(calc(94vh - 132px), 780px);
}
#globalDefaultModal .global-default-tree-program {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-card);
  margin-bottom: 10px;
  overflow: hidden;
}
#globalDefaultModal .global-default-tree-course {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-muted);
  margin-bottom: 8px;
}
#globalDefaultModal .global-default-tree-course:last-child { margin-bottom: 0; }
#globalDefaultModal .global-default-tree-lesson {
  border-left: 3px solid var(--color-border);
  margin: 0 0 8px 4px;
  border-radius: 4px;
  background: var(--color-bg-card);
}
#globalDefaultModal .global-default-tree-lesson:last-child { margin-bottom: 0; }
#globalDefaultModal .global-default-tree-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--color-bg-subtle);
}
#globalDefaultModal .global-default-tree-summary::-webkit-details-marker { display: none; }
#globalDefaultModal .global-default-tree-summary--program {
  font-size: 15px;
}
#globalDefaultModal .global-default-tree-summary--course {
  background: var(--color-bg-muted);
  font-weight: 600;
}
#globalDefaultModal .global-default-tree-summary--lesson {
  background: transparent;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 8px 10px;
}
#globalDefaultModal details[open] > .global-default-tree-summary--program {
  border-bottom: 1px solid var(--color-border);
}
#globalDefaultModal details[open] > .global-default-tree-summary--course {
  border-bottom: 1px solid var(--color-border);
}
#globalDefaultModal .global-default-tree-caret {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 6px solid var(--color-text-muted);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transform-origin: 35% 50%;
  transition: transform 0.15s ease;
  opacity: 0.75;
}
#globalDefaultModal details[open] > .global-default-tree-summary > .global-default-tree-caret {
  transform: rotate(90deg);
}
#globalDefaultModal .global-default-tree-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#globalDefaultModal .global-default-tree-body--lesson {
  padding: 4px 8px 10px 12px;
  gap: 10px;
}

/* 전역 기본 액티비티(레거시 블록 마크업 호환) — 세로 스택 */
.global-default-course-block {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-muted);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.global-default-course-block > .global-default-course-heading {
  font-weight: 600;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.global-default-lesson-block {
  padding-left: 10px;
  margin-left: 4px;
  border-left: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.global-default-lesson-heading {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.global-default-activity-row {
  padding-left: 4px;
  min-width: 0;
}
.global-default-activity-row .portal-cb-toggle {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.global-default-activity-row .portal-cb-toggle > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

/* 전역 디폴트 프로그램 모달: 선택 상태가 명확히 보이도록 (inline display:block 제거 후 flex 토글 복구) */
.default-program-assign-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: 2px 0;
}
#defaultProgramModal label.default-program-assign-row.portal-cb-toggle {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  gap: 10px;
}
#defaultProgramModal label.default-program-assign-row.portal-cb-toggle > .default-program-assign-row__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}
#defaultProgramModal label.default-program-assign-row.portal-cb-toggle > .default-program-assign-row__no {
  flex-shrink: 0;
}
#defaultProgramModal label.portal-cb-toggle.default-program-assign-row:has(input:checked) {
  background-color: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.4);
  border-left: 4px solid var(--color-primary, #2563eb);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}
#defaultProgramModal label.portal-cb-toggle.default-program-assign-row:has(input:checked) .default-program-assign-row__title {
  font-weight: 700;
  color: var(--color-text);
}
#defaultProgramModal label.portal-cb-toggle.default-program-assign-row:has(input:checked)::before {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
html[data-theme="dark"] #defaultProgramModal label.portal-cb-toggle.default-program-assign-row:has(input:checked) {
  background-color: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.55);
  border-left-color: var(--color-primary-light, #93c5fd);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2);
}

.member-bulk-course-list { margin-top: 12px; max-height: 420px; overflow-y: auto; }

/* classList: 클래스 강좌 힌트/제목 */
.class-course-hint { margin: 0 0 4px 0; font-size: 13px; }
.class-course-heading { margin: 0 0 8px 0; font-size: 14px; font-weight: 600; }

/* =====================================================
   템플릿 JSON 편집 툴바
   ===================================================== */
.template-json-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.template-json-status { font-size: 12px; color: var(--color-text-muted); }
.template-json-accordion-body { padding-top: 12px; }
.template-json-textarea {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
}
.resource-add-box { margin-top: 12px; }

/* 강좌 구조 편집 - 강좌 드래그 핸들 */
.course-drag-handle {
  cursor: grab;
  display: inline-flex;
  align-items: center;
  padding: 0 6px 0 2px;
  color: #9ca3af;
  font-size: 14px;
  flex-shrink: 0;
}
.course-drag-handle:hover { color: #6b7280; }
.course-drag-ghost { opacity: 0.4; background: #e0e7ff; border-radius: 6px; }

/* 프로그램 목록 - 전역 표시 순서 모달 */
.program-reorder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(78vh, 720px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.program-reorder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: var(--color-card, #fff);
}
.program-reorder-handle {
  cursor: grab;
  color: #9ca3af;
  font-size: 16px;
  flex-shrink: 0;
  user-select: none;
}
.program-reorder-handle:hover { color: #6b7280; }
.program-reorder-title { flex: 1; min-width: 0; font-weight: 500; }
.program-reorder-no { flex-shrink: 0; }
body.theme-dark .program-reorder-item,
[data-theme='dark'] .program-reorder-item {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

/* =====================================================
   JS 제어 초기 숨김 요소 (inline style="display:none" → CSS)
   ===================================================== */
#detailContent,
#lessonForm,
#activityForm,
#templateLockHint,
#accordionCommon,
#questionPlaceholderEmpty,
#questionList,
#lessonEditorStickySave,
#lessonConnectSection,
#linkedLessonInfo,
#templateEditForm,
#templateJsonBody,
#resourceAddBox,
#tabQuestion,
#questionResourceAddBox,
#templateNewForm,
#tabMember,
#btnBulkChange,
#btnBulkAssign,
#rowPw,
#usageEmpty,
#memberOrgAssignBlock,
.resource-card-edit { display: none; }

/* =====================================================
   학습 인증서 미리보기 (A4 세로 210×297mm 비율)
   ===================================================== */
.modal-box--cert-preview {
  max-width: 560px;
  width: min(92vw, 560px);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
}
.modal-box--cert-preview .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
}
.certificate-preview-modal__body {
  padding: 0.75rem 1rem 1.25rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.certificate-preview-modal__footer {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.certificate-preview-modal__footer .is-disabled {
  display: none;
}
/* A4 비율: 210 / 297 */
.kch-cert-preview {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.kch-cert-preview__frame {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 210 / 297;
  min-height: 520px;
  max-height: min(78vh, 680px);
  border: 3px solid var(--color-primary, #2563eb);
  border-radius: 4px;
  padding: 7% 9% 6%;
  background: #fff;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0%, #fff 18%, #fff 82%, rgba(37, 99, 235, 0.04) 100%);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
html[data-theme="dark"] .kch-cert-preview__frame {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.1) 0%, #1e293b 18%, #1e293b 82%, rgba(96, 165, 250, 0.08) 100%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.kch-cert-preview__top {
  flex: 0 0 auto;
}
.kch-cert-preview__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4% 0;
  min-height: 0;
}
.kch-cert-preview__bottom {
  flex: 0 0 auto;
  width: 100%;
  padding-top: 4%;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}
.kch-cert-preview__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.kch-cert-preview__logo {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: contain;
}
.kch-cert-preview__brand {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary, #2563eb);
}
.kch-cert-preview__lead {
  font-size: 0.95rem;
  color: var(--text-muted, #64748b);
  margin: 0;
  line-height: 1.5;
}
.kch-cert-preview__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.5rem;
}
.kch-cert-preview__name {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  line-height: 1.3;
  color: var(--text-primary, #0f172a);
}
html[data-theme="dark"] .kch-cert-preview__name {
  color: var(--text-primary, #f1f5f9);
}
.kch-cert-preview__badge-row {
  margin-bottom: 1.5rem;
}
.kch-cert-preview__badge {
  display: inline-block;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  background: var(--color-primary, #2563eb);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}
.kch-cert-preview__badge-en {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.9rem;
  color: var(--text-muted, #64748b);
}
.kch-cert-preview__stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  padding: 1.25rem 0 0;
}
.kch-cert-preview__stat-val {
  display: block;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
}
.kch-cert-preview__stat-lbl {
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  margin-top: 0.2rem;
}
.kch-cert-preview__meta {
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-muted, #64748b);
}
.kch-cert-preview__meta-lbl {
  font-weight: 600;
  margin-right: 0.25rem;
}
.kch-cert-preview__meta-val {
  color: var(--text-primary, #334155);
  word-break: break-all;
}
html[data-theme="dark"] .kch-cert-preview__meta-val {
  color: #cbd5e1;
}
.kch-cert-preview__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(220, 38, 38, 0.22);
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 2;
}
.kch-cert-preview--revoked .kch-cert-preview__frame {
  border-color: rgba(220, 38, 38, 0.45);
  opacity: 0.92;
}

/* A4 인쇄 */
@page {
  size: A4 portrait;
  margin: 12mm;
}
body.certificate-print-body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
body.certificate-print-body .kch-cert-preview {
  width: 186mm;
  max-width: 186mm;
  margin: 0;
  page-break-inside: avoid;
}
body.certificate-print-body .kch-cert-preview__frame {
  aspect-ratio: auto;
  width: 186mm;
  min-height: 273mm;
  max-height: none;
  height: 273mm;
  border-radius: 0;
  box-shadow: none;
  padding: 14mm 16mm 12mm;
}
body.certificate-print-body .kch-cert-preview__name {
  font-size: 22pt;
}
body.certificate-print-body .kch-cert-preview__brand {
  font-size: 14pt;
}
body.certificate-print-body .kch-cert-preview__stat-val {
  font-size: 18pt;
}

/* 회원 학습 현황 */
.mls-guide {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem;
}
.mls-guide__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.mls-guide__title::-webkit-details-marker { display: none; }
.mls-guide__title::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.85em;
  color: var(--color-text-muted, #64748b);
  transition: transform 0.15s;
}
.mls-guide[open] .mls-guide__title::before { transform: rotate(90deg); }
.mls-guide[open] .mls-guide__title { margin-bottom: 0.65rem; }
.mls-guide .mls-guide__text { margin-top: 0.5rem; }
.mls-guide__text {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary, #475569);
}
.mls-guide__text--flow {
  padding: 0.65rem 0.75rem;
  background: var(--color-surface-muted, #f8fafc);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary, #2563eb);
}
.mls-guide__text--score {
  margin-bottom: 0;
  padding: 0.65rem 0.75rem;
  background: #eff6ff;
  border-radius: 8px;
  border-left: 3px solid #3b82f6;
  color: #1e40af;
}
html[data-theme="dark"] .mls-guide__text--score {
  background: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
}
.mls-kpi-row--score .mls-kpi-card {
  border-color: rgba(59, 130, 246, 0.12);
}
.mls-kpi-row--record .mls-kpi-card {
  border-color: rgba(220, 38, 38, 0.1);
}
.mls-kpi-hint {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}
.mls-kpi-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
}
.mls-kpi-row {
  margin-bottom: 1.25rem;
}
.mls-kpi-row--today .mls-kpi-card {
  border-color: rgba(37, 99, 235, 0.15);
}
.mls-kpi-card {
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mls-kpi-card:hover,
.mls-kpi-card:focus-visible {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
  outline: none;
}
.mls-kpi-card__desc {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-muted, #64748b);
  font-weight: 400;
}
.mls-tab-guide {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
}
.mls-tab-guide__list {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .mls-tab-guide__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
.mls-tab-guide__item {
  margin: 0;
}
.mls-tab-guide__item dt {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
  text-transform: none;
}
.mls-tab-guide__item dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #475569);
}
.mls-tabs {
  margin-bottom: 0.75rem;
}

/* 대시보드 KPI */
.mls-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.mls-dash-panel {
  padding: 1rem 1.15rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
}
.mls-dash-panel__title {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-secondary, #475569);
  letter-spacing: -0.01em;
}
.mls-stat-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}
@media (max-width: 720px) {
  .mls-stat-bar { grid-template-columns: 1fr; }
}
.mls-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  background: var(--color-surface-muted, #f8fafc);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  text-align: left;
}
.mls-stat-item:hover,
.mls-stat-item:focus-visible {
  border-color: var(--color-primary, #2563eb);
  background: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
  outline: none;
}
.mls-stat-item__label {
  font-size: 0.78rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.35;
}
.mls-stat-item__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.mls-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.55rem;
}
@media (max-width: 1100px) {
  .mls-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .mls-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.mls-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  min-height: 4.25rem;
}
.mls-stat-tile:hover,
.mls-stat-tile:focus-visible {
  border-color: #94a3b8;
  background: var(--color-surface-muted, #f8fafc);
  outline: none;
}
.mls-stat-tile.mls-stat--active {
  border-color: rgba(245, 158, 11, 0.45);
  background: #fffbeb;
}
.mls-stat-tile.mls-stat--active .mls-stat-tile__value {
  color: #b45309;
}
.mls-stat-tile__label {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--color-text-muted, #64748b);
}
.mls-stat-tile__value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #0f172a);
}
.mls-monitor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .mls-monitor-grid { grid-template-columns: 1fr; }
}
.mls-monitor-block__title {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text-secondary, #475569);
}
.mls-monitor-block--score .mls-monitor-block__title { color: #1d4ed8; }
.mls-monitor-block--record .mls-monitor-block__title { color: #b91c1c; }
.mls-monitor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.mls-monitor-table thead th {
  padding: 0.4rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  text-align: left;
}
.mls-monitor-table .th-right { text-align: right; }
.mls-monitor-table .th-action { width: 1.5rem; }
.mls-monitor-row {
  cursor: pointer;
  transition: background 0.12s;
}
.mls-monitor-row:hover,
.mls-monitor-row:focus-visible {
  background: var(--color-surface-muted, #f8fafc);
  outline: none;
}
.mls-monitor-row td {
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid var(--color-border-subtle, #f1f5f9);
  vertical-align: middle;
}
.mls-monitor-row__label {
  color: var(--color-text, #0f172a);
  line-height: 1.4;
}
.mls-monitor-row__count {
  text-align: right;
  white-space: nowrap;
}
.mls-monitor-row__go {
  width: 1.25rem;
  text-align: center;
  color: var(--color-text-muted, #94a3b8);
  font-size: 1rem;
}
.mls-count-badge {
  display: inline-block;
  min-width: 2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: #f1f5f9;
  color: #64748b;
}
.mls-count-badge--zero {
  background: #f8fafc;
  color: #94a3b8;
  font-weight: 600;
}
.mls-count-badge--alert {
  background: #fef2f2;
  color: #b91c1c;
}
.mls-count-badge--muted.mls-count-badge--alert,
.mls-count-badge--muted {
  background: #eff6ff;
  color: #1d4ed8;
}
.mls-member-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  max-width: 100%;
}
.mls-member-link__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary, #2563eb);
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.12s;
}
.mls-member-link:hover .mls-member-link__name,
.mls-member-link:focus-visible .mls-member-link__name {
  color: #1d4ed8;
  text-decoration: underline;
  outline: none;
}
.mls-member-link__meta {
  font-size: 0.74rem;
  color: var(--color-text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.mls-action-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: var(--color-surface-muted, #f1f5f9);
  color: var(--color-text-secondary, #475569);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.mls-action-chip:hover,
.mls-action-chip:focus-visible {
  background: #e0e7ff;
  color: #1d4ed8;
  outline: none;
}
html[data-theme="dark"] .mls-dash-panel {
  background: var(--color-surface);
  border-color: var(--color-border);
}
html[data-theme="dark"] .mls-stat-item {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .mls-stat-tile.mls-stat--active {
  background: rgba(245, 158, 11, 0.08);
}
html[data-theme="dark"] .mls-count-badge--alert {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
html[data-theme="dark"] .mls-action-chip {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .mls-action-chip:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}