:root{
  /* ── 구조색 · 저채도 네이비 13단계 ────────────────────────────────
     전문적으로 보이는 사이트는 색 가짓수가 적고 명도 단계가 많다.
     hue는 222 하나로 고정하고 채도를 낮게 유지한다. ────────────── */
  --n-950:#070B14; --n-900:#0C1220; --n-850:#111A2C; --n-800:#18223A;
  --n-700:#26314D; --n-600:#38425E; --n-500:#5A6580; --n-400:#8792A9;
  --n-300:#B4BCCD; --n-200:#DDE2EC; --n-150:#EBEEF4; --n-100:#F4F6FA;
  --n-50:#FAFBFD;  --paper:#FFFFFF;

  /* ── 강조색 · 블루 1계열 ───────────────────────────────────────
     인디고(#3B41C5)에서 블루(#2C63D6)로 이동. 고채도 퍼플(#7059E8)은
     단독 강조에서 내리고, 그라데이션 끝점 용도로만 남긴다. ────── */
  --brand-800:#16307A; --brand-700:#1D3E8F; --brand-600:#2454B8;
  --brand:#2C63D6;     --brand-400:#5B8AE8; --brand-300:#8FB0F0;
  --brand-200:#B9CDF5; --brand-50:#EDF3FD;
  --accent:#4B5FD0;    --accent-200:#9FB0EE;

  /* ── 별칭(기존 이름 유지) ───────────────────────────────────── */
  --ink:var(--n-900); --body:var(--n-600); --muted:var(--n-500);
  --line:var(--n-200); --line-soft:var(--n-150);
  --surface:var(--paper); --surface-2:var(--n-100);
  --brand-2:var(--accent); --brand-tint:var(--brand-50);
  --on-dark:#EEF1F7; --on-dark-muted:#A8B2C8; --on-dark-line:rgba(255,255,255,.09);

  --wrap:1120px; --pad:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
              'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  background:var(--surface);color:var(--body);
  font-size:16px;line-height:1.75;letter-spacing:-.011em;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.34;letter-spacing:-.028em}
strong{font-weight:600;color:var(--ink)}
address{font-style:normal}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(64px,9vw,112px)}
/* 섹션 배경은 순백 하나가 아니라 세 단계로 나눈다: #FFFFFF → #FAFBFD → #F4F6FA */
.bg-1{background:var(--n-50)}
.bg-2{background:var(--surface-2);border-block:1px solid var(--line-soft)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:600;
  letter-spacing:.13em;color:var(--brand);text-transform:uppercase;margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brand);flex:none}
.h2{font-size:clamp(1.55rem,3.6vw,2.35rem);line-height:1.34}
.lead{font-size:clamp(1rem,1.6vw,1.115rem);color:var(--body);max-width:62ch;margin-top:22px;line-height:1.85}

/* header — 어두운 히어로 위에서는 투명·밝은 글자, 밝은 본문에 들어서면 반전 */
/* 히어로 위에 겹쳐 올린다 — 흰 띠가 어두운 첫 화면 위에 남지 않도록 */
/* 어두운 구간과 같은 색의 반투명 판. 히어로 위에서는 보이지 않고,
   숫자 띠가 밑으로 지나갈 때만 글자가 겹치지 않게 눌러준다. */
