/* ============================================================
   UPFACT 홈페이지 v1 — 디자인 토큰
   레퍼런스: y-vision.co.kr (구조·리듬·타이포 스케일 실측 기반)
   ============================================================ */
:root{
  /* 배경 */
  --bg:        #FFFFFF;
  --bg-soft:   #F2F3F7;
  --card:      #FFFFFF;
  --line:      rgba(11,21,38,.12);
  --line-soft: rgba(11,21,38,.08);

  /* 텍스트 (라이트 배경) */
  --text:      #10131A;
  --text-2:    rgba(16,19,26,.64);
  --text-3:    rgba(16,19,26,.44);

  /* 브랜드 — 네이비 */
  --navy:      #0B1526;
  --navy-deep: #060B16;
  --navy-soft: #16233C;

  /* 다크 배경 위 텍스트 */
  --on-navy:      #F5F7FA;
  --on-navy-2:    rgba(245,247,250,.68);
  --on-navy-3:    rgba(245,247,250,.46);
  --on-navy-line: rgba(245,247,250,.16);

  /* 포인트 — 그린 */
  --acc:       #2FA968;
  --acc-deep:  #1F7C4C;
  --acc-soft:  #E6F5EC;
  --acc-on-navy: #4FD98A;

  /* 형태 */
  --radius:    16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --maxw:      1440px;
  --gut:       clamp(20px, 5vw, 64px);

  /* 리듬 (레퍼런스 실측 sectionPadY ≈ 165px @1920 → clamp로 반영) */
  --sec-py:    clamp(64px, 9vw, 160px);
  --sec-py-sm: clamp(40px, 6vw, 96px);

  /* 타이포 스케일 (레퍼런스 실측 fontSize 상위값 기반) */
  --fs-display: clamp(40px, 8.2vw, 128px);
  --fs-h1:      clamp(30px, 4.6vw, 56px);
  --fs-h2:      clamp(26px, 3.4vw, 42px);
  --fs-h3:      clamp(19px, 1.7vw, 24px);
  --fs-body-lg: clamp(17px, 1.35vw, 20px);
  --fs-body:    clamp(15px, 1.05vw, 17px);
  --fs-small:   13px;
  --fs-label:   12px;

  --lh-tight: 1.22;   /* 한글 디스플레이 하한 1.12 이상 확보 */
  --lh-h:     1.34;
  --lh-body:  1.68;

  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Pretendard Variable','Pretendard','Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  background:var(--bg); color:var(--text);
  font-size:var(--fs-body); line-height:var(--lh-body);
  letter-spacing:-0.01em;
  word-break:keep-all; overflow-wrap:anywhere;
  font-feature-settings:"tnum";
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
.inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--acc);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;z-index:200;
}
.skip-link:focus{left:0}

/* ---------- 헤더 / 캡슐 내비 ---------- */
.nav{
  position:fixed;top:14px;left:0;right:0;z-index:100;
  display:flex;justify-content:center;padding:0 var(--gut);
  transition:top .3s var(--ease-out);
}
.nav__pill{
  width:100%;max-width:1180px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 10px 10px 22px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  box-shadow:0 10px 30px -14px rgba(11,21,38,.28);
}
.nav__brand{font-weight:800;font-size:16px;letter-spacing:-0.02em}
.nav__brand span{color:var(--acc-deep)}
.nav__links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--text-2)}
.nav__links a:hover{color:var(--text)}
.nav__cta{
  background:var(--navy);color:var(--on-navy);
  padding:11px 20px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:700;white-space:nowrap;
  border:none;appearance:none;
  transition:transform .2s var(--ease-out), background .2s var(--ease-out);
}
.nav__cta:hover{background:var(--acc-deep);transform:translateY(-1px)}
.nav__toggle{
  display:none;background:transparent;appearance:none;border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:9px 14px;font-size:13px;font-weight:600;
  align-items:center;gap:6px;
}
@media (max-width:767px){
  .nav__links{display:none}
  .nav__toggle{display:inline-flex}
}

