/* services.css — /services/ 허브. 팔레트: #FFFFFF/#F7F9FB/#16202A/#1F6FEB, Pretendard, 3열 인덱스 그리드 */
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
:root{ --bg:#FFFFFF; --surface:#F7F9FB; --text:#16202A; --accent:#1F6FEB; }
body{ background:var(--bg); color:var(--text); font-family:'Pretendard',-apple-system,'Malgun Gothic',sans-serif; line-height:1.7; }
h1,h2{ font-family:'Pretendard',sans-serif; letter-spacing:-.02em; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--text); color:#fff; padding:.6em 1em; z-index:100; }
.skip-link:focus{ left:1rem; top:1rem; }

.site-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e7ebf0; padding:16px 20px; }
.header-inner{ max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark{ font-weight:700; font-size:1.05rem; }
.main-nav{ display:flex; gap:18px; flex-wrap:wrap; font-size:.9rem; }
.main-nav a{ color:#4b5a6b; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--accent); }
.cta-tel{ background:var(--accent); color:#fff; padding:9px 18px; border-radius:9999px; font-weight:700; font-size:.88rem; white-space:nowrap; }

.hub-hero{ background:var(--surface); padding:56px 20px 48px; text-align:center; }
.hub-hero h1{ font-size:clamp(1.7rem,4vw,2.4rem); }
.hub-hero p{ margin-top:14px; color:#3d4e60; max-width:640px; margin-left:auto; margin-right:auto; }

main{ max-width:1160px; margin:0 auto; padding:48px 20px 20px; }
.group-title{ font-size:1.05rem; font-weight:700; margin:36px 0 18px; padding-bottom:8px; border-bottom:1px solid #e7ebf0; }
.card-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.svc-card{ display:block; width:100%; background:var(--surface); border:1px solid #e7ebf0; border-radius:12px; overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s; }
.svc-card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(22,32,42,.1); }
.svc-card-img{ overflow:hidden; }
.svc-card-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s; }
.svc-card:hover .svc-card-img img{ transform:scale(1.06); }
.svc-card-body{ padding:20px 22px 22px; }
.svc-card-tag{ font-size:.68rem; font-weight:700; letter-spacing:.08em; color:var(--accent); }
.svc-card h3{ font-size:1.05rem; margin-top:8px; margin-bottom:6px; line-height:1.3; }
.svc-card p{ font-size:.85rem; color:#4b5a6b; line-height:1.5; }
.svc-card-more{ margin-top:14px; display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:700; color:var(--text); }
.svc-card-more svg{ width:13px; height:13px; }

.cta-block{ margin:48px 0 8px; padding:28px 20px; background:var(--text); color:#fff; border-radius:16px; text-align:center; }
.cta-block p{ color:rgba(255,255,255,.75); margin-top:8px; }
.cta-block .cta-actions{ margin-top:18px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-block .cta-tel, .cta-block .cta-sms{ display:inline-block; padding:11px 22px; border-radius:9999px; font-weight:700; font-size:.9rem; }
.cta-block .cta-tel{ background:var(--accent); color:#fff; }
.cta-block .cta-sms{ border:1px solid rgba(255,255,255,.4); color:#fff; }

footer.site-footer{ margin-top:56px; background:#0F2A44; color:rgba(255,255,255,.82); padding:36px 20px; font-size:.85rem; }
.footer-inner{ max-width:1160px; margin:0 auto; }
.footer-links{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:18px; }
.footer-links a{ color:rgba(255,255,255,.72); }
.footer-links a:hover{ color:#fff; }
.biz-info p{ margin:2px 0; color:rgba(255,255,255,.62); }
.footer-bottom{ margin-top:14px; color:rgba(255,255,255,.4); font-size:.78rem; }

@media (max-width:860px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .card-grid{ grid-template-columns:1fr; } }