/* 신도오에이렌탈 제품 상세 (2026-10-06 슬라이드 안건 11·12, detail). 클래스는 sl-detail- 로 시작한다.
   · 리코 IM C2010 · 신도 D470: 가격 상자 옵션란의 요금제 고르기(스탠다드 / 플러스 / 비즈니스)
   · 「견적 문의」로 아래 「간단한 연락처」 폼에 올 때 상단 고정 메뉴에 가리지 않게 여백 */
.rv-contact[id]{scroll-margin-top:96px}
.sl-detail-plans{grid-column:1/-1;min-width:0;margin:0;padding:0;border:0;container:sl-detail-plans/inline-size}
.sl-detail-plans>legend{float:left;width:100%;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 8px;padding:0;font-size:14px;font-weight:700;line-height:1.5;color:#15283f}
.sl-detail-plans>legend small{font-size:13px;font-weight:600;color:#4f6480}
.sl-detail-plans-row{clear:both;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.sl-detail-plan{display:grid;grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:"dot name price" "dot base price";align-items:center;gap:0 12px;margin:0;padding:10px 14px;border:1px solid #cfdcee;border-radius:12px;background:#fff;color:#15283f;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
.sl-detail-plan:hover{border-color:#8fb1df}
.sl-detail-plan input{grid-area:dot;width:18px;height:18px;margin:0;accent-color:#0055c9;cursor:pointer}
.sl-detail-plan-name{grid-area:name;min-width:0;font-size:16px;font-weight:800;line-height:1.4;color:#0f2a4a}
.sl-detail-plan-price{grid-area:price;font-size:15px;font-weight:700;line-height:1.3;color:#0f2a4a;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.sl-detail-plan-price b{font-size:19px;font-weight:800}
.sl-detail-plan-base{grid-area:base;min-width:0;font-size:13px;font-weight:600;line-height:1.45;color:#4f6480;white-space:nowrap;font-variant-numeric:tabular-nums}
.sl-detail-plan.is-checked{border-color:#0055c9;background:#f0f6ff;box-shadow:0 0 0 2px rgba(0,85,201,.18)}
.sl-detail-plan:has(input:checked){border-color:#0055c9;background:#f0f6ff;box-shadow:0 0 0 2px rgba(0,85,201,.18)}
.sl-detail-plan:has(input:focus-visible){outline:3px solid rgba(0,85,201,.45);outline-offset:2px}
/* 넓은 칸: 슬라이드 표처럼 한 줄에 이름 · 월 요금 · 기본 매수(흑백 / 컬러) */
@container sl-detail-plans (min-width:420px){
 .sl-detail-plan{grid-template-columns:18px minmax(0,1fr) auto 118px;grid-template-areas:"dot name price base";padding:11px 16px}
 .sl-detail-plan-base{font-size:14px;text-align:right;color:#26405f}
}
/* 요금제 화면의 기본 임대료 줄: 이름 칸은 한 줄, 금액 설명은 「·」 단위로만 줄바꿈 */
.detail-options.sl-detail-has-plans~.rv-calc-rows dt{flex-shrink:0;white-space:nowrap}
.sl-detail-nb{white-space:nowrap}
/* 요금제 금액(6자리)이 들어가도 「예상 월 요금」 머리 줄이 낱말 중간에서 꺾이지 않게 */
.sl-detail-calc .rv-calc-head span,.sl-detail-calc .rv-calc-head strong small{white-space:nowrap}
@media(min-width:641px) and (max-width:1000px){.sl-detail-calc .rv-calc-head strong{font-size:26px}}
@media(min-width:641px){.rv-calc .detail-options.sl-detail-has-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.sl-detail-plan{padding:10px 12px;gap:0 10px}.sl-detail-plan-price b{font-size:17px}}
@media(prefers-reduced-motion:reduce){.sl-detail-plan{transition:none}}
/* ───────── 2026-10-07 수정안(방 -5497578250 메시지 27153) ───────── */
/* 9 요금제 색: 라이트 → 스탠다드 → 플러스 → 비즈니스 를 브랜드 파랑(#0055c9)·남색(#0f2a4a) 계열 옅은색 → 진한색 그라데이션으로 구분
   왼쪽 색 띠 + 그 색으로 옅게 물든 바탕 + 같은 계열 글자색(흰 바탕 대비 4.9:1 이상) */
.sl-detail-plan{--pl:#6aa7f2;--pl2:#2f7fe0;--pl-ink:#1958b8;--pl-tint:#e5f0ff;position:relative;overflow:hidden;padding-left:22px;background:linear-gradient(90deg,var(--pl-tint) 0,#fff 72%)}
.sl-detail-plan::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,var(--pl),var(--pl2))}
.sl-detail-plan-term4{--pl:#a9d1fb;--pl2:#6aaef6;--pl-ink:#1f6fd0;--pl-tint:#eef6ff}
.sl-detail-plan-standard{--pl:#6aa7f2;--pl2:#2f7fe0;--pl-ink:#1958b8;--pl-tint:#e5f0ff}
.sl-detail-plan-plus{--pl:#2a78df;--pl2:#0055c9;--pl-ink:#0049ad;--pl-tint:#dde9fb}
.sl-detail-plan-business{--pl:#26508a;--pl2:#0f2a4a;--pl-ink:#0f2a4a;--pl-tint:#dfe5ef}
.sl-detail-plan .sl-detail-plan-name,.sl-detail-plan .sl-detail-plan-price{color:var(--pl-ink)}
.sl-detail-plan input{accent-color:var(--pl2)}
.sl-detail-plan:hover{border-color:var(--pl)}
.sl-detail-plan.is-checked,.sl-detail-plan:has(input:checked){border-color:var(--pl2);background:linear-gradient(90deg,var(--pl-tint) 0,#fff 100%);box-shadow:0 0 0 2px color-mix(in srgb,var(--pl2) 26%,transparent)}
@media(max-width:360px){.sl-detail-plan{padding-left:18px}}
/* 7 약정이 정해진 요금제(IM C2010 라이트 4년)를 고르면 옵션란 약정 칸을 그 약정으로 잠근다 */
.rv-calc .detail-options label.is-locked select:disabled{opacity:1;color:#15283f;-webkit-text-fill-color:#15283f;background-color:#f4f7fb;cursor:not-allowed}
.sl-detail-lock{display:block;margin-top:5px;font-size:12.5px;font-weight:700;line-height:1.4;color:#1f6fd0}
.sl-detail-lock[hidden]{display:none}