/* =========================================================
   TM스크류의 선정 (file_tm_select.html 전용)
   - 입력칸 · 표 · 판정 배너 등은 볼나사의 선정(css/select.css)과 같이 씀
   - 판정이 3단계(권장 / 사용 가능 / 부적합)라 '사용 가능'용 주황색만 추가
   ========================================================= */

/* 판정 표시 */
.g-tag { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.g-ok { background: #dcfce7; color: #15803d; }
.g-ok2 { background: #fef3c7; color: #b45309; }
.g-ng { background: #fee2e2; color: #b91c1c; }
.res-table td.pv { font-weight: 800; }
.res-table td.pv-ok { color: #15803d; }
.res-table td.pv-ok2 { color: #b45309; }
.res-table td.pv-ng { color: #b91c1c; }

/* 사용 가능(주황) 배너 · 칸 */
.verdict.warn { background: linear-gradient(135deg, #b45309, #f59e0b); }
.dt-box.warn { border-top-color: #f59e0b; background: #fffbeb; }
.dt-box.info { border-top-color: #0284c7; }
.dt-box h4 .g-tag { font-size: 13px; }
.tm-dt { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 판정 기준 카드 */
.tm-rule > h2 { font-size: 16px; }
.rule-formula { display: grid; gap: 6px; margin-bottom: 14px; padding: 12px 14px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 14.5px; color: #0f172a; }
.rule-formula b { color: var(--main-color); }
.rule-formula small { font-size: 12px; color: #64748b; }
.rule-table { margin-bottom: 12px; }
.rule-table td { font-size: 13.5px; }

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