/* ============================================================
   TITAN SOLUTION — 시네마 랜딩
   스크롤 구동 풀스크린 여정 · 스틸 크로스페이드 (영상 슬롯 예비)
   ============================================================ */

:root{
  --void:#05090c;
  --ink:#f2f4f8;
  --ink-soft:rgba(242,244,248,.66);
  --ink-mute:rgba(242,244,248,.42);
  --accent:#4d8dff;
  /* 상담 CTA 공통 블루 — contact 페이지(style.css --primary)와 같은 값을 쓴다.
     흰 글자 위 4.86 / 어두운 배경 위 선 4.02 로 라이트·다크 양쪽에서 통하는 유일한 지점 */
  --cta:#2d6cdf;
  --cta-deep:#2559b8;   /* 채워진 상태의 호버 */
  --hairline:rgba(255,255,255,.14);
  --journey-progress:0;
  --shade-boost:0;
  --font:"Pretendard Variable",Pretendard,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
}

*{box-sizing:border-box}
html{background:var(--void)}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--font);overflow-x:hidden;word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
button,a{font:inherit;color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- 트랙 · 스테이지 ---------- */
/* 전환 1회당 약 96.7vh — 디자이너 데모 호흡 (4클립 × 96.7 + 100) */
.journey-track{position:relative;height:487vh}
.journey-shell{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:var(--void)}

.journey-stage{position:absolute;inset:0;z-index:-4}
.scene-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;will-change:opacity,transform;
}
/* 그레이딩은 영상에만 — 디자이너 데모는 포스터(스틸)를 원본 그대로 둔다.
   opacity는 JS가 매 프레임 구동하므로 CSS transition을 두지 않는다 */
.scene-film{filter:saturate(.96) contrast(1.03);will-change:opacity}

.journey-shade{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,7,10,.76) 0%,rgba(3,7,10,.44) 28%,rgba(3,7,10,.1) 48%,transparent 62%),
    linear-gradient(0deg,rgba(2,5,8,.18),transparent 24%);
}

/* [임시] 밝은 배경 씬 전용 보강 셰이드.
   씬04(대낮 아트리움)처럼 밝은 스틸 위에서 흰 텍스트와 톱바 대비를 지킨다.
   --shade-boost 는 landing.js 가 씬별 값(scenes[].shade)을 보간해 넣는다.
   배경 영상을 어두운 톤으로 재제작하면 이 블록과 scenes[].shade 를 함께 제거할 것 */
.journey-shade::after{
  content:"";position:absolute;inset:0;
  opacity:var(--shade-boost,0);
  background:
    linear-gradient(90deg,rgba(2,5,8,.78) 0%,rgba(2,5,8,.6) 34%,rgba(2,5,8,.32) 58%,transparent 80%),
    linear-gradient(180deg,rgba(2,5,8,.58) 0%,transparent 20%),
    linear-gradient(0deg,rgba(2,5,8,.34),transparent 26%);
}

/* ---------- 톱바 ---------- */
.journey-topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(22px,4.8vw,72px);
  border-bottom:1px solid var(--hairline);
}
.journey-brand{display:flex;align-items:center;gap:13px;letter-spacing:.18em;text-transform:uppercase;font-size:13px;font-weight:700}
.journey-brand small{font-weight:400;letter-spacing:.1em;color:var(--ink-mute);font-size:11px}
.brand-mark{
  width:14px;height:14px;flex:none;
  background:linear-gradient(135deg,#8fb6ff,#2f66d8);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
/* [임시] 밝은 씬에서만 .42 → .72 (측정상 .72 에서 AA 4.5 통과). 어두운 씬은 기존 위계 유지 */
.journey-meta{display:flex;gap:10px;align-items:center;color:rgba(242,244,248,calc(.42 + var(--shade-boost,0) * .30));font-size:11px;letter-spacing:.08em;white-space:nowrap}
/* 최상단 문의하기 — CTA 버튼과 같은 규칙(선 var(--cta) → 호버 시 같은 색으로 채움) */
.journey-meta a,.journey-meta-button{
  color:var(--ink);border:1px solid var(--cta);border-radius:999px;
  padding:8px 14px;letter-spacing:.02em;transition:border-color .2s,background .2s;
  background:transparent;
}
.journey-meta a:hover{background:var(--cta)}
.journey-meta-button{font:inherit;cursor:default}
.journey-meta-button:disabled{opacity:1}

/* ---------- 카피 레이어 ---------- */
.journey-copy-layer{position:absolute;inset:0;z-index:12;pointer-events:none}
.journey-copy{
  position:absolute;left:clamp(22px,7vw,106px);top:50%;
  width:min(600px,46vw);
  opacity:0;transform:translateY(calc(-50% + 24px));
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.75,.2,1);
}
.journey-copy.is-active{opacity:1;transform:translateY(-50%);pointer-events:auto}
.journey-kicker{
  display:flex;align-items:center;gap:13px;margin-bottom:22px;
  color:var(--ink-soft);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease .05s,transform .5s ease .05s;
}
.journey-copy.is-active .journey-kicker{opacity:1;transform:none}
.journey-kicker::before{
  content:"";width:0;height:1px;background:var(--accent);
  transition:width .7s cubic-bezier(.2,.75,.2,1) .25s;
}
.journey-copy.is-active .journey-kicker::before{width:34px}

/* 타이틀 단어 스태거 리빌 */
.journey-title .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.journey-title .w i{
  display:inline-block;font-style:normal;transform:translateY(112%);
  transition:transform .8s cubic-bezier(.2,.75,.2,1) calc(.12s + var(--i,0)*.07s);
}
.journey-copy.is-active .journey-title .w i{transform:none}

/* 고스트 넘버럴 */
.journey-num{
  position:absolute;left:-14px;top:-120px;z-index:-1;pointer-events:none;
  font-size:clamp(140px,22vw,280px);font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);
  letter-spacing:-.04em;
  opacity:0;transform:translateY(46px) scale(.94);
  transition:opacity .8s ease .1s,transform .9s cubic-bezier(.2,.75,.2,1) .1s;
}
.journey-copy.is-active .journey-num{opacity:1;transform:none}
.journey-title{
  max-width:13ch;margin:0;
  font-size:clamp(38px,5.6vw,82px);font-weight:300;line-height:1.12;
  letter-spacing:-.02em;text-wrap:balance;
  text-shadow:0 4px 35px rgba(2,5,10,.45);
}
.journey-title strong{font-weight:600}
.vision-title{font-weight:150}
.tech-title{font-weight:150}
.solution-title{font-weight:150}
.network-title{font-weight:150}
.enter-title{font-weight:150}
.journey-body{
  /* [임시] 밝은 씬에서만 .66 → .92 (측정상 .91 에서 AA 4.5 통과, 여유 두어 .92) */
  max-width:44ch;margin:24px 0 0;color:rgba(242,244,248,calc(.66 + var(--shade-boost,0) * .26));
  font-size:clamp(15px,1.15vw,18px);line-height:1.65;
  text-shadow:0 2px 18px rgba(2,5,10,.55);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease .45s,transform .6s cubic-bezier(.2,.75,.2,1) .45s;
}
.journey-copy.is-active .journey-body{opacity:1;transform:none}
.journey-note{
  display:inline-flex;margin-top:26px;padding:8px 15px;
  border:1px solid var(--cta);border-radius:999px;
  /* [임시] 11px 라 글자색만으로는 불투명도 1.0 에서도 AA 미달(4.14) —
     밝은 씬에서는 칩 배경을 함께 깔아야 통과한다 */
  color:#d9e6ff;
  background:rgba(45,108,223,.16);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(12px);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease .6s,transform .5s ease .6s;
}
.journey-copy.is-active .journey-note{opacity:1;transform:none}
.journey-ctas{opacity:0;transform:translateY(12px);transition:opacity .5s ease .6s,transform .5s ease .6s}
.journey-copy.is-active .journey-ctas{opacity:1;transform:none}
.journey-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn-solid{
  pointer-events:auto;display:inline-flex;align-items:center;
  padding:14px 30px;border-radius:999px;cursor:pointer;
  /* 같은 성격의 CTA 라 .btn-line 과 완전히 같은 형태로 둔다(굵기까지 600).
     두 클래스가 시각적으로 동일하므로, 나중에 하나로 합쳐도 된다 */
  border:1px solid var(--cta);background:transparent;
  color:var(--ink);font-weight:600;font-size:15px;letter-spacing:.02em;
  transition:border-color .2s,background .2s,transform .15s;
}
.btn-solid:hover{background:var(--cta)}
.btn-solid:active{transform:scale(.97)}
.btn-line{
  pointer-events:auto;display:inline-flex;align-items:center;
  padding:14px 30px;border-radius:999px;cursor:pointer;
  /* 평상시 테두리도 호버 채움색과 같은 블루 — 선이 그대로 면으로 채워지는 전환이 된다 */
  border:1px solid var(--cta);background:transparent;
  color:var(--ink);font-weight:600;font-size:15px;
  transition:border-color .2s,background .2s,transform .15s;
}
/* 아웃라인 버튼 호버 — 상담 FAB(.fab-contact)·솔리드 버튼과 같은 블루 계열로 채운다.
   페이지의 .btn-line 은 전부 상담/데모 CTA 라 한 규칙으로 묶어 통일한다.
   accent(#4d8dff) 대신 그 호버색(var(--cta))을 쓴 이유는 흰 글자 대비 — 2.90 → 3.90.
   (AA 4.5 에는 못 미친다. 근본 해결은 --accent 를 어둡게 하는 것이라 브랜드 색 결정 사안) */
