/* ==========================================================================
   ADMIN CONSOLE — 공통 컴포넌트 (admin-components.css)
   화면 안 하위 탭, 패널·KPI·폼·스위치·회원 서랍·슬라이더·와플, 해석 관리 전체 항목 지도(끝부분)
   admin.css 스택의 일부 — 로드 순서는 admin.css 머리 주석 참조. 규칙 순서를 바꾸지 않는다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   View-local sub navigation
   -------------------------------------------------------------------------- */
.admin-subtabs {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  background: var(--bg-nav-pill);
  border: 1px solid var(--border-box-purple);
  border-radius: var(--radius-pill);
  box-shadow: var(--glow-purple);
  scrollbar-width: thin;
}
.admin-subtab {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: 700 11pt/1.2 var(--font-main);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.admin-subtab:hover {
  background: var(--bg-card-inner);
  color: var(--text-pure);
}
.admin-subtab[aria-selected="true"],
.admin-subtab[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: var(--text-on-neon);
  box-shadow: var(--glow-pink);
}
.admin-subtab-panels { min-width: 0; }
.admin-subtab-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: adminSubtabIn 0.2s ease-out;
}
@keyframes adminSubtabIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel {
  background: rgba(16, 7, 43, 0.8);
  border: 1px solid var(--border-box-purple);
  border-radius: 12px;
  padding: 22px;
  backdrop-filter: blur(10px);
  min-width: 0;
}
.panel-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(131, 56, 236, 0.25);
  gap: 10px;
}
.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-pure);
  display: flex;
  align-items: center;
  gap: 9px;
}
.panel-title .ic {
  width: 24px;
  height: 24px;
  object-fit: contain;
  object-position: center;
  overflow: visible;
  filter: none;
}

.kpi-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.kpi-item {
  background: rgba(16, 7, 43, 0.8);
  border: 1px solid var(--border-box-purple);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kpi-item .k-label { font-size: 11pt; color: var(--text-muted); font-weight: 600; }
.kpi-item .k-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-pure);
  margin-top: 2px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.table-container { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11pt; }
.admin-table th {
  padding: 12px 14px;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom: 1.5px solid var(--border-box-purple);
  font-size: 11pt;
  background: rgba(0, 0, 0, 0.3);
}
.admin-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(131, 56, 236, 0.18);
  color: var(--text-sub);
}
.admin-table tr:hover td { background: rgba(255, 255, 255, 0.035); color: var(--text-pure); }

.tag-status {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11pt;
  font-weight: 700;
}
.tag-success { background: rgba(0, 255, 163, 0.18); color: var(--neon-lime); }
.tag-purple { background: rgba(131, 56, 236, 0.25); color: #c499ff; }
.tag-warn { background: rgba(255, 230, 0, 0.18); color: var(--neon-yellow); }

.form-input, .form-select {
  background: var(--bg-card-inner);
  border: 1px solid var(--border-box-purple);
  color: var(--text-pure);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11pt;
  font-family: inherit;
  outline: none;
}
.form-input:focus, .form-select:focus { border-color: var(--neon-pink); }

.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.slider-item { display: flex; flex-direction: column; gap: 4px; }
.slider-header { display: flex; justify-content: space-between; font-size: 11pt; }
.slider-header .badge-val {
  font-weight: 800;
  color: var(--neon-pink);
  font-size: 11pt;
  font-family: var(--font-display);
}
input[type=range] {
  accent-color: var(--neon-pink);
  cursor: pointer;
  height: 6px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-card-inner);
  border: 1px solid rgba(131, 56, 236, 0.3);
  border-radius: 8px;
  font-size: 11pt;
  gap: 12px;
}
.switch-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 11pt;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.user-drawer {
  position: fixed;
  top: 0;
  right: -520px;
  width: 500px;
  height: 100vh;
  background: var(--bg-box);
  border-left: 1.5px solid var(--border-box-purple);
  box-shadow: -12px 0 36px var(--shadow-deep);
  z-index: 100;
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 28px;
}
.user-drawer.open { right: 0; }

.pillar-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
  margin: 12px 0 8px;
}
.pillar-mini-card {
  background: var(--bg-card-inner);
  border: 1px solid var(--border-box-purple);
  border-radius: 8px;
  padding: 10px 6px;
}
.pm-title { font-size: 11pt; color: var(--text-muted); font-weight: 600; }
.pm-ganji { font-size: 18px; font-weight: 800; color: var(--neon-cyan); margin: 3px 0; }
.pm-jijang { font-size: 11pt; color: #a5b4fc; }
.pm-ten { font-size: 11pt; color: #ff77ea; font-weight: 600; }

.chart-container { width: 100%; height: 280px; }

/* 해석 관리 — 전체 항목 지도(블록별 상세 목록) */
.s1-map-panel { overflow: hidden; }
.s1-map-detail-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--text-pure);
  font-size: 11pt;
}
.s1-map-detail-heading span { color: var(--text-muted); font-size: 11pt; }

.waffle-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.15s, background 0.15s;
}
.waffle-cell:hover { transform: scale(1.25); }
.waffle-cell.active {
  background: var(--neon-purple);
  box-shadow: 0 0 6px rgba(131, 56, 236, 0.6);
}
.waffle-cell.highlight {
  background: var(--neon-pink);
  box-shadow: 0 0 6px rgba(203, 35, 162, 0.5);
}

