/* 서비스 소개 페이지 · 2026-11-04 (레퍼런스: notsun 서비스 · 대표 지정 4종) */
:root{--side:clamp(20px,3.5vw,84px)}
.sv-page{background:#fff;color:#080808}
.sv-main{display:block}
.sv-wrap{width:calc(100% - var(--side)*2);max-width:none;margin:0 auto}
.sv-kicker{display:block;margin-bottom:18px;font-size:12px;font-weight:700;letter-spacing:.16em;color:#9a9a9a}
.sv-no{font-size:clamp(20px,1.8vw,30px);font-weight:800;letter-spacing:-.03em;color:#b4b4b4;line-height:1.2}
.sv-note{margin:22px 0 0;font-size:14px;line-height:1.6;color:#8a8a8a}
.sv-sec-head h2,.sv-sub-head h2{margin:0;font-size:clamp(32px,3.6vw,64px);line-height:1.15;letter-spacing:-.055em;font-weight:800}

/* 1 · 히어로: 무엇이 다를까요 */
.sv-hero{padding:clamp(170px,14vw,230px) 0 clamp(90px,9vw,150px)}
.sv-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,120px);align-items:start}
.sv-hero-head{position:sticky;top:150px}
.sv-hero h1{margin:0;font-size:clamp(40px,4.4vw,80px);line-height:1.14;letter-spacing:-.06em;font-weight:800}
.sv-hero h1 span{color:#9a9a9a}
.sv-diff{list-style:none;margin:0;padding:0}
.sv-diff li{display:grid;grid-template-columns:clamp(48px,4.4vw,76px) minmax(0,1fr);gap:8px;padding:clamp(30px,2.8vw,48px) 0;border-bottom:1px solid #e6e6e6}
.sv-diff li:first-child{padding-top:0}
.sv-diff h2{margin:0 0 12px;font-size:clamp(22px,2vw,34px);line-height:1.25;letter-spacing:-.045em;font-weight:800}
.sv-diff p{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.7;color:#666;word-break:keep-all}

/* 2 · 서비스 */
.sv-services{padding:clamp(80px,8vw,140px) 0;border-top:1px solid #ececec}
.sv-zig{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,110px);align-items:center;margin:clamp(64px,7vw,130px) 0 0}
.sv-zig.sv-r{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.sv-zig.sv-r .sv-zig-media{order:2;justify-self:end;width:min(100%,560px)}
.sv-zig-media{position:relative;display:block;overflow:hidden;background:#0b0b0b}
.sv-wide .sv-zig-media{aspect-ratio:16/10}
.sv-tall .sv-zig-media{aspect-ratio:4/5}
.sv-zig-media img,.sv-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.sv-hover{opacity:0}
.sv-zig-media:hover .sv-hover,.sv-card:hover .sv-hover,.sv-card:focus-visible .sv-hover{opacity:1}
.sv-zig-media:hover img,.sv-card:hover .sv-card-media img{transform:scale(1.02)}
.sv-num{display:block;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:18px;color:#8a8a8a}
.sv-eng{margin:6px 0 4px;font-size:clamp(38px,4.2vw,76px);line-height:1;letter-spacing:-.05em;font-weight:800}
.sv-zig h3{margin:0 0 18px;font-size:clamp(18px,1.5vw,24px);letter-spacing:-.03em;color:#444}
.sv-desc{margin:0;font-size:clamp(16px,1.2vw,19px);line-height:1.7;color:#555;word-break:keep-all}
.sv-pills{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sv-pills li{padding:7px 13px;border:1px solid #dcdcdc;border-radius:999px;font-size:13px;color:#555}
.sv-sub-head{margin:clamp(100px,10vw,180px) 0 clamp(32px,3vw,52px)}
.sv-sub-head h2{font-size:clamp(26px,2.4vw,40px)}
.sv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(16px,1.8vw,32px)}
.sv-card{display:block;color:#080808;text-decoration:none}
.sv-card-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#0b0b0b;margin-bottom:18px}
.sv-card .sv-num{font-size:15px}
.sv-card-eng{display:block;margin:4px 0 2px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a}
.sv-card strong{display:block;font-size:clamp(20px,1.6vw,26px);letter-spacing:-.04em}
.sv-card-desc{display:block;margin-top:8px;font-size:15px;line-height:1.65;color:#666;word-break:keep-all}

/* 3 · 인증 서류 */
.sv-cert{padding:0 0 clamp(80px,8vw,140px)}
.sv-cert-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,4vw,80px);align-items:center;padding:clamp(40px,5.4vw,104px);border-radius:clamp(20px,2.2vw,36px);background:#f4f4f5}
.sv-cert h2{margin:0 0 28px;font-size:clamp(30px,3.2vw,58px);line-height:1.25;letter-spacing:-.055em;font-weight:800}
.sv-cert h2 em{font-style:normal;background:linear-gradient(transparent 60%,#dedede 60%)}
.sv-cert-copy>p{margin:0;font-size:clamp(15px,1.2vw,19px);line-height:1.75;color:#666;word-break:keep-all}
.sv-cert-copy>p.sv-cert-note{margin-top:clamp(28px,3vw,52px);font-size:clamp(14px,1.05vw,17px);color:#8a8a8a}
.sv-cert-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,22px)}
.sv-cert-docs figure{margin:0}
.sv-cert-docs img{display:block;width:100%;height:auto;background:#fff;border:1px solid #e3e3e3;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.sv-cert-docs figcaption{margin-top:10px;font-size:12px;line-height:1.4;color:#8a8a8a;text-align:center;word-break:keep-all}

/* 4 · 고객사 로고 */
.sv-clients{padding:clamp(60px,6vw,110px) 0 clamp(90px,9vw,160px);text-align:center}
.sv-clients-sub{margin:0 0 10px;font-size:15px;color:#8a8a8a}
.sv-clients h2{margin:0 0 clamp(40px,4.4vw,80px);font-size:clamp(34px,4vw,68px);letter-spacing:-.04em;font-weight:800}
.sv-logo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,.9vw,16px)}
.sv-logo-grid li{display:flex;align-items:center;justify-content:center;aspect-ratio:2.2/1;border:1px solid #e8e8e8;border-radius:14px;background:#fff;overflow:hidden}
.sv-logo-grid .logo-mark{transform:scale(.86)}
.sv-logo-grid .logo-mark:before{background:#9a9a9a}

/* 5 · 진행 과정 */
.sv-process{padding:clamp(90px,9vw,160px) 0;background:#f4f4f5}
.sv-steps{list-style:none;margin:clamp(40px,4vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid #080808}
.sv-steps li{padding:22px 18px 0 0}
.sv-steps li+li{padding-left:18px;border-left:1px solid #dcdcdc}
.sv-steps .sv-no{font-size:15px}
.sv-steps strong{display:block;margin:14px 0 8px;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.04em}
.sv-steps p{margin:0;font-size:14px;line-height:1.6;color:#666;word-break:keep-all}

/* 6 · FAQ */
.sv-faq{padding:clamp(90px,9vw,160px) 0}
.sv-faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(36px,5vw,110px);align-items:start}
.sv-faq h2{margin:0;font-size:clamp(32px,3.4vw,60px);line-height:1.15;letter-spacing:-.055em;font-weight:800}
.sv-faq-list{border-top:1px solid #080808}
.sv-faq-list details{border-bottom:1px solid #e3e3e3}
.sv-faq-list summary{position:relative;list-style:none;cursor:pointer;padding:24px 48px 24px 0;font-size:clamp(17px,1.4vw,22px);font-weight:700;letter-spacing:-.035em}
.sv-faq-list summary::-webkit-details-marker{display:none}
.sv-faq-list summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;transition:transform .25s}
.sv-faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.sv-faq-list details p{margin:0 0 24px;font-size:16px;line-height:1.75;color:#555;word-break:keep-all}

/* 7 · 문의: 검정 큰 박스 · 아주 느리게 번지는 빛 */
.sv-cta{padding:0 0 clamp(80px,8vw,140px)}
.sv-cta-box{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,2.6vw,44px);min-height:clamp(520px,46vw,780px);padding:clamp(48px,6vw,110px) 24px;border-radius:clamp(22px,2.4vw,40px);background:#080808;color:#fff;text-align:center}
.sv-cta-glow{position:absolute;inset:-35%;z-index:-1;background:radial-gradient(closest-side at 32% 68%,rgba(255,255,255,.16),transparent 70%),radial-gradient(closest-side at 72% 30%,rgba(170,172,180,.14),transparent 72%),radial-gradient(closest-side at 50% 50%,rgba(255,255,255,.05),transparent 80%);animation:svGlow 26s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes svGlow{0%{transform:translate3d(-6%,4%,0) scale(.82);opacity:.55}50%{transform:translate3d(4%,-3%,0) scale(1.06);opacity:1}100%{transform:translate3d(7%,5%,0) scale(1.18);opacity:.75}}
.sv-cta-logo{display:block;width:clamp(170px,15vw,260px);height:auto}
.sv-cta h2{margin:0;font-size:clamp(32px,4vw,72px);line-height:1.2;letter-spacing:-.06em;font-weight:800}
.sv-cta h2 span{display:inline-block;margin-bottom:.25em;font-size:.56em;font-weight:600;letter-spacing:-.04em;color:#a3a3a3}
.sv-cta-btn{display:inline-flex;align-items:center;justify-content:center;min-width:220px;min-height:68px;padding:18px 48px;border-radius:999px;background:#fff;color:#080808!important;font-size:clamp(17px,1.4vw,21px);font-weight:800;letter-spacing:-.03em;text-decoration:none;transition:transform .2s,background .2s}
.sv-cta-btn:hover,.sv-cta-btn:focus-visible{transform:translateY(-2px);background:#e9e9e9}
@media(prefers-reduced-motion:reduce){.sv-cta-glow{animation:none}}

@media(max-width:1024px){
  .sv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-cert-box{grid-template-columns:1fr}
  .sv-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .sv-steps li:nth-child(4){padding-left:0;border-left:0}
}
@media(max-width:760px){
  .sv-hero{padding-top:120px}
  .sv-hero-grid,.sv-zig,.sv-zig.sv-r,.sv-faq-grid{grid-template-columns:1fr}
  .sv-hero-head{position:static}
  .sv-zig.sv-r .sv-zig-media{order:0;width:100%}
  .sv-cards{grid-template-columns:1fr}
  .sv-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sv-logo-grid .logo-mark{transform:scale(.6)}
  .sv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-steps li:nth-child(odd){padding-left:0;border-left:0}
  .sv-steps li:nth-child(4){padding-left:18px;border-left:1px solid #dcdcdc}
  .sv-cta-box{min-height:460px}
}
/* 11-04 · 03~08 카드: 사진 대신 선 아이콘(추후 작업 사진으로 교체) */
.sv-card .sv-icon{display:flex;align-items:center;justify-content:center;background:#f4f4f5;color:#1a1a1a;transition:background .3s}
.sv-card .sv-icon svg{width:clamp(96px,9vw,150px);height:auto;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sv-card:hover .sv-icon{background:#ececee}
.sv-card:hover .sv-icon svg{transform:translateY(-4px)}
.sv-card h3{margin:0;font-size:clamp(20px,1.6vw,26px);letter-spacing:-.04em}
.sv-card .sv-card-desc{margin:8px 0 0}
/* 11-04 · 데스크톱 눈 점검 수정 */
.sv-zig .sv-eng{color:#080808}
.sv-card .sv-card-media{aspect-ratio:16/10}
.sv-card .sv-icon svg{width:clamp(130px,12vw,200px)}
.sv-desc,.sv-card-desc,.sv-diff p,.sv-cert-copy>p,.sv-steps p{text-wrap:pretty}
@media(min-width:1025px){.sv-cert-box{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}}
.sv-cert h2 em{white-space:nowrap}
.sv-cta-glow{background:radial-gradient(closest-side at 32% 68%,rgba(255,255,255,.2),transparent 70%),radial-gradient(closest-side at 72% 30%,rgba(175,178,188,.18),transparent 72%),radial-gradient(closest-side at 50% 50%,rgba(255,255,255,.06),transparent 80%)}
/* ===== 11-04 3차 ===== */
/* 글줄 간격: 한글 큰 제목이 붙어 보이지 않게 */
.sv-hero h1{line-height:1.24}
.sv-sec-head h2,.sv-sub-head h2{line-height:1.26}
.sv-diff h2{line-height:1.35}
.sv-diff p,.sv-desc,.sv-card-desc,.sv-cert-copy>p{line-height:1.8}
.sv-cert h2{line-height:1.34}
.sv-cta h2{line-height:1.28}
.sv-steps p{line-height:1.7}
/* 주력 2개: 나란히 두 칸 (16:9) — 3안 중 B안 */
.sv-mains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,48px);margin-top:clamp(48px,5vw,88px)}
.sv-main-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0b0b0b}
.sv-main-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.sv-main-media:hover .sv-hover{opacity:1}
.sv-main-media:hover img{transform:scale(1.02)}
.sv-main-copy{padding-top:clamp(22px,2.2vw,36px)}
.sv-main-copy .sv-eng{margin:0;font-size:clamp(36px,3.6vw,64px);line-height:1.05;letter-spacing:-.05em;font-weight:800;color:#080808}
.sv-main-copy h3{margin:10px 0 16px;font-size:clamp(18px,1.4vw,22px);letter-spacing:-.03em;color:#444}
.sv-main-copy .sv-pills{margin:20px 0 24px}
.sv-sub-head{margin-top:clamp(110px,10vw,190px)}
/* 흰 섹션 위아래 여유 */
.sv-services{padding:clamp(110px,11vw,200px) 0}
.sv-clients{padding:clamp(110px,10vw,190px) 0}
.sv-faq{padding:clamp(120px,11vw,200px) 0}
.sv-cert{padding-bottom:clamp(110px,10vw,180px)}
/* FAQ 제목 크게, 서브 카피 아래 */
.sv-faq h2{font-size:clamp(64px,8vw,150px)!important;line-height:1!important;letter-spacing:-.05em}
.sv-faq-sub{margin:18px 0 0;font-size:clamp(18px,1.6vw,26px);font-weight:700;letter-spacing:-.04em;color:#8a8a8a}
@media(max-width:900px){.sv-mains{grid-template-columns:1fr}}
/* 11-04 반응형: 모바일 아이콘 카드 2열로 압축 */
@media(max-width:600px){
  .sv-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 12px!important}
  .sv-card .sv-card-media{aspect-ratio:1/1!important;margin-bottom:12px}
  .sv-card .sv-icon svg{width:62%!important}
  .sv-card-eng{font-size:10px!important}
  .sv-card h3{font-size:17px!important}
  .sv-card .sv-card-desc{font-size:13px!important;line-height:1.6!important}
}
/* 11-04: 등장 애니메이션 (JS가 .rv를 붙일 때만 동작) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease var(--rv-d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--rv-d,0s)}
.rv.in{opacity:1;transform:none}
@media(max-width:600px){.sv-card-eng{font-size:11px!important;letter-spacing:.06em!important}}

/* 11-05: 메인 카드 제목을 한글로, 칩 삭제 후 간격 */
.sv-main-copy .sv-main-title{margin:0 0 clamp(14px,1.4vw,22px)!important;font-size:clamp(32px,3.2vw,56px)!important;line-height:1.15;letter-spacing:-.06em;font-weight:800;color:#080808!important}
.sv-main-copy .sv-desc{margin:0 0 clamp(26px,2.6vw,40px)!important}
/* 함께 맡기는 일 카드: 영문 · 제목 · 설명 사이 간격 */
.sv-card .sv-card-eng{margin:0 0 8px!important}
.sv-card h3{margin:0 0 12px!important;line-height:1.3}
.sv-card .sv-card-desc{margin:0!important}
.sv-card .sv-card-media{margin-bottom:clamp(18px,1.6vw,24px)!important}
@media(max-width:600px){.sv-card .sv-card-eng{margin-bottom:6px!important}.sv-card h3{margin-bottom:8px!important}}
@media(max-width:760px){.sv-main-copy .sv-desc br{display:none}}
/* 11-05 2차: 영문 큰 제목 복원 · 간격 */
.sv-main-copy{padding-top:clamp(26px,2.6vw,40px)!important}
.sv-main-copy .sv-eng{margin:0!important;font-size:clamp(36px,3.6vw,64px);line-height:1.02}
.sv-main-copy h3{margin:clamp(10px,1vw,14px) 0 clamp(18px,1.8vw,26px)!important;font-size:clamp(18px,1.4vw,22px)!important;font-weight:700;letter-spacing:-.03em;color:#444!important}
.sv-main-copy .sv-desc{margin:0 0 clamp(28px,2.8vw,40px)!important}

/* 11-05 모바일 점검: 인증 박스 한 줄 배치 · 고객 로고 마지막 줄 가운데 */
@media(max-width:1024px){.sv-cert-box{grid-template-columns:1fr!important}.sv-cert-docs{max-width:520px}}
@media(max-width:600px){.sv-cert-box{padding:36px 22px!important;gap:32px!important}.sv-cert h2{font-size:clamp(28px,8vw,34px)!important}.sv-cert-docs figcaption{font-size:12px}}
/* 11-05 모바일 2차: 좁은 폰(≤380)에서 로고가 칸 밖으로 잘리지 않게 · 인증서 이름 줄바꿈 */
@media(max-width:380px){.sv-logo-grid .logo-mark{transform:scale(.5)}}
@media(max-width:600px){.sv-cert-docs figcaption{overflow-wrap:anywhere;word-break:normal;line-break:anywhere}}