:root{
  --bg: #0d0d12;
  --panel: #17171f;
  --panel-2: #1e1e28;
  --line: rgba(240,240,250,0.10);
  --line-strong: rgba(240,240,250,0.20);
  --text: #ede9f7;
  --text-dim: rgba(237,233,247,0.62);
  --accent: #7c6cf0;
  --accent-bright: #9a8cf7;
  --good: #3ecf8e;
  --mid: #e0b84c;
  --low: #e0625c;
  --radius: 12px;
  --font: 'Segoe UI', 'Noto Sans KR', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height:100vh;
}

button{ font-family:inherit; cursor:pointer; }

/* ===== Topbar ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.topbar h1{
  font-size: 20px;
  font-weight:700;
  letter-spacing: 0.5px;
}
.topbar .ver{
  font-size: 12px;
  font-weight:500;
  color: var(--accent-bright);
  margin-left: 8px;
  vertical-align: middle;
}
.topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.topbar-actions button{
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  font-weight:600;
  padding: 9px 14px;
  border-radius: 999px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.topbar-actions button:hover{ border-color: var(--accent); color: var(--accent-bright); }
.btn-link{
  display:inline-block;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-bright);
  font-size: 13px;
  font-weight:700;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration:none;
}
.btn-link:hover{ background: var(--accent); color: #0d0d12; }

.status-bar{
  padding: 8px 24px;
  font-size: 12.5px;
  color: var(--text-dim);
  min-height: 32px;
  border-bottom: 1px solid var(--line);
}
.status-bar.error{ color: var(--low); }

/* ===== Layout ===== */
.layout{
  display:grid;
  grid-template-columns: 280px 1fr 340px;
  gap: 0;
  align-items: start;
  min-height: calc(100vh - 100px);
}
.panel{
  padding: 18px 18px 32px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  max-height: calc(100vh - 100px);
}
.panel:last-child{ border-right:none; }
.panel h2{
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.empty-hint{ color: var(--text-dim); font-size: 13.5px; line-height:1.7; }

/* ===== Cluster list ===== */
.cluster-list{ display:flex; flex-direction:column; gap:10px; }
.cluster-card{
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cluster-card:hover{ border-color: var(--accent); }
.cluster-card.active{ border-color: var(--accent); background: var(--panel-2); }
.cluster-card-label{ font-size: 14px; font-weight:600; margin-bottom: 4px; }
.cluster-card-count{ font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.cluster-card-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cluster-card .btn-build, .cluster-card .btn-view-tree{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight:600;
  padding: 6px 12px;
  border-radius: 999px;
}
.cluster-card .btn-build:hover{ border-color: var(--accent); color: var(--accent-bright); }
.cluster-card .btn-view-tree{ border-color: var(--accent); color: var(--accent-bright); }
.cluster-card .btn-view-tree:hover{ background: var(--accent); color: #0d0d12; }

/* ===== Tree view ===== */
.tree-root, .tree-children{ list-style:none; }
.tree-children{ margin-left: 22px; margin-top: 8px; padding-left: 14px; border-left: 1px dashed var(--line-strong); }
.tree-node{ margin-bottom: 14px; }
.tree-node-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
}
.tree-node-text{ font-size: 14px; color: var(--text); flex: 1 1 auto; min-width: 160px; }
.type-badge{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight:700;
  padding: 3px 9px;
  border-radius: 999px;
  color: #0d0d12;
}
.type-seed{ background: var(--accent-bright); }
.type-deepen{ background: #6cd0e0; }
.type-challenge{ background: #e08a6c; }
.type-pivot{ background: #c98cf0; }
.type-narrow{ background: #8ce0a8; }
.type-broaden{ background: #e0d06c; }
.type-default{ background: var(--text-dim); }

.qscore-badge{
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight:700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}
.qscore-good{ color: var(--good); border-color: var(--good); }
.qscore-mid{ color: var(--mid); border-color: var(--mid); }
.qscore-low{ color: var(--low); border-color: var(--low); }

.issue-row{ display:flex; flex-wrap:wrap; gap:6px; margin: 6px 0 4px; }
.issue-chip{
  font-size: 11px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 999px;
}

.tree-node-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top: 6px; }
.btn-expand, .btn-generate-answer{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight:600;
  padding: 5px 11px;
  border-radius: 999px;
}
.btn-expand:hover{ border-color: var(--accent); color: var(--accent-bright); }
.btn-generate-answer:hover{ border-color: var(--good); color: var(--good); }
.btn-edit-question{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight:600;
  padding: 5px 11px;
  border-radius: 999px;
}
.btn-edit-question:hover{ border-color: var(--accent); color: var(--accent-bright); }
.depth-limit-note{ font-size: 11.5px; color: var(--text-dim); font-style: italic; }

.question-edit-box{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin: 6px 0;
}
.question-edit-input{
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
}
.question-edit-actions{ display:flex; gap:8px; }
.question-edit-actions button{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight:600;
  padding: 6px 12px;
  border-radius: 999px;
}
.question-edit-actions .btn-question-save{ background: var(--accent); color: #0d0d12; border-color: var(--accent); }
.question-edit-actions .btn-question-save:hover{ background: var(--accent-bright); border-color: var(--accent-bright); }
.question-edit-actions button:hover{ border-color: var(--accent); color: var(--accent-bright); }

.star-badge{ flex: 0 0 auto; font-size: 13px; }

.seed-answer-box{
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.seed-answer-label{ font-size: 11px; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; margin-bottom: 6px; }
.seed-answer-text{ font-size: 13.5px; color: var(--text); line-height:1.7; margin-bottom: 10px; }

/* ===== 답변 박스 (트리 노드 안 + FAQ 목록 양쪽에서 공유) ===== */
.answer-box{
  margin-top: 8px;
  border-left: 2px solid var(--accent);
  padding: 10px 0 10px 12px;
}
.answer-tag{
  display:inline-block;
  font-size: 10.5px;
  font-weight:700;
  color: var(--accent-bright);
  margin-right: 8px;
  margin-bottom: 4px;
}
.answer-tag.warn{ color: var(--mid); }
.answer-tag.good{ color: var(--good); }
.grounded-warning{ font-size: 12px; color: var(--mid); margin: 4px 0 8px; line-height:1.6; }
.answer-text{ font-size: 13px; color: var(--text-dim); line-height:1.65; }
.diff-add{ background: rgba(62,207,142,0.16); color: var(--good); text-decoration:none; border-radius:3px; padding: 0 1px; }
.diff-remove{ color: var(--low); text-decoration: line-through; opacity: 0.65; }
.diff-legend{ font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.answer-edit-textarea{
  width:100%;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  margin-top: 4px;
}
.answer-box-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.answer-box-actions button{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight:600;
  padding: 6px 12px;
  border-radius: 999px;
}
.answer-box-actions button:hover{ border-color: var(--accent); color: var(--accent-bright); }
.answer-box-actions .btn-answer-save{ background: var(--accent); color: #0d0d12; border-color: var(--accent); }
.answer-box-actions .btn-answer-save:hover{ background: var(--accent-bright); border-color: var(--accent-bright); color:#0d0d12; }

.btn-delete-node{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--low);
  font-size: 12px;
  font-weight:600;
  padding: 5px 11px;
  border-radius: 999px;
}
.btn-delete-node:hover{ border-color: var(--low); }

.verify-result{
  margin-top: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.verify-result.ok{ border-color: var(--good); }
.verify-result.warn{ border-color: var(--mid); }
.verify-result-label{ font-weight:700; }
.verify-result.ok .verify-result-label{ color: var(--good); }
.verify-result.warn .verify-result-label{ color: var(--mid); }
.verify-result ul{ margin: 6px 0 0 18px; color: var(--text-dim); line-height:1.6; }
.verify-result-time{ display:block; margin-top: 6px; font-size: 10.5px; color: var(--text-dim); }

.btn-answer-challenge{
  margin-top: 8px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight:600;
  padding: 6px 12px;
  border-radius: 999px;
}
.btn-answer-challenge:hover{ border-color: var(--accent); color: var(--accent-bright); }

.requestion-box{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.requestion-input{
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.requestion-actions{ display:flex; gap:8px; }
.requestion-actions button{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight:600;
  padding: 6px 12px;
  border-radius: 999px;
}
.requestion-actions .btn-requestion-submit{ background: var(--accent); color: #0d0d12; border-color: var(--accent); }
.requestion-actions .btn-requestion-submit:hover{ background: var(--accent-bright); border-color: var(--accent-bright); }
.requestion-actions button:hover{ border-color: var(--accent); color: var(--accent-bright); }

/* ===== FAQ panel (품질 순 답변 목록) ===== */
.faq-entry{
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.faq-entry-head{ display:flex; align-items:center; gap:8px; margin-bottom: 10px; }
.faq-question{ font-size: 14.5px; font-weight:600; margin-bottom: 8px; }

/* ===== 시드 질문 관리 모달 ===== */
.btn-secondary{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight:600;
  padding: 9px 14px;
  border-radius: 999px;
}
.btn-secondary:hover{ border-color: var(--accent); color: var(--accent-bright); }

.seed-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 50;
  padding: 24px;
}
.seed-modal-overlay[hidden]{ display:none; }
.seed-modal{
  width: min(560px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 22px;
}
.seed-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.seed-modal-head h2{ font-size: 16px; font-weight:700; }

.seed-add-form{ display:flex; flex-direction:column; gap:8px; margin-bottom: 20px; }
.seed-add-form input, .seed-add-form textarea{
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.seed-dup-result{ font-size: 12.5px; color: var(--text-dim); min-height: 16px; }
.seed-dup-result.has-match{ color: var(--mid); }
.seed-add-actions{ display:flex; gap:8px; }
.seed-add-actions button{
  border: none;
  background: var(--accent);
  color: #0d0d12;
  font-weight:700;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 999px;
}
.seed-add-actions button:not(.btn-secondary):hover{ background: var(--accent-bright); }

.seed-list{ display:flex; flex-direction:column; gap:8px; }
.seed-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 10px 12px;
}
.seed-item-text{ font-size: 13px; color: var(--text); }
.btn-seed-delete{
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--low);
  font-size: 12px;
  font-weight:600;
  padding: 5px 11px;
  border-radius: 999px;
}
.btn-seed-delete:hover{ border-color: var(--low); }

/* ===== FAQ 관리 페이지 (faq.html) ===== */
.faq-manage-layout{ max-width: 900px; margin: 0 auto; padding: 24px 24px 60px; }
.faq-manage-controls{
  display:flex;
  align-items:center;
  gap: 20px;
  flex-wrap:wrap;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-dim);
}
.faq-manage-controls label{ display:flex; align-items:center; gap:8px; }
.faq-manage-controls input, .faq-manage-controls select{
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.faq-manage-controls input[type="number"]{ width: 70px; }
.faq-manage-count{ margin-left:auto; }

.faq-manage-list{ display:flex; flex-direction:column; gap: 14px; }
.faq-manage-item{
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px;
}
.faq-manage-item-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom: 10px; }
.cluster-tag{
  font-size: 11px;
  font-weight:700;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  padding: 3px 10px;
  border-radius: 999px;
}
.answer-box-actions .btn-manage-save{ background: var(--accent); color: #0d0d12; border-color: var(--accent); }
.answer-box-actions .btn-manage-save:hover{ background: var(--accent-bright); border-color: var(--accent-bright); }
.answer-box-actions .btn-manage-delete{ color: var(--low); }
.answer-box-actions .btn-manage-delete:hover{ border-color: var(--low); color: var(--low); }
.answer-box-actions .btn-manage-publish{ color: var(--accent-bright); border-color: var(--accent); }
.answer-box-actions .btn-manage-publish:hover{ background: var(--accent); color: #0d0d12; }

.feedback-count{
  font-size: 11.5px;
  color: var(--text-dim);
  margin-left: auto;
}

/* ===== 고객 질문함 (faq.html 상단) ===== */
.customer-inbox-section{ margin-bottom: 28px; }
.customer-inbox-section h2{ font-size: 15px; font-weight:700; margin-bottom: 8px; }
.customer-inbox-list{ display:flex; flex-direction:column; gap: 12px; }
.customer-inbox-item{
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.customer-inbox-question{ font-size: 13.5px; font-weight:600; margin-bottom: 4px; }
.customer-inbox-time{ font-size: 11px; color: var(--text-dim); display:block; margin-bottom: 8px; }
.customer-inbox-answer{
  width:100%;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.customer-inbox-item .btn-inbox-promote{ background: var(--accent); color: #0d0d12; border-color: var(--accent); }
.customer-inbox-item .btn-inbox-promote:hover{ background: var(--accent-bright); border-color: var(--accent-bright); }
.customer-inbox-item .btn-inbox-dismiss{ color: var(--low); }
.customer-inbox-item .btn-inbox-dismiss:hover{ border-color: var(--low); }

/* ===== 고객용 공개 페이지 (public.html) ===== */
.public-body{ display:flex; justify-content:center; }
.public-layout{
  width: min(560px, 100%);
  padding: 60px 24px 80px;
}
.public-title{ font-size: 26px; font-weight:700; text-align:center; margin-bottom: 8px; }
.public-subtitle{ font-size: 14px; color: var(--text-dim); text-align:center; margin-bottom: 28px; }
.public-search-form{ display:flex; gap:8px; margin-bottom: 24px; }
.public-search-input{
  flex: 1 1 auto;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.public-search-input:focus{ outline:none; border-color: var(--accent); }
.public-search-form button{
  flex: 0 0 auto;
  border: none;
  background: var(--accent);
  color: #0d0d12;
  font-weight:700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
}
.public-search-form button:hover{ background: var(--accent-bright); }
.public-status{ text-align:center; color: var(--text-dim); font-size: 13.5px; }
.public-error{ color: var(--low); }

.public-answer-card{
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
}
.public-answer-question{ font-size: 15.5px; font-weight:700; margin: 8px 0 10px; }
.public-answer-text{ font-size: 14px; color: var(--text); line-height:1.75; margin-bottom: 16px; }
.public-feedback{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size: 13px; color: var(--text-dim); }
.public-feedback button{
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight:600;
  padding: 6px 12px;
  border-radius: 999px;
}
.public-feedback button:hover{ border-color: var(--accent); color: var(--accent-bright); }
.public-feedback-thanks{ font-size: 13px; color: var(--good); }

.public-no-match{
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 20px;
  text-align:center;
  color: var(--text-dim);
}
.public-no-match p{ margin-bottom: 6px; }
.public-no-match-sub{ font-size: 12.5px; }

/* ===== Responsive ===== */
@media (max-width: 1000px){
  .layout{ grid-template-columns: 1fr; }
  .panel{ border-right:none; border-bottom: 1px solid var(--line); max-height:none; }
}