.site-head{position:sticky;top:0;z-index:100;margin-bottom:-70px;
  background:rgba(12,18,32,.72);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.site-head.is-stuck{background:rgba(255,255,255,.92);border-bottom-color:var(--line);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:26px;width:auto;filter:brightness(0) invert(1);transition:filter .3s var(--ease)}
.site-head.is-stuck .brand img{filter:none}
.brand-name{font-size:1.06rem;font-weight:700;color:#fff;letter-spacing:-.04em;transition:color .3s var(--ease)}
.site-head.is-stuck .brand-name{color:var(--ink)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:.885rem;font-weight:500;color:rgba(238,241,247,.78);
  transition:color .18s;white-space:nowrap}
.nav a:hover{color:#fff}
.site-head.is-stuck .nav a{color:var(--body)}
.site-head.is-stuck .nav a:hover{color:var(--brand)}
.btn-head{flex:none;font-size:.875rem;font-weight:600;color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.28);padding:9px 18px;border-radius:7px;white-space:nowrap;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
.btn-head:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.site-head.is-stuck .btn-head{background:var(--ink);border-color:var(--ink);color:#fff}
.site-head.is-stuck .btn-head:hover{background:var(--brand);border-color:var(--brand)}
@media (max-width:1080px){.nav{display:none}}

/* ═══════════════ HERO ═══════════════
   사진을 깔지 않는다. 아래 "실제로 걸었던 자리입니다" 섹션과 중복이다.
   대신 회사가 실제로 하는 판단 — 진료 반경을 그리고 그 안에서 매체를
   골라내는 일 — 을 추상 도형으로 세운다. 배경은 어둡게 가져가고
   숫자 띠까지 하나의 덩어리로 이어붙인 뒤 본문에서 밝게 풀어준다. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--n-900);
  padding-block:clamp(132px,15vw,186px) clamp(64px,9vw,104px)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;border-radius:50%;
  filter:blur(72px);will-change:transform}
.hero-bg::before{width:min(62vw,760px);aspect-ratio:1;right:-12%;top:-26%;
  background:radial-gradient(circle,rgba(44,99,214,.36) 0%,rgba(44,99,214,0) 68%)}
.hero-bg::after{width:min(48vw,560px);aspect-ratio:1;left:-14%;bottom:-32%;
  background:radial-gradient(circle,rgba(75,95,208,.24) 0%,rgba(75,95,208,0) 70%)}
/* 아주 옅은 격자 — 도시 블록. 자세히 봐야 보이는 정도로만 둔다. */
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 76% 68% at 62% 42%,#000 12%,transparent 78%);
  mask-image:radial-gradient(ellipse 76% 68% at 62% 42%,#000 12%,transparent 78%)}
.hero-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(34px,4.4vw,60px);align-items:center}
@media (max-width:960px){.hero-in{grid-template-columns:1fr;gap:clamp(32px,6vw,48px)}}

.hero .eyebrow{color:var(--brand-300);margin-bottom:22px}
.hero .eyebrow::before{background:var(--brand-300)}
.hero h1{font-size:clamp(2rem,5.6vw,3.35rem);line-height:1.26;letter-spacing:-.042em;
  font-weight:700;color:#fff;max-width:20ch}
.hero h1 .u{position:relative;color:#fff}
.hero h1 .u::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.07em;height:.26em;
  background:linear-gradient(90deg,rgba(44,99,214,.62),rgba(75,95,208,.26));
  border-radius:3px;z-index:-1}
.hero-answer{margin-top:28px;max-width:50ch}
.hero-answer p{font-size:clamp(1rem,1.5vw,1.11rem);line-height:1.85;color:#BFC8DC}
.hero-answer p strong{color:#fff;font-weight:600}
.hero-answer p + p{margin-top:9px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
/* 네 항목은 어느 폭에서도 한 줄에 안 들어간다. 3+1로 흘리지 말고 2×2로 세운다. */
.hero-meta{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;
  gap:12px 34px;margin-top:46px;padding-top:26px;
  border-top:1px solid var(--on-dark-line);font-size:.865rem;color:#93A0BB}
@media (max-width:400px){.hero-meta{grid-template-columns:1fr;gap:9px}}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brand-400);flex:none}

/* 히어로 → 본문 전환.
   위아래를 직선으로 섞으면 중간에 탁한 회색 띠가 남는다.
   그래서 밝은 면을 아래에서 타원으로 밀어 올려 곡면으로 끊는다. */
.dome{position:relative;height:clamp(58px,7vw,92px);margin-top:-1px;
  background:var(--n-900);overflow:hidden}
.dome::before,.dome::after{content:"";position:absolute;inset:0;pointer-events:none}
/* 밝은 면을 아래에서 타원으로 밀어 올린다. 섞이는 구간을 짧게 잡아
   안개가 아니라 곡선으로 떨어지는 모서리로 읽히게 한다. */
.dome::before{background:radial-gradient(ellipse 170% 118% at 50% 116%,
  var(--n-50) 0%,var(--n-50) 62%,rgba(250,251,253,.55) 79%,rgba(250,251,253,0) 96%)}
.dome::after{background:radial-gradient(ellipse 64% 150% at 50% -20%,
  rgba(44,99,214,.24) 0%,rgba(44,99,214,0) 64%)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:.945rem;
  font-weight:600;padding:14px 24px;border-radius:7px;
  transition:transform .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.btn svg{flex:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 20px rgba(44,99,214,.30)}
.btn-primary:hover{background:var(--brand-600);transform:translateY(-2px);box-shadow:0 10px 28px rgba(44,99,214,.40)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--ink)}
.hero .btn-ghost{border-color:rgba(255,255,255,.24);color:#EEF1F7;background:transparent}
.hero .btn-ghost:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn-kakao{background:#FEE500;color:#1A1A1A}
.btn-kakao:hover{background:#F5DC00;transform:translateY(-2px)}
.btn-line{border:1px solid rgba(255,255,255,.24);color:var(--on-dark)}
.btn-line:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#E8EDF9;transform:translateY(-2px)}

/* ── 히어로 그래픽 · 진료 반경과 매체 선별 ──
   동심원 = 환자가 오는 거리. 점 = 그 반경에 걸 수 있는 매체.
   밝게 켜진 점만이 그 병원에 맞다고 판단해 고른 매체다. */
.hero-art{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:1}
.hero-art svg{width:100%;height:100%;display:block;overflow:visible}
.ha-ring{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.ha-ring--dash{stroke-dasharray:3 7;stroke:rgba(255,255,255,.16)}
.ha-tick{stroke:rgba(255,255,255,.20);stroke-width:1;stroke-linecap:round}
.ha-spoke{stroke:rgba(255,255,255,.07);stroke-width:1}
.ha-link{stroke:url(#haLink);stroke-width:1.25;fill:none;stroke-linecap:round}
.ha-node{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.26);stroke-width:1}
.ha-node--on{fill:var(--brand-300);stroke:none;filter:url(#haGlow)}
.ha-core{fill:#fff}
.ha-core-ring{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.25}
.ha-label{fill:rgba(238,241,247,.62);font-size:11px;font-weight:600;letter-spacing:.06em}
@media (max-width:960px){.hero-art{max-width:400px}}
@media (max-width:560px){
  .hero{padding-block:106px clamp(52px,9vw,72px)}
  .hero-art{max-width:272px}
  .ha-label{font-size:14px}
  .hero-meta{margin-top:36px;padding-top:22px}
}

/* 숫자 띠 — 히어로와 같은 어둠으로 이어붙인다 */
.stats{padding-block:0;background:var(--n-900);position:relative;z-index:2}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--on-dark-line)}
.stats-grid > div{background:var(--n-900);padding:clamp(26px,3.4vw,38px) clamp(14px,2vw,24px);text-align:center}
.stats dt{font-size:.79rem;letter-spacing:.02em;color:#8F9AB4;margin-bottom:10px}
.stats dd{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;color:var(--on-dark);letter-spacing:-.03em;line-height:1.3}
/* 숫자에 그라데이션을 씌우면 아래쪽 획이 배경으로 녹아 읽히지 않는다(실측 1.4:1).
   실적 수치는 이 페이지에서 가장 확실하게 읽혀야 하는 정보다 — 단색으로 둔다. */
.stats dd b{font-size:clamp(1.85rem,4.2vw,2.7rem);font-weight:700;color:#fff;letter-spacing:-.045em;
  margin-right:2px;font-variant-numeric:tabular-nums}
@media (max-width:720px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* 섹션 안 가로 사진 띠 */
.band{margin-top:clamp(36px,4.6vw,54px);border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.band img{width:100%;aspect-ratio:1440/494;object-fit:cover}
.band figcaption{padding:14px 18px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);background:#fff}
@media (max-width:560px){.band img{aspect-ratio:16/10}}

/* facts */
.facts{padding-block:clamp(48px,6vw,72px);background:var(--n-50);border-bottom:1px solid var(--line-soft)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.fact{background:var(--n-50);padding:28px 26px 26px;transition:background .25s var(--ease)}
.fact:hover{background:var(--paper)}
.fact h3{font-size:1.02rem;margin-bottom:10px}
.fact p{font-size:.9rem;color:var(--muted);line-height:1.78}
@media (max-width:760px){.facts-grid{grid-template-columns:1fr}.fact{padding:22px 20px}}

/* 매체 선정 기준 */
.steps{margin-top:clamp(36px,4.6vw,54px);border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:96px minmax(0,25ch) 1fr;gap:0 32px;align-items:start;
  padding:clamp(26px,3.4vw,36px) 0;border-bottom:1px solid var(--line)}
/* opacity .3 은 흰 배경에서 1.1:1 — 번호가 사실상 안 보였다.
   보조 정보로 물러나되 읽히기는 해야 하므로 옅은 브랜드색을 단색으로 쓴다. */
.step .num{font-size:clamp(1.65rem,2.7vw,2.15rem);font-weight:700;color:var(--brand-400);
  letter-spacing:-.04em;line-height:1;padding-top:.06em}
.step h3{font-size:1.1rem;letter-spacing:-.03em}
.step p{font-size:.94rem;color:var(--body);line-height:1.85}
@media (max-width:880px){.step{grid-template-columns:1fr;gap:0}.step .num{padding-top:0;margin-bottom:6px}.step h3{margin-bottom:10px}}

/* 하는 일 · 매체 카드 (주인공) */
.svc-group{margin-top:clamp(34px,4.4vw,50px)}
.svc-group + .svc-group{margin-top:clamp(40px,5vw,58px)}
.svc-group-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:20px;
  border-bottom:1px solid var(--line)}
.svc-group-head h3{font-size:1rem;letter-spacing:-.025em}
.svc-group-head .cnt{margin-left:auto;font-size:.8rem;color:var(--muted);font-weight:500}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:900px){.card-grid{grid-template-columns:1fr}}
/* 사진이 카드의 주인공이다. 사진 → 제목 → 설명 순서. */
.mcard{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;background:#fff;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease)}
.mcard:hover{border-color:#BFC9E4;transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(12,18,32,.04),0 18px 42px rgba(12,18,32,.12),0 4px 14px rgba(44,99,214,.08)}
.mcard-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.mcard-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),filter .4s var(--ease)}
.mcard:hover .mcard-media img{transform:scale(1.075)}
/* 사진 위로 아주 얕은 브랜드 톤 — 커서를 올린 카드가 무엇인지 분명해진다 */
.mcard-media::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(160deg,rgba(44,99,214,.16),rgba(12,18,32,.06) 62%);
  transition:opacity .3s var(--ease)}
.mcard:hover .mcard-media::after{opacity:1}
.mcard-media .tag-real{position:absolute;left:12px;top:12px;z-index:1;
  font-size:.7rem;font-weight:600;letter-spacing:-.01em;color:#fff;
  background:rgba(12,18,32,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:5px 10px;border-radius:5px}
.mcard-body{padding:22px 22px 24px}
.mcard-body h4{font-size:1.06rem;letter-spacing:-.03em;margin-bottom:9px}
.mcard-body p{font-size:.885rem;color:var(--body);line-height:1.78}
/* 무료 진단으로 이어지는 고리 (2026-08-05 연결 완료 — hospitalblog.kr/clinic-check) */
.mcard-cta{margin-top:13px;padding-top:13px;border-top:1px solid var(--line-soft)}
.mcard-cta strong{display:block;color:var(--brand);font-weight:600}
.mcard-cta-link{
  display:inline-block;margin-top:13px;padding:9px 16px;
  border:1px solid var(--brand);border-radius:8px;
  color:var(--brand);font-size:.85rem;font-weight:600;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.mcard-cta-link:hover{background:var(--brand);color:#fff}
@media (prefers-reduced-motion:reduce){.mcard-cta-link{transition:none}}
@media (max-width:560px){.mcard-body{padding:18px 18px 20px}}
@media (prefers-reduced-motion:reduce){
  .mcard:hover{transform:none}.mcard:hover .mcard-media img{transform:none}
}
/* 안 파는 항목 — 파는 목록 끝에 거절을 하나 둔다 */
.svc-decline{
  display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  margin-top:clamp(28px,3.4vw,38px);padding:20px 22px;
  border:1px dashed var(--n-300);border-radius:10px;background:transparent;
}
.svc-decline svg{width:28px;height:28px;color:var(--n-400)}
.svc-decline svg .acc{stroke:#B45A72}
.svc-decline h4{font-size:.95rem;margin-bottom:6px}
.svc-decline p{font-size:.875rem;color:var(--muted);line-height:1.75}
@media (max-width:560px){.svc-decline{grid-template-columns:1fr;gap:10px}}

/* 의료광고법 (다크 · 압축) */
.law{background:var(--ink);color:var(--on-dark-muted)}
.law h2{color:var(--on-dark)}
/* 다크 섹션에서는 --brand(#2C63D6)가 3.4:1 로 떨어진다. law 와 같은 처리를 contact 에도 준다. */
.law .eyebrow,.contact .eyebrow{color:var(--brand-300)}
.law .eyebrow::before,.contact .eyebrow::before{background:var(--brand-300)}
.law-body{margin-top:26px;max-width:64ch}
.law-body p{font-size:clamp(1rem,1.6vw,1.1rem);line-height:1.9;color:#C6CFE2}
.law-body p + p{margin-top:22px}
.law-body strong{color:var(--on-dark);font-weight:600}
.law-more{display:inline-flex;align-items:center;gap:8px;margin-top:30px;
  font-size:.92rem;font-weight:600;color:var(--brand-300)}
.law-more:hover{text-decoration:underline;text-underline-offset:3px}
.disclaimer{margin-top:34px;padding-top:24px;border-top:1px solid var(--on-dark-line);
  font-size:.82rem;color:#7B869F;max-width:76ch;line-height:1.72}

/* clients */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:clamp(34px,4.6vw,50px)}
@media (max-width:520px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
.logo-cell{background:transparent;display:flex;align-items:center;justify-content:center;
  padding:24px 20px;min-height:132px;box-shadow:1px 0 0 0 var(--line),0 1px 0 0 var(--line)}
.logo-cell img{max-height:62px;width:auto;max-width:100%;object-fit:contain;
  mix-blend-mode:multiply;
  filter:grayscale(1);opacity:.68;transition:filter .3s ease,opacity .3s ease}
.logo-cell:hover img{filter:grayscale(0);opacity:1}
@media (hover:none){.logo-cell img{filter:grayscale(0);opacity:.94}}
@media (max-width:520px){.logo-cell{min-height:104px;padding:18px 14px}.logo-cell img{max-height:48px}}

/* 실제 집행 사진 */
.proof{margin-top:clamp(40px,5vw,58px)}
.proof-h{font-size:clamp(1.1rem,2.1vw,1.32rem);letter-spacing:-.03em}
.proof-lead{margin-top:12px;font-size:.9rem;color:var(--muted);line-height:1.8;max-width:64ch}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
@media (max-width:900px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
.proof-grid figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.proof-grid img{width:100%;aspect-ratio:16/9;object-fit:cover}
.proof-grid figcaption{padding:11px 13px;font-size:.8rem;color:var(--body);background:#fff;border-top:1px solid var(--line-soft)}

/* saas */
.saas-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.saas-in{grid-template-columns:1fr}}
.saas-card{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:28px 26px}
.saas-card .tag{font-size:.72rem;font-weight:600;letter-spacing:.11em;color:var(--brand);text-transform:uppercase}
.saas-card h3{font-size:1.24rem;margin:10px 0 8px}
.saas-card p{font-size:.9rem;color:var(--muted)}
.saas-card a{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.9rem;font-weight:600;color:var(--brand)}
.saas-card a:hover{text-decoration:underline;text-underline-offset:3px}

/* 집행 사례 */
.cases{margin-top:clamp(44px,5.5vw,64px);padding-top:clamp(34px,4vw,44px);border-top:1px solid var(--line)}
.cases-h{font-size:clamp(1.15rem,2.2vw,1.4rem);letter-spacing:-.03em}
.cases-lead{margin-top:14px;font-size:.9rem;color:var(--muted);line-height:1.8;max-width:64ch}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(26px,3.2vw,34px)}
@media (max-width:820px){.case-grid{grid-template-columns:1fr}}
.case{border:1px solid var(--line);border-radius:10px;padding:24px 22px;background:var(--surface-2)}
.case-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.case h4{font-size:1rem;letter-spacing:-.028em}
.case-metric{text-align:right;flex:none;line-height:1.15}
.case-metric b{display:block;font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:700;
  color:var(--brand);letter-spacing:-.045em}
.case-metric span{display:block;margin-top:4px;font-size:.74rem;color:var(--muted);letter-spacing:0}
.case dl div{display:grid;grid-template-columns:50px 1fr;gap:14px;padding:9px 0}
.case dl div + div{border-top:1px solid var(--line-soft)}
.case dt{font-size:.78rem;font-weight:600;color:var(--brand);letter-spacing:.02em;padding-top:.18em}
.case dd{font-size:.875rem;color:var(--body);line-height:1.75}

/* FAQ */
.faq-list{margin-top:clamp(34px,4.4vw,50px);border-top:1px solid var(--line)}
.faq-item{display:grid;grid-template-columns:minmax(0,26ch) 1fr;gap:8px 40px;
  padding:clamp(22px,2.8vw,30px) 0;border-bottom:1px solid var(--line)}
.faq-item h3{font-size:1.03rem;letter-spacing:-.03em}
.faq-a{font-size:.935rem;line-height:1.85;color:var(--body)}
.faq-a strong{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}
@media (max-width:820px){.faq-item{grid-template-columns:1fr;gap:10px}}

/* contact */
.contact{background:var(--ink);color:var(--on-dark-muted)}
.contact h2{color:var(--on-dark);max-width:22ch}
.contact .lead{color:#C6CFE2;max-width:58ch}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.contact-note{margin-top:26px;font-size:.86rem;color:#8F9AB4}
.contact-rows{margin-top:clamp(40px,5vw,58px);padding-top:32px;border-top:1px solid var(--on-dark-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px 32px}
.contact-rows div{font-size:.9rem}
.contact-rows dt{font-size:.76rem;letter-spacing:.09em;color:#8F9AB4;text-transform:uppercase;margin-bottom:8px}
.contact-rows dd{color:var(--on-dark);line-height:1.7}
.contact-rows dd a:hover{color:var(--brand-300)}

/* footer */
footer{background:var(--n-950);color:#8A94AD;padding-block:52px 40px;font-size:.845rem;line-height:1.85}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{height:22px;width:auto;opacity:.9}
.foot-brand span{color:#DBE0EC;font-weight:600;font-size:.98rem;letter-spacing:-.03em}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-links a:hover{color:var(--brand-300)}
.foot-biz{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07)}
.foot-biz p{margin-bottom:3px}
.foot-copy{margin-top:22px;font-size:.79rem;color:#78839C}

/* ═══════════════ 움직임 ═══════════════
   전제: 애니메이션이 하나도 실행되지 않아도 모든 내용이 그대로 보여야 한다.
   따라서 초기 은닉은 .js 가 붙었을 때만, 그리고 reduced-motion 이면 즉시 해제한다. */

/* 스크롤 진입 — 24px 상승 + 페이드, 620ms. 형제끼리는 JS가 계단식 지연을 준다. */
.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* 히어로 첫 진입 — 로드 직후 한 번, 위에서부터 순서대로 */
@keyframes hRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hFade{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
.js .h-rise{opacity:0;animation:hRise .78s var(--ease) var(--hd,0ms) both}
.js .h-fade{opacity:0;animation:hFade 1.05s var(--ease) var(--hd,0ms) both}

/* 히어로 배경 — 아주 느린 빛 이동. 눈에 띄면 실패다. */
@keyframes bgDriftA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3%,4%,0)}}
@keyframes bgDriftB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4%,-3%,0)}}
.js .hero-bg::before{animation:bgDriftA 22s ease-in-out infinite}
.js .hero-bg::after{animation:bgDriftB 27s ease-in-out infinite 3s}

/* 히어로 그래픽 */
@keyframes haSweep{to{transform:rotate(360deg)}}
@keyframes haPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.22)}}
@keyframes haDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes haRingIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.hero-art svg > g,.hero-art svg > text{transform-origin:260px 260px;transform-box:view-box}
.ha-sweep{transform-origin:260px 260px;transform-box:view-box}
.js .ha-sweep{animation:haSweep 16s linear infinite}
.js .ha-rings{animation:haRingIn 1.1s var(--ease) .30s both}
.js .ha-spokes{animation:haRingIn 1.1s var(--ease) .40s both}
.js .ha-ticks{animation:haRingIn 1.1s var(--ease) .50s both}
.js .ha-links{animation:haRingIn .9s var(--ease) .68s both}
.js .ha-nodes{animation:haRingIn .9s var(--ease) .78s both}
.js .ha-picked{animation:haRingIn .9s var(--ease) .88s both}
.js .ha-center{animation:haRingIn .8s var(--ease) .22s both}
.ha-node--on{transform-origin:center;transform-box:fill-box}
.js .ha-node--on{animation:haPulse 4.2s ease-in-out infinite}
.js .ha-node--on.n2{animation-duration:5.1s;animation-delay:.7s}
.js .ha-node--on.n3{animation-duration:4.6s;animation-delay:1.4s}
.js .ha-node--on.n4{animation-duration:5.6s;animation-delay:.35s}
.js .ha-node--on.n5{animation-duration:4.9s;animation-delay:2.1s}

/* 숫자 카운트업 중에는 자리수가 흔들리지 않게 */
.stats dd b[data-count]{display:inline-block;min-width:1.1em;text-align:right}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .h-rise,.js .h-fade{opacity:1;animation:none}
  .js .hero-bg::before,.js .hero-bg::after,
  .js .ha-sweep,.js .ha-rings,.js .ha-spokes,.js .ha-ticks,
  .js .ha-links,.js .ha-nodes,.js .ha-picked,.js .ha-center,
  .js .ha-node--on{animation:none;opacity:1;transform:none}
  .js .ha-sweep{opacity:0}
  .btn,.logo-cell img,.mcard,.mcard-media img,.mcard-media::after,.fact,.site-head{transition:none}
  .btn:hover,.mcard:hover{transform:none}
}