/* ---------- 공통 섹션 ---------- */
section{position:relative}
.sec{padding:var(--sec-py) 0}
@media (max-width:767px){ .sec{padding:var(--sec-py-sm) 0} }
.sec--navy{background:var(--navy);color:var(--on-navy)}
.sec--soft{background:var(--bg-soft)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;
  color:var(--acc-deep);text-transform:uppercase;
  margin-bottom:18px;
}
.sec--navy .eyebrow{color:var(--acc-on-navy)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

.hl{
  background:var(--acc-soft);color:var(--acc-deep);
  padding:.04em .18em;border-radius:.28em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.sec--navy .hl{background:rgba(79,217,138,.16);color:var(--acc-on-navy)}
.hl--invert{background:var(--on-navy);color:var(--navy)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- HERO ---------- */
.hero{
  background:var(--navy);color:var(--on-navy);
  padding:150px 0 var(--sec-py);
  overflow:hidden;text-align:center;
}
.hero__grid{display:grid;gap:40px;justify-items:center}
.hero h1{
  font-size:clamp(30px, 5.6vw, 72px);line-height:var(--lh-tight);font-weight:800;
  letter-spacing:-0.02em;max-width:30ch;margin:0 auto;
}
.hero h1 .word{
  display:inline-block;opacity:0;filter:blur(10px);transform:translateY(10px);
  transition:opacity .6s var(--ease-out), filter .6s var(--ease-out), transform .6s var(--ease-out);
}
.hero h1.is-in .word{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){
  .hero h1 .word{opacity:1;filter:none;transform:none;transition:none}
}
.hero__sub{
  font-size:var(--fs-body-lg);line-height:var(--lh-body);
  color:var(--on-navy-2);max-width:46ch;margin:0 auto;
}
/* v1.13: 이전 버전 히어로의 eyebrow·CTA 버튼·태그라인을 다시 결합 */
.hero__eyebrow{color:var(--acc-on-navy)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:-4px}
.hero__tagline{
  font-size:13px;letter-spacing:.03em;color:var(--on-navy-3);margin-top:-6px;
}
.hero__tagline b{color:var(--acc-on-navy);font-weight:700}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 26px;border-radius:var(--radius-pill);
  font-weight:700;font-size:15px;white-space:nowrap;
  border:1px solid transparent;appearance:none;background:transparent;
  transition:transform .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn--primary{background:var(--acc-on-navy);color:var(--navy-deep)}
.btn--primary:hover{transform:translateY(-2px);background:var(--on-navy)}
.btn--ghost{border-color:var(--on-navy-line);color:var(--on-navy)}
.btn--ghost:hover{border-color:var(--on-navy)}
.btn--dark{background:var(--navy);color:var(--on-navy)}
.btn--dark:hover{background:var(--acc-deep);transform:translateY(-2px)}

.collage{position:relative;height:clamp(220px,30vw,340px);width:100%;margin-top:8px}
.collage__row{display:flex;gap:0;position:absolute;inset:0;align-items:center;justify-content:center}
.collage .slot{
  width:clamp(110px,13vw,180px);flex:0 0 auto;border-radius:16px;overflow:hidden;
  margin-left:clamp(-38px,-4vw,-18px);
  box-shadow:0 24px 40px -18px rgba(0,0,0,.55);
  border-color:var(--on-navy-line);color:var(--on-navy-3);
  /* 진입 애니메이션 시작 상태 — 살짝 덜 펼쳐진 채 흐릿하게 뭉쳐있다가 펼쳐진다
     (y-vision.co.kr 재실측: 로드 시 카드가 blur 상태로 뭉쳐 있다가 부채꼴로 펼쳐짐) */
  opacity:0;filter:blur(16px);
  transform:rotate(calc(var(--rot,0deg)*.2)) translateY(calc(var(--ty,0) + 22px)) scale(.94);
  transition:opacity .8s var(--ease-out), filter .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--stagger,0ms);
}
.collage.is-in .slot{
  opacity:1;filter:blur(0);
  transform:rotate(var(--rot,0deg)) translateY(var(--ty,0)) scale(1);
  animation:cardFloat 5.5s ease-in-out var(--float-delay,0s) infinite;
}
.collage .slot:first-child{margin-left:0}
.collage .slot:nth-child(1){--rot:-14deg;--ty:10px;z-index:1;--stagger:0ms;--float-delay:1.3s}
.collage .slot:nth-child(2){--rot:-8deg;--ty:0px;z-index:2;--stagger:70ms;--float-delay:1.6s}
.collage .slot:nth-child(3){--rot:-3deg;--ty:-8px;z-index:3;--stagger:140ms;--float-delay:1.9s}
.collage .slot:nth-child(4){--rot:3deg;--ty:-8px;z-index:4;--stagger:210ms;--float-delay:2.2s}
.collage .slot:nth-child(5){--rot:8deg;--ty:0px;z-index:5;--stagger:280ms;--float-delay:2.5s}
.collage .slot:nth-child(6){--rot:14deg;--ty:10px;z-index:6;--stagger:350ms;--float-delay:2.8s}
.collage .slot__box{aspect-ratio:4/3}
@keyframes cardFloat{
  0%,100%{transform:rotate(var(--rot,0deg)) translateY(var(--ty,0)) scale(1)}
  50%{transform:rotate(var(--rot,0deg)) translateY(calc(var(--ty,0) - 5px)) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .collage .slot{opacity:1;filter:none;transform:rotate(var(--rot,0deg)) translateY(var(--ty,0));transition:none;animation:none}
}
.collage-tag{
  position:absolute;background:var(--on-navy);color:var(--navy);
  font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--radius-pill);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.4);z-index:10;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease-out) .45s, transform .6s var(--ease-out) .45s;
}
.collage.is-in .collage-tag{opacity:1;transform:none}
.collage-tag--a{top:0;left:2%}
.collage-tag--b{top:0;right:2%}
.collage-tag--c{bottom:2%;left:50%}
.collage-tag--c{transform:translateX(-50%) translateY(8px)}
.collage.is-in .collage-tag--c{transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){
  .collage-tag{opacity:1;transform:none;transition:none}
  .collage-tag--c{transform:translateX(-50%)}
}

