:root{
  --blue:#0A84FF; --blue-hover:#0060DF; --blue-bg:#EAF4FF;
  --bg:#FFFFFF; --bg-sub:#FAFAFA; --ink:#111111;
  --body:#333333; --muted:#767676; --line:#E5E5E5;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Pretendard',sans-serif;color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;letter-spacing:-0.01em;}
.container{max-width:1280px;margin:0 auto;padding:0 40px;}

.rv{opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
.rv.on{opacity:1;transform:none;}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s;}
.nav.scrolled{border-bottom-color:var(--line);}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 40px;height:60px;
  display:flex;align-items:center;justify-content:space-between;}
.nav-logo{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em;text-decoration:none;}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{font-size:14px;color:var(--body);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--blue);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;
  padding:15px 28px;border-radius:100px;text-decoration:none;transition:all .25s;}
.btn-p{background:var(--ink);color:#fff;}
.btn-p:hover{background:var(--blue);}
.btn-g{color:var(--ink);border:1px solid var(--line);}
.btn-g:hover{border-color:var(--ink);}
.btn-lg{font-size:16px;padding:17px 34px;}

/* HERO */
.hero{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding-top:60px;}
.hero>.container{width:100%;}
.eyebrow{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;}
.hero h1{margin-top:20px;font-size:64px;font-weight:700;color:var(--ink);
  letter-spacing:-.035em;line-height:1.22;}
.hero .sub{margin-top:28px;font-size:19px;color:var(--body);line-height:1.75;max-width:560px;}
.hero .acts{margin-top:44px;display:flex;gap:12px;}
.hero-foot{margin-top:80px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;gap:36px;font-size:14px;color:var(--muted);flex-wrap:wrap;}

/* WHO */
.who{padding:150px 0;background:var(--bg-sub);}
.who-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;}
.who h2{margin-top:16px;font-size:38px;font-weight:700;color:var(--ink);
  letter-spacing:-.025em;line-height:1.35;}
