/* 홈 전용 — 스크롤 연동 3D 장면 위에 흐르는 레이아웃 (Kage 랜딩 구조 참고) */
body.xp { background: var(--ink); color: #e6ebf3; }
body.xp main { position: relative; z-index: 2; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.xp-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(11,18,32,0) 40%, rgba(11,18,32,.78) 100%); }
.xp-grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 160px 160px; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-4%); } 60% { transform: translate(-4%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { .xp-grain { animation: none; } }
body.xp-static #gl, body.xp-static .xp-grain { display: none; }
/* 사진 모드: 챕터별 이미지가 스크롤 진행률로 크로스페이드·시차 이동한다 */
#photo { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #05070c; }
#photo picture, #photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#photo img { object-fit: cover; object-position: 62% 50%; opacity: 0; transform-origin: 62% 50%; }  /* will-change는 JS가 보이는 장에만 부여 */
@media (orientation: portrait) { #photo img { object-position: 50% 68%; transform-origin: 50% 68%; } }
body.xp-photo #gl { display: none; }
body.xp-gl #photo { display: none; }  /* 3D 모드에서는 사진 레이어(불투명 배경)가 캔버스를 가리지 않도록 숨긴다 — fallbackStatic이 xp-gl을 떼면 다시 보인다 */
body.xp-photo.xp-static .xp-hero { background: none; }
body.xp-photo .xp-sec::before, body.xp-photo .xp-hero::before { display: block; }

/* 프리로더 */
#pre { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: grid; place-items: center; transition: opacity .6s ease, visibility 0s linear .6s; }
#pre.done { opacity: 0; visibility: hidden; }
.pre-box { display: grid; gap: 14px; justify-items: center; width: min(320px, 70vw); }
.pre-box img { height: 44px; width: auto; }
.pre-bar { width: 100%; height: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
#pre-fill { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); transition: transform .12s linear; }
.pre-meta { display: flex; justify-content: space-between; width: 100%; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #b3bdcc; }

/* 헤더: 홈에서는 투명하게 떠 있고, 아래로 스크롤하면 숨김 */
body.xp .site-header { background: linear-gradient(180deg, rgba(11,18,32,.72), rgba(11,18,32,0)); backdrop-filter: none; border-bottom: 0; transition: transform .35s ease, background .3s; }
body.xp .site-header.stuck { background: rgba(11,18,32,.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); }
body.xp .site-header.hide { transform: translateY(-100%); }
body.xp .site-header:focus-within { transform: none; }

/* 본문 가독성 스크림(검수 28): 글이 놓이는 왼쪽 영역에 네이비 그라데이션을 깔아 배경 위치와 무관하게 대비를 확보한다 */
.xp-sec::before, .xp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,18,32,.88) 0%, rgba(11,18,32,.78) 34%, rgba(11,18,32,.38) 58%, rgba(11,18,32,0) 78%); }
.xp-hero::before { background: linear-gradient(90deg, rgba(11,18,32,.86) 0%, rgba(11,18,32,.7) 36%, rgba(11,18,32,.28) 60%, rgba(11,18,32,0) 80%), linear-gradient(0deg, rgba(11,18,32,.75) 0%, rgba(11,18,32,0) 40%); }
@media (max-width: 900px) { .xp-sec::before, .xp-hero::before { background: linear-gradient(180deg, rgba(11,18,32,.84) 0%, rgba(11,18,32,.62) 55%, rgba(11,18,32,.3) 100%); } }
body.xp-static .xp-sec::before, body.xp-static .xp-hero::before { display: none; }
/* 공통 섹션: 전체 높이, 장면이 비치도록 배경 없음 */
/* 캔버스(z0)·비네트·그레인(z1)이 main 안에 있으므로 섹션은 z2로 올려 항상 장면 위에 그린다 */
.xp-hero, .xp-sec { position: relative; z-index: 2; }
.xp-sec { min-height: 100vh; display: flex; align-items: center; padding: clamp(80px, 12vh, 140px) 0; }
.xp-sec .container { position: relative; }
.xp-eyebrow { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--green); font-weight: 700; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.xp-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green); }
.xp-head { font-size: clamp(2rem, 1.3rem + 3.2vw, 4rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; color: #fff; margin: 0 0 .5em; max-width: 14ch; text-wrap: balance; }
.xp-lead { font-size: 1.08rem; color: #c3cbd8; max-width: 58ch; }
.xp-head, .xp-lead, .xp-eyebrow, .xp-hero h1, .xp-hero .hero-sub, .xp-hero .eyebrow { text-shadow: 0 1px 2px rgba(5,9,18,.7), 0 0 24px rgba(5,9,18,.5); }
@media (max-width: 900px) {
  /* 작은 화면: 장면이 글자 뒤로 크게 들어오므로 패널을 더 불투명하게, 비네트를 더 어둡게 */
  body.xp .path-card, body.xp .rnd-card, body.xp .company-brief, body.xp .experiments, body.xp .step, body.xp .inquiry, body.xp .contact-direct, body.xp .feature-list li, body.xp .card, body.xp .gallery-item { background: rgba(11,18,32,.84); }
  .xp-vignette { background: radial-gradient(ellipse at 50% 35%, rgba(11,18,32,.15) 20%, rgba(11,18,32,.82) 100%); }
}
.xp-panel { background: rgba(11,18,32,.58); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); }
.xp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .xp-grid-2 { grid-template-columns: 1fr; } }

/* 단어 리빌 */
.mask-words .mw-line { display: block; }
.mask-words .mw { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .14em 0 .12em; margin: -.14em 0 -.12em; }
.mask-words { line-height: 1.14; }
.mask-words .mw-in { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.mask-words.rv-in .mw-in { transform: none; opacity: 1; }
.mask-words.rv-in .mw:nth-child(2) .mw-in { transition-delay: .06s; } .mask-words.rv-in .mw:nth-child(3) .mw-in { transition-delay: .12s; }
.mask-words.rv-in .mw:nth-child(4) .mw-in { transition-delay: .18s; } .mask-words.rv-in .mw:nth-child(5) .mw-in { transition-delay: .24s; }
.mask-words.rv-in .mw-line:nth-child(2) .mw-in { transition-delay: .3s; } .mask-words.rv-in .mw-line:nth-child(3) .mw-in { transition-delay: .45s; }
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.rv.rv-in { opacity: 1; transform: none; }
body.xp-static .rv, body.xp-static .mask-words .mw-in { opacity: 1 !important; transform: none !important; transition: none !important; }

/* 첫 화면 */
.xp-hero { min-height: 100vh; display: grid; align-items: end; padding-bottom: 0; }
.xp-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; min-height: 100vh; padding-top: 110px; padding-bottom: 36px; gap: 20px 32px; }
.xp-hero-main { align-self: center; max-width: 900px; }
/* 움직임 토글 (우상단 고정, 헤더 아래) */
.xp-motion { position: fixed; right: 18px; top: 84px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; background: rgba(11,18,32,.78); color: #cbd5e1; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .78rem; cursor: pointer; backdrop-filter: blur(8px); }
.xp-motion:hover { color: #fff; border-color: rgba(255,255,255,.35); }
body.xp-loading .xp-motion { opacity: 0; }
.xp-hero .eyebrow { margin-bottom: 1.2em; }
.xp-hero h1 { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.8rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 .45em; }
.xp-hero .hero-sub { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); color: #c8d0dc; max-width: 54ch; margin-bottom: 1.6em; }
.xp-hero .hero-cta { margin-bottom: 1.4em; }
.xp-side { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; writing-mode: vertical-rl; letter-spacing: .34em; font-size: .72rem; text-transform: uppercase; color: #b3bdcc; padding-top: 10px; }
.xp-side::after { content: ""; display: block; width: 1px; height: 80px; background: linear-gradient(180deg, var(--green), transparent); margin: 16px auto 0; }
.xp-hero-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.xp-counter { display: flex; gap: 22px; align-items: baseline; list-style: none; margin: 0; padding: 0; }
.xp-counter a { color: #cbd5e1; text-decoration: none; font-size: clamp(1.1rem, 1rem + 1vw, 1.9rem); font-weight: 300; letter-spacing: .04em; display: grid; gap: 2px; }
.xp-counter a small { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: #b3bdcc; font-weight: 700; }  /* 네이비 위 9.6:1, 78% 스크림+흰 배경 최악 4.99:1 */
.xp-counter a:hover, .xp-counter a:focus-visible { color: #fff; }
.xp-hero-card { display: flex; gap: 12px; align-items: center; background: rgba(11,18,32,.6); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 14px 8px 8px; text-decoration: none; color: #e2e8f0; backdrop-filter: blur(8px); }
.xp-hero-card img { width: 84px; height: 56px; object-fit: cover; border-radius: 8px; }
.xp-hero-card span { font-size: .82rem; line-height: 1.35; }
.xp-hero-card:hover { border-color: rgba(111,176,48,.6); color: #fff; }
.xp-hero .hero-caption { grid-column: 1 / -1; margin: 0; }
body.xp-static .xp-hero { background: linear-gradient(90deg, rgba(11,18,32,.96) 0%, rgba(11,18,32,.75) 50%, rgba(11,18,32,.35) 100%), url("/assets/img/p01-pump-wide.jpg") center / cover no-repeat; }
.xp-scrollhint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: #b3bdcc; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.xp-scrollhint::after { content: ""; width: 1px; height: 36px; background: linear-gradient(180deg, #b3bdcc, transparent); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scaleY(.3); transform-origin: top; opacity: .3; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xp-scrollhint::after { animation: none; } }
@media (max-width: 900px) {
  .xp-hero .container { grid-template-columns: 1fr; padding-top: 92px; }
  .xp-side { display: none; }
  .xp-hero-card { display: none; }
  .xp-counter { gap: 16px; }
}
@media (max-width: 640px) {
  /* 모바일 첫 화면 밀도 완화(7차 지적 23): 제목 44~48px, 행간 1.55, 제목–CTA 간격 32px, 상태 배지는 2개만 */
  .xp-hero h1 { font-size: clamp(2.6rem, 11.5vw, 3rem); line-height: 1.08; }
  .xp-hero .hero-sub { line-height: 1.55; margin-bottom: 32px; }
  .xp-hero .hero-cta { margin-bottom: 28px; }
  .xp-hero .hero-status li:nth-child(3) { display: none; }
  .xp-hero .eyebrow { font-size: .72rem; }
  .xp-motion { top: 76px; padding: 6px 10px; font-size: .72rem; }
}

/* 우측 레일 — 챕터 점과 진행 막대 */
.xp-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.xp-rail-track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); transform: translateX(-50%); z-index: -1; }
.xp-rail-bar { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--green); transform: translateX(-50%) scaleY(0); transform-origin: top; z-index: -1; }
.xp-rail button { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: #94a3b8; }
.xp-rail button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #475569; transition: transform .25s, background .25s; }
.xp-rail button.on::before { background: var(--green); transform: scale(1.5); box-shadow: 0 0 0 5px rgba(111,176,48,.18); }
.xp-rail button span { position: absolute; right: 36px; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; font-size: .72rem; letter-spacing: .08em; color: #cbd5e1; background: rgba(11,18,32,.8); padding: 4px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.xp-rail button:hover span, .xp-rail button:focus-visible span { opacity: 1; transform: translateY(-50%); }
.xp-side { margin-right: 10px; }
@media (max-width: 900px) { .xp-rail { right: 8px; gap: 10px; } .xp-rail button span { display: none; } }
@media (max-width: 640px) { .xp-rail { display: none; } }

/* 홈 콘텐츠 카드류를 어두운 유리 패널로 */
body.xp .path-card, body.xp .rnd-card, body.xp .company-brief, body.xp .experiments, body.xp .step, body.xp .inquiry, body.xp .contact-direct, body.xp .feature-list li, body.xp .card {
  background: rgba(15,23,42,.62); border-color: rgba(255,255,255,.08); color: #e2e8f0; box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.xp .path-card { border-top-color: var(--green); }
body.xp .kicker, body.xp .page-header .kicker { color: #a3e06a; }  /* 어두운 패널 위 소제목: rgba(15,23,42,.62) 합성 배경 기준 약 9:1 */
body.xp .path-collaboration { border-top-color: #93c5fd; }
body.xp h2, body.xp h3, body.xp h4 { color: #fff; }
body.xp .lead, body.xp .step p, body.xp .note, body.xp .tab-intro, body.xp .form-consent, body.xp figcaption, body.xp .card p, body.xp .feature-list li span { color: #b6c0ce; }
body.xp .kv > div { border-bottom-color: rgba(255,255,255,.1); }
body.xp .kv dt { color: #cbd5e1; }
body.xp a:not(.btn) { color: #a3e06a; }
body.xp a:not(.btn):hover { color: #c6f29b; }
body.xp .section-paths, body.xp .section-evidence, body.xp .section-rnd, body.xp .section-contact { background: transparent; }
body.xp figure img { background: rgba(255,255,255,.04); }
body.xp .gallery-item { background: rgba(15,23,42,.5); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 10px; backdrop-filter: blur(10px); }
body.xp .gallery-item figcaption { padding: 6px 4px 0; }
body.xp .step-n { background: var(--green); color: var(--ink); }
body.xp .check li::before { background: rgba(111,176,48,.25); }
body.xp .tabs { border-bottom-color: rgba(255,255,255,.12); }
body.xp .tabs [role="tab"] { color: #b3bdcc; }
body.xp .tabs [role="tab"][aria-selected="true"] { color: #fff; }
body.xp .field input, body.xp .field textarea { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.16); }
body.xp .field input::placeholder, body.xp .field textarea::placeholder { color: #6b7a90; }
body.xp .field label { color: #e2e8f0; }
body.xp .mock-note, body.xp .notice { background: rgba(253,230,138,.14); color: #fde68a; }
body.xp .btn-outline-dark { color: #fff; border-color: rgba(255,255,255,.6); }
body.xp .btn-outline-dark:hover { background: #fff; color: var(--ink); }
body.xp .btn-dark { background: #fff; color: var(--ink); border-color: #fff; }
body.xp .btn-dark:hover { background: #e2e8f0; }
body.xp .btn-ghost { color: #e2e8f0; border-color: rgba(255,255,255,.3); }
body.xp .img-type { filter: saturate(.9) brightness(1.05); }
body.xp .table th { background: rgba(255,255,255,.06); color: #fff; } body.xp .table td { border-bottom-color: rgba(255,255,255,.1); }
body.xp .form-result.ok { color: #a3e06a; }
body.xp .site-footer { position: relative; z-index: 2; margin-top: 0; border-top: 1px solid rgba(255,255,255,.08); }

/* 마지막 장: 큰 CTA */
.xp-fin-cta { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.8rem); font-weight: 700; color: var(--ink); background: var(--green); padding: 18px 34px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 40px rgba(111,176,48,.3); }
.xp-fin-cta:hover { background: #7fc23c; color: var(--ink); }
.xp-scene-note { font-size: .78rem; color: #b3bdcc; margin-top: 10px; }  /* 네이비 위 9.6:1, 78% 스크림+흰 배경 최악 4.99:1 */