.btn-line:hover{border-color:var(--cta);background:var(--cta)}
.btn-line:active{transform:scale(.97)}

/* ---------- 씬별 우측 콘텐츠 ---------- */
.journey-side-layer{position:absolute;inset:0;z-index:11;pointer-events:none}
.journey-side{
  --roff:clamp(88px,10vw,168px);
  position:absolute;right:var(--roff);top:50%;
  width:min(340px,26vw);
  transform:translateY(calc(-50% + 18px));opacity:0;visibility:hidden;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.2,1),visibility 0s .5s;
}
.journey-side.is-active{opacity:1;visibility:visible;transform:translateY(-50%);transition-delay:0s;pointer-events:auto}
.side-tag{
  display:block;margin-bottom:14px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);
}
/* 공통 스태거 진입 */
.journey-side .sv{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease calc(.15s + var(--i,0)*.1s),
             transform .55s cubic-bezier(.2,.75,.2,1) calc(.15s + var(--i,0)*.1s);
}
.journey-side.is-active .sv{opacity:1;transform:none}

/* 01 VISION — 부유 윈도우 + 오각형 젬 */
.side-vision{width:min(820px,57vw)}
.win-field{position:relative;height:672px}
/* 창 뒤 배경이 rgb(4,8,8) ~ rgb(66,75,74) 로 편차가 커서, 채움색 하나로는
   모든 창을 배경에서 떼어낼 수 없다. 그래서 두 가지를 같이 쓴다:
   ① 짙은 푸른 채움 — 배경(중성·따뜻한 톤)과 색조로 분리하고 브랜드 액센트와 맞춘다
   ② 밝은 안쪽선 + 어두운 바깥 링 — 밝은 배경에서는 어두운 링이, 어두운 배경에서는
      밝은 선이 윤곽을 잡아준다. 배경 밝기와 무관하게 테두리가 살아남는다 */
.win{
  position:absolute;opacity:0;border-radius:12px;overflow:hidden;
  background:rgba(16,28,52,.82);border:1px solid rgba(125,165,235,.45);
  box-shadow:0 0 0 1px rgba(0,0,0,.45),
             0 18px 50px rgba(0,0,0,.6);
  will-change:transform,opacity;
}
.win-text{backdrop-filter:blur(10px)}
/* 창은 진입만 하고 부유(둥둥)는 걸지 않는다.
   영상 창에서 <video> 가 하드웨어 오버레이로 따로 합성되면서 부모 창의 transform 보다
   한 프레임(실측 약 20ms) 늦게 그려졌고, "창이 먼저 가고 영상이 따라오는" 지연이 보였다.
   CSS 로는 완전히 통제되지 않는 브라우저·드라이버 레벨 동작이라 부유 자체를 뺐다.
   영상에 카메라 푸시인이 들어 있고 젬(.gem)이 계속 떠다녀서 화면이 정적이 되지는 않는다.
   winfloat 키프레임과 창별 --fd/--fy/--fxf 값은 되돌릴 때를 위해 남겨둔다 */
.journey-side.is-active .win{
  animation:winin .64s cubic-bezier(.2,.75,.2,1) both calc(var(--i,0)*.1s);
}
@keyframes winin{from{opacity:0;transform:translateX(var(--fx,0)) translateY(10px)}to{opacity:1;transform:none}}
/* 0에서 시작해 0으로 돌아오는 연속 곡선 — 진입 종료 지점과 이어져 틱 없음.
   개별 움직임의 핵심은 위상이 아니라 --fd(주기)다: 주기가 서로 다르면 영구히 어긋난다.

   타원 궤도를 정현파로 8등분 샘플링했다. X는 sin, Y는 (1-cos)/2 이라
   두 축의 위상이 90도 어긋나면서 상하 왕복이 아닌 완만한 원운동이 된다.
   타이밍은 반드시 linear — ease-in-out 은 키프레임 쌍마다 따로 걸려서
   한 주기에 여러 번 속도가 0으로 떨어지고, 멈칫거리는 움직임이 된다 */
