/* =========================================================
   세움로직 — 메인 인트로 모션
   style.css 의 토큰을 그대로 쓰고, 클래스는 .si- 로 격리한다.
   스크롤은 장면을 넘기는 역할만 하고, 전환은 CSS 가 재생한다.
   JS 가 없거나 동작 줄이기 설정이면 평범한 문단으로 읽힌다.
   ========================================================= */

:root{ --si-seg:56vh; --si-span:380vh; }
@supports (height:100svh){ :root{ --si-seg:56svh; --si-span:380svh; } }

.si{position:relative}
html.si-skip .si{display:none}

/* ---------- 문서 모드 (JS 없음 / 동작 줄이기 / 낮은 화면) ---------- */
.si-bg{display:none}
.si-stage{padding:132px 0 12px}
.si-scene{padding:46px 0}
.si-scene + .si-scene{border-top:1px solid var(--line-soft)}
.si-title{
  font-weight:760;letter-spacing:-.03em;line-height:1.14;
  font-size:clamp(36px,5.6vw,64px);margin:20px 0 0;text-wrap:balance;
}
.si-line{display:block}
.si-mark{color:var(--green)}
.si-dim{color:var(--muted)}
.si-sub{margin-top:20px;font-size:clamp(16px,1.5vw,19px);color:var(--ink-soft);line-height:1.72;max-width:34em}
.si-seq{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:28px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;color:var(--muted);
}
.si-seq i{display:block;width:36px;height:1px;background:var(--line);transform-origin:left center}
.si-end{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-soft);max-width:34em}
.si-end b{
  display:block;font-family:var(--font-mono);font-weight:600;
  font-size:clamp(17px,2vw,21px);letter-spacing:.24em;color:var(--green-ink);
}
.si-end span{
  display:block;margin-top:9px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
}
.si-rail{display:none}

