/* ============================================================
   좌-우 2단 골격 — 토스 서비스 소개 페이지(toss.im/company) 구조 반영
   style.css 를 먼저 읽고 그 위에 덮어쓴다.

   토스에서 실제로 확인한 것
     · 순백 바탕. 배경색 카드를 거의 쓰지 않는다.
     · 4면 테두리는 없지만 가로 hairline 은 적극적으로 쓴다.
     · 좌-우 2단. 왼쪽 300px 은 제목만, 오른쪽에 내용.
     · 리스트 항목은 번호 | 제목 | 설명 3단, 사이에 hairline.
     · 색은 거의 흑백. 액센트는 아주 작은 곳에만.
   ============================================================ */
:root{
  --hair:#E9E5DD;
  --hair-2:#F2EFE9;
  --bg-2:#FFFFFF;
  --tint:#FAF8F4;
  --tint-2:#FAF6EE;   /* 비교표의 세 칸마다 깔리는 바탕 */
  --pad:clamp(80px,9.5vw,152px);
  --wrap:1240px;
  --side:clamp(28px,7.4vw,128px);
  --r:20px;
}
body{background:#fff}
.wrap{padding:0 var(--side)}

/* ── 헤더 ─────────────────────────────────────────────── */
.hdr{background:rgba(255,255,255,.86)}
.hdr.on-dark{background:rgba(255,255,255,.86)}
.hdr.on-dark .brand img{filter:none;opacity:.92}
.hdr.on-dark .nav button{color:var(--ink-2)}
.hdr.on-dark .nav button:hover{color:var(--ink);background:var(--tint)}
.hdr.on-dark .nav button.on{color:#fff;background:var(--navy)}
.hdr.on-dark .burger{color:var(--navy)}
.hdr.scrolled{box-shadow:0 1px 0 var(--hair)}

/* ── 히어로 ───────────────────────────────────────────── */
.hero{
  background:#fff;color:var(--navy);min-height:auto;display:block;
  padding-top:calc(var(--hdr) + clamp(60px,9vh,110px));
}
.hero::after{
  content:"";position:absolute;top:0;left:0;right:0;height:560px;pointer-events:none;z-index:0;
  background:
    radial-gradient(880px 400px at 74% 2%,rgba(190,156,95,.36),transparent 68%),
    radial-gradient(640px 330px at 28% -8%,rgba(190,156,95,.2),transparent 66%);
  filter:blur(30px);
}
.hero>.wrap{position:relative;z-index:1}
.hero-in{padding-block:0 clamp(56px,7vh,90px)}
.hero h1{
  font-size:clamp(32px,6vw,68px);line-height:1.14;letter-spacing:-.05em;color:var(--navy);
}
.hero h1 em{font-style:normal;color:var(--navy)}
.hero .hero-sub{
  margin-top:clamp(16px,2vw,26px);font-size:clamp(19px,2.5vw,31px);font-weight:700;
  letter-spacing:-.042em;line-height:1.42;color:var(--navy);
}
.hero .lead{color:var(--ink-2)}
/* 히어로 하단 2단 (토스 Vision 블록) */
.hero-two{
  margin-top:clamp(52px,7vw,104px);padding-top:clamp(36px,4vw,58px);
  border-top:1px solid var(--hair);
}

/* ── 좌-우 2단 ────────────────────────────────────────── */
.two{
  display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(28px,5vw,88px);align-items:start;
}
/* 왼쪽 제목은 오른쪽이 스크롤되는 동안 붙어 있는다 (토스 Culture 섹션) */
.two-l{position:sticky;top:calc(var(--hdr) + clamp(28px,4vw,56px))}
.two-r{max-width:680px}
.two-l h2.t{font-size:clamp(27px,3.5vw,42px);line-height:1.3;letter-spacing:-.042em}.two-l .note{margin-top:20px;font-size:14.5px;color:var(--ink-3);line-height:1.75}
.two-r .strong{font-size:clamp(18px,1.85vw,23px);font-weight:700;letter-spacing:-.035em;line-height:1.6;color:var(--navy)}
.two-r p{font-size:16.5px;color:var(--ink-2);line-height:1.9;letter-spacing:-.02em}
.two-r .strong+p{margin-top:20px}
.two-r p+p{margin-top:20px}
/* 정보가 든 부제는 제목 아래가 아니라 내용 아래에 둔다 */
.two-r .foot{margin-top:clamp(26px,3vw,40px);padding-top:22px;border-top:1px solid var(--hair);
  font-size:14px;color:var(--ink-3);line-height:1.8;margin-bottom:0}
/* ── 번호 리스트 (토스 Culture 구조) ──────────────────── */
.list{display:block}
.li{
  display:grid;grid-template-columns:44px minmax(126px,196px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,34px);align-items:start;
  padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--hair);
}
.li:first-child{border-top:0;padding-top:0}

.li h3{font-size:clamp(17px,1.75vw,21px);letter-spacing:-.035em;line-height:1.5;color:var(--navy)}
.li p{font-size:15.5px;color:var(--ink-2);line-height:1.85;letter-spacing:-.02em}

/* 대비 리스트 */

/* ── 숫자 ─────────────────────────────────────────────── */.fig{padding:clamp(30px,3.4vw,46px) clamp(14px,2vw,28px) 0 0}
.fig+.fig{padding-left:clamp(18px,2.4vw,34px);border-left:1px solid var(--hair)}
.fig b{font-size:clamp(32px,4.4vw,54px);color:var(--navy)}
.fig b i{color:var(--gold)}
.fig span{font-size:14.5px;color:var(--ink-3)}
/* ── 절차 ─────────────────────────────────────────────── */
.steps{margin-top:clamp(40px,5vw,68px)}
.step{padding-top:26px}
.step::before{background:var(--hair)}
.step.in::before{background:var(--navy)}
.step .n{color:var(--ink-4);font-weight:700;letter-spacing:.02em}
.step h4{font-size:17.5px}
.step p{font-size:15px}

/* ── 섹션 배경 무력화 ─────────────────────────────────── */
.sec-ivory{background:#fff}
.sec + .sec{border-top:1px solid var(--hair)}
/* 남색 면은 페이지에 딱 한 곳. 나머지는 순백으로 둔다 */
/* ── CTA 밴드 (유일한 컬러 면) ────────────────────────── */
.band{background:var(--navy);color:#fff;padding:clamp(64px,7.5vw,104px) 0}
.band h2{letter-spacing:-.045em}

/* ── 상담 ─────────────────────────────────────────────── */
.ch{border-top:1px solid var(--hair);gap:0;margin-top:clamp(40px,5vw,64px)}form.q{background:#fff;border:1px solid var(--hair);border-radius:var(--r)}
.sec-ivory form.q{background:#fff}
.fg input,.fg select,.fg textarea{background:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
.sec-ivory .fg input,.sec-ivory .fg select,.sec-ivory .fg textarea{background:#fff}.agree{background:var(--tint)}
.sec-ivory .agree{background:var(--tint)}
.faq{gap:0;border-top:1px solid var(--hair);margin-top:clamp(40px,5vw,64px)}
.faq-i{background:#fff;border-radius:0;border-bottom:1px solid var(--hair)}
.sec-ivory .faq-i{background:#fff}
.faq-i.on{background:#fff}
.faq-q{padding:28px 4px;font-size:17.5px}
.faq-a p{padding:0 4px 28px}

/* ── 푸터 ─────────────────────────────────────────────── */
.ftr{background:#fff;color:var(--ink-3);border-top:1px solid var(--hair)}
.ftr img{opacity:1;filter:none}
.ftr-top{border-bottom:0;padding-bottom:clamp(34px,4vw,50px)}
.ftr-nav b{color:var(--navy)}
.ftr-nav button,.ftr-nav a{color:var(--ink-3)}
.ftr-nav button:hover,.ftr-nav a:hover{color:var(--gold-dk)}
.ftr-bot{border-top:1px solid var(--hair);box-shadow:none;color:var(--ink-4)}
.ftr-l p b{color:var(--navy)!important}

/* ── 하단 고정 CTA ────────────────────────────────────── */

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:1080px){  .fig{padding-top:clamp(24px,3vw,36px)}
  .fig:nth-child(odd){padding-left:0;border-left:0}
  .fig:nth-child(n+3){border-top:1px solid var(--hair);margin-top:8px}
}
@media (max-width:820px){
  .two{grid-template-columns:1fr;gap:26px}
  .two-l{position:static}
  .two-r{max-width:none}
  .li{grid-template-columns:40px 1fr;gap:12px 16px}
  .li p{grid-column:2}  .fig{padding-left:0!important;border-left:0!important}
  .fig+.fig{border-top:1px solid var(--hair);margin-top:0}
  .ch{grid-template-columns:1fr}}

/* ============================================================
   애니메이션
   ============================================================ */

/* 히어로 — 단어가 아래에서 밀려 올라온다 */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.hero h1 .w>i{
  display:inline-block;font-style:normal;
  transition:transform .96s cubic-bezier(.19,.86,.32,1);transition-delay:var(--wd,0s);
}
.anim .hero h1 .w>i{transform:translateY(108%)}
.hero.go h1 .w>i{transform:none!important}
.anim .hero .hero-sub,.anim .hero .hero-two{
  opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}
.hero .hero-sub{transition-delay:.42s}
.hero .hero-two{transition-delay:.56s}
.hero.go .hero-sub,.hero.go .hero-two{opacity:1;transform:none}
.anim .hero::after{opacity:0;transform:scale(1.12);transition:opacity 1.5s ease,transform 2.4s cubic-bezier(.22,.61,.36,1)}
.hero.go::after{opacity:1;transform:none}

/* 리스트 — 스크롤 위치에 가까운 항목만 선명해진다 (토스 Culture) */
.list .li{opacity:var(--f,1);will-change:opacity}
.list .li>*{transition:none}

/* hairline 이 왼쪽에서 그어진다 */
.li{border-top:0;position:relative}
.li::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair);
  transform-origin:left;
  transition:transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}.anim .li::before{transform:scaleX(0)}
.anim .li.drawn::before{transform:none}
.li:first-child::before{display:none}

/* 숫자 — 카운트업 */
.fig b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .hero h1 .w>i{transform:none}
  .hero .hero-sub,.hero .hero-two{opacity:1;transform:none}
  .hero::after{opacity:1;transform:none}
  .list .li{opacity:1!important}
  .anim .li::before{transform:none}
}

/* 헤더 CTA 를 뺐다. 상담 입구는 '상담 안내' 탭 하나로 모은다.
   모바일은 하단 고정 바가 상시 전환 경로를 맡는다. */
.hdr-in{gap:28px}
.nav{margin-left:auto}