/* ============================================================
   DEVELISE — Dark Editorial Design System
   brand: #0051C7 → #82C9F9
   ============================================================ */

/* ---------- Font ---------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');

/* ---------- Tokens ---------- */
:root{
  --bg:#08090C;
  --bg-2:#0B0D11;
  --surface:#101319;
  --surface-2:#151922;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --tx:#FFFFFF;
  --tx-2:#A8AEBA;
  --tx-3:#6B7280;
  --tx-4:#464C57;

  --blue:#0051C7;
  --blue-2:#2E78E0;
  --blue-3:#82C9F9;
  --grad:linear-gradient(135deg,#0051C7,#82C9F9);
  --grad-soft:linear-gradient(135deg,rgba(0,81,199,.18),rgba(130,201,249,.10));

  --maxw:1280px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);

  --fs-display:clamp(38px,7.4vw,104px);
  --fs-h1:clamp(30px,5.2vw,68px);
  --fs-h2:clamp(26px,4vw,52px);
  --fs-h3:clamp(19px,2.1vw,28px);
  --fs-body:clamp(14px,1.15vw,17px);
  --fs-sm:clamp(12px,.95vw,14px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);color:var(--tx);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
  font-size:var(--fs-body);line-height:1.7;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(130,201,249,.28)}
:focus-visible{outline:2px solid var(--blue-3);outline-offset:3px;border-radius:4px}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#22262F;border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#333944}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
/* overflow-x:clip → 장식 글로우가 가로 스크롤을 만들지 않게. (sticky는 그대로 동작) */
.sec{position:relative;padding-block:clamp(80px,11vw,168px);overflow-x:clip}
.sec--tight{padding-block:clamp(60px,8vw,110px)}
.hr{height:1px;background:var(--line);border:0}

/* ---------- Type utilities ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue-3);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--blue-3);opacity:.7}
.eyebrow--plain::before{display:none}
.mo-br{display:none}
@media (max-width:600px){.mo-br{display:block}}

.display{
  font-size:var(--fs-display);line-height:1.04;font-weight:800;
  letter-spacing:-.045em;
}
.h1{font-size:var(--fs-h1);line-height:1.12;font-weight:800;letter-spacing:-.04em}
.h2{font-size:var(--fs-h2);line-height:1.18;font-weight:800;letter-spacing:-.035em}
.h3{font-size:var(--fs-h3);line-height:1.35;font-weight:700;letter-spacing:-.025em}
.lead{font-size:clamp(15px,1.35vw,19px);line-height:1.75;color:var(--tx-2);font-weight:400}
.muted{color:var(--tx-2)}
.dim{color:var(--tx-3)}
.g-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.num-tag{
  font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--tx-4);
  font-variant-numeric:tabular-nums;
}

/* ---------- Buttons ---------- */
.btn{
  --h:54px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--h);padding:0 28px;border-radius:999px;border:1px solid transparent;
  font-size:14px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  transition:transform .35s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .35s;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 10px 34px -12px rgba(0,81,199,.85)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(46,120,224,.95)}
.btn--ghost{border-color:var(--line-2);color:var(--tx);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:rgba(130,201,249,.55);background:rgba(130,201,249,.07);transform:translateY(-2px)}
.btn--sm{--h:44px;padding:0 20px;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--blue-3);letter-spacing:.02em;
}
.link-arrow svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translate(3px,-3px)}

/* ---------- Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(8,9,12,.78);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.hdr__logo{display:flex;align-items:center;gap:10px}
.hdr__logo img{height:26px;width:auto}
.hdr__logo-txt{font-size:17px;font-weight:800;letter-spacing:.06em}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  position:relative;padding:10px 15px;border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--tx-2);
  transition:color .25s,background .25s;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tx);background:rgba(255,255,255,.06)}
.hdr__cta{display:flex;align-items:center;gap:10px}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;
  background:transparent;cursor:pointer;place-items:center;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--tx);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger span+span{margin-top:5px}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:76px 0 auto;z-index:99;
  background:rgba(8,9,12,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.drawer.is-open{border-bottom-color:var(--line)}
/* 높이는 JS가 실제 콘텐츠 높이로 지정 (grid 0fr→1fr 트릭은 일부 브라우저에서 0px로 계산됨) */
.drawer__in{overflow:hidden;height:0;transition:height .45s var(--ease)}
.drawer__list{padding:8px var(--pad) 28px}
.drawer__list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px;border-bottom:1px solid var(--line);
  font-size:18px;font-weight:700;letter-spacing:-.02em;
}
.drawer__list a span{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--tx-4)}
.drawer__foot{padding:20px var(--pad) 30px}

/* ---------- Background decor ---------- */
.bg-glow{
  position:absolute;pointer-events:none;z-index:0;border-radius:50%;
  filter:blur(90px);opacity:.5;
}
.bg-glow--a{width:min(760px,90vw);height:520px;left:50%;top:-160px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(0,81,199,.55),transparent 65%)}
.bg-glow--b{width:min(520px,70vw);height:420px;right:-120px;top:32%;
  background:radial-gradient(circle,rgba(130,201,249,.22),transparent 66%)}
.bg-noise{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.sec>.wrap{position:relative;z-index:2}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:var(--grad)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:120px 90px;overflow:hidden}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 9px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.035);
  font-size:12px;font-weight:600;color:var(--tx-2);letter-spacing:-.005em;
}
.hero__badge b{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;
}
.hero__title{margin-top:26px}
/* 마스크 라인 — 히어로/서브페이지 공통
   ⚠️ 한글은 글리프가 line-box보다 커서 overflow:hidden에 받침이 잘린다.
      padding으로 마스크 영역을 넓히고 음수 margin으로 레이아웃 간격은 그대로 유지한다. */
.line{display:block;overflow:hidden;padding-block:.16em;margin-block:-.16em}
.line i{display:block;font-style:normal}
.hero__lead{margin-top:26px;max-width:min(600px,90%)}
.hero__actions{margin-top:38px}

.hero__stats{
  margin-top:clamp(48px,7vw,84px);display:grid;gap:1px;
  grid-template-columns:repeat(4,1fr);
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
.hstat{background:var(--bg);padding:22px clamp(14px,2vw,26px)}
.hstat__v{font-size:clamp(24px,3.1vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.1;
  font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hstat__l{margin-top:6px;font-size:12.5px;color:var(--tx-3);font-weight:500}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10px;letter-spacing:.24em;color:var(--tx-4);font-weight:700;
}
.scroll-hint i{display:block;width:1px;height:38px;background:linear-gradient(var(--blue-3),transparent);animation:sh 2s var(--ease) infinite}
@keyframes sh{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Marquee ---------- */
.marquee{
  position:relative;border-block:1px solid var(--line);overflow:hidden;
  padding-block:clamp(16px,2vw,24px);background:var(--bg-2);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:mq 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__grp{display:flex;align-items:center;gap:clamp(26px,4vw,54px);padding-right:clamp(26px,4vw,54px)}
.marquee__item{
  display:inline-flex;align-items:center;gap:14px;
  font-size:clamp(15px,2.1vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--tx-4);
  white-space:nowrap;transition:color .3s;
}
.marquee__item:nth-child(even){color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.marquee__item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--tx-4)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Section head ---------- */
.sec-head{display:grid;gap:20px;margin-bottom:clamp(38px,5vw,66px)}
.sec-head__top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-head p.lead{max-width:640px}

/* ---------- Statement ---------- */
.statement{display:grid;grid-template-columns:180px 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.statement__side{position:sticky;top:110px}
.statement__body p+p{margin-top:20px}
.statement__big{font-size:clamp(24px,3.4vw,46px);line-height:1.3;font-weight:800;letter-spacing:-.035em}
.statement__big em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.statement__note{margin-top:30px;max-width:640px}

/* ============================================================
   THE DIFFERENCE — 표가 아니라 '이렇게 바뀝니다' 변환 흐름
   ============================================================ */
.vs{border-bottom:1px solid var(--line)}
.vs__head{
  display:grid;grid-template-columns:54px 1fr 56px 1fr;gap:clamp(12px,2vw,30px);
  padding-bottom:16px;
}
.vs__htag{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--tx-4)}
.vs__htag--us{color:var(--blue-3)}

.vs__row{
  position:relative;
  display:grid;grid-template-columns:54px 1fr 56px 1fr;gap:clamp(12px,2vw,30px);
  align-items:center;
  padding:clamp(22px,2.8vw,32px) 0;
  border-top:1px solid var(--line);
}
.vs__row::before{
  content:"";position:absolute;inset:0 -20px;border-radius:16px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(46,120,224,.10) 55%,transparent);
  opacity:0;transition:opacity .5s var(--ease);
}
.vs__row:hover::before{opacity:1}

.vs__n{
  position:relative;font-size:clamp(22px,2.6vw,34px);font-weight:800;letter-spacing:-.05em;
  line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(130,201,249,.34);
  transition:filter .45s var(--ease);
}
.vs__row:hover .vs__n{filter:drop-shadow(0 0 8px rgba(46,120,224,.85)) drop-shadow(0 0 20px rgba(0,81,199,.5))}
@supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .vs__n{color:rgba(130,201,249,.32)}
}

.vs__other{position:relative;transition:opacity .45s var(--ease);opacity:.5}
.vs__row:hover .vs__other{opacity:.3}
.vs__other .vs__t{
  font-size:clamp(15px,1.7vw,20px);font-weight:600;letter-spacing:-.03em;line-height:1.4;color:var(--tx-2);
  text-decoration:line-through;text-decoration-color:rgba(255,255,255,.32);text-decoration-thickness:1.5px;
}
.vs__other .vs__d{margin-top:7px;font-size:13px;color:var(--tx-4);line-height:1.6}

.vs__arrow{
  width:44px;height:44px;border-radius:50%;justify-self:center;
  display:grid;place-items:center;flex:none;
  border:1px solid var(--line-2);color:var(--tx-4);background:var(--bg);
  transition:background .45s var(--ease),border-color .45s,color .45s,transform .5s var(--ease),box-shadow .5s;
}
.vs__arrow svg{width:16px;height:16px}
.vs__row:hover .vs__arrow{
  background:var(--grad);border-color:transparent;color:#fff;
  transform:scale(1.08);box-shadow:0 8px 26px -8px rgba(46,120,224,.9);
}

.vs__us{position:relative;padding-left:clamp(14px,1.6vw,20px);transition:transform .5s var(--ease)}
.vs__us::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px;
  background:var(--grad);transform:scaleY(.4);transform-origin:center;
  transition:transform .5s var(--ease);
}
.vs__row:hover .vs__us{transform:translateX(4px)}
.vs__row:hover .vs__us::before{transform:scaleY(1)}
.vs__us .vs__t{
  font-size:clamp(16px,1.95vw,23px);font-weight:800;letter-spacing:-.035em;line-height:1.35;color:#fff;
}
.vs__us .vs__d{margin-top:8px;font-size:13.6px;color:var(--tx-2);line-height:1.68}

/* ---------- Compare table (구버전 · 미사용) ---------- */
.compare{
  border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);
}
.compare__head{
  display:grid;grid-template-columns:1fr 1.15fr;gap:1px;background:var(--line);
}
.compare__hcell{background:var(--surface-2);padding:22px clamp(16px,2.4vw,32px)}
.compare__hcell:last-child{background:linear-gradient(135deg,rgba(0,81,199,.22),rgba(130,201,249,.08));position:relative}
.compare__hcell:last-child::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--grad)}
.compare__htag{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--tx-4)}
.compare__hcell:last-child .compare__htag{color:var(--blue-3)}
.compare__hname{margin-top:7px;font-size:clamp(16px,1.8vw,22px);font-weight:800;letter-spacing:-.03em}
.compare__row{display:grid;grid-template-columns:1fr 1.15fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.compare__cell{
  background:var(--bg-2);padding:20px clamp(16px,2.4vw,32px);
  display:flex;align-items:flex-start;gap:12px;transition:background .35s;
}
.compare__row:hover .compare__cell{background:#0F1218}
.compare__cell--us{background:rgba(46,120,224,.055)}
.compare__row:hover .compare__cell--us{background:rgba(46,120,224,.10)}
.ico{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.ico--x{background:rgba(255,255,255,.06);color:var(--tx-4)}
.ico--o{background:var(--grad);color:#fff}
.ico svg{width:11px;height:11px}
.compare__t{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.5}
.compare__d{margin-top:4px;font-size:13px;color:var(--tx-3);line-height:1.6}
.compare__cell--us .compare__t{color:#fff}
.compare__cell--us .compare__d{color:var(--tx-2)}
.compare__label{
  display:none;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--tx-4);margin-bottom:8px;
}

/* ---------- Capability list (numbered rows) ---------- */
.caps{border-top:1px solid var(--line)}
.cap{
  display:grid;grid-template-columns:56px 1fr auto;gap:clamp(14px,3vw,40px);align-items:start;
  padding:clamp(24px,3.2vw,38px) clamp(8px,1.6vw,22px);
  border-bottom:1px solid var(--line);position:relative;transition:background .4s var(--ease);
}
.cap::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,120,224,.10),transparent 55%);
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.cap:hover::before{opacity:1}
.cap__n{margin-top:12px;display:block;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--tx-4);text-align:center;transition:color .35s}
.cap:hover .cap__n{color:var(--blue-3)}
.cap__t{font-size:clamp(19px,2.3vw,30px);font-weight:800;letter-spacing:-.035em;line-height:1.25}
.cap__d{margin-top:12px;color:var(--tx-2);font-size:14.5px;line-height:1.72;max-width:640px}
.cap__tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-size:11.5px;font-weight:600;color:var(--tx-2);padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.025);
}
.cap__go{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--tx-3);flex:none;margin-top:4px;
  transition:transform .45s var(--ease),background .35s,color .35s,border-color .35s;
}
.cap:hover .cap__go{background:var(--grad);border-color:transparent;color:#fff;transform:rotate(45deg)}
.cap__go svg{width:16px;height:16px}

/* ---------- Cards ---------- */
.grid{display:grid;gap:clamp(12px,1.6vw,20px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;padding:clamp(22px,2.6vw,32px);border-radius:20px;
  border:1px solid var(--line);background:var(--surface);overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(130,201,249,.12),transparent 55%);
  opacity:0;transition:opacity .4s;
}
.card:hover{transform:translateY(-5px);border-color:rgba(130,201,249,.32);background:var(--surface-2)}
.card:hover::after{opacity:1}
.card__ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--grad-soft);border:1px solid rgba(130,201,249,.22);color:var(--blue-3);
}
.card__ico svg{width:20px;height:20px}
.card__t{font-size:17px;font-weight:700;letter-spacing:-.025em}
.card__d{margin-top:9px;font-size:14px;color:var(--tx-2);line-height:1.7}