/* ---------- 모션 모드 ---------- */
html.si-on .si{height:var(--si-span)}
html.si-on .si-stage{
  position:sticky;top:0;height:100vh;height:100svh;padding:0;overflow:hidden;
  color:var(--ink);transition:color .6s ease;
}
html.si-on .si-stage.t-navy{color:#e9eff9}
html.si-on .si-stage.t-ink{color:#edeff3}

/* 배경은 한 겹으로 두고 색만 건너간다. 장면끼리 덮지 않으니 글자가 겹칠 일이 없다 */
html.si-on .si-bg{
  display:block;position:absolute;inset:0;background:var(--paper);
  transition:background .66s cubic-bezier(.33,0,.2,1);
}
html.si-on .si-stage.t-navy .si-bg{background:var(--green-ink)}
html.si-on .si-stage.t-ink .si-bg{background:var(--ink)}

html.si-on .si-scene{
  position:absolute;inset:0;display:flex;align-items:center;border:0;
  padding:64px 0 104px;visibility:hidden;
  transition:visibility 0s .34s;
}
html.si-on .si-scene.is-on{visibility:visible;transition:visibility 0s}
html.si-on .si-scene > .container{width:100%}

/* 들어오는 요소는 늦게 천천히, 나가는 요소는 먼저 빠르게.
   두 장면의 글자가 같이 보이는 시간을 없애려고 시간차를 둔 것이다. */
html.si-on .si-line{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
html.si-on .si-line > span{
  display:block;transform:translateY(102%);opacity:0;
  transition:transform .3s cubic-bezier(.4,0,.85,.4), opacity .22s ease;
}
html.si-on .si-scene.is-on .si-line > span{
  transform:none;opacity:1;
  transition:transform .78s cubic-bezier(.19,.72,.26,1) .14s, opacity .46s ease .14s;
}
html.si-on .si-scene.is-on .si-line:nth-of-type(2) > span{
  transition-delay:.25s;
}

html.si-on .eyebrow{opacity:0;transform:translateY(9px);transition:opacity .24s ease,transform .3s ease}
html.si-on .si-scene.is-on .eyebrow{opacity:1;transform:none;transition:opacity .5s ease .06s,transform .6s cubic-bezier(.19,.72,.26,1) .06s}

html.si-on .si-sub{opacity:0;transform:translateY(13px);transition:opacity .24s ease,transform .3s ease}
html.si-on .si-scene.is-on .si-sub{opacity:1;transform:none;transition:opacity .6s ease .42s,transform .7s cubic-bezier(.19,.72,.26,1) .42s}

html.si-on .si-seq > span{opacity:0;transform:translateX(12px);transition:opacity .2s ease,transform .26s ease}
html.si-on .si-seq i{transform:scaleX(0);transition:transform .26s ease}
html.si-on .si-scene.is-on .si-seq > span{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.19,.72,.26,1)}
html.si-on .si-scene.is-on .si-seq i{transform:scaleX(1);transition:transform .55s cubic-bezier(.19,.72,.26,1)}
html.si-on .si-scene.is-on .si-seq > span:nth-of-type(1){transition-delay:.56s}
html.si-on .si-scene.is-on .si-seq i:nth-of-type(1){transition-delay:.66s}
html.si-on .si-scene.is-on .si-seq > span:nth-of-type(2){transition-delay:.74s}
html.si-on .si-scene.is-on .si-seq i:nth-of-type(2){transition-delay:.84s}
html.si-on .si-scene.is-on .si-seq > span:nth-of-type(3){transition-delay:.92s}

html.si-on .si-end{opacity:0;transform:translateY(12px);transition:opacity .22s ease,transform .28s ease}
html.si-on .si-scene.is-on .si-end{opacity:1;transform:none;transition:opacity .65s ease .68s,transform .75s cubic-bezier(.19,.72,.26,1) .68s}

/* 마지막 장면: 상호만 남기고 끝낸다 */
.si-kicker{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.si-wordmark{
  margin-top:22px;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(46px,9.4vw,124px);color:var(--ink);
}
.si-tag{margin-top:26px;font-size:clamp(15px,1.4vw,18px);color:var(--ink-soft)}
/* 엔딩은 검은 화면에 흰 글씨. 여기서 더 내리면 배경이 메인 색까지 밝아진다
   (그 사이 색은 intro.js 가 스크롤 위치로 직접 넣는다) */
html.si-on .si-stage.t-black{color:#fff}
html.si-on .si-stage.t-black .si-bg{background:#08090c}
html.si-fade .si-bg{transition:none}
html.si-on .si-fin .si-kicker{color:rgba(255,255,255,.5);transition:color .35s ease}
html.si-on .si-fin .si-wordmark{color:#fff;transition:color .35s ease}
html.si-on .si-fin .si-tag{color:rgba(255,255,255,.7);transition:color .35s ease}
html.si-on .si-stage.t-black .si-index li{color:#8b98ad}
html.si-on .si-stage.t-black .si-index li.on{color:#fff}
html.si-on .si-stage.t-black .si-bar{background:rgba(255,255,255,.16)}
html.si-on .si-stage.t-black .si-bar span{background:#8fb3ee}
html.si-on .si-stage.t-black .si-cue{color:#8b98ad}

/* 배경이 메인 색에 가까워지면 글자를 되돌린다 */
html.si-on.si-light .si-fin .si-kicker{color:var(--green)}
html.si-on.si-light .si-fin .si-wordmark{color:var(--ink)}
html.si-on.si-light .si-fin .si-tag{color:var(--ink-soft)}
html.si-on.si-light .si-stage.t-black .si-index li{color:var(--muted)}
html.si-on.si-light .si-stage.t-black .si-index li.on{color:var(--green)}
html.si-on.si-light .si-stage.t-black .si-bar{background:var(--line)}
html.si-on.si-light .si-stage.t-black .si-bar span{background:var(--green-2)}
html.si-on .si-wordmark .si-line{padding-bottom:.06em;margin-bottom:-.06em}

html.si-on .si-kicker{opacity:0;transform:translateY(9px);transition:opacity .24s ease,transform .3s ease}
html.si-on .si-scene.is-on .si-kicker{opacity:1;transform:none;transition:opacity .5s ease .06s,transform .6s cubic-bezier(.19,.72,.26,1) .06s}
html.si-on .si-tag{opacity:0;transform:translateY(13px);transition:opacity .24s ease,transform .3s ease}
html.si-on .si-scene.is-on .si-tag{opacity:1;transform:none;transition:opacity .6s ease .5s,transform .7s cubic-bezier(.19,.72,.26,1) .5s}

/* 다크 장면의 색 보정 */
html.si-on .si-stage.t-navy .eyebrow,
html.si-on .si-stage.t-ink .eyebrow{color:#9bb6e2}
html.si-on .si-stage.t-navy .eyebrow::before,
html.si-on .si-stage.t-ink .eyebrow::before{background:#9bb6e2}
html.si-on .si-stage.t-navy .si-sub,
html.si-on .si-stage.t-ink .si-sub{color:#c2cee0}
html.si-on .si-stage.t-navy .si-dim,
html.si-on .si-stage.t-ink .si-dim{color:#7c8ca6}
html.si-on .si-stage.t-navy .si-mark{color:#8fb3ee}
html.si-on .si-stage.t-navy .si-seq,
html.si-on .si-stage.t-ink .si-seq{color:#9aa8bd}
html.si-on .si-stage.t-navy .si-seq i,
html.si-on .si-stage.t-ink .si-seq i{background:rgba(255,255,255,.28)}
html.si-on .si-stage.t-navy .si-end,
html.si-on .si-stage.t-ink .si-end{border-top-color:rgba(255,255,255,.16)}
html.si-on .si-stage.t-navy .si-end b,
html.si-on .si-stage.t-ink .si-end b{color:#e9eff9}
html.si-on .si-stage.t-navy .si-end span,
html.si-on .si-stage.t-ink .si-end span{color:#8b98ad}

/* 하단 레일 */
html.si-on .si-rail{
  display:block;position:absolute;left:0;right:0;bottom:0;z-index:3;
  pointer-events:none;
}
.si-rail-in{display:flex;align-items:center;gap:20px;padding-bottom:14px}
.si-index{
  display:flex;gap:18px;list-style:none;margin:0;padding:0;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
}
.si-index li{color:var(--muted);opacity:.5;transition:opacity .5s ease,color .5s ease}
.si-index li.on{opacity:1;color:var(--green)}
html.si-on .si-stage.t-navy .si-index li.on,
html.si-on .si-stage.t-ink .si-index li.on{color:#9bb6e2}
html.si-on .si-stage.t-navy .si-index li,
html.si-on .si-stage.t-ink .si-index li{color:#8b98ad}
.si-cue{
  margin-left:auto;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;transition:opacity .5s ease;
}
.si-cue::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.si-bar{height:1px;background:var(--line);position:relative;overflow:hidden}
html.si-on .si-stage.t-navy .si-bar,
html.si-on .si-stage.t-ink .si-bar{background:rgba(255,255,255,.16)}
.si-bar span{
  display:block;height:100%;background:var(--green-2);
  transform:scaleX(0);transform-origin:left center;
}
html.si-on .si-stage.t-navy .si-bar span,
html.si-on .si-stage.t-ink .si-bar span{background:#7ba0e6}

/* 인트로가 화면을 잡고 있는 동안의 사이트 공통 요소 */
html.si-live .site-header.scrolled{
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;
}
html.si-live .fm-top{display:none}
/* 팝업 배너는 인트로가 끝난 뒤에 띄운다. 첫 화면부터 뜨면 인트로를 통째로 덮는다 */
html.si-live .popup-layer{opacity:0;pointer-events:none}
html.si-on .popup-layer{transition:opacity .5s ease}
html.si-live .floatmenu{opacity:0;pointer-events:none}
html.si-on .floatmenu{transition:opacity .45s ease}
html.si-on:not(.si-live) .si-rail{opacity:0}
html.si-on .si-rail{transition:opacity .4s ease}
/* 인트로 중에는 로고만 남긴다. 메뉴는 구간이 끝나면 제자리로 돌아온다 */
html.si-live .site-header .nav,
html.si-live .site-header .header-cta,
html.si-live .site-header .nav-toggle{opacity:0;pointer-events:none}
html.si-on .site-header .nav,
html.si-on .site-header .header-cta,
html.si-on .site-header .nav-toggle{transition:opacity .45s ease}

/* 다크 장면에서 사이트 공통 헤더 반전 */
html.si-dark .site-header .logo-img{filter:brightness(0) invert(1);opacity:.95}
html.si-dark .site-header .nav a{color:#dbe4f2}
html.si-dark .site-header .nav a:hover{color:#fff}
html.si-dark .site-header .header-cta{
  background:transparent;border-color:rgba(255,255,255,.4);color:#eef2f9;
}
html.si-dark .site-header .header-cta:hover{background:rgba(255,255,255,.1);box-shadow:none}
html.si-dark .site-header .nav-toggle span{background:#e9eff9}
html.si-on .site-header .logo-img{transition:filter .6s ease,opacity .6s ease}

/* 폰 가로처럼 세로가 짧은 화면. 문단으로 떨어뜨리지 않고 크기만 줄여 모션을 유지한다 */
@media (max-height:560px) and (min-height:381px){
  :root{ --si-seg:78vh; --si-span:490vh; }
  @supports (height:100svh){ :root{ --si-seg:78svh; --si-span:490svh; } }
  html.si-on .si-scene{padding:44px 0 60px}
  html.si-on .si-title{font-size:clamp(24px,3.4vw,34px);margin-top:14px}
  html.si-on .si-sub{margin-top:12px;font-size:14.5px;line-height:1.6}
  html.si-on .si-seq{margin-top:16px;font-size:11.5px}
  html.si-on .si-seq i{width:26px}
  html.si-on .si-wordmark{font-size:clamp(34px,6.2vw,62px);margin-top:14px}
  html.si-on .si-tag{margin-top:14px;font-size:14px}
  html.si-on .si-kicker{font-size:10.5px}
  html.si-on .eyebrow{font-size:11px}
  .si-rail-in{padding-bottom:9px}
  .si-cue{display:none}
}

@media (max-width:760px){
  :root{ --si-seg:60vh; --si-span:400vh; }
  @supports (height:100svh){ :root{ --si-seg:60svh; --si-span:400svh; } }
  html.si-on .si-scene{padding:52px 0 92px}
  .si-sub{margin-top:16px}
  .si-index{gap:13px;font-size:11px}
  .si-cue{display:none}
}