body{ background:#fff; }

  /* ── 헤드라인 로테이션 (최종 CTA) ── */
  /* 그리드로 겹쳐 쌓으면 컨테이너 높이가 가장 긴 문구에 맞춰져 글자가 잘리지 않는다 */
  .fx-rot{ display:grid; }
  .fx-rot-line{
    grid-area:1 / 1;
    opacity:0; transform:translateY(14px);
    transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1);
  }
  .fx-rot-line.on{ opacity:1; transform:none; }
  @media(prefers-reduced-motion:reduce){
    .fx-rot-line{ transition:none; }
  }


/* ══════════════════════════════════════════════════════════════════════
   sv-1 — valid.pbbz.co.kr/about-valid 골격 1:1 클론
   순서: 서브히어로(앵커 필) → 인트로 밴드 → 실패 스토리 9
         → 전환 다크 밴드 → Definition + STEP 01~03 → 서비스 9종
         → 4주 프로세스 체크리스트 → 사례 수치 다크 밴드
         → 리뷰 8(별점) → 2단 CTA → 푸터
   카피·수치·비주얼은 전부 박수칠때퇴근 것으로 교체
   프리픽스 규칙: 모든 커스텀 클래스는 .s1-
   ══════════════════════════════════════════════════════════════════════ */