/* ---------- Process timeline ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,22px)}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:29px;height:1px;
  background:linear-gradient(90deg,var(--blue),var(--blue-3),transparent);opacity:.35;
}
.step{position:relative;padding-top:0}
.step__dot{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-2);
  font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--tx-3);
  position:relative;z-index:2;transition:all .4s var(--ease);
}
.step:hover .step__dot{background:var(--grad);border-color:transparent;color:#fff;transform:scale(1.06)}
.step__t{margin-top:20px;font-size:17px;font-weight:700;letter-spacing:-.025em}
.step__d{margin-top:8px;font-size:13.5px;color:var(--tx-2);line-height:1.7}

/* ---------- Pricing ---------- */
.prices{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(14px,2vw,22px);align-items:start}
.price{
  position:relative;border:1px solid var(--line);border-radius:24px;padding:clamp(26px,3vw,40px);
  background:var(--surface);overflow:hidden;
}
.price--hi{border-color:rgba(130,201,249,.35);background:linear-gradient(180deg,rgba(0,81,199,.16),rgba(16,19,25,1) 62%)}
.price--hi::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--grad)}
.price__badge{
  position:absolute;top:22px;right:22px;padding:6px 13px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;
}
.price__k{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--blue-3)}
.price__v{margin-top:14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.price__v b{font-size:clamp(30px,4vw,50px);font-weight:800;letter-spacing:-.045em;line-height:1}
.price__v s{color:var(--tx-4);font-size:17px;text-decoration-thickness:1.5px}
.price__v span{color:var(--tx-3);font-size:14px}
.price__note{margin-top:10px;font-size:13.5px;color:var(--tx-2)}
.price__list{margin-top:26px;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:24px}
.price__list li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--tx-2)}
.price__list svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--blue-3)}
.price .btn{margin-top:28px;width:100%}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,68px);align-items:start}
.cinfo__list{margin-top:32px;display:grid;gap:2px}
.cinfo__row{display:flex;gap:15px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.cinfo__row:last-child{border-bottom:1px solid var(--line)}

/* 2열 배치 — 폼과 좌우 높이를 맞추기 위함 */
.cinfo__list--grid{
  grid-template-columns:1fr 1fr;gap:0 clamp(18px,2.4vw,32px);
  border-bottom:1px solid var(--line);
}
.cinfo__list--grid .cinfo__row{border-bottom:0}
.cinfo__list--grid .cinfo__row:last-child{border-bottom:0}
.cinfo__list--grid .cinfo__row--wide{grid-column:1/-1}
@media (max-width:560px){
  .cinfo__list--grid{grid-template-columns:1fr}
}

/* 카카오톡 버튼 */
.btn--kakao{background:#FEE500;color:#191600;box-shadow:0 10px 30px -12px rgba(254,229,0,.55)}
.btn--kakao:hover{background:#FFEB33;transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(254,229,0,.7)}
.btn--kakao svg{width:17px;height:17px}
.cinfo__ico--kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.cinfo__ico--kakao svg{filter:none}
.cinfo__ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--grad-soft);border:1px solid rgba(130,201,249,.2);color:var(--blue-3)}
.cinfo__ico svg{width:17px;height:17px}
.cinfo__k{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--tx-4)}
.cinfo__v{margin-top:3px;font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.cinfo__v small{display:block;font-size:13px;font-weight:400;color:var(--tx-3);letter-spacing:0;margin-top:2px}

.form{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:clamp(24px,3vw,40px)}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--tx-2);margin-bottom:8px}
.field label i{color:var(--blue-3);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;height:52px;padding:0 16px;border-radius:13px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--tx);
  font-size:14.5px;transition:border-color .3s,background .3s,box-shadow .3s;
}
.field textarea{height:auto;min-height:124px;padding:15px 16px;resize:vertical;line-height:1.65}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field select option{background:#101319;color:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-4)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(130,201,249,.55);background:#0D1015;
  box-shadow:0 0 0 3px rgba(46,120,224,.14)
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.agree{display:flex;align-items:flex-start;gap:10px;margin:20px 0 8px;font-size:13px;color:var(--tx-2)}
.agree input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--blue-2);cursor:pointer}
.agree a{color:var(--blue-3);text-decoration:underline;text-underline-offset:3px}
.form .btn{width:100%;margin-top:10px}

/* ---------- Big nav (bottom) ---------- */
.bignav{border-top:1px solid var(--line)}
.bignav__row{
  display:grid;grid-template-columns:64px 1fr auto;gap:clamp(14px,3vw,40px);align-items:center;
  padding:clamp(22px,2.8vw,34px) clamp(4px,1.4vw,18px);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;transition:padding-left .45s var(--ease);
}
.bignav__row::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,120,224,.13),transparent 60%);
  opacity:0;transition:opacity .45s;
}
.bignav__row:hover::before{opacity:1}
.bignav__row:hover{padding-left:clamp(14px,2.4vw,34px)}
.bignav__n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--tx-4);position:relative}
.bignav__t{position:relative}
.bignav__t b{display:block;font-size:clamp(18px,2.4vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.28}
.bignav__t span{display:block;margin-top:7px;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--tx-4)}
.bignav__go{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--tx-3);white-space:nowrap;
  transition:color .35s;
}
.bignav__row:hover .bignav__go{color:var(--blue-3)}
.bignav__go svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.bignav__row:hover .bignav__go svg{transform:translate(4px,-4px)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;border-radius:28px;overflow:hidden;padding:clamp(36px,5vw,72px);
  background:linear-gradient(135deg,rgba(0,81,199,.34),rgba(130,201,249,.10));
  border:1px solid rgba(130,201,249,.24);text-align:center;
}
.cta-band>*{position:relative}
.cta-band .btn-row{justify-content:center;margin-top:30px}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--bg-2);padding-block:clamp(46px,6vw,76px) 34px}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,44px)}
.ftr__brand img{height:30px;margin-bottom:18px}
.ftr__brand p{font-size:13.5px;color:var(--tx-3);line-height:1.75;max-width:330px}
.ftr__k{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--tx-4);margin-bottom:16px}
.ftr__list{display:grid;gap:10px;list-style:none}
.ftr__list a,.ftr__list li{font-size:13.5px;color:var(--tx-2);transition:color .25s}
.ftr__list a:hover{color:var(--blue-3)}
.ftr__legal{margin-top:clamp(34px,4vw,52px);padding-top:24px;border-top:1px solid var(--line)}
.ftr__legal p{font-size:12px;color:var(--tx-4);line-height:1.9}
.ftr__bottom{margin-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.ftr__bottom small{font-size:12px;color:var(--tx-4)}
.ftr__bottom nav{display:flex;gap:18px}
.ftr__bottom nav a{font-size:12px;color:var(--tx-3)}
.ftr__bottom nav a:hover{color:var(--blue-3)}

/* ---------- Page hero (subpages) ---------- */
.phero{position:relative;padding-block:clamp(130px,15vw,190px) clamp(50px,6vw,84px);overflow:hidden;border-bottom:1px solid var(--line)}
.crumb{display:flex;gap:9px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--tx-4)}
.crumb a:hover{color:var(--blue-3)}
.phero__t{margin-top:22px}
.phero__d{margin-top:20px;max-width:640px}

/* ============================================================
   Neon icons (파란 네온 글로우 · 각 상품 전용 모양)
   ============================================================ */
.nsprite{position:absolute;width:0;height:0;overflow:hidden}
/* viewBox 없는 <svg>는 %높이가 안 잡혀 기본 150px이 되므로 aspect-ratio로 정사각 고정 */
.nicon{display:block;width:100%;height:auto;aspect-ratio:1/1;overflow:visible}

/* 아이콘을 담는 어두운 패널 (services.html) */
.svc__badge{
  position:relative;width:100%;max-width:230px;aspect-ratio:1/1;
  border-radius:22px;border:1px solid var(--line);overflow:hidden;
  background:
    radial-gradient(circle at 50% 62%,rgba(0,81,199,.30),rgba(8,9,12,0) 66%),
    linear-gradient(180deg,#0C0F14,#080A0D);
  display:grid;place-items:center;padding:14px;
  transition:border-color .45s var(--ease),transform .55s var(--ease);
}
.svc__badge::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 50% 55%,#000 20%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 55%,#000 20%,transparent 72%);
}
.svc:hover .svc__badge{border-color:rgba(130,201,249,.34);transform:translateY(-4px)}
.svc__num{display:block;margin-top:22px;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--tx-4)}

/* 목록형 행에 붙는 작은 아이콘 (index.html caps) */
.cap__lead{display:flex;flex-direction:column;align-items:center}
.cap__ico{
  width:56px;height:56px;border-radius:15px;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 60%,rgba(0,81,199,.28),rgba(8,9,12,0) 70%),#0C0F14;
  display:grid;place-items:center;padding:5px;
  transition:border-color .4s,transform .5s var(--ease);
}
.cap:hover .cap__ico{border-color:rgba(130,201,249,.34);transform:translateY(-3px)}

/* 라인 아이콘에도 동일한 네온 발광 적용 */
.card__ico,.cinfo__ico,.ind__ico{
  background:radial-gradient(circle at 50% 58%,rgba(0,81,199,.30),rgba(8,9,12,0) 72%),rgba(255,255,255,.02);
  border-color:rgba(130,201,249,.26);
}
.card__ico svg,.cinfo__ico svg,.ind__ico svg{
  filter:drop-shadow(0 0 5px rgba(130,201,249,.8)) drop-shadow(0 0 13px rgba(46,120,224,.5));
}

/* ============================================================
   업종별 맞춤 (WHY DEVELISE)
   ============================================================ */
.ind{
  position:relative;border:1px solid var(--line);border-radius:20px;background:var(--surface);
  padding:clamp(22px,2.4vw,28px);overflow:hidden;
  transition:border-color .45s,transform .5s var(--ease),background .45s;
}
.ind::before{
  content:"";position:absolute;inset:-40% 20% auto;height:180px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(0,81,199,.30),transparent 70%);opacity:0;transition:opacity .5s;
}
.ind:hover{border-color:rgba(130,201,249,.32);background:var(--surface-2);transform:translateY(-5px)}
.ind:hover::before{opacity:1}
.ind__head{
  position:relative;display:flex;align-items:center;gap:14px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.ind__ico{
  width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(130,201,249,.26);color:var(--blue-3);
}
.ind__ico svg{width:22px;height:22px}
.ind__name{font-size:18px;font-weight:800;letter-spacing:-.03em;line-height:1.25}
.ind__en{display:block;margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--tx-4)}
.ind__rows{position:relative;margin-top:20px}
.ind__rows>div+div{margin-top:18px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.08)}
.ind__rows dt{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--blue-3)}
.ind__rows dd{margin-top:8px;font-size:13.8px;color:var(--tx-2);line-height:1.72}
.ind__rows dd b{color:#fff;font-weight:600}

/* 공장형 vs 맞춤형 대비 문장 */
.contrast{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,40px);align-items:center;
  padding:clamp(26px,3.4vw,44px);border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(120deg,rgba(255,255,255,.015),rgba(0,81,199,.10));
}
.contrast__side b{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--tx-4)}
.contrast__side p{margin-top:12px;font-size:clamp(16px,1.9vw,24px);font-weight:700;letter-spacing:-.03em;line-height:1.45;color:var(--tx-3)}
.contrast__side--us p{color:#fff}
.contrast__side--us b{color:var(--blue-3)}
.contrast__vs{
  width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-2);font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--tx-4);
  background:var(--bg);
}

