/* =========================================================
   볼스플라인의 선정 (file_spline_select.html 전용)
   - 입력칸 · 표 · 판정 배너 등은 볼나사의 선정(css/select.css)과 같이 씀
   ========================================================= */

/* 하중 위치 · 축 지지 그림 */
.sp-fig svg { display: block; width: 100%; max-width: 860px; height: auto; margin: 0 auto; }
.fig-note { margin: 10px 0 0; padding: 10px 14px; font-size: 13.5px; line-height: 1.6; color: #334155; background: #f1f5f9; border-left: 3px solid var(--main-color); border-radius: 0 6px 6px 0; }
.fig-note b { color: var(--main-color); margin-right: 4px; }

/* 너트 간격 칸: '2개 떨어짐'을 고를 때만 보임 (.sr 의 display:grid 보다 우선) */
.sr[hidden] { display: none; }

/* 하중 정리 표 */
.sp-load td { font-size: 13.5px; }
.sp-load td:first-child { text-align: left; font-weight: 700; color: #334155; white-space: nowrap; }
.sp-load td.f { white-space: nowrap; }
.sp-load td:last-child { text-align: left; }

/* 형번 표: 좁은 앞 3열(형번 · 너트 · 축경) 제목은 한 줄로 */
.sp-pick .res-table th:nth-child(-n+3) { white-space: nowrap; }

/* 선정 결과: 3칸 (5개 → 3 + 2) */
.sp-dt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-dt .dt-box .s { line-height: 1.6; }
.dt-box.info { border-top-color: #0284c7; }

@media (max-width: 1100px) {
    .sp-dt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .sp-dt { grid-template-columns: 1fr; }
}