@charset "UTF-8";
/* ==========================================================================
   JTECH V4 — 국문 홈 (2026-10-21)
   v3.css 위에 얹는다. 헤더·푸터·모달·FAQ 동작은 V3 그대로 쓰고,
   본문 섹션(.x-*)과 넓은 레이아웃만 새로 정의한다.

   방향: "공장 사양서(datasheet)처럼 정확하고, 영상처럼 살아 있는"
   - 네이비가 무대, 코퍼는 행동 버튼에만(디자인 시스템 1.2 원칙 유지)
   - 수치는 고정폭 숫자 + 단위 첨자 — 사양서 문법
   - 그림자 대신 1px 헤어라인과 면 색 변화
   ========================================================================== */

.v4 {
  --x-maxw: 1240px;
  --x-navy: #071A2D;
  --x-navy-2: #0D2640;
  --x-ink: #0B1622;
  --x-steel: #315F7D;
  --x-paper: #F4F3EF;
  --x-line: #DCE2E7;
  --x-line-d: rgba(255,255,255,.14);
  --x-muted: #5C6873;
  --x-muted-d: rgba(255,255,255,.68);
  /* 강조색: 시그널 블루 — 브랜드 네이비와 같은 계열에서 채도·명도만 올려
     네이비 위에서도, 흰 바탕 위에서도 눈에 띄게 한다(흰 글자 대비 5.1:1). */
  --x-accent: #1F66E5;
  --x-accent-h: #1852BC;
  --x-accent-l: #8DB8FF;  /* 어두운 바탕 위 글자용 */
  --copper: var(--x-accent); /* V3 컴포넌트(모달 진행 막대·선택 점·포커스 링)도 같은 색을 쓰게 */
  --x-signal: #39B57A;
  --x-radius: 14px;
  --x-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --x-sec: clamp(72px, 8vw, 140px);
}