/* ---------- Service detail blocks (services.html) ---------- */
[id]{scroll-margin-top:96px}
.svc{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,68px);
  padding-block:clamp(48px,6vw,92px);border-top:1px solid var(--line);position:relative;
}
.svc__left{position:relative}
/* 큰 고스트 숫자 — 파란 네온 아웃라인 */
.svc__ghost{
  font-size:clamp(64px,9vw,132px);font-weight:800;letter-spacing:-.06em;line-height:.85;
  display:block;color:transparent;
  -webkit-text-stroke:1.6px rgba(130,201,249,.62);
  filter:drop-shadow(0 0 9px rgba(46,120,224,.8)) drop-shadow(0 0 26px rgba(0,81,199,.55));
}
/* text-stroke 미지원 브라우저에서 숫자가 사라지지 않도록 */
@supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .svc__ghost{color:rgba(130,201,249,.3)}
}
.svc__t{margin-top:18px;font-size:clamp(22px,2.8vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1.2}
.svc__en{margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--blue-3)}
.svc__d{font-size:clamp(15px,1.3vw,17.5px);line-height:1.8;color:var(--tx-2)}
.svc__d b{color:#fff;font-weight:600}
.svc__points{margin-top:28px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pt{
  padding:18px 20px;border-radius:15px;border:1px solid var(--line);background:var(--surface);
  transition:border-color .35s,background .35s,transform .45s var(--ease);
}
.pt:hover{border-color:rgba(130,201,249,.3);background:var(--surface-2);transform:translateY(-3px)}
.pt__k{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.pt__k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
.pt__v{margin-top:7px;font-size:13px;color:var(--tx-3);line-height:1.65}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;background:none;border:0;cursor:pointer;text-align:left;
  font-size:clamp(15px,1.6vw,19px);font-weight:700;letter-spacing:-.025em;transition:color .3s;
}
.faq__q:hover{color:var(--blue-3)}
.faq__q i{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-style:normal;transition:transform .4s var(--ease),background .3s,border-color .3s;
}
.faq__item.is-open .faq__q i{transform:rotate(45deg);background:var(--grad);border-color:transparent}
.faq__q i svg{width:13px;height:13px}
/* 높이는 JS가 실제 콘텐츠 높이로 지정 */
.faq__a{overflow:hidden;height:0;transition:height .45s var(--ease)}
.faq__a p{padding:0 4px 24px;color:var(--tx-2);font-size:14.5px;line-height:1.8;max-width:820px}

/* ---------- 패키지 포함 내역 (카드형) ---------- */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,18px)}
.pkg{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
  padding:clamp(20px,2.2vw,26px);overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.pkg::after{
  content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.pkg:hover{transform:translateY(-5px);border-color:rgba(130,201,249,.32);background:var(--surface-2)}
.pkg:hover::after{transform:scaleX(1)}
.pkg__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pkg__ico{
  width:60px;height:60px;border-radius:16px;flex:none;display:grid;place-items:center;padding:5px;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 60%,rgba(0,81,199,.30),rgba(8,9,12,0) 70%),#0C0F14;
}
.pkg__n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--tx-4)}
.pkg__t{margin-top:18px;font-size:17.5px;font-weight:800;letter-spacing:-.03em}
.pkg__d{margin-top:10px;font-size:13.8px;color:var(--tx-2);line-height:1.7}
.pkg__list{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:7px;list-style:none}
.pkg__list li{
  font-size:11.5px;font-weight:600;color:var(--tx-2);padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.025);
}
.pkg__inc{
  margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--blue-3);
}
.pkg__inc svg{width:14px;height:14px}

/* 전체폭 강조 카드 (담당자 관리 등) */
.pkg--wide{
  grid-column:1/-1;flex-direction:row;align-items:center;gap:clamp(18px,3vw,36px);
  border-color:rgba(130,201,249,.30);
  background:linear-gradient(120deg,rgba(0,81,199,.20),rgba(16,19,25,1) 62%);
}
.pkg--wide .pkg__ico{width:76px;height:76px;border-radius:20px}
.pkg--wide .pkg__t{margin-top:0}
.pkg--wide .pkg__body{flex:1}
.pkg--wide .pkg__list{border-top:0;padding-top:0;margin-top:14px}

/* ============================================================
   실제 후기 · 대화 (VOICE)
   ============================================================ */

/* 샘플 표시 — 실제 자료로 교체 전까지 화면에 남겨둔다 */
.sample-flag{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  border:1px dashed rgba(255,196,0,.5);background:rgba(255,196,0,.08);
  color:#FFC400;font-size:12px;font-weight:700;letter-spacing:-.01em;
}
.sample-flag svg{width:15px;height:15px;flex:none}

/* --- 카톡형 대화 --- */
.talk{
  border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;
  transition:border-color .4s,transform .5s var(--ease);
}
.talk:hover{border-color:rgba(130,201,249,.28);transform:translateY(-4px)}
.talk__head{
  display:flex;align-items:center;gap:12px;padding:15px 20px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.talk__ava{
  width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(130,201,249,.24);
  background:radial-gradient(circle at 50% 60%,rgba(0,81,199,.34),rgba(8,9,12,0) 72%),#0C0F14;
  font-size:13px;font-weight:800;color:var(--blue-3);
}
.talk__who{font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.talk__meta{margin-top:2px;font-size:11px;color:var(--tx-4)}
.talk__body{
  flex:1;padding:22px 20px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,#090B0F,#0B0E13);
}
.msg{max-width:80%;display:flex;flex-direction:column;gap:5px}
.msg--in{align-self:flex-start;align-items:flex-start}
.msg--out{align-self:flex-end;align-items:flex-end}
.msg__b{
  padding:12px 16px;border-radius:17px;font-size:14px;line-height:1.62;letter-spacing:-.015em;
}
.msg--in .msg__b{background:#1B212C;color:#EDF1F6;border-top-left-radius:6px}
.msg--out .msg__b{background:var(--grad);color:#fff;border-top-right-radius:6px}
.msg__t{font-size:10.5px;color:var(--tx-4);padding-inline:4px}
.talk__foot{
  padding:14px 20px;border-top:1px solid var(--line);background:var(--surface);
  font-size:12.5px;color:var(--tx-3);display:flex;align-items:center;gap:8px;
}
.talk__foot b{color:var(--blue-3);font-weight:700}

/* --- 후기 카드 --- */
.voice{
  position:relative;border:1px solid var(--line);border-radius:20px;background:var(--surface);
  padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .4s,background .4s,transform .5s var(--ease);
}
.voice:hover{border-color:rgba(130,201,249,.3);background:var(--surface-2);transform:translateY(-4px)}
.voice__quote{
  position:absolute;top:14px;right:18px;font-size:64px;line-height:1;font-weight:800;
  color:rgba(130,201,249,.10);pointer-events:none;
}
.voice__stars{display:flex;gap:3px}
.voice__stars svg{width:15px;height:15px;color:#FFC400}
.voice__q{
  position:relative;margin-top:16px;font-size:15px;line-height:1.78;color:var(--tx-2);
  letter-spacing:-.015em;flex:1;
}
.voice__q b{color:#fff;font-weight:600}
.voice__who{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.voice__ava{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(130,201,249,.24);
  background:radial-gradient(circle at 50% 60%,rgba(0,81,199,.30),rgba(8,9,12,0) 72%),#0C0F14;
  font-size:14px;font-weight:800;color:var(--blue-3);
}
.voice__n{font-size:14px;font-weight:700;letter-spacing:-.02em}
.voice__m{margin-top:2px;font-size:11.5px;color:var(--tx-4)}

/* ============================================================
   회사 정보 (about.html)
   ============================================================ */
.corp{
  position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,81,199,.10),rgba(16,19,25,0) 40%),var(--surface);
}
.corp::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.corp__head{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);flex-wrap:wrap;
  padding:clamp(24px,3vw,36px);border-bottom:1px solid var(--line);
}
.corp__mark{
  width:62px;height:62px;flex:none;border-radius:17px;display:grid;place-items:center;
  padding:9px;overflow:hidden;
  border:1px solid rgba(130,201,249,.28);
  background:radial-gradient(circle at 50% 60%,rgba(0,81,199,.34),rgba(8,9,12,0) 72%),#0C0F14;
}
.corp__mark img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 0 7px rgba(46,120,224,.55));
}
.corp__id{flex:1;min-width:200px}
.corp__name{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.035em;line-height:1.25}
.corp__en{margin-top:5px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--blue-3)}

.corp__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.corp__item{background:var(--bg-2);padding:20px clamp(18px,2.4vw,30px);transition:background .35s}
.corp__item:hover{background:#0F1218}
.corp__item--wide{grid-column:1/-1}
.corp__item dt{font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--tx-4)}
.corp__item dd{
  margin-top:8px;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.5;
}
.corp__item dd span{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--tx-3);letter-spacing:0}

