.score-radar {
  color: var(--ink);
  padding: 16px clamp(12px, 2vw, 24px) 14px;
  border-top: 1px solid var(--line);
}
.radar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.score-radar h3 { margin: 0; font-size: 14px; }
.score-radar h3 small { margin-left: 8px; color: #606773; font-size: 11px; font-weight: 400; }
.radar-body {
  display: grid;
  grid-template-columns: minmax(210px, 340px) minmax(175px, 1fr);
  align-items: center;
  gap: clamp(12px, 3.5vw, 50px);
}
.radar-plot {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 320 / 204;
  margin: 0 auto;
}
.radar-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar-ring, .radar-spoke { fill: none; stroke: #d5dae1; stroke-width: 1; }
.radar-ring:nth-child(2n) { stroke: #c4cbd5; }
.radar-shape { fill: #4677a5; fill-opacity: .12; stroke: #396487; stroke-width: 2; stroke-linejoin: round; }
.radar-mark { fill: #294f72; stroke: white; stroke-width: .9; }
button.radar-subject {
  --x: 50%; --y: 9%;
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  max-width: 36%;
  padding: 2px 5px;
  background: transparent;
  color: #303a46;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
  font: inherit;
  line-height: 1.2;
}
.radar-subject span { font-size: 12px; font-weight: 500; white-space: nowrap; }
.radar-subject b { font-weight: 700; font-variant-numeric: tabular-nums; }
.radar-subject small { margin-top: 2px; font-size: 10px; color: #5e6874; overflow-wrap: anywhere; }
button.radar-math { --x: 84%; --y: 43%; }
button.radar-english { --x: 71%; --y: 92%; }
button.radar-inquiry1 { --x: 30%; --y: 92%; }
button.radar-inquiry2 { --x: 14%; --y: 43%; }
button.radar-subject:not(:disabled):hover, button.radar-subject:focus-visible {
  color: #173f62;
  background: #f1f5f8;
  border-color: #7b95ab;
}
button.radar-subject:focus-visible { outline: 2px solid #345a77; outline-offset: 2px; }
button.radar-subject:disabled { opacity: 1; color: #697380; }
.radar-copy { max-width: 450px; font-size: 12px; line-height: 1.6; }
.radar-reading { margin: 0; }
.radar-reading div { display: flex; align-items: baseline; gap: 10px; }
.radar-reading div + div { margin-top: 3px; }
.radar-reading dt { flex: 0 0 auto; color: #586370; }
.radar-reading dd { margin: 0; font-weight: 500; }
.radar-reading b, .radar-observation b { color: #244863; }
.score-radar p { margin: 0; }
.score-radar .radar-inquiry-note { margin-top: 8px; }
.radar-tip, .radar-partial { font-size: 11px; line-height: 1.5; color: #5f6873; }
.score-radar .radar-tip { margin-top: 3px; }
.radar-placeholder { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.radar-placeholder p { font-size: 12px; color: #626a75; }
@media (max-width: 620px) {
  .radar-body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .radar-plot { max-width: 300px; }
  .radar-copy { width: 100%; max-width: none; }
  .radar-reading { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .radar-reading div + div { margin-top: 0; }
}