/* ==========================================================================
   ADMIN CONSOLE — 고객 표시·키워드 지도 (admin-customer-view.css)
   상품별 고객 표시, 해석 키워드 지도(.km-*), 고객 표시 최종 화면(.rd-*), 시즌1 상태 뱃지(.s1-*)
   admin.css 스택의 일부 — 로드 순서는 admin.css 머리 주석 참조. 규칙 순서를 바꾸지 않는다.
   ========================================================================== */

/* 상품별 고객 표시 — 네 상품 카드를 나란히 본다 */
.rt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rt-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-box-purple); border-radius: 12px; background: var(--bg-card-inner); min-width: 0; }
.rt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11pt; color: var(--text-pure); }
.rt-card label { display: flex; flex-direction: column; gap: 4px; font-size: 11pt; color: var(--text-sub); }
.rt-card textarea { resize: vertical; field-sizing: content; min-height: 4.8em; max-height: 14em; } /* 글 길이만큼 자라서 잘리지 않게 */
.rt-count { align-self: flex-end; font-size: 10pt; color: var(--text-muted); }
.rt-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.rt-dirty { margin-right: auto; font-size: 10pt; color: var(--neon-yellow); }
.rt-card.is-dirty { border-color: var(--neon-yellow); }
.rt-card .is-changed { border-color: var(--neon-yellow); }