body{ background:#fff; padding-top:76px; }
svg{ display:block; }
button{ font-family:inherit; }
/* ── 공통 유틸 ───────────────────────────────────────────────────── */
.s1-wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
.s1-wrapw{ max-width:1420px; margin:0 auto; padding:0 32px; }
.s1-eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:.24em; color:var(--blue); text-transform:uppercase; }
.s1-sec-dark .s1-eyebrow{ color:var(--blue-l); }
.s1-em{ color:var(--blue); }
.s1-sec-dark .s1-em{ color:var(--blue-l); }
/* ── 1. 서브 히어로 ─────────────────────────────────────────────── */
.s1-hero{ position:relative; overflow:hidden; }
.s1-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 380px at 84% -8%, rgba(46,111,242,.14), transparent 66%),
    radial-gradient(560px 320px at 8% 108%, rgba(77,162,255,.10), transparent 70%);
}
.s1-hero .in{ position:relative; }
.s1-hero-pill{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:.2em; color:var(--blue-d); background:var(--tint); border:1px solid var(--tint-b); border-radius:999px; padding:8px 18px; }
.s1-tabs{ margin:34px auto 0; display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.s1-tab{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:500; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 20px;
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease);
}
.s1-tab:hover{ color:var(--blue-d); border-color:var(--tint-b); transform:translateY(-2px); }
.s1-tab .n{ font-size:11.5px; font-weight:600; color:var(--g500); letter-spacing:.08em; }
.s1-tab:hover .n{ color:var(--blue); }
/* 히어로 하단 공정 스트립(11단계 중 6단계 제거) */
.s1-strip{ margin:52px auto 0; max-width:940px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 26px 22px; }
.s1-strip-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.s1-strip-top b{ font-size:15px; font-weight:600; color:var(--ink); }
.s1-strip-top span{ font-size:13px; color:var(--g500); }
.s1-strip svg{ width:100%; height:auto; margin-top:16px; }
/* ── 2. 인트로 밴드 ─────────────────────────────────────────────── */
.s1-intro{ background:#fff; padding:104px 0 8px; text-align:center; }
.s1-intro q{ display:block; max-width:900px; margin:0 auto; font-size:clamp(24px,3vw,38px); font-weight:600; line-height:1.5; letter-spacing:-.03em; color:var(--ink); quotes:none; }
.s1-intro q .s1-em{ font-weight:700; }
.s1-intro p{ margin:22px auto 0; max-width:640px; font-size:16.5px; line-height:1.75; color:var(--g700); }
.s1-intro .s1-rule{ width:1px; height:56px; margin:34px auto 0; background:linear-gradient(180deg,var(--tint-b),transparent); }
/* ── 3. 실패 스토리 9 ───────────────────────────────────────────── */
.s1-fail{ padding:96px 0 116px; background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.s1-fail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.s1-fcard{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:28px 26px 26px; overflow:hidden;
  transition:transform .55s var(--ease), border-color .35s var(--ease), box-shadow .55s var(--ease);
}
.s1-fcard::after{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-l)); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.s1-fcard:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 18px 40px -26px rgba(10,28,62,.35); }
.s1-fcard:hover::after{ transform:scaleX(1); }
.s1-fcard .no{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--g500); }
.s1-fcard:hover .no{ color:var(--blue); }
.s1-fcard h3{ margin-top:14px; font-size:19.5px; font-weight:600; letter-spacing:-.025em; line-height:1.42; color:var(--ink); }
.s1-fcard p{ margin-top:11px; font-size:15px; line-height:1.72; color:var(--g700); }
.s1-fcard .tag{ display:inline-block; margin-top:18px; font-size:12.5px; font-weight:500; color:var(--g500); background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:6px 13px; }
.s1-fcard:hover .tag{ color:var(--blue-d); background:var(--tint); border-color:var(--tint-b); }
.s1-fail-note{ margin:36px auto 0; max-width:760px; text-align:center; font-size:15.5px; line-height:1.75; color:var(--g500); }
.s1-fail-note b{ font-weight:600; color:var(--g700); }
/* ── 4. 전환 다크 밴드 ──────────────────────────────────────────── */
.s1-turn{ position:relative; background:var(--navy); overflow:hidden; padding:120px 0; text-align:center; }
.s1-turn::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(700px 420px at 20% 0%, rgba(77,162,255,.20), transparent 68%),
    radial-gradient(620px 380px at 88% 110%, rgba(46,111,242,.16), transparent 70%);
}
.s1-turn .in{ position:relative; max-width:940px; margin:0 auto; padding:0 24px; }
.s1-turn h2{ margin-top:20px; font-size:clamp(34px,3.9vw,51px); font-weight:700; letter-spacing:-.03em; line-height:1.34; color:#fff; }
.s1-turn h2 .s1-em{ color:var(--blue-l); }
.s1-turn p{ margin:22px auto 0; max-width:620px; font-size:17px; line-height:1.78; color:#B8C5D9; }
.s1-turn-row{ margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.s1-turn-item{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:22px 20px; text-align:left; transition:border-color .35s var(--ease), background .35s var(--ease); }
.s1-turn-item:hover{ background:rgba(255,255,255,.08); border-color:rgba(77,162,255,.42); }
.s1-turn-item b{ display:block; font-size:15.5px; font-weight:600; color:#fff; }
.s1-turn-item span{ display:block; margin-top:9px; font-size:14px; line-height:1.68; color:var(--navy-tx); }
/* ── 5. Definition + STEP 01~03 ─────────────────────────────────── */
.s1-def{ padding:116px 0 0; }
.s1-steps{ margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.s1-step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:34px 30px 32px; overflow:hidden;
  transition:transform .55s var(--ease), border-color .35s var(--ease), box-shadow .55s var(--ease);
}
.s1-step:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 22px 46px -30px rgba(10,28,62,.4); }
.s1-step .sn{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:.18em; color:var(--blue); }
.s1-step .sn i{ width:26px; height:1px; background:var(--tint-b); display:block; }
.s1-step h3{ margin-top:16px; font-size:23px; font-weight:600; letter-spacing:-.03em; line-height:1.4; color:var(--ink); }
.s1-step p{ margin-top:14px; font-size:15.5px; line-height:1.78; color:var(--g700); }
.s1-step .sfig{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:22px; flex-wrap:wrap; }
.s1-step .sfig div{ min-width:88px; }
.s1-step .sfig b{ display:block; font-size:22px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.s1-step .sfig span{ display:block; margin-top:5px; font-size:12.5px; color:var(--g500); }
.s1-step .ghost{
  position:absolute; right:20px; top:14px; font-size:74px; font-weight:700; letter-spacing:-.05em;
  color:var(--bg2); line-height:1; pointer-events:none; transition:color .45s var(--ease);
}
.s1-step:hover .ghost{ color:var(--tint); }
/* ── 6. 서비스 9종 ──────────────────────────────────────────────── */
.s1-svc{ padding:116px 0; }
.s1-svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.s1-gcard{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 28px 26px;
  transition:transform .55s var(--ease), border-color .35s var(--ease), box-shadow .55s var(--ease);
}
.s1-gcard:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 22px 46px -30px rgba(10,28,62,.4); }
.s1-gcard .ic{ width:52px; height:52px; border-radius:14px; background:var(--tint); border:1px solid var(--tint-b); display:flex; align-items:center; justify-content:center; }
.s1-gcard h3{ margin-top:20px; font-size:21px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.s1-gcard .gdesc{ margin-top:10px; font-size:14.5px; line-height:1.7; color:var(--g500); }
.s1-items{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); list-style:none; }
.s1-items li{ padding:13px 0; border-bottom:1px dashed var(--line); }
.s1-items li:last-child{ border-bottom:0; padding-bottom:0; }
.s1-items b{ display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:600; color:var(--ink); }
.s1-items b .d{ width:6px; height:6px; border-radius:50%; background:var(--blue); flex:none; }
.s1-items span{ display:block; margin-top:6px; padding-left:15px; font-size:13.5px; line-height:1.65; color:var(--g500); }
/* ── 7. 4주 프로세스 체크리스트 ─────────────────────────────────── */
.s1-proc{ padding:116px 0; background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.s1-track{ position:relative; margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.s1-week{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 24px 24px;
  transition:transform .55s var(--ease), border-color .35s var(--ease), box-shadow .55s var(--ease);
}
.s1-week:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 20px 44px -30px rgba(10,28,62,.38); }
.s1-week .wk{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.s1-week .wk b{ font-size:12.5px; font-weight:600; letter-spacing:.18em; color:var(--blue); }
.s1-week .wk .bar{ flex:1; height:3px; border-radius:2px; background:var(--line); overflow:hidden; }
.s1-week .wk .bar i{ display:block; height:100%; background:var(--blue); border-radius:2px; }
.s1-week h3{ margin-top:16px; font-size:19.5px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.s1-week .wsub{ margin-top:9px; font-size:13.5px; line-height:1.65; color:var(--g500); }
.s1-ckl{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); list-style:none; }
.s1-ckl li{ display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:14.5px; line-height:1.6; color:var(--g700); }
.s1-ckl li:first-child{ margin-top:0; }
.s1-ck{ flex:none; width:19px; height:19px; margin-top:1px; border-radius:6px; background:var(--tint); border:1px solid var(--tint-b); display:flex; align-items:center; justify-content:center; }
.s1-after{ margin-top:18px; background:var(--navy); border-radius:18px; padding:26px 30px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.s1-after .lb{ font-size:12.5px; font-weight:600; letter-spacing:.18em; color:var(--blue-l); }
.s1-after h3{ font-size:19px; font-weight:600; letter-spacing:-.03em; color:#fff; }
.s1-after ul{ display:flex; gap:10px; flex-wrap:wrap; list-style:none; margin-left:auto; }
.s1-after li{ font-size:13.5px; color:#C6D4E8; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:8px 15px; }
/* ── 8. 사례 수치 다크 밴드 ─────────────────────────────────────── */
.s1-proof{ position:relative; background:var(--navy); overflow:hidden; padding:116px 0; }
.s1-proof::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(760px 420px at 78% -6%, rgba(77,162,255,.20), transparent 66%),
    radial-gradient(560px 340px at 6% 104%, rgba(46,111,242,.15), transparent 70%);
}
.s1-proof .in{ position:relative; }
.s1-proof-head{ text-align:center; max-width:840px; margin:0 auto 56px; }
.s1-proof-head h2{ margin-top:20px; font-size:clamp(34px,3.9vw,51px); font-weight:700; letter-spacing:-.03em; line-height:1.34; color:#fff; }
.s1-proof-head p{ margin:18px auto 0; max-width:620px; font-size:16.5px; line-height:1.78; color:#B8C5D9; }
.s1-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.s1-stat{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:26px 22px; transition:border-color .35s var(--ease), background .35s var(--ease), transform .55s var(--ease); }
.s1-stat:hover{ background:rgba(255,255,255,.085); border-color:rgba(77,162,255,.42); transform:translateY(-5px); }
.s1-stat .lb{ font-size:13px; font-weight:500; color:var(--navy-tx); }
.s1-stat .vl{ margin-top:12px; font-size:clamp(26px,2.6vw,34px); font-weight:700; letter-spacing:-.035em; line-height:1.1; color:#fff; }
.s1-stat .vl em{ font-style:normal; color:var(--blue-l); }
.s1-stat .vl .u{ font-size:.56em; font-weight:600; margin-left:3px; color:#C6D4E8; }
.s1-stat .ds{ margin-top:10px; font-size:13px; line-height:1.6; color:#93A9C9; }
.s1-stat.wide{ grid-column:span 2; }
.s1-derive{ margin-top:34px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.s1-derive span{ font-size:14px; color:#C6D4E8; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:10px 18px; }
.s1-proof-cta{ margin-top:44px; display:flex; justify-content:center; }
/* ── 9. 리뷰 8 ──────────────────────────────────────────────────── */
.s1-rev{ padding:116px 0; }
.s1-rev-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.s1-rcard{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 26px 24px;
  transition:transform .55s var(--ease), border-color .35s var(--ease), box-shadow .55s var(--ease);
}
.s1-rcard:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 20px 44px -30px rgba(10,28,62,.36); }
.s1-stars{ position:relative; display:inline-block; font-size:15px; letter-spacing:2px; line-height:1; }
.s1-stars .b{ color:var(--line); }
.s1-stars .f{ position:absolute; left:0; top:0; color:#F5A623; overflow:hidden; white-space:nowrap; }
.s1-rcard h3{ margin-top:16px; font-size:17.5px; font-weight:600; letter-spacing:-.025em; line-height:1.5; color:var(--ink); }
.s1-rcard p{ margin-top:12px; font-size:14.5px; line-height:1.78; color:var(--g700); }
.s1-rmeta{ margin-top:auto; padding-top:20px; display:flex; align-items:center; gap:11px; }
.s1-rmeta .av{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:#fff; flex:none; }
.s1-rmeta b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.s1-rmeta span{ display:block; margin-top:3px; font-size:12.5px; color:var(--g500); }
.s1-rmeta .sc{ margin-left:auto; font-size:14.5px; font-weight:600; color:var(--blue-d); }
/* ── 10. 2단 CTA ────────────────────────────────────────────────── */
.s1-cta{ padding:0 0 116px; }
.s1-cta-head{ text-align:center; max-width:860px; margin:0 auto 46px; }
.s1-cta-head h2{ margin-top:20px; font-size:clamp(34px,3.9vw,51px); font-weight:700; letter-spacing:-.03em; line-height:1.34; color:var(--ink); }
.s1-cta-head p{ margin:18px auto 0; max-width:600px; font-size:16.5px; line-height:1.78; color:var(--g700); }
.s1-duo{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.s1-duo-card{
  position:relative; overflow:hidden; border-radius:22px; padding:44px 40px 40px;
  border:1px solid var(--line); background:#fff;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .35s var(--ease);
}
.s1-duo-card:hover{ transform:translateY(-6px); box-shadow:0 26px 54px -32px rgba(10,28,62,.42); }
.s1-duo-card.dark{ border-color:transparent; background:linear-gradient(140deg,var(--navy) 0%,var(--navy2) 62%,#173257 100%); }
.s1-duo-card.dark::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 300px at 88% -10%, rgba(77,162,255,.26), transparent 68%);
}
.s1-duo-card .rel{ position:relative; }
.s1-duo-card .kk{ font-size:12.5px; font-weight:600; letter-spacing:.2em; color:var(--blue); }
.s1-duo-card.dark .kk{ color:var(--blue-l); }
.s1-duo-card h3{ margin-top:16px; font-size:clamp(24px,2.3vw,31px); font-weight:700; letter-spacing:-.03em; line-height:1.38; color:var(--ink); }
.s1-duo-card.dark h3{ color:#fff; }
.s1-duo-card p{ margin-top:14px; font-size:15.5px; line-height:1.78; color:var(--g700); }
.s1-duo-card.dark p{ color:#B8C5D9; }
.s1-duo-list{ margin-top:22px; list-style:none; }
.s1-duo-list li{ display:flex; gap:9px; align-items:flex-start; margin-top:10px; font-size:14.5px; line-height:1.62; color:var(--g500); }
.s1-duo-card.dark .s1-duo-list li{ color:#93A9C9; }
.s1-duo-list .c{ color:var(--blue); font-weight:600; flex:none; }
.s1-duo-card.dark .s1-duo-list .c{ color:var(--blue-l); }
.s1-duo-card .go{ margin-top:30px; }
.s1-sublinks{ margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.s1-sublink{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; color:var(--g700); border:1px solid var(--line); border-radius:999px; padding:11px 20px; background:#fff; transition:border-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease); }
.s1-sublink:hover{ color:var(--blue-d); border-color:var(--tint-b); transform:translateY(-2px); }
/* ── 접근성 · 포커스 ────────────────────────────────────────────── */
.s1-tab:focus-visible, .s1-sublink:focus-visible, .s1-hero .btn:focus-visible, .s1-duo-card .btn:focus-visible, .s1-proof-cta .btn:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px;
}
.s1-sec-dark .btn:focus-visible{ outline-color:var(--blue-l); }
.s1-fcard:focus-within{ border-color:var(--tint-b); }
/* 모션 최소화 환경: 호버 이동·트랜지션 제거 */
@media(prefers-reduced-motion:reduce){
  .s1-fcard,.s1-step,.s1-gcard,.s1-week,.s1-rcard,.s1-duo-card,.s1-stat,.s1-tab,.s1-sublink{ transition:none; }
  .s1-fcard:hover,.s1-step:hover,.s1-gcard:hover,.s1-week:hover,
  .s1-rcard:hover,.s1-duo-card:hover,.s1-stat:hover,.s1-tab:hover,.s1-sublink:hover{ transform:none; }
  .s1-fcard::after{ transition:none; }
}
/* ── 반응형 ─────────────────────────────────────────────────────── */
@media(max-width:1200px){
  .s1-stats{ grid-template-columns:repeat(3,1fr); }
  .s1-stat.wide{ grid-column:span 1; }
  .s1-rev-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:1000px){.s1-fail-grid{ grid-template-columns:repeat(2,1fr); }
.s1-steps{ grid-template-columns:1fr; }
.s1-svc-grid{ grid-template-columns:1fr; }
.s1-track{ grid-template-columns:repeat(2,1fr); }
.s1-turn-row{ grid-template-columns:1fr; }
.s1-duo{ grid-template-columns:1fr; }
.s1-after ul{ margin-left:0; width:100%; }
}
@media(max-width:820px){.s1-wrap, .s1-wrapw{ padding:0 20px; }
.s1-fail, .s1-svc, .s1-proc, .s1-proof, .s1-rev{ padding:84px 0; }
.s1-def{ padding-top:84px; }
.s1-turn{ padding:92px 0; }
.s1-stats{ grid-template-columns:repeat(2,1fr); }
.s1-duo-card{ padding:34px 28px 32px; }
}
@media(max-width:640px){.s1-fail-grid{ grid-template-columns:1fr; }
.s1-track{ grid-template-columns:1fr; }
.s1-rev-grid{ grid-template-columns:1fr; }
.s1-stats{ grid-template-columns:1fr; }
.s1-strip{ padding:20px 16px 18px; }
.s1-tab{ font-size:13.5px; padding:9px 15px; }
}




/* ==========================================================================
   S2 — flextudio.com/product/keyfeature 골격 클론
   서브히어로 → 사용사례 3 → 중간 CTA 밴드 → 기능 3종 좌우 교차 → 3열 요약
   모든 커스텀 클래스는 .s2- 프리픽스. site.css의 .card는 건드리지 않는다.
   ========================================================================== */

/* ── 서브 히어로 보강 ───────────────────────────────────────────── */
.s2-hero{ position:relative; overflow:hidden; }
.s2-hero::before{
  content:''; position:absolute; left:50%; top:-260px; width:1100px; height:620px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(46,111,242,.13), rgba(46,111,242,0) 68%);
}
.s2-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(10,28,62,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(10,28,62,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 72% 62% at 50% 34%, #000 12%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 34%, #000 12%, transparent 76%);
}
.s2-hero .in{ position:relative; z-index:1; }
.s2-hero-kick{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--blue-d);
  background:#fff; border:1px solid var(--tint-b); border-radius:999px; padding:9px 17px 9px 13px;
}
.s2-hero-kick .dt{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--blue); }
.s2-hero-kick .dt::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--blue-l);
  animation:s2pulse 2.1s var(--ease) infinite;
}
@keyframes s2pulse{0%{ transform:scale(1); opacity:.7; }
100%{ transform:scale(2.9); opacity:0; } }
@media(prefers-reduced-motion:reduce){.s2-hero-kick .dt::after{ animation:none; opacity:0; } }
.s2-hero-note{
  margin:30px auto 0; display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap;
  font-size:14.5px; font-weight:500; color:var(--g500);
}
.s2-hero-note span{ display:inline-flex; align-items:center; gap:7px; }
.s2-hero-note span::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--tint-b);
}
/* ── 사용사례 3 ────────────────────────────────────────────────── */
.s2-uc{ padding:118px 0 124px; background:#fff; }
.s2-uc-grid{
  margin-top:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.s2-uc-item{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transition:transform .55s var(--ease), border-color .35s var(--ease), box-shadow .55s var(--ease);
}
.s2-uc-item:hover{
  transform:translateY(-7px); border-color:var(--tint-b);
  box-shadow:0 24px 48px -30px rgba(10,28,62,.28);
}
.s2-uc-vis{
  position:relative; height:186px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#F3F7FF 0%,#EAF2FF 52%,#E2EDFF 100%);
  border-bottom:1px solid var(--line);
}
.s2-uc-item:nth-child(2) .s2-uc-vis{ background:linear-gradient(150deg,#F5F8FE 0%,#EDF2FB 55%,#E4EBF7 100%); }
.s2-uc-item:nth-child(3) .s2-uc-vis{ background:linear-gradient(150deg,#F2F7FF 0%,#E8F1FF 50%,#DFEAFC 100%); }
.s2-uc-vis svg{ width:100%; height:100%; display:block; }
.s2-uc-tag{
  position:absolute; left:18px; top:16px;
  font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--blue-d);
  background:rgba(255,255,255,.92); border:1px solid var(--tint-b); border-radius:999px; padding:6px 13px;
}
.s2-uc-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.s2-uc-body h3{
  font-size:21px; font-weight:600; letter-spacing:-.02em; line-height:1.45; color:var(--ink);
}
.s2-uc-body p{ margin-top:12px; font-size:15.5px; line-height:1.74; color:var(--g700); }
.s2-uc-meta{
  margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; gap:7px;
}
.s2-uc-meta i{
  font-style:normal; font-size:12.5px; font-weight:600; color:var(--g700);
  background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:6px 11px;
}
.s2-uc-meta i.on{ color:var(--blue-d); background:var(--tint); border-color:var(--tint-b); }
/* 사례 수치 라인(3PL) */
.s2-uc-num{
  margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--bg2);
}
.s2-uc-num > div{
  padding:30px 26px; border-right:1px solid var(--line); background:#fff;
}
.s2-uc-num > div:last-child{ border-right:0; }
.s2-uc-num .lb{ font-size:13.5px; font-weight:600; color:var(--g500); letter-spacing:.02em; }
.s2-uc-num .vl{
  margin-top:11px; font-size:clamp(26px,2.5vw,34px); font-weight:700; letter-spacing:-.03em;
  line-height:1.15; color:var(--ink);
}
.s2-uc-num .vl em{ font-style:normal; color:var(--blue); }
.s2-uc-num .ds{ margin-top:9px; font-size:13.5px; line-height:1.6; color:var(--g500); }
.s2-uc-src{
  margin-top:16px; text-align:center; font-size:13px; color:var(--g500);
}
/* ── 중간 CTA 밴드 ─────────────────────────────────────────────── */
.s2-band{ position:relative; padding:96px 0 100px; background:var(--navy); overflow:hidden; }
.s2-band::before{
  content:''; position:absolute; left:-8%; top:-40%; width:58%; height:180%;
  background:radial-gradient(ellipse at center, rgba(46,111,242,.30), transparent 68%);
}
.s2-band::after{
  content:''; position:absolute; right:-12%; bottom:-56%; width:52%; height:170%;
  background:radial-gradient(ellipse at center, rgba(77,162,255,.18), transparent 70%);
}
.s2-band-in{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:48px; flex-wrap:wrap;
}
.s2-band-tx{ flex:1 1 460px; }
.s2-band-kick{
  font-size:13px; font-weight:600; letter-spacing:.18em; color:var(--blue-l);
}
.s2-band-tx .sec-title{ margin-top:18px; }
.s2-band-tx p{ margin-top:16px; max-width:520px; font-size:16.5px; line-height:1.75; color:#A9BCD8; }
.s2-band-act{ flex:0 0 auto; display:flex; flex-direction:column; gap:14px; min-width:280px; }
.s2-band-act .btn{ justify-content:center; }
.s2-band-hint{
  display:flex; align-items:center; gap:9px; font-size:13.5px; color:#8FA6C8;
}
.s2-band-hint b{ color:#fff; font-weight:600; }
.s2-band-hint::before{
  content:''; width:16px; height:1px; background:rgba(255,255,255,.28); flex:0 0 auto;
}
/* ── 기능 3종 좌우 교차 ────────────────────────────────────────── */
.s2-feats{ padding:126px 0 40px; background:#fff; }
.s2-feat{ padding:0 0 118px; }
.s2-feat-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.14fr); gap:76px; align-items:center;
}
.s2-feat.rev .s2-feat-tx{ order:2; }
.s2-feat.rev .s2-feat-vis{ order:1; }
.s2-feat-no{
  display:inline-flex; align-items:baseline; gap:10px;
  font-size:13px; font-weight:600; letter-spacing:.18em; color:var(--blue);
}
.s2-feat-no b{ font-size:13px; font-weight:600; }
.s2-feat-no::after{
  content:''; display:inline-block; width:44px; height:1px; background:var(--tint-b);
  transform:translateY(-4px);
}
.s2-feat-tx .sec-title{ margin-top:20px; }
.s2-feat-tx .lead{
  margin-top:20px; font-size:17px; line-height:1.78; color:var(--g700);
}
.s2-feat-list{ margin-top:34px; list-style:none; padding:0; border-top:1px solid var(--line); }
.s2-feat-list li{
  padding:22px 0 22px 2px; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:16px; align-items:start;
}
.s2-feat-list .ic{
  width:34px; height:34px; border-radius:10px; background:var(--tint);
  border:1px solid var(--tint-b); display:flex; align-items:center; justify-content:center;
}
.s2-feat-list .ic svg{ width:17px; height:17px; display:block; }
.s2-feat-list h4{ font-size:16.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.s2-feat-list p{ margin-top:7px; font-size:15px; line-height:1.7; color:var(--g700); }
.s2-feat-foot{ margin-top:32px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.s2-more{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15.5px; font-weight:600; color:var(--blue-d);
  transition:gap .35s var(--ease), color .3s;
}
.s2-more:hover{ gap:14px; color:var(--blue); }
.s2-more .ar{ display:block; }
.s2-feat-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--g700);
  background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:8px 15px;
}
.s2-feat-chip b{ color:var(--blue-d); font-weight:600; }
/* 목업 프레임 */
.s2-vis-frame{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); background:#fff;
  box-shadow:0 34px 70px -44px rgba(10,28,62,.42);
}
.s2-vis-frame.dk{ border-color:rgba(255,255,255,.10); background:var(--navy); }
.s2-vis-frame svg{ width:100%; height:auto; display:block; }
.s2-vis-cap{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:16px; font-size:13.5px; color:var(--g500);
}
.s2-vis-cap b{ color:var(--g700); font-weight:600; }
.s2-vis-cap .dot{
  display:inline-flex; align-items:center; gap:7px;
}
.s2-vis-cap .dot::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--blue);
}
/* ── 3열 요약 카드 ─────────────────────────────────────────────── */
.s2-all{ padding:120px 0 130px; background:var(--bg2); border-top:1px solid var(--line); }
.s2-all-grid{
  margin-top:6px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.s2-all-item{
  position:relative; padding:30px 28px 32px; background:#fff;
  border:1px solid var(--line); border-radius:18px;
  transition:transform .55s var(--ease), border-color .35s var(--ease), box-shadow .55s var(--ease);
}
.s2-all-item:hover{
  transform:translateY(-6px); border-color:var(--tint-b);
  box-shadow:0 22px 44px -30px rgba(10,28,62,.26);
}
.s2-all-head{ display:flex; align-items:center; gap:12px; }
.s2-all-ic{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
  background:var(--tint); border:1px solid var(--tint-b);
  display:flex; align-items:center; justify-content:center;
}
.s2-all-ic svg{ width:19px; height:19px; display:block; }
.s2-all-item h3{ font-size:17.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.s2-all-item p{ margin-top:14px; font-size:15px; line-height:1.72; color:var(--g700); }
.s2-all-item .gp{
  margin-top:16px; display:inline-block; font-size:12.5px; font-weight:600;
  color:var(--g500); background:var(--bg2); border:1px solid var(--line);
  border-radius:7px; padding:5px 10px;
}
.s2-all-foot{
  margin-top:44px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}
/* ── 반응형 ────────────────────────────────────────────────────── */
@media(max-width:1200px){
  .s2-feat-in{ gap:52px; }
  .s2-uc-grid{ gap:20px; }
}
@media(max-width:1000px){.s2-uc{ padding:96px 0 100px; }
.s2-uc-grid{ grid-template-columns:1fr; max-width:620px; margin-left:auto; margin-right:auto; }
.s2-uc-num{ grid-template-columns:repeat(2,1fr); }
.s2-uc-num > div:nth-child(2){ border-right:0; }
.s2-uc-num > div:nth-child(1), .s2-uc-num > div:nth-child(2){ border-bottom:1px solid var(--line); }
.s2-feats{ padding:96px 0 24px; }
.s2-feat{ padding-bottom:92px; }
.s2-feat-in{ grid-template-columns:1fr; gap:40px; }
.s2-feat.rev .s2-feat-tx{ order:0; }
.s2-feat.rev .s2-feat-vis{ order:0; }
.s2-all-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:820px){.s2-band{ padding:78px 0 84px; }
.s2-band-in{ gap:34px; }
.s2-band-act{ width:100%; min-width:0; }
.s2-uc-body{ padding:24px 22px 26px; }
.s2-all{ padding:96px 0 104px; }
}
@media(max-width:640px){.s2-uc-num{ grid-template-columns:1fr; }
.s2-uc-num > div{ border-right:0; border-bottom:1px solid var(--line); }
.s2-uc-num > div:last-child{ border-bottom:0; }
.s2-hero-note{ flex-direction:column; gap:9px; }
.s2-all-grid{ grid-template-columns:1fr; }
.s2-feat-list li{ grid-template-columns:1fr; gap:10px; }
.s2-feat{ padding-bottom:76px; }
.s2-vis-cap{ font-size:12.5px; }
}




/* ══════════════════════════════════════════════════════════
   S4 · nsdlab.kr/ops_system 클론 — 박수칠때퇴근 서비스 허브
   프리픽스 .s4-  (site.css의 .card 재정의 금지)
   ══════════════════════════════════════════════════════════ */

/* ── 공통 유틸 ─────────────────────────────────────────── */
.s4-badge{
  position:fixed; left:14px; bottom:14px; z-index:90;
  font:600 12px/1 Paperlogy,sans-serif; color:#fff;
  background:#0A1C3E; border-radius:999px; padding:9px 14px;
}
.s4-kick{
  display:inline-block; font-size:13px; font-weight:600;
  letter-spacing:.24em; color:var(--blue);
}
.s4-sec-note{
  margin-top:54px; text-align:center;
  font-size:16.5px; font-weight:500; color:var(--g700);
}
.s4-sec-note b{ font-weight:600; color:var(--ink); }
/* ── 1. 서브 히어로 ────────────────────────────────────── */
.s4-hero{
  position:relative; overflow:hidden;
  padding:158px 0 0; background:var(--bg2);
  border-bottom:1px solid var(--line);
}
.s4-hero::before{
  content:''; position:absolute; left:50%; top:-260px;
  width:1100px; height:700px; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(46,111,242,.13), rgba(46,111,242,0) 70%);
  pointer-events:none;
}
.s4-hero-in{
  position:relative; max-width:1020px; margin:0 auto;
  padding:0 24px; text-align:center;
}
.s4-hero h1{
  margin-top:20px; font-size:clamp(36px,4.3vw,58px); font-weight:700;
  letter-spacing:-.033em; line-height:1.28; color:var(--ink);
}
.s4-hero h1 .em{ color:var(--blue); }
.s4-hero .lead{
  margin:22px auto 0; max-width:680px;
  font-size:17.5px; line-height:1.78; color:var(--g700);
}
.s4-hero .ctas{
  margin-top:34px; display:flex; gap:12px;
  justify-content:center; flex-wrap:wrap;
}
.s4-hero-tag{
  display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap;
  justify-content:center; margin-top:22px;
  font-size:13.5px; font-weight:600; color:var(--blue-d);
}
.s4-hero-tag span{
  background:var(--tint); border:1px solid var(--tint-b);
  border-radius:999px; padding:7px 15px;
}
/* 히어로 아이콘 그리드 */
.s4-grid{
  position:relative; margin:62px auto 0; max-width:1080px;
  padding:0 24px 0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
}
.s4-gcell{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 12px 20px; text-align:center;
  transition:transform .55s var(--ease), border-color .35s, box-shadow .55s var(--ease);
}
.s4-gcell:hover{
  transform:translateY(-6px); border-color:var(--tint-b);
  box-shadow:0 16px 40px -22px rgba(10,28,62,.34);
}
.s4-gcell .ic{
  width:44px; height:44px; margin:0 auto; border-radius:13px;
  background:var(--tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.s4-gcell .ic svg{ width:22px; height:22px; }
.s4-gcell .nm{ margin-top:12px; font-size:14.5px; font-weight:600; color:var(--ink); }
.s4-gcell .ds{ margin-top:4px; font-size:12.5px; color:var(--g500); }
.s4-grid-rail{
  position:relative; height:64px; margin-top:-1px;
  background:linear-gradient(180deg, rgba(247,249,253,0), var(--bg2) 62%);
}
/* ── 2. PAIN POINT ─────────────────────────────────────── */
.s4-pain{ padding:112px 0; background:#fff; }
.s4-pain-grid{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.s4-pn{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:30px 26px 28px; overflow:hidden;
  transition:transform .55s var(--ease), border-color .35s, box-shadow .55s var(--ease);
}
.s4-pn::after{
  content:''; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.s4-pn:hover{
  transform:translateY(-7px); border-color:var(--tint-b);
  box-shadow:0 22px 52px -30px rgba(10,28,62,.4);
}
.s4-pn:hover::after{ transform:scaleX(1); }
.s4-pn .no{
  font-size:13px; font-weight:600; letter-spacing:.1em;
  color:var(--blue); font-variant-numeric:tabular-nums;
}
.s4-pn h3{
  margin-top:12px; font-size:21px; font-weight:700;
  letter-spacing:-.025em; color:var(--ink);
}
.s4-pn .sub{
  margin-top:8px; font-size:14px; font-weight:600; color:var(--g500);
}
.s4-pn ul{ margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line); list-style:none; }
.s4-pn li{
  display:flex; gap:9px; margin-top:10px;
  font-size:14.5px; line-height:1.66; color:var(--g700);
}
.s4-pn li .d{
  flex:none; width:5px; height:5px; margin-top:9px;
  border-radius:50%; background:var(--tint-b);
}
/* ── 3. 업종 무한 티커 ─────────────────────────────────── */
.s4-tick-sec{ padding:0 0 112px; background:#fff; }
.s4-tick-head{ text-align:center; margin-bottom:30px; }
.s4-tick-head .t{
  font-size:16px; font-weight:600; color:var(--g500); letter-spacing:-.01em;
}
.s4-tick{
  position:relative; overflow:hidden; padding:9px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.s4-tick-row{ display:flex; width:max-content; animation:s4slide 46s linear infinite; }
.s4-tick-row.rev{ animation-direction:reverse; animation-duration:58s; }
.s4-tick:hover .s4-tick-row{ animation-play-state:paused; }
.s4-tick-set{ display:flex; gap:12px; padding-right:12px; }
@keyframes s4slide{from{ transform:translateX(0); }
to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){.s4-tick-row{ animation:none; } }
.s4-ch{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:15px; font-weight:500; color:var(--g700);
  background:var(--bg2); border:1px solid var(--line);
  border-radius:999px; padding:12px 22px;
  transition:color .3s, border-color .3s, background .3s;
}
.s4-ch .d{ width:6px; height:6px; border-radius:50%; background:var(--blue); opacity:.55; }
.s4-ch:hover{ color:var(--blue-d); border-color:var(--tint-b); background:var(--tint); }
.s4-ch:hover .d{ opacity:1; }
/* ── 4. 낭비비용 계산기(다크) ──────────────────────────── */
.s4-calc-sec{ position:relative; padding:112px 0; background:var(--navy); overflow:hidden; }
.s4-calc-sec::before{
  content:''; position:absolute; left:-180px; top:-120px;
  width:760px; height:760px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(77,162,255,.16), rgba(77,162,255,0) 70%);
  pointer-events:none;
}
.s4-calc-sec::after{
  content:''; position:absolute; right:-220px; bottom:-260px;
  width:820px; height:820px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(46,111,242,.18), rgba(46,111,242,0) 70%);
  pointer-events:none;
}
.s4-calc-wrap{ position:relative; max-width:1240px; margin:0 auto; padding:0 24px; }
.s4-calc{
  margin-top:8px; display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:22px; align-items:start;
}
.s4-panel{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:30px 28px;
  backdrop-filter:blur(6px);
}
.s4-panel-t{
  font-size:13px; font-weight:600; letter-spacing:.18em; color:var(--blue-l);
}
/* 슬라이더 */
.s4-fld{ margin-top:26px; }
.s4-fld:first-of-type{ margin-top:22px; }
.s4-fld-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.s4-fld-h .lb{ font-size:14.5px; font-weight:500; color:#D7E2F2; }
.s4-fld-h .vl{
  font-size:20px; font-weight:700; color:#fff; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.s4-fld-h .vl .u{ font-size:13.5px; font-weight:500; color:var(--navy-tx); margin-left:3px; }
.s4-rg{
  -webkit-appearance:none; appearance:none; display:block;
  width:100%; height:6px; margin-top:14px; border-radius:999px;
  background:rgba(255,255,255,.14); outline:none; cursor:pointer;
}
.s4-rg::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:5px solid var(--blue-l); cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.45);
  transition:transform .25s var(--ease);
}
.s4-rg::-webkit-slider-thumb:hover{ transform:scale(1.14); }
.s4-rg::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; border:5px solid var(--blue-l);
  background:#fff; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.45);
}
.s4-fld-mm{
  display:flex; justify-content:space-between; margin-top:9px;
  font-size:12px; color:rgba(143,166,200,.72); font-variant-numeric:tabular-nums;
}
.s4-reset{
  margin-top:28px; width:100%; font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--navy-tx); background:transparent;
  border:1px solid rgba(255,255,255,.16); border-radius:10px;
  padding:12px 0; cursor:pointer;
  transition:color .3s, border-color .3s;
}
.s4-reset:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
/* 결과 */
.s4-out{ display:grid; gap:16px; }
.s4-out-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.s4-tile{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:26px 24px 24px;
}
.s4-tile.hi{
  background:linear-gradient(160deg, rgba(46,111,242,.28), rgba(46,111,242,.08));
  border-color:rgba(77,162,255,.42);
}
.s4-tile .cap{ font-size:13.5px; font-weight:500; color:var(--navy-tx); }
.s4-tile.hi .cap{ color:#BFD7FF; }
.s4-tile .big{
  margin-top:12px; font-size:clamp(28px,2.9vw,38px); font-weight:700;
  letter-spacing:-.035em; line-height:1.16; color:#fff;
  font-variant-numeric:tabular-nums;
}
.s4-tile .fine{ margin-top:9px; font-size:12.5px; line-height:1.6; color:rgba(143,166,200,.9); }
.s4-tile.hi .fine{ color:rgba(198,220,254,.9); }
/* 분해 막대 */
.s4-split{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:26px 24px; }
.s4-split-h{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.s4-split-h .t{ font-size:15px; font-weight:600; color:#fff; }
.s4-split-h .s{ font-size:12.5px; color:var(--navy-tx); }
.s4-bar{
  display:flex; height:44px; margin-top:16px; border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.08);
}
.s4-bar .seg{
  display:flex; align-items:center; padding:0 14px;
  font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden;
  transition:width .8s var(--ease);
}
.s4-bar .seg.a{ background:linear-gradient(90deg,var(--blue),var(--blue-l)); color:#fff; }
.s4-bar .seg.b{ background:rgba(255,255,255,.09); color:rgba(143,166,200,.95); }
.s4-lgd{ display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-size:12.5px; color:var(--navy-tx); }
.s4-lgd i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:7px; vertical-align:1px; }
.s4-lgd i.a{ background:var(--blue-l); }
.s4-lgd i.b{ background:rgba(255,255,255,.22); }
/* 회수 타임라인 */
.s4-tl{ margin-top:22px; }
.s4-tl-track{
  position:relative; height:10px; border-radius:999px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.s4-tl-fill{
  position:absolute; inset:0 auto 0 0; width:17%;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));
  border-radius:999px; transition:width .8s var(--ease);
}
.s4-tl-mk{
  display:flex; justify-content:space-between; margin-top:10px;
  font-size:11.5px; color:rgba(143,166,200,.72); font-variant-numeric:tabular-nums;
}
/* 계산식 */
.s4-form{
  margin-top:22px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:22px 24px;
}
.s4-form .ft{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--blue-l); }
.s4-form ol{ margin:14px 0 0; padding-left:19px; }
.s4-form li{
  margin-top:8px; font-size:13px; line-height:1.7; color:rgba(190,206,228,.92);
  font-variant-numeric:tabular-nums;
}
.s4-form li b{ font-weight:600; color:#fff; }
.s4-form .disc{
  margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.09);
  font-size:12px; line-height:1.7; color:rgba(143,166,200,.78);
}
.s4-calc-cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.s4-calc-cta .note{ font-size:13px; color:var(--navy-tx); }
/* 근거 = 3PL 공유 수치 */
.s4-ev{ margin-top:60px; padding-top:52px; border-top:1px solid rgba(255,255,255,.1); }
.s4-ev-h{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.s4-ev-h .t{ font-size:24px; font-weight:700; letter-spacing:-.025em; color:#fff; }
.s4-ev-h .s{ font-size:14px; color:var(--navy-tx); }
.s4-ev-grid{
  margin-top:26px; display:grid;
  grid-template-columns:repeat(4,1fr); gap:14px;
}
.s4-st{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:22px 20px;
  transition:border-color .35s, transform .55s var(--ease);
}
.s4-st:hover{ border-color:rgba(77,162,255,.4); transform:translateY(-5px); }
.s4-st .k{ font-size:12.5px; font-weight:500; color:var(--navy-tx); }
.s4-st .v{
  margin-top:9px; font-size:26px; font-weight:700; letter-spacing:-.03em;
  color:#fff; font-variant-numeric:tabular-nums;
}
.s4-st .v .sm{ font-size:15px; font-weight:500; color:var(--navy-tx); margin-left:2px; }
.s4-st .v em{ font-style:normal; color:var(--blue-l); }
.s4-ev-quotes{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.s4-ev-quotes span{
  font-size:13.5px; font-weight:500; color:#CFE0F8;
  background:rgba(77,162,255,.12); border:1px solid rgba(77,162,255,.3);
  border-radius:999px; padding:9px 16px;
}
/* ── 5. SOLUTION 01~03 ─────────────────────────────────── */
.s4-sol{ padding:112px 0 118px; background:var(--bg2); }
.s4-sol-blk{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:56px; align-items:center;
}
.s4-sol-blk + .s4-sol-blk{ margin-top:108px; }
.s4-sol-blk.rev .s4-sol-txt{ order:2; }
.s4-sol-no{
  display:flex; align-items:center; gap:14px;
  font-size:13px; font-weight:600; letter-spacing:.2em; color:var(--blue);
}
.s4-sol-no .ln{ flex:1; height:1px; background:var(--tint-b); max-width:110px; }
.s4-sol-no .big{
  font-size:38px; font-weight:700; letter-spacing:-.03em;
  line-height:1; color:var(--blue); font-variant-numeric:tabular-nums;
}
.s4-sol-txt h3{
  margin-top:18px; font-size:clamp(27px,2.7vw,35px); font-weight:700;
  letter-spacing:-.032em; line-height:1.34; color:var(--ink);
}
.s4-sol-txt .ds{
  margin-top:16px; font-size:16.5px; line-height:1.78; color:var(--g700);
}
.s4-sol-list{ margin:26px 0 0; padding:0; list-style:none; }
.s4-sol-list li{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; margin-top:10px;
  transition:transform .5s var(--ease), border-color .35s;
}
.s4-sol-list li:hover{ transform:translateX(5px); border-color:var(--tint-b); }
.s4-sol-list .nm{
  display:flex; align-items:center; gap:9px;
  font-size:15.5px; font-weight:600; color:var(--ink);
}
.s4-sol-list .nm .ck{ flex:none; width:17px; height:17px; color:var(--blue); }
.s4-sol-list .tx{ margin-top:7px; padding-left:26px; font-size:14px; line-height:1.68; color:var(--g700); }
/* 목업 프레임 */
.s4-mock{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:0 30px 70px -40px rgba(10,28,62,.5);
}
.s4-mock-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:var(--bg2); border-bottom:1px solid var(--line);
}
.s4-mock-bar .dot{ width:9px; height:9px; border-radius:50%; background:#D9E0EC; }
.s4-mock-bar .url{
  flex:1; margin-left:8px; font-size:11.5px; color:var(--g500);
  background:#fff; border:1px solid var(--line); border-radius:7px;
  padding:5px 11px; text-align:center;
}
.s4-mock-body{ padding:20px; }
.s4-mrow{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:11px;
  padding:13px 15px; margin-top:9px; background:#fff;
}
.s4-mrow:first-child{ margin-top:0; }
.s4-mrow .ico{
  flex:none; width:30px; height:30px; border-radius:9px;
  background:var(--tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
}
.s4-mrow .tt{ flex:1; min-width:0; }
.s4-mrow .tt b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.s4-mrow .tt s{ display:block; margin-top:3px; font-size:11.5px; color:var(--g500); text-decoration:none; }
.s4-tag{
  flex:none; font-size:11px; font-weight:600; border-radius:999px; padding:5px 11px;
  background:var(--tint); color:var(--blue-d);
}
.s4-tag.ok{ background:#E8F6EE; color:#1E8449; }
.s4-tag.wt{ background:#FFF3E0; color:#B26A00; }
.s4-tag.gy{ background:#EEF1F7; color:var(--g500); }
.s4-mnote{
  margin-top:14px; padding-top:13px; border-top:1px dashed var(--line);
  font-size:12px; color:var(--g500);
}
.s4-mflow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.s4-mflow .st{
  font-size:11.5px; font-weight:600; color:var(--g700);
  background:var(--bg2); border:1px solid var(--line);
  border-radius:8px; padding:7px 11px;
}
.s4-mflow .st.on{ background:var(--tint); border-color:var(--tint-b); color:var(--blue-d); }
.s4-mflow .ar{ color:var(--g500); font-size:11px; }
.s4-gauge{ margin-top:14px; }
.s4-gauge .gh{ display:flex; justify-content:space-between; font-size:12px; color:var(--g500); }
.s4-gauge .gt{ height:8px; margin-top:8px; border-radius:999px; background:var(--bg2); overflow:hidden; }
.s4-gauge .gf{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--blue-l)); }
.s4-gantt{ display:grid; gap:9px; }
.s4-gantt .gr{ display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:12px; }
.s4-gantt .gl{ font-size:12.5px; font-weight:500; color:var(--g700); }
.s4-gantt .gb{ position:relative; height:22px; border-radius:7px; background:var(--bg2); }
.s4-gantt .gs{
  position:absolute; top:0; bottom:0; border-radius:7px;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));
}
.s4-gantt .gs.lt{ background:var(--tint-b); }
.s4-gscale{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; margin-top:12px;
}
.s4-gscale .gx{ display:flex; justify-content:space-between; font-size:11px; color:var(--g500); }
/* ── 6. 제품 목업 UI(대시보드) ─────────────────────────── */
.s4-ws{ padding:112px 0; background:#fff; }
.s4-ws-frame{
  max-width:1180px; margin:0 auto; padding:0 24px;
}
.s4-ws-shell{
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:#fff; box-shadow:0 40px 90px -50px rgba(10,28,62,.55);
}
.s4-ws-top{
  display:flex; align-items:center; gap:9px;
  padding:13px 18px; background:var(--bg2); border-bottom:1px solid var(--line);
}
.s4-ws-top .dot{ width:10px; height:10px; border-radius:50%; background:#D9E0EC; }
.s4-ws-top .url{
  margin-left:10px; font-size:12px; color:var(--g500);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 14px;
}
.s4-ws-main{ display:grid; grid-template-columns:212px minmax(0,1fr); }
.s4-ws-side{ border-right:1px solid var(--line); padding:20px 14px; background:#FCFDFF; }
.s4-ws-side .lg{
  display:flex; align-items:center; gap:9px; padding:0 8px 16px;
  font-size:13.5px; font-weight:600; color:var(--ink);
}
.s4-ws-side .lg .m{
  width:24px; height:24px; border-radius:7px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.s4-ws-side .gp{ margin-top:14px; padding:0 8px; font-size:10.5px; font-weight:600; letter-spacing:.12em; color:var(--g500); }
.s4-ws-side .mi{
  display:flex; align-items:center; gap:9px; margin-top:5px;
  font-size:13px; color:var(--g700); border-radius:9px; padding:9px 10px;
}
.s4-ws-side .mi .b{ width:6px; height:6px; border-radius:2px; background:var(--line); }
.s4-ws-side .mi.on{ background:var(--tint); color:var(--blue-d); font-weight:600; }
.s4-ws-side .mi.on .b{ background:var(--blue); }
.s4-ws-body{ padding:24px 26px 28px; min-width:0; }
.s4-ws-h{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.s4-ws-h .tt{ font-size:17px; font-weight:600; color:var(--ink); }
.s4-ws-h .tt s{ display:block; margin-top:4px; font-size:12px; color:var(--g500); text-decoration:none; font-weight:400; }
.s4-live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:#1E8449;
  background:#E8F6EE; border-radius:999px; padding:6px 12px;
}
.s4-live .p{ width:6px; height:6px; border-radius:50%; background:#1E8449; animation:s4pulse 1.9s ease-in-out infinite; }
@keyframes s4pulse{0%, 100%{ opacity:1; }
50%{ opacity:.25; } }
@media(prefers-reduced-motion:reduce){.s4-live .p{ animation:none; } }
.s4-kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px; }
.s4-kpi-c{ border:1px solid var(--line); border-radius:13px; padding:16px 16px 14px; background:#fff; }
.s4-kpi-c .k{ font-size:11.5px; color:var(--g500); }
.s4-kpi-c .v{ margin-top:7px; font-size:23px; font-weight:700; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.s4-kpi-c .v .sm{ font-size:13px; font-weight:500; color:var(--g500); margin-left:2px; }
.s4-kpi-c .dl{ margin-top:5px; font-size:11px; font-weight:600; color:var(--blue); }
.s4-tabs{ display:flex; gap:6px; margin-top:24px; border-bottom:1px solid var(--line); }
.s4-tab{
  font-family:inherit; font-size:13px; font-weight:600; color:var(--g500);
  background:transparent; border:0; border-bottom:2px solid transparent;
  padding:11px 14px; cursor:pointer; transition:color .3s, border-color .3s;
}
.s4-tab:hover{ color:var(--g700); }
.s4-tab.on{ color:var(--blue-d); border-bottom-color:var(--blue); }
.s4-tp{ display:none; padding-top:20px; }
.s4-tp.on{ display:block; animation:s4fade .45s var(--ease); }
@keyframes s4fade{from{ opacity:0; transform:translateY(8px); }
to{ opacity:1; transform:none; } }
.s4-tp-2{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; }
.s4-box{ border:1px solid var(--line); border-radius:14px; padding:18px; background:#fff; }
.s4-box .bt{ font-size:13px; font-weight:600; color:var(--ink); }
.s4-box .bs{ margin-top:4px; font-size:11.5px; color:var(--g500); }
.s4-qrow{
  display:flex; align-items:center; gap:11px;
  padding:11px 0; border-top:1px solid var(--line);
  font-size:13px; color:var(--g700);
}
.s4-qrow:nth-of-type(1){ border-top:0; }
.s4-qrow .n{ flex:none; width:22px; font-size:11.5px; color:var(--g500); font-variant-numeric:tabular-nums; }
.s4-qrow .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s4-rep{ border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.s4-rep-h{ padding:14px 18px; background:var(--bg2); border-bottom:1px solid var(--line); }
.s4-rep-h b{ font-size:13.5px; font-weight:600; color:var(--ink); }
.s4-rep-h s{ display:block; margin-top:3px; font-size:11.5px; color:var(--g500); text-decoration:none; }
.s4-rep-b{ padding:16px 18px; }
.s4-rep-b li{ margin-top:9px; font-size:13px; line-height:1.7; color:var(--g700); }
.s4-rep-b li:first-child{ margin-top:0; }
.s4-rep-b li b{ font-weight:600; color:var(--ink); }
.s4-rep-b ul{ list-style:none; padding:0; margin:0; }
.s4-rep-b .bl{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--tint-b); margin-right:8px; vertical-align:3px; }
/* ── 7. PROCESS ────────────────────────────────────────── */
.s4-pr{ padding:112px 0; background:var(--bg2); }
.s4-pr-grid{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.s4-pr-c{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:26px 22px 24px;
  transition:transform .55s var(--ease), border-color .35s, box-shadow .55s var(--ease);
}
.s4-pr-c:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 20px 48px -30px rgba(10,28,62,.4); }
.s4-pr-c .no{
  width:34px; height:34px; border-radius:10px;
  background:var(--ink); color:#fff; font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
}
.s4-pr-c h4{ margin-top:14px; font-size:16.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s4-pr-c p{ margin-top:9px; font-size:13.5px; line-height:1.72; color:var(--g700); }
.s4-pr-c .wk{ margin-top:12px; font-size:12px; font-weight:600; color:var(--blue); }
.s4-pr-foot{
  max-width:1240px; margin:34px auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.s4-pr-foot .fb{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.s4-pr-foot .fb .k{ font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--blue); }
.s4-pr-foot .fb .v{ margin-top:9px; font-size:14.5px; line-height:1.7; color:var(--g700); }
.s4-pr-foot .fb .v b{ font-weight:600; color:var(--ink); }
/* ── 8. 마무리 CTA(원본 골격) ──────────────────────────── */
.s4-end{ padding:104px 0 110px; background:var(--navy); text-align:center; }
.s4-end .in{ max-width:820px; margin:0 auto; padding:0 24px; }
.s4-end h2{
  font-size:clamp(28px,3.2vw,42px); font-weight:700;
  letter-spacing:-.032em; line-height:1.36; color:#fff;
}
.s4-end p{ margin-top:16px; font-size:16.5px; line-height:1.74; color:#B8C5D9; }
.s4-end .btns{ margin-top:32px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.s4-end .fine{ margin-top:22px; font-size:13px; color:var(--navy-tx); }
/* ── 반응형 ────────────────────────────────────────────── */
@media(max-width:1200px){
  .s4-grid{ grid-template-columns:repeat(3,1fr); }
  .s4-pain-grid{ grid-template-columns:repeat(2,1fr); }
  .s4-calc{ grid-template-columns:1fr; }
  .s4-pr-grid{ grid-template-columns:repeat(3,1fr); }
  .s4-ev-grid{ grid-template-columns:repeat(4,1fr); }
}
@media(max-width:1000px){.s4-sol-blk{ grid-template-columns:1fr; gap:36px; }
.s4-sol-blk.rev .s4-sol-txt{ order:0; }
.s4-sol-blk + .s4-sol-blk{ margin-top:76px; }
.s4-ws-main{ grid-template-columns:1fr; }
.s4-ws-side{ border-right:0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.s4-ws-side .lg{ padding-bottom:0; }
.s4-ws-side .gp{ display:none; }
.s4-ws-side .mi{ margin-top:0; }
.s4-tp-2{ grid-template-columns:1fr; }
.s4-kpi{ grid-template-columns:repeat(2,1fr); }
.s4-ev-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:820px){.s4-pain, .s4-calc-sec, .s4-sol, .s4-ws, .s4-pr{ padding-top:84px; padding-bottom:84px; }
.s4-tick-sec{ padding-bottom:84px; }
.s4-hero{ padding-top:132px; }
.s4-out-3{ grid-template-columns:1fr; }
.s4-pr-grid{ grid-template-columns:repeat(2,1fr); }
.s4-pr-foot{ grid-template-columns:1fr; }
.s4-gantt .gr, .s4-gscale{ grid-template-columns:74px minmax(0,1fr); }
}
@media(max-width:640px){.s4-grid{ grid-template-columns:repeat(2,1fr); }
.s4-pain-grid{ grid-template-columns:1fr; }
.s4-pr-grid{ grid-template-columns:1fr; }
.s4-panel, .s4-tile, .s4-split, .s4-form{ padding-left:20px; padding-right:20px; }
.s4-ws-body{ padding:20px 18px 22px; }
.s4-tabs{ overflow-x:auto; }
.s4-badge{ left:10px; bottom:10px; }
}




/* ===========================================================
   S5 · gongysd 클론 — 설득형 롱폼 서비스 허브
   모든 커스텀 클래스는 .s5- 프리픽스. .card 재정의 금지.
   =========================================================== */

.s5-badge{
  position:fixed; left:14px; bottom:14px; z-index:90;
  font:600 12px/1 Paperlogy,sans-serif; color:#fff;
  background:#0A1C3E; border-radius:999px; padding:9px 14px;
}
/* 판정 색(진단 위젯 전용 — 토큰 외 색은 여기서만) */
:root{
  --s5-ok:#1B8F63;      --s5-ok-bg:#E8F6F0;   --s5-ok-bd:#B6E2D0;
  --s5-warn:#B5811A;    --s5-warn-bg:#FDF4E3; --s5-warn-bd:#EFDCAE;
  --s5-risk:#C8621F;    --s5-risk-bg:#FDF0E6; --s5-risk-bd:#F2CFB1;
  --s5-red:#C6342F;     --s5-red-bg:#FCECEB;  --s5-red-bd:#F1C2BF;
}
/* ── 공통 유틸 ─────────────────────────────────────────── */
.s5-narrow{ max-width:1080px; margin:0 auto; padding:0 24px; }
.s5-note{ margin-top:18px; font-size:13.5px; line-height:1.7; color:var(--g500); text-align:center; }
.sec-dark .s5-note{ color:var(--navy-tx); }
.s5-hr{ height:1px; background:var(--line); border:0; margin:0; }
.s5-em{ color:var(--blue); }
.sec-dark .s5-em{ color:var(--blue-l); }
/* ── 서브 히어로 보조 ───────────────────────────────────── */
.s5-hero-facts{
  margin:38px auto 0; max-width:760px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden;
}
.s5-hero-facts div{ padding:20px 16px; text-align:center; border-left:1px solid var(--line); }
.s5-hero-facts div:first-child{ border-left:0; }
.s5-hero-facts .n{ font-size:23px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.s5-hero-facts .n span{ font-size:14.5px; font-weight:600; color:var(--g500); margin-left:3px; }
.s5-hero-facts .t{ margin-top:6px; font-size:13.5px; color:var(--g500); }
/* ── 2. 대표 시간가치 ───────────────────────────────────── */
.s5-time{ position:relative; overflow:hidden; }
.s5-time::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(900px 420px at 50% -12%, rgba(77,162,255,.16), transparent 68%);
  pointer-events:none;
}
.s5-time .wrapc{ position:relative; }
.s5-chips{
  margin:0 auto; max-width:1000px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.s5-chip{
  font-size:15px; font-weight:500; line-height:1;
  color:#C7D6EC; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:13px 19px; transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.s5-chip:nth-child(3n){ color:#E4EDF9; }
.s5-chip:hover{ color:#fff; border-color:rgba(120,175,255,.6); background:rgba(46,111,242,.18); }
.s5-chips-cap{
  margin-top:30px; text-align:center;
  font-size:clamp(19px,2.1vw,26px); font-weight:600; letter-spacing:-.02em; color:#fff; line-height:1.55;
}
.s5-chips-cap span{ color:var(--blue-l); }
/* 계산 패널 */
.s5-calc{
  margin-top:66px; border:1px solid rgba(255,255,255,.13); border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  overflow:hidden;
}
.s5-calc-head{
  padding:26px 32px; border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.s5-calc-head .k{
  font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--blue-l);
  border:1px solid rgba(120,175,255,.4); border-radius:999px; padding:7px 14px;
}
.s5-calc-head .t{ font-size:17px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.s5-steps{ display:grid; grid-template-columns:repeat(3,1fr); }
.s5-step{ padding:34px 32px; border-left:1px solid rgba(255,255,255,.1); }
.s5-step:first-child{ border-left:0; }
.s5-step .no{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px;
  font-size:12.5px; font-weight:600; color:var(--navy);
  background:var(--blue-l);
}
.s5-step h4{ margin-top:14px; font-size:17.5px; font-weight:600; color:#fff; letter-spacing:-.02em; line-height:1.45; }
.s5-step p{ margin-top:10px; font-size:14.5px; line-height:1.75; color:var(--navy-tx); }
.s5-step .eq{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1);
  font-size:15px; font-weight:600; color:#DCE7F7; letter-spacing:-.01em;
}
.s5-step .eq b{ color:var(--blue-l); font-weight:700; }
.s5-money{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.1);
}
.s5-money-cell{ padding:38px 32px 42px; border-left:1px solid rgba(255,255,255,.1); text-align:center; }
.s5-money-cell:first-child{ border-left:0; }
.s5-money-cell .lb{ font-size:14px; font-weight:600; color:var(--navy-tx); letter-spacing:.02em; }
.s5-money-cell .vl{
  margin-top:12px; font-size:clamp(30px,3.4vw,46px); font-weight:700;
  letter-spacing:-.035em; line-height:1.1; color:#fff;
}
.s5-money-cell .vl u{ text-decoration:none; font-size:.5em; font-weight:600; margin-left:4px; color:var(--navy-tx); }
.s5-money-cell.hot{ background:rgba(198,52,47,.13); }
.s5-money-cell.hot .vl{ color:#FF9A8E; }
.s5-money-cell.hot .lb{ color:#F2B7AF; }
.s5-after{
  margin-top:26px; display:grid; grid-template-columns:1.1fr 1fr; gap:18px;
}
.s5-after-box{
  border:1px solid rgba(255,255,255,.13); border-radius:16px; padding:28px 30px;
  background:rgba(255,255,255,.035);
}
.s5-after-box .h{ font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--blue-l); }
.s5-after-box .b{ margin-top:14px; font-size:16.5px; line-height:1.75; color:#D8E3F3; }
.s5-after-box .b b{ color:#fff; font-weight:700; }
.s5-after-box .s{ margin-top:14px; font-size:13.5px; line-height:1.7; color:var(--navy-tx); }
.s5-after-bar{ margin-top:20px; }
.s5-after-row{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.s5-after-row .lb{ width:76px; flex:none; font-size:13.5px; font-weight:600; color:var(--navy-tx); }
.s5-after-row .tr{ flex:1; height:12px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
.s5-after-row .fl{ height:100%; border-radius:999px; width:0; transition:width 1.2s var(--ease); }
.s5-after-row.a .fl{ background:linear-gradient(90deg,#FF7A68,#C6342F); }
.s5-after-row.b .fl{ background:linear-gradient(90deg,var(--blue-l),var(--blue)); }
.s5-after-row .vv{ width:96px; flex:none; text-align:right; font-size:14.5px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.rv.in .s5-after-row.a .fl{ width:100%; }
.rv.in .s5-after-row.b .fl{ width:26%; }

@media(max-width:1000px){.s5-steps{ grid-template-columns:1fr; }
.s5-step{ border-left:0; border-top:1px solid rgba(255,255,255,.1); }
.s5-step:first-child{ border-top:0; }
.s5-after{ grid-template-columns:1fr; }
}
@media(max-width:820px){.s5-hero-facts{ grid-template-columns:1fr; }
.s5-hero-facts div{ border-left:0; border-top:1px solid var(--line); }
.s5-hero-facts div:first-child{ border-top:0; }
.s5-money{ grid-template-columns:1fr; }
.s5-money-cell{ border-left:0; border-top:1px solid rgba(255,255,255,.1); }
.s5-money-cell:first-child{ border-top:0; }
.s5-chip{ font-size:13.5px; padding:11px 15px; }
}
/* ── 3. 15문항 셀프진단 ─────────────────────────────────── */
.s5-diag{ background:var(--bg2); }
.s5-diag-wrap{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 400px; gap:28px; align-items:start;
}
.s5-sheet{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.s5-sheet-head{
  padding:24px 28px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.s5-sheet-head .tt{ font-size:17.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s5-sheet-head .ds{ margin-top:5px; font-size:13.5px; color:var(--g500); }
.s5-reset{
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:9px 15px; cursor:pointer; transition:border-color .3s, color .3s;
}
.s5-reset:hover{ border-color:var(--g500); color:var(--ink); }
.s5-grp{ border-top:1px solid var(--line); }
.s5-grp:first-of-type{ border-top:0; }
.s5-grp-head{
  display:flex; align-items:center; gap:12px;
  padding:20px 28px 12px;
}
.s5-grp-head .ix{
  width:24px; height:24px; flex:none; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:600; color:var(--blue-d);
  background:var(--tint); border:1px solid var(--tint-b);
}
.s5-grp-head .nm{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.s5-grp-head .ct{
  margin-left:auto; font-size:12.5px; font-weight:600; color:var(--g500);
  background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:5px 11px;
  transition:color .3s, border-color .3s, background .3s;
}
.s5-grp-head .ct.hit{ color:var(--blue-d); background:var(--tint); border-color:var(--tint-b); }
.s5-q{ display:block; padding:0 28px; }
.s5-q label{
  display:flex; align-items:flex-start; gap:13px;
  padding:13px 16px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  cursor:pointer; transition:border-color .28s var(--ease), background .28s var(--ease);
}
.s5-q label:hover{ border-color:var(--tint-b); background:var(--bg2); }
.s5-q input{ position:absolute; opacity:0; width:0; height:0; }
.s5-q .bx{
  width:21px; height:21px; flex:none; margin-top:1px;
  border:1.5px solid var(--line); border-radius:6px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.s5-q .bx svg{ opacity:0; transform:scale(.6); transition:opacity .22s var(--ease), transform .22s var(--ease); }
.s5-q .tx{ font-size:15.5px; line-height:1.6; color:var(--g700); letter-spacing:-.01em; }
.s5-q input:checked ~ .bx{ background:var(--blue); border-color:var(--blue); }
.s5-q input:checked ~ .bx svg{ opacity:1; transform:none; }
.s5-q input:checked ~ .tx{ color:var(--ink); font-weight:500; }
.s5-q input:focus-visible ~ .bx{ box-shadow:0 0 0 3px var(--tint); }
.s5-q label:has(input:checked){ border-color:var(--tint-b); background:var(--tint); }
.s5-grp:last-of-type .s5-q:last-child label{ margin-bottom:22px; }
/* 결과 패널(스티키) */
.s5-res{ position:sticky; top:96px; }
.s5-res-in{
  background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transition:border-color .4s var(--ease);
}
.s5-res-top{ padding:26px 26px 22px; transition:background .4s var(--ease); }
.s5-res-k{ font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); }
.s5-res-score{ margin-top:12px; display:flex; align-items:baseline; gap:6px; }
.s5-res-score .n{
  font-size:52px; font-weight:700; line-height:1; letter-spacing:-.04em; color:var(--ink);
  font-variant-numeric:tabular-nums; transition:color .4s var(--ease);
}
.s5-res-score .d{ font-size:19px; font-weight:600; color:var(--g500); }
.s5-res-score .u{ margin-left:4px; font-size:14px; color:var(--g500); }
.s5-bar{ margin-top:18px; height:10px; border-radius:999px; background:var(--line); overflow:hidden; }
.s5-bar i{
  display:block; height:100%; width:0; border-radius:999px;
  background:var(--blue); transition:width .5s var(--ease), background .4s var(--ease);
}
.s5-ticks{ margin-top:9px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.s5-ticks span{
  font-size:11px; font-weight:600; text-align:center; color:var(--g500);
  padding:5px 0; border-radius:6px; background:var(--bg2);
  transition:color .3s, background .3s;
}
.s5-ticks span.on{ color:#fff; }
.s5-verdict{
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; border-radius:999px; padding:8px 15px;
  border:1px solid var(--line); color:var(--g700); background:var(--bg2);
  transition:color .4s, background .4s, border-color .4s;
}
.s5-verdict .dt{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.s5-res-hl{ margin-top:16px; font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.5; color:var(--ink); }
.s5-res-tx{ margin-top:10px; font-size:14.5px; line-height:1.75; color:var(--g700); }
.s5-res-body{ padding:22px 26px 26px; border-top:1px solid var(--line); background:#fff; }
.s5-res-lb{ font-size:12.5px; font-weight:600; letter-spacing:.12em; color:var(--g500); }
.s5-weak{ margin-top:11px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.s5-weak span{ color:var(--blue); }
.s5-recs{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.s5-recs a{
  font-size:13.5px; font-weight:600; color:var(--blue-d);
  background:var(--tint); border:1px solid var(--tint-b); border-radius:9px;
  padding:9px 13px; transition:background .3s, border-color .3s;
}
.s5-recs a:hover{ background:#fff; border-color:var(--blue); }
.s5-res-cta{ margin-top:22px; display:grid; gap:9px; }
.s5-res-cta .btn{ justify-content:center; width:100%; font-size:15.5px; padding:14px 20px; }
.s5-res-foot{ margin-top:14px; font-size:12.5px; line-height:1.65; color:var(--g500); text-align:center; }
/* 판정 테마 */
.s5-res-in[data-t="ok"]{ border-color:var(--s5-ok-bd); }
.s5-res-in[data-t="ok"] .s5-res-top{ background:var(--s5-ok-bg); }
.s5-res-in[data-t="ok"] .s5-res-score .n{ color:var(--s5-ok); }
.s5-res-in[data-t="ok"] .s5-bar i{ background:var(--s5-ok); }
.s5-res-in[data-t="ok"] .s5-verdict{ color:var(--s5-ok); background:#fff; border-color:var(--s5-ok-bd); }
.s5-res-in[data-t="ok"] .s5-ticks span.on{ background:var(--s5-ok); }
.s5-res-in[data-t="warn"]{ border-color:var(--s5-warn-bd); }
.s5-res-in[data-t="warn"] .s5-res-top{ background:var(--s5-warn-bg); }
.s5-res-in[data-t="warn"] .s5-res-score .n{ color:var(--s5-warn); }
.s5-res-in[data-t="warn"] .s5-bar i{ background:var(--s5-warn); }
.s5-res-in[data-t="warn"] .s5-verdict{ color:var(--s5-warn); background:#fff; border-color:var(--s5-warn-bd); }
.s5-res-in[data-t="warn"] .s5-ticks span.on{ background:var(--s5-warn); }
.s5-res-in[data-t="risk"]{ border-color:var(--s5-risk-bd); }
.s5-res-in[data-t="risk"] .s5-res-top{ background:var(--s5-risk-bg); }
.s5-res-in[data-t="risk"] .s5-res-score .n{ color:var(--s5-risk); }
.s5-res-in[data-t="risk"] .s5-bar i{ background:var(--s5-risk); }
.s5-res-in[data-t="risk"] .s5-verdict{ color:var(--s5-risk); background:#fff; border-color:var(--s5-risk-bd); }
.s5-res-in[data-t="risk"] .s5-ticks span.on{ background:var(--s5-risk); }
.s5-res-in[data-t="red"]{ border-color:var(--s5-red-bd); }
.s5-res-in[data-t="red"] .s5-res-top{ background:var(--s5-red-bg); }
.s5-res-in[data-t="red"] .s5-res-score .n{ color:var(--s5-red); }
.s5-res-in[data-t="red"] .s5-bar i{ background:var(--s5-red); }
.s5-res-in[data-t="red"] .s5-verdict{ color:var(--s5-red); background:#fff; border-color:var(--s5-red-bd); }
.s5-res-in[data-t="red"] .s5-ticks span.on{ background:var(--s5-red); }
.s5-res-in[data-t="red"] .s5-res-cta .btn-fill{ background:var(--s5-red); }
.s5-res-in[data-t="red"] .s5-res-cta .btn-fill:hover{ background:#A82A26; }

@media(max-width:1000px){.s5-diag-wrap{ grid-template-columns:1fr; }
.s5-res{ position:static; }
}
@media(max-width:640px){.s5-sheet-head{ padding:20px; }
.s5-grp-head{ padding:18px 20px 10px; }
.s5-q{ padding:0 20px; }
.s5-q .tx{ font-size:14.5px; }
.s5-res-top, .s5-res-body{ padding-left:20px; padding-right:20px; }
}
/* ── 4. 대표 인용 3 ─────────────────────────────────────── */
.s5-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s5-quote{
  border:1px solid var(--line); border-radius:18px; background:#fff;
  padding:34px 32px 30px; display:flex; flex-direction:column;
  transition:transform .55s var(--ease), border-color .35s;
}
.s5-quote:hover{ transform:translateY(-6px); border-color:var(--tint-b); }
.s5-quote .mk{
  font-size:38px; line-height:1; font-weight:700; color:var(--tint-b); letter-spacing:-.05em;
}
.s5-quote .tags{ margin-top:18px; display:flex; flex-wrap:wrap; gap:6px; }
.s5-quote .tags span{
  font-size:12px; font-weight:600; color:var(--g700);
  background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:6px 11px;
}
.s5-quote .bd{
  margin-top:18px; font-size:16px; line-height:1.82; color:var(--g700); letter-spacing:-.01em; flex:1;
}
.s5-quote .bd b{ color:var(--ink); font-weight:600; background:linear-gradient(transparent 62%, var(--tint) 62%); }
.s5-quote .who{
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.s5-quote .av{
  width:38px; height:38px; flex:none; border-radius:11px;
  background:linear-gradient(140deg,#1C3A6B,#0A1930);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600;
}
.s5-quote .nm{ font-size:14.5px; font-weight:600; color:var(--ink); }
.s5-quote .mt{ margin-top:3px; font-size:12.5px; color:var(--g500); }
/* ── 5. 방치의 결말 ─────────────────────────────────────── */
.s5-decay{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px; }
.s5-decay-i{
  position:relative; padding:34px 24px 30px;
  border-left:1px solid rgba(255,255,255,.1);
}
.s5-decay-i:first-child{ border-left:0; }
.s5-decay-i .st{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px;
  font-size:13px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s;
}
.s5-decay-i:nth-child(4) .st{ background:rgba(198,52,47,.28); border-color:rgba(255,140,128,.5); }
.s5-decay-i:nth-child(5) .st{ background:#C6342F; border-color:#C6342F; }
.s5-decay-i h4{ margin-top:18px; font-size:16.5px; font-weight:600; color:#fff; line-height:1.5; letter-spacing:-.02em; }
.s5-decay-i p{ margin-top:10px; font-size:14px; line-height:1.75; color:var(--navy-tx); }
.s5-decay-i .tm{
  margin-top:16px; font-size:12px; font-weight:600; letter-spacing:.1em; color:#7E93B5;
}
.s5-decay-line{
  height:2px; margin:0 0 4px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.2) 55%, rgba(198,52,47,.85));
  border-radius:2px;
}
.s5-decay-cap{
  margin-top:44px; text-align:center; font-size:clamp(18px,2vw,24px);
  font-weight:600; letter-spacing:-.02em; line-height:1.6; color:#fff;
}
.s5-decay-cap span{ color:#FF9A8E; }
/* ── 6. 성과 수치 3 ─────────────────────────────────────── */
.s5-mx{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s5-mx-i{
  border:1px solid var(--line); border-radius:18px; background:#fff;
  padding:44px 34px 38px; text-align:center;
  transition:transform .55s var(--ease), border-color .35s, box-shadow .55s var(--ease);
}
.s5-mx-i:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 18px 40px -28px rgba(10,28,62,.5); }
.s5-mx-i .v{
  font-size:clamp(48px,5.4vw,72px); font-weight:700; line-height:1;
  letter-spacing:-.05em; color:var(--blue);
}
.s5-mx-i .v em{ font-style:normal; font-size:.44em; font-weight:600; margin-left:2px; color:var(--blue); }
.s5-mx-i .t{ margin-top:18px; font-size:18.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s5-mx-i .d{ margin-top:11px; font-size:14.5px; line-height:1.75; color:var(--g700); }
.s5-mx-i .src{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--g500);
}

@media(max-width:1000px){.s5-quotes{ grid-template-columns:1fr; }
.s5-decay{ grid-template-columns:repeat(2,1fr); }
.s5-decay-i{ border-left:0; border-top:1px solid rgba(255,255,255,.1); }
.s5-decay-i:nth-child(-n+2){ border-top:0; }
.s5-decay-i:nth-child(2n){ border-left:1px solid rgba(255,255,255,.1); }
.s5-mx{ grid-template-columns:1fr; }
}
@media(max-width:640px){.s5-decay{ grid-template-columns:1fr; }
.s5-decay-i{ border-left:0; border-top:1px solid rgba(255,255,255,.1); padding:26px 4px; }
.s5-decay-i:first-child{ border-top:0; }
.s5-quote{ padding:28px 24px; }
}
/* ── 7. 3PL 사례 ────────────────────────────────────────── */
.s5-case{ background:var(--bg2); }
.s5-case-top{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; }
.s5-case-box{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px 34px; }
.s5-case-box .h{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--blue); }
.s5-case-box h3{ margin-top:14px; font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.5; color:var(--ink); }
.s5-case-box p{ margin-top:12px; font-size:15.5px; line-height:1.8; color:var(--g700); }
.s5-case-svg{ margin-top:22px; width:100%; height:auto; display:block; }
.s5-kpi{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.s5-kpi div{ background:#fff; padding:22px 20px; }
.s5-kpi .k{ font-size:12.5px; color:var(--g500); }
.s5-kpi .v{ margin-top:8px; font-size:21px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.s5-kpi .v b{ color:var(--blue); font-weight:700; }
.s5-kpi .v s{ text-decoration:line-through; color:var(--g500); font-weight:600; }
.s5-kpi .v i{ font-style:normal; color:var(--g500); font-weight:600; margin:0 5px; }
/* ── 8. 서비스 9종 ──────────────────────────────────────── */
.s5-svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s5-svc-g{
  border:1px solid var(--line); border-radius:20px; background:#fff; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .35s, transform .55s var(--ease);
}
.s5-svc-g:hover{ border-color:var(--tint-b); transform:translateY(-5px); }
.s5-svc-hd{ padding:30px 30px 26px; border-bottom:1px solid var(--line); background:var(--bg2); }
.s5-svc-hd .ic{
  width:44px; height:44px; border-radius:13px; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.s5-svc-hd h3{ margin-top:16px; font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s5-svc-hd p{ margin-top:9px; font-size:14px; line-height:1.7; color:var(--g500); }
.s5-svc-list{ list-style:none; padding:10px 30px 26px; margin:0; flex:1; }
.s5-svc-list li{ border-top:1px solid var(--line); }
.s5-svc-list li:first-child{ border-top:0; }
.s5-svc-list a{ display:block; padding:17px 0; }
.s5-svc-list .nm{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; gap:8px; }
.s5-svc-list .nm .ar{ color:var(--g500); font-size:13px; transition:transform .3s var(--ease), color .3s; }
.s5-svc-list a:hover .nm{ color:var(--blue); }
.s5-svc-list a:hover .nm .ar{ transform:translateX(4px); color:var(--blue); }
.s5-svc-list .ds{ margin-top:6px; font-size:13.5px; line-height:1.65; color:var(--g500); }
/* ── 9. YES 리스트 20 ───────────────────────────────────── */
.s5-yes{ background:var(--bg2); }
.s5-yes-grid{
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden;
}
.s5-yes-i{
  background:#fff; padding:18px 22px;
  display:flex; align-items:center; gap:13px;
  transition:background .3s var(--ease);
}
.s5-yes-i:hover{ background:var(--tint); }
.s5-yes-i .no{
  width:26px; flex:none; font-size:12px; font-weight:600; color:var(--g500);
  font-variant-numeric:tabular-nums;
}
.s5-yes-i .ck{
  width:20px; height:20px; flex:none; border-radius:6px; background:var(--tint);
  display:flex; align-items:center; justify-content:center;
}
.s5-yes-i .tx{ font-size:15.5px; line-height:1.55; color:var(--g700); letter-spacing:-.01em; }
.s5-yes-i:hover .tx{ color:var(--ink); }
.s5-yes-cap{
  margin:38px auto 0; max-width:760px; text-align:center;
  font-size:clamp(19px,2.1vw,25px); font-weight:600; letter-spacing:-.02em; line-height:1.6; color:var(--ink);
}
.s5-yes-cap span{ color:var(--blue); }
.s5-yes-btns{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
/* ── 10. 최종 CTA ───────────────────────────────────────── */
.s5-fin{ position:relative; overflow:hidden; }
.s5-fin::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(760px 380px at 50% 110%, rgba(46,111,242,.28), transparent 70%);
  pointer-events:none;
}
.s5-fin .wrapc{ position:relative; }
.s5-fin-form{
  max-width:880px; margin:0 auto;
  border:1px solid rgba(255,255,255,.14); border-radius:20px;
  background:rgba(255,255,255,.04); padding:32px 34px 34px;
}
.s5-fin-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.s5-fld label{ display:block; font-size:13px; font-weight:600; color:var(--navy-tx); letter-spacing:.02em; }
.s5-fld select{
  margin-top:9px; width:100%; font-family:inherit; font-size:15px; font-weight:500; color:#fff;
  background-color:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2); border-radius:11px;
  padding:14px 42px 14px 15px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238FA6C8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  transition:border-color .3s;
}
.s5-fld select:hover{ border-color:rgba(120,175,255,.6); }
.s5-fld select:focus{ outline:none; border-color:var(--blue-l); }
.s5-fld select option{ color:#0A1C3E; background:#fff; }
.s5-fin-echo{
  margin-top:22px; padding:16px 18px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  font-size:14.5px; line-height:1.7; color:#D8E3F3; text-align:center;
}
.s5-fin-echo b{ color:var(--blue-l); font-weight:600; }
.s5-fin-btns{ margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.s5-fin-meta{
  margin-top:26px; text-align:center; font-size:13.5px; line-height:1.8; color:var(--navy-tx);
}
.s5-fin-meta a{ color:#D8E3F3; border-bottom:1px solid rgba(255,255,255,.28); }
.s5-fin-meta a:hover{ color:#fff; }

@media(max-width:1000px){.s5-case-top{ grid-template-columns:1fr; }
.s5-svc{ grid-template-columns:1fr; }
.s5-fin-row{ grid-template-columns:1fr; }
}
@media(max-width:820px){.s5-yes-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){.s5-kpi{ grid-template-columns:1fr; }
.s5-case-box{ padding:26px 22px; }
.s5-fin-form{ padding:24px 20px 26px; }
.s5-yes-i{ padding:16px 16px; }
.s5-yes-i .tx{ font-size:14.5px; }
}




/* ===== sv-6.html <style> 전체 묶음 (조립판) =====
   · 공통 클래스(.sec/.card/.btn/.rv/.footer …) 를 통째로 재정의한 규칙 없음
   · 전역 규칙 2개(body 배경 · :root 변수)는 .s6-sec 계열 안으로 좁히거나 제거
   ================================================= */
/* ===== S6 · theaxlabs 클론 — 다크 미니멀 ===== */
/* [조립판 수정] 원본의 전역 :root 변수 정의 → S6 섹션 안으로 한정.
   조립 페이지는 라이트가 기본이므로 --s6-* 가 페이지 전체로 새지 않게 함. */
.s6-sec, .s6-hero, .s6-cta{
  --s6-line:rgba(255,255,255,.10);
  --s6-line2:rgba(255,255,255,.18);
  --s6-tx:#B8C5D9;
}
/* [조립판 삭제] body{ background:var(--navy); }
— 페이지 전체를 다크로 칠하던 전역 규칙. .s6-sec / .s6-hero / .s6-cta 가
     각자 background 를 갖고 있으므로 제거해도 섹션 안은 그대로 다크. */
/* [조립판 삭제] .s6-badge (position:fixed 식별 배지) — 페이지 단위 오버레이라 제외. */

/* 공통 래퍼 */
.s6-w{ max-width:1240px; margin:0 auto; padding:0 32px; }
.s6-sec{ padding:120px 0; background:var(--navy); }
.s6-sec.alt{ background:var(--navy2); }
.s6-sec + .s6-sec{ border-top:1px solid var(--s6-line); }
/* 섹션 헤드(좌정렬 2단) */
.s6-head{
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:end;
  padding-bottom:34px; margin-bottom:64px;
  border-bottom:1px solid var(--s6-line);
}
.s6-head .sec-pill{
  color:var(--blue-l); background:rgba(77,162,255,.10);
  border:1px solid rgba(77,162,255,.30);
  font-size:12.5px; letter-spacing:.16em; padding:7px 15px;
}
.s6-head .sec-title{ color:#fff; }
.s6-head .sec-sub{ color:var(--s6-tx); font-size:16.5px; margin-top:0; }
.s6-num{
  display:block; font-size:12.5px; font-weight:500; letter-spacing:.2em;
  color:var(--navy-tx); margin-bottom:16px;
}
/* ===== 다크 서브 히어로 ===== */
.s6-hero{
  position:relative; overflow:hidden;
  padding:212px 0 104px;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(77,162,255,.16), transparent 62%),
    radial-gradient(680px 420px at 6% 104%, rgba(46,111,242,.12), transparent 66%),
    var(--navy);
  border-bottom:1px solid var(--s6-line);
}
.s6-hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 84%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 84%);
  pointer-events:none;
}
.s6-hero .in{ position:relative; }
.s6-kick{
  font-size:12.5px; font-weight:600; letter-spacing:.28em; color:var(--blue-l);
  display:flex; align-items:center; gap:12px;
}
.s6-kick::after{ content:''; height:1px; width:64px; background:rgba(77,162,255,.4); }
.s6-hero h1{
  margin-top:26px; max-width:15em;
  font-size:clamp(36px,4.5vw,60px); font-weight:700;
  letter-spacing:-.035em; line-height:1.28; color:#fff;
}
.s6-hero h1 .em{ color:var(--blue-l); }
.s6-hero .lead{
  margin-top:26px; max-width:600px;
  font-size:17.5px; line-height:1.78; color:var(--s6-tx);
}
.s6-hero .ctas{ margin-top:40px; display:flex; gap:12px; flex-wrap:wrap; }
.s6-hero .btn-fill{ background:var(--blue); color:#fff; }
.s6-hero .btn-fill:hover{ background:var(--blue-d); }
/* 히어로 하단 메타 스트립 */
.s6-meta{
  margin-top:72px; padding-top:30px;
  border-top:1px solid var(--s6-line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.s6-meta dt{
  font-size:12.5px; font-weight:500; letter-spacing:.13em; color:var(--navy-tx);
}
.s6-meta dd{
  margin:10px 0 0; font-size:19px; font-weight:600; color:#fff; letter-spacing:-.02em;
}
.s6-meta dd span{ font-size:13.5px; font-weight:400; color:var(--navy-tx); margin-left:6px; }
/* ===== DEFINITION ===== */
.s6-def{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:start; }
.s6-def-body p{
  font-size:18.5px; line-height:1.86; color:var(--s6-tx); letter-spacing:-.012em;
}
.s6-def-body p + p{ margin-top:22px; }
.s6-def-body b{ color:#fff; font-weight:600; }
.s6-gaps{ list-style:none; padding:0; margin:0; border-top:1px solid var(--s6-line); }
.s6-gaps li{
  padding:26px 0 26px 0; border-bottom:1px solid var(--s6-line);
  display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start;
  transition:padding-left .5s var(--ease);
}
.s6-gaps li:hover{ padding-left:10px; }
.s6-gaps .k{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--blue-l); padding-top:4px; }
.s6-gaps .t{ font-size:16.5px; font-weight:600; color:#fff; letter-spacing:-.02em; }
.s6-gaps .d{ margin-top:9px; font-size:14.5px; line-height:1.72; color:var(--navy-tx); }

@media(max-width:1000px){.s6-head{ grid-template-columns:1fr; gap:22px; align-items:start; }
.s6-def{ grid-template-columns:1fr; gap:48px; }
.s6-meta{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
}
@media(max-width:820px){.s6-w{ padding:0 20px; }
.s6-sec{ padding:88px 0; }
.s6-hero{ padding:170px 0 80px; }
}
@media(max-width:640px){.s6-meta{ grid-template-columns:1fr; }
.s6-hero .ctas .btn{ width:100%; justify-content:center; }
}
/* ===== SCOPE · 3-Zone ===== */
.s6-spec{ margin-bottom:60px; }
.s6-spec svg{ width:100%; height:auto; display:block; }
.s6-zones{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--s6-line); border:1px solid var(--s6-line); }
.s6-zone{
  background:var(--navy); padding:38px 34px 34px;
  position:relative; transition:background .5s var(--ease);
}
.s6-sec.alt .s6-zone{ background:var(--navy2); }
.s6-zone:hover{ background:rgba(77,162,255,.06); }
.s6-zone .z{
  font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--blue-l);
  display:flex; align-items:center; gap:10px;
}
.s6-zone .z i{ width:6px; height:6px; border-radius:50%; background:var(--blue-l); font-style:normal; }
.s6-zone.z2 .z, .s6-zone.z2 .z i{ color:#7FB6F5; }
.s6-zone.z2 .z i{ background:#7FB6F5; }
.s6-zone.z3 .z, .s6-zone.z3 .z i{ color:var(--navy-tx); }
.s6-zone.z3 .z i{ background:var(--navy-tx); }
.s6-zone h3{ margin-top:18px; font-size:23px; font-weight:600; color:#fff; letter-spacing:-.025em; }
.s6-zone .dsc{ margin-top:14px; font-size:15px; line-height:1.75; color:var(--s6-tx); min-height:82px; }
.s6-gauge{ margin-top:22px; }
.s6-gauge .lb{ display:flex; justify-content:space-between; font-size:12px; color:var(--navy-tx); letter-spacing:.06em; }
.s6-gauge .bar{ margin-top:9px; height:3px; background:rgba(255,255,255,.10); position:relative; overflow:hidden; }
.s6-gauge .bar i{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));
  transition:width 1.4s var(--ease) .2s;
}
.s6-zone.z3 .s6-gauge .bar i{ background:linear-gradient(90deg,#4A5C7A,#6E80A0); }
.rv.in .s6-gauge .bar i{ width:var(--w,0); }
.s6-ztasks{ list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid var(--s6-line); }
.s6-ztasks li{
  display:flex; gap:11px; font-size:14px; line-height:1.6; color:var(--navy-tx); padding:7px 0;
}
.s6-ztasks li b{ color:var(--blue-l); font-weight:500; }
.s6-zone.z3 .s6-ztasks li b{ color:#7E8AA0; }
.s6-znote{
  margin-top:34px; padding:22px 26px;
  border:1px solid var(--s6-line); border-left:1px solid var(--blue);
  display:flex; gap:18px; align-items:baseline; flex-wrap:wrap;
}
.s6-znote .n{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--blue-l); }
.s6-znote p{ font-size:15px; line-height:1.7; color:var(--s6-tx); flex:1; min-width:260px; }
@media(max-width:1000px){.s6-zones{ grid-template-columns:1fr; }
.s6-zone .dsc{ min-height:0; } }
/* ===== ENGAGEMENT · W01–W08 사이클 ===== */
.s6-cyc{ display:grid; grid-template-columns:520px 1fr; gap:76px; align-items:start; }
.s6-dial{ position:relative; }
.s6-dial svg{ width:100%; height:auto; display:block; overflow:visible; }
.s6-dial .arc{ transition:stroke-opacity .45s var(--ease), stroke-width .45s var(--ease); }
.s6-dial .node{ transition:transform .5s var(--ease); transform-origin:center; }
.s6-dial .nodec{ transition:fill .4s, stroke .4s, r .4s var(--ease); }
.s6-dial g[data-w].on .nodec{ fill:#4DA2FF; stroke:#4DA2FF; }
.s6-dial g[data-w].on .nodet{ fill:#0A1930; }
.s6-dial g[data-w]{ cursor:default; }
.s6-steps{ border-top:1px solid var(--s6-line); }
.s6-ph{ border-bottom:1px solid var(--s6-line); padding:26px 0 28px; }
.s6-ph-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.s6-ph-h .ph{ font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--blue-l); }
.s6-ph-h h3{ font-size:20px; font-weight:600; color:#fff; letter-spacing:-.025em; }
.s6-ph-h .wk{ margin-left:auto; font-size:12.5px; color:var(--navy-tx); letter-spacing:.08em; }
.s6-wlist{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--s6-line); border:1px solid var(--s6-line); }
.s6-wl{ background:var(--navy); padding:20px 22px; transition:background .45s var(--ease); }
.s6-wl:hover{ background:rgba(77,162,255,.07); }
.s6-wl .w{ font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--blue-l); }
.s6-wl .t{ margin-top:9px; font-size:15.5px; font-weight:600; color:#fff; letter-spacing:-.02em; }
.s6-wl .d{ margin-top:8px; font-size:13.5px; line-height:1.68; color:var(--navy-tx); }
.s6-cyc-out{
  margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--s6-line); border:1px solid var(--s6-line);
}
.s6-cyc-out div{ background:var(--navy); padding:22px 24px; }
.s6-cyc-out .k{ font-size:12.5px; color:var(--navy-tx); letter-spacing:.1em; }
.s6-cyc-out .v{ margin-top:10px; font-size:15.5px; font-weight:600; color:#fff; line-height:1.5; letter-spacing:-.02em; }
@media(max-width:1200px){.s6-cyc{ grid-template-columns:420px 1fr; gap:52px; } }
@media(max-width:1000px){.s6-cyc{ grid-template-columns:1fr; gap:56px; }
.s6-dial{ max-width:460px; margin:0 auto; } }
@media(max-width:640px){.s6-wlist{ grid-template-columns:1fr; }
.s6-cyc-out{ grid-template-columns:1fr; } }
/* ===== RESULT · 사례 수치 ===== */
.s6-case{ display:grid; grid-template-columns:.86fr 1.14fr; gap:72px; align-items:start; }
.s6-case-lead .tag{
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.14em;
  color:var(--blue-l); border:1px solid rgba(77,162,255,.30); border-radius:999px; padding:7px 15px;
}
.s6-case-lead h3{ margin-top:22px; font-size:27px; font-weight:600; color:#fff; line-height:1.44; letter-spacing:-.03em; }
.s6-case-lead p{ margin-top:18px; font-size:15.5px; line-height:1.8; color:var(--s6-tx); }
.s6-case-lead .quote{
  margin-top:30px; padding:22px 0 0; border-top:1px solid var(--s6-line);
  font-size:15px; line-height:1.78; color:var(--navy-tx);
}
.s6-case-lead .quote b{ display:block; margin-top:12px; font-size:13px; font-weight:500; color:#7E8AA0; }
.s6-tbl{ width:100%; border-collapse:collapse; }
.s6-tbl tr{ border-top:1px solid var(--s6-line); transition:background .4s var(--ease); }
.s6-tbl tr:last-child{ border-bottom:1px solid var(--s6-line); }
.s6-tbl tr:hover{ background:rgba(77,162,255,.05); }
.s6-tbl th{
  text-align:left; padding:22px 8px 22px 0; width:34%;
  font-size:14px; font-weight:500; color:var(--navy-tx); letter-spacing:.02em; vertical-align:middle;
}
.s6-tbl td{ padding:22px 0; font-size:20px; font-weight:600; color:#fff; letter-spacing:-.025em; vertical-align:middle; }
.s6-tbl td em{ font-style:normal; color:var(--blue-l); }
.s6-tbl td .ar{ margin:0 10px; color:var(--navy-tx); font-weight:400; font-size:15px; }
.s6-tbl td .sub{ display:block; margin-top:7px; font-size:13px; font-weight:400; color:var(--navy-tx); letter-spacing:0; }
.s6-derive{ margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--s6-line); border:1px solid var(--s6-line); }
.s6-derive div{ background:var(--navy2); padding:24px; font-size:15.5px; font-weight:600; color:#fff; letter-spacing:-.02em; line-height:1.55; }
.s6-derive div span{ display:block; margin-top:9px; font-size:12.5px; font-weight:400; color:var(--navy-tx); letter-spacing:.02em; }
@media(max-width:1000px){.s6-case{ grid-template-columns:1fr; gap:48px; }
.s6-derive{ grid-template-columns:1fr; } }
@media(max-width:640px){.s6-tbl th{ display:block; width:auto; padding:20px 0 0; }
.s6-tbl td{ display:block; padding:8px 0 20px; }
}
/* ===== PRINCIPLES ===== */
.s6-prin{ display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start; }
.s6-prin-mark{ position:sticky; top:120px; }
.s6-prin-mark svg{ width:100%; height:auto; display:block; }
.s6-plist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--s6-line); }
.s6-plist li{
  display:grid; grid-template-columns:78px 1fr; gap:26px; align-items:start;
  padding:32px 0; border-bottom:1px solid var(--s6-line);
  transition:padding-left .55s var(--ease), background .45s var(--ease);
}
.s6-plist li:hover{ padding-left:14px; background:rgba(77,162,255,.04); }
.s6-plist .n{ font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--blue-l); padding-top:5px; }
.s6-plist .t{ font-size:20px; font-weight:600; color:#fff; letter-spacing:-.028em; line-height:1.5; }
.s6-plist .d{ margin-top:11px; font-size:15px; line-height:1.76; color:var(--s6-tx); max-width:46em; }
@media(max-width:1000px){.s6-prin{ grid-template-columns:1fr; gap:44px; }
.s6-prin-mark{ position:static; max-width:380px; }
}
@media(max-width:640px){.s6-plist li{ grid-template-columns:1fr; gap:10px; } }
/* ===== FIVE AXES · 다섯 축 + 서비스 9종 ===== */
.s6-ax{ display:grid; grid-template-columns:1fr 1.06fr; gap:76px; align-items:center; }
.s6-ax-fig svg{ width:100%; height:auto; display:block; overflow:visible; }
.s6-ax-fig .vx{ transition:r .5s var(--ease), fill .4s; }
.s6-axlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--s6-line); }
.s6-axlist > li{
  padding:26px 0 28px; border-bottom:1px solid var(--s6-line);
  transition:padding-left .55s var(--ease);
}
.s6-axlist > li:hover{ padding-left:12px; }
.s6-ax-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.s6-ax-h .n{ font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--blue-l); }
.s6-ax-h h3{ font-size:21px; font-weight:600; color:#fff; letter-spacing:-.028em; }
.s6-ax-h .cnt{ margin-left:auto; font-size:12.5px; color:var(--navy-tx); letter-spacing:.06em; }
.s6-ax-d{ margin-top:11px; font-size:15px; line-height:1.74; color:var(--s6-tx); max-width:44em; }
.s6-tags{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.s6-tags a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:500; color:var(--s6-tx);
  border:1px solid var(--s6-line2); border-radius:999px; padding:8px 15px;
  transition:border-color .4s var(--ease), color .4s, background .4s;
}
.s6-tags a::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--blue-l); opacity:.75; }
.s6-tags a:hover{ color:#fff; border-color:rgba(77,162,255,.55); background:rgba(77,162,255,.08); }
.s6-ax-note{
  margin-top:44px; padding-top:28px; border-top:1px solid var(--s6-line);
  display:flex; gap:26px; align-items:baseline; flex-wrap:wrap;
}
.s6-ax-note p{ flex:1; min-width:280px; font-size:15.5px; line-height:1.76; color:var(--s6-tx); }
.s6-ax-note .go{
  font-size:14.5px; font-weight:600; color:var(--blue-l);
  display:inline-flex; align-items:center; gap:9px;
  border-bottom:1px solid rgba(77,162,255,.4); padding-bottom:4px;
  transition:gap .4s var(--ease), color .3s;
}
.s6-ax-note .go:hover{ gap:14px; color:#fff; }
@media(max-width:1200px){.s6-ax{ gap:52px; } }
@media(max-width:1000px){.s6-ax{ grid-template-columns:1fr; gap:48px; }
.s6-ax-fig{ max-width:560px; margin:0 auto; } }
/* ===== CTA ===== */
.s6-cta{
  position:relative; overflow:hidden; padding:132px 0 140px;
  background:
    radial-gradient(760px 420px at 50% 118%, rgba(77,162,255,.20), transparent 66%),
    var(--navy);
  border-top:1px solid var(--s6-line);
  text-align:center;
}
.s6-cta::before{
  content:''; position:absolute; left:50%; top:0; width:1px; height:64px;
  background:linear-gradient(to bottom, rgba(77,162,255,.6), transparent);
}
.s6-cta .kk{ font-size:12.5px; font-weight:600; letter-spacing:.28em; color:var(--blue-l); }
.s6-cta h2{
  margin-top:24px; font-size:clamp(30px,3.6vw,46px); font-weight:700;
  color:#fff; letter-spacing:-.035em; line-height:1.38;
}
.s6-cta p{ margin:20px auto 0; max-width:560px; font-size:16.5px; line-height:1.78; color:var(--s6-tx); }
.s6-cta .btns{ margin-top:38px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.s6-cta .fine{
  margin-top:34px; font-size:13.5px; color:var(--navy-tx); letter-spacing:.02em;
}
.s6-cta .fine b{ color:var(--s6-tx); font-weight:500; }
@media(max-width:640px){.s6-cta{ padding:100px 0 110px; }
.s6-cta .btns .btn{ width:100%; justify-content:center; } }




/* ===== sv-7.html <style> 전체 묶음 (조립판) =====
   · 공통 클래스를 통째로 재정의한 규칙 없음 (.s7-dark .sec-title 등은 프리픽스 파생이라 유지)
   · 풀스크린 min-height:100vh 2곳 → auto
   ================================================= */
/* ══════════════════════════════════════════════════════════
   S7 · ai-team.kr/ax-consulting 클론 — 풀스크린 스크롤형
   모든 커스텀 클래스는 .s7- 프리픽스. .card 재정의 없음.
   ══════════════════════════════════════════════════════════ */

/* ── 0. 풀스크린 골격 ─────────────────────────────────── */
/* [조립판 수정] min-height:100vh → auto (여러 섹션이 이어지므로). 상하 여백 132/104 는 유지. */
.s7-full{ position:relative; min-height:auto; display:flex; align-items:center; padding:132px 0 104px; overflow:hidden; }
.s7-full.s7-dark{ background:var(--navy); color:#fff; }
.s7-full.s7-tint{ background:var(--bg2); }
.s7-in{ width:100%; max-width:1240px; margin:0 auto; padding:0 32px; }
.s7-inw{ width:100%; max-width:1460px; margin:0 auto; padding:0 32px; }
.s7-dark .sec-title{ color:#fff; }
.s7-dark .sec-sub{ color:#B8C5D9; }
.s7-dark .sec-pill{ color:var(--blue-l); background:rgba(77,162,255,.12); border-color:rgba(77,162,255,.34); }
/* ── 1. 리빌(강한 전환) ───────────────────────────────── */
.s7-rv{ opacity:0; transform:translateY(46px); transition:opacity 1s var(--ease), transform 1.05s var(--ease); transition-delay:var(--d,0s); }
.s7-rv.in{ opacity:1; transform:none; }
.s7-rvs{ opacity:0; transform:scale(.945) translateY(30px); transition:opacity .95s var(--ease), transform 1.05s var(--ease); transition-delay:var(--d,0s); }
.s7-rvs.in{ opacity:1; transform:none; }
.s7-rvl{ clip-path:inset(0 100% 0 0); transition:clip-path 1.15s var(--ease); transition-delay:var(--d,0s); }
.s7-rvl.in{ clip-path:inset(0 0 0 0); }
@media(prefers-reduced-motion:reduce){.s7-rv, .s7-rvs, .s7-rvl{ opacity:1; transform:none; clip-path:none; transition:none; }
}
/* ── 2. 우측 섹션 레일 ────────────────────────────────── */
.s7-rail{ position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:70; display:flex; flex-direction:column; gap:15px; }
.s7-rail a{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.s7-rail .lb{ font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--g500); opacity:0; transform:translateX(6px); transition:opacity .4s var(--ease), transform .4s var(--ease), color .3s; white-space:nowrap; }
.s7-rail .dt{ width:7px; height:7px; border-radius:50%; background:var(--line); border:1px solid var(--tint-b); transition:transform .5s var(--ease), background .35s, box-shadow .35s; }
.s7-rail a:hover .lb{ opacity:1; transform:none; }
.s7-rail a.on .lb{ opacity:1; transform:none; color:var(--blue-d); }
.s7-rail a.on .dt{ background:var(--blue); border-color:var(--blue); transform:scale(1.55); box-shadow:0 0 0 5px rgba(46,111,242,.13); }
body.s7-onnavy .s7-rail .lb{ color:var(--navy-tx); }
body.s7-onnavy .s7-rail a.on .lb{ color:#fff; }
body.s7-onnavy .s7-rail .dt{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); }
body.s7-onnavy .s7-rail a.on .dt{ background:var(--blue-l); border-color:var(--blue-l); box-shadow:0 0 0 5px rgba(77,162,255,.18); }
@media(max-width:1200px){.s7-rail{ display:none; } }
/* ── 3. 히어로 ───────────────────────────────────────── */
/* [조립판 수정] min-height:100vh → auto. 상하 여백 150/120 유지. */
.s7-hero{ min-height:auto; position:relative; display:flex; align-items:center; padding:150px 0 120px; overflow:hidden; background:#fff; }
.s7-hero .s7-bg{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 520px at 78% 16%, rgba(77,162,255,.20), transparent 62%),
    radial-gradient(680px 480px at 12% 78%, rgba(46,111,242,.13), transparent 64%),
    linear-gradient(180deg,#FFFFFF 0%,#F7F9FD 100%);
}
.s7-hero .s7-grid-bg{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(760px 520px at 50% 44%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(760px 520px at 50% 44%, #000 20%, transparent 78%);
}
.s7-hero .s7-in{ position:relative; }
.s7-hgrid{ display:grid; grid-template-columns:1.06fr .94fr; gap:64px; align-items:center; }
.s7-kick{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:.24em; color:var(--blue-d); }
.s7-kick .bar{ width:34px; height:1px; background:var(--tint-b); }
.s7-h1{ margin-top:24px; font-size:clamp(38px,5.1vw,70px); font-weight:700; letter-spacing:-.035em; line-height:1.2; color:var(--ink); }
.s7-h1 .em{ color:var(--blue); }
.s7-h1 .ln{ display:block; }
.s7-hlead{ margin-top:26px; max-width:520px; font-size:18px; line-height:1.78; color:var(--g700); }
.s7-hctas{ margin-top:38px; display:flex; gap:12px; flex-wrap:wrap; }
.s7-hmeta{ margin-top:46px; padding-top:26px; border-top:1px solid var(--line); display:flex; gap:38px; flex-wrap:wrap; }
.s7-hmeta div{ }
.s7-hmeta .k{ font-size:12.5px; font-weight:600; letter-spacing:.14em; color:var(--g500); }
.s7-hmeta .v{ margin-top:9px; font-size:16px; font-weight:600; color:var(--ink); line-height:1.5; }
.s7-hvis{ position:relative; }
.s7-hcardw{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 26px 70px -30px rgba(10,28,62,.30); }
.s7-hcardw svg{ display:block; width:100%; height:auto; }
.s7-hfloat{ position:absolute; left:-26px; bottom:34px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 19px; box-shadow:0 18px 44px -22px rgba(10,28,62,.34); }
.s7-hfloat .t{ font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--g500); }
.s7-hfloat .n{ margin-top:6px; font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--blue); }
.s7-hfloat .s{ margin-top:3px; font-size:12.5px; color:var(--g700); }
.s7-scroll{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:11px; z-index:2; }
.s7-scroll .w{ font-size:11.5px; font-weight:600; letter-spacing:.28em; color:var(--g500); }
.s7-scroll .tr{ width:1px; height:52px; background:var(--line); position:relative; overflow:hidden; }
.s7-scroll .tr::after{ content:''; position:absolute; left:0; top:-52px; width:1px; height:52px; background:linear-gradient(180deg,transparent,var(--blue)); animation:s7drop 2.1s var(--ease) infinite; }
@keyframes s7drop{0%{ transform:translateY(0); }
70%, 100%{ transform:translateY(104px); } }
@media(prefers-reduced-motion:reduce){.s7-scroll .tr::after{ animation:none; top:0; } }
/* ── 4. 인트로(4단계 개요) ───────────────────────────── */
.s7-ov{ margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.s7-ov-c{ padding:34px 30px 8px; border-right:1px solid var(--line); position:relative; }
.s7-ov-c:last-child{ border-right:0; }
.s7-ov-c::before{ content:''; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--blue); transition:width 1.1s var(--ease); transition-delay:var(--d,0s); }
.s7-ov-c.in::before{ width:100%; }
.s7-ov-n{ font-size:13px; font-weight:600; letter-spacing:.18em; color:var(--blue); }
.s7-ov-t{ margin-top:16px; font-size:21px; font-weight:600; letter-spacing:-.02em; line-height:1.42; color:var(--ink); }
.s7-ov-d{ margin-top:11px; font-size:15px; line-height:1.72; color:var(--g700); }
@media(max-width:1000px){.s7-ov{ grid-template-columns:repeat(2,1fr); }
.s7-ov-c:nth-child(2){ border-right:0; }
.s7-ov-c:nth-child(-n+2){ border-bottom:1px solid var(--line); padding-bottom:30px; } }
@media(max-width:560px){.s7-ov{ grid-template-columns:1fr; }
.s7-ov-c{ border-right:0; border-bottom:1px solid var(--line); padding:28px 0 26px; }
.s7-ov-c:last-child{ border-bottom:0; } }
/* ── 5. 4단계 풀스크린 스텝 ──────────────────────────── */
.s7-step .s7-in{ position:relative; z-index:2; }
.s7-sgrid{ display:grid; grid-template-columns:1fr 1.02fr; gap:74px; align-items:center; }
.s7-step:nth-of-type(even) .s7-sgrid{ direction:rtl; }
.s7-step:nth-of-type(even) .s7-sgrid > *{ direction:ltr; }
.s7-ghost{ position:absolute; right:-10px; top:-40px; font-size:clamp(150px,22vw,300px); font-weight:700; letter-spacing:-.06em; line-height:.8; color:var(--ink); opacity:.038; pointer-events:none; z-index:1; user-select:none; }
.s7-dark .s7-ghost{ color:#fff; opacity:.05; }
.s7-stag{ display:inline-flex; align-items:center; gap:11px; font-size:13px; font-weight:600; letter-spacing:.18em; color:var(--blue-d); }
.s7-dark .s7-stag{ color:var(--blue-l); }
.s7-stag .no{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:26px; padding:0 9px; border-radius:999px; background:var(--tint); border:1px solid var(--tint-b); font-size:12.5px; letter-spacing:.06em; }
.s7-dark .s7-stag .no{ background:rgba(77,162,255,.13); border-color:rgba(77,162,255,.34); }
.s7-sbody{ margin-top:22px; font-size:17.5px; line-height:1.8; color:var(--g700); max-width:520px; }
.s7-dark .s7-sbody{ color:#B8C5D9; }
.s7-slist{ margin-top:32px; list-style:none; padding:0; display:grid; gap:13px; }
.s7-slist li{ display:flex; gap:13px; align-items:flex-start; font-size:15.5px; line-height:1.62; color:var(--ink); }
.s7-dark .s7-slist li{ color:#E5ECF7; }
.s7-slist .ic{ flex:none; width:21px; height:21px; margin-top:1px; border-radius:6px; background:var(--tint); color:var(--blue-d); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; }
.s7-dark .s7-slist .ic{ background:rgba(77,162,255,.16); color:var(--blue-l); }
.s7-svis{ border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 24px 64px -32px rgba(10,28,62,.30); }
.s7-dark .s7-svis{ border-color:rgba(255,255,255,.12); background:var(--navy2); box-shadow:none; }
.s7-svis svg{ display:block; width:100%; height:auto; }
@media(max-width:1000px){.s7-sgrid{ grid-template-columns:1fr; gap:42px; }
.s7-step:nth-of-type(even) .s7-sgrid{ direction:ltr; }
.s7-full{ padding:112px 0 84px; min-height:auto; }
.s7-hgrid{ grid-template-columns:1fr; gap:48px; }
.s7-hfloat{ left:auto; right:16px; bottom:-18px; }
}
@media(max-width:820px){.s7-in, .s7-inw{ padding:0 20px; } }
/* ── 6. Point 01~03 ──────────────────────────────────── */
.s7-pbridge{ text-align:center; margin-bottom:52px; }
.s7-pbridge .t{ font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-.02em; color:var(--g500); }
.s7-pgrid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center; }
.s7-pno{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; letter-spacing:.12em; color:var(--blue); }
.s7-pno::before{ content:''; width:20px; height:2px; background:var(--blue); }
.s7-dark .s7-pno{ color:var(--blue-l); }
.s7-dark .s7-pno::before{ background:var(--blue-l); }
.s7-ptitle{ margin-top:18px; }
.s7-pbody{ margin-top:20px; font-size:17.5px; line-height:1.8; color:var(--g700); max-width:500px; }
.s7-dark .s7-pbody{ color:#B8C5D9; }
.s7-teaser{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.s7-tc{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:20px 20px 22px; transition:transform .55s var(--ease), border-color .35s, box-shadow .5s var(--ease); }
.s7-tc:hover{ transform:translateY(-6px); border-color:var(--tint-b); box-shadow:0 18px 40px -26px rgba(10,28,62,.3); }
.s7-tc .g{ font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--blue-d); background:var(--tint); border-radius:999px; padding:5px 10px; display:inline-block; }
.s7-tc .n{ margin-top:13px; font-size:16px; font-weight:600; letter-spacing:-.015em; line-height:1.4; color:var(--ink); }
.s7-tc .d{ margin-top:8px; font-size:13.2px; line-height:1.62; color:var(--g500); }
.s7-tmore{ grid-column:span 3; display:flex; align-items:center; justify-content:center; gap:12px; padding:20px; border:1px dashed var(--tint-b); border-radius:15px; background:var(--tint); font-size:15px; font-weight:600; color:var(--blue-d); }
.s7-tmore b{ font-weight:700; }
.s7-mini{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); }
.s7-dark .s7-mini{ border-color:rgba(255,255,255,.14); }
.s7-mc{ padding:26px 18px 6px; border-right:1px solid var(--line); position:relative; }
.s7-dark .s7-mc{ border-color:rgba(255,255,255,.14); }
.s7-mc:last-child{ border-right:0; }
.s7-mc .n{ font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--blue); }
.s7-dark .s7-mc .n{ color:var(--blue-l); }
.s7-mc .t{ margin-top:12px; font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s7-dark .s7-mc .t{ color:#fff; }
.s7-mc .d{ margin-top:9px; font-size:13.6px; line-height:1.68; color:var(--g700); }
.s7-dark .s7-mc .d{ color:#8FA6C8; }
.s7-p3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px; }
.s7-p3c{ border:1px solid var(--line); border-radius:16px; padding:28px 26px 30px; background:#fff; transition:transform .55s var(--ease), border-color .35s; }
.s7-dark .s7-p3c{ background:var(--navy2); border-color:rgba(255,255,255,.12); }
.s7-p3c:hover{ transform:translateY(-6px); border-color:var(--tint-b); }
.s7-p3c .ic{ width:40px; height:40px; border-radius:11px; background:var(--tint); color:var(--blue-d); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.s7-dark .s7-p3c .ic{ background:rgba(77,162,255,.15); color:var(--blue-l); }
.s7-p3c .t{ margin-top:18px; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s7-dark .s7-p3c .t{ color:#fff; }
.s7-p3c .d{ margin-top:11px; font-size:14.6px; line-height:1.74; color:var(--g700); }
.s7-dark .s7-p3c .d{ color:#8FA6C8; }
@media(max-width:1000px){.s7-pgrid{ grid-template-columns:1fr; gap:42px; }
.s7-mini{ grid-template-columns:repeat(2,1fr); }
.s7-mc{ border-bottom:1px solid var(--line); padding-bottom:22px; }
.s7-mc:nth-child(2n){ border-right:0; }
.s7-p3{ grid-template-columns:1fr; }
}
@media(max-width:640px){.s7-teaser{ grid-template-columns:repeat(2,1fr); }
.s7-tmore{ grid-column:span 2; }
.s7-mini{ grid-template-columns:1fr; }
.s7-mc{ border-right:0; } }
/* ── 7. 90개 분야 그리드 ─────────────────────────────── */
.s7-fields{ padding:120px 0 128px; background:var(--bg2); border-top:1px solid var(--line); }
.s7-legend{ margin:0 auto 34px; display:flex; flex-wrap:wrap; gap:9px; justify-content:center; max-width:1060px; }
.s7-chip{ font-family:inherit; cursor:pointer; font-size:13.6px; font-weight:600; color:var(--g700); background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 17px; transition:border-color .3s, color .3s, background .3s, transform .45s var(--ease); }
.s7-chip:hover{ border-color:var(--tint-b); transform:translateY(-2px); }
.s7-chip .c{ margin-left:7px; font-size:12px; font-weight:600; color:var(--g500); }
.s7-chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.s7-chip.on .c{ color:rgba(255,255,255,.6); }
.s7-fgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.s7-fc{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:17px 17px 19px; transition:transform .5s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
.s7-fc:hover{ transform:translateY(-5px); border-color:var(--tint-b); box-shadow:0 16px 34px -24px rgba(10,28,62,.32); }
.s7-fc .tg{ font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--blue-d); }
.s7-fc h4{ margin:8px 0 0; font-size:15.2px; font-weight:600; letter-spacing:-.015em; line-height:1.38; color:var(--ink); }
.s7-fc p{ margin:7px 0 0; font-size:12.8px; line-height:1.6; color:var(--g500); }
.s7-fc.off{ display:none; }
.s7-fgrid.in .s7-fc{ animation:s7pop .62s var(--ease) both; }
.s7-fgrid.in .s7-fc:nth-child(5n+1){ animation-delay:.02s; }
.s7-fgrid.in .s7-fc:nth-child(5n+2){ animation-delay:.07s; }
.s7-fgrid.in .s7-fc:nth-child(5n+3){ animation-delay:.12s; }
.s7-fgrid.in .s7-fc:nth-child(5n+4){ animation-delay:.17s; }
.s7-fgrid.in .s7-fc:nth-child(5n+5){ animation-delay:.22s; }
@keyframes s7pop{from{ opacity:0; transform:translateY(22px) scale(.97); }
to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){.s7-fgrid.in .s7-fc{ animation:none; } }
.s7-fnote{ margin-top:26px; text-align:center; font-size:14.5px; color:var(--g500); }
.s7-fnote b{ color:var(--blue-d); font-weight:600; }
@media(max-width:1200px){.s7-fgrid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:1000px){.s7-fgrid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px){.s7-fgrid{ grid-template-columns:repeat(2,1fr); gap:10px; }
.s7-fc{ padding:14px 13px 16px; }
.s7-fc h4{ font-size:14.2px; }
.s7-fc p{ font-size:12.2px; }
.s7-chip{ font-size:12.8px; padding:9px 13px; } }
/* ── 8. 5단계 진행 흐름 ──────────────────────────────── */
.s7-flow{ padding:124px 0; background:#fff; }
.s7-fl{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:16px; }
.s7-fl::before{ content:''; position:absolute; left:6%; right:6%; top:26px; height:2px; background:var(--line); }
.s7-fl::after{ content:''; position:absolute; left:6%; top:26px; height:2px; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-l)); transition:width 1.6s var(--ease); }
.s7-fl.in::after{ width:88%; }
@media(prefers-reduced-motion:reduce){.s7-fl.in::after{ transition:none; } }
.s7-flc{ position:relative; text-align:center; padding:0 8px; }
.s7-flc .d{ width:54px; height:54px; margin:0 auto; border-radius:50%; background:#fff; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:var(--g500); transition:border-color .5s var(--ease), color .5s, background .5s, transform .6s var(--ease); transition-delay:var(--d,0s); }
.s7-fl.in .s7-flc .d{ border-color:var(--blue); color:#fff; background:var(--blue); transform:scale(1.04); }
.s7-flc .t{ margin-top:20px; font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s7-flc .s{ margin-top:10px; font-size:14.5px; line-height:1.72; color:var(--g700); }
.s7-flc .o{ margin-top:14px; display:inline-block; font-size:12.5px; font-weight:600; color:var(--blue-d); background:var(--tint); border-radius:999px; padding:6px 13px; }
@media(max-width:1000px){.s7-fl{ grid-template-columns:1fr; gap:0; }
.s7-fl::before{ left:26px; right:auto; top:8px; bottom:8px; width:2px; height:auto; }
.s7-fl::after{ display:none; }
.s7-flc{ text-align:left; display:grid; grid-template-columns:54px 1fr; gap:20px; padding:0 0 34px; }
.s7-flc .d{ margin:0; }
.s7-flc .t{ margin-top:12px; grid-column:2; }
.s7-flc .s, .s7-flc .o{ grid-column:2; }
}
/* ── 9. 차별점 2블록 ─────────────────────────────────── */
.s7-diff{ background:var(--navy); color:#fff; }
.s7-dblock{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:74px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.s7-dblock:last-child{ border-bottom:0; }
.s7-dblock.rev .s7-dtx{ order:2; }
.s7-dtag{ font-size:12.5px; font-weight:600; letter-spacing:.2em; color:var(--blue-l); }
.s7-dh{ margin-top:18px; font-size:clamp(28px,3.2vw,42px); font-weight:700; letter-spacing:-.03em; line-height:1.34; color:#fff; }
.s7-dp{ margin-top:20px; font-size:16.6px; line-height:1.82; color:#B8C5D9; max-width:520px; }
.s7-dtags{ margin-top:28px; display:flex; flex-wrap:wrap; gap:9px; }
.s7-dtags span{ font-size:13.5px; font-weight:600; color:#D6E3F5; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:9px 16px; }
.s7-dvis{ border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.12); }
.s7-dvis svg{ display:block; width:100%; height:auto; }
@media(max-width:1000px){.s7-dblock{ grid-template-columns:1fr; gap:34px; padding:54px 0; }
.s7-dblock.rev .s7-dtx{ order:0; } }
/* ── 10. 사례 3 ──────────────────────────────────────── */
.s7-cases{ padding:124px 0; background:var(--bg2); }
.s7-clist{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.s7-cc{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .55s var(--ease), border-color .35s, box-shadow .5s var(--ease); }
.s7-cc:hover{ transform:translateY(-8px); border-color:var(--tint-b); box-shadow:0 24px 54px -30px rgba(10,28,62,.34); }
.s7-cc .th{ height:168px; position:relative; overflow:hidden; }
.s7-cc .th svg{ position:absolute; inset:0; width:100%; height:100%; }
.s7-cc .bd{ padding:26px 26px 28px; flex:1; display:flex; flex-direction:column; }
.s7-cc .cat{ font-size:11.5px; font-weight:600; letter-spacing:.14em; color:var(--blue-d); }
.s7-cc h3{ margin:12px 0 0; font-size:19.5px; font-weight:600; letter-spacing:-.025em; line-height:1.42; color:var(--ink); }
.s7-cc .tx{ margin-top:13px; font-size:14.6px; line-height:1.76; color:var(--g700); flex:1; }
.s7-cmt{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; }
.s7-cmt span{ font-size:12.5px; font-weight:600; color:var(--ink); background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:7px 11px; }
.s7-cmt span em{ font-style:normal; color:var(--blue-d); }
.s7-cc .more{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--blue-d); }
.s7-cc:hover .more{ gap:12px; }
@media(max-width:1000px){.s7-clist{ grid-template-columns:1fr; } }
/* ── 11. 마무리 ──────────────────────────────────────── */
.s7-end{ padding:128px 0 136px; background:#fff; text-align:center; }
.s7-end .sec-title{ max-width:820px; margin-left:auto; margin-right:auto; }
.s7-endctas{ margin-top:38px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.s7-endsub{ margin-top:26px; font-size:14.5px; color:var(--g500); }
/* [조립판 추가] 원본에서 st2·st4 는 .s7-step 형제 중 짝수번째라 좌우가 뒤집혀 있었음
   (.s7-step:nth-of-type(even) .s7-sgrid{direction:rtl}
).
   조립 페이지에서는 형제 순서가 달라져 뒤집힘이 사라지므로 id 로 고정한다. */
#s7-st2 .s7-sgrid, #s7-st4 .s7-sgrid{ direction:rtl; }
#s7-st2 .s7-sgrid > *, #s7-st4 .s7-sgrid > *{ direction:ltr; }
@media(max-width:1000px){#s7-st2 .s7-sgrid, #s7-st4 .s7-sgrid{ direction:ltr; }
}





/* [sv-mix] S8 안 전용 CSS — 스티키 앵커바(.s8-anchor*)와 .sec 재정의 제외 */
/* ===========================================================
   S8 — winningppt.com/service/ir 골격 클론
   스티키 앵커바 · 문제제기 수치 타임라인 · 네 겹 설계 레이어
   유형 3선택 · Before/After 재구성 · 일반 vs 우리 비교표
   모든 커스텀 클래스는 .s8- 프리픽스
   =========================================================== */

/* ---------- 기본 ---------- */
html{ scroll-behavior:smooth; }
@media(prefers-reduced-motion:reduce){ }
.s8-badge{
  position:fixed; left:14px; bottom:14px; z-index:95;
  font:600 12px/1 Paperlogy,sans-serif; color:#fff;
  background:#0A1C3E; border-radius:999px; padding:9px 14px;
}
.s8-sec{ position:relative; }
.s8-sec + .s8-sec{ border-top:1px solid var(--line); }
.s8-sec.s8-dark + .s8-sec{ border-top:0; }
.s8-sec.s8-dark{ border-top:0; }
[id^="s8-a-"]{ scroll-margin-top:136px; }
/* ---------- 서브 히어로 ---------- */
.s8-hero{
  padding:158px 0 84px;
  background:
    radial-gradient(900px 420px at 78% 6%, rgba(46,111,242,.09), transparent 62%),
    radial-gradient(760px 380px at 12% 96%, rgba(77,162,255,.10), transparent 60%),
    var(--bg2);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.s8-hero .in{ position:relative; max-width:1180px; margin:0 auto; padding:0 24px; }
.s8-hero-kick{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; letter-spacing:.16em; color:var(--blue-d);
  background:#fff; border:1px solid var(--tint-b); border-radius:999px; padding:8px 17px;
}
.s8-hero-kick .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }
.s8-hero h1{
  margin-top:22px;
  font-size:clamp(36px,4.5vw,60px); font-weight:700;
  letter-spacing:-.035em; line-height:1.26; color:var(--ink);
  max-width:15.5em;
}
.s8-hero h1 .em{ color:var(--blue); }
.s8-hero h1 .s8-hl{
  position:relative; display:inline-block; padding:0 .12em; z-index:0;
}
.s8-hero h1 .s8-hl::after{
  content:''; position:absolute; left:0; right:0; bottom:.1em; height:.32em;
  background:var(--tint-b); opacity:.66; border-radius:3px; z-index:-1;
}
.s8-hero .lead{
  margin-top:22px; max-width:620px;
  font-size:17.5px; line-height:1.78; color:var(--g700);
}
.s8-hero .ctas{ margin-top:34px; display:flex; gap:11px; flex-wrap:wrap; }
.s8-hero-meta{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:34px 52px; align-items:flex-end;
}
.s8-hero-meta .it{ min-width:132px; }
.s8-hero-meta .n{
  font-size:30px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1;
}
.s8-hero-meta .n small{ font-size:16px; font-weight:600; margin-left:2px; color:var(--g700); }
.s8-hero-meta .l{ margin-top:9px; font-size:13.5px; color:var(--g500); line-height:1.5; }
.s8-hero-art{
  position:absolute; right:-40px; top:6px; width:398px; max-width:40vw;
  opacity:.94; pointer-events:none;
}
@media(max-width:1100px){.s8-hero-art{ display:none; } }
/* ---------- 문제제기 수치 타임라인 ---------- */
.s8-tl-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.s8-tl-day{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:26px;
  font-size:13.5px; font-weight:600; letter-spacing:.1em; color:var(--g500);
}
.s8-tl-day .s8-tl-tag{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--blue-d); background:var(--tint); border-radius:999px; padding:7px 15px;
  letter-spacing:.02em;
}
.s8-tl{ position:relative; }
.s8-tl-rail{
  position:absolute; left:0; right:0; top:64px; height:2px;
  background:var(--line); border-radius:2px;
}
.s8-tl-rail .fill{
  display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--tint-b),var(--blue) 62%,#E2513C);
  transition:width 1.5s var(--ease) .2s;
}
.rv.in .s8-tl-rail .fill{ width:100%; }
@media(prefers-reduced-motion:reduce){.s8-tl-rail .fill{ width:100%; transition:none; } }
.s8-tl-list{
  position:relative; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
}
.s8-tl-it{ position:relative; padding:0 16px 0 0; }
.s8-tl-it .hr{
  font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--g500);
  height:22px;
}
.s8-tl-it .nd{
  position:relative; height:44px; display:flex; align-items:center;
}
.s8-tl-it .nd i{
  width:13px; height:13px; border-radius:50%;
  background:#fff; border:2px solid var(--tint-b);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.s8-tl-it.hot .nd i{ border-color:#E2513C; box-shadow:0 0 0 5px rgba(226,81,60,.12); }
.rv.in .s8-tl-it .nd i{ border-color:var(--blue); }
.rv.in .s8-tl-it.hot .nd i{ border-color:#E2513C; }
.s8-tl-it .n{
  margin-top:12px; font-size:clamp(30px,3.3vw,42px); font-weight:700;
  letter-spacing:-.035em; line-height:1; color:var(--ink);
}
.s8-tl-it .n u{ text-decoration:none; font-size:.52em; font-weight:600; margin-left:3px; color:var(--g700); }
.s8-tl-it.hot .n{ color:#C7402C; }
.s8-tl-it .t{ margin-top:13px; font-size:16px; font-weight:600; color:var(--ink); }
.s8-tl-it .d{ margin-top:8px; font-size:13.8px; line-height:1.66; color:var(--g500); padding-right:8px; }
.s8-tl-end{
  margin-top:52px; padding:28px 32px; border-radius:16px;
  background:var(--bg2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.s8-tl-end .tx{ font-size:17px; font-weight:600; color:var(--ink); line-height:1.6; }
.s8-tl-end .tx em{ font-style:normal; color:var(--blue); }
.s8-tl-end .sb{ font-size:14px; color:var(--g500); margin-top:6px; line-height:1.6; }
@media(max-width:1000px){.s8-tl-rail{ display:none; }
.s8-tl-list{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
}
@media(max-width:640px){.s8-tl-list{ grid-template-columns:1fr; gap:26px; }
.s8-tl-it{ padding-left:20px; border-left:2px solid var(--line); }
.s8-tl-it .nd{ height:0; }
.s8-tl-it .nd i{ position:absolute; left:-27px; top:2px; }
}
/* ---------- 네 겹 설계 레이어 ---------- */
.s8-dark{ background:var(--navy); }
.s8-layer-wrap{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:56px; align-items:start;
}
.s8-stack{ position:sticky; top:170px; }
.s8-stack-fig{
  position:relative; height:392px;
  perspective:1000px;
}
.s8-plate{
  position:absolute; left:50%; width:300px; height:158px;
  margin-left:-150px; border-radius:14px;
  border:1px solid rgba(143,166,200,.34);
  background:linear-gradient(135deg,rgba(18,37,63,.96),rgba(10,25,48,.92));
  transform:translateY(var(--y)) rotateX(58deg) rotateZ(-42deg) scale(var(--s));
  transform-style:preserve-3d;
  transition:transform .8s var(--ease), border-color .45s, box-shadow .45s;
  box-shadow:0 22px 46px rgba(0,0,0,.34);
  display:flex; align-items:flex-end; padding:15px 17px;
}
.s8-plate .pl{
  font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--navy-tx);
  transform:rotateZ(0deg);
}
.s8-plate::before{
  content:''; position:absolute; inset:14px auto auto 16px;
  width:56px; height:5px; border-radius:3px; background:rgba(143,166,200,.32);
}
.s8-plate::after{
  content:''; position:absolute; inset:26px auto auto 16px;
  width:104px; height:5px; border-radius:3px; background:rgba(143,166,200,.18);
}
.s8-plate.p1{ --y:236px; --s:1; }
.s8-plate.p2{ --y:172px; --s:1; }
.s8-plate.p3{ --y:108px; --s:1; }
.s8-plate.p4{ --y:44px;  --s:1; }
.s8-plate.act{
  border-color:rgba(77,162,255,.85);
  background:linear-gradient(135deg,rgba(46,111,242,.34),rgba(18,37,63,.96));
  box-shadow:0 26px 58px rgba(46,111,242,.28);
  transform:translateY(var(--y)) rotateX(58deg) rotateZ(-42deg) scale(1.045);
}
.s8-plate.act .pl{ color:#fff; }
.s8-stack-cap{
  margin-top:14px; text-align:center;
  font-size:13.5px; letter-spacing:.02em; color:var(--navy-tx); line-height:1.7;
}
.s8-stack-cap b{ color:#fff; font-weight:600; }
.s8-lay{ list-style:none; margin:0; padding:0; }
.s8-lay li{
  position:relative; padding:30px 0 30px 0;
  border-top:1px solid rgba(143,166,200,.2);
  transition:opacity .5s var(--ease);
}
.s8-lay li:first-child{ border-top:0; padding-top:6px; }
.s8-lay .hd{ display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; }
.s8-lay .no{
  font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--blue-l);
}
.s8-lay .en{
  font-size:11.5px; font-weight:600; letter-spacing:.2em; color:var(--navy-tx);
  border:1px solid rgba(143,166,200,.36); border-radius:999px; padding:4px 11px;
}
.s8-lay h3{
  margin-top:11px; font-size:clamp(21px,2.1vw,27px); font-weight:700;
  letter-spacing:-.03em; color:#fff; line-height:1.4;
}
.s8-lay h3 .em{ color:var(--blue-l); }
.s8-lay p{ margin-top:12px; font-size:15.6px; line-height:1.8; color:#B8C5D9; max-width:44em; }
.s8-lay .kv{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.s8-lay .kv span{
  font-size:13px; font-weight:500; color:#CBD8EC;
  background:rgba(143,166,200,.12); border:1px solid rgba(143,166,200,.22);
  border-radius:8px; padding:7px 13px;
}
.s8-lay li.act .no{ color:#fff; }
.s8-layer-foot{
  max-width:1240px; margin:64px auto 0; padding:0 24px;
}
.s8-layer-foot .bar{
  border-top:1px solid rgba(143,166,200,.22); padding-top:28px;
  font-size:17px; font-weight:600; color:#fff; line-height:1.65; text-align:center;
}
.s8-layer-foot .bar em{ font-style:normal; color:var(--blue-l); }
@media(max-width:1000px){.s8-layer-wrap{ grid-template-columns:1fr; gap:8px; }
.s8-stack{ position:relative; top:0; }
.s8-stack-fig{ height:340px; }
}
@media(max-width:640px){.s8-stack-fig{ height:296px; transform:scale(.84); transform-origin:top center; }
}
/* ---------- 유형 3선택 ---------- */
.s8-type-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.s8-tabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:9px; border:1px solid var(--line); border-radius:16px; background:var(--bg2);
}
.s8-tab{
  position:relative; text-align:left; cursor:pointer; font-family:inherit;
  background:transparent; border:1px solid transparent; border-radius:11px;
  padding:19px 21px; transition:background .35s var(--ease), border-color .35s, transform .5s var(--ease);
}
.s8-tab .tn{
  font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--g500);
  transition:color .3s;
}
.s8-tab .tt{
  margin-top:9px; font-size:18.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
}
.s8-tab .td{ margin-top:7px; font-size:13.5px; line-height:1.6; color:var(--g500); }
.s8-tab:hover{ background:#fff; border-color:var(--line); }
.s8-tab[aria-selected="true"]{
  background:#fff; border-color:var(--tint-b);
  box-shadow:0 12px 30px rgba(10,28,62,.07);
}
.s8-tab[aria-selected="true"] .tn{ color:var(--blue); }
.s8-tab[aria-selected="true"] .tt{ color:var(--blue-d); }
.s8-panel{ display:none; margin-top:34px; }
.s8-panel.on{ display:block; animation:s8fade .55s var(--ease); }
@keyframes s8fade{from{ opacity:0; transform:translateY(12px); }
to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){.s8-panel.on{ animation:none; } }
.s8-panel-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:22px;
  flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line);
}
.s8-panel-head h3{
  font-size:clamp(23px,2.4vw,31px); font-weight:700; letter-spacing:-.03em;
  color:var(--ink); line-height:1.42;
}
.s8-panel-head h3 .em{ color:var(--blue); }
.s8-panel-head p{ margin-top:12px; font-size:16px; line-height:1.75; color:var(--g700); max-width:46em; }
.s8-panel-head .go{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:600; color:var(--blue-d);
  border:1px solid var(--tint-b); background:var(--tint);
  border-radius:10px; padding:12px 18px; transition:background .3s, transform .45s var(--ease);
}
.s8-panel-head .go:hover{ background:#fff; transform:translateY(-2px); }
.s8-items{
  margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.s8-item{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:26px 24px 24px; transition:transform .55s var(--ease), border-color .35s, box-shadow .5s var(--ease);
  display:flex; flex-direction:column;
}
.s8-item:hover{ transform:translateY(-5px); border-color:var(--tint-b); box-shadow:0 16px 36px rgba(10,28,62,.07); }
.s8-item .ic{
  width:44px; height:44px; border-radius:12px; background:var(--tint);
  display:flex; align-items:center; justify-content:center; color:var(--blue-d);
}
.s8-item h4{ margin-top:17px; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s8-item p{ margin-top:11px; font-size:14.5px; line-height:1.75; color:var(--g700); flex:1; }
.s8-item .fx{
  margin-top:17px; padding-top:15px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px;
}
.s8-item .fx span{
  font-size:12.5px; font-weight:500; color:var(--g500);
  background:var(--bg2); border-radius:7px; padding:6px 10px;
}
@media(max-width:1000px){.s8-tabs{ grid-template-columns:1fr; }
.s8-items{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){.s8-items{ grid-template-columns:1fr; }
.s8-tab{ padding:16px 17px; }
}
/* ---------- 주요 성과 ---------- */
.s8-res-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.s8-res{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff;
}
.s8-res .cell{
  padding:34px 28px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.s8-res .cell:hover{ background:var(--bg2); }
.s8-res .cell:nth-child(4n){ border-right:0; }
.s8-res .cell:nth-last-child(-n+4){ border-bottom:0; }
.s8-res .k{ font-size:13.2px; font-weight:600; letter-spacing:.06em; color:var(--g500); }
.s8-res .v{
  margin-top:15px; font-size:clamp(28px,3vw,39px); font-weight:700;
  letter-spacing:-.035em; line-height:1.05; color:var(--ink);
  display:flex; align-items:baseline; gap:4px; flex-wrap:wrap;
}
.s8-res .v u{ text-decoration:none; font-size:.46em; font-weight:600; color:var(--g700); }
.s8-res .v .ar{ font-size:.44em; font-weight:600; color:var(--tint-b); margin:0 2px; }
.s8-res .v .to{ color:var(--blue); }
.s8-res .d{ margin-top:13px; font-size:13.8px; line-height:1.68; color:var(--g500); }
.s8-res-note{
  margin-top:20px; font-size:13px; color:var(--g500); line-height:1.7;
}
.s8-res-lead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:28px;
}
.s8-res-lead .t{ font-size:19px; font-weight:600; color:var(--ink); line-height:1.6; }
.s8-res-lead .t em{ font-style:normal; color:var(--blue); }
.s8-res-lead .cap{
  font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--g500);
  border:1px solid var(--line); border-radius:999px; padding:8px 15px; background:#fff;
}
@media(max-width:1000px){.s8-res{ grid-template-columns:repeat(2,1fr); }
.s8-res .cell:nth-child(4n){ border-right:1px solid var(--line); }
.s8-res .cell:nth-child(2n){ border-right:0; }
.s8-res .cell:nth-last-child(-n+4){ border-bottom:1px solid var(--line); }
.s8-res .cell:nth-last-child(-n+2){ border-bottom:0; }
}
@media(max-width:560px){.s8-res{ grid-template-columns:1fr; }
.s8-res .cell{ border-right:0 !important; border-bottom:1px solid var(--line) !important; }
.s8-res .cell:last-child{ border-bottom:0 !important; }
}
/* ---------- Before / After 재구성 ---------- */
.s8-ba-wrap{ max-width:1300px; margin:0 auto; padding:0 24px; }
.s8-ba{
  display:grid; grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);
  gap:26px; align-items:stretch;
}
.s8-ba-side{
  border:1px solid var(--line); border-radius:18px; background:#fff;
  padding:26px 24px 28px; display:flex; flex-direction:column;
}
.s8-ba-side.bad{ background:linear-gradient(180deg,#FCFAF9,#fff 40%); }
.s8-ba-side.good{ background:linear-gradient(180deg,var(--tint),#fff 42%); border-color:var(--tint-b); }
.s8-ba-cap{
  display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; letter-spacing:.13em; color:var(--g500);
}
.s8-ba-cap .dot{ width:7px; height:7px; border-radius:50%; background:var(--g500); }
.s8-ba-side.bad .s8-ba-cap{ color:#B0523F; }
.s8-ba-side.bad .s8-ba-cap .dot{ background:#D2624C; }
.s8-ba-side.good .s8-ba-cap{ color:var(--blue-d); }
.s8-ba-side.good .s8-ba-cap .dot{ background:var(--blue); }
.s8-ba-side h3{
  margin-top:13px; font-size:21px; font-weight:600; letter-spacing:-.025em; color:var(--ink);
}
.s8-ba-side .sd{ margin-top:9px; font-size:14px; line-height:1.7; color:var(--g500); }
.s8-scatter{
  margin-top:22px; position:relative; flex:1; min-height:300px;
  border-radius:14px; background:var(--bg2); border:1px dashed var(--line);
  overflow:hidden;
}
.s8-chip{
  position:absolute; font-size:12.8px; font-weight:500; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:9px 13px; box-shadow:0 6px 14px rgba(10,28,62,.06);
  transition:transform .7s var(--ease);
}
.s8-chip .mi{ font-size:11.5px; color:var(--g500); display:block; margin-top:3px; }
.rv.in .s8-chip{ transform:none; }
.s8-chip.c1{ left:6%;  top:7%;  transform:translate(-10px,-8px) rotate(-4deg); }
.s8-chip.c2{ right:7%; top:14%; transform:translate(12px,-6px) rotate(3deg); }
.s8-chip.c3{ left:12%; top:38%; transform:translate(-8px,6px) rotate(2deg); }
.s8-chip.c4{ right:9%; top:45%; transform:translate(10px,8px) rotate(-3deg); }
.s8-chip.c5{ left:8%;  bottom:9%; transform:translate(-6px,10px) rotate(4deg); }
.s8-chip.c6{ right:12%; bottom:15%; transform:translate(8px,10px) rotate(-2deg); }
.s8-doc{
  margin-top:22px; flex:1; min-height:300px; border-radius:14px;
  background:#fff; border:1px solid var(--tint-b); padding:18px 18px 20px;
  box-shadow:0 16px 40px rgba(46,111,242,.1);
}
.s8-doc-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:13px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--blue-d);
}
.s8-doc-top .st{
  display:inline-flex; align-items:center; gap:6px; letter-spacing:.02em;
  font-size:11.5px; color:var(--g500); font-weight:500;
}
.s8-doc-top .st i{ width:6px; height:6px; border-radius:50%; background:#3CB37A; }
.s8-flow{ list-style:none; margin:14px 0 0; padding:0; }
.s8-flow li{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:10px; background:var(--bg2);
  margin-top:8px; transition:background .35s;
}
.s8-flow li:hover{ background:var(--tint); }
.s8-flow .no{
  flex-shrink:0; width:26px; height:26px; border-radius:8px;
  background:#fff; border:1px solid var(--tint-b); color:var(--blue-d);
  font-size:11.5px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.s8-flow .tx{ font-size:14px; font-weight:500; color:var(--ink); }
.s8-flow .mt{ margin-left:auto; font-size:12px; color:var(--g500); }
.s8-ba-mid{
  display:flex; flex-direction:column; justify-content:center; gap:10px; padding:8px 0;
}
.s8-step{
  position:relative; border:1px solid var(--line); border-radius:13px; background:#fff;
  padding:15px 16px; transition:border-color .4s, transform .5s var(--ease), background .4s;
}
.s8-step:hover{ border-color:var(--tint-b); transform:translateX(3px); background:var(--bg2); }
.s8-step .sn{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--blue); }
.s8-step .sh{ margin-top:7px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.s8-step .sp{ margin-top:6px; font-size:12.8px; line-height:1.6; color:var(--g500); }
.s8-ba-arrow{ display:flex; align-items:center; justify-content:center; padding:2px 0; color:var(--tint-b); }
.s8-ba-foot{
  margin-top:34px; text-align:center; font-size:17px; font-weight:600;
  color:var(--ink); line-height:1.65;
}
.s8-ba-foot em{ font-style:normal; color:var(--blue); }
@media(max-width:1100px){.s8-ba{ grid-template-columns:1fr; }
.s8-ba-mid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.s8-ba-arrow{ display:none; }
}
@media(max-width:820px){.s8-ba-mid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){.s8-ba-mid{ grid-template-columns:1fr; }
.s8-chip{ font-size:12px; padding:8px 11px; }
}
/* ---------- 일반 vs 우리 비교표 ---------- */
.s8-cmp-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.s8-cmp-legend{
  display:flex; gap:22px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  margin-bottom:18px; font-size:13.2px; color:var(--g500);
}
.s8-cmp-legend .lg{ display:inline-flex; align-items:center; gap:8px; }
.s8-cmp-legend .sq{ width:10px; height:10px; border-radius:3px; background:var(--line); }
.s8-cmp-legend .sq.b{ background:var(--blue); }
.s8-scroller{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:18px; background:#fff;
}
.s8-scroller::-webkit-scrollbar{ height:8px; }
.s8-scroller::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.s8-cmp{
  width:100%; min-width:820px; border-collapse:collapse; text-align:left;
}
.s8-cmp th, .s8-cmp td{ padding:20px 24px; border-bottom:1px solid var(--line); vertical-align:top; }
.s8-cmp thead th{
  position:sticky; top:0; background:var(--bg2); z-index:1;
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--g700);
  border-bottom:1px solid var(--line);
}
.s8-cmp thead th.us{ background:var(--tint); color:var(--blue-d); }
.s8-cmp thead th .hh{ display:flex; align-items:center; gap:9px; }
.s8-cmp thead th .bd{
  font-size:11.5px; font-weight:600; letter-spacing:.1em;
  border:1px solid var(--tint-b); border-radius:999px; padding:4px 10px; color:var(--blue-d);
}
.s8-cmp tbody tr{ transition:background .35s; }
.s8-cmp tbody tr:hover{ background:#FCFDFF; }
.s8-cmp tbody tr:last-child td{ border-bottom:0; }
.s8-cmp .rk{
  width:19%; font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em;
}
.s8-cmp .rk small{ display:block; margin-top:6px; font-size:12.5px; font-weight:500; color:var(--g500); line-height:1.6; }
.s8-cmp .gen{ width:36%; font-size:14.5px; line-height:1.72; color:var(--g500); }
.s8-cmp .us{ width:45%; font-size:14.8px; line-height:1.72; color:var(--ink); background:rgba(234,242,255,.42); }
.s8-cmp .us b{ font-weight:600; color:var(--blue-d); }
.s8-cmp .mk{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; margin-right:9px; flex-shrink:0;
  font-size:11px; font-weight:600;
}
.s8-cmp .mk.n{ background:var(--line); color:var(--g500); }
.s8-cmp .mk.y{ background:var(--blue); color:#fff; }
.s8-cmp .ln{ display:flex; align-items:flex-start; }
.s8-cmp .ln .mk{ margin-top:3px; }
.s8-cmp-foot{
  margin-top:26px; padding:26px 30px; border-radius:16px;
  background:var(--bg2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.s8-cmp-foot .tx{ font-size:17px; font-weight:600; color:var(--ink); line-height:1.6; }
.s8-cmp-foot .tx em{ font-style:normal; color:var(--blue); }
.s8-cmp-foot .sb{ margin-top:6px; font-size:13.8px; color:var(--g500); line-height:1.65; }
.s8-cmp-foot .bt{ display:flex; gap:10px; flex-wrap:wrap; }
.s8-hint{
  display:none; margin-top:12px; font-size:12.5px; color:var(--g500);
}
@media(max-width:900px){.s8-hint{ display:block; }
.s8-cmp th, .s8-cmp td{ padding:17px 18px; }
}
/* ---------- 공통 여백 조정 ---------- */
@media(max-width:820px){
  .s8-hero{ padding:132px 0 68px; }
  .s8-hero-meta{ gap:26px 36px; }
}
@media(max-width:640px){.s8-hero .ctas .btn{ width:100%; justify-content:center; }
}




/* [sv-mix] S9 안 전용 CSS — .sec 재정의 제외 */
/* ===========================================================
   S9 · flextudio usecase 클론 — 사례 스토리텔링형 서비스 허브
   프리픽스 .s9-  (site.css의 .card 재정의 금지)
   =========================================================== */

/* ---------- 공통 유틸 ---------- */
.s9-page{ overflow-x:hidden; }
.s9-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
  color:var(--blue-d); background:var(--tint);
  border:1px solid var(--tint-b); border-radius:999px;
  padding:8px 16px;
}
.s9-eyebrow .d{ width:6px; height:6px; border-radius:50%; background:var(--blue); }
.s9-lead{ font-size:17.5px; line-height:1.78; color:var(--g700); }
.s9-strong{ color:var(--ink); font-weight:600; }
.s9-blue{ color:var(--blue); font-weight:600; }
.s9-num{ font-variant-numeric:tabular-nums; }
/* ---------- 식별 배지 ---------- */
.s9-badge{
  position:fixed; left:14px; bottom:14px; z-index:90;
  font:600 12px/1 Paperlogy,sans-serif; color:#fff;
  background:#0A1C3E; border-radius:999px; padding:9px 14px;
}
/* ---------- 1. 서브 히어로 ---------- */
.s9-hero{ position:relative; overflow:hidden; }
.s9-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(760px 420px at 82% -12%, rgba(46,111,242,.13), transparent 62%),
    radial-gradient(620px 360px at 10% 108%, rgba(77,162,255,.10), transparent 60%);
  pointer-events:none;
}
.s9-hero .in{ position:relative; z-index:1; max-width:1000px; }
.s9-hero-crumb{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:13px; font-weight:500; color:var(--g500);
}
.s9-hero-crumb .sep{ color:var(--tint-b); }
.s9-hero-crumb .cur{ color:var(--blue-d); font-weight:600; }
.s9-hero h1{ margin-top:22px; }
.s9-hero-lead{ margin:22px auto 0; max-width:720px; font-size:18px; line-height:1.8; color:var(--g700); }
.s9-hero-ctas{ margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.s9-hero-foot{
  margin-top:30px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.s9-hero-foot span{
  font-size:13px; font-weight:500; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 15px;
}
/* ---------- 2. 도입 동기 ---------- */
.s9-why{ background:#fff; }
.s9-why-grid{
  display:grid; grid-template-columns:1fr 1.02fr; gap:64px; align-items:center;
}
.s9-why-h{
  margin-top:20px; font-size:clamp(30px,3.2vw,42px); font-weight:700;
  letter-spacing:-.03em; line-height:1.34; color:var(--ink);
}
.s9-why-p{ margin-top:22px; font-size:17px; line-height:1.85; color:var(--g700); }
.s9-why-p + .s9-why-p{ margin-top:16px; }
.s9-why-quote{
  margin-top:28px; padding:20px 24px;
  background:var(--bg2); border-left:3px solid var(--blue); border-radius:0 12px 12px 0;
  font-size:16.5px; line-height:1.75; color:var(--ink); font-weight:500;
}
.s9-why-meta{ margin-top:12px; font-size:13.5px; color:var(--g500); }
.s9-why-vis{
  border:1px solid var(--line); border-radius:20px; background:var(--bg2);
  padding:26px 24px 22px;
}
.s9-why-vis-h{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.s9-why-vis-h b{ font-size:15px; font-weight:600; color:var(--ink); }
.s9-why-vis-h em{ font-style:normal; font-size:12.5px; font-weight:500; color:var(--g500); }
.s9-why-vis svg{ display:block; width:100%; height:auto; margin-top:6px; }
/* ---------- 3. 고민 3가지 ---------- */
.s9-worry{ background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.s9-worry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s9-worry-item{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:34px 30px 32px;
  transition:transform .55s var(--ease), border-color .35s, box-shadow .55s var(--ease);
}
.s9-worry-item:hover{
  transform:translateY(-6px); border-color:var(--tint-b);
  box-shadow:0 18px 44px -28px rgba(10,28,62,.35);
}
.s9-worry-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  background:var(--tint); color:var(--blue-d);
  font-size:14px; font-weight:600;
}
.s9-worry-ico{ margin-top:20px; }
.s9-worry-ico svg{ display:block; width:100%; height:auto; }
.s9-worry-h{ margin-top:22px; font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s9-worry-d{ margin-top:12px; font-size:15.5px; line-height:1.74; color:var(--g700); }
.s9-worry-a{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.7; color:var(--blue-d); font-weight:500;
}
/* ---------- 4. 기능 탭 + 모바일 목업 ---------- */
.s9-fn{ background:#fff; }
.s9-grp{
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
  margin-bottom:44px;
}
.s9-grp-b{
  font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:500; color:var(--g700);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:12px 22px;
  transition:color .3s, background .3s, border-color .3s;
}
.s9-grp-b:hover{ border-color:var(--tint-b); color:var(--ink); }
.s9-grp-b .n{
  font-size:12px; font-weight:600; color:var(--g500);
  background:var(--bg2); border-radius:999px; padding:3px 8px;
  transition:color .3s, background .3s;
}
.s9-grp-b.on{ color:#fff; background:var(--ink); border-color:var(--ink); font-weight:600; }
.s9-grp-b.on .n{ color:var(--ink); background:#fff; }
.s9-fnbody{ display:grid; grid-template-columns:1.12fr .88fr; gap:60px; align-items:start; }
.s9-tablist{ display:none; }
.s9-tablist.on{ display:block; }
.s9-tab{
  display:block; width:100%; text-align:left; font-family:inherit; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:24px 26px; margin-bottom:14px;
  transition:border-color .35s, background .35s, transform .5s var(--ease);
}
.s9-tab:hover{ border-color:var(--tint-b); transform:translateX(4px); }
.s9-tab.on{ border-color:var(--blue); background:var(--tint); }
.s9-tab-top{ display:flex; align-items:center; gap:12px; }
.s9-tab-dot{
  width:26px; height:26px; border-radius:8px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg2); color:var(--g500);
  font-size:11.5px; font-weight:600;
  transition:background .35s, color .35s;
}
.s9-tab.on .s9-tab-dot{ background:var(--blue); color:#fff; }
.s9-tab-h{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s9-tab-d{
  margin-top:12px; font-size:15.5px; line-height:1.74; color:var(--g700);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .35s, margin-top .5s var(--ease);
}
.s9-tab.on .s9-tab-d{ max-height:180px; opacity:1; }
.s9-tab-tags{ margin-top:14px; display:flex; gap:7px; flex-wrap:wrap; }
.s9-tab.on .s9-tab-tags{ display:flex; }
.s9-tab:not(.on) .s9-tab-tags{ display:none; }
.s9-tag{
  font-size:12.5px; font-weight:500; color:var(--blue-d);
  background:#fff; border:1px solid var(--tint-b); border-radius:999px;
  padding:6px 12px;
}
/* 스테이지(폰 목업) */
.s9-stage{ position:sticky; top:104px; }
.s9-phone{
  position:relative; width:322px; margin:0 auto;
  border-radius:44px; padding:11px;
  background:linear-gradient(160deg,#16274a,#0A1930 62%);
  box-shadow:0 40px 90px -46px rgba(10,25,48,.72), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.s9-phone::after{
  content:""; position:absolute; left:50%; top:20px; transform:translateX(-50%);
  width:96px; height:22px; border-radius:999px; background:#0A1930; z-index:3;
}
.s9-phone-in{
  position:relative; border-radius:34px; overflow:hidden;
  background:#fff; height:620px;
}
.s9-scr{
  position:absolute; inset:0;
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.s9-scr.on{ opacity:1; transform:none; pointer-events:auto; }
.s9-scr svg{ display:block; width:100%; height:100%; }
@media(prefers-reduced-motion:reduce){.s9-scr{ transition:none; }
}
.s9-cap{
  margin:26px auto 0; max-width:330px; text-align:center;
  font-size:14.5px; line-height:1.7; color:var(--g500);
}
.s9-cap b{ color:var(--ink); font-weight:600; }
.s9-dots{ margin-top:18px; display:flex; justify-content:center; gap:7px; }
.s9-dots i{
  width:7px; height:7px; border-radius:50%; background:var(--line);
  transition:background .3s, width .3s var(--ease);
}
.s9-dots i.on{ width:22px; border-radius:999px; background:var(--blue); }
/* ---------- 5. 사례 스토리텔링 ---------- */
.s9-story{ background:var(--bg2); border-top:1px solid var(--line); }
.s9-story-intro{
  max-width:860px; margin:0 auto 58px; text-align:center;
  font-size:17px; line-height:1.85; color:var(--g700);
}
.s9-wks{ position:relative; max-width:1000px; margin:0 auto; }
.s9-wks::before{
  content:""; position:absolute; left:127px; top:16px; bottom:16px;
  width:1px; background:linear-gradient(180deg,var(--tint-b),var(--line));
}
.s9-wk{ position:relative; display:grid; grid-template-columns:104px 1fr; gap:56px; padding-bottom:34px; }
.s9-wk:last-child{ padding-bottom:0; }
.s9-wk-lab{ text-align:right; padding-top:26px; }
.s9-wk-lab b{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.s9-wk-lab em{ display:block; margin-top:5px; font-style:normal; font-size:12.5px; color:var(--g500); }
.s9-wk-node{
  position:absolute; left:120px; top:32px; z-index:1;
  width:15px; height:15px; border-radius:50%;
  background:#fff; border:3px solid var(--blue);
}
.s9-wk-box{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:30px 32px 28px;
  transition:border-color .35s, box-shadow .55s var(--ease);
}
.s9-wk-box:hover{ border-color:var(--tint-b); box-shadow:0 18px 44px -30px rgba(10,28,62,.34); }
.s9-wk-h{ font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s9-wk-p{ margin-top:14px; font-size:16px; line-height:1.84; color:var(--g700); }
.s9-wk-svc{ margin-top:18px; display:flex; gap:7px; flex-wrap:wrap; }
.s9-wk-svc span{
  font-size:12.5px; font-weight:500; color:var(--g700);
  background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:6px 11px;
}
.s9-wk-out{
  margin-top:20px; padding-top:18px; border-top:1px dashed var(--line);
  display:flex; gap:26px; flex-wrap:wrap;
}
.s9-wk-out div{ min-width:118px; }
.s9-wk-out b{ display:block; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--blue-d); }
.s9-wk-out em{ display:block; margin-top:4px; font-style:normal; font-size:12.5px; color:var(--g500); }
.s9-after{
  max-width:1000px; margin:56px auto 0;
  background:#fff; border:1px solid var(--tint-b); border-radius:20px;
  padding:38px 40px 34px;
}
.s9-after-h{ font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s9-after-p{ margin-top:12px; font-size:16px; line-height:1.82; color:var(--g700); }
.s9-res{ margin-top:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.s9-res-i{ border-left:1px solid var(--line); padding-left:20px; }
.s9-res-i:first-child{ border-left:0; padding-left:0; }
.s9-res-v{ font-size:clamp(28px,2.6vw,34px); font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.s9-res-v .u{ font-size:.56em; font-weight:600; color:var(--g500); margin-left:2px; }
.s9-res-k{ margin-top:8px; font-size:14px; color:var(--g700); }
.s9-res-s{ margin-top:4px; font-size:12.5px; color:var(--g500); }
/* ---------- 6. 담당자 인용 ---------- */
.s9-voice{ background:var(--navy); }
.s9-voice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1160px; margin:0 auto; }
.s9-q{
  background:var(--navy2); border:1px solid rgba(255,255,255,.09); border-radius:20px;
  padding:38px 36px 32px;
  transition:border-color .35s, transform .55s var(--ease);
}
.s9-q:hover{ border-color:rgba(77,162,255,.4); transform:translateY(-5px); }
.s9-q-mark svg{ display:block; }
.s9-q-t{ margin-top:20px; font-size:18px; font-weight:400; line-height:1.85; color:#E7EDF7; }
.s9-q-t b{ color:#fff; font-weight:600; }
.s9-q-who{
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; gap:13px;
}
.s9-q-av{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:#fff;
  background:linear-gradient(150deg,var(--blue-l),var(--blue-d));
}
.s9-q-nm{ font-size:15px; font-weight:600; color:#fff; }
.s9-q-rl{ margin-top:3px; font-size:13px; color:var(--navy-tx); }
/* ---------- 7. CTA ---------- */
.s9-cta{ background:#fff; }
.s9-cta-in{ max-width:900px; margin:0 auto; text-align:center; }
.s9-cta-p{ margin-top:18px; font-size:17.5px; line-height:1.78; color:var(--g700); }
.s9-cta-b{ margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.s9-cta-note{ margin-top:24px; font-size:14px; color:var(--g500); }
/* ---------- 반응형 ---------- */
@media(max-width:1200px){
  .s9-why-grid{ gap:44px; }
  .s9-fnbody{ gap:40px; }
  .s9-phone{ width:300px; }
}
@media(max-width:1000px){.s9-why-grid{ grid-template-columns:1fr; gap:40px; }
.s9-worry-grid{ grid-template-columns:1fr; }
.s9-fnbody{ grid-template-columns:1fr; gap:44px; }
.s9-stage{ position:static; }
.s9-wks::before{ left:8px; }
.s9-wk{ grid-template-columns:1fr; gap:0; padding-left:44px; }
.s9-wk-lab{ text-align:left; padding:0 0 12px; }
.s9-wk-node{ left:1px; top:6px; }
.s9-res{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
.s9-res-i:nth-child(3){ border-left:0; padding-left:0; }
}
@media(max-width:820px){.s9-voice-grid{ grid-template-columns:1fr; }
.s9-hero-lead{ font-size:16.5px; }
.s9-why-h{ font-size:28px; }
.s9-after{ padding:30px 26px 26px; }
}
@media(max-width:640px){.s9-phone{ width:100%; max-width:300px; }
.s9-tab{ padding:20px 20px; }
.s9-tab-h{ font-size:17.5px; }
.s9-worry-item{ padding:28px 24px; }
.s9-wk-box{ padding:24px 22px; }
.s9-wk-out{ gap:18px; }
.s9-res{ grid-template-columns:1fr; }
.s9-res-i{ border-left:0; padding-left:0; }
.s9-q{ padding:30px 24px 26px; }
.s9-grp-b{ font-size:14px; padding:10px 16px; }
.s9-badge{ left:10px; bottom:10px; }
}




/* Before/Workflow/After 다크 밴드 */
.bwa{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media(max-width:960px){.bwa{ grid-template-columns:1fr; }}
.bwa .p{ background:var(--navy2); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px 26px; transition:border-color .3s, transform .3s; }
.bwa .p:hover{ border-color:rgba(91,141,247,.5); transform:translateY(-4px); }
.bwa .hd{ display:flex; align-items:center; gap:10px; }
.bwa .n{ font-size:12.5px; font-weight:600; letter-spacing:.1em; color:var(--blue-l); }
.bwa .nm{ font-size:13px; font-weight:600; border-radius:999px; padding:5px 14px; }
.bwa .p.b1 .nm{ color:#9FB0C8; border:1px solid rgba(255,255,255,.2); }
.bwa .p.b2 .nm{ color:#fff; background:rgba(91,141,247,.3); }
.bwa .p.b3 .nm{ color:#fff; background:var(--blue); }
.bwa h3{ margin-top:14px; font-size:16.5px; font-weight:600; color:#fff; line-height:1.5; }
.bwa ul{ margin:14px 0 0; padding:0; list-style:none; }
.bwa li{ display:flex; gap:8px; font-size:13.5px; line-height:1.6; color:#B8C5D9; margin-top:7px; }
.bwa li .m{ flex:0 0 auto; }
.bwa .chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.bwa .chips span{ font-size:12px; font-weight:600; color:#C7D8F5; border:1px solid rgba(255,255,255,.18); border-radius:7px; padding:5px 10px; }
.bwa .mts{ display:flex; gap:8px; margin-top:16px; }
.bwa .mt{ flex:1; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:10px 10px; text-align:center; }
.bwa .mt .l{ font-size:11px; color:#93A9C9; }
.bwa .mt .v{ margin-top:3px; font-size:14.5px; font-weight:600; color:#fff; }
.bwa .p.b3 .mt .v{ color:var(--blue-l); }
.bwa .badge{ display:inline-block; margin-top:14px; font-size:12px; font-weight:600; color:#fff; background:var(--blue); border-radius:999px; padding:6px 14px; }
/* 진단 배너 */
.diag-band{ background:var(--bg2); }
.diag-band .box{ max-width:1000px; margin:0 auto; padding:44px 40px; background:var(--navy); border-radius:20px; text-align:center; }
.diag-band .box h2{ font-size:clamp(26px,3vw,38px); font-weight:700; letter-spacing:-.03em; line-height:1.4; color:#fff; }
.diag-band .box h2 .em{ color:var(--blue-l); }
.diag-band .box p{ margin-top:12px; font-size:15.5px; line-height:1.7; color:#B8C5D9; }
.diag-band .ctas{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }




/* ══ 공통 그리드 ══
   안마다 컨테이너 폭이 1020·1180·1240·1460·1520 으로 제각각이라 섹션마다 좌우 시작점이 달랐다.
   전부 GNB(.gnb-in = max 1520 / padding 32)와 같은 선에 맞춘다.
   ★이 블록은 반드시 안별 CSS 뒤에 와야 한다 — 앞에 두면 안별 규칙이 도로 덮는다. */
main .wrapc,
main .wrapw,
main .s7-in,
main .s7-inw,
main .s8-cmp-wrap,
main .s4-hero-in,
main .s2-feat-in,
main .s4-pain-grid,
main .s6-w,
main .s4-ws-frame,
main .s1-turn > .in,
main .s5-diag-wrap,
main .s9-story-in,
main .s9-fn-in{
  /* ★2차 요청서 §6 — 값을 직접 쓰지 않고 공통 토큰을 참조한다.
     좌 32(로고 시작점) / 우 45(햄버거 3선 끝점)의 비대칭이 정상이다. */
  max-width:var(--page-max-width) !important;
  padding-left:var(--ux-padL) !important;
  padding-right:var(--ux-padR) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ══ 2차 요청서 §6 — 세로 리듬 ══
   실측(2026-08-04) 20개 섹션의 상하 여백이 96·112·120·124·126·132px 으로 흩어져 있었다.
   전부 --section-space-lg 하나를 보게 바꾼다(최빈값 112px 기준).
   ★이 블록도 안별 CSS 뒤에 와야 한다. `main .클래스` = 특이도 (0,2,0) 이라
     안별 `.클래스` (0,1,0) 를 !important 없이 덮는다. */
main .sec,
main .s4-pain,
main .s1-turn,
main .s6-sec,
main .s2-feats,
main .s7-fields,
main .s4-ws,
main .s7-cases,
main .s7-full,
main .s7-flow{
  padding-top:var(--section-space-lg);
  padding-bottom:var(--section-space-lg);
}

/* ── 예외 (§6 "예외가 필요한 경우에만 별도 값, 이유를 주석으로") ── */
/* 히어로 = 페이지 첫 섹션. 포트폴리오·미디어 히어로와 같은 토큰을 쓴다.
   아래 여백이 0인 것은 바로 다음 섹션이 자기 상단 여백을 갖기 때문. */
main .s4-hero{ padding-top:var(--hero-space-top); padding-bottom:0; }
/* 기능 소개 → 90개 시나리오 그리드로 곧장 이어지는 자리라 아래를 좁게 둔다.
   여기에 112px 를 주면 한 덩어리로 읽히던 흐름이 끊긴다. */
main .s2-feats{ padding-bottom:40px; }
/* 결합 섹션과 WHY US 는 겉껍데기다 — 여백은 안쪽 블록이 갖는다 */
main .fx-merge,
main .s7-diff{ padding-top:0; padding-bottom:0; }

/* ══ 2차 요청서 §5-3 — 섹션 간 컴포넌트 규칙 통일 ══
   실측(2026-08-04): 그림자는 이미 0건, 테두리는 1px var(--line) 121곳으로 통일돼 있었다.
   남은 불일치는 ①카드 라운드 ②섹션 라벨(sec-pill) 크기 두 가지뿐이라 그것만 맞춘다.

   ① 카드 라운드 — 13px 94곳이 기본값인데 아래 아홉 갈래만 14·16·18·20px 을 쓰고 있었다.
      전부 같은 위계(섹션 안의 콘텐츠 카드)라 하나로 모은다. */
main .s9-worry-item,
main .s1-turn-item,
main .s9-wk-box,
main .s7-cc,
main .s4-box,
main .s5-after-box,
main .s8-cmp-foot,
main .dg-card{ border-radius:13px; }
/* 예외 — .s5-calc 는 카드가 아니라 그 안에 여러 칸을 담는 큰 프레임이라
   같은 13px 을 주면 안쪽 칸과 구분이 사라진다. 20px 유지. */

/* ② 섹션 라벨 — 17곳이 14px/600/자간 normal 인데 3-ZONE 한 곳만 12.5px/자간 2px 였다 */
main .s6-sec .sec-pill{ font-size:14px; letter-spacing:normal; }
/* ★2차 요청서 §6 — 태블릿·모바일 좌우 패딩을 24px/20px 로 낮추던 두 블록은 제거했다.
   ux-common.css 의 공통 정책은 "모바일에서도 32/45 를 유지하고 ≤380px 에서만
   우측을 32px 로 완화"다(로고·햄버거가 좁은 화면에서도 32/45 에 있기 때문).
   여기서만 낮추면 서비스 페이지의 본문이 다른 페이지보다 8~12px 밖으로 나가
   같은 사이트인데 페이지마다 기준선이 다르게 보인다.
   → 이제 --ux-padL/R 이 폭에 따라 알아서 움직이므로 별도 분기가 필요 없다. */