.who p{font-size:19px;line-height:1.9;color:var(--body);}
.who p+p{margin-top:30px;}
.who .hl{color:var(--ink);font-weight:600;}
.proof{margin-top:44px;padding-top:32px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.proof-i .k{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.04em;}
.proof-i .v{margin-top:10px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em;}
.proof-i .d{margin-top:6px;font-size:14px;color:var(--muted);line-height:1.6;}

/* DIFF — 1페이지라고 다 같은 1페이지가 아닙니다 */
.diff{padding:130px 0;}
.diff h2{font-size:40px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.3;}
.diff .lead{margin-top:24px;font-size:19px;line-height:1.85;color:var(--body);max-width:620px;}
.cmp{margin-top:60px;border-top:1px solid var(--line);}
.cmp-row{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:0;border-bottom:1px solid var(--line);}
.cmp-row>div{padding:26px 24px;}
.cmp-row .lb{font-size:14px;color:var(--muted);padding-left:0;}
.cmp-row .a{font-size:16px;color:var(--muted);}
.cmp-row .b{font-size:16px;color:var(--ink);font-weight:600;background:var(--blue-bg);}
.cmp-head .lb{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;}
.cmp-head .a,.cmp-head .b{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.cmp-note{margin-top:26px;font-size:15px;color:var(--muted);line-height:1.7;}

/* PACKAGES */
.pkg{padding:140px 0;background:var(--bg-sub);}
.pkg h2{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.025em;}
.pkg .lead{margin-top:20px;font-size:18px;color:var(--body);line-height:1.8;max-width:560px;}
.pkg-list{margin-top:64px;}
.pkg-i{display:grid;grid-template-columns:44% minmax(0,1fr);gap:56px;align-items:center;
  padding:56px 0;border-top:1px solid var(--line);}
.pkg-i:last-child{border-bottom:1px solid var(--line);}
.pkg-i.rev{grid-template-columns:minmax(0,1fr) 44%;}
.pkg-i.rev .pkg-img{order:2;}
.pkg-i.rev .pkg-body{order:1;}
.pkg-img{border:1px solid var(--line);background:var(--bg);line-height:0;}
.pkg-img img{display:block;width:100%;height:auto;}
.pkg-i .nm{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.pkg-i .pg{margin-top:6px;font-size:14px;color:var(--muted);}
.pkg-i .ds{margin-top:20px;font-size:17px;line-height:1.75;color:var(--body);}
.pkg-i .ds b{font-weight:600;color:var(--ink);}
.pkg-i .sp{display:flex;gap:22px;margin-top:12px;font-size:14px;color:var(--muted);}
.pkg-cta{margin-top:26px;}
.pkg-foot{margin-top:44px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.pkg-foot p{font-size:15px;color:var(--muted);line-height:1.7;}

/* PROCESS */
.proc{padding:140px 0;}
.proc-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:90px;}
.proc h2{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1.35;
  position:sticky;top:120px;}
.step{padding:34px 0;border-top:1px solid var(--line);}
.step:first-child{padding-top:0;border-top:none;}
.step .n{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.06em;}
.step h4{margin-top:11px;font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.step p{margin-top:12px;font-size:16px;line-height:1.8;color:var(--body);}

/* SCOPE */
.scope{padding:140px 0;background:var(--bg-sub);}
.scope h2{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.025em;}
.scope .lead{margin-top:20px;font-size:18px;color:var(--body);line-height:1.8;max-width:600px;}
.scope-grid{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;}
.scope-col h4{font-size:15px;font-weight:700;letter-spacing:-.01em;padding-bottom:16px;
  border-bottom:1px solid var(--line);}
.scope-col.inc h4{color:var(--blue);}
.scope-col.exc h4{color:var(--muted);}
.scope-col ul{list-style:none;margin-top:8px;}
.scope-col li{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6;}
.scope-col.inc li{color:var(--ink);}
.scope-col.exc li{color:var(--muted);}
.scope-note{margin-top:44px;padding:28px 32px;background:#fff;border-left:3px solid var(--blue);}
.scope-note b{display:block;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.scope-note p{margin-top:10px;font-size:15px;line-height:1.8;color:var(--body);}

/* FAQ */
.faq{padding:140px 0;}
.faq h2{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.025em;}
.faq-list{margin-top:56px;border-top:1px solid var(--line);}
.faq-i{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;
  padding:28px 48px 28px 0;font-family:inherit;font-size:19px;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;position:relative;transition:color .2s;}
.faq-q:hover{color:var(--blue);}
.faq-q::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;}
.faq-i.open .faq-q::after{transform:translateY(-20%) rotate(-135deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1);}
.faq-a p{padding:0 60px 30px 0;font-size:17px;line-height:1.85;color:var(--body);}
.faq-a p+p{padding-top:16px;}

/* CTA */
.cta{padding:130px 0;background:var(--ink);color:#fff;}
.cta h2{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1.3;}
.cta p{margin-top:24px;font-size:18px;color:rgba(255,255,255,.62);line-height:1.8;max-width:520px;}
.cta .acts{margin-top:44px;display:flex;gap:12px;flex-wrap:wrap;}
.cta .btn-w{background:#fff;color:var(--ink);}
.cta .btn-w:hover{background:var(--blue);color:#fff;}
.cta .btn-o{color:#fff;border:1px solid rgba(255,255,255,.28);}
.cta .btn-o:hover{border-color:#fff;}

footer{padding:44px 0;border-top:1px solid var(--line);}
.ft{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;
  font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px;}
.ft a{color:var(--muted);text-decoration:none;}
.ft a:hover{color:var(--blue);}

@media screen and (max-width:900px){
  .container{padding:0 22px;}
  .nav-inner{padding:0 22px;}
  .nav-links{display:none;}
  .hero{min-height:auto;padding:120px 0 70px;}
  .hero h1{font-size:36px;} .hero .sub{font-size:17px;}
  .hero .acts{flex-direction:column;align-items:stretch;}
  .hero-foot{gap:14px;flex-direction:column;margin-top:50px;}
  .who,.pkg,.proc,.scope,.faq{padding:80px 0;} .diff,.cta{padding:80px 0;}
  .who-grid,.proc-grid,.scope-grid{grid-template-columns:1fr;gap:36px;}
  .pkg-i,.pkg-i.rev{grid-template-columns:1fr;gap:28px;padding:40px 0;}
  .pkg-i.rev .pkg-img,.pkg-i.rev .pkg-body{order:0;}
  .who h2,.pkg h2,.proc h2,.scope h2,.faq h2{font-size:27px;}
  .diff h2{font-size:28px;} .cta h2{font-size:28px;}
  .who p{font-size:17px;} .proc h2{position:static;}
  .proof{grid-template-columns:1fr;gap:24px;}
  .cmp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .cmp-row .lb{grid-column:1/-1;padding:18px 0 0;font-weight:700;color:var(--ink);}
  .cmp-row>div{padding:14px 16px;}
  .faq-q{font-size:17px;padding-right:38px;} .faq-a p{padding-right:20px;font-size:16px;}
  .scope-note{padding:24px 22px;}
  .ft{padding:0 22px;}
}

/* ══════════════════════════════════════════════
   비활성 버튼 — 링크가 아직 없을 때 (config.js 가 켠다)
   ══════════════════════════════════════════════ */
.btn.is-off{background:#EFEFEF;color:#AAAAAA;border-color:transparent;
  cursor:default;pointer-events:none;}
/* 어두운 CTA 섹션에서는 회색 덩어리가 튄다. 같은 톤 안에서 죽인다. */
.cta .btn.is-off{background:rgba(255,255,255,.13);color:rgba(255,255,255,.42);}

/* ══════════════════════════════════════════════
   터치 타깃 — 최소 44px. 보이는 모양은 그대로 두고 히트 영역만 겹친다.
   nav 는 60px flex 중앙정렬이라 패딩을 줘도 글자 위치가 변하지 않는다.
   ══════════════════════════════════════════════ */
.nav-logo{padding:14px 0;}
.nav-links a,.ft a{position:relative;}
/* gap 이 32px 이므로 좌우 15px 씩이면 인접 링크와 2px 여유가 남는다 */
.nav-links a::after{content:'';position:absolute;left:-15px;right:-15px;
  top:50%;transform:translateY(-50%);height:44px;}
.ft a::after{content:'';position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px;}

/* ── 작은 화면 (480px 이하 · 320px까지 대응) ── */
@media screen and (max-width:480px){
  .container,.nav-inner,.ft{padding:0 18px;}
  .hero h1{font-size:32px;}
  .cmp-row{grid-template-columns:1fr;}
  .cmp-row .a,.cmp-row .b{padding:12px 14px;}
  .ft{flex-direction:column;gap:8px;}
}

/* ── 인쇄 ──
   .rv 는 IntersectionObserver 가 발화해야 보인다. 인쇄·PDF 저장 시에는
   스크롤이 일어나지 않아 아직 안 보인 섹션이 통째로 빈칸으로 나온다.
   FAQ 답변도 max-height:0 이라 접힌 채로 인쇄된다. 둘 다 펴 준다. ── */
@media print{
  .rv{opacity:1 !important;transform:none !important;}
  .faq-a{max-height:none !important;}
  .faq-a p{padding-bottom:18px;}
  .nav{position:static;}
  .proc h2{position:static;}
}

/* ── MOTION 최소화 환경 ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;transition:none;}
  .btn,.nav,.faq-a,.faq-q::after{transition:none;}
}