@keyframes winfloat{
  0%,100%{transform:translate3d(0,0,0)}
  12.5%{transform:translate3d(calc(var(--fxf,0px)*.707),calc(var(--fy,-12px)*.146),0)}
  25%  {transform:translate3d(var(--fxf,0px),calc(var(--fy,-12px)*.5),0)}
  37.5%{transform:translate3d(calc(var(--fxf,0px)*.707),calc(var(--fy,-12px)*.854),0)}
  50%  {transform:translate3d(0,var(--fy,-12px),0)}
  62.5%{transform:translate3d(calc(var(--fxf,0px)*-.707),calc(var(--fy,-12px)*.854),0)}
  75%  {transform:translate3d(calc(var(--fxf,0px)*-1),calc(var(--fy,-12px)*.5),0)}
  87.5%{transform:translate3d(calc(var(--fxf,0px)*-.707),calc(var(--fy,-12px)*.146),0)}
}
.win-bar{
  display:flex;align-items:center;gap:6px;padding:9px 13px;
  background:rgba(120,160,225,.11);border-bottom:1px solid rgba(125,165,235,.18);
}
.win-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.win-bar i:nth-child(1){background:rgba(255,120,110,.75)}
.win-bar i:nth-child(2){background:rgba(255,200,90,.75)}
.win-bar i:nth-child(3){background:rgba(110,220,140,.75)}
.win-bar em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.win-text p{margin:0;padding:15px 18px 17px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.win-text p b{display:block;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.04em;margin-bottom:5px}
/* 텍스트 창 — CMD/도스 콘솔 컨셉. 영상 창(푸른 글래스)과 성격을 갈라놓는다.
   영어 제목은 landing.js 가 한 글자씩 찍고, 끝나면 "_" 커서만 계속 깜빡인다 */
.win-text{background:rgba(5,7,10,.95);border-color:rgba(140,190,255,.24);backdrop-filter:blur(6px)}
.win-text .win-bar{background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.08)}
.win-text p b{
  font-family:Consolas,"D2Coding",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600;letter-spacing:.06em;color:#e6eef8;
}
.caret{font-style:normal;color:var(--accent);animation:caretblink 1.05s steps(1,end) infinite}
@keyframes caretblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.win-img video{display:block;width:100%;aspect-ratio:21/9;object-fit:cover}
/* --fd(주기) · --fy(세로 진폭) · --fxf(가로 드리프트)를 창마다 다르게 둔다.
   주기를 서로 나눠떨어지지 않는 값으로 잡아야 오래 봐도 다시 겹치지 않는다 */
.wv1{left:0;top:0;width:280px;--fx:-30px;--i:0;--fy:-10px;--fd:7.3s;--fxf:4px}
.wv2{right:0;top:16px;width:400px;--fx:30px;--i:1;--fy:-5px;--fd:9.6s;--fxf:-2px}
.wv3{left:174px;top:232px;width:300px;--fx:-30px;--i:2;--fy:-12px;--fd:8.1s;--fxf:-3px;z-index:3}
.wv4{right:96px;top:258px;width:340px;--fx:30px;--i:3;--fy:-3px;--fd:11.2s;--fxf:2px;z-index:2}
.wv5{left:0;top:478px;width:280px;--fx:-30px;--i:4;--fy:-13px;--fd:6.8s;--fxf:5px}
.wv6{right:0;top:446px;width:362px;--fx:30px;--i:5;--fy:-4px;--fd:10.4s;--fxf:-1.5px;z-index:1}
.wv7{left:176px;top:502px;width:308px;--fx:-30px;--i:6;--fy:-3.5px;--fd:8.9s;--fxf:1px;z-index:2}
/* 디자이너 vision 소재는 약 16:9(1.76) — 21:9 창에서 상하 24.7%가 잘린다.
   75%가 남으므로 기본 중앙(50%)으로 두고, 주제가 위쪽에 몰린 것만 끌어올린다.
   21:9(1470x630 등)로 다시 뽑으면 잘림이 0이 되고 이 블록은 삭제 */
.wv2 video{object-position:50% 50%}  /* t1 대시보드 — 화면 전체가 주제, 중앙 유지 */
.wv4 video{object-position:50% 50%}  /* t3 육각 웨이브 — 파형이 중앙 */
.wv6 video{object-position:50% 38%}  /* t4 관제 데스크 — 인물 얼굴이 위쪽 */
.wv7 video{object-position:50% 36%}  /* t2 회의실 — 인물 머리가 위쪽 */