.scrolldown{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:12px auto 0;color:var(--on-navy-3);font-size:11px;letter-spacing:.14em;
}
.scrolldown__dot{
  width:38px;height:38px;border:1px solid var(--on-navy-line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scrolldown__dot{animation:none}}

/* ---------- PROBLEM ---------- */
.problem h2{font-size:var(--fs-h2);font-weight:800;line-height:var(--lh-h);letter-spacing:-0.02em;max-width:16ch}
.problem__list{margin-top:52px;border-top:1px solid var(--line)}
.problem__item{
  display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--line);
}
.problem__num{font-size:14px;font-weight:700;color:var(--text-3);font-feature-settings:"tnum"}
.problem__item p{font-size:var(--fs-body-lg);line-height:var(--lh-body);max-width:56ch}
.problem__item:nth-child(2) p{font-weight:600}

/* ---------- WHY FACT (giant wordmark) ---------- */
.factmark{text-align:center;padding-top:0}
.factmark__word{
  font-size:clamp(64px,14vw,220px);font-weight:900;letter-spacing:-0.03em;
  line-height:1;color:var(--text);position:relative;display:inline-block;
  /* v1.16(대표 지적): 반사(.factmark__reflect-region)는 absolute라 일반 흐름의
     margin-bottom만으로는 아래 문단과 겹침이 방지되지 않는다. 반사 잉크는
     실측 결과 박스 높이의 최대 71%까지 내려오므로(위 .factmark__reflect-text
     주석 참조) 그 실측값 기준으로 여유를 계산해 margin-bottom을 잡았다 —
     0.75em(반사가 실제로 차지하는 높이보다 살짝 더) + 기존 여백. */
  margin-bottom:calc(.75em + clamp(20px,4vw,40px));
}
/* y-vision.co.kr의 WHY 섹션 반사("물결 그림자")를 실측해 그대로 재현
   (v1.1 추가 → v1.14 마스크·투명도 재실측 → v1.15에서 구조 자체를 실제 DOM과
   동일하게 재구성).
   v1.14까지는 ::after 가상요소 하나에 모든 걸 몰아넣었는데, 가상요소의 content
   텍스트가 자체 line-height 박스 안에서 정확히 어디에 앉는지는 폰트 메트릭에 따라
   달라져서 transform-origin:center(기본값, 실측 결과 179.828px 61.4375px = 박스
   정중앙)로 그대로 뒤집어도 UPFACT 폰트에서는 반사가 아래로 밀려 본문과 겹치는
   문제가 있었다 — box-height 가정이 실제 렌더링과 어긋난 것.
   실제 y-vision 구조를 다시 보면 이 문제를 겪지 않는 이유가 있다: 반사 텍스트가
   가상요소가 아니라 "본문과 완전히 같은 텍스트 노드"이고, 그걸 감싸는 두 겹 래퍼
   (reflect-mover, reflect-region)로 위치를 잡는다 — 그래서 반사 박스가 본문
   박스와 정확히 동일한 폰트 메트릭을 공유한다. 이번에 그 구조를 그대로 옮겨
   (index.html: `.factmark__word` 안에 실제 "FACT" 텍스트를 한 번 더 넣고
   `.factmark__reflect-region` > `.factmark__reflect-text`로 감쌈) 재구성했다 —
   폰트 메트릭 불일치 문제 자체가 사라진다(본문과 완전히 같은 요소이므로).
   실측값: 필터(feTurbulence+feDisplacementMap, id="why-water"), 마스크
   (linear-gradient 0%:불투명 → 20%:.85 → 92%:투명, reflect-region에 적용),
   transform-origin(기본값=중앙), opacity:.5 — 전부 Claude in Chrome
   getComputedStyle()로 직접 확인한 값 그대로(#fact-water, index.html 상단 SVG
   정의 참조). 정적 필터라 애니메이션은 아니다(2초 간격 스크린샷 비교로 확인) —
   근사가 아니라 실측 FACT. 자세한 경위는 y-vision_분석.md v1.15 참조. */
