/* =========================================================
   서비스 품목 방법론(2026-10-07) — /services 목록 + /services/{app,web,system,ai}. theme-a.css 뒤에 붙는다.
   원칙: 한 섹션 한 메시지(제목 한 줄 + 리드 한 문장 + 그림 하나 또는 표 하나). 메인(home-a)과 같은 흰 바탕 리듬.
   ========================================================= */
.v-cat{--sub:#6b7080;--soft:#f5f6fa;--line:#e4e6ee}
.v-cat main{background:#fff}
.v-cat .sc{padding:96px 0;border-top:1px solid var(--line)}
.v-cat .sc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px 72px;align-items:center}
.v-cat .sc.alt .sc-grid .sc-fig{order:-1}
.v-cat .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--blue)}
.v-cat .sc h1,.v-cat .sc h2{margin:14px 0 18px;line-height:1.12;letter-spacing:-.03em;color:var(--ink);font-weight:800}
.v-cat .sc h2{font-size:clamp(30px,3.4vw,44px)}
.v-cat .sc h1 .r,.v-cat .sc h2 .r{display:inline;background:var(--blue2);color:var(--blue);padding:.04em .22em;border-radius:.22em}
.v-cat .sc .lead{margin:0;font-size:17px;line-height:1.75;color:#3b4050;max-width:540px}
.v-cat .sc-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.v-cat .sc-fig{margin:0;display:flex;justify-content:center;align-items:center}
.v-cat .sc-fig img{width:min(100%,520px);height:auto}
.v-cat .sc-one{max-width:760px}

/* 히어로 — 흰 바탕과 빛 */
.v-cat .sc-hero{border-top:0;padding:96px 0 64px;background:#fff radial-gradient(60% 70% at 72% 32%,#eef2ff 0,rgba(238,242,255,0) 70%)}
.v-cat .sc-hero h1{font-size:clamp(36px,4.6vw,62px)}
.v-cat .sc-hero .sc-fig img{width:min(100%,560px)}

/* 단계 — 다섯 칸 */
.v-cat .sc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;list-style:none;margin:40px 0 0;padding:0}
.v-cat .sc-steps > li{padding:22px 20px 20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.v-cat .sc-steps .n{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--blue)}
.v-cat .sc-steps .t{margin-top:8px;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.v-cat .sc-steps .d{margin-top:3px;font-size:13px;font-weight:700;color:var(--sub)}
.v-cat .sc-steps ul{margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line);list-style:none;font-size:13.5px;line-height:1.75;color:#4a5060}

/* 산출물 — 카드 */
.v-cat .sc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.v-cat .sc-card{padding:24px 22px;border-radius:18px;background:var(--soft)}
.v-cat .sc-card img{width:44px;height:44px;object-fit:contain}
.v-cat .sc-card b{display:block;margin-top:14px;font-size:16px;font-weight:800;letter-spacing:-.02em}
.v-cat .sc-card span{display:block;margin-top:6px;font-size:13.5px;line-height:1.65;color:#4a5060}

/* 점검 항목 · 비용 요인 — 줄 */
.v-cat .sc-rows{margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);max-width:860px}
.v-cat .sc-rows li{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6}
.v-cat .sc-rows b{font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.v-cat .sc-rows span{color:#4a5060}

/* 자주 묻는 질문 */
.v-cat .sc-faq{margin-top:28px;border-top:1px solid var(--line);max-width:860px}
.v-cat .sc-faq details{border-bottom:1px solid var(--line)}
.v-cat .sc-faq summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-size:16px;font-weight:700;cursor:pointer;list-style:none}
.v-cat .sc-faq summary::-webkit-details-marker{display:none}
.v-cat .sc-faq summary::after{content:"+";flex:none;font-size:22px;font-weight:400;line-height:1;color:var(--blue)}
.v-cat .sc-faq details[open] summary::after{content:"\2212"}
.v-cat .sc-faq p{margin:0 0 18px;font-size:15px;line-height:1.75;color:#3b4050;max-width:720px}

/* 문의 — 남색 띠 */
/* 문의 띠 — 밝은 바탕(2026-10-07: 남색 띠가 아래 남색 푸터와 겹쳐 보여서) */
.v-cat .sc-cta{padding:96px 0;background:var(--soft);color:var(--ink);text-align:center}
.v-cat .sc-cta h2 .r{background:var(--yellow);color:var(--navy)}
.v-cat .sc-cta .lead{margin:0 auto}
.v-cat .sc-cta .sc-act{justify-content:center}
.v-cat .sc-cta .btn-ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.v-cat .sc-cta .btn-ghost:hover{background:var(--navy);color:#fff}

@media (max-width:1024px){
  .v-cat .sc-steps{grid-template-columns:repeat(3,1fr)}
  .v-cat .sc-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .v-cat .sc{padding:64px 0}
  .v-cat .sc-hero{padding:48px 0 40px}
  .v-cat .sc-grid{grid-template-columns:1fr;gap:28px}
  .v-cat .sc.alt .sc-grid .sc-fig{order:0}
  .v-cat .sc-fig img{width:min(100%,360px)}
  .v-cat .sc-steps{grid-template-columns:1fr;gap:10px}
  .v-cat .sc-cards{grid-template-columns:1fr;gap:10px}
  .v-cat .sc-rows li{grid-template-columns:1fr;gap:4px}
  .v-cat .sc .lead{font-size:16px}
}