/* 기업소개 — toss.im 의 '한 섹션 한 장면' 짜임을 지유 내용으로 (2026-10-06)
   기본(스크립트 없음·움직임 줄이기)은 모든 내용이 보이는 일반 배치. html.cx-on 일 때만 고정 장면·스크롤 연출을 켠다. */
:root{
  --cx-ink:var(--ink,#0f172a);
  --cx-ink2:color-mix(in srgb,var(--cx-ink) 62%,#fff);
  --cx-mute:color-mix(in srgb,var(--cx-ink) 22%,#fff);
  --cx-green:oklch(.462 .114 151.5);
  --cx-mint:#7cd6a8;
  --cx-line:color-mix(in srgb,var(--cx-ink) 9%,transparent);
  --cx-ease:cubic-bezier(.16,1,.3,1);
  --cx-spring:cubic-bezier(.34,1.56,.64,1);
  --cx-gut:clamp(20px,5vw,80px);
  --cx-h2:clamp(34px,4.2vw,64px);
}
.cx{color:var(--cx-ink);background:#fff;overflow-x:clip}
.cx *{box-sizing:border-box}
.cx-wrap{width:min(1280px,100% - var(--cx-gut) * 2);margin-inline:auto}
.cx-center{text-align:center}
.cx-section{padding-block:clamp(112px,14vw,200px)}
.cx h1,.cx h2,.cx h3{margin:0;font-weight:760;letter-spacing:-.035em;line-height:1.22;word-break:keep-all;text-wrap:balance}
.cx h2{font-size:var(--cx-h2)}
.cx p{margin:0}
.cx-eyebrow{display:inline-block;margin-bottom:20px!important;color:var(--cx-green);font-size:15px;font-weight:700;letter-spacing:.04em}
.cx-eyebrow--light{color:var(--cx-mint)}
.cx-sub,.cx-lead{color:var(--cx-ink2);font-size:clamp(17px,1.35vw,20px);line-height:1.7;word-break:keep-all}
.cx-lead{margin-top:28px!important}
.cx-arrow-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cx-green);font-weight:700;text-decoration:none}
.cx-arrow-link>span{transition:translate .3s var(--cx-ease)}
.cx-arrow-link:is(:hover,:focus-visible)>span{translate:4px 0}
.cx-orb{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;background:var(--c,var(--cx-green));color:#fff;font-size:14px;font-weight:800;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.35),0 6px 14px -6px color-mix(in srgb,var(--c,#000) 70%,transparent)}
.cx-orb--lg{width:56px;height:56px;font-size:22px}
.cx picture,.cx picture img{display:block;width:100%;height:100%}
.cx picture img{object-fit:cover}

/* 진행 눈금(토스 왼쪽 세로 눈금) */
.cx-rail{display:none}
@media (min-width:1100px){
  html.cx-on .cx-rail{position:fixed;left:22px;top:50%;translate:0 -50%;z-index:30;display:grid;gap:7px;mix-blend-mode:difference;pointer-events:none}
  html.cx-on .cx-rail span{display:block;width:2px;height:10px;border-radius:2px;background:#fff;opacity:.35;transition:height .4s var(--cx-ease),opacity .4s}
  html.cx-on .cx-rail span.is-on{height:26px;opacity:1}
}

/* ── 1·2. 첫 화면 ── */
.cx-hero{padding:16px 16px 0}
.cx-hero__card{position:relative;min-height:min(88vh,860px);border-radius:32px;overflow:hidden;background:#0b1220;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;gap:40px;padding:clamp(28px,6vw,96px)}
.cx-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgb(4 8 16/.25),rgb(4 8 16/.62))}
.cx-hero__title,.cx-hero__say{position:relative}
.cx-hero__title{text-align:center}
.cx-hero h1{font-size:clamp(44px,6.2vw,92px);line-height:1.14;color:#fff}
.cx-hero__say{display:grid;gap:18px;max-width:620px}
.cx-hero__say p{font-size:clamp(18px,1.6vw,24px);line-height:1.6;color:rgb(255 255 255/.86);word-break:keep-all}
.cx-hero__say strong{display:block;font-size:clamp(26px,2.6vw,40px);line-height:1.35;color:#fff;font-weight:760;letter-spacing:-.03em}
.cx-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
html.cx-on .cx-hero{height:300vh;padding:0}
html.cx-on .cx-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html.cx-on .cx-hero__card{position:absolute;min-height:0;padding:0;display:block;
  inset:var(--t,16px) var(--s,20px) var(--b,20px);border-radius:var(--r,32px);will-change:inset}
html.cx-on .cx-hero__video{scale:var(--vz,1);will-change:scale}
html.cx-on .cx-hero__shade{opacity:var(--sh,.7)}
html.cx-on .cx-hero__title{position:absolute;left:0;right:0;bottom:12%;opacity:var(--to,1);translate:0 var(--ty,0px)}
html.cx-on .cx-hero__say{position:absolute;left:clamp(28px,7vw,120px);top:50%;translate:0 -50%;max-width:min(620px,80vw)}
html.cx-on .cx-hero__line{opacity:var(--o,0);translate:0 var(--y,28px)}
html.cx-on .cx-hero__line:not(.is-in) a{pointer-events:none}

/* ── 3. 하는 일 ── */
.cx-work h2{max-width:15em;margin-inline:auto}
.cx-fill .cx-w{transition:color .25s linear}
html.cx-on .cx-fill .cx-w{color:var(--cx-mute)}
html.cx-on .cx-fill .cx-w.is-on{color:var(--cx-ink)}
html.cx-on .cx-fill .cx-w.is-key.is-on{color:var(--cx-green)}
.cx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:48px 0 36px;padding:0}
.cx-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 18px 8px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 8%,#fff);border:1px solid color-mix(in srgb,var(--c) 18%,transparent);
  color:var(--cx-ink);font-weight:700;font-size:15px;letter-spacing:.02em;text-decoration:none;
  transition:translate .35s var(--cx-ease),box-shadow .35s var(--cx-ease),background-color .25s}
.cx-chip__mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c);color:#fff;font-size:13px;font-weight:800}
.cx-chip:is(:hover,:focus-visible){translate:0 -3px;box-shadow:0 12px 24px -14px color-mix(in srgb,var(--c) 80%,transparent);background:color-mix(in srgb,var(--c) 12%,#fff)}
.cx-chip:active{scale:.97}

/* ── 4. 다섯 가지 감각 ── */
.cx-senses{background:#f6f7f8;padding-block:clamp(96px,12vw,160px)}
.cx-senses__grid{display:grid;gap:48px}
.cx-senses h2{font-size:var(--cx-h2)}
.cx-senses .cx-sub{margin-top:20px!important}
.cx-steps{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--cx-line)}
.cx-step{border-bottom:1px solid var(--cx-line)}
.cx-step__head{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:68px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cx-step__head:focus-visible{outline:2px solid var(--cx-green);outline-offset:4px;border-radius:8px}
.cx-step__name{font-size:19px;font-weight:780;letter-spacing:.01em;color:var(--c-text,var(--cx-ink))}
.cx-step__kind{margin-left:auto;color:var(--cx-ink2);font-size:15px}
.cx-step__body{padding:0 0 28px 46px}
.cx-step__body h3{font-size:clamp(22px,1.9vw,28px);line-height:1.35}
.cx-step__body p{margin-top:10px;color:var(--cx-ink2);font-size:17px;line-height:1.65}
.cx-step__body .cx-arrow-link{margin-top:8px;color:var(--c-text,var(--cx-green))}
.cx-step__photo{margin-top:18px;aspect-ratio:16/10;border-radius:20px;overflow:hidden}
.cx-senses__media{display:none}
@media (min-width:900px){
  .cx-senses__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
  .cx .cx-step__photo{display:none}
  .cx-senses__media{display:block;position:relative;aspect-ratio:4/5;max-height:76vh;width:100%;border-radius:32px;overflow:hidden;background:#dfe3e6;
    box-shadow:0 40px 80px -48px rgb(15 23 42/.45)}
  .cx-senses__shot{position:absolute;inset:0;opacity:0;scale:1.06;transition:opacity .7s var(--cx-ease),scale 1.2s var(--cx-ease)}
  .cx-senses__shot.is-on{opacity:1;scale:1}
  .cx-senses__shot .cx-orb{position:absolute;left:24px;bottom:24px;scale:.6;opacity:0;transition:scale .6s var(--cx-spring) .15s,opacity .3s .15s}
  .cx-senses__shot.is-on .cx-orb{scale:1;opacity:1}
  /* 고정 장면: 활성 단계만 펼침(0fr→1fr 로 부드럽게) */
  html.cx-on .cx-senses{height:calc(100vh + 5 * 62vh);padding:0}
  html.cx-on .cx-senses .cx-stick{display:grid;align-items:center;padding-top:40px}
  html.cx-on .cx-step__body{display:grid;grid-template-rows:0fr;padding-bottom:0;opacity:0;transition:grid-template-rows .55s var(--cx-ease),padding .55s var(--cx-ease),opacity .4s}
  html.cx-on .cx-step__in{min-height:0;overflow:hidden}
  html.cx-on .cx-step.is-on .cx-step__body{grid-template-rows:1fr;padding-bottom:26px;opacity:1}
  html.cx-on .cx-step .cx-orb{scale:.82;filter:saturate(.35);opacity:.7;transition:scale .4s var(--cx-spring),filter .3s,opacity .3s}
  html.cx-on .cx-step.is-on .cx-orb{scale:1;filter:none;opacity:1}
  html.cx-on .cx-step:not(.is-on) .cx-step__name{color:var(--cx-mute)}
  html.cx-on .cx-step:not(.is-on) .cx-step__kind{color:var(--cx-mute)}
  html.cx-on .cx-step__head:hover .cx-step__name{color:var(--c-text)}
}
@media (max-width:899px){html.cx-on .cx-senses .cx-stick{position:static;height:auto;overflow:visible}}
@media (min-width:900px) and (max-height:820px){
  html.cx-on .cx-senses h2{font-size:clamp(30px,3.4vw,46px)}
  html.cx-on .cx-steps{margin-top:24px}
  html.cx-on .cx-step__head{min-height:56px}
}

/* ── 5. 일하는 방식 ── */
.cx-ask{margin-top:28px!important;font-size:clamp(20px,1.8vw,28px);font-weight:650;color:var(--cx-ink2);letter-spacing:-.02em}
.cx-ask__chip{display:inline-block;padding:2px 12px;border-radius:12px;background:color-mix(in srgb,var(--cx-green) 10%,#fff);color:var(--cx-green);
  transition:background-color .5s var(--cx-ease),color .5s}
.cx-cards{list-style:none;display:grid;gap:14px;margin-top:clamp(56px,7vw,96px)!important;padding:0;counter-reset:n}
.cx-card{position:relative;display:grid;align-content:start;gap:10px;min-height:260px;padding:28px 24px;border-radius:28px;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--g) 16%,#fff),color-mix(in srgb,var(--g) 5%,#fff) 70%);border:1px solid color-mix(in srgb,var(--g) 14%,transparent)}
.cx-card:nth-child(1){--g:#1e6fb8}.cx-card:nth-child(2){--g:#1f9c86}.cx-card:nth-child(3){--g:#c98a1b}.cx-card:nth-child(4){--g:#c6472e}.cx-card:nth-child(5){--g:#6a4c93}
.cx-card__n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--g);font-weight:800;box-shadow:0 6px 16px -10px var(--g);margin-bottom:40px}
.cx-card strong{font-size:26px;letter-spacing:-.03em}
.cx-card span:last-child{color:var(--cx-ink2);font-size:16px;line-height:1.6;word-break:keep-all}
@media (min-width:900px){.cx-cards{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:899px){
  .cx-cards{grid-auto-flow:column;grid-auto-columns:min(74vw,300px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--cx-gut) 12px!important;width:100%!important;scrollbar-width:none}
  .cx-cards::-webkit-scrollbar{display:none}
  .cx-card{scroll-snap-align:start;min-height:220px}
}
html.cx-on .cx-card{opacity:0;translate:0 56px;scale:.96;transition:opacity .8s var(--cx-ease),translate 1.1s var(--cx-ease),scale 1.1s var(--cx-ease);transition-delay:calc(var(--k) * 90ms)}
html.cx-on .cx-cards.is-in .cx-card{opacity:1;translate:0 0;scale:1}

/* 낱말 등장(머리말·제목) */
html.cx-on .cx-words .cx-w{position:relative;top:.42em;opacity:0;filter:blur(7px);transition:top 1s var(--cx-ease),opacity .7s var(--cx-ease),filter .9s var(--cx-ease);transition-delay:calc(var(--i) * 45ms + 80ms)}
html.cx-on .cx-words.is-in .cx-w{top:0;opacity:1;filter:blur(0)}

/* ── 6. 약속 ── */
.cx-promise{padding:16px}
.cx-promise__side{display:none}
.cx-promise__pill{position:relative;min-height:min(86vh,820px);border-radius:32px;overflow:hidden;background:#05080e;color:#fff;display:grid;align-items:end}
.cx-promise__photo{position:absolute!important;inset:0}
.cx-promise__pill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(4 8 16/.78),rgb(4 8 16/.25) 70%),linear-gradient(0deg,rgb(4 8 16/.5),transparent 50%)}
.cx-promise__text{position:relative;z-index:1;display:grid;justify-items:start;gap:22px;padding:clamp(28px,6vw,96px);max-width:900px}
.cx-promise h2{color:#fff;font-size:clamp(32px,4vw,60px)}
.cx-promise__line{color:rgb(255 255 255/.8);font-size:clamp(17px,1.4vw,21px)}
.cx-promise__line b{color:var(--cx-mint)}
.cx-orbs{display:flex;gap:10px}
html.cx-on .cx-promise{height:260vh;padding:0}
html.cx-on .cx-promise .cx-stick{display:grid;place-items:center}
html.cx-on .cx-promise__pill{position:absolute;left:50%;top:50%;min-height:0;width:var(--pw,84px);height:var(--ph,200px);translate:-50% -50%;border-radius:var(--pr,42px);will-change:width,height}
html.cx-on .cx-promise__photo img{scale:var(--pz,1.35)}
html.cx-on .cx-promise__text{opacity:var(--ti,0);translate:0 var(--tyy,30px)}
html.cx-on .cx-promise__text a{pointer-events:var(--tp,none)}
html.cx-on .cx-promise__side{display:block;position:absolute;top:50%;translate:0 -50%;margin:0;font-size:clamp(28px,3.4vw,52px);font-weight:760;letter-spacing:-.035em;white-space:nowrap;opacity:var(--so,1)}
html.cx-on .cx-promise__side--l{right:calc(50% + var(--pw,84px) / 2 + clamp(16px,1.6vw,28px))}
html.cx-on .cx-promise__side--r{left:calc(50% + var(--pw,84px) / 2 + clamp(16px,1.6vw,28px))}
@media (max-width:767px){html.cx-on .cx-promise__side{font-size:22px}}

/* ── 7. 함께한 기업 ── */
.cx-tiles{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(48px,6vw,80px)!important;padding:0}
@media (min-width:640px){.cx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.cx-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cx-tile{display:grid;place-items:center;height:clamp(88px,9vw,124px);padding:18px 22px;border-radius:24px;background:#fff;border:1px solid var(--cx-line);
  box-shadow:0 1px 2px rgb(15 23 42/.03),0 18px 40px -32px rgb(15 23 42/.25);transition:translate .4s var(--cx-ease),box-shadow .4s var(--cx-ease)}
.cx-tile img{max-width:100%;max-height:42px;width:auto;height:auto;object-fit:contain}
.cx-tile:hover{translate:0 -3px;box-shadow:0 1px 2px rgb(15 23 42/.03),0 24px 48px -30px rgb(15 23 42/.35)}
.cx-partners{background:linear-gradient(#fff,#f6f7f8)}
html.cx-on .cx-tile{opacity:0;scale:.86;translate:0 24px;transition:opacity .7s var(--cx-ease),scale .9s var(--cx-spring),translate .9s var(--cx-ease),box-shadow .4s;transition-delay:var(--d,0ms)}
html.cx-on .cx-tiles.is-in .cx-tile{opacity:1;scale:1;translate:0 0}
html.cx-on .cx-tiles.is-in .cx-tile:hover{translate:0 -3px;transition-delay:0ms}

/* ── 8. 맺음 문장 ── */
.cx-close{padding:16px}
.cx-close .cx-stick{position:relative;min-height:min(86vh,820px);border-radius:32px;overflow:hidden;display:grid;align-items:center;background:#05080e}
.cx-close__photo{position:absolute!important;inset:0}
.cx-close__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgb(4 8 16/.35),rgb(4 8 16/.7))}
.cx-close__text{position:relative;display:grid;gap:.2em;padding:clamp(28px,7vw,120px);color:#fff;font-size:clamp(30px,4vw,60px);font-weight:760;letter-spacing:-.035em;line-height:1.3;word-break:keep-all}
.cx-close__line:first-child{font-size:.62em;font-weight:650;color:rgb(255 255 255/.82);margin-bottom:.4em}
html.cx-on .cx-close{height:240vh;padding:0}
html.cx-on .cx-close .cx-stick{position:sticky;min-height:0;border-radius:0}
html.cx-on .cx-close__photo img{scale:var(--cz,1.2)}
html.cx-on .cx-close__shade{opacity:var(--cs,.6)}
html.cx-on .cx-close__line{opacity:var(--o,0);translate:0 var(--y,30px);filter:blur(var(--bl,6px))}

/* ── 9. 기업정보 · 다음 ── */
.cx-facts__grid{display:grid;gap:48px}
@media (min-width:900px){.cx-facts__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.cx-facts__photo{margin-top:36px;aspect-ratio:4/3;border-radius:28px;overflow:hidden}
.cx-facts__list{margin:0;border-top:1px solid var(--cx-line)}
.cx-facts__list>div{display:grid;grid-template-columns:8.5em 1fr;align-items:baseline;gap:16px;padding:22px 0;border-bottom:1px solid var(--cx-line)}
.cx-facts__list dt{color:var(--cx-ink2);font-size:15px;font-weight:650}
.cx-facts__list dd{margin:0;font-size:18px;font-weight:650;word-break:keep-all}
.cx-facts__list a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--cx-ease)}
.cx-facts__list a:is(:hover,:focus-visible){background-size:100% 1px}
.cx-next{background:#0b1220;color:#fff}
.cx-next h2{color:#fff}
.cx-next__grid{display:grid;gap:48px}
@media (min-width:900px){.cx-next__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:end}}
.cx-next__lead{margin-top:24px!important;color:rgb(255 255 255/.72);font-size:clamp(17px,1.35vw,20px);line-height:1.7}
.cx-next__rows{list-style:none;margin:0;padding:0;border-top:1px solid rgb(255 255 255/.14)}
.cx-next__rows a{position:relative;display:grid;grid-template-columns:7.2em 1fr auto;align-items:center;gap:6px 18px;padding:26px 8px;border-bottom:1px solid rgb(255 255 255/.14);color:#fff;text-decoration:none;isolation:isolate}
.cx-next__rows a::before{content:"";position:absolute;inset:4px -12px;border-radius:16px;background:rgb(255 255 255/.06);opacity:0;z-index:-1;transition:opacity .25s}
.cx-next__rows a:is(:hover,:focus-visible)::before{opacity:1}
.cx-next__rows strong{font-size:22px;letter-spacing:-.02em}
.cx-next__rows span{color:rgb(255 255 255/.62);font-size:15px;word-break:keep-all}
.cx-next__rows i{font-style:normal;font-size:20px;transition:translate .3s var(--cx-ease)}
.cx-next__rows a:is(:hover,:focus-visible) i{translate:5px 0}
.cx-next__rows a:active{scale:.99}
@media (max-width:640px){.cx-next__rows a{grid-template-columns:1fr auto}.cx-next__rows span{grid-column:1;grid-row:2}.cx-next__rows i{grid-row:1/3;grid-column:2}}

@media (max-width:640px){
  .cx-hero__actions .button{flex:1 1 100%;justify-content:center}
  .cx-facts__list>div{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){.cx *{transition:none!important;animation:none!important}}