.factmark__reflect-region{
  position:absolute;left:0;top:100%;width:100%;height:1em;
  overflow:hidden;pointer-events:none;
  /* v1.17(대표 지적: "그림자 경계선이 뚜렷하고") — 실측값(0%:1, 20%:.85,
     92%:투명, y-vision_분석.md v1.14 참조)은 그대로 두되, 아래
     .factmark__reflect-text의 opacity를 .5→.6으로 올려 전체적인
     진하기를 키웠다. 왜곡 진폭 확대(feDisplacementMap scale 22→38,
     index.html 참조)와 합쳐지면서 글자 경계가 더 또렷하고 파동이
     커진 인상을 준다(INFERENCE, 대표 요청 반영 — 실측값 자체를
     바꾼 게 아니라 조합 결과로 "뚜렷함"을 키웠다). */
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.85) 20%, transparent 92%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.85) 20%, transparent 92%);
}
.factmark__reflect-text{
  display:block;color:var(--text);opacity:.6;
  /* y-vision 실측값은 transform-origin 기본값(중앙)이지만, 이는 y-vision 자체
     폰트의 ascent/descent 메트릭에서 성립하는 값이다. UPFACT는 Pretendard를
     쓰는데, Canvas measureText로 실측하니 font-size 201.6px 기준
     actualBoundingBoxAscent 141px / Descent 2px, line-height:1 박스 안에서
     베이스라인이 위에서 약 170.8px 지점 — 즉 글자 잉크가 박스 상단에서
     29.8~172.8px 구간에만 있다(박스 전체를 채우지 않음). transform-origin을
     y-vision처럼 50%(중앙)로 두면 UPFACT 폰트에서는 잉크가 박스 절반 아래로
     쏠려 본문과 반사 사이에 빈 틈이 생기고, 0%(top)로 두면 반대로 전부
     박스 밖(위쪽)으로 밀려 아예 안 보인다 — 두 값 다 시도해 스크린샷으로
     확인한 결과다. "잉크 아랫변이 이음매(seam)에 정확히 닿도록" 수식으로
     역산한 지점이 상단에서 42.9%(계산: pivot = (H - descentEdge)/H, H=201.6,
     descentEdge=172.8) — 실제로 이 값을 넣고 디버그 배경으로 확인해 이음매에
     빈틈 없이 딱 붙는 것을 확인했다. y-vision의 "중앙"이라는 값 자체보다
     "본문 바로 아래에 이음매 없이 이어붙는 반사"라는 실제 시각 효과를
     재현하는 게 목적이므로, 폰트가 다른 UPFACT에서는 그 효과를 내는 값(42.9%)
     을 썼다(INFERENCE, 실측 폰트 메트릭 기반 역산 값). 자세한 경위와 계산
     과정은 y-vision_분석.md v1.15 참조. */
  transform:scaleY(-1);transform-origin:50% 42.9%;
  filter:url(#fact-water);
}
.factmark__lead{
  font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-2);position:relative;z-index:1;
}
.factmark__lead b.hl{font-weight:700}

.method{margin-top:72px}
.method__head h3{font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.02em;max-width:14ch;margin:0 auto}
.timeline{
  margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.timeline__step{padding:34px 28px;border-right:1px solid var(--line);position:relative}
.timeline__step:last-child{border-right:none}
.timeline__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--on-navy);
  font-size:13px;font-weight:800;margin-bottom:18px;
}
.timeline__step h4{font-size:19px;font-weight:800;letter-spacing:-0.01em}
.timeline__step p{margin-top:10px;font-size:var(--fs-body);color:var(--text-2);line-height:var(--lh-body)}
@media (max-width:767px){
  .timeline{grid-template-columns:1fr;border-bottom:none}
  .timeline__step{border-right:none;border-bottom:1px solid var(--line)}
}