.corp__contact{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.corp__tile{
  background:var(--surface);padding:22px clamp(18px,2.4vw,30px);
  display:flex;align-items:center;gap:14px;transition:background .35s;
}
.corp__tile:hover{background:var(--surface-2)}
.corp__tile .cinfo__ico{width:40px;height:40px;border-radius:12px}
.corp__tk{font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--tx-4)}
.corp__tv{margin-top:4px;font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:#fff;word-break:break-all}

/* ---------- 인건비 비교 ---------- */
.cost{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.4vw,28px);align-items:stretch}
.cost__box{
  position:relative;border:1px solid var(--line);border-radius:22px;background:var(--bg-2);
  padding:clamp(24px,2.8vw,34px);overflow:hidden;
}
.cost__box--us{
  border-color:rgba(130,201,249,.34);
  background:linear-gradient(180deg,rgba(0,81,199,.20),rgba(16,19,25,1) 66%);
}
.cost__box--us::before{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--grad)}
.cost__k{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--tx-4)}
.cost__box--us .cost__k{color:var(--blue-3)}
.cost__v{
  margin-top:16px;display:flex;align-items:baseline;gap:8px;
  font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--tx-3);
}
.cost__box--us .cost__v{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cost__v small{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--tx-3);-webkit-text-fill-color:var(--tx-3)}
.cost__d{margin-top:16px;font-size:13.8px;color:var(--tx-2);line-height:1.72}
.cost__d b{color:#fff;font-weight:600}
.cost__vs{
  align-self:center;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--bg);
  font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--tx-4);
}
.cost-note{
  margin-top:clamp(20px,2.4vw,30px);padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);border-left:2px solid var(--blue-2);border-radius:16px;
  background:rgba(46,120,224,.06);
}
.cost-note p{font-size:clamp(14.5px,1.4vw,17px);line-height:1.75;color:var(--tx-2)}
.cost-note b{color:#fff;font-weight:700}

/* ============================================================
   법적 문서 (privacy.html / terms.html)
   ============================================================ */
.legal{display:grid;grid-template-columns:230px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.legal__toc{position:sticky;top:104px}
.legal__toc-k{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--tx-4);margin-bottom:14px}
.legal__toc ol{list-style:none;counter-reset:t;display:grid;gap:2px}
.legal__toc a{
  display:block;padding:8px 12px;border-radius:9px;font-size:13px;color:var(--tx-3);
  border-left:2px solid transparent;transition:color .25s,background .25s,border-color .25s;
}
.legal__toc a:hover{color:var(--blue-3);background:rgba(46,120,224,.08);border-left-color:var(--blue-2)}

.legal__body{max-width:860px}
.legal__intro{
  padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-left:2px solid var(--blue-2);
  border-radius:16px;background:rgba(46,120,224,.06);margin-bottom:clamp(30px,4vw,48px);
}
.legal__intro p{font-size:14.5px;line-height:1.8;color:var(--tx-2)}
.legal__intro p+p{margin-top:12px}
.legal__intro b{color:#fff;font-weight:600}

.legal__sec{padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line);margin-top:clamp(28px,3.4vw,44px)}
.legal__sec:first-of-type{border-top:0;margin-top:0;padding-top:0}
.legal__h{
  display:flex;align-items:baseline;gap:12px;
  font-size:clamp(17px,1.9vw,22px);font-weight:800;letter-spacing:-.03em;line-height:1.35;
}
.legal__h span{
  flex:none;font-size:12px;font-weight:800;letter-spacing:.06em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.legal__body p{margin-top:14px;font-size:14.5px;line-height:1.85;color:var(--tx-2)}
.legal__body ul,.legal__body ol{margin-top:14px;padding-left:0;list-style:none;display:grid;gap:9px}
.legal__body li{
  position:relative;padding-left:18px;font-size:14.5px;line-height:1.8;color:var(--tx-2);
}
.legal__body li::before{
  content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;
  background:var(--blue-2);
}
.legal__body li b,.legal__body p b{color:#fff;font-weight:600}
.legal__note{
  margin-top:clamp(34px,4vw,52px);padding:clamp(18px,2.2vw,24px);border:1px dashed var(--line-2);
  border-radius:14px;font-size:13px;color:var(--tx-3);line-height:1.75;
}
.legal__date{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--tx-4);
}

/* 표 형태 (수집 항목 등) */
.ltable{margin-top:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ltable__r{display:grid;grid-template-columns:150px 1fr;gap:1px;background:var(--line)}
.ltable__r+.ltable__r{margin-top:1px}
.ltable__k{background:var(--surface-2);padding:14px 18px;font-size:13px;font-weight:700;color:#fff}
.ltable__v{background:var(--bg-2);padding:14px 18px;font-size:13.5px;color:var(--tx-2);line-height:1.7}

/* ============================================================
   모바일 하단 고정 CTA
   ============================================================ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,9,12,.90);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.dock.is-up{transform:none}
.dock .btn{flex:1;--h:50px;padding:0 14px;font-size:14px;width:auto}
.dock .btn--ghost{flex:0 0 auto;min-width:52px;padding:0 16px}
@media (max-width:900px){
  .dock{display:flex}
  body{padding-bottom:0}
}

/* ============================================================
   404
   ============================================================ */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 0 80px;position:relative;overflow:hidden}
.nf__code{
  font-size:clamp(90px,20vw,220px);font-weight:800;letter-spacing:-.06em;line-height:.9;
  color:transparent;-webkit-text-stroke:2px rgba(130,201,249,.5);
  filter:drop-shadow(0 0 16px rgba(46,120,224,.7)) drop-shadow(0 0 46px rgba(0,81,199,.45));
}
@supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .nf__code{color:rgba(130,201,249,.35)}
}

/* ============================================================
   자연 트래픽 흐름 (NO ABUSING)
   ============================================================ */
.warn{
  position:relative;display:flex;gap:clamp(16px,2.2vw,24px);align-items:flex-start;
  padding:clamp(22px,2.8vw,32px);border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,196,0,.28);
  background:linear-gradient(120deg,rgba(255,196,0,.10),rgba(16,19,25,0) 62%),var(--surface);
}
.warn::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(#FFC400,rgba(255,196,0,0))}
.warn__ico{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(255,196,0,.32);background:rgba(255,196,0,.10);color:#FFC400;
}
.warn__ico svg{width:22px;height:22px}
.warn__t{font-size:clamp(16px,1.8vw,20px);font-weight:800;letter-spacing:-.03em;line-height:1.35;color:#fff}
.warn__d{margin-top:10px;font-size:14.5px;line-height:1.78;color:var(--tx-2)}
.warn__d b{color:#FFDE6A;font-weight:600}

/* 4단계 흐름 — 연결선이 스크롤 진입 시 좌→우로 그어진다 */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.flow__line{
  position:absolute;left:6%;right:6%;top:31px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-3));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease) .2s;opacity:.45;
}
.flow.is-in .flow__line{transform:scaleX(1)}
.flow__step{position:relative;z-index:1}
.flow__n{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-2);
  font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--tx-3);
  transition:all .5s var(--ease);
}
.flow__step:hover .flow__n{background:var(--grad);border-color:transparent;color:#fff;transform:scale(1.08)}
.flow__t{margin-top:20px;font-size:16.5px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.flow__d{margin-top:9px;font-size:13.6px;color:var(--tx-2);line-height:1.72}
.flow__d b{color:#fff;font-weight:600}
@media (max-width:900px){
  .flow{grid-template-columns:repeat(2,1fr);gap:30px 16px}
  .flow__line{display:none}
  .warn{flex-direction:column;gap:14px}
}
@media (max-width:520px){ .flow{grid-template-columns:1fr} }

/* ============================================================
   MOTION — 살아있는 화면
   ============================================================ */

/* 1. 배경 글로우 부유 — 화면이 정지해 보이지 않게 */
@keyframes floatA{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%    {transform:translateX(-50%) translateY(26px) scale(1.07)}
}
@keyframes floatB{
  0%,100%{transform:translateY(0) scale(1);opacity:.5}
  50%    {transform:translateY(-32px) scale(1.1);opacity:.66}
}
.js .bg-glow--a{animation:floatA 15s ease-in-out infinite}
.js .bg-glow--b{animation:floatB 19s ease-in-out infinite}


/* 3. 네온 아이콘 맥동 — 서로 시차를 두어 자연스럽게 */
@keyframes neonPulse{
  0%,100%{filter:none}
  50%    {filter:brightness(1.22) saturate(1.1)}
}
.js .nicon{animation:neonPulse 3.6s ease-in-out infinite}
.js .cap:nth-child(2) .nicon,.js .svc:nth-child(2) .nicon,.js .pkg:nth-child(2) .nicon{animation-delay:-.5s}
.js .cap:nth-child(3) .nicon,.js .svc:nth-child(3) .nicon,.js .pkg:nth-child(3) .nicon{animation-delay:-1s}
.js .cap:nth-child(4) .nicon,.js .svc:nth-child(4) .nicon,.js .pkg:nth-child(4) .nicon{animation-delay:-1.5s}
.js .cap:nth-child(5) .nicon,.js .svc:nth-child(5) .nicon,.js .pkg:nth-child(5) .nicon{animation-delay:-2s}
.js .pkg:nth-child(6) .nicon{animation-delay:-2.5s}

/* 4. 버튼에 빛이 스쳐 지나감 */
.btn--primary,.btn--kakao{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after,.btn--kakao::after{
  content:"";position:absolute;inset:0 auto 0 -140%;width:55%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease);
}
.btn--primary:hover::after,.btn--kakao:hover::after{left:150%}

/* 5. eyebrow 라인이 좌→우로 그어짐 */
.eyebrow::before{transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease) .15s}
.js .reveal.is-in .eyebrow::before,
.js .sec-head .eyebrow.is-in::before,
.eyebrow.is-in::before{transform:scaleX(1)}
/* JS 미동작 환경 대비 */
html:not(.js) .eyebrow::before{transform:none}

/* 6. 스크롤 패럴랙스 대상 (JS가 --par 를 갱신) */
.par{will-change:transform}

/* 7. 히어로 — 스크롤하면 살짝 밀려 올라가며 흐려짐 */
.js .hero__inner{will-change:transform,opacity}

/* 8. 카드 3D 틸트 (약하게) */
.tilt{transform-style:preserve-3d;will-change:transform}

/* 9. 스크롤 진행바에 발광 */
.progress{box-shadow:0 0 12px rgba(46,120,224,.8)}

/* 10. 헤드라인 단어별 등장 — JS가 .w 로 감싼다 */
/* 단어별 등장을 쓰는 요소는 블록 전체 이동을 끈다 (움직임이 이중으로 겹치지 않게) */
.js .reveal.stagger{transform:none}
.js .stagger .w{
  display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.js .stagger.is-in .w{opacity:1;transform:none}

/* 11. 히어로 — 커서를 따라오는 빛 */
.hero__cursor{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .6s var(--ease);
  background:radial-gradient(420px circle at var(--cx,50%) var(--cy,40%),rgba(46,120,224,.16),transparent 62%);
}
.hero:hover .hero__cursor{opacity:1}

/* 12. 강조 텍스트에 밑줄이 그어짐 */
.lead b,.warn__d b,.flow__d b,.svc__d b{
  position:relative;
}
.js .lead b::after,.js .flow__d b::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-2),var(--blue-3));
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .35s;opacity:.75;
}
.js .reveal.is-in .lead b::after,
.js .lead.is-in b::after,
.js .reveal.is-in .flow__d b::after{transform:scaleX(1)}

/* 13. 별 필드 — 3겹으로 깊이를 만든 우주 배경 (JS가 canvas로 그림) */
.starfield{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;display:block;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.starfield.is-on{opacity:1}
/* 별이 깔리는 곳은 바닥을 조금 더 깊은 남색으로 — 우주처럼 보이게 */
.hero,.phero{background:radial-gradient(ellipse 120% 80% at 50% 0%,#0A1020 0%,var(--bg) 62%)}

/* 14. 섹션 구분선이 좌→우로 그어짐 */
.js .caps,.js .vs{position:relative}
.js .caps::before,.js .vs::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease);
}
.js .caps.is-in::before,.js .vs.is-in::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .js .stagger .w{opacity:1!important;transform:none!important}
  .hero__cursor{display:none}
  .js .lead b::after,.js .flow__d b::after{transform:scaleX(1)!important}
}

@media (prefers-reduced-motion:reduce){
  .js .bg-glow--a,.js .bg-glow--b,.js .nicon{animation:none!important}
  .eyebrow::before{transform:none!important}
}

