@charset "UTF-8";
/* deployment.php 전용 — 인라인 <style>에서 분리 (2026-07-30) */
/* 요금 안내 — 표 대신 결제형 프라이싱 카드 (deployment.php 전용) */
/* 계약 형태 토글 — 컨테이너 풀너비 세그먼트 컨트롤 (on-sub.js 필터 핸들러와 분리된 전용 클래스) */
/* 스크롤 중에도 탭이 항상 보이도록 헤더 아래 고정 — 탭 전환 시 보고 있던 카드 요금이 그 자리에서 갱신 */
.plan-switch{position:sticky;top:calc(var(--head-h) + 12px);z-index:20;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}
.plan-switch button{padding:15px 10px;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:700;color:var(--gray);cursor:pointer;transition:.2s}
.plan-switch button+button{border-left:1px solid var(--line)}
@media (hover:hover){.plan-switch button:hover{color:var(--primary);background:var(--bg)}}
.plan-switch button.on{background:var(--navy);color:#fff}
.plan-switch button:focus-visible{outline:2px solid var(--primary);outline-offset:-3px}
.pricing{display:grid;gap:32px}
.pricing-group__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;padding-bottom:12px;margin-bottom:16px;border-bottom:2px solid var(--line)}
.pricing-group__label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.pricing-group__title{font-size:22px;font-weight:900;color:var(--navy)}
.pricing-group__sub{flex-basis:100%;font-size:14px;color:var(--gray)}
.pricing-group__link{margin-left:auto;font-size:14px;font-weight:700;color:var(--primary);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.pricing-group__link:hover{color:var(--primary-deep)}}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.plan-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:.2s}
@media (hover:hover){.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--primary-light)}}
.plan-card__tier{font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--primary-vivid)}
.plan-card__spec{font-size:13px;line-height:1.5;color:var(--gray);margin-top:4px;min-height:38px}
/* 금액 행 — 금액 오른쪽에 상태 배지(무상 지원 / 약정) 배치, 캡션은 아래 줄 */
.plan-card__price{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:16px 0 18px;padding-top:20px;border-top:1px solid var(--line)}
.plan-card__amt{font-size:27px;font-weight:900;color:var(--navy);line-height:1.1}
.plan-card__amt em{font-size:15px;font-weight:700;color:var(--gray);font-style:normal;margin-left:3px}
.plan-card__cap{flex-basis:100%;font-size:12px;color:var(--gray)}
/* 계약 형태별 pane + 등급 요금 리스트 */
.plan-card__pane .plan-card__price{margin-bottom:14px}
.plan-card__grades{margin:0 0 22px;list-style:none;padding:0}
.plan-card__grades li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:7px 2px;border-bottom:1px dashed var(--line);font-size:13px}
.plan-card__grades li:last-child{border-bottom:0}
.plan-card__grades li b{font-weight:700;color:var(--gray)}
.plan-card__grades li span{font-weight:800;color:var(--navy)}
.plan-card__grades li.na{justify-content:flex-start;font-size:12px;color:var(--gray)}
/* 금액 옆 상태 칩 — 소유형 1년 무상 지원(그린) / 구독형 약정 기간(블루, 그린과 색 계열 분리) */
.plan-card__free,.plan-card__term{padding:5px 11px;border-radius:20px;font-size:12px;font-weight:800;line-height:1.25;white-space:nowrap}
.plan-card__free{background:var(--success-bg);border:1px solid var(--success-line);color:var(--success)}
.plan-card__term{background:var(--info-bg);border:1px solid var(--info-line);color:var(--primary-deep)}
.plan-card__term--5{background:var(--primary-deep);border-color:var(--primary-deep);color:#fff}
/* 카드 전체가 견적 문의 링크 (버튼 제거, 2026-07-30) */
.plan-card:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
/* 계약 형태 전용 카드 숨김 (display:flex가 hidden 속성을 덮으므로 명시) */
.plan-card[hidden]{display:none}
/* Enterprise — 비공개 프리미엄 티어(다크) */
.plan-card--premium{background:linear-gradient(160deg,var(--navy),var(--surface-dark));border-color:transparent;color:#fff}
.plan-card--premium .plan-card__tier{color:var(--accent)}
.plan-card--premium .plan-card__spec{color:rgba(255,255,255,.72)}
.plan-card--premium .plan-card__price{border-top-color:rgba(255,255,255,.18)}
.plan-card--premium .plan-card__amt{font-size:20px;color:#fff}
.plan-card--premium .plan-card__cap{color:rgba(255,255,255,.7)}
@media (max-width:1024px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .pricing-grid{grid-template-columns:1fr}
  .plan-switch button{padding:13px 6px;font-size:13px}
}

/* 계약 형태 — 소유형 vs 구독형 2단 비교 카드 + 연차 미니 타임라인 (2026-08-05 service-maintenance.css에서 이관) */
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.2s}
@media (hover:hover){.ct-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--primary-light)}}
.ct-head h3{font-size:18px;font-weight:800;color:var(--navy)}
.ct-tag{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--primary);border-radius:4px;padding:2px 8px;margin-left:8px;vertical-align:2px}
.ct-cap{font-size:13px;color:var(--gray);margin-top:6px;line-height:1.55}
.ct-rows{margin-top:18px;display:grid;gap:32px;list-style:none}
.ct-rows li{position:relative;display:flex;align-items:center;gap:12px}
.ct-rows li+li::before{content:"";position:absolute;top:-24px;left:34px;width:16px;height:16px;background:var(--primary);-webkit-mask:var(--icon-arrow-down) center/contain no-repeat;mask:var(--icon-arrow-down) center/contain no-repeat}
.ct-stage{flex:none;width:84px;text-align:center;background:var(--info-bg);border:1px solid var(--info-line);border-radius:6px;padding:7px 8px;font-size:13px;font-weight:800;color:var(--navy)}
.ct-desc{flex:1;font-size:13.5px;color:var(--gray);line-height:1.6}
.ct-desc .ok{color:var(--success);font-weight:700}
@media (max-width:768px){.ct-grid{grid-template-columns:1fr}}