.btn-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(131, 56, 236, 0.2);
  border: 1px solid var(--border-box-purple);
  color: var(--text-pure);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-sidebar-toggle:hover { background: rgba(131, 56, 236, 0.4); }
.btn-sidebar-close {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 2, 32, 0.8);
  backdrop-filter: blur(6px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sidebar-backdrop.active { opacity: 1; pointer-events: auto; }

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.engine-probe-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* ③ 문장: 개념 분류 → 폴더 → 항목, 선택한 문장은 오른쪽에 유지한다. */
.frag-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.frag-controls .mc-shelf-view[aria-pressed="true"] { border-color: var(--neon-cyan); color: var(--text-pure); background: color-mix(in srgb, var(--neon-cyan) 12%, var(--bg-box)); }
.frag-advanced { margin: 12px 0; }
.frag-advanced > summary { cursor: pointer; color: var(--text-sub); margin-bottom: 10px; }
.frag-search { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; color: var(--text-sub); }
.frag-search input { flex: 1; min-width: 0; }
.frag-workspace { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.frag-folder-tree { min-width: 0; max-height: 72vh; overflow: auto; border: 1px solid var(--border-box-purple); border-radius: 12px; padding: 10px; }
.frag-bucket { margin-bottom: 12px; }
.frag-bucket > .mc-group-head { margin: 0 0 6px; }
.frag-folder { margin: 3px 0 5px; }
.frag-folder > summary { display: grid; grid-template-columns: 12px minmax(0, 184px) auto; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--text-sub); padding: 6px 0; overflow-wrap: anywhere; }
.frag-folder > summary::marker { content: ''; }
.frag-folder > summary::-webkit-details-marker { display: none; }
/* 고정 칸 폭과 한 줄 배치로 펼침 표시가 아래로 밀리지 않게 한다. 전체 이름은 title로 보존한다. */
.frag-folder > summary .frag-folder-label { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.frag-folder > summary .frag-folder-toggle { white-space: nowrap; margin: 0; cursor: pointer; }
.frag-folder-axes { margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px dashed var(--border-box-purple); }
.frag-sub { margin: 2px 0; }
.frag-sub > summary { display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--text-sub); padding: 4px 0; }
.frag-sub > summary::marker { content: ''; }
.frag-sub > summary::-webkit-details-marker { display: none; }
.frag-sub-toggle { white-space: nowrap; margin-left: auto; }
.frag-axis { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; width: 100%; text-align: left; padding: 9px 10px; margin: 4px 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-sub); font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.frag-axis.mb-sub-node { align-items: center; gap: 4px 6px; }
.frag-layer-mark { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0 4px; border: 1px solid var(--border-box-purple); border-radius: var(--radius-pill); background: var(--bg-card-inner); color: var(--text-muted); font-size: 8pt; font-weight: 750; line-height: 1.45; }
.frag-axis:hover, .frag-axis[aria-current="true"] { border-color: var(--neon-cyan); background: color-mix(in srgb, var(--neon-cyan) 10%, var(--bg-box)); color: var(--text-pure); }
.frag-detail { min-width: 0; overflow-wrap: anywhere; }
.frag-detail .panel-title { white-space: normal; }

.frag-detail .frag-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .frag-workspace { grid-template-columns: minmax(0, 1fr); }
  .frag-folder-tree { max-height: 38vh; }
}

/* 문항 보기: 폴더 영역은 DOM과 선택을 보존한 채 숨기고, 문항 배치는 CSS만 바꾼다. */
.frag-view-toolbar, .frag-view-modes { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.frag-view-toolbar { justify-content: space-between; margin: 12px 0; }
.frag-view-modes .mc-shelf-view[aria-pressed="true"] { border-color: var(--neon-cyan); color: var(--text-pure); background: color-mix(in srgb, var(--neon-cyan) 12%, var(--bg-box)); }
.frag-workspace.is-folders-hidden { grid-template-columns: minmax(0, 1fr); }
.frag-workspace.is-folders-hidden .frag-folder-tree { display: none; }
#frag-groups[data-layout="grid"] .s1-concept-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
#frag-groups[data-layout="single"] .s1-concept-list, #frag-groups[data-layout="list"] .s1-concept-list { grid-template-columns: minmax(0, 1fr); }
#frag-groups[data-layout="list"] .s1-concept-list { gap: 0; }
#frag-groups[data-layout="list"] .frag-row { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 44px; padding: 8px; border: 0; border-bottom: 1px solid var(--border-box-purple); border-radius: 0; background: transparent; }
#frag-groups[data-layout="list"] .frag-row:last-child { border-bottom: 0; }
#frag-groups[data-layout="list"] .s1-concept-marker { width: 24px; height: 24px; }
#frag-groups[data-layout="list"] .frag-row-content { display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
#frag-groups[data-layout="list"] .frag-row-head { min-width: 0; }
#frag-groups[data-layout="list"] .s1-concept-label, #frag-groups[data-layout="list"] .frag-row-body { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#frag-groups[data-layout="list"] .frag-row-content > .frag-evidence-note, #frag-groups[data-layout="list"] .frag-badge-row > :not(.tag-status) { display: none; }
#frag-groups[data-layout="list"] .frag-badge-row { min-width: 0; margin: 0; white-space: nowrap; }
@media (max-width: 600px) {
  #frag-groups[data-layout="list"] .frag-row-content { grid-template-columns: minmax(60px, .4fr) minmax(0, 1fr); gap: 6px; }
  #frag-groups[data-layout="list"] .frag-badge-row { display: none; }
}