/* 넓은 화면에서 V3 의 900px 단을 V4 폭으로 넓힌다(헤더·푸터·인증 카드 포함). */
.v4 .wrap, .x-wrap {
  width: 100%;
  max-width: calc(var(--x-maxw) + var(--margin) * 2);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.v4 .hdr { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.v4 .fab { display: none !important; }
.v4 .hdr__cta { background: var(--x-accent); }
.v4 .hdr__cta:hover { background: var(--x-accent-h); } /* V4 는 하단 바 + 헤더 버튼으로 대신한다 */

.x { overflow-x: clip; }
.x-sec { padding-block: var(--x-sec); }
.x-paper { background: var(--x-paper); }
.x-navy { background: var(--x-navy); color: #fff; }

/* ---------------------------------------------------------------- Type */
.x-eyebrow {
  margin: 0 0 18px;
  font: 600 12.5px/1 var(--x-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--x-steel);
  display: inline-flex; align-items: center; gap: 10px;
}
.x-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.x-eyebrow--light { color: rgba(255,255,255,.6); }

.x-h2 {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -0.038em;
  color: var(--x-ink);
}
.x-h2--light { color: #fff; }
.x-lead {
  margin: 20px 0 0;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.7; letter-spacing: -0.015em;
  color: var(--x-muted); max-width: 60ch;
}
.x-lead--light { color: var(--x-muted-d); }

.x-head { margin-bottom: clamp(40px, 5vw, 72px); }
.x-head--split { display: grid; gap: 20px 64px; align-items: end; }
.x-head--split .x-lead { margin-top: 0; }
@media (min-width: 960px) { .x-head--split { grid-template-columns: 1.1fr 1fr; } }

.x-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-weight: 600; font-size: 16px; color: var(--x-ink);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.x-link svg { width: 16px; height: 16px; transition: transform var(--base) var(--ease); }
.x-link:hover svg { transform: translateX(4px); }
.x-link--sm { margin: 0; font-size: 13.5px; border: 0; padding: 0; color: var(--x-steel); }

/* --------------------------------------------------------------- Button */
.x-btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.x-btn svg { width: 18px; height: 18px; transition: transform var(--base) var(--ease); }
.x-btn:hover svg:last-child { transform: translateX(3px); }
.x-btn:active { transform: scale(.98); }
.x-btn--lg { --h: 60px; padding: 0 32px; font-size: 17.5px; }
.x-btn--accent { background: var(--x-accent); color: #fff; }
.x-btn--accent:hover { background: var(--x-accent-h); }
.x-btn--glass { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.x-btn--glass:hover { background: rgba(255,255,255,.16); }
.x-btn--glass svg { width: 17px; height: 17px; }
.x-btn--line { background: transparent; color: var(--x-ink); border-color: var(--x-ink); margin-top: 28px; }
.x-btn--line:hover { background: var(--x-ink); color: #fff; }

/* ------------------------------------------------------------ 01 Hero */
.x-hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-rows: 1fr auto;
  min-height: min(calc(100svh - 76px), 940px);
  background: var(--x-navy); color: #fff;
}
.x-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.x-hero__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.x-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,26,45,.94) 0%, rgba(7,26,45,.78) 38%, rgba(7,26,45,.25) 75%, rgba(7,26,45,.35) 100%),
    linear-gradient(0deg, rgba(7,26,45,.9) 0%, rgba(7,26,45,0) 40%);
}
/* 제도용 모눈 — 사양서 느낌의 아주 옅은 격자 */
.x-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
}
.x-hero__in { align-self: center; padding-block: clamp(64px, 9vh, 120px) clamp(40px, 6vh, 72px); }
.x-kicker {
  margin: 0 0 28px; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.88);
}
.x-live { width: 8px; height: 8px; border-radius: 50%; background: var(--x-signal); box-shadow: 0 0 0 0 rgba(57,181,122,.6); animation: x-pulse 2.4s infinite; }
@keyframes x-pulse { 0% { box-shadow: 0 0 0 0 rgba(57,181,122,.55); } 70% { box-shadow: 0 0 0 10px rgba(57,181,122,0); } 100% { box-shadow: 0 0 0 0 rgba(57,181,122,0); } }

.x-hero__title {
  margin: 0; max-width: 15ch;
  font-size: clamp(1.82rem, 4.34vw, 4.025rem); /* 2026-10-21 대표님 요청으로 70% */
  font-weight: 750; line-height: 1.06; letter-spacing: -0.048em;
}
.x-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, #fff 0%, #C9DCFF 40%, var(--x-accent-l) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.x-hero__lead { margin: 28px 0 0; max-width: 46ch; font-size: clamp(1.0625rem, 1.3vw, 1.3125rem); line-height: 1.7; color: rgba(255,255,255,.78); }
.x-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.x-hero__promise { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 14.5px; color: rgba(255,255,255,.64); }
.x-hero__promise svg { width: 16px; height: 16px; color: var(--x-signal); flex: none; }

.x-hero__spec { border-top: 1px solid var(--x-line-d); background: rgba(7,26,45,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.x-spec { display: grid; grid-template-columns: repeat(2, 1fr); margin-block: 0; }
.x-spec__cell { padding: 20px 0; border-bottom: 1px solid var(--x-line-d); }
.x-spec__cell:nth-child(odd) { padding-right: 16px; }
.x-spec dt { font: 600 11.5px/1 var(--x-mono); letter-spacing: .14em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.x-spec dd { margin: 10px 0 0; font-size: clamp(1.0625rem, 1.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.x-spec dd small { margin-left: 6px; font: 600 12px var(--x-mono); color: rgba(255,255,255,.55); letter-spacing: .06em; }
@media (min-width: 900px) {
  .x-spec { grid-template-columns: repeat(4, 1fr); }
  .x-spec__cell { padding: 26px 28px; border-bottom: 0; border-left: 1px solid var(--x-line-d); }
  .x-spec__cell:first-child { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------- 02 Proof bar */
.x-proofbar { border-bottom: 1px solid var(--x-line); }
.x-proofbar__grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.x-proofbar li { padding: clamp(28px, 3vw, 44px) 0; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--x-line); }
.x-proofbar li:nth-child(odd) { padding-right: 16px; }
.x-proofbar strong { font-size: clamp(1.75rem, 3.2vw, 2.875rem); font-weight: 750; letter-spacing: -0.04em; line-height: 1.05; color: var(--x-ink); }
.x-proofbar span { font-size: 15px; color: var(--x-muted); }
@media (min-width: 900px) {
  .x-proofbar__grid { grid-template-columns: repeat(4, 1fr); }
  .x-proofbar li { border-bottom: 0; border-left: 1px solid var(--x-line); padding-left: 32px; }
  .x-proofbar li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------- 03 Answer-first */
.x-answer { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1000px) { .x-answer { grid-template-columns: 1.05fr 1fr; gap: 88px; } }
.x-answer__text { margin: 28px 0 0; font-size: clamp(1.1875rem, 1.55vw, 1.5rem); line-height: 1.66; letter-spacing: -0.02em; color: var(--x-ink); font-weight: 500; }
.x-answer__sub { margin: 20px 0 0; font-size: 17px; line-height: 1.75; color: var(--x-muted); }

.x-sheet { background: #fff; border: 1px solid var(--x-line); border-radius: var(--x-radius); overflow: hidden; }
.x-sheet__head { display: flex; justify-content: space-between; padding: 16px 24px; background: var(--x-navy); color: rgba(255,255,255,.75); font: 600 12px/1 var(--x-mono); letter-spacing: .14em; }
.x-sheet__dl { margin: 0; padding: 4px 24px 8px; }
.x-sheet__dl > div { display: grid; grid-template-columns: 7.2em 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px dashed var(--x-line); }
.x-sheet__dl > div:last-child { border-bottom: 0; }
.x-sheet__dl dt { font-size: 14px; color: var(--x-muted); font-weight: 500; }
.x-sheet__dl dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--x-ink); line-height: 1.55; font-variant-numeric: tabular-nums; }
.x-sheet__dl dd small { font-weight: 500; color: var(--x-muted); font-size: 13.5px; }
.x-sheet__dl a { border-bottom: 1px solid var(--x-line); }
.x-sheet__dl a:hover { border-color: var(--x-ink); }

/* ------------------------------------------------- 04 Three questions */
.x-qa { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--x-ink); }
.x-qa__row {
  display: grid; gap: 14px 40px; padding: clamp(28px, 3.2vw, 48px) 0;
  border-bottom: 1px solid var(--x-line);
}
@media (min-width: 960px) { .x-qa__row { grid-template-columns: 90px 1fr 1.05fr; align-items: start; } }
.x-qa__no { font: 600 14px/1.9 var(--x-mono); color: var(--x-steel); }
.x-qa__q { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.75rem); font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; color: var(--x-ink); }
.x-qa__a { display: flex; gap: 16px; align-items: flex-start; }
.x-qa__a p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--x-muted); }
.x-yes {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin-top: 2px;
  border-radius: 50%; background: var(--x-navy); color: #fff; font-size: 14px; font-weight: 700;
}

/* ----------------------------------------- 05 Capability + self check */
.x-cap { display: grid; gap: 24px; }
@media (min-width: 1000px) { .x-cap { grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; } }

.x-datasheet { background: var(--x-navy); color: #fff; border-radius: var(--x-radius); padding: clamp(24px, 2.6vw, 40px); position: relative; overflow: hidden; }
.x-datasheet::after { /* 모서리 제도선 */
  content: ""; position: absolute; right: 18px; top: 18px; width: 40px; height: 40px;
  border-top: 1px solid rgba(255,255,255,.25); border-right: 1px solid rgba(255,255,255,.25);
}
.x-datasheet__title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 20px; font: 600 12px/1 var(--x-mono); letter-spacing: .14em; color: rgba(255,255,255,.55); padding-right: 56px; }
.x-datasheet .x-link--sm { color: var(--x-accent-l); letter-spacing: 0; font-family: var(--font); }
.x-datasheet dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.x-datasheet dl > div { padding: 18px 0; border-top: 1px solid var(--x-line-d); }
.x-datasheet dl > div:nth-child(odd) { padding-right: 16px; }
.x-datasheet dt { font-size: 13px; color: rgba(255,255,255,.55); }
.x-datasheet dd { margin: 6px 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.375rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.x-datasheet dd small { margin-left: 6px; font: 600 12px var(--x-mono); color: rgba(255,255,255,.55); }

.x-check { background: #fff; border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; }
.x-check__tag { margin: 0; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--x-paper); font-size: 13px; font-weight: 600; color: var(--x-steel); }
.x-check__h { margin: 14px 0 8px; font-size: clamp(1.375rem, 1.9vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--x-ink); }
.x-check__q { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.x-check__q legend { display: flex; gap: 10px; align-items: center; padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 600; color: var(--x-ink); }
.x-check__q legend span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--x-line); font: 600 12px var(--x-mono); color: var(--x-muted); flex: none; }
.x-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; background: var(--x-paper); border-radius: 12px; }
.x-seg label { position: relative; cursor: pointer; }
.x-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.x-seg span {
  display: grid; place-items: center; min-height: 46px; padding: 6px 8px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--x-muted); text-align: center; line-height: 1.3;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.x-seg label:hover span { color: var(--x-ink); }
.x-seg input:checked + span { background: #fff; color: var(--x-ink); box-shadow: 0 1px 2px rgba(11,22,34,.08), 0 0 0 1px var(--x-line); }
.x-seg input:focus-visible + span { outline: 3px solid var(--x-accent); outline-offset: 1px; }
.x-check__out { margin-top: auto; padding-top: 24px; display: grid; gap: 16px; }
.x-check__msg {
  margin: 0; padding: 16px 18px; border-radius: 10px; background: var(--x-paper);
  font-size: 15.5px; line-height: 1.65; color: var(--x-muted); min-height: 3.3em;
  border-left: 3px solid var(--x-line); transition: border-color var(--base) var(--ease), background var(--base) var(--ease);
}
.x-check__msg strong { display: block; margin-bottom: 4px; color: var(--x-ink); font-size: 16.5px; }
.x-check__out[data-state="fit"] .x-check__msg { border-left-color: var(--x-signal); background: #EFF8F3; }
.x-check__out[data-state="partial"] .x-check__msg { border-left-color: var(--x-steel); background: #EEF3F6; }

/* ------------------------------------------- 06 Process (horizontal) */
.x-process { background: var(--x-ink); color: #fff; padding-block: var(--x-sec); }
.x-process__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(36px, 4vw, 56px); }
.x-process__meter { flex: 0 0 min(260px, 30%); height: 2px; background: var(--x-line-d); position: relative; overflow: hidden; display: none; }
.x-process__meter span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: #fff; }
.x-process__track {
  list-style: none; margin: 0; display: flex; gap: 20px;
  padding: 0 var(--margin) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.x-process__track::-webkit-scrollbar { display: none; }
.x-step { flex: 0 0 min(82vw, 400px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--x-navy-2); border-radius: var(--x-radius); overflow: hidden; border: 1px solid var(--x-line-d); }
.x-step figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.x-step img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform 900ms var(--ease); }
.x-step:hover img { transform: scale(1.04); }
.x-step__body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.x-step__no { font: 600 12px/1 var(--x-mono); letter-spacing: .14em; color: var(--x-accent-l); }
.x-step h3 { margin: 0; font-size: clamp(1.375rem, 1.8vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; }
.x-step p { margin: 0; font-size: 16px; line-height: 1.72; color: var(--x-muted-d); }
.x-step--end { background: transparent; border-style: dashed; justify-content: center; }
.x-step--end .x-step__body { justify-content: center; }
.x-step--end .x-btn { align-self: flex-start; margin-top: 12px; }

/* 데스크톱: 세로 스크롤로 가로 트랙을 민다(고정 + 이동). JS 가 .is-pinned 를 붙일 때만. */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .x-process.is-pinned { padding-block: 0; }
  .x-process.is-pinned .x-process__pin { position: sticky; top: 76px; height: calc(100vh - 76px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .x-process.is-pinned .x-process__track { overflow: visible; scroll-snap-type: none; will-change: transform; padding-left: max(var(--margin), calc((100vw - var(--x-maxw)) / 2)); }
  .x-process.is-pinned .x-process__meter { display: block; }
  .x-process.is-pinned .x-step { flex-basis: clamp(340px, 30vw, 420px); }
  .x-process.is-pinned .x-step figure { aspect-ratio: 16 / 11; }
}

/* -------------------------------------------------------- 07 Delivery */
.x-lanes { display: grid; gap: 14px; }
.x-lane { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--x-line-d); border-radius: var(--x-radius); }
@media (min-width: 900px) { .x-lane { grid-template-columns: 180px 1fr; align-items: center; padding: 26px 32px; } }
.x-lane__label { margin: 0; font: 700 14px/1.2 var(--x-mono); letter-spacing: .12em; color: rgba(255,255,255,.55); }
.x-lane__label small { display: block; margin-top: 6px; font: 500 13px var(--font); letter-spacing: 0; color: rgba(255,255,255,.45); }
.x-lane__chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; counter-reset: c; }
.x-lane__chain li {
  position: relative; padding: 11px 18px; border-radius: 999px; font-size: 15.5px; font-weight: 600;
  border: 1px solid var(--x-line-d); color: rgba(255,255,255,.7);
}
.x-lane__chain li + li { margin-left: 26px; }
.x-lane__chain li + li::before { content: ""; position: absolute; left: -28px; top: 50%; width: 22px; height: 1px; background: rgba(255,255,255,.35); }
.x-lane__chain li + li::after { content: ""; position: absolute; left: -10px; top: calc(50% - 3px); border: 3.5px solid transparent; border-left: 5px solid rgba(255,255,255,.35); }
.x-lane:not(.x-lane--j) .x-lane__chain li:nth-child(2),
.x-lane:not(.x-lane--j) .x-lane__chain li:nth-child(3) { border-style: dashed; color: rgba(255,255,255,.5); }
.x-lane--j { background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.3); }
.x-lane--j .x-lane__label { color: #fff; }
.x-lane--j .x-lane__chain li { background: #fff; color: var(--x-ink); border-color: #fff; }
.x-lane--j .x-lane__chain li:last-child { background: var(--x-signal); border-color: var(--x-signal); color: #04150C; }
.x-lane--j .x-lane__chain li + li::before, .x-lane--j .x-lane__chain li + li::after { background: #fff; }
.x-lane--j .x-lane__chain li + li::after { background: none; border-left-color: #fff; }

.x-case { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) { .x-case { grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: center; } }
.x-case__fig { margin: 0; border-radius: var(--x-radius); overflow: hidden; }
.x-case__fig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.x-case__k { margin: 0; font: 600 12px var(--x-mono); letter-spacing: .14em; color: rgba(255,255,255,.55); }
.x-case__n { margin: 8px 0 0; font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 750; letter-spacing: -0.05em; line-height: 1; }
.x-case__t { margin: 20px 0 0; font-size: 17px; line-height: 1.75; color: var(--x-muted-d); }
.x-tags { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.x-tags li { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13.5px; color: rgba(255,255,255,.8); }

/* -------------------------------------------------------- 08 Products */
.x-prods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 28px); }
@media (min-width: 1000px) { .x-prods { grid-template-columns: repeat(4, 1fr); } }
.x-prod a { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.x-prod__media { display: block; aspect-ratio: 1; border-radius: var(--x-radius); overflow: hidden; background: var(--x-paper); margin-bottom: 10px; }
.x-prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.x-prod a:hover .x-prod__media img { transform: scale(1.05); }
.x-prod__cat { font: 600 11.5px var(--x-mono); letter-spacing: .12em; color: var(--x-steel); text-transform: uppercase; }
.x-prod__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); font-weight: 700; color: var(--x-ink); letter-spacing: -0.02em; }
.x-prod__name svg { width: 18px; height: 18px; flex: none; opacity: 0; transform: translateX(-6px); transition: all var(--base) var(--ease); }
.x-prod a:hover .x-prod__name svg { opacity: 1; transform: none; }
.x-prod__sum { font-size: 15px; line-height: 1.6; color: var(--x-muted); }
.x-note { margin: 36px 0 0; font-size: 15px; color: var(--x-muted); }
.x-note a { color: var(--x-ink); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ---------------------------------------------------- 09 Track record */
.x-proof { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .x-proof { grid-template-columns: 1fr 1.15fr; gap: 72px; } .x-proof .x-head { margin-bottom: 0; } }
.x-proof__fig { margin: 0; border-radius: var(--x-radius); overflow: hidden; }
.x-proof__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.v4 .creds { border-top-color: var(--x-line); }
.v4 .cred { border-radius: var(--x-radius); border-color: var(--x-line); }

/* ---------------------------------------------------------- 10 Guides */
.x-guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .x-guides { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.x-guide {
  display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 250px;
  padding: clamp(24px, 2.4vw, 34px); border-radius: var(--x-radius);
  border: 1px solid var(--x-line); background: #fff;
  transition: border-color var(--base) var(--ease), background var(--base) var(--ease), transform var(--base) var(--ease);
}
.x-guide:hover { border-color: var(--x-ink); transform: translateY(-3px); }
.x-guide__no { font: 600 12px var(--x-mono); letter-spacing: .14em; color: var(--x-steel); }
.x-guide h3 { margin: 6px 0 0; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--x-ink); }
.x-guide p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--x-muted); }
.x-guide__more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--x-ink); }
.x-guide__more svg { width: 16px; height: 16px; transition: transform var(--base) var(--ease); }
.x-guide:hover .x-guide__more svg { transform: translateX(4px); }

/* ----------------------------------------------------------- 11 Human */
.x-human { display: grid; gap: 40px; align-items: center; }
/* 사진과 '현장을 아는 사람이' 문구는 한 묶음으로 읽혀야 해서 태블릿 폭부터 나란히 둔다 */
@media (min-width: 720px) { .x-human { grid-template-columns: minmax(0, 280px) 1fr; gap: 48px; } }
@media (min-width: 1100px) { .x-human { grid-template-columns: minmax(0, 360px) 1fr; gap: 80px; } }
.x-human__fig { margin: 0; position: relative; width: 100%; max-width: 300px; border-radius: var(--x-radius); overflow: hidden; }
@media (min-width: 1100px) { .x-human__fig { max-width: 360px; } }
.x-human__fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.x-human__fig figcaption {
  position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 18px; border-radius: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
}
.x-human__fig figcaption strong { font-size: 16px; color: var(--x-ink); }
.x-human__fig figcaption span { font-size: 13px; color: var(--x-muted); }
.x-human .x-h2 { margin-top: 0; }
.x-human__list { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--x-line); }
.x-human__list li { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--x-line); }
@media (min-width: 640px) { .x-human__list li { grid-template-columns: 13em 1fr; } }
.x-human__list strong { font-size: 16px; color: var(--x-ink); }
.x-human__list span { font-size: 16px; color: var(--x-muted); line-height: 1.65; }

/* ------------------------------------------------------------- 12 FAQ */
.x-faq { display: grid; gap: 40px; }
@media (min-width: 1000px) {
  .x-faq { grid-template-columns: .8fr 1.2fr; gap: 88px; align-items: start; }
  .x-faq__head { position: sticky; top: 112px; }
}
.x-faq__h { margin: 0; font: inherit; }
/* 질문 버튼을 h3 로 감싸 V3 의 형제 선택자(.faq__q + .faq__a)가 닿지 않는다 — 여기서 다시 연다 */
.x-faq__h:has(.faq__q[aria-expanded="true"]) + .faq__a { grid-template-rows: 1fr; }
.v4 .x-faq__list { border-top: 1px solid var(--x-ink); }
.v4 .x-faq__list .faq__q { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); font-weight: 650; color: var(--x-ink); }

/* --------------------------------------------------------- 13 Contact */
.x-cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(88px, 10vw, 160px);
  background: var(--x-navy); color: #fff;
}
.x-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(31,102,229,.34), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 64px 64px;
}
.x-cta__h { margin: 0; font-size: clamp(2.25rem, 4.6vw, 4.25rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1.1; }
.x-ways { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .x-ways { grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; } }
.x-way {
  width: 100%; height: 100%; text-align: left; position: relative;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 16px; align-items: center;
  padding: 24px; border-radius: var(--x-radius); border: 1px solid var(--x-line-d);
  background: rgba(255,255,255,.04); color: #fff;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--base) var(--ease);
}
.x-way:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.x-way--main { background: var(--x-accent); border-color: var(--x-accent); }
.x-way--main:hover { background: var(--x-accent-h); border-color: var(--x-accent-h); }
.x-way__ico { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.12); }
.x-way__ico svg { width: 22px; height: 22px; }
.x-way__k { font-size: 13.5px; color: rgba(255,255,255,.7); }
.x-way__v { grid-column: 2; white-space: nowrap; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); font-weight: 700; letter-spacing: -0.02em; }
.x-way__go { grid-column: 3; grid-row: 1 / 3; }
.x-way__go svg { width: 20px; height: 20px; transition: transform var(--base) var(--ease); }
.x-way:hover .x-way__go svg { transform: translateX(4px); }
.x-cta__fine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 28px 0 0; font-size: 14.5px; color: rgba(255,255,255,.6); }
.x-cta__fine svg { width: 16px; height: 16px; }