/* ③ 해석 관리 › 🗺 해석 키워드 지도 (admin-keyword-map.js) — 분류 트리맵 + 선택 상세 + 카테고리 카드 */
.km-panel { margin-bottom: 16px; }
.km-panel .panel-header { flex-wrap: wrap; gap: 8px; }
.km-scope { margin-left: auto; }
.km-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.km-stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border: 1px solid var(--border-box-purple); border-radius: 999px; background: var(--bg-card-inner); color: var(--text-sub); font-size: 10pt; }
.km-stat b { color: var(--text-pure); font-size: 12pt; }
.km-views { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tree" "detail"; gap: 12px; align-items: start; }
.km-view { min-width: 0; padding: 10px; border: 1px solid var(--border-box-purple); border-radius: 14px; background: color-mix(in srgb, var(--bg-card-inner) 80%, transparent); }
.km-view-tree { grid-area: tree; }
.km-view-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 6px; font-size: 11pt; color: var(--text-pure); }
.km-view-head span { color: var(--text-muted); font-size: 9.5pt; }
.km-canvas { position: relative; height: 340px; }
.km-view-tree .km-canvas { height: 560px; }
.km-detail { grid-area: detail; position: static; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-box-purple); border-radius: 14px; background: var(--bg-card-inner); min-height: 0; }
.km-detail-empty { margin: auto 0; color: var(--text-muted); font-size: 10.5pt; line-height: 1.7; text-align: center; }
.km-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-left: 10px; border-left: 4px solid var(--km-color); }
.km-detail-cat { flex-basis: 100%; color: var(--text-muted); font-size: 10pt; }
.km-detail-word { color: var(--text-pure); font-size: 17pt; }
.km-detail-count { color: var(--text-sub); font-size: 10.5pt; }
.km-detail-sub { margin: 4px 0 0; color: var(--text-sub); font-size: 10pt; }
.km-detail-note { margin: 2px 0 0; color: var(--text-muted); font-size: 9.5pt; line-height: 1.5; }
.km-go { width: 100%; }
.km-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.km-chip { display: inline-flex; align-items: baseline; gap: 4px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--border-box-purple); border-radius: 999px; background: var(--bg-card); color: var(--text-sub); font-size: 10pt; cursor: pointer; }
.km-chip b { color: var(--text-muted); font-size: 9pt; font-weight: 700; }
.km-chip:hover, .km-chip:focus-visible { border-color: var(--km-color, var(--neon-cyan)); color: var(--text-pure); outline: none; }
.km-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; }
.km-cat { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-box-purple); border-top: 3px solid var(--km-color); border-radius: 12px; background: var(--bg-card-inner); }
.km-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px; font-size: 11pt; color: var(--text-pure); }
.km-cat-head span { color: var(--text-muted); font-size: 9.5pt; }
.km-cat .km-chip-kw { border-color: color-mix(in srgb, var(--km-color) 45%, var(--border-box-purple)); }
.km-cat-axes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 9.5pt; color: var(--text-muted); }
.km-cat-axes > span { font-weight: 700; }
.km-link { padding: 0; border: 0; background: none; color: var(--text-sub); font: inherit; text-decoration: underline dotted; cursor: pointer; }
.km-link:hover, .km-link:focus-visible { color: var(--neon-cyan); outline: none; }
.km-none { color: var(--text-muted); font-size: 10pt; }
.km-uncovered { margin-top: 12px; }
.s1-map-panel > summary { font-size: 11pt; font-weight: 700; }
/* 문장 탭 책갈피 — 키워드 지도에서 넘어온 필터 */
.frag-keyword-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--neon-cyan) 50%, var(--border-box-purple)); border-radius: 10px; background: color-mix(in srgb, var(--neon-cyan) 8%, var(--bg-card-inner)); color: var(--text-pure); font-size: 10.5pt; font-weight: 700; }
.frag-keyword-bar > span { margin-right: auto; }
.frag-mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--neon-yellow) 38%, transparent); color: inherit; }
@media (max-width: 1280px) {
  .km-views { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tree" "detail"; }
  .km-detail { position: static; min-height: 0; }
}
@media (max-width: 760px) {
  .km-views { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tree" "detail"; }
  .km-view-tree .km-canvas { height: 460px; }
  .km-scope { margin-left: 0; width: 100%; }
}

/* 📡 고객 표시 › 👁 최종 고객 화면 · 📡 고객 전달 상태 (admin-report-display.js) */
.rd-panel { margin-bottom: 16px; }
.rd-panel .panel-header { flex-wrap: wrap; gap: 8px; }
.rd-live { margin-left: auto; font-size: 10pt; }
.rd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.rd-products { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.rd-product, .rd-seg-btn { min-height: 32px; padding: 4px 12px; border: 1px solid var(--border-box-purple); border-radius: var(--radius-pill, 999px); background: var(--bg-card-inner); color: var(--text-sub); font-size: 10.5pt; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rd-product:hover, .rd-seg-btn:hover { border-color: var(--neon-cyan); color: var(--text-pure); }
.rd-product.is-active { border-color: var(--neon-cyan); background: color-mix(in srgb, var(--neon-cyan) 16%, var(--bg-card-inner)); color: var(--text-pure); }
.rd-seg { display: inline-flex; padding: 2px; border: 1px solid var(--border-box-purple); border-radius: var(--radius-pill, 999px); background: var(--bg-card-inner); }
.rd-seg .rd-seg-btn { border-color: transparent; background: transparent; }
.rd-seg .rd-seg-btn.is-active { background: color-mix(in srgb, var(--neon-pink) 22%, transparent); color: var(--text-pure); }
.rd-stage { display: flex; justify-content: center; padding: 14px; border: 1px solid var(--border-box-purple); border-radius: 14px; background: color-mix(in srgb, var(--bg-card-inner) 70%, transparent); }
.rd-frame { display: block; width: 100%; height: 860px; border: 0; border-radius: 10px; background: var(--bg-card); }
.rd-stage[data-device="mobile"] .rd-frame { width: 390px; max-width: 100%; height: 780px; border: 6px solid color-mix(in srgb, var(--text-muted) 40%, transparent); border-radius: 30px; }
.rd-delivery-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rd-kpis { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rd-kpi { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border: 1px solid var(--border-box-purple); border-radius: 999px; background: var(--bg-card-inner); color: var(--text-sub); font-size: 10pt; white-space: nowrap; }
.rd-kpi b { color: var(--text-pure); font-size: 12pt; }
.rd-kpi.is-ok b { color: var(--neon-lime); }
.rd-kpi.is-warn b { color: var(--neon-yellow); }
.rd-kpi.is-bad { border-color: var(--neon-pink); }
.rd-kpi.is-bad b { color: var(--neon-pink); }
.rd-table { overflow-x: auto; }
.rd-table .admin-table { width: 100%; font-size: 10.5pt; }
.rd-table th, .rd-table td { white-space: nowrap; }
.rd-num { text-align: right; font-variant-numeric: tabular-nums; }
.rd-num.is-warn, .rd-table .is-warn { color: var(--neon-yellow); font-weight: 700; }
.rd-num.is-bad, .rd-table .is-bad { color: var(--neon-pink); font-weight: 700; }
.rd-when { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rd-table .is-zero { color: var(--text-muted); opacity: .55; }
.rd-pick { padding: 0; border: 0; background: none; color: var(--text-pure); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.rd-pick:hover, .rd-pick:focus-visible { color: var(--neon-cyan); text-decoration: underline; outline: none; }
.rd-failures { margin-top: 10px; }
.rd-failure-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 10.5pt; color: var(--text-sub); }
.rd-failure-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .rd-products { margin-right: 0; }
  .rd-stage { padding: 6px; }
  .rd-stage[data-device="mobile"] .rd-frame { border-width: 3px; border-radius: 18px; }
  .rd-live, .rd-delivery-tools { margin-left: 0; }
}
/* 블록 미리보기 모달 — 블록 모양은 report-blocks.css가 정한다 */
.admin-dialog:has(.rb-preview) { max-width: min(960px, 100%); }
.rb-preview { max-height: 62vh; overflow-y: auto; }
.rb-preview-note { margin: 0 0 10px; font-size: 11pt; color: var(--text-sub); }
.rb-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
/* 👁 보기 — 누르기 쉬운 배지 버튼(최소 28px 높이) */
.rl-eye { flex-shrink: 0; margin-left: 6px; min-height: 28px; padding: 2px 10px; border: 1px solid var(--neon-cyan); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--neon-cyan) 12%, transparent); color: var(--text-pure); font-size: 10.5pt; font-weight: 700; line-height: 1.4; cursor: pointer; white-space: nowrap; }
.rl-eye:hover, .rl-eye:focus-visible { background: color-mix(in srgb, var(--neon-cyan) 26%, transparent); outline: none; }
.s1-type { font-size: 11pt; }
/* 페이지 배치 2열 — 왼쪽 블록 선반(명리구조도 선반과 같은 규칙: 화면 높이에 고정·안에서 스크롤), 오른쪽 캔버스 */
.rl-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.rl-shelf { position: sticky; top: 12px; align-self: start; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border-box-purple); border-radius: 12px; background: var(--bg-card-inner); max-height: calc((100vh - 140px) / var(--admin-zoom, 1)); overflow-y: auto; overscroll-behavior: contain; }
.rl-shelf-head { display: flex; align-items: center; gap: 6px; font-size: 11pt; color: var(--text-pure); }
.rl-search { width: 100%; }
.rl-shelf-note { margin: 0; font-size: 10pt; color: var(--text-muted); }
.rl-section { border-top: 1px dashed var(--border-soft); padding-top: 6px; }
.rl-section > summary { cursor: pointer; font-size: 11pt; font-weight: 700; color: var(--text-sub); list-style: none; }
.rl-section > summary::-webkit-details-marker { display: none; }
.rl-section > summary::before { content: '▸ '; }
.rl-section[open] > summary::before { content: '▾ '; }
.rl-section-body { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rl-section-note { margin: 0; font-size: 10pt; color: var(--text-muted); }

@media (max-width: 900px) { .rl-layout { grid-template-columns: minmax(0, 1fr); } .rl-shelf { position: static; max-height: none; } }
.rlm-panel-empty { font-size: 11pt; color: var(--text-muted); text-align: center; padding: 18px 0; }

#adminLoginSubmit:disabled { opacity: 0.6; cursor: wait; }

/* ── 시즌1 상태 뱃지 ────────────────────────────────────────────────
   관리자가 화면에서 상태를 한눈에 구분하도록 색·아이콘을 함께 쓴다.
   내부 코드(axis_id·stage_key·게이트 이름)는 화면에 쓰지 않는다 —
   운영 담당자가 아는 말이 아니다. */
.s1-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11pt;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.s1-ok    { background: rgba(0, 229, 255, .14); color: #6fe6dc; border-color: rgba(0, 229, 255, .35); }
.s1-hold  { background: rgba(255, 204, 102, .14); color: #ffcc66; border-color: rgba(255, 204, 102, .35); }
.s1-off   { background: rgba(255, 122, 184, .13); color: #ff9ec8; border-color: rgba(255, 122, 184, .32); }
.s1-info  { background: rgba(255, 255, 255, .07); color: #c9b8e4; border-color: rgba(255, 255, 255, .16); }
.s1-todo  { background: rgba(178, 122, 255, .16); color: #cbaaff; border-color: rgba(178, 122, 255, .38); }
.s1-free  { background: rgba(140, 255, 180, .13); color: #8cffb4; border-color: rgba(140, 255, 180, .32); }
.s1-paid  { background: rgba(200, 160, 255, .14); color: #cbb0ff; border-color: rgba(200, 160, 255, .34); }

.s1-group { border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 12px; margin-bottom: 10px; transition: border-color .15s ease; }
.s1-group.is-primary { border-left: 3px solid var(--neon-cyan, #00e5ff); }
.s1-group.is-secondary { border-left: 3px solid rgba(255, 255, 255, .2); }
.s1-group-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.s1-group-order { display:inline-flex; gap:4px; }
.s1-group-head .s1-group-delete { margin-left: auto; }
.s1-group-axes { margin-top:8px; min-height:40px; padding:6px; border:1px dashed rgba(255,255,255,.12); border-radius:8px; transition: border-color .15s ease, background .15s ease; }
.s1-group.is-dragover .s1-group-axes { border-style: solid; border-color: var(--neon-cyan); background: rgba(0, 229, 255, .06); }
.s1-folder-run { max-width:100%; min-width:0; }
/* 묶음 안 폴더 구간끼리 가로 점선으로 나눠 위아래 주제를 구분한다. */
.s1-group-axes .s1-folder-run + .s1-folder-run { margin-top:6px; padding-top:8px; border-top:1px dashed var(--border-box-purple, rgba(255,255,255,.18)); }
.s1-group-axes .s1-folder-run > .mb-placed { box-sizing:border-box; max-width:100%; white-space:normal; overflow-wrap:anywhere; cursor:default; }
.s1-group-axes .s1-folder-run .mb-picks { box-sizing:border-box; min-width:0; max-width:100%; margin:2px 0 8px 14px; }
.s1-group-axes .s1-folder-run .s1-chip.mb-pick { box-sizing:border-box; min-width:0; max-width:100%; margin:0; white-space:normal; overflow-wrap:anywhere; cursor:grab; }
.s1-field-auto { width: auto; }
.s1-field-label { width: 200px; max-width: 100%; }
.s1-chip {
  display: inline-flex; align-items: center; gap: 4px; margin: 2px; padding: 3px 9px; border-radius: 10px;
  background: rgba(255, 255, 255, .06); font-size: 11pt; color: #d6c9ee; cursor: grab;
}
.s1-chip.is-waiting { opacity: .5; }
.s1-chip-remove {
  background: none; border: none; color: var(--text-sub); cursor: pointer; font-size: 11pt; line-height: 1; padding: 0 0 0 2px;
}
.s1-chip-remove:hover { color: var(--neon-hotpink); }
.s1-off-board { font-size: 10pt; opacity: 0.85; }
.s1-report-toolbar { display:flex; justify-content:flex-end; gap:8px; margin:0 0 0 auto; flex-wrap:wrap; align-items:center; }
.s1-groups-msg { font-size: 11pt; }
.s1-report-banner {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start;
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 204, 102, .28); background: rgba(255, 204, 102, .08);
  color: #e8d7b0; font-size: 14.7px; line-height: 1.55;
}
/* 목차 편집: 왼쪽 선반(넣을 항목)은 화면에 붙어 있고 오른쪽 묶음만 스크롤된다.
   세로로 긴 목록 끝까지 끌고 내려가지 않고 옆으로 끌어 놓는다. top은 sticky 상단바 높이만큼 비운다. */
.s1-compose { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.s1-compose-shelf {
  position: sticky; top: 100px; display: flex; flex-direction: column; gap: 10px; padding: 10px;
  min-width: 0; border: 1px solid var(--border-box-purple); border-radius: 12px; background: var(--bg-card-inner);
  max-height: calc((100vh - 120px) / var(--admin-zoom, 1)); overflow-y: auto; overscroll-behavior: contain;
}
.s1-compose-board { min-width: 0; }
.s1-compose-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11pt; color: var(--text-sub); }
.s1-compose-board > .s1-compose-head { margin-bottom: 10px; }
.s1-compose-board > .s1-compose-head strong { margin-right: auto; }
.s1-compose-palette { display: flex; flex-direction: column; gap: 12px; min-height: 60px; padding: 4px; border: 1px dashed transparent; border-radius: 8px; }
.s1-compose-palette.is-dragover { border-color: var(--neon-cyan); background: rgba(0, 229, 255, .06); }
.s1-shelf-section { display: flex; flex-direction: column; gap: 6px; }
.s1-shelf-section + .s1-shelf-section { padding-top: 10px; border-top: 1px solid var(--border-box-purple); }
.s1-shelf-title { display: flex; align-items: center; gap: 6px; font-size: 11pt; font-weight: 700; color: var(--text-sub); }
/* 접는 선반 제목은 누를 수 있다는 것이 보이게 — 손가락 커서와 올렸을 때 강조 */
summary.s1-shelf-title { margin: 0 -6px; padding: 4px 6px; border-radius: 8px; cursor: pointer; list-style: none; transition: background-color .15s ease, color .15s ease; }
summary.s1-shelf-title::-webkit-details-marker { display: none; }
summary.s1-shelf-title:hover { background: color-mix(in srgb, var(--neon-cyan) 12%, transparent); color: var(--text-pure); }
summary.s1-shelf-title:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 1px; }
.s1-shelf-note { margin: 0; font-size: 11pt; line-height: 1.45; color: #ffcc66; }
.s1-shelf-note.is-ok { color: #6fe6dc; }
.s1-shelf-chips { display: flex; flex-wrap: wrap; gap: 2px; }
.s1-shelf-tree { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; min-width: 0; }
.s1-shelf-tree > .mb-shelf-group { width: 100%; min-width: 0; }
.s1-compose-shelf .mb-node-head { flex-wrap: nowrap; min-width: 0; }
.s1-compose-shelf .s1-tree-folder { flex: 1 1 auto; max-width: calc(100% - 118px); min-width: 0; cursor: default; }
.s1-tree-folder-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.s1-compose-shelf .mb-node-subs { min-width: 0; margin-left: 12px; padding-left: 6px; }
.s1-shelf-tree .s1-shelf-chips { min-width: 0; }
.s1-shelf-tree .s1-chip { max-width: 100%; min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
.s1-palette-folder-toggle:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 1px; }
.s1-palette-empty { font-size: 11pt; color: var(--text-muted); }
@media (max-width: 900px) {
  .s1-compose { grid-template-columns: 1fr; }
  .s1-compose-shelf { position: static; max-height: 320px; }
}