/* ============================================================
   services.css — 서비스 상세 페이지 전용
   kida.css 의 :root 토큰(--blue, --container, --radius 등)을 재사용한다.
   본 사이트(kida.css/kida.js/home)에는 영향을 주지 않는다.
   ============================================================ */

.svc-body {
    background: var(--white);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

.svc-body a { color: inherit; text-decoration: none; }
.svc-main { display: block; }

.svc-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad);
}

/* ---------- 상단 내비 ---------- */
.svc-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.svc-nav__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 14px var(--pad);
    display: flex; align-items: center; gap: 24px;
}
.svc-nav__brand { display: inline-flex; align-items: center; }
.svc-nav__brand svg, .svc-nav__brand img { height: 22px; width: auto; }
.svc-nav__menu {
    display: flex; gap: 22px; margin-left: auto;
    font-size: .95rem; font-weight: 600; color: var(--muted);
}
.svc-nav__menu a:hover { color: var(--text); }
.svc-nav__cta {
    padding: 9px 18px; border-radius: 999px;
    background: var(--black); color: #fff;
    font-size: .9rem; font-weight: 700;
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.svc-nav__cta:hover { transform: translateY(-1px); background: var(--blue); }
@media (max-width: 860px) {
    .svc-nav__menu { display: none; }
}

/* ---------- 브레드크럼 ---------- */
.svc-crumb {
    max-width: var(--container); margin-inline: auto;
    padding: 20px var(--pad) 0;
    font-size: .85rem; color: var(--muted);
}
.svc-crumb a:hover { color: var(--blue); text-decoration: underline; }
.svc-crumb span[aria-current] { color: var(--text); font-weight: 600; }

/* ---------- 히어로 ---------- */
.svc-hero {
    max-width: var(--container); margin-inline: auto;
    padding: 40px var(--pad) clamp(48px, 7vw, 88px);
}
.svc-hero__eyebrow {
    display: inline-block; margin-bottom: 18px;
    padding: 6px 14px; border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue); font-size: .82rem; font-weight: 700;
    letter-spacing: .01em;
}
.svc-hero__title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.12; letter-spacing: -.02em; font-weight: 800;
    max-width: 20ch;
}
.svc-hero__lead {
    margin-top: 22px; max-width: 60ch;
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    line-height: 1.7; color: #3a3a42; font-weight: 500;
}
.svc-hero__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.svc-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: .98rem;
    transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.svc-btn--primary { background: var(--black); color: #fff; }
.svc-btn--primary:hover { transform: translateY(-2px); background: var(--blue); }
.svc-btn--ghost { border: 1px solid var(--line); color: var(--text); }
.svc-btn--ghost:hover { border-color: var(--text); transform: translateY(-2px); }

/* ---------- 본문 섹션 ---------- */
.svc-sec {
    max-width: var(--container); margin-inline: auto;
    padding: clamp(44px, 6vw, 72px) var(--pad);
    border-top: 1px solid var(--line);
}
.svc-sec__kicker {
    font-size: .82rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.svc-sec__title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.25; letter-spacing: -.02em; font-weight: 800;
    max-width: 24ch;
}
.svc-sec__body {
    margin-top: 18px; max-width: 68ch;
    font-size: 1.075rem; line-height: 1.85; color: #33333b; font-weight: 450;
}
.svc-sec__body p + p { margin-top: 16px; }
.svc-sec__body strong { font-weight: 700; color: var(--text); }

/* ---------- 카드 그리드 ---------- */
.svc-grid {
    margin-top: 34px; display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.svc-card {
    padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.svc-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
    box-shadow: 0 18px 40px -24px rgba(47, 107, 255, .5);
}
.svc-card h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 10px; }
.svc-card p { font-size: .98rem; line-height: 1.7; color: var(--muted); }

/* 체크 리스트 */
.svc-list { margin-top: 26px; display: grid; gap: 12px; max-width: 70ch; }
.svc-list li {
    position: relative; padding-left: 30px;
    font-size: 1.05rem; line-height: 1.65; color: #33333b;
}
.svc-list li::before {
    content: ""; position: absolute; left: 0; top: .5em;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--blue);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- FAQ ---------- */
.svc-faq { margin-top: 30px; max-width: 80ch; }
.svc-faq details {
    border-bottom: 1px solid var(--line); padding: 8px 0;
}
.svc-faq summary {
    cursor: pointer; list-style: none;
    padding: 16px 40px 16px 0; position: relative;
    font-size: 1.1rem; font-weight: 700; color: var(--text);
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%); font-size: 1.5rem; font-weight: 400;
    color: var(--blue); transition: transform .2s var(--ease);
}
.svc-faq details[open] summary::after { content: "\2212"; }
.svc-faq details > div {
    padding: 0 40px 18px 0; font-size: 1.03rem; line-height: 1.8; color: #44444c;
}

/* ---------- CTA ---------- */
.svc-cta {
    margin: clamp(44px, 6vw, 80px) auto 0;
    max-width: var(--container);
}
.svc-cta__box {
    margin-inline: var(--pad); padding: clamp(40px, 6vw, 72px);
    border-radius: calc(var(--radius) + 6px);
    background: linear-gradient(135deg, #0b0b12, #14142a 55%, #1c1550);
    color: #fff; text-align: center;
}
.svc-cta__box h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 800;
    letter-spacing: -.02em; line-height: 1.25;
}
.svc-cta__box p { margin-top: 14px; color: rgba(255,255,255,.72); font-size: 1.08rem; }
.svc-cta__actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.svc-cta .svc-btn--primary { background: #fff; color: var(--black); }
.svc-cta .svc-btn--primary:hover { background: var(--blue); color: #fff; }
.svc-cta .svc-btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.svc-cta .svc-btn--ghost:hover { border-color: #fff; }

/* ---------- 하단 다른 서비스 링크 ---------- */
.svc-related { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- 푸터 ---------- */
.svc-footer { border-top: 1px solid var(--line); margin-top: clamp(48px, 7vw, 90px); }
.svc-footer__inner {
    max-width: var(--container); margin-inline: auto;
    padding: 50px var(--pad);
    display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.svc-footer__tag { font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin-bottom: 16px; }
.svc-footer__meta { font-style: normal; font-size: .95rem; line-height: 1.9; color: var(--muted); }
.svc-footer__meta a:hover { color: var(--blue); }
.svc-footer__menu { display: grid; gap: 10px; font-size: .95rem; font-weight: 600; color: var(--muted); align-content: start; }
.svc-footer__menu a:hover { color: var(--text); }
.svc-footer__bar {
    border-top: 1px solid var(--line);
    padding: 20px var(--pad); text-align: center;
    font-size: .85rem; color: var(--muted);
    max-width: var(--container); margin-inline: auto;
}