/* 확장 경로 표 (deployment.php 전용) — 계층별 확장 방식·요금을 가로로 비교하는 표라
   카드로 세우지 않는다. 좁은 화면에서 열이 과도하게 눌리지 않도록 최소 폭을 두고
   .table-wrap 안에서 가로 스크롤 */
@media (max-width:768px){
  .up-tbl{min-width:680px}
  /* 계층명(Enterprise(모니터링 서버) 등)이 2줄로 접히면 행 높이가 들쑥날쑥해지므로
     1열은 줄바꿈을 막고 내용 폭만큼 열을 넓힌다 (w24 %보다 최소 콘텐츠 폭이 우선) */
  .up-tbl td:first-child{white-space:nowrap}
}

/* STEP 1 → STEP 3 우회 경로 괄호 (deployment.php 전용 — .steps--skip 수정자).
   .steps/.step은 on-sub.css 공통 컴포넌트이므로 기본 규칙은 손대지 않고,
   이 페이지에만 붙는 수정자 클래스의 가상요소로 괄호를 그린다.

   가로 배치(>1024): .steps는 gap:40px + .step{flex:1} 3등분이므로 카드 하나의 폭이
   (100% - 80px)/3이고, 1번·3번 카드의 중심은 각각 양 끝에서 (100% - 80px)/6 지점이다.
   ::before는 카드 아래로 돌아가는 U자 괄호, ::after는 STEP 3 쪽 끝에서 위를 향한 화살촉.
   padding-bottom:44px = 카드 아래 여백 18px + 괄호 높이 22px + 여유 4px

   ※ 화살촉 중심을 괄호 '테두리의 중심선'에 맞춘다 — 화살촉은 18px 상자의 한가운데를
   지나지만 괄호의 선은 2px 테두리라 중심이 요소 가장자리에서 1px 안쪽이다. 이 1px을
   빼지 않으면 화살촉의 축이 괄호 선과 어긋나 이음매에 계단이 생긴다 (2026-08-11 수정).
   가로: 오른쪽 세로선 중심 = 요소 오른쪽 끝 - 1px → 화살촉 상자를 9-1=8px만 내민다 */
.steps--skip{position:relative;padding-bottom:44px}
.steps--skip::before{content:"";position:absolute;left:calc((100% - 80px) / 6);right:calc((100% - 80px) / 6);bottom:4px;height:22px;border:2px solid var(--primary-light);border-top:0;border-radius:0 0 12px 12px}
.steps--skip::after{content:"";position:absolute;right:calc((100% - 80px) / 6 - 8px);bottom:17px;width:18px;height:18px;background:var(--primary-light);-webkit-mask:var(--icon-arrow-right) center/contain no-repeat;mask:var(--icon-arrow-right) center/contain no-repeat;transform:rotate(-90deg)}

/* 세로 배치(≤1024 — on-sub.css가 .steps를 column으로 돌리는 지점과 같다):
   괄호도 90° 돌려 카드 왼쪽 여백을 타고 STEP 1에서 STEP 3으로 내려간다.
   위·아래 42px은 STEP 1의 STEP 배지 높이(패딩 28 + 배지 절반 14)에 맞춘 값으로,
   괄호가 첫 카드의 배지 줄에서 시작해 마지막 카드 안에서 끝나 보이게 한다.
   화살촉은 괄호 아래쪽 끝(왼쪽 여백 22px 지점)에서 STEP 3을 향해 오른쪽을 가리킨다.
   세로: 아래 가로선 중심 = 바닥에서 42px(요소 아래 끝) + 1px(2px 테두리의 절반) = 43px
   → 화살촉 상자의 중심(높이 18px의 절반 9px)이 43px에 오도록 bottom:34px */
@media (max-width:1024px){
  .steps--skip{padding-bottom:0;padding-left:34px}
  .steps--skip::before{left:0;right:auto;top:42px;bottom:42px;width:22px;height:auto;border:2px solid var(--primary-light);border-right:0;border-radius:12px 0 0 12px}
  .steps--skip::after{left:13px;right:auto;bottom:34px;transform:none}
}

/* 도입 이후 유지보수 요약 카드 (deployment.php 전용) */
.mnt-card .tier{font-size:15px;font-weight:800;color:var(--primary-vivid)}
.mnt-card .rate{display:block;font-size:24px;font-weight:900;color:var(--navy);margin:14px 0 10px}
.mnt-card .rate em{font-size:13px;font-weight:700;color:var(--gray);font-style:normal;margin-left:4px}
.mnt-card p{font-size:13.5px;color:var(--gray);line-height:1.65}