.honest{
  margin-top:56px;padding:28px var(--gut);border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg-soft);max-width:760px;margin-left:auto;margin-right:auto;text-align:left;
}
.honest p{font-size:var(--fs-body);color:var(--text-2);line-height:var(--lh-body)}
.honest p+p{margin-top:8px}

/* ---------- METHOD CARDS (다크, 스탯 대체) ---------- */
.mgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.mgrid__head h2{font-size:var(--fs-h2);font-weight:800;line-height:var(--lh-h);letter-spacing:-0.02em}
.mgrid__head p{margin-top:18px;font-size:var(--fs-body-lg);color:var(--on-navy-2);max-width:42ch}
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--on-navy-line)}
.mcard{padding:26px 8px 26px 0;border-bottom:1px solid var(--on-navy-line)}
.mcard:nth-child(odd){border-right:1px solid var(--on-navy-line);padding-right:24px}
.mcard__label{font-size:13px;color:var(--on-navy-3);font-weight:600}
.mcard__title{margin-top:10px;font-size:22px;font-weight:800;letter-spacing:-0.01em}
@media (max-width:1023px){
  .mgrid{grid-template-columns:1fr}
}
@media (max-width:539px){
  .mcards{grid-template-columns:1fr}
  .mcard:nth-child(odd){border-right:none;padding-right:0}
}

/* ---------- SERVICE (4단계 아코디언) ---------- */
.service__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.service__head h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.02em;max-width:18ch}
.service__count{font-size:13px;color:var(--text-3);font-feature-settings:"tnum"}
.service__body{margin-top:48px;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.steps{border-top:1px solid var(--line)}
.step{border-bottom:1px solid var(--line)}
.step__btn{
  width:100%;display:flex;align-items:center;gap:18px;padding:22px 4px;
  background:transparent;border:none;text-align:left;
}
.step__n{font-size:13px;color:var(--text-3);font-weight:700;font-feature-settings:"tnum";width:26px}
.step__name{font-size:20px;font-weight:700;letter-spacing:-0.01em;color:var(--text-3);transition:color .2s var(--ease-out)}
.step.is-active .step__name{color:var(--text)}
.step.is-active .step__n{color:var(--acc-deep)}
.step__panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out)}
.step.is-active .step__panel{max-height:220px}
.step__panel-in{padding:0 4px 26px 48px;font-size:var(--fs-body);color:var(--text-2);line-height:var(--lh-body);max-width:52ch}

.service__visual{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px;min-height:340px;display:flex;flex-direction:column;justify-content:center;gap:22px;
}
.flow{display:flex;flex-direction:column;gap:0}
.flow__node{display:flex;align-items:center;gap:14px}
.flow__dot{width:12px;height:12px;border-radius:50%;background:var(--line);flex:0 0 auto;transition:background .25s}
.flow__node.is-active .flow__dot{background:var(--acc)}
.flow__label{font-size:14px;color:var(--text-3);font-weight:600;transition:color .25s}
.flow__node.is-active .flow__label{color:var(--text)}
.flow__bar{width:2px;height:30px;background:var(--line);margin-left:5px}

.service__cta{margin-top:44px;display:flex;justify-content:center}

/* ---------- INCHEON ---------- */
.incheon{text-align:center}
.incheon h2{font-size:var(--fs-h2);font-weight:800;line-height:var(--lh-h);letter-spacing:-0.02em;max-width:20ch;margin:0 auto}
.incheon p{margin-top:22px;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-2);max-width:52ch;margin-left:auto;margin-right:auto}

/* ---------- FAQ ---------- */
.faq__head h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.02em}
.faq__list{margin-top:44px;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 4px;background:transparent;border:none;text-align:left;
  font-size:var(--fs-body-lg);font-weight:700;letter-spacing:-0.01em;
}
.faq__plus{width:22px;height:22px;flex:0 0 auto;position:relative}
.faq__plus::before,.faq__plus::after{
  content:"";position:absolute;background:var(--text);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.faq__plus::before{width:14px;height:2px}
.faq__plus::after{width:2px;height:14px;transition:transform .25s var(--ease-out)}
.faq__item.is-open .faq__plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-out)}
.faq__item.is-open .faq__a{max-height:260px}
.faq__a-in{padding:0 4px 26px;font-size:var(--fs-body);color:var(--text-2);line-height:var(--lh-body);max-width:64ch}
.faq__a-in .pending{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--text-3);border:1px dashed var(--line);padding:6px 10px;border-radius:8px}

