/* ui-results.css — 결과 화면(차트·막대·꺾은선·답 목록). split from ui.css (RULE-code-19) */

/* ─── 결과 화면 ──────────────────────────── */
.sv-results { display: block; padding: 24px 0 64px; }
.sv-results .sv-panel { margin-bottom: 16px; }

.sv-results__side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sv-results__side .sv-panel { margin-bottom: 16px; }

.sv-chart__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.sv-chart__title { margin: 0; font-size: 17px; font-weight: 700; line-height: var(--lh-base, 1.5); }

.sv-chart__badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--sv-brand-soft);
  color: var(--sv-brand-dark);
  font-size: 12px;
  font-weight: 700;
}

.sv-chart__note { margin: 0 0 16px; color: var(--sv-ink-soft); font-size: 13px; }
.sv-chart__empty { margin: 0; padding: 24px 0; color: var(--sv-ink-soft); font-size: 14px; text-align: center; }

/* 가로 막대 */
.sv-bars { display: flex; flex-direction: column; gap: 10px; }

.sv-bar {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr minmax(96px, auto);
  align-items: center;
  gap: 12px;
}

.sv-bar__label {
  font-size: 14px;
  line-height: var(--lh-base, 1.5);
  word-break: break-word;
}

.sv-bar__track {
  height: 12px;
  border-radius: 6px;
  background: #eef0f4;
  overflow: hidden;
}

.sv-bar__fill {
  height: 100%;
  border-radius: 6px;
  background: var(--sv-brand);
  transition: width 0.3s;
}

.sv-bar__value {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.sv-bar__value span { margin-left: 4px; color: var(--sv-ink-soft); font-weight: 600; }

/* 꺾은선 — 비율을 지켜 늘어나지 않게 한다 */
.sv-linechart {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
}

/* 주관식·첨부 답 목록 */
.sv-answer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-answer-list li {
  padding: 10px 14px;
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  background: #fafbfc;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.sv-answer-more { margin-top: 12px; }

.sv-table-wrap { overflow-x: auto; }

@media (max-width: 768px) {
  .sv-results__side { grid-template-columns: 1fr; }
  .sv-bar { grid-template-columns: 1fr; gap: 4px; }
  .sv-bar__value { text-align: left; }
  .sv-linechart { aspect-ratio: 5 / 3; }
}