@charset "UTF-8";
/* service-remote.php 전용 — 인라인 <style>에서 분리 (2026-07-30) */
/* 원격지원 서비스 전용 (service-remote.php) — 공용 토큰 참조 */
/* 서비스 구성 2단 (#services) — 2026-08-10 service-maintenance.css에서 이관 */
.ms-svc{display:grid;grid-template-columns:1fr 1.25fr;gap:18px}
.ms-svc-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.ms-svc-box h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:6px}
.ms-svc-box .cap{font-size:13px;color:var(--gray);margin-bottom:16px;line-height:1.55}
.ms-svc-box .cap b,.ms-svc-box .cap strong{color:var(--primary)}
.ms-svc-box ul{display:grid;gap:7px}
.ms-svc-box li{position:relative;padding-left:16px;font-size:14px;color:var(--ink);line-height:1.55}
.ms-svc-box li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--primary-light)}
.ms-cc{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:16px}
.ms-c{border-radius:10px;padding:13px 15px;font-size:12.5px;line-height:1.55}
.ms-c b{display:block;font-size:13px;margin-bottom:4px}
.ms-c--c1{background:var(--bg);color:var(--gray)}
.ms-c--c2{background:var(--success-bg);color:var(--success)}
/* 섹션 내 상세 페이지 링크 */
.ms-svc-more{display:inline-block;margin-top:14px;font-size:14px;font-weight:800;color:var(--primary)}
@media (hover:hover){.ms-svc-more:hover{color:var(--primary-deep);text-decoration:underline;text-underline-offset:3px}}

/* 제공 방식 2단 (#modes) */
.rm-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.rm-box .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:3px 10px;margin-bottom:12px}
.rm-box--c1 .tag{background:var(--bg);color:var(--gray)}
.rm-box--c2 .tag{background:var(--success-bg);color:var(--success)}
.rm-box--c2{border-color:var(--success-line)}
.rm-box h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:8px}
.rm-box .cond{font-size:13.5px;color:var(--gray);line-height:1.65;margin-bottom:14px}
.rm-box .cond b,.rm-box .cond strong{color:var(--ink)}
.rm-box ul{display:grid;gap:7px}
.rm-box li{position:relative;padding-left:16px;font-size:14px;color:var(--ink);line-height:1.6}
.rm-box li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--primary-light)}
.rm-box .foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;color:var(--gray);line-height:1.65}
.rm-box .foot b,.rm-box .foot strong{color:var(--ink)}

/* 판정 조견 카드 (#assessment) — 결과 배지는 #modes .rm-box 태그와 동일 색 체계 */
.as-grid{list-style:none;margin:0;padding:0}
.as-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column}
.as-card--c2{border-color:var(--success-line)}
.as-card__cond .no{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--primary);margin-bottom:8px}
.as-card__cond b{display:block;font-size:17px;font-weight:800;color:var(--navy);line-height:1.45}
.as-card__cond .en{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.5px}
.as-card__result{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.as-card__result .arrow{font-size:16px;font-weight:800;color:var(--primary)}
.as-card__result .tag{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.04em;border-radius:4px;padding:4px 12px}
.as-card__result .tag--c1{background:var(--bg);color:var(--gray)}
.as-card__result .tag--c2{background:var(--success-bg);color:var(--success)}
.as-card__desc{margin-top:12px;font-size:14px;color:var(--gray);line-height:1.7}
.as-card__desc b,.as-card__desc strong{color:var(--ink)}

/* 반응형 — 리터럴 값은 tokens.css의 --bp-tablet(1024)·--bp-mobile(768)과 일치 */
@media (max-width:1024px){
  .ms-svc{grid-template-columns:1fr}
}
@media (max-width:768px){
  .ms-cc{grid-template-columns:1fr}
}