/* ---------------------------------------------------- Mobile dock */
.x-dock { display: none; }
@media (max-width: 899px) {
  .x-dock {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
    display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px;
    border-radius: 18px; background: rgba(7,26,45,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px rgba(7,26,45,.28);
    transform: translateY(140%); transition: transform var(--slow) var(--ease);
  }
  .x-dock.is-show { transform: none; }
  .modal-open .x-dock { transform: translateY(140%); }
  .x-dock__tel { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; min-height: 50px; border-radius: 12px; color: #fff; font-weight: 600; background: rgba(255,255,255,.1); }
  .x-dock__tel svg { width: 18px; height: 18px; }
  .x-dock__cta { min-height: 50px; border: 0; border-radius: 12px; background: var(--x-accent); color: #fff; font-weight: 700; font-size: 16px; }
  .v4 .ftr { padding-bottom: 110px; }
}

/* ---------------------------------------------------------- Reveal */
.x-reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.x-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .x-reveal { opacity: 1; transform: none; transition: none; }
  .x-live { animation: none; }
  .x-hero__media video { display: none; }
  .x-hero__media { background: url(/assets/img/hero-poster.webp) center / cover; }
}

/* 좁은 화면 다듬기 */
@media (max-width: 599px) {
  .x-hero__cta .x-btn { width: 100%; }
  .x-seg span { font-size: 13.5px; }
  .x-lane__chain li + li { margin-left: 0; }
  .x-lane__chain li + li::before, .x-lane__chain li + li::after { display: none; }
  .x-lane__chain { flex-direction: column; align-items: stretch; gap: 6px; }
  .x-lane__chain li { text-align: center; }
  .x-datasheet dl { grid-template-columns: 1fr 1fr; }
  .x-sheet__dl > div { grid-template-columns: 6em 1fr; gap: 12px; }
}

/* 2026-10-22: 홈 푸터 버튼은 강조색(시그널 블루) — 네이비 푸터 위에서 보이게 */
.v4 .ftr .btn--copper { background: var(--x-accent); color: #fff; }
.v4 .ftr .btn--copper:hover { background: var(--x-accent-h); }