@charset "UTF-8";
/* service-grade.php 전용 — 인라인 <style>에서 분리 (2026-07-30) */
/* 서비스 등급과 SLA 전용 (service-grade.php) — 공용 토큰 참조 */
/* 통합 포인트 3카드 (2026-08-10 service-maintenance.css에서 이관 — #intro 섹션) */
.ms-point .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
.ms-point h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:10px}
.ms-point p{font-size:14.5px;color:var(--gray);line-height:1.7}
/* 등급 3종 */
.ms-grades{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ms-grade{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:.2s}
@media (hover:hover){.ms-grade:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}}
.ms-grade .tier{font-size:16px;font-weight:800;color:var(--primary-vivid)}
.ms-grade .fit{font-size:12.5px;color:var(--gray);margin-top:6px;line-height:1.5}
.ms-grade .rate{margin:16px 0 18px;padding-top:16px;border-top:1px solid var(--line)}
.ms-grade .rate b{display:block;font-size:26px;font-weight:900;color:var(--navy);line-height:1.1}
.ms-grade .rate b em{font-size:14px;font-weight:700;color:var(--gray);font-style:normal;margin-left:2px}
.ms-grade .rate span{display:block;font-size:12px;color:var(--gray);margin-top:6px}
.ms-grade ul{display:grid;gap:6px}
.ms-grade li{position:relative;padding-left:16px;font-size:13.5px;color:var(--ink);line-height:1.5}
.ms-grade li::before{content:"+";position:absolute;left:0;font-weight:800;color:var(--accent)}
.ms-grade li.base::before{content:"";top:8px;width:6px;height:6px;border-radius:50%;background:var(--primary-light)}
/* 공통 제공 범위 — 아이콘 카드 (products-common.css .adv-card 구성 준용, 3열) */
.cov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cov-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:box-shadow .18s,transform .18s,border-color .18s}
@media (hover:hover){.cov-card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);border-color:var(--primary-light)}}
.cov-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--primary);margin-bottom:18px}
.cov-ico svg{width:24px;height:24px}
.cov-card h3{font-weight:800;font-size:17px;line-height:1.4;color:var(--ink);margin:0 0 10px}
.cov-card p{color:var(--gray);font-size:14.5px;line-height:1.7;margin:0}
/* SLA 표 — 가운데 정렬 셀 */
.sla-tbl th,.sla-tbl td{text-align:center}
.sla-tbl th.item,.sla-tbl td.item{text-align:left;white-space:nowrap}
.sla-tbl .na{color:var(--gray);font-weight:400}
.sla-tbl th.sub{background:var(--navy-light);font-size:12.5px}
/* SLA 표 — colspan 병합 셀 구분용 세로 보더 (마지막 열 제외) */
.sla-tbl th:not(:last-child),.sla-tbl td:not(:last-child){border-right:1px solid var(--line)}
.sla-tbl thead th:not(:last-child){border-right-color:var(--dark-line-soft)}
/* 측정 기준·산정 제외 목록 — 표형 데이터가 아니므로 ul, 행 구분선 외관만 재현 */
.ms-crit{margin-top:6px}
.ms-crit li{padding:13px 2px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7;color:var(--ink)}
.ms-crit li:last-child{border-bottom:0}
.ms-crit li b{font-weight:700}
@media (max-width:1024px){
  .cov-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .ms-grades{grid-template-columns:1fr}
  .cov-grid{grid-template-columns:1fr;gap:16px}
  .cov-card{padding:24px 22px}
}