/* 측정 결과(overview) 화면 전용: 체험 분석 안내 패널(.trial-panel /
 * .trial-actions). 브랜드 대시보드 본문은 dashboard.css가 그린다. */

/* 측정 결과 화면 맨 위에 서는 패널이라 .panel(css/dashboard.css)과 같은 카드다 --
 * 8px 모서리에 손으로 적은 그림자였던 동안, 바로 아래 대시보드 패널들과 다른
 * 모서리로 서 있었다. */
.trial-panel {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
  padding: 20px 22px;
  box-shadow: var(--panel-shadow);
}

.trial-panel small {
  color: var(--muted-strong);
  font-weight: 800;
  letter-spacing: 0;
}

.trial-panel h2 {
  margin: 6px 0;
  font-size: var(--fs-6);
}

.trial-panel p {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-3);
  line-height: 1.55;
}

.trial-panel span {
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--muted-strong);
  background: var(--surface-muted);
  font-size: var(--fs-2);
  overflow-wrap: anywhere;
  white-space: normal;
}

.trial-panel[data-status="review_required"] {
  border-color: rgba(180, 83, 9, .3);
  border-left: 4px solid var(--warning);
  background: var(--warning-soft);
}

.trial-panel[data-status="review_required"] span {
  color: var(--warning);
  background: #ffedd5;
}

.trial-actions {
  display: grid;
  grid-template-columns: minmax(180px, 280px) auto;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
}

.trial-actions button {
  height: 42px;
  border: 0;
  border-radius: var(--control-radius);
  padding: 0 12px;
  color: #fff;
  background: var(--warning);
  font-weight: 700;
  cursor: pointer;
}