/* ---------- Reveal animation ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.rv-l{transform:translateX(-32px)}
.js .reveal.rv-r{transform:translateX(32px)}
.js .reveal.rv-s{transform:scale(.955)}
.js .reveal.is-in{opacity:1;transform:none}
/* 시작 위치는 padding(.16em)만큼 넓어진 마스크를 완전히 벗어나야 한다 */
.js .mask i{display:block;transform:translateY(140%);transition:transform 1s var(--ease)}
.js .mask.is-in i{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .js .mask i{transform:none}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .ftr__top{grid-template-columns:1fr 1fr;gap:34px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .hdr__cta .btn{display:none}
  .statement{grid-template-columns:1fr;gap:18px}
  .statement__side{position:static}
  .prices{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;gap:34px}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .steps::before{display:none}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .contrast{grid-template-columns:1fr;gap:20px;text-align:center}
  .contrast__vs{margin-inline:auto}
  .svc__badge{max-width:180px}
  .cost{grid-template-columns:1fr;gap:16px}
  .cost__vs{margin-inline:auto}
  .pkg-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .cap{grid-template-columns:1fr;gap:14px}
  .cap__go{display:none}
  .cap__lead{flex-direction:row;align-items:center;gap:14px}
  .cap__n{margin-top:0}
  .bignav__row{grid-template-columns:44px 1fr;row-gap:10px}
  .bignav__go{grid-column:2;justify-self:start}
  .field-row{grid-template-columns:1fr}

  /* THE DIFFERENCE → 세로 스택 */
  .vs__head{display:none}
  .vs__row{grid-template-columns:1fr;gap:14px;padding:26px 0}
  .vs__n{font-size:26px}
  .vs__arrow{justify-self:start;transform:rotate(90deg);width:38px;height:38px}
  .vs__row:hover .vs__arrow{transform:rotate(90deg) scale(1.08)}
  .vs__us{padding-left:14px}
  .vs__row:hover .vs__us{transform:none}
  .vs__row::before{inset:0 -12px}

  /* compare → stacked (구버전) */
  .compare__head{display:none}
  .compare__row{grid-template-columns:1fr;gap:0;border-top:0}
  .compare__row+.compare__row{border-top:1px solid var(--line)}
  .compare__cell{padding:16px 18px}
  .compare__cell--other{border-bottom:1px solid var(--line);background:#0B0D11}
  .compare__label{display:block}

  .svc{grid-template-columns:1fr;gap:22px}
  .svc__points{grid-template-columns:1fr}
  .pkg-grid{grid-template-columns:1fr}
  .pkg--wide{flex-direction:column;align-items:flex-start}
  .corp__grid{grid-template-columns:1fr}
  .corp__contact{grid-template-columns:1fr}
}
@media (max-width:480px){
  .grid--4{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr 1fr}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .hdr__logo-txt{font-size:15px}
}

/* ──────────────────────────────────────────────────────────────
   한글 줄바꿈 (2026-10-17)
   크롬 기본값은 word-break:normal 이라 한글을 "음절 단위"로 쪼갠다.
   그래서 "…답이 나옵니다." 가 "…답이 나옵니" / "다." 로 끊겨 보였다.
   (실측: 본문 폭 552~560px 에서 마지막 줄이 「다.」 하나만 남음)

   keep-all      : 어절(띄어쓰기) 단위로만 줄바꿈 → 단어가 안 쪼개짐
   overflow-wrap : 그래도 안 들어가는 긴 영문/URL은 쪼개서 넘침 방지
   text-wrap     : 마지막 줄에 토막 글자만 남는 것(고아)을 줄여줌
                   (미지원 브라우저는 그냥 무시 → 안전)
   ⚠️ .corp__tv(이메일 등 긴 문자열)는 word-break:break-all 이 따로 걸려 있고
      클래스 선택자라 우선순위가 더 높다. 건드리지 말 것.
   ────────────────────────────────────────────────────────────── */
body{
  word-break:keep-all;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
/* 제목은 줄 길이를 고르게 나눠 더 보기 좋게 */
.h1,.h2,.h3,.hero__title,.phero__t,.sec-head>p,.lead{
  text-wrap:balance;
}
/* 본문 문장은 고아 글자 방지 우선 */
p,li,dd,.step__d,.cap__d,.pkg__d,.card__d,.dim{
  text-wrap:pretty;
}
/* 카드·항목 제목은 줄 길이를 고르게 나눠 끝 단어가 혼자 처지지 않게 */
.card__t,.svc__t,.step__t,.cap__t,.pkg__t,.vs__t,.flow__t,.warn__t,
.bignav__t,.faq__q,.legal__h,.cost__k,.price__k,.pt__k,.ind__name{
  text-wrap:balance;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME · 흰색 전환 (2026-10-17)

   요청: "홈페이지가 너무 어두운데 흰색으로" + "첫 화면(별 배경)은 그대로"
   방식: 기본 토큰을 밝은 값으로 바꾸고, 검정으로 남길 구역
         (히어로 · 서브히어로 · 404 · CTA배너 · 모바일메뉴)에만
         어두운 토큰을 다시 씌운다. 이 블록이 맨 뒤라 나중 선언이 이긴다.

   되돌리기 : 이 주석부터 파일 끝까지 지우면 원래 검정 디자인으로 복귀.
   주의     : 아이콘 타일(.cap__ico 등)은 일부러 어둡게 남겼다.
              파란 네온 글로우는 어두운 바탕에서만 보이기 때문이다.
   ══════════════════════════════════════════════════════════════ */

/* ---------- 1. 기본(밝은) 토큰 ---------- */
:root{
  --bg:#FFFFFF;
  --bg-2:#F3F6FB;
  --surface:#FFFFFF;
  --surface-2:#EFF4FA;
  --line:rgba(12,20,38,.11);
  --line-2:rgba(12,20,38,.19);

  /* 흰 바탕에서 명암비 4.5:1 이상을 지키는 값들.
     더 밝게 하면 작은 라벨(01, ABOUT, 업종명 등)이 안 읽힌다. */
  --tx:#0A0E16;
  --tx-2:#49535F;
  --tx-3:#5A6472;
  --tx-4:#666F7C;  /* 연회색 섹션(#F3F6FB) 위에서도 4.5:1 을 넘기는 값 */

  /* 하늘색(#82C9F9)은 흰 바탕에서 거의 안 보인다 → 진한 파랑으로 */
  --blue-3:#0B63D6;
  /* 글자용 그라데이션 (버튼용 --grad 는 그대로 둔다) */
  --grad-ink:linear-gradient(135deg,#0A49A8,#1E7BD6);

  --hover:rgba(12,20,38,.035);
  --glass:rgba(12,20,38,.028);
  --glass-2:rgba(12,20,38,.055);
  --strike:rgba(12,20,38,.34);
  --accent-line:rgba(11,99,214,.38);
  --accent-line-s:rgba(11,99,214,.55);
  /* 네온 아이콘이 들어가는 어두운 타일 — 밝은 테마에서도 유지 */
  --panel:radial-gradient(circle at 50% 60%,rgba(0,81,199,.30),transparent 70%),#0C0F14;
}

body{background:var(--bg);color:var(--tx)}

/* ---------- 2. 검정으로 남길 구역 ---------- */
.hero,.phero,.nf,.cta-band,
.hdr:not(.is-light),
.hdr:not(.is-light)~.drawer{
  --bg:#08090C;
  --bg-2:#0B0D11;
  --surface:#101319;
  --surface-2:#151922;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --tx:#FFFFFF;
  --tx-2:#A8AEBA;
  --tx-3:#7B8492;  /* 검정 위 작은 라벨(히어로 통계 등) 가독성 확보 */
  --tx-4:#464C57;

  --blue-3:#82C9F9;
  --grad-ink:var(--grad);

  --hover:#0F1218;
  --glass:rgba(255,255,255,.025);
  --glass-2:rgba(255,255,255,.06);
  --strike:rgba(255,255,255,.32);
  --accent-line:rgba(130,201,249,.32);
  --accent-line-s:rgba(130,201,249,.55);

  color:var(--tx);
}

/* ---------- 3. 헤더 · 모바일 메뉴 · 하단 바 ---------- */
/* 검정 히어로 위에서는 투명+흰 글자, 지나가면 흰 배경+검은 글자 (JS가 is-light 부여) */
.hdr.is-stuck{
  background:rgba(255,255,255,.84);
  border-bottom-color:var(--line);
}
.hdr:not(.is-light).is-stuck{background:rgba(8,9,12,.78)}

.drawer{background:rgba(255,255,255,.98)}
.hdr:not(.is-light)~.drawer{background:rgba(8,9,12,.97)}

.dock{background:rgba(255,255,255,.93)}

/* ---------- 4. 어두운 배경을 전제로 박아둔 색들 ---------- */
::-webkit-scrollbar-thumb{background:var(--line-2)}
::-webkit-scrollbar-thumb:hover{background:var(--tx-4)}

.btn--ghost{background:var(--glass)}
.btn--ghost:hover{border-color:var(--accent-line-s);background:rgba(11,99,214,.07)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--glass-2)}
.tag,.pkg__list li{background:var(--glass)}
.ico--x{background:var(--glass-2)}

/* 강조 글자(b) — 원래 #fff 로 박혀 있던 것들 */
.vs__us .vs__t,
.compare__cell--us .compare__t,
.contrast__side--us p,
.corp__item dd,.corp__tv,
.ltable__k,.warn__t,
.ind__rows dd b,.svc__d b,.cost__d b,.cost-note b,
.legal__intro b,.legal__body li b,.legal__body p b,
.flow__d b{
  color:var(--tx);
}

.vs__other .vs__t{text-decoration-color:var(--strike)}
.ind__rows>div+div{border-top-color:var(--line)}
.corp__item:hover{background:var(--hover)}
.compare__row:hover .compare__cell{background:var(--hover)}

/* 어두운 색으로 끝나던 그라데이션 → 밝은 표면으로 */
.price--hi{background:linear-gradient(180deg,rgba(0,81,199,.12),var(--surface) 62%)}
.pkg--wide{background:linear-gradient(120deg,rgba(0,81,199,.14),var(--surface) 62%)}
.cost__box--us{background:linear-gradient(180deg,rgba(0,81,199,.14),var(--surface) 66%)}
.warn{background:linear-gradient(120deg,rgba(255,196,0,.16),transparent 62%),var(--surface)}
.corp{background:linear-gradient(180deg,rgba(0,81,199,.09),transparent 40%),var(--surface)}
.contrast{background:linear-gradient(120deg,var(--glass),rgba(0,81,199,.07))}

/* 파란 테두리 — 흰 바탕에서는 하늘색이 안 보인다 */
.card:hover,.ind:hover,.pkg:hover,.pt:hover,.talk:hover,.voice:hover{border-color:var(--accent-line)}
.price--hi,.pkg--wide,.cost__box--us{border-color:var(--accent-line)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent-line-s);background:var(--bg);
}
.field select option{background:var(--surface);color:var(--tx)}

/* 글자 그라데이션 — 하늘색 끝단이 흰 바탕에서 날아가므로 진하게 */
.g-text,
.statement__big em,
.legal__h span,
.marquee__item:nth-child(even),
.cost__box--us .cost__v{
  background-image:var(--grad-ink);
}

/* 테두리만 있는 큰 숫자 — 흰 바탕에서는 진한 파랑으로 */
.vs__n{-webkit-text-stroke-color:rgba(11,99,214,.42)}
.svc__ghost{
  -webkit-text-stroke-color:rgba(11,99,214,.55);
  filter:drop-shadow(0 0 7px rgba(46,120,224,.35));
}

/* 배경 글로우 — 흰 본문에서는 옅게 */
.sec>.bg-glow{opacity:.2}

/* ---------- 5. 네온 아이콘 타일은 어둡게 유지 ---------- */
.cap__ico,.pkg__ico,.svc__badge,
.card__ico,.cinfo__ico,.ind__ico,
.talk__ava,.voice__ava,.corp__mark{
  background:var(--panel);
  border-color:rgba(130,201,249,.26);
  color:#82C9F9;
}
/* 카카오 타일은 노란색 그대로 */
.cinfo__ico--kakao{background:#FEE500;border-color:#FEE500;color:#191600}

/* ---------- 6. CTA 배너 — 파란 블록으로 ---------- */
.cta-band{
  background:linear-gradient(135deg,#0051C7,#1E7BD6);
  border-color:transparent;
}

/* ---------- 7. 비교표 왼쪽(일반 광고대행사) 글자가 안 보이던 문제 ----------
   원래 .vs__other 전체에 opacity:.5(호버 시 .3)가 걸려 있어 거의 안 읽혔다.
   흐리게 하는 대신 '취소선 + 회색'으로 구분하고 글자는 또렷하게 둔다. */
.vs__other{opacity:1}
.vs__row:hover .vs__other{opacity:.72}
.vs__other .vs__t{color:var(--tx-2)}
.vs__other .vs__d{color:var(--tx-3)}

/* ---------- 8. 상품 5종 — 세로 목록 → 가로 카드 ---------- */
.caps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);
  border-top:0;
}
.js .caps::before{display:none}
.cap{
  position:relative;
  display:block;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.cap::before{border-radius:inherit}
.cap:hover{
  transform:translateY(-5px);
  border-color:var(--accent-line);
  background:var(--surface-2);
}
.cap__lead{
  flex-direction:row;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.cap__ico{width:52px;height:52px}
.cap__n{margin-top:0}
.cap__t{font-size:clamp(17px,1.5vw,20px)}
.cap__d{margin-top:10px;font-size:14px;max-width:none}
.cap__go{
  position:absolute;
  top:clamp(20px,2.4vw,28px);
  right:clamp(20px,2.4vw,28px);
  width:38px;height:38px;margin-top:0;
}
.cap__go svg{width:14px;height:14px}

@media (max-width:1080px){
  .caps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .caps{grid-template-columns:1fr}
  .cap{padding:22px}
  .cap__go{display:none}
}

/* ---------- 9. 흰 바탕에서 안 읽히던 나머지 ---------- */
/* 어뷰징 경고 박스의 노란 강조 — 흰 배경에서는 진한 호박색으로 */
.warn__d b{color:#8A5B00}

/* 404 — 검정 구역이지만 자기 배경색이 없어 흰 바탕에 흰 글자가 됐다 */
.nf{
  background:radial-gradient(ellipse 120% 80% at 50% 0%,#0A1020 0%,#08090C 62%);
}

/* 로고 PNG는 어두운 버전뿐이라 검정 히어로 위에서는 안 보인다.
   밝은 헤더(is-light)에서는 원본 그대로, 검정 위에서만 흰색으로 눕힌다. */
.hdr:not(.is-light) .hdr__logo img{filter:brightness(0) invert(1)}

/* ══════════════════════════════════════════════════════════════
   REFINE · 흰 화면 깊이감 보강 + 상품 5열 (2026-10-17)

   요청: "너무 하얀색이잖아 디자인을 좀 이쁘게" / "이 부분 한 줄로"
   방향: 색을 더 넣는 게 아니라 '층'을 만든다.
         바탕은 아주 옅은 청회색 → 섹션은 흰 띠 → 카드는 흰색 + 그림자.
         같은 흰색이라도 떠 보이게 해서 밋밋함을 없앤다.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* 바탕: 순백 대신 아주 옅은 청회색 (흰 카드가 떠 보이게 하는 바닥) */
  --page:#F2F5FB;
  /* 섹션 교차 띠는 '흰색'으로 — 바탕(옅은 청회색)과 번갈아 리듬을 만든다 */
  --bg-2:#FFFFFF;
  /* 테두리는 더 연하게. 이제 카드는 선이 아니라 그림자로 구분된다 */
  --line:rgba(16,28,56,.085);
  --line-2:rgba(16,28,56,.15);

  --shadow-s:0 1px 2px rgba(14,26,54,.04), 0 3px 10px rgba(14,26,54,.045);
  --shadow-m:0 2px 5px rgba(14,26,54,.05), 0 14px 30px rgba(14,26,54,.075);
  --shadow-l:0 8px 18px rgba(14,26,54,.07), 0 26px 58px rgba(11,99,214,.16);
}

/* 바탕에 은은한 파란 기운을 한 겹 깔아 '그냥 흰 종이' 느낌을 없앤다 */
body{
  background:
    radial-gradient(1100px 520px at 50% -4%, rgba(11,99,214,.085), transparent 62%),
    radial-gradient(760px 420px at 100% 32%, rgba(11,99,214,.05), transparent 64%),
    var(--page);
  background-repeat:no-repeat;
}

/* 흰 띠 섹션은 위아래로 아주 옅은 그라데이션을 줘 평평하지 않게 */
.sec[style*="--bg-2"]{
  background:linear-gradient(180deg,#FFFFFF,#FDFEFF) !important;
}

/* ---------- 카드류: 선 대신 그림자로 띄운다 ---------- */
.card,.cap,.pkg,.price,.ind,.pt,.form,.cost__box,.warn,.corp,.ltable,.talk,.voice{
  box-shadow:var(--shadow-s);
}
.card:hover,.cap:hover,.pkg:hover,.ind:hover,.pt:hover,.talk:hover,.voice:hover{
  box-shadow:var(--shadow-l);
}
.price--hi,.cost__box--us,.pkg--wide{box-shadow:var(--shadow-m)}

/* 입력칸은 바탕보다 살짝 눌러 보이게 (흰 폼카드 위에서 구분되도록) */
.field input,.field select,.field textarea{background:#F5F8FD}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(11,99,214,.10);
}

/* 버튼 그림자를 조금 더 또렷하게 */
.btn--primary{box-shadow:0 8px 20px -8px rgba(11,99,214,.55)}
.btn--primary:hover{box-shadow:0 16px 34px -10px rgba(11,99,214,.6)}
.btn--ghost{background:#FFFFFF;box-shadow:var(--shadow-s)}

/* 헤더가 흰색일 때도 살짝 떠 보이게 */
.hdr.is-light.is-stuck{box-shadow:0 1px 0 rgba(16,28,56,.06), 0 8px 24px -12px rgba(14,26,54,.18)}

/* 아이콘 타일(어두운 네온 패널)에 파란 글로우를 한 겹 */
.cap__ico,.pkg__ico,.card__ico,.cinfo__ico,.ind__ico,.talk__ava,.voice__ava,.corp__mark{
  box-shadow:0 6px 16px -6px rgba(11,99,214,.45);
}

/* 섹션 머리말 라벨에 살짝 배경을 줘 포인트 */
.eyebrow{
  padding:5px 12px 5px 10px;border-radius:999px;
  background:rgba(11,99,214,.07);
}
.hero .eyebrow,.phero .eyebrow,.cta-band .eyebrow,.nf .eyebrow{
  padding:0;background:none;
}

/* 비교표 행에 마우스를 올리면 흰 카드처럼 떠오르게 */
.vs__row{border-radius:14px}
.vs__row:hover::before{
  background:linear-gradient(90deg,rgba(11,99,214,.07),rgba(11,99,214,.02) 60%,transparent);
}

/* 푸터는 바탕보다 한 톤 눌러 마무리 */
.ftr{background:linear-gradient(180deg,#EDF1F9,#E8EEF7);border-top-color:rgba(16,28,56,.10)}

/* ---------- 상품 5종: 한 줄(5열) ---------- */
/* ---------- 상품 5종(index): 설명 빼고 한 줄 5열 ----------
   상세 페이지에 같은 설명이 또 있어서, 카드에서는 제목·태그·'자세히 보기'만 둔다.
   about.html 의 .caps 는 설명 자체가 본문이라 건드리지 않는다 → .caps--compact 로만 한정. */
.caps--compact{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1vw,15px);
}
.caps--compact .cap{
  display:flex;flex-direction:column;
  /* 원래 .cap 은 grid + align-items:start 였다. 그대로 두면 '자세히 보기'
     구분선이 글자 폭(76px)밖에 안 늘어난다. */
  align-items:stretch;
  padding:22px 18px 18px;border-radius:18px;
}
.caps--compact .cap>div:not(.cap__lead){flex:1}
.caps--compact .cap__lead{margin-bottom:15px;gap:9px}
.caps--compact .cap__ico{width:46px;height:46px}
.caps--compact .cap__t{font-size:16px;letter-spacing:-.03em;line-height:1.3}
.caps--compact .cap__tags{margin-top:13px;gap:6px}
.caps--compact .tag{font-size:10.8px;padding:4px 9px}

/* 화살표 동그라미 → 카드 아래 '자세히 보기' 글자 링크 */
.caps--compact .cap__go{
  position:static;width:auto;height:auto;margin-top:16px;
  padding-top:14px;border:0;border-top:1px solid var(--line);border-radius:0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--blue-3);
  background:none;transform:none;
}
.caps--compact .cap:hover .cap__go{
  background:none;color:var(--blue);transform:none;border-color:var(--accent-line);
}
.caps--compact .cap__go svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.caps--compact .cap:hover .cap__go svg{transform:translateX(4px)}

@media (max-width:1100px){ .caps--compact{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){  .caps--compact{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){  .caps--compact{grid-template-columns:1fr} }
@media (max-width:720px){  .caps--compact .cap__go{display:flex} }

/* 강조 문장 다음은 줄을 바꿔 읽히게 (대표님 요청) */
.cost-note p+p{margin-top:12px}

/* ──────────────────────────────────────────────────────────────
   ⚠️ 테두리 버튼(.btn--ghost) 바탕색은 '무조건 흰색'이면 안 된다.
   검정 구역(히어로·서브히어로·404·CTA배너)에서는 글자색도 흰색이라
   흰 바탕에 흰 글자가 되어 버튼이 통째로 안 보인다. (실제로 15곳이 그랬다)
   → 구역에 따라 값이 바뀌는 토큰으로 처리한다.
   ────────────────────────────────────────────────────────────── */
:root{
  --ghost-bg:#FFFFFF;
  --ghost-bg-hover:rgba(11,99,214,.08);
  --ghost-shadow:0 1px 2px rgba(14,26,54,.04), 0 3px 10px rgba(14,26,54,.045);
}
.hero,.phero,.nf,.cta-band,
.hdr:not(.is-light),
.hdr:not(.is-light)~.drawer{
  --ghost-bg:rgba(255,255,255,.04);
  --ghost-bg-hover:rgba(130,201,249,.12);
  --ghost-shadow:none;
}
.btn--ghost{background:var(--ghost-bg);box-shadow:var(--ghost-shadow)}
.btn--ghost:hover{background:var(--ghost-bg-hover)}

/* ──────────────────────────────────────────────────────────────
   📱 휴대폰에서 등장 모션을 더 또렷하게 (2026-10-17)
   화면이 좁고 스크롤이 빨라 28px 이동은 거의 안 보인다.
   이동 거리를 키우고 살짝 커지는 느낌을 더해 눈에 띄게 한다.
   좌우 이동(rv-l/rv-r)은 좁은 화면에서 가로 스크롤을 만들 수 있어
   세로 이동으로 바꾼다.
   ────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .js .reveal{transform:translateY(34px) scale(.985)}
  .js .reveal.rv-l,.js .reveal.rv-r{transform:translateY(34px) scale(.985)}
  .js .reveal.rv-s{transform:scale(.95)}
  .js .reveal.is-in{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   오른쪽 플로팅 버튼 (2026-10-17) — 전화 · 카톡 · 맨 위로
   휴대폰에는 이미 하단 바(.dock)에 전화·카톡·상담이 있으므로
   거기서는 'TOP' 하나만 띄워 중복을 피한다.
   ══════════════════════════════════════════════════════════════ */
.fab{
  position:fixed;right:18px;bottom:26px;z-index:96;
  display:flex;flex-direction:column;gap:9px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.fab.is-up{opacity:1;visibility:visible;transform:none}
.fab__b{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;gap:1px;cursor:pointer;
  background:var(--surface);color:var(--tx-2);
  box-shadow:var(--shadow-m);
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .35s,border-color .3s;
}
.fab__b svg{width:19px;height:19px;display:block}
.fab__b span{
  font-size:7.5px;font-weight:800;letter-spacing:.06em;line-height:1;
  margin-top:1px;
}
.fab__b:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.fab__b--call{background:var(--grad);color:#fff;border-color:transparent}
.fab__b--kakao{background:#FEE500;color:#191600;border-color:#FEE500}
.fab__b--top:hover{color:var(--blue-3);border-color:var(--accent-line)}

@media (max-width:900px){
  /* 하단 바가 있는 구간 — 바에 가리지 않게 위로 올리고 TOP만 남긴다 */
  .fab{bottom:calc(84px + env(safe-area-inset-bottom));right:14px}
  .fab__b--call,.fab__b--kakao{display:none}
  .fab__b{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .fab{transition:none}
}

/* 상품 카드 설명 복원 (대표님 요청: "밋밋하다")
   5열이라 카드 폭이 220px 안팎 → 본문보다 한 단계 작게, 줄간격은 넉넉히. */
.caps--compact .cap__d{
  display:block;
  margin-top:11px;
  font-size:12.6px;
  line-height:1.68;
  color:var(--tx-2);
  max-width:none;
}
@media (max-width:1100px){
  .caps--compact .cap__d{font-size:13.4px;line-height:1.7}
}
@media (max-width:560px){
  .caps--compact .cap__d{font-size:14px}
}

/* ══════════════════════════════════════════════════════════════
   "동작 줄이기"가 켜진 폰에서도 '서서히 나타나기'는 남긴다 (2026-10-17)

   폰 설정(아이폰: 손쉬운 사용 → 동작 → 동작 줄이기 / 안드로이드: 애니메이션 제거)이
   켜져 있으면 브라우저가 prefers-reduced-motion: reduce 를 알린다.
   지금까지는 이때 등장 모션을 '완전히' 꺼버려서, 그 설정을 쓰는 분에게는
   사이트가 아무 움직임 없이 뚝뚝 나타났다. (모바일에서 모션이 없다는 신고의 유력 원인)

   이 설정의 뜻은 "움직임을 줄여달라"이지 "아무것도 보여주지 말라"가 아니다.
   → 이동·확대·시차 같은 '움직임'은 그대로 없애고,
     눈에 부담이 없는 '밝기 서서히 올리기'만 남긴다.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  /* 등장 모션은 살린다 — 다른 사이트들처럼 보이도록.
     단, 이동 거리를 34px → 14px 로 줄여 어지러움을 유발하지 않게 한다. */
  .js .reveal{
    opacity:0!important;
    transform:translateY(14px)!important;
    transition:opacity .5s ease,transform .5s ease!important;
  }
  .js .reveal.is-in{opacity:1!important;transform:none!important}

  /* 계속 반복되거나 화면을 흔드는 것들은 그대로 끈다 (진짜 어지러운 건 이쪽) */
  .js .bg-glow--a,.js .bg-glow--b,.js .nicon{animation:none!important}
  .par{transform:none!important}
  .hero__cursor{display:none}
  .js .mask i{transform:none!important}

  /* 카드 호버로 떠오르는 효과도 과하지 않게 */
  .card:hover,.cap:hover,.pkg:hover,.ind:hover,.pt:hover{transform:none!important}
}

/* ══════════════════════════════════════════════════════════════
   등장 모션 풍성하게 (2026-10-17) — 대표님: "모션이 너무 단순해"

   지금까지는 모든 요소가 '흐리게 → 선명, 아래→위' 한 가지뿐이었다.
   층을 나눈다: 카드가 먼저 떠오르고 → 아이콘이 톡 튀어나오고 → 태그가 차례로 붙는다.
   카드끼리도 80ms 씩 시차를 두고 들어온다(JS가 data-delay 자동 부여).
   ══════════════════════════════════════════════════════════════ */

/* ① 카드 — 살짝 작게·흐릿하게 시작해 또렷해지며 올라온다 */
.js .reveal.rv-card{
  opacity:0;
  transform:translateY(30px) scale(.972);
  filter:blur(7px);
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease),
    filter .8s var(--ease);
}
.js .reveal.rv-card.is-in{opacity:1;transform:none;filter:none}

/* ② 아이콘 타일 — 카드보다 한 박자 늦게, 톡 튀어나오듯 */
.js .reveal.rv-card .cap__ico,
.js .reveal.rv-card .pkg__ico,
.js .reveal.rv-card .card__ico,
.js .reveal.rv-card .ind__ico,
.js .reveal.rv-card .warn__ico{
  opacity:0;transform:scale(.72);
  transition:
    transform .62s cubic-bezier(.34,1.56,.64,1) .18s,
    opacity .42s ease .18s;
}
.js .reveal.rv-card.is-in .cap__ico,
.js .reveal.rv-card.is-in .pkg__ico,
.js .reveal.rv-card.is-in .card__ico,
.js .reveal.rv-card.is-in .ind__ico,
.js .reveal.rv-card.is-in .warn__ico{opacity:1;transform:none}

/* ③ 태그 알약 — 맨 마지막에 하나씩 */
.js .reveal.rv-card .cap__tags .tag,
.js .reveal.rv-card .pkg__list li{
  opacity:0;transform:translateY(9px);
  transition:opacity .42s ease,transform .42s var(--ease);
}
.js .reveal.rv-card.is-in .cap__tags .tag,
.js .reveal.rv-card.is-in .pkg__list li{opacity:1;transform:none}
.js .reveal.rv-card.is-in .cap__tags .tag:nth-child(1),
.js .reveal.rv-card.is-in .pkg__list li:nth-child(1){transition-delay:.30s}
.js .reveal.rv-card.is-in .cap__tags .tag:nth-child(2),
.js .reveal.rv-card.is-in .pkg__list li:nth-child(2){transition-delay:.37s}
.js .reveal.rv-card.is-in .cap__tags .tag:nth-child(3),
.js .reveal.rv-card.is-in .pkg__list li:nth-child(3){transition-delay:.44s}
.js .reveal.rv-card.is-in .cap__tags .tag:nth-child(n+4),
.js .reveal.rv-card.is-in .pkg__list li:nth-child(n+4){transition-delay:.51s}

/* ④ '자세히 보기' 줄은 가장 마지막에 */
.js .reveal.rv-card .cap__go{
  opacity:0;transition:opacity .45s ease .42s;
}
.js .reveal.rv-card.is-in .cap__go{opacity:1}

/* ───── "동작 줄이기"가 켜진 폰 ─────
   차례로 들어오는 것(시차)과 페이드는 어지러움과 무관하므로 그대로 살린다.
   거리를 키우거나 흐림·확대처럼 화면이 출렁이는 효과만 뺀다. */
@media (prefers-reduced-motion:reduce){
  .js .reveal.rv-card{
    transform:translateY(14px)!important;
    filter:none!important;
    transition:opacity .5s ease,transform .5s ease!important;
  }
  .js .reveal.rv-card.is-in{transform:none!important}
  .js .reveal.rv-card .cap__ico,
  .js .reveal.rv-card .pkg__ico,
  .js .reveal.rv-card .card__ico,
  .js .reveal.rv-card .ind__ico,
  .js .reveal.rv-card .warn__ico{
    transform:none!important;
    transition:opacity .42s ease .16s!important;
  }
  .js .reveal.rv-card .cap__tags .tag,
  .js .reveal.rv-card .pkg__list li{
    transform:none!important;
    transition:opacity .4s ease!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   디자인 보강 2차 (2026-10-17) — 참고: xn--939au0g4vj8sq.net/business/

   참고 사이트에서 가져온 설계 방식 4가지 (사진 없이 구현 가능한 것만):
     ① 중간에 '어두운 띠' 섹션을 넣어 흰 화면이 계속되는 단조로움을 끊는다
     ② 휴대폰에서 제목을 가운데로 모으고 크게 키운다
     ③ 카드 안에서 아이콘과 제목을 한 줄에 둔다
     ④ 숫자를 큼직하게 보여준다
   ⚠️ 참고 사이트의 '누적 ○○만 건' 같은 수치와 '1등' 표현은 가져오지 않는다.
      검증 불가 수치는 표시광고법, 순위 표현은 이용약관 제4조와 어긋난다.
   ══════════════════════════════════════════════════════════════ */

/* ── ① 중간 어두운 띠 (자연 트래픽 섹션) ── */
#traffic{
  --bg:#08090C; --bg-2:#0B0D11; --surface:#101319; --surface-2:#151922;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --tx:#FFFFFF; --tx-2:#A8AEBA; --tx-3:#7B8492; --tx-4:#5A6270;
  --blue-3:#82C9F9; --grad-ink:var(--grad);
  --hover:#0F1218; --glass:rgba(255,255,255,.03); --glass-2:rgba(255,255,255,.07);
  --accent-line:rgba(130,201,249,.34); --accent-line-s:rgba(130,201,249,.55);
  --ghost-bg:rgba(255,255,255,.05); --ghost-bg-hover:rgba(130,201,249,.14); --ghost-shadow:none;
  --shadow-s:0 1px 2px rgba(0,0,0,.35); --shadow-m:0 10px 30px rgba(0,0,0,.45);
  --shadow-l:0 18px 46px rgba(0,0,0,.55);
  color:var(--tx);
  background:
    radial-gradient(ellipse 110% 70% at 50% 0%,#101A2E 0%,transparent 60%),
    linear-gradient(180deg,#0A0D14,#08090C);
  border-block:1px solid rgba(255,255,255,.08);
}
#traffic .warn{background:linear-gradient(120deg,rgba(255,196,0,.14),transparent 62%),#12161F}
#traffic .warn__d b{color:#FFDE6A}
#traffic .flow__n{background:#0E131C}

/* ── ② 휴대폰에서 제목을 가운데로 ── */
@media (max-width:720px){
  .sec-head{text-align:center;justify-items:center}
  .sec-head .eyebrow{justify-content:center}
  .sec-head__top{flex-direction:column;align-items:center;text-align:center;gap:16px}
  .sec-head p.lead,.sec-head .lead{margin-inline:auto}
  .sec-head .h2,.sec-head .h3{font-size:clamp(24px,7.2vw,32px)}
  .statement{text-align:center}
  .statement__side{justify-self:center}
}

/* ── ③ 카드: 아이콘과 제목을 한 줄에 (휴대폰) ── */
@media (max-width:560px){
  .caps--compact .cap{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:"ico body" "go go";
    column-gap:15px;align-items:start;
  }
  .caps--compact .cap__lead{grid-area:ico;flex-direction:column;align-items:center;gap:7px;margin-bottom:0}
  .caps--compact .cap>div:not(.cap__lead){grid-area:body;min-width:0}
  .caps--compact .cap__go{grid-area:go}
  .caps--compact .cap__t{margin-top:2px}
}

/* ── ④ 카드 모서리의 큰 번호 (editorial 워터마크) ── */
.caps--compact .cap{position:relative;overflow:hidden}
.caps--compact .cap[data-n]::after{
  content:attr(data-n);
  position:absolute;right:12px;bottom:46px;
  font-size:72px;font-weight:800;line-height:1;letter-spacing:-.06em;
  color:rgba(11,99,214,.055);
  pointer-events:none;z-index:0;
}
.caps--compact .cap>*{position:relative;z-index:1}
@media (max-width:560px){
  .caps--compact .cap[data-n]::after{font-size:58px;bottom:52px;right:10px}
}

/* ── 숫자 더 큼직하게 (인건비 비교) ── */
.cost__v{font-size:clamp(38px,5.4vw,66px)}
@media (max-width:720px){
  .cost{text-align:center}
  .cost__v{justify-content:center}
  .cost__k{display:block}
}

/* ⚠️ 워터마크용 `.cap>*{position:relative}` 때문에 예전 절대배치 시절의
   top/right 값이 되살아나 '자세히 보기'가 카드 밖(-20px)으로 밀려났다.
   좌표를 명시적으로 풀어준다. */
.caps--compact .cap__go{top:auto;right:auto;bottom:auto;left:auto}
/* 워터마크는 태그와 겹치지 않게 더 옅고 낮게 */
.caps--compact .cap[data-n]::after{color:rgba(11,99,214,.042);bottom:40px}

/* ══════════════════════════════════════════════════════════════
   누적 실적 숫자 카드 (2026-10-17)
   참고 사이트의 '배치'만 빌리고, 색·서체·아이콘은 우리 것으로 맞춘다.
   (주황색·이모지 일러스트 대신 → 브랜드 블루 그라데이션 + 네온 라인 아이콘)
   ══════════════════════════════════════════════════════════════ */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.5vw,18px);
}
.stat{
  position:relative;overflow:hidden;
  padding:clamp(24px,2.6vw,32px) clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:20px;
  background:var(--surface);
  box-shadow:var(--shadow-s);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .4s;
}
.stat::before{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.stat:hover{transform:translateY(-5px);border-color:var(--accent-line);box-shadow:var(--shadow-l)}
.stat:hover::before{transform:scaleX(1)}

/* 숫자 — 브랜드 그라데이션, 자릿수가 흔들리지 않게 tabular */
.stat__v{
  display:flex;align-items:baseline;gap:2px;
  font-size:clamp(30px,3.6vw,46px);font-weight:800;
  letter-spacing:-.05em;line-height:1.05;
  font-variant-numeric:tabular-nums;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat__v i{font-style:normal;font-size:.62em;font-weight:800;margin-left:1px}
.stat__k{
  margin-top:12px;font-size:14px;font-weight:600;
  letter-spacing:-.02em;color:var(--tx-2);
}

/* 모서리 네온 아이콘 — 참고 사이트의 일러스트 자리를 우리 아이콘으로 */
.stat__art{
  position:absolute;right:-6px;bottom:-8px;
  width:76px;height:76px;
  color:var(--blue-3);opacity:.16;
  pointer-events:none;
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.stat:hover .stat__art{opacity:.28;transform:translateY(-4px) rotate(-6deg)}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .stats{gap:10px}
  .stat{padding:20px 16px;border-radius:16px}
  .stat__v{font-size:clamp(26px,8vw,34px)}
  .stat__k{margin-top:9px;font-size:12.5px}
  .stat__art{width:58px;height:58px;right:-4px;bottom:-6px}
}

/* ──────────────────────────────────────────────────────────────
   파란 버튼 그림자 — 구역에 따라 다르게 (2026-10-17)

   문제: .btn--primary 에 파란 발광 그림자(alpha .55)를 고정으로 걸어 두니,
        검정 히어로에서는 네온처럼 예쁘지만 흰 헤더 위에서는
        "버튼 뒤에 파란 걸 덧칠한 것처럼" 번져 보였다. (대표님 지적)
   해결: 밝은 구역에서는 색 없는 옅은 그림자로, 어두운 구역에서만 파란 발광.
   ────────────────────────────────────────────────────────────── */
:root{
  --cta-shadow:0 4px 12px -6px rgba(14,26,54,.30);
  --cta-shadow-hover:0 10px 22px -8px rgba(14,26,54,.34);
  --kakao-shadow:0 4px 12px -6px rgba(14,26,54,.26);
  --kakao-shadow-hover:0 10px 22px -8px rgba(14,26,54,.30);
}
.hero,.phero,.nf,.cta-band,#traffic,
.hdr:not(.is-light),
.hdr:not(.is-light)~.drawer{
  --cta-shadow:0 10px 30px -10px rgba(0,81,199,.80);
  --cta-shadow-hover:0 18px 42px -12px rgba(46,120,224,.90);
  --kakao-shadow:0 10px 28px -12px rgba(254,229,0,.50);
  --kakao-shadow-hover:0 16px 38px -14px rgba(254,229,0,.65);
}
.btn--primary{box-shadow:var(--cta-shadow)}
.btn--primary:hover{box-shadow:var(--cta-shadow-hover)}
.btn--kakao{box-shadow:var(--kakao-shadow)}
.btn--kakao:hover{box-shadow:var(--kakao-shadow-hover)}

/* ──────────────────────────────────────────────────────────────
   파란 버튼 그라데이션 — 흰 배경용 따로 (2026-10-17)

   브랜드 그라데이션 #0051C7 → #82C9F9 는 '검정 배경' 기준으로 만든 색이다.
   흰 배경에서는 밝은 쪽(하늘색 #82C9F9)이 배경으로 날아가,
   진한 파랑 뒤에 연한 파랑을 한 겹 덧댄 것처럼 보인다. (대표님 지적)
   → 밝은 구역에서는 양쪽 다 진한 파랑으로 끝나는 그라데이션을 쓴다.
     검정 구역에서는 기존 브랜드 그라데이션 그대로.
   ────────────────────────────────────────────────────────────── */
:root{
  /* 밝은 쪽 끝에서도 흰 글자가 4.5:1 을 넘도록 한 단계 진하게 (#2E78E0 는 4.31로 미달) */
  --grad-btn:linear-gradient(135deg,#0A4FC0,#2A6FD4);
}
.hero,.phero,.nf,.cta-band,#traffic,
.hdr:not(.is-light),
.hdr:not(.is-light)~.drawer{
  --grad-btn:var(--grad);
}
.btn--primary,
.price__badge,
.ico--o,
.hero__badge b{
  background-image:var(--grad-btn);
}
/* 마우스를 올리면 그라데이션으로 바뀌는 동그란 것들도 같은 규칙 */
.cap:hover .cap__go,
.step:hover .step__dot,
.flow__step:hover .flow__n,
.vs__row:hover .vs__arrow,
.faq__item.is-open .faq__q i{
  background-image:var(--grad-btn);
}

/* 숫자 카드 모서리 아이콘 — 너무 옅어 안 보인다는 지적 반영 (2026-10-17)
   .16 → .42 로 올리고 크기도 키운다. 숫자·글자를 가리지 않게 위치는 그대로 모서리. */
.stat__art{
  width:86px;height:86px;
  opacity:.42;
  right:-4px;bottom:-6px;
}
.stat:hover .stat__art{opacity:.62;transform:translateY(-5px) rotate(-6deg)}
@media (max-width:560px){
  .stat__art{width:64px;height:64px;right:-2px;bottom:-4px;opacity:.40}
}

/* ══════════════════════════════════════════════════════════════
   파란 버튼 = 단색으로 (2026-10-17)

   대표님: "무료상담 색깔이 왜 바껴 / 겹쳐있는거같아"
   원인: 브랜드 그라데이션(진한파랑 → 하늘색)은 한 버튼 안에서 색이 크게 달라져
        '진한 알약 위에 연한 알약을 겹쳐 놓은 것'처럼 보인다.
        흰 배경에서 특히 심하고, 검정 배경에서도 테두리처럼 읽힌다.
   해결: 버튼은 단색으로. 그라데이션은 '선·아이콘·글자' 같은 얇은 곳에만 남긴다.
        (브랜드 그라데이션 자체는 그대로 살아 있다)
   ↩ 되돌리려면 이 블록만 지우면 그라데이션 버튼으로 복귀.
   ══════════════════════════════════════════════════════════════ */
:root{ --btn-solid:#0B5ED7; }                  /* 흰 배경 위: 흰 글자 대비 5.8 */
.hero,.phero,.nf,.cta-band,#traffic,
.hdr:not(.is-light),
.hdr:not(.is-light)~.drawer{
  --btn-solid:#1668DC;                          /* 검정 배경 위: 조금 더 밝게 */
}

.btn--primary,
.price__badge,
.ico--o,
.hero__badge b,
.fab__b--call,
.cap:hover .cap__go,
.step:hover .step__dot,
.flow__step:hover .flow__n,
.vs__row:hover .vs__arrow,
.faq__item.is-open .faq__q i{
  background-image:none;
  background-color:var(--btn-solid);
}
.btn--primary:hover{background-color:#0A52BC}
.hero .btn--primary:hover,.phero .btn--primary:hover,
.nf .btn--primary:hover,.cta-band .btn--primary:hover,
#traffic .btn--primary:hover{background-color:#2E7BE8}

/* 그림자도 한 겹 더 얹은 것처럼 보이지 않게 낮춘다 */
:root{
  --cta-shadow:0 3px 10px -5px rgba(14,26,54,.28);
  --cta-shadow-hover:0 8px 18px -8px rgba(14,26,54,.32);
}
.hero,.phero,.nf,.cta-band,#traffic,
.hdr:not(.is-light),
.hdr:not(.is-light)~.drawer{
  --cta-shadow:0 6px 18px -10px rgba(0,81,199,.55);
  --cta-shadow-hover:0 12px 26px -12px rgba(46,120,224,.65);
}
.fab__b--call{box-shadow:var(--cta-shadow)}

/* 숫자 섹션 제목 — 두 줄 구성, 브랜드명만 색으로 (참고사이트 구성 반영) */
.stat-head{line-height:1.3}
.stat-head em{font-style:normal}
@media (max-width:720px){
  .stat-head br{display:none}        /* 좁은 화면에선 자연스럽게 흐르도록 */
  .stat-head{font-size:clamp(23px,6.6vw,30px)}
}
/* 모서리 아이콘을 한 번 더 또렷하게 (참고사이트 일러스트처럼 존재감 있게) */
.stat__art{opacity:.55}
.stat:hover .stat__art{opacity:.75}
@media (max-width:560px){ .stat__art{opacity:.52} }

/* ══════════════════════════════════════════════════════════════
   버튼 "덮인 것처럼 삐죽 튀어나옴" 해결 + 그라데이션 복구 (2026-10-17)

   ① 원인: .btn--primary::after 의 '빛 스쳐지나감' 효과.
      이건 skewX 로 기울인 '사각형'이고, 평소엔 버튼의 overflow:hidden 으로
      알약 모양에 맞춰 잘린다. 그런데 안드로이드 크롬 등 일부 환경에서
      둥근모서리 + 합성레이어 조합일 때 이 잘라내기가 실패한다.
      그러면 사각형이 그대로 드러나 둥근 끝 밖으로 삐죽 나온다.
      → 효과 자체를 없앤다. (장식일 뿐이고, 안 보이는 게 훨씬 낫다)
      ※ clip-path 로 다시 자르는 방법도 있지만 같은 환경에서 또 샐 수 있어
        아예 제거하는 쪽이 안전하다.

   ② 대표님 요청대로 그라데이션 복구. 단, 흰 배경에서는 밝은 쪽이 날아가
      두 겹처럼 보이므로 '진한 파랑 → 조금 밝은 파랑'으로 폭을 좁힌다.
      검정 배경에서는 기존 브랜드 그라데이션 그대로.
   ══════════════════════════════════════════════════════════════ */

/* ① 빛 스쳐지나감 제거 */
.btn--primary::after,.btn--kakao::after{content:none!important}

/* ② 그라데이션 복구 */
/* 양 끝 모두 흰 글자가 4.5:1 을 넘도록 (#0A4FC0=7.26, #2A72DC=4.59)
   밝은 쪽을 더 띄우면(#5BA8F2=2.5, #82C9F9=1.8) 글자가 안 읽힌다. */
:root{ --btn-grad:linear-gradient(135deg,#0A4FC0,#2A72DC); }
.btn--primary,
.price__badge,
.ico--o,
.hero__badge b,
.fab__b--call,
.cap:hover .cap__go,
.step:hover .step__dot,
.flow__step:hover .flow__n,
.vs__row:hover .vs__arrow,
.faq__item.is-open .faq__q i{
  background-color:transparent;
  background-image:var(--btn-grad);
}
.btn--primary:hover,
.hero .btn--primary:hover,.phero .btn--primary:hover,
.nf .btn--primary:hover,.cta-band .btn--primary:hover,
#traffic .btn--primary:hover{
  background-color:transparent;
  filter:brightness(1.08);
}

/* ══════════════════════════════════════════════════════════════
   플로팅 버튼 글자가 동그라미 밖으로 삐져나오던 문제 (2026-10-17)

   원인: 글자는 '네모 박스' 안에는 들어가지만, 동그라미는 아래로 갈수록 좁아진다.
        CONTACT 글자가 놓이는 높이에서 원의 실제 가로폭은
          46px 원 → 38.1px   /   52px 원 → 43.1px
        인데 글자 폭이 약 36.8px 이라 양옆 여유가 1~3px 뿐이었다.
        → 흰 글자가 원 테두리를 뚫고 나와 "뭔가 덮여서 삐져나온 것"처럼 보였다.
   해결: 원을 키우고(56/50px) 글자를 줄여(6.5px) 여유를 7px 로 확보.
        혹시 모를 경우를 대비해 overflow:hidden 으로 원 모양에 가둔다.
   ══════════════════════════════════════════════════════════════ */
.fab__b{
  width:56px;height:56px;
  overflow:hidden;                 /* 어떤 경우에도 원 밖으로 못 나가게 */
}
.fab__b svg{width:18px;height:18px}
.fab__b span{
  font-size:6.5px;letter-spacing:.02em;
  max-width:78%;white-space:nowrap;overflow:hidden;
  margin-top:2px;
}
@media (max-width:900px){
  .fab__b{width:50px;height:50px}
  .fab__b svg{width:17px;height:17px}
  .fab__b span{font-size:6px}
}

/* ──────────────────────────────────────────────────────────────
   파란 버튼이 "두 겹"으로 보이던 진짜 이유 (2026-10-17)

   135deg 대각선 그라데이션이라 좁은 알약 안에서 왼쪽은 진하고 오른쪽은 밝다.
   폭이 114px 밖에 안 되니 그 경계가 눈에 띄어, 진한 알약 위에 밝은 알약을
   얹은 것처럼 보였다. (대표님이 보낸 확대 사진의 '왼쪽 진한 띠'가 이것)
   → 가로 방향을 없애고 '위가 조금 밝고 아래가 조금 진한' 세로 그라데이션으로.
     색 차이도 좁혀서 한 덩어리로 읽히게 한다.
   ────────────────────────────────────────────────────────────── */
:root{ --btn-grad:linear-gradient(180deg,#2A72DC,#0D55C6); }
.hero,.phero,.nf,.cta-band,#traffic,
.hdr:not(.is-light),
.hdr:not(.is-light)~.drawer{
  --btn-grad:linear-gradient(180deg,#2F7AE6,#0E57CC);
}

/* 숫자 섹션 제목 — 두 줄 모두 같은 크기 (대표님 요청)
   둘째 줄이 길어서 h2 기본(최대 52px)이면 3줄로 터진다 → 34px 로 맞춘다. */
.stat-head{
  font-size:clamp(21px,2.9vw,34px);
  line-height:1.4;
  letter-spacing:-.03em;
}
@media (max-width:720px){
  .stat-head{font-size:clamp(19px,5.2vw,24px)}
  .stat-head br{display:block}
}

/* ──────────────────────────────────────────────────────────────
   누적 실적 카드 8장 (2026-10-17)
   '누적 노출 위치 추적 1,071,545' 처럼 7자리 숫자와 긴 라벨이 들어와서
   카드 폭이 좁아지면 숫자가 줄바꿈되거나 넘친다 → 글자 크기를 폭에 맞춘다.
   ────────────────────────────────────────────────────────────── */
.stats{grid-template-columns:repeat(4,1fr)}
.stat__v{
  font-size:clamp(22px,2.3vw,34px);
  white-space:nowrap;            /* 숫자가 줄바꿈되면 보기 흉하다 */
}
.stat__k{
  font-size:13.2px;
  line-height:1.45;
  min-height:2.9em;              /* 라벨이 1줄/2줄이어도 카드 높이를 맞춘다 */
}
.stat__art{width:68px;height:68px}

@media (max-width:1100px){
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat__v{font-size:clamp(20px,5vw,28px)}
  .stat__k{font-size:12.2px;min-height:2.8em}
  .stat__art{width:56px;height:56px}
}
@media (max-width:400px){
  .stat{padding:17px 13px}
  .stat__v{font-size:19px}
  .stat__k{font-size:11.4px}
  .stat__art{width:48px;height:48px}
}

/* 버튼 그라데이션 — 경계가 전혀 안 보이도록 색 폭을 더 좁힌다 */
:root{ --btn-grad:linear-gradient(180deg,#1C64D2,#0F56C6); }
.hero,.phero,.nf,.cta-band,#traffic,
.hdr:not(.is-light),
.hdr:not(.is-light)~.drawer{
  --btn-grad:linear-gradient(180deg,#2470DE,#1159CE);
}

/* ══════════════════════════════════════════════════════════════
   한 줄에 한 문장 (2026-10-19)

   대표님 지적: 문단 안에서 문장이 쭉 이어지니 다음 문장이 줄 끝에서 시작하고,
   강조(굵은 글씨)가 줄 중간에서 잘려 "엔터가 이상하게 쳐진" 것처럼 보였다.
   → 본문 문단은 문장마다 줄을 바꾼다(HTML 에 <br /> 삽입).
     줄바꿈된 문장끼리 너무 붙지 않게 줄 간격을 조금 넓힌다.
   ══════════════════════════════════════════════════════════════ */
.lead,.warn__d,.svc__d,.cost__d,.cost-note p,.pt__v,.ind__rows dd{
  line-height:1.85;
}

/* ── 강조 밑줄이 줄바꿈되면 어긋나던 문제 ──
   기존에는 ::after 를 position:absolute 로 깔아서 그렸다.
   굵은 글씨가 두 줄로 쪼개지면 absolute 박스가 두 줄을 통째로 덮어
   네모가 쳐진 것처럼 보였다. (대표님 캡처의 '이해를 돕기' 박스)
   → 배경 그라데이션으로 바꾸고 box-decoration-break:clone 으로
     줄마다 따로 그려지게 한다. */
.js .lead b::after,.js .flow__d b::after{content:none!important}
.js .lead b,.js .flow__d b{
  background-image:linear-gradient(90deg,var(--blue-2),var(--blue-3));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1.5px;
  transition:background-size .9s var(--ease) .35s;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding-bottom:1px;
}
.js .reveal.is-in .lead b,
.js .lead.is-in b,
.js .reveal.is-in .flow__d b{background-size:100% 1.5px}

@media (prefers-reduced-motion:reduce){
  .js .lead b,.js .flow__d b{background-size:100% 1.5px!important;transition:none!important}
}

/* ──────────────────────────────────────────────────────────────
   짧은 강조 문구는 줄 중간에서 자르지 않는다 (2026-10-19)

   대표님 지적: "1:1로 설계합니다." 에서 '1:1로' 까지만 윗줄에 남고
   '설계' 가 아랫줄로 내려가 말이 끊겨 보였다.
   → 14자 이하 강조(<b class="nb">)는 통째로 다음 줄로 내려간다.
     14자를 넘는 긴 강조는 묶으면 화면 밖으로 넘치므로 그대로 흐르게 둔다.
     (붙이는 작업은 HTML 쪽에서 미리 해둠 — JS 없이도 동작)
   ────────────────────────────────────────────────────────────── */
/* b 뿐 아니라 span 에도 적용돼야 한다 (번호·가운뎃점 묶음이 span 이다) */
.nb{white-space:nowrap}

/* ---------- 작은 화면(≤420px)에서 CTA 배너 안쪽 여백 줄이기 ----------
   실측: 360px 화면에서 배너 안쪽 여백이 좌우 36px씩 들어가
   제목이 쓸 수 있는 폭이 224px 밖에 안 됐다.
   그래서 "1단계 진단은 / 무료입니다" 처럼 짧은 제목도 두 줄로 쪼개졌다.
   (375px 이상에서는 한 줄로 들어간다 → 여백만 줄이면 해결된다) */
@media (max-width:420px){
  .cta-band{padding:30px 20px}
}

/* ---------- 320px급 초소형 화면 ----------
   --fs-h2 의 최소값이 26px 이라 320px 화면에서는 제목 15자가
   한 줄에 못 들어가 "…같을 수는 / 없습니다" 처럼 끝 단어만 처졌다.
   이 폭에서만 제목을 23px 로 낮춘다. (360px 이상은 그대로 26px) */
@media (max-width:349px){
  :root{--fs-h2:23px}
  .cta-band{padding:26px 16px}
}

/* ---------- 태블릿(721~1023px)에서 3장짜리 카드 줄은 2장씩 ----------
   3장을 그대로 가로로 늘어놓으면 카드 하나가 173px 밖에 안 돼
   한 줄에 12글자도 못 들어간다. 그러면 "…몰립니/다." 처럼
   끝 단어가 혼자 처지거나 음절이 갈라진다.
   2장씩 놓으면 칸이 넓어져 문장이 제대로 끊긴다. */
@media (min-width:721px) and (max-width:1023px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  /* 3장 중 마지막 한 장이 왼쪽에 혼자 붙어 오른쪽이 휑하게 비어 보인다.
     크기는 그대로 두고 가운데로 옮겨 일부러 그렇게 둔 것처럼 보이게 한다. */
  .grid--3>:nth-child(3):last-child{
    grid-column:1 / -1;
    width:calc(50% - (clamp(12px,1.6vw,20px) / 2));
    margin-inline:auto;
  }
}