@charset "UTF-8";
/* service-price.php 전용 — 인라인 <style>에서 분리 (2026-07-30) */
/* 유지보수 요금 전용 (service-price.php) — 공용 토큰 참조 */
/* 요금 결정 세 축 (#pricing-axes) — 2026-08-10 service-maintenance.css에서 이관 */
.ms-axes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ms-ax{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;transition:.2s}
@media (hover:hover){.ms-ax:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--primary-light)}}
.ms-ax .no{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--primary);border-radius:4px;padding:3px 9px;margin-bottom:12px}
.ms-ax h3{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:12px}
.ms-ax .opt{font-size:13.5px;font-weight:700;color:var(--ink);background:var(--bg);border-radius:6px;padding:7px 11px;margin-bottom:6px}
.ms-ax .opt small{display:block;font-weight:500;color:var(--gray);font-size:11.5px;margin-top:2px;line-height:1.45}
.ms-ax .sub{font-size:12.5px;color:var(--gray);margin-top:12px;line-height:1.55}
.ms-ax .sub b{color:var(--ink)}
.ms-formula{display:grid;grid-template-columns:repeat(3,minmax(0,1fr) auto) minmax(0,1fr);align-items:stretch;gap:10px;margin:26px auto 0;max-width:1040px}
.ms-formula .f{display:flex;flex-direction:column;justify-content:center;text-align:center;background:#fff;border:2px solid var(--primary-light);border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:800;color:var(--navy)}
.ms-formula .f small{display:block;font-size:11px;font-weight:600;color:var(--gray);margin-top:2px}
.ms-formula .op{align-self:center;font-size:18px;font-weight:800;color:var(--primary)}
.ms-formula .f--result{border-color:var(--accent);background:var(--success-bg);color:var(--success)}
/* 섹션 내 상세 페이지 링크 */
.ms-formula-more{text-align:center;margin-top:18px}
.ms-formula-more a{font-size:14px;font-weight:800;color:var(--primary)}
.ms-ax .sub a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){
  .ms-formula-more a:hover{color:var(--primary-deep);text-decoration:underline;text-underline-offset:3px}
  .ms-ax .sub a:hover{color:var(--primary-deep);text-decoration-thickness:2px}
}
@media (max-width:1024px){
  .ms-axes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .ms-axes{grid-template-columns:1fr}
  .ms-formula{grid-template-columns:1fr;gap:6px}
  .ms-formula .op{justify-self:center}
}

/* 요금 매트릭스 */
/* 구독형 축은 블루(소유형·기본)와 구분되도록 틸 계열 토큰 사용 (2026-07-30 블루 전환) */
.ms-mx{--ms-sub3-bg:var(--teal-bg);--ms-sub5-bg:var(--teal-bg2);width:100%;min-width:1020px;border-collapse:separate;border-spacing:0;font-size:13px}
.ms-mx th{padding:10px 6px;text-align:center;color:#fff;font-weight:700;font-size:12.5px;border:1px solid #fff}
.ms-mx th.h-base{background:var(--navy)}
.ms-mx th.h-own{background:var(--navy-bright)}
.ms-mx th.h-s3{background:var(--teal)}
.ms-mx th.h-s5{background:var(--teal-deep)}
.ms-mx td{padding:11px 6px;text-align:center;border:1px solid #fff;font-weight:600;color:var(--ink)}
.ms-mx td.c-name{background:var(--bg);font-weight:800;color:var(--navy)}
.ms-mx td.c-model{background:var(--bg);text-align:left;padding-left:12px;white-space:nowrap}
.ms-mx td.c-supply{background:var(--info-bg);font-weight:700}
.ms-mx td.c-own{background:var(--info-bg);color:var(--navy)}
.ms-mx td.c-s3{background:var(--ms-sub3-bg);color:var(--teal-deep)}
.ms-mx td.c-s5{background:var(--ms-sub5-bg);color:var(--teal-deep)}
.ms-mx td.c-na{color:var(--gray);font-weight:400}
.ms-mx td.c-note{background:var(--bg);color:var(--gray);font-weight:500;font-size:12.5px;text-align:center}
.ms-legend{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:16px}
.ms-legend .lg{font-size:12.5px;color:var(--gray);line-height:1.6}
.ms-legend .lg b,.ms-legend .lg strong{color:var(--ink)}

/* 주요 계약 조건 — 항목→조건의 용어 목록이라 표 대신 정의 목록(dl)으로 (2026-08-06).
   레이아웃은 company-history의 .era-years와 같은 idiom
   (네이비 2px 상단선 + 행마다 구분선 + 고정폭 라벨 열), ≤768에서는 1열로 접는다 */
.terms-dl{border-top:2px solid var(--navy)}
.terms-row{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:22px 8px;border-bottom:1px solid var(--line);align-items:start}
.terms-row dt{font-size:16px;font-weight:800;color:var(--ink);line-height:1.55}
.terms-row dd{font-size:15.5px;color:var(--gray);line-height:1.75}
@media (max-width:768px){.terms-row{grid-template-columns:1fr;gap:8px;padding:20px 4px}}