/* ---------- ABOUT ---------- */
.about{text-align:center}
.about h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.02em}
.about p{margin-top:22px;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-2);max-width:56ch;margin-left:auto;margin-right:auto}
.about p+p{margin-top:14px}

/* ---------- CTA BAND ---------- */
.ctaband{background:var(--navy);color:var(--on-navy)}
.ctaband__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ctaband h2{font-size:clamp(28px,4.4vw,52px);font-weight:800;line-height:1.28;letter-spacing:-0.02em;max-width:16ch}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-deep);color:var(--on-navy-3);padding:64px 0 28px}
.footer__row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer__brand{font-size:20px;font-weight:800;color:var(--on-navy)}
.footer__meta{margin-top:14px;font-size:13px;line-height:2}
.footer__links{display:flex;gap:22px;font-size:13px}
.footer__bottom{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--on-navy-line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;
}

/* ---------- 자산 슬롯 (납품 시 이 블록·마크업 제거) ---------- */
.slot{margin:0;position:relative}
.slot__box{
  box-sizing:border-box;aspect-ratio:var(--slot-ar,3/2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:14px;text-align:center;
  border:1.5px dashed currentColor;border-radius:inherit;
  background:color-mix(in srgb, currentColor 6%, transparent);
  opacity:.7;overflow:auto;min-height:0;contain:size;
}
.slot[data-ratio="16/9"] .slot__box{--slot-ar:16/9}
.slot[data-ratio="1/1"] .slot__box{--slot-ar:1/1}
.slot[data-ratio="3/4"] .slot__box{--slot-ar:3/4}
.slot[data-ratio="4/5"] .slot__box{--slot-ar:4/5}
.slot__id{font:700 11px/1 ui-monospace,monospace;letter-spacing:.03em;opacity:.9}
.slot__meta{font-size:11px;opacity:.75}
.slot__use{font-size:11.5px;line-height:1.45;max-width:22ch;margin:2px 0 0}
.slot__prompt{margin-top:6px;max-width:94%;text-align:left}
.slot__prompt summary{cursor:pointer;font-size:11px;opacity:.85;list-style:none}
.slot__prompt summary::before{content:"▸ "}
.slot__prompt[open] summary::before{content:"▾ "}
.slot__prompt pre{
  margin:6px 0 0;padding:8px;max-height:140px;overflow:auto;
  font-size:10.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  background:color-mix(in srgb, currentColor 8%, transparent);border-radius:8px;text-align:left;
}
.slot__copy{
  margin-top:6px;padding:5px 10px;font-size:11px;cursor:pointer;
  background:transparent;appearance:none;border:1px solid currentColor;border-radius:6px;color:inherit;
}

/* ---------- 스와이프 카드 (모바일, 3개 이상 세로 스택 방지 규칙) ---------- */
@media (max-width:767px){
  .timeline{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-bottom:1px solid var(--line);
    -webkit-overflow-scrolling:touch;padding-right:10vw}
  .timeline__step{flex:0 0 82%;scroll-snap-align:start;border-right:1px solid var(--line)}
  .mcards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-top:1px solid var(--on-navy-line);padding-right:10vw}
  .mcard{flex:0 0 76%;scroll-snap-align:start;border-right:1px solid var(--on-navy-line)!important;padding-right:20px!important}
}

/* ---------- 반응형: 서비스/그리드 ---------- */
@media (max-width:1023px){
  .service__body{grid-template-columns:1fr}
  .service__visual{order:-1}
  .collage{margin-top:28px}
}
@media (max-width:539px){
  .hero{padding-top:120px}
  .nav{top:10px}
  .nav__pill{padding:8px 8px 8px 16px}
  .collage .slot{width:118px}
  .problem__item{grid-template-columns:40px 1fr;gap:14px}
  .ctaband__row{align-items:flex-start}
}

/* h1 페이지당 1개 보장을 위한 시각적 보조 타이틀 */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ============================================================
   서비스 상세 페이지 (up-check / up-page / up-content / up-track)
   ============================================================ */