/* 와이드 화면에서는 카피와 창 무리 사이 중앙 여백으로 이동 */
@media (min-width:1800px){
  .wv7{left:-200px;top:276px;width:302px}
}
/* 입체 젬 — 글로우 헤일로 + 그라디언트 육각 바디 + 어두운 코어 */
.gem{
  position:absolute;width:var(--s,30px);height:var(--s,30px);display:block;
  animation:winfloat var(--fd,6.5s) ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:transform;
}
.gem::before{
  content:"";position:absolute;inset:-85%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,var(--c1) 0%,transparent 62%);
  opacity:.5;filter:blur(5px);
}
.gem::after{
  content:"";position:absolute;inset:0;z-index:1;
  clip-path:polygon(50% 0,94% 26%,94% 74%,50% 100%,6% 74%,6% 26%);
  background:linear-gradient(155deg,var(--c1) 8%,var(--c2) 78%);
}
.gem i{
  position:absolute;inset:29%;z-index:2;
  clip-path:polygon(50% 0,94% 26%,94% 74%,50% 100%,6% 74%,6% 26%);
  background:linear-gradient(155deg,rgba(4,7,13,.92),rgba(10,16,26,.78));
  transform:translateY(3%);
}
.gm1{--c1:#67e8f9;--c2:#0e7490;--s:36px;left:38%;top:5%;--d:-1.2s;--fy:-14px;--fd:7.7s;--fxf:5px}
.gm2{--c1:#d8b4fe;--c2:#7e22ce;--s:24px;left:9%;top:34%;--d:-3.4s;--fy:-10px;--fd:5.9s;--fxf:-4px}
.gm3{--c1:#bef264;--c2:#4d7c0f;--s:28px;left:57%;top:56%;--d:-2.1s;--fy:-12px;--fd:9.1s;--fxf:3px}
.gm4{--c1:#93c5fd;--c2:#1d4ed8;--s:30px;right:2%;top:40%;--d:-4.6s;--fy:-15px;--fd:6.4s;--fxf:-6px}
.gm5{--c1:#f0abfc;--c2:#a21caf;--s:26px;left:34%;bottom:4%;--d:-.8s;--fy:-11px;--fd:8.3s;--fxf:4px}

/* 02 TECHNOLOGY — 자체 개발 스포츠북 운영 콘솔 */
.side-tech{width:calc(50vw - var(--roff))}
.tech-film{position:relative;z-index:2;border-radius:18px;overflow:hidden;box-shadow:0 28px 30px rgba(0,0,0,.45);will-change:transform;transform-origin:50% 45%}
.tech-film video{display:block;width:100%;aspect-ratio:21/9;object-fit:cover}
.tech-console{position:relative;z-index:1;margin-top:18px}
.tech-console-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tech-module{min-height:70px;padding:12px;border:1px solid rgba(131,174,255,.35);border-radius:10px;background:rgba(5,11,23,.88);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.tech-module em{display:block;margin-bottom:8px;font-style:normal;font-size:9px;font-weight:600;letter-spacing:.1em;color:#7eacff;text-transform:uppercase}
.tech-module b{display:block;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:-.02em;color:#edf4ff}

/* 03 SOLUTIONS — 모이는 박스 (3×2, 대형) */
/* --roff 를 따로 두지 않는다 — 혼자 72px 이라 우측 레일의 "SOLUTIONS" 라벨과 겹쳤다.
   기본값(clamp(88px,10vw,168px))을 그대로 써서 다른 씬과 우측 정렬을 맞춘다 */
.side-gather{width:min(760px,50vw)}
.gather-field{position:relative;height:440px;--g:0;--product-w:40%;--gbox-gap:12px}
.gbox{
  position:absolute;width:calc(50% - 6px);
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  padding:22px;border-radius:16px;
  /* 전환 영상이 크림색(218,199,182)까지 밝아지는 구간이 있어, 흰색 유리로는
     카드가 배경에 묻힌다(대비 1.03). 베이스를 어두운 유리로 뒤집어 배경 밝기와
     무관하게 카드면이 서게 한다 — 유리·블러·컬러 액센트는 그대로 유지 */
  background:rgba(9,14,24,.62);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(9px);
  opacity:calc(.4 + .6*var(--g));
  transform:translate(calc(var(--dx)*(1 - var(--g))), calc(var(--dy)*(1 - var(--g))))
            rotate(calc(var(--rr,0deg)*(1 - var(--g))));
  will-change:transform,opacity;overflow:hidden;
}
.gbox::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gbox-color);opacity:.92}
.gbox b{font-size:17px;font-weight:600;letter-spacing:-.025em}
.gbox span{font-size:13.5px;color:var(--ink-mute)}
/* 컬러 틴트를 어두운 베이스 "위에" 겹친다(배경 두 겹). 틴트만 쓰면 밝은 배경에서
   그대로 비쳐 묻히므로, 색은 살리되 바닥은 항상 어둡게 깔아둔다 */
.gbox-unified{--gbox-color:#78a8ff;--gbox-tint:rgba(77,141,255,.22);--gbox-line:rgba(120,168,255,.48);background:linear-gradient(145deg,var(--gbox-tint),transparent 58%),rgba(9,14,24,.7);border-color:var(--gbox-line)}
.gbox-content{--gbox-color:#55d8b8;--gbox-tint:rgba(52,202,165,.21);--gbox-line:rgba(85,216,184,.46);background:linear-gradient(145deg,var(--gbox-tint),transparent 58%),rgba(9,14,24,.7);border-color:var(--gbox-line)}
.gbox-feature{background:linear-gradient(145deg,var(--gbox-tint),transparent 64%),rgba(9,14,24,.78);box-shadow:0 22px 60px rgba(0,0,0,.42)}
.gbox .gbox-product{font-size:10px;font-weight:700;line-height:1;letter-spacing:.16em;color:var(--gbox-color)}
.gbox-product-card{justify-content:flex-start;gap:9px;padding:22px}
.gbox-product-card b{font-size:clamp(22px,1.8vw,27px)}
.gbox-product-card .gbox-desc{font-size:16px;font-weight:600}
.gbox-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin:4px 0 0;padding:10px 0 0;border-top:1px solid var(--gbox-line);list-style:none}
.gbox-points li{font-size:13px;line-height:1.4;color:var(--ink-soft)}
.gbox-points li::before{content:"·";margin-right:4px;color:var(--gbox-color)}
.gbox .gbox-icon{display:grid;place-items:center;width:44px;height:44px;margin:1px 0 2px;border:1px solid var(--gbox-line);border-radius:12px;background:var(--gbox-tint);color:var(--gbox-color)}
.gbox .gbox-icon svg{width:25px;height:25px}
/* 아이콘만 떠 있게 — 카드는 고정이고 아이콘 6개가 서로 다른 주기로 어긋난다.
   winfloat(정현파 8등분 · linear)를 재사용해 속도가 끊기지 않는다.
   --fxf 를 두지 않아 가로 성분은 0(기본값)이 되고 위아래로만 움직인다.
   여긴 SVG 라서 씬01 영상 창에서 생겼던 합성 지연 문제가 없다 */
.gbox-icon{--fy:-5px;animation:winfloat var(--fd,7s) linear infinite}
.gb1 .gbox-icon{--fd:6.4s}
.gb2 .gbox-icon{--fd:7.7s}
.gb3 .gbox-icon{--fd:9.1s}
.gb4 .gbox-icon{--fd:6.9s}
.gb5 .gbox-icon{--fd:8.3s}
.gb6 .gbox-icon{--fd:7.2s}
.gbox .gbox-desc{font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.gb1,.gb2{width:var(--product-w);height:calc((100% - var(--gbox-gap)) / 2)}
.gb1{left:0;top:0;--dx:-180px;--dy:-120px;--rr:-7deg}
.gb2{left:0;bottom:0;--dx:-180px;--dy:120px;--rr:7deg}
.gb3,.gb4,.gb5,.gb6{width:calc((100% - var(--product-w) - 24px) / 2);height:calc((100% - var(--gbox-gap)) / 2)}
.gb3{left:calc(var(--product-w) + var(--gbox-gap));top:0;--dx:150px;--dy:-132px;--rr:5deg}
.gb4{right:0;top:0;--dx:180px;--dy:-132px;--rr:-5deg}
.gb5{left:calc(var(--product-w) + var(--gbox-gap));bottom:0;--dx:150px;--dy:132px;--rr:-6deg}
.gb6{right:0;bottom:0;--dx:180px;--dy:132px;--rr:6deg}

/* 04 NETWORK — 넘버드 아코디언 스택 (대형) */
.side-stack{width:calc(50vw - var(--roff))}
.stackrows{display:grid;gap:12px}
.srow{border-radius:999px;overflow:hidden;transition:border-radius .45s cubic-bezier(.2,.75,.2,1)}
/* 헤더는 button — 클릭·키보드 양쪽으로 열 수 있어야 한다.
   .srow 가 overflow:hidden 이라 포커스 링을 안쪽(-4px)으로 넣어야 잘리지 않는다 */
.srow-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:19px 32px;
  background:none;border:0;text-align:left;cursor:pointer;
}
.srow-head b{font-size:17px;font-weight:700}
.srow-head i{font-style:normal;font-size:13px;font-weight:600;opacity:.75}
.srow-head:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:inherit}
.sr1{background:#f0f2f6;color:#14161c}
.sr2{background:#3d424e;color:#fff}
.sr3{background:var(--accent);color:#fff}
.srow-body{max-height:0;opacity:0;overflow:hidden;padding:0 16px;transition:max-height .55s cubic-bezier(.2,.75,.2,1),opacity .4s,padding .45s}
.srow.open{border-radius:22px}
/* max-height는 펼침 트랜지션용 상한값 — 이미지를 3:2로 키우면 실제 콘텐츠가
   기존 560px를 넘는다(1920px 화면 약 600px, 2560px 약 820px). 잘리지 않도록 상향 */
.srow.open .srow-body{max-height:900px;opacity:1;padding:0 18px 18px}
.srow-copy{padding:4px 14px 2px;opacity:0;transform:translateY(8px);transition:opacity .4s ease .2s,transform .45s cubic-bezier(.2,.75,.2,1) .2s}
.srow.open .srow-copy{opacity:1;transform:none}
.srow-copy p{margin:0;font-size:15px;font-weight:500;line-height:1.55}
.srow-copy ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin:18px 0 0;padding:15px 0 0;border-top:1px solid currentColor;list-style:none}
.srow-copy li{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.45;opacity:.84}
.srow-copy li::before{content:"";width:7px;height:7px;flex:none;transform:rotate(45deg);background:var(--accent);box-shadow:0 0 10px rgba(77,141,255,.65)}
.srow-copy .srow-points-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.srow-copy .srow-points-grid li{font-size:15px;font-weight:600}
.srow-copy .srow-points-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
.srow-copy .srow-points-row li{gap:9px;font-size:15px;font-weight:600;white-space:nowrap}
.srow-copy .srow-points-row li::before{content:"+";display:grid;place-items:center;width:23px;height:23px;transform:none;border:1px solid rgba(255,255,255,.5);border-radius:7px;background:rgba(255,255,255,.14);box-shadow:none;color:#fff;font-size:16px;line-height:1}
.srow-content-split{display:grid;grid-template-columns:minmax(230px,.82fr) minmax(0,1.18fr);gap:22px;align-items:stretch;margin-top:18px;padding-top:16px;border-top:1px solid currentColor}
.srow-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0}
.srow-media-card{min-width:0}
.srow-media-card b{display:block;margin-top:8px;font-size:12px;line-height:1.35}
.srow-media-placeholder{display:grid;place-items:center;width:100%;aspect-ratio:4/3;border:1px dashed currentColor;border-radius:10px;background:linear-gradient(135deg,currentColor 0 1px,transparent 1px 16px),rgba(0,0,0,.08);background-size:16px 16px;font-size:10px;font-weight:700;letter-spacing:.12em;opacity:.58}
.srow-media.srow-media-feature{width:100%;height:100%;aspect-ratio:auto;min-height:0;margin:0}
.srow-media{position:relative;display:flex;align-items:flex-end;min-height:156px;margin-top:18px;padding:14px 16px;overflow:hidden;border:1px dashed currentColor;border-radius:14px;background:rgba(0,0,0,.1)}
.srow-media::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,currentColor 0 1px,transparent 1px 18px);background-size:18px 18px;opacity:.08}
.srow-media span{position:relative;font-size:10px;font-weight:700;letter-spacing:.14em;opacity:.7}
/* 고정 높이 대신 aspect-ratio — 화면 폭이 달라져도 비율이 유지되므로
   발주할 이미지 규격을 3:2 하나로 고정할 수 있다 */
.srow-media-wide{aspect-ratio:3/2;min-height:0}
.srow-media-offset{width:76%;aspect-ratio:3/2;min-height:0;margin-left:auto}
.srow-media-split{display:grid;grid-template-columns:1.7fr 1fr;gap:10px;margin-top:18px}
.srow-media-split .srow-media{min-height:0;margin:0}
.srow-media-main{aspect-ratio:3/2}
.srow-media-detail{align-items:center;justify-content:center;padding:12px}
.srow-media-detail span{writing-mode:vertical-rl}
/* 실제 이미지가 들어간 슬롯 — 플레이스홀더 장식(점선 테두리·해치 패턴)을 걷어낸다.
   .has-img 는 클래스 2개라 .srow-media-detail 의 padding 보다 우선한다 */
/* 카드 배경색(밝은 회색 / 다크 그레이 / 블루)과 이미지 밝기가 겹치면 이미지 경계가
   카드에 녹는다(03번은 대비 1.18). 밝은 안쪽선 + 어두운 바깥 링을 겹쳐,
   카드가 밝든 어둡든 둘 중 하나는 반드시 윤곽을 만들게 한다 */
.srow-media.has-img{
  display:block;padding:0;border:0;background:#05090c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),
             0 0 0 1px rgba(0,0,0,.5);
}
.srow-media.has-img::before{display:none}
.srow-media.has-img img{display:block;width:100%;height:100%;object-fit:cover}
/* DETAIL 소재가 세로형이면 자연 높이가 메인(3:2)보다 커져 두 칸의 아래끝이 어긋난다.
   절대배치로 빼서 행 높이는 메인의 aspect-ratio 가 단독으로 결정하게 한다 */
.srow-media-detail img{position:absolute;inset:0}

/* 05 ENTER — Demo & Portfolio 쇼룸 */
.side-sns{width:min(740px,50vw)}
.side-sns.is-active{transform:translateY(calc(-50% + 4px))}
.showroom{position:relative}
.showroom-hero{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;margin:28px auto 0;overflow:hidden;border:1px solid rgba(120,168,255,.44);border-radius:16px;background:linear-gradient(135deg,rgba(45,108,223,.3),rgba(5,9,16,.9) 58%);box-shadow:0 20px 42px rgba(0,0,0,.38)}
.showroom-hero::before,.showroom-placeholder{background:linear-gradient(135deg,rgba(124,171,255,.22) 1px,transparent 1px),linear-gradient(rgba(124,171,255,.14) 1px,transparent 1px);background-size:28px 28px}
.showroom-hero::before{content:"";position:absolute;inset:0;opacity:.44;mask-image:linear-gradient(135deg,#000,transparent 75%)}
.showroom-placeholder{position:relative;z-index:1;display:grid;place-items:center;aspect-ratio:16/9;color:rgba(219,233,255,.6);font-size:11px;font-weight:700;letter-spacing:.14em}
.showroom-hero>.showroom-placeholder{width:100%;height:100%}
.showroom-hero-copy{position:absolute;z-index:2;left:22px;right:22px;bottom:18px;display:flex;align-items:end;gap:10px;padding-top:38px;background:linear-gradient(0deg,rgba(5,9,16,.88),transparent);pointer-events:none}
.showroom-hero-copy em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.14em;color:#a9c7ff}
.showroom-hero-copy b{font-size:17px;font-weight:600}
.showroom-hero-copy span{margin-left:auto;font-size:10px;letter-spacing:.1em;color:var(--ink-mute)}
.showroom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:86%;gap:14px;margin:14px auto 0}
.showroom-shot{min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(5,9,16,.72)}
.showroom-shot .showroom-placeholder{width:100%}
.showroom-shot b{display:block;padding:6px 9px 8px;font-size:11px;font-weight:600;line-height:1.3}
.showroom-ctas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin-top:18px}
.showroom-ctas a{display:flex;align-items:center;justify-content:center;padding:12px 10px;border:1px solid var(--cta);border-radius:999px;background:rgba(45,108,223,.12);font-size:13px;font-weight:600;transition:background .2s}
.showroom-ctas a:hover{background:var(--cta)}

@media (max-width:960px){
  .journey-side-layer{display:none}
}
@media (max-height:760px){
  .win-field{height:380px;transform:scale(.82);transform-origin:right center}
  .side-sns .sns-feat .sns-thumb{height:130px}
  .side-sns .sns-mini .sns-thumb{height:56px}
}
@media (prefers-reduced-motion:reduce){
  .journey-side,.journey-side .sv{transition:none}
  .journey-side .sv{opacity:1;transform:none}
  .journey-side.is-active .win{animation:none;opacity:1}
  .gem{animation:none}
  .caret{animation:none}
  .gbox-icon{animation:none}
  .journey-dot::before{animation:none}
  .srow,.srow-body,.mock-shot{transition:none}
}

/* ---------- 챕터 도트 레일 ---------- */
.journey-rail{
  position:absolute;right:clamp(18px,3vw,46px);top:50%;z-index:22;
  display:flex;flex-direction:column;gap:18px;transform:translateY(-50%);
}
.journey-rail::before{
  content:"";position:absolute;top:9px;bottom:9px;left:50%;width:1px;
  background:rgba(255,255,255,.22);transform:translateX(-50%);
}
.journey-dot{position:relative;width:18px;height:18px;padding:0;border:0;background:transparent;cursor:pointer}
.journey-dot::after{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:inset .3s,background .3s,box-shadow .3s;
}
.journey-dot.is-active::after{inset:3px;background:var(--ink);box-shadow:0 0 0 5px rgba(242,244,248,.14)}
/* 활성 도트에서 바깥으로 퍼지는 링 — 현재 위치를 계속 알려준다.
   ::after 는 도트 본체가 쓰고 있어 ::before 를 링으로 쓴다.
   도트 간격이 18px(중심 간 36px)이라 2.6배(약 31px)까지만 키워 이웃과 겹치지 않게 한다 */
.journey-dot::before{
  content:"";position:absolute;inset:3px;border-radius:50%;
  border:1px solid rgba(242,244,248,.55);
  opacity:0;pointer-events:none;
}
.journey-dot.is-active::before{animation:dot-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes dot-ping{
  0%{transform:scale(1);opacity:.55}
  70%{opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
.journey-dot-label{
  position:absolute;top:50%;right:28px;color:var(--ink);opacity:0;white-space:nowrap;
  transform:translate(6px,-50%);transition:opacity .25s,transform .25s;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.journey-dot:hover .journey-dot-label,
.journey-dot.is-active .journey-dot-label{opacity:1;transform:translate(0,-50%)}

/* ---------- 푸터 ---------- */
.journey-footer{
  position:absolute;left:clamp(22px,4.8vw,72px);right:clamp(22px,4.8vw,72px);bottom:22px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--ink-mute);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.journey-progress{position:relative;width:min(280px,28vw);height:1px;background:rgba(255,255,255,.2)}
.journey-progress::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(var(--journey-progress));transform-origin:0 50%;
}
.journey-scroll{display:flex;align-items:center;gap:11px}
.journey-scroll i{width:22px;height:34px;border:1px solid rgba(255,255,255,.4);border-radius:999px;position:relative}
.journey-scroll i::after{
  content:"";position:absolute;top:7px;left:50%;width:2px;height:7px;
  background:var(--ink);border-radius:4px;transform:translateX(-50%);
  animation:wheel 1.7s ease-in-out infinite;
}
@keyframes wheel{
  0%{opacity:0;transform:translate(-50%,0)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(-50%,10px)}
}

/* ---------- 모바일 ---------- */
@media (max-width:760px){
  .journey-topbar{padding:18px 20px}
  .journey-meta{gap:6px;font-size:10px}
  .journey-meta a,.journey-meta-button{padding:7px 10px}
  .journey-dot-label,.journey-progress{display:none}
  /* 스톱 값은 디자이너 데모 기준, 색은 타이탄 블루블랙 유지 */
  .journey-shade{
    background:
      linear-gradient(0deg,rgba(2,5,8,.86) 0%,rgba(2,5,8,.48) 38%,transparent 67%),
      radial-gradient(circle at 50% 35%,transparent 0%,rgba(2,5,8,.28) 90%);
  }
  .scene-media{object-position:50% 45%}
  .journey-copy{left:20px;right:52px;top:auto;bottom:92px;width:auto;transform:translateY(18px)}
  .journey-copy.is-active{transform:none}
  .journey-title{max-width:11ch;font-size:clamp(30px,10vw,44px)}
  .journey-body{margin-top:16px;font-size:14.5px;line-height:1.55}
  .journey-note{display:none}
  .journey-rail{right:10px;gap:13px}
  .journey-footer{left:20px;right:20px;bottom:16px}
}

/* ---------- 커튼 스택 (여정 위로 올라오는 서브 콘텐츠) ---------- */
.site-post{position:relative;z-index:30}
.post-panel{
  background:#0b0e15;border-radius:28px 28px 0 0;
  box-shadow:0 -30px 80px rgba(0,0,0,.65);
  border-top:1px solid rgba(255,255,255,.08);
}
.post-shell{max-width:1120px;margin:0 auto;padding:0 24px}

/* 스테이트먼트 씬 — 줄 단위로 밝아지는 문장 + 노드 네트워크 배경 */
/* dvh — iOS Safari 등에서 주소창이 접히고 펴질 때 vh 는 값이 튀어 레이아웃이 흔들린다.
   dvh 미지원 브라우저를 위해 vh 를 먼저 두고 덮어쓴다.
   (.journey-track 은 dvh 로 바꾸지 않는다 — 스크롤 도중 값이 변하면 씬 매핑이 어긋난다) */
.stmt{position:relative;min-height:88vh;min-height:88dvh;display:flex;align-items:center;justify-content:center;padding:96px 24px;overflow:hidden}
.stmt-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.stmt p{position:relative;z-index:1;margin:0;max-width:22ch;text-align:center;font-size:clamp(26px,4vw,52px);font-weight:300;line-height:1.4;letter-spacing:-.01em}
.stmt-line{
  display:block;opacity:.13;transform:translateY(14px);
  transition:opacity .8s ease calc(var(--i,0)*.22s),transform .8s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*.22s);
}
.stmt.on .stmt-line{opacity:1;transform:none}

/* 자이언트 타이포 — 스크롤 진입 시 글자 조립 */
.giant{padding:120px 0 40px;overflow:hidden}
.giant .g{
  display:flex;justify-content:center;align-items:baseline;
  font-size:clamp(56px,12.5vw,180px);font-weight:800;line-height:1;letter-spacing:.01em;
  white-space:nowrap;
}
.giant i{
  font-style:normal;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.24);
  transform:translateY(58%);opacity:0;
  transition:transform .85s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*.055s),
             opacity .6s ease calc(var(--i,0)*.055s);
}
.giant.on i{transform:none;opacity:1}
.giant i.fill{color:var(--accent);-webkit-text-stroke:0}

/* 지표 카운트업 */
.consult-guide{padding:80px 0 0}
.consult-guide-title{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:30px}
.consult-guide-title span{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.consult-guide-title h2{margin:0;font-size:clamp(24px,3vw,36px);font-weight:300;letter-spacing:-.02em}
.consult-guide-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;list-style:none}
.consult-guide-list li{border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.consult-guide-list b{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--accent)}
.consult-guide-list strong{display:block;margin-top:14px;font-size:17px;font-weight:600}
.consult-guide-list span{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* 뉴스 스트립 */
.news-wrap{padding-top:110px;padding-bottom:110px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card{display:block;border-radius:16px;overflow:hidden;background:#12151d;border:1px solid rgba(255,255,255,.07);transition:transform .25s,border-color .25s}
.news-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.news-thumb{display:block;aspect-ratio:16/9}
.nt-a{background:linear-gradient(135deg,#16233f,#2f66d8 130%)}
.nt-b{background:linear-gradient(135deg,#101a2c,#3b8bd8 160%)}
.nt-c{background:linear-gradient(135deg,#131627,#6a7bd8 170%)}
.news-meta{display:flex;gap:12px;align-items:center;padding:20px 22px 0;font-size:12px;color:var(--ink-mute)}
.news-meta em{font-style:normal;color:var(--accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.news-card h3{margin:0;padding:10px 22px 24px;font-size:17px;font-weight:600;line-height:1.5}

/* 사업 영역 */
.post-head{margin-bottom:44px}
.post-eyebrow{display:block;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px}
.post-head h2{font-size:clamp(26px,3.2vw,40px);font-weight:300;letter-spacing:-.01em}
.post-intro{margin:18px 0 0;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:110px}
.biz-card{
  background:#12151d;border:1px solid rgba(255,255,255,.07);border-radius:16px;
  padding:34px 30px;transition:transform .25s,border-color .25s;
}
.biz-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.biz-card{text-align:center;padding:44px 28px}
.biz-ico{
  width:56px;height:56px;margin:0 auto 22px;border-radius:14px;
  background:#1b202b;display:flex;align-items:center;justify-content:center;
}
.c-violet{color:#a78bfa}.c-teal{color:#2dd4bf}.c-orange{color:#fb923c}
.c-lime{color:#a3e635}.c-rose{color:#fb7185}.c-blue{color:#60a5fa}
.biz-card h3{font-size:19px;font-weight:600;margin-bottom:12px}
.biz-card p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-soft)}

/* 브랜드 필름 패널 (한컴식) */
.film-wrap{padding-top:110px}
.film-panel{
  position:relative;border-radius:24px;overflow:hidden;
  aspect-ratio:21/9;background:var(--void);
}
.film-panel video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.film-play{
  position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.28);
  backdrop-filter:blur(6px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .2s,opacity .3s;
}
.film-play svg{margin-left:4px}
.film-play:hover{transform:scale(1.07);background:rgba(0,0,0,.45)}
.film-panel.playing .film-play{opacity:0;pointer-events:none}

/* 오브젝트 구성 (SK식 플로팅 헥사곤) */
.objects{
  position:relative;min-height:92vh;min-height:92dvh;padding:160px 24px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.obj-inner{position:relative;z-index:2;text-align:center;max-width:660px}
.obj-inner h2{font-size:clamp(30px,4.4vw,56px);font-weight:300;line-height:1.25;letter-spacing:-.01em}
.obj-inner p{margin:22px auto 34px;color:var(--ink-soft);font-size:17px;line-height:1.7;max-width:44ch}
.obj-inner .btn-arrow{gap:10px}
/* 좌우 이동과 회전을 두 겹으로 나눈다 — 한 요소에는 transform 애니메이션을 하나만
   걸 수 있어서, 바깥(span)이 계속 좌우로 흐르고 안쪽(i)이 가끔 한 바퀴 돈다.
   이전처럼 한 타임라인에 묶으면 회전 중 이동이 멈추고 뒤에 정지 구간이 생겨 딱딱해진다. */
.btn-arrow-mark{
  --nudge:5px;
  display:inline-block;font-size:1.1em;line-height:1;will-change:transform;
  animation:consult-arrow-drift 2.8s ease-in-out infinite;
}
/* 키프레임이 0/50/100 셋뿐이라 양 끝에서만 속도가 0이 된다 — 멈칫거림 없는 연속 왕복 */
@keyframes consult-arrow-drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(var(--nudge,5px),0,0)}
}
/* 회전은 주기의 앞 14%(약 1.3초)에만 일어나고 나머지는 멈춰 있다.
   가로 이동 주기(2.8s)와 나눠떨어지지 않는 9s 로 잡아 매번 다른 위치에서 돈다.
   rotateX(360deg)로 끝나 다음 주기의 0deg 와 시각적으로 이어지므로 튀지 않는다 */
.btn-arrow-mark>i{
  display:inline-block;font-style:normal;
  transform-style:preserve-3d;will-change:transform;
  animation:consult-arrow-flip 9s infinite;
}
@keyframes consult-arrow-flip{
  0%{transform:perspective(220px) rotateX(0deg);animation-timing-function:cubic-bezier(.45,0,.35,1)}
  14%,100%{transform:perspective(220px) rotateX(360deg)}
}
.obj-inner .btn-arrow:hover .btn-arrow-mark{--nudge:9px;animation-duration:2.2s}
.obj-inner .btn-arrow:hover .btn-arrow-mark>i{animation-duration:5s}
.hex{
  position:absolute;width:var(--s,150px);aspect-ratio:.87;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  opacity:.85;
  animation:objfloat 7s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
}
.hex img{width:100%;height:100%;object-fit:cover}
.hx1{left:5%;top:14%;--s:180px}
.hx2{right:7%;top:10%;--s:140px;--d:1.2s}
.hx3{left:11%;bottom:12%;--s:130px;--d:2s}
.hx4{right:9%;bottom:16%;--s:190px;--d:.6s}
.odot{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:currentColor;box-shadow:0 0 20px currentColor;
  animation:objfloat 6s ease-in-out infinite alternate;
}
.dv{color:#a78bfa}.dt{color:#2dd4bf}.dg{color:#4ade80}.db{color:#60a5fa}.dr{color:#fb7185}
@keyframes objfloat{from{transform:translateY(-12px)}to{transform:translateY(14px)}}

/* 하단 CTA */
.post-cta{padding-top:20px;padding-bottom:120px;text-align:center}
.post-cta h2{font-size:clamp(26px,3.4vw,44px);font-weight:300;letter-spacing:-.01em}
.post-cta p{margin:16px 0 32px;color:var(--ink-soft);font-size:17px}
.post-cta-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}

/* 포스트 푸터 */
.post-foot{border-top:1px solid rgba(255,255,255,.08);padding:28px 0}
.post-foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-mute)}
.post-foot-brand{font-weight:700;letter-spacing:.16em;color:var(--ink-soft)}

/* 포스트 리빌 */
.reveal-p{opacity:0;transform:translateY(22px);transition:opacity .7s ease calc(var(--i,0)*.12s),transform .7s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*.12s)}
.reveal-p.on{opacity:1;transform:none}

/* ---------- 플로팅 버튼 ---------- */
.fabs{
  /* 페이지 맨 아래에서 푸터 경계선(.post-foot 상단, 화면 하단 72px 지점)을 가로질러
     걸쳐 보였다. 라인 위로 16px 띄워 배치한다 */
  position:fixed;right:22px;bottom:88px;z-index:60;
  display:flex;flex-direction:column;gap:10px;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .35s,transform .35s;
}
.fabs.show{opacity:1;pointer-events:auto;transform:none}
.fab{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);transition:background .2s,transform .15s;
}
.fab:hover{background:rgba(255,255,255,.18)}
.fab:active{transform:scale(.94)}
/* 맨 위로 — 다른 요소와 같은 규칙(평상시 선만, 호버 시 채움).
   .fab:hover 와 명시도가 같으므로 반드시 뒤에 와야 덮어쓴다 */
.fab-top{background:transparent;border:1px solid var(--cta)}
.fab-top:hover{background:var(--cta)}
/* 아이콘만 위아래로 — 버튼 기능(맨 위로)과 방향을 맞춘다.
   스크롤 내내 화면에 떠 있는 요소라 상담 화살표(5px)보다 폭을 줄였고,
   주기도 2.8s 와 어긋나게 잡아 두 화살표가 같은 리듬으로 들썩이지 않게 한다.
   키프레임이 0/50/100 셋뿐이라 ease-in-out 이 양 끝에서만 속도를 0으로 만든다 */
.fab-top svg{--lift:3px;animation:fab-top-lift 3.4s ease-in-out infinite}
.fab-top:hover svg{--lift:5px;animation-duration:2.4s}
@keyframes fab-top-lift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,calc(var(--lift,3px)*-1),0)}
}
/* 문의 FAB — 유일하게 평상시부터 채워둔다. 페이지 전체가 선으로만 이뤄져 있어
   최종 진입점 하나는 채워야 시선이 잡힌다. 호버는 한 단계 진하게 */
.fab-contact{background:var(--cta);border:1px solid var(--cta)}
.fab-contact:hover{background:var(--cta-deep);border-color:var(--cta-deep)}

@media (max-width:760px){
  .biz-grid{grid-template-columns:1fr;padding-bottom:72px}
  .stmt{min-height:70vh;min-height:70dvh}
  .fabs{right:14px;bottom:80px}
  .fab{width:46px;height:46px}
  .post-cta{padding-bottom:88px}
  .consult-guide{padding-top:56px}
  .consult-guide-title{display:block;margin-bottom:24px}
  .consult-guide-title h2{margin-top:10px}
  .consult-guide-list{grid-template-columns:1fr 1fr;gap:24px}
  .news-grid{grid-template-columns:1fr}
  .news-wrap{padding-top:72px;padding-bottom:72px}
  .giant{padding:72px 0 24px}
  .biz-grid{grid-template-columns:1fr 1fr}
  .biz-card{padding:30px 18px}
  .film-wrap{padding-top:64px}
  .film-panel{aspect-ratio:16/9;border-radius:16px}
  .film-play{width:64px;height:64px}
  .objects{min-height:70vh;min-height:70dvh;padding:100px 20px}
  .hx1{--s:110px;left:2%;top:8%}
  .hx2{--s:90px;right:3%;top:5%}
  .hx3{display:none}
  .hx4{--s:120px;right:4%;bottom:6%}
  .hex{opacity:.5}
}
@media (max-width:960px) and (min-width:761px){
  .biz-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .stmt-line,.reveal-p{transition:none;opacity:1;transform:none}
  .fabs{transition:none}
  .fab-top svg{animation:none}
  .giant i{transition:none;transform:none;opacity:1}
  .hex,.odot{animation:none}
}

/* ---------- 낮은 뷰포트 (짧은 화면) ---------- */
@media (max-height:580px){
  .journey-title{font-size:clamp(24px,7.5vh,44px)}
  .journey-kicker{margin-bottom:10px}
  .journey-body{margin-top:12px;font-size:14px;line-height:1.5}
  .journey-note{margin-top:14px}
  .journey-ctas{margin-top:18px}
  .journey-ctas .btn-solid,.journey-ctas .btn-line{padding:10px 22px;font-size:14px}
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion:reduce){
  .journey-scroll i::after{animation:none}
  .obj-inner .btn-arrow-mark,
  .obj-inner .btn-arrow-mark>i{animation:none}
  .journey-copy,.journey-kicker,.journey-body,.journey-note,.journey-ctas,.journey-num{transition:none}
  .journey-kicker,.journey-body,.journey-note,.journey-ctas{opacity:1;transform:none}
  .journey-copy.is-active .journey-kicker::before{transition:none}
  .journey-kicker::before{width:34px}
  .journey-num{opacity:1;transform:none}
  .journey-title .w i{transform:none;transition:none}
  .scene-media{transition:none !important}
  .scene-film{display:none}
}