.svhero{background:var(--navy);color:var(--on-navy);padding:150px 0 var(--sec-py)}
.stepbar{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.stepbar__dot{width:7px;height:7px;border-radius:50%;background:var(--on-navy-line)}
.stepbar__dot.is-current{background:var(--acc-on-navy)}
.stepbar__label{font-size:12px;color:var(--on-navy-3);letter-spacing:.06em;margin-left:6px}
.svhero h1{font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-tight);letter-spacing:-0.02em;max-width:18ch}
.svhero__lead{margin-top:20px;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--on-navy-2);max-width:44ch}
.svhero__note{
  margin-top:28px;padding:18px 22px;border:1px solid var(--on-navy-line);border-radius:var(--radius-lg);
  font-size:var(--fs-body);color:var(--on-navy-2);max-width:52ch;
}
.svhero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}

.stepnav{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stepnav__card{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.stepnav__card:hover{border-color:var(--acc);transform:translateY(-2px)}
.stepnav__dir{font-size:12px;color:var(--text-3);font-weight:700;letter-spacing:.05em}
.stepnav__name{font-size:22px;font-weight:800;letter-spacing:-0.01em}
.stepnav__card--next{text-align:right;align-items:flex-end}
@media (max-width:639px){ .stepnav{grid-template-columns:1fr} .stepnav__card--next{text-align:left;align-items:flex-start} }

/* ============================================================
   About 페이지
   ============================================================ */
/* v1.9 — 뷰포트 전체 크기 파티클 인트로로 재구성(실측 근거는 about.html
   히어로 섹션 주석 및 y-vision_분석.md v1.9 참조) */
.abouthero{
  position:relative;min-height:100vh;min-height:100dvh;background:#05070c;color:var(--on-navy);
  overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:64px;
}
.abouthero__word{font-size:clamp(48px,8.6vw,120px);font-weight:900;letter-spacing:-0.03em;line-height:1}
.abouthero__word--srtext{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.abouthero__captionblock{position:relative;z-index:2;max-width:900px;padding:0 24px;text-align:center}
.abouthero__tag{margin-top:0;font-size:clamp(18px,3vw,44px);line-height:1.5;font-weight:700;letter-spacing:-0.01em;color:var(--on-navy)}
.abouthero__scrolldown{position:relative;z-index:2;margin-top:40px}

/* ---------- 파티클 워드마크 (about.html 히어로, 뷰포트 풀사이즈) ---------- */
.particlemark--full{position:absolute;inset:0;z-index:1}
.particlemark--full canvas{width:100%;height:100%;display:block}
.pmark-caption{display:none}
.pmark-caption.is-active{display:inline}
.pmark-brand{padding:.06em .22em}
.abouthero__tag--fallback{display:none}
@media (prefers-reduced-motion:reduce){
  .particlemark--full{display:none}
  .abouthero{justify-content:center;padding-top:160px}
  .abouthero__word--srtext{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-bottom:18px}
  .abouthero__tag{display:none}
  .abouthero__tag--fallback{display:block;font-size:var(--fs-body-lg);color:var(--on-navy-2)}
}
@media (max-width:900px){
  .abouthero{min-height:60vh;min-height:60svh;padding-bottom:40px}
  .abouthero__tag{font-size:clamp(15px,4vw,22px)}
}

/* ---------- PHILOSOPHY (히어로에서 분리된 스크롤 리빌 문단, v1.9) ---------- */
.philosophy{background:var(--navy);color:var(--on-navy)}
.scrolly{max-width:640px}
.scrolly--center{max-width:720px;margin:0 auto;text-align:center}
.scrolly p{
  font-size:var(--fs-h3);line-height:1.7;font-weight:700;letter-spacing:-0.01em;
  color:var(--on-navy-3);transition:color .5s var(--ease-out);
}
.abouthero .scrolly p.is-in{color:var(--on-navy)}
.philosophy .scrolly p.is-in{color:var(--on-navy)}
.scrolly p.is-in{color:var(--text)}
.scrolly p+p{margin-top:26px}
.priority{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0}
.priority__row{display:flex;gap:20px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.priority__label{font-size:13px;color:var(--text-3);font-weight:700;letter-spacing:.05em}
.priority__text{font-size:var(--fs-body-lg);font-weight:600;max-width:56ch;line-height:var(--lh-body)}

/* ---------- OUR PROCESS 세로 타임라인 (about.html) ---------- */
.procline{position:relative;margin-top:56px;padding-top:8px}
.procline::before{
  content:"";position:absolute;left:50%;top:0;bottom:70px;width:2px;
  transform:translateX(-50%);background:var(--on-navy-line);
}
.procline__step{position:relative;width:50%;padding:0 48px 64px 0;text-align:right}
.procline__step--right{margin-left:50%;padding:0 0 64px 48px;text-align:left}
.procline__card{
  display:inline-block;text-align:left;max-width:420px;width:100%;
  border:1px solid var(--on-navy-line);border-radius:var(--radius-lg);
  padding:26px 28px;background:rgba(245,247,250,.03);
}
.procline__label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--acc-on-navy)}
.procline__card h4{margin-top:12px;font-size:22px;font-weight:800;letter-spacing:-0.01em}
.procline__card>p{margin-top:10px;font-size:var(--fs-body);color:var(--on-navy-2);line-height:var(--lh-body)}
.procline__list{margin-top:14px;padding-left:0;display:flex;flex-direction:column;gap:6px}
.procline__list li{
  list-style:none;padding-left:14px;position:relative;
  font-size:13px;color:var(--on-navy-3);line-height:1.6;
}
.procline__list li::before{content:"–";position:absolute;left:0;color:var(--on-navy-3)}
.procline__quote{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--on-navy-line);
  font-size:13px;color:var(--on-navy-3);font-style:normal;
}
.procline__node{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:38px;height:38px;border-radius:50%;background:var(--navy-deep);
  border:1px solid var(--on-navy-line);color:var(--on-navy);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;font-feature-settings:"tnum";
}
.procline__infinity{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  font-size:22px;color:var(--on-navy-3);font-weight:700;
}
@media (max-width:767px){
  .procline::before{left:19px}
  .procline__step, .procline__step--right{
    width:100%;margin-left:0;padding:0 0 48px 50px;text-align:left;
  }
  .procline__card{max-width:100%}
  .procline__node{left:19px;transform:translateX(-50%);width:32px;height:32px;font-size:12px}
  .procline__infinity{left:19px}
}

/* 서비스 생태계 그리드 (about.html "서비스 구조" 섹션) */
.eco{margin-top:44px}
.eco__group{margin-bottom:48px}
.eco__group:last-child{margin-bottom:0}
.eco__group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.eco__group-label{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--text-3)}
.eco__group-title{font-size:19px;font-weight:800;letter-spacing:-0.01em}
.eco__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.eco__card{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.eco__card:hover{border-color:var(--acc);transform:translateY(-2px)}
.eco__card--pending{border-style:dashed}
.eco__name{font-size:16px;font-weight:800;letter-spacing:-0.01em;margin-top:6px}
.eco__official{font-size:11px;color:var(--text-3)}
.eco__role{margin-top:4px;font-size:13.5px;color:var(--text-2);line-height:1.55}
.eco__status{
  align-self:flex-start;font-size:11px;font-weight:700;padding:3px 10px;
  border-radius:999px;letter-spacing:.02em;
}
.eco__status--live{background:var(--acc-soft);color:var(--acc-deep)}
.eco__status--pending{background:var(--bg-soft);color:var(--text-3);border:1px solid var(--line)}
@media (max-width:1023px){ .eco__grid{grid-template-columns:1fr 1fr} }
@media (max-width:639px){
  .eco__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:4px;margin:0 calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut)}
  .eco__card{flex:0 0 78%;scroll-snap-align:start}
}

/* ============================================================
   Contact 페이지 — 문의 폼 (contact.html)
   ============================================================ */
.contactform{margin-top:44px;display:flex;flex-direction:column;gap:22px;max-width:560px}
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-size:13px;font-weight:700;letter-spacing:-0.01em;color:var(--text)}
.field__input{
  width:100%;padding:14px 16px;font:inherit;font-size:15px;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:12px;appearance:none;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field__input::placeholder{color:var(--text-3)}
.field__input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.field__textarea{resize:vertical;min-height:120px;line-height:var(--lh-body)}
.field__check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text-2);line-height:1.6;cursor:pointer}
.field__check input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--acc-deep)}
.field__policy{font-size:12.5px;color:var(--text-3);line-height:1.7;margin-top:-8px}
.field__policy .pending{display:inline-block;margin-top:4px;font-size:12px;color:var(--text-3);border:1px dashed var(--line);padding:5px 9px;border-radius:8px}
.contactform__submit{align-self:flex-start;margin-top:4px;background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.contactform__submit:hover{background:var(--acc-deep)}
.contactform__result{
  padding:16px 18px;border-radius:12px;background:var(--acc-soft);color:var(--acc-deep);
  font-size:13.5px;line-height:1.6;
}
.contactform__result[hidden]{display:none}
@media (max-width:539px){ .contactform{max-width:100%} }