/*
 * XR·VP Studio — Index Layout CSS
 *
 * axdxrobot 디자인 시스템을 상속.
 * 이 파일은 xrvpstudio 전용 오버라이드만 포함합니다.
 *
 * 로드 순서 (base.html):
 *   1. css/axdxrobot/root.css
 *   2. css/axdxrobot/layout_axdxrobot_index.css
 *   3. 이 파일  ← xrvpstudio 전용 오버라이드
 */

/* ═══════════════════════════════════════════════════════════
   XR·VP Studio — 섹션 내비게이션 (captury .subnav 이식)
   position:sticky → 헤더(45px) 바로 아래 고정
   ═══════════════════════════════════════════════════════════ */
.xrv-subnav {
  position:        sticky;
  top:             var(--header-height, 40px);   /* 고정 헤더 아래 */
  z-index:         120;
  background:      var(--bg-subnav);   /* root.css: --bg-subnav: #000 */
  backdrop-filter: blur(18px) saturate(1.4);
  border-top:      1px solid #444;
  border-bottom:   1px solid #444;
}
/* ── 스크롤 진행 바 (captury #pbar 이식 → subnav 상단 고정) ── */
.xrv-subnav__progress {
  position:         absolute;
  top:              0;
  left:             0;
  width:            100%;
  height:           2px;
  background:       linear-gradient(90deg, #33E0C4, #7C5CFF);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .1s linear;
  pointer-events:   none;
  z-index:          1;
}
.xrv-subnav__row {
  display:         flex;
  justify-content: center;
  gap:             4px;
  flex-wrap:       wrap;
  padding:         11px 24px;
  max-width:       1200px;
  margin:          0 auto;
}
.xrv-subnav__link {
  padding:         9px 18px;
  font-family:     var(--font-family);
  font-size:       var(--font-size-base);
  font-weight:     var( --font-weight-medium);
  letter-spacing:  0.01em;
  color:           rgba(238, 240, 246, .55);
  border-radius:   8px;
  transition:      color .2s, background .2s;
  white-space:     nowrap;
  text-decoration: none;
}
.xrv-subnav__link:hover,
.xrv-subnav__link.is-active {
  color:           #33E0C4;
  background:      rgba(255, 255, 255, .05);
}
/* 문의 버튼 — 브라우저 기본 button 스타일 제거 + CTA 강조 */
button.xrv-subnav__link {
  background: none;
  border:     none;
  cursor:     pointer;
  font:       inherit;
  line-height: inherit;
}
/* 기본 상태는 다른 링크와 동일하게 무채색(회색)으로 두어 "항상 활성화된
   것처럼" 보이지 않게 하고, 테두리만 남겨 버튼임을 은은히 표시.
   실제 강조(teal 채움)는 hover/focus 시에만 나타나 명확한 CTA 피드백을 준다.
   ※ 클래스 두 개를 묶어 명시(.xrv-subnav__link.xrv-subnav__cta) — 위
   button.xrv-subnav__link 리셋 규칙(요소+클래스, 상세도 0,1,1)이 background·
   border 를 다시 덮어쓰지 않도록 상세도(0,2,0 / 0,3,0)를 확실히 앞세운다. */
.xrv-subnav__link.xrv-subnav__cta {
  color:         rgba(238, 240, 246, .55);
  background:    transparent;
  border:        1px solid rgba(255, 255, 255, .16);
  padding:       8px 18px;   /* 1px border 보정 */
  border-radius: 8px;
  transition:    color .2s, background .2s, border-color .2s;
}
.xrv-subnav__link.xrv-subnav__cta:hover,
.xrv-subnav__link.xrv-subnav__cta:focus-visible {
  color:        #04140F;
  background:   #33E0C4;
  border-color: #33E0C4;
}

/* ═══════════════════════════════════════════════════════════
   XR·VP Studio — Overview Section (captury .sec 이식)
   .xrv-ov 스코프로 격리
   ═══════════════════════════════════════════════════════════ */
.xrv-ov {
  padding:           108px 0;
  background:        #0a0c12;
  position:          relative;
  scroll-margin-top: calc(var(--header-height, 45px) + 46px); /* sticky header + subnav */
}
.xrv-ov__wrap {
  max-width: var(--mha-wrap-max);  /* uiux-wrap 동일 — 1450px */
  margin:    0 auto;
  padding:   0 28px;
}

/* ── 섹션 헤더 ─────────────────────────────────────────── */
.xrv-ov__head {
  max-width:  720px;
  margin:     0 auto 64px;
  text-align: center;
}
.xrv-ov__label {
  font-family:     var(--font-family);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  letter-spacing:  .16em;
  text-transform:  uppercase;
  color:           #33E0C4;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  margin-bottom:   0px;
}
.xrv-ov__label::before,
.xrv-ov__label::after {
  content:    "";
  width:      24px;
  height:     1px;
}
.xrv-ov__label::before { background: linear-gradient(90deg, transparent, #33E0C4); }
.xrv-ov__label::after  { background: linear-gradient(90deg, #33E0C4, transparent); }

.xrv-ov__title {
  font-family:    var(--font-family);
  font-size:      clamp(2.4rem, 4.56vw, 3.6rem);
  font-weight:    500;
  letter-spacing: -.025em;
  line-height:    1.14;
  color:          #eef0f6;
  margin-top:     0.4em;   /* 브라우저 기본(~0.83em)의 1/2 */
  margin-bottom:  20px;
}
.xrv-ov__desc {
  font-size:   1.06rem;
  color:       rgba(238, 240, 246, .6);
  font-weight: 300;
  line-height: 1.85;
}
.xrv-ov__desc--mt { margin-top: 16px; }

/* ── 핵심 가치 라벨 ─────────────────────────────────────── */
.xrv-ov__kv-label {
  text-align:     center;
  font-family:    var(--font-family);
  font-size:      var(--font-size-lg);
  font-weight:    var(--font-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(238, 240, 246, .3);
  margin-bottom:  24px;
}

/* ── Stats Grid ─────────────────────────────────────────── */
.xrv-ov__stats {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  background:            rgba(255, 255, 255, .07);
  border:                1px solid rgba(255, 255, 255, .07);
  border-radius:         14px;
  overflow:              hidden;
}
.xrv-ov__stat {
  background:  #0a0c12;
  padding:     36px 24px;
  text-align:  center;
  transition:  background .25s;
}
.xrv-ov__stat:hover { background: rgba(255, 255, 255, .03); }

/* captury .stat .n 이식 — 대형 teal 키워드 */
.xrv-ov__stat-n {
  font-family:          var(--font-family);
  font-weight:          500;
  font-size:            clamp(2.28rem, 4.08vw, 3.12rem);
  line-height:          1;
  margin-bottom:        8px;
  color:                #33E0C4;
  font-variant-numeric: tabular-nums;
}
.xrv-ov__stat-t {
  font-size:     .95rem;
  color:         #eef0f6;
  font-weight:   500;
  margin-bottom: 4px;
  line-height:   1.3;
}
.xrv-ov__stat-s {
  font-size:   .78rem;
  color:       rgba(238, 240, 246, .4);
  font-weight: 300;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .xrv-ov                { padding: 74px 0; }
  .xrv-ov__stats         { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   XR·VP Studio — Use Cases (captury .sec#usecases 이식)
   .xrv-uc 스코프로 격리 / 비디오 배경 카드 2×2 그리드
   ═══════════════════════════════════════════════════════════ */
.xrv-uc {
  padding:           108px 0 27px;
  background:        #06080d;
  position:          relative;
  scroll-margin-top: calc(var(--header-height, 45px) + 46px);
}
.xrv-uc__wrap {
  max-width: var(--mha-wrap-max);
  margin:    0 auto;
  padding:   0 28px;
}

/* ── 섹션 헤더 ── */
.xrv-uc__head {
  max-width:  720px;
  margin:     0 auto 56px;
  text-align: center;
}
.xrv-uc__label {
  font-family:     var(--font-family);
  font-size:       .72rem;
  font-weight:     700;
  letter-spacing:  .16em;
  text-transform:  uppercase;
  color:           #33E0C4;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  margin-bottom:   14px;
}
.xrv-uc__label::before { content: ""; width: 24px; height: 1px; background: linear-gradient(90deg, transparent, #33E0C4); }
.xrv-uc__label::after  { content: ""; width: 24px; height: 1px; background: linear-gradient(90deg, #33E0C4, transparent); }
.xrv-uc__title {
  font-family:    var(--font-family);
  font-size:      clamp(2.2rem, 4vw, 3.2rem);
  font-weight:    500;
  letter-spacing: -.025em;
  line-height:    1.14;
  color:          #eef0f6;
  margin-top:     0.4em;
  margin-bottom:  16px;
}
.xrv-uc__desc {
  font-size:   1.04rem;
  color:       rgba(238, 240, 246, .55);
  font-weight: 300;
  line-height: 1.8;
}

/* ── 2×2 카드 그리드 ── */
.xrv-uc__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   20px;
}
.xrv-uc__card {
  position:    relative;
  border-radius: 14px;
  overflow:    hidden;
  border:      1px solid rgba(255, 255, 255, .08);
  min-height:  340px;
  display:     flex;
  flex-direction: column;
  justify-content: flex-start;
  background:  #0a0c12;
  transition:  transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
}
.xrv-uc__card:hover {
  transform:    translateY(-5px);
  box-shadow:   0 24px 56px rgba(0,0,0,.5);
  border-color: rgba(255, 255, 255, .14);
}

/* 비디오 배경 */
.xrv-uc__vis {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.xrv-uc__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    .54;
  transition: opacity .35s;
}
.xrv-uc__card:hover .xrv-uc__video { opacity: .71; }

/* 컬러 그라디언트 오버레이 */
.xrv-uc__grad {
  position: absolute;
  inset:    0;
  opacity:  .5;
}
.xrv-uc__card--c1 .xrv-uc__grad { background: radial-gradient(ellipse 90% 70% at 70% 20%, rgba(51,224,196,.22), transparent 60%); }
.xrv-uc__card--c2 .xrv-uc__grad { background: radial-gradient(ellipse 90% 70% at 30% 20%, rgba(124,92,255,.26), transparent 60%); }
.xrv-uc__card--c3 .xrv-uc__grad { background: radial-gradient(ellipse 90% 70% at 70% 20%, rgba(51,224,196,.18), transparent 60%); }
.xrv-uc__card--c4 .xrv-uc__grad { background: radial-gradient(ellipse 90% 70% at 30% 20%, rgba(124,92,255,.22), transparent 60%); }

/* 텍스트 가독성 스크림 */
.xrv-uc__scrim {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(to bottom, rgba(8,9,13,.07) 0%, rgba(8,9,13,.46) 55%, rgba(8,9,13,.64) 100%);
}

/* 우상단 아이콘 */
.xrv-uc__ic {
  position:        absolute;
  top:             24px;
  right:           24px;
  z-index:         2;
  width:           44px;
  height:          44px;
  border-radius:   11px;
  background:      rgba(255, 255, 255, .06);
  border:          1px solid rgba(255, 255, 255, .12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #33E0C4;
}
.xrv-uc__ic svg { width: 20px; height: 20px; }

/* 카드 본문 */
.xrv-uc__body {
  position: relative;
  z-index:  2;
  padding:  28px 30px 32px;
  width:    50%;
}
.xrv-uc__tag {
  font-family:    var(--font-family);
  font-size:      .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          #33E0C4;
  margin-bottom:  10px;
  padding-right:  52px;
}
.xrv-uc__body h3 {
  font-family:    var(--font-family);
  font-size:      1.35rem;
  font-weight:    500;
  color:          #eef0f6;
  margin-bottom:  10px;
  line-height:    1.2;
}
.xrv-uc__body p {
  font-size:   .9rem;
  color:       rgba(238, 240, 246, .62);
  font-weight: 300;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .xrv-uc                { padding: 74px 0 18px; }
  .xrv-uc__grid          { grid-template-columns: 1fr; }
  .xrv-uc__card          { min-height: 280px; }
}

/* =============================================================
   Brand Statement — xrvpstudio: 50/50 split (dark bg + video)
   .ax-stmt 클래스 공통 적용 (두 섹션 모두 커버).
   ============================================================= */
.ax-stmt {
  height: 55vh;
  background: #000;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}

/* 전체 너비 헤더 행 — 흰 배경 / 검정 텍스트 / 중앙 정렬 */
.ax-stmt .ax-stmt__inner {
  grid-column: 1 / -1;
  height: 25vh;
  max-width: 100%;
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 50px 100px 50px 100px;
}
.ax-stmt .ax-stmt__inner .ax-stmt__text {
  color: var(--color-heading, #0a0a0a);
  text-align: center;
}

.ax-stmt .ax-stmt__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 50px;
  min-width: 0;
  min-height: 0;        /* grid child overflow 방지 */
  overflow-y: auto;     /* 콘텐츠가 80vh 초과 시 스크롤 */
}

/* Eyebrow badge */
.ax-stmt .ax-stmt__eyebrow {
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

.ax-stmt .ax-stmt__headline {
  font-family: var(--font-family);
  font-size: clamp(20px, 5.5vw, 35px);
  font-weight: var(--font-weight-medium);
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

/* Blue accent second line */
.ax-stmt .ax-stmt__headline-accent {
  display: block;
  font-family: var(--font-family);
  color: #3b82f6;
}

/* Lead text */
.ax-stmt .ax-stmt__lead {
  font-family: var(--font-family);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Blue horizontal divider */
.ax-stmt .ax-stmt__divider {
  border: none;
  border-top: 2px solid #3b82f6;
  width: 44px;
  margin: 0 0 20px;
}

/* Feature grid — 2×2 */
.ax-stmt .ax-stmt__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 20px;
  margin: 40px 0 24px;
}

.ax-stmt .ax-stmt__feat {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.ax-stmt .ax-stmt__feat-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: #fff;
}

.ax-stmt .ax-stmt__feat-icon svg {
  width: 100%;
  height: 100%;
}

.ax-stmt .ax-stmt__feat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ax-stmt .ax-stmt__feat-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

.ax-stmt .ax-stmt__feat-desc {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
  margin: 0;
}

/* Down chevron */
.ax-stmt .ax-stmt__more {
  display: flex;
  align-items: center;
  color: #3b82f6;
  margin-top: 4px;
}

/* Use-case list */
.ax-stmt .ax-stmt__uc-label {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin: 24px 0 8px;
}

.ax-stmt .ax-stmt__usecases {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ax-stmt .ax-stmt__uc-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ax-stmt .ax-stmt__uc-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
  min-width: 110px;
}

.ax-stmt .ax-stmt__uc-desc {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 1.55;
}

.ax-stmt .ax-stmt__text {
  font-family: var(--font-family);
  font-size: clamp(10px, 1.35vw, 15px);
  font-weight: var(--font-weight-normal);
  color: #fff;
  line-height: 1.9;
  text-align: left;
}

.ax-stmt .ax-stmt__media {
  position: relative;
  overflow: hidden;
  min-width: 0;
  /* height: 80vh 그리드에서 stretch로 전체 채움. 비율은 video object-fit:cover 가 담당 */
}
.ax-stmt .ax-stmt__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.40) 100%);
  pointer-events: none;
}

.ax-stmt .ax-stmt__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .ax-stmt {
    height: auto;          /* 모바일: 1컬럼이므로 콘텐츠 높이에 맞춤 */
    grid-template-columns: 1fr;
  }
  .ax-stmt .ax-stmt__inner {
    padding: 48px 28px 36px;
  }
  .ax-stmt .ax-stmt__media {
    aspect-ratio: 16 / 9; /* 모바일: 1컬럼에서 16/9 비율 유지 */
    height: auto;
  }
  .ax-stmt .ax-stmt__copy {
    padding: 56px 28px 48px;
    overflow-y: visible;
  }
}

@media (max-width: 480px) {
  .ax-stmt .ax-stmt__headline {
    font-size: clamp(20px, 7vw, 32px);
    margin-bottom: 14px;
  }
  .ax-stmt .ax-stmt__text { font-size: 13px; }
  .ax-stmt .ax-stmt__features {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   Brand Statement — Image Comparison Slider (첫 번째 #ax-stmt-captury 전용)
   .ax-stmt--bg-slide 클래스가 붙은 섹션에만 적용됩니다.
   ============================================================= */

/* .ax-stmt__copy: position 기준점 + 이미지 클리핑 컨테이너 */
.ax-stmt--bg-slide .ax-stmt__copy {
  position: relative;
  overflow: hidden;
}

/* 텍스트 노드를 슬라이더 레이어 위로 올림 */
.ax-stmt--bg-slide .ax-stmt__copy > :not(.ax-stmt__bg-wrap) {
  position: relative;
  z-index: 2;
}

/* 슬라이더 래퍼: pointer-events none → 텍스트 상호작용 유지, 핸들만 예외 */
.ax-stmt--bg-slide .ax-stmt__bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --cmp-pos: 50%;  /* JS가 이 변수를 업데이트 */
}

/* 이미지 공통 레이어 */
.ax-stmt__cmp-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* 베이스 이미지: clip-path로 왼쪽 영역만 표시 (--reveal과 CSS 교환)
   DOM 순서상 --base가 먼저 오므로 z-index:2로 강제로 위로 올림 */
.ax-stmt__cmp-img--base {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--cmp-pos)) 0 0);
}

/* 리빌 이미지: 전체 표시 — --base 아래 깔리는 배경 레이어 (--base와 CSS 교환) */
.ax-stmt__cmp-img--reveal {
  z-index: 1;
}

/* 드래그 핸들: 히트 영역 40px(UX) / 시각선은 내부 2px 선으로 분리 */
.ax-stmt__cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cmp-pos);
  width: 40px;
  transform: translateX(-50%);
  z-index: 3;
  cursor: ew-resize;
  pointer-events: all;
  outline: none;
  touch-action: none;
}

/* 시각적 분리선 */
.ax-stmt__cmp-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.82);
  transform: translateX(-50%);
  pointer-events: none;
}

/* 중앙 드래그 버튼 */
.ax-stmt__cmp-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #111;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ax-stmt__cmp-handle:hover   .ax-stmt__cmp-btn,
.ax-stmt__cmp-handle:focus-visible .ax-stmt__cmp-btn {
  transform: translate(-50%, -50%) scale(1.14);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.52);
}

/* 텍스트 가독성 딤 오버레이 (핸들 z-index 3 아래) */
.ax-stmt--bg-slide .ax-stmt__bg-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 5, 20, 0.46) 100%);
  pointer-events: none;
}

/* =============================================================
   Hero Video Loading Spinner
   - .visual-card 레벨(z-index 5): 딤 오버레이(2) 위, 탭(6) 아래
   - 히어로 텍스트 영역을 피해 하단(top: 68%)에 배치
   - opacity transition으로 영상 재생 시 부드럽게 소멸
   ============================================================= */
.mha-hero-visual .media-spinner {
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.55s ease;
}

.mha-hero-visual .media-spinner.is-hidden {
  opacity: 0;
}

.mha-hero-visual .media-spinner__ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid rgba(59, 130, 246, 0.16);
  border-top-color: #3b82f6;
  border-right-color: rgba(59, 130, 246, 0.58);
  animation: hero-media-spin 0.88s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-media-spin {
  to { transform: rotate(360deg); }
}

/* =============================================================
   Header — 로고 이미지 크기 (공유 32px의 70%)
   ============================================================= */
.logo-img { height: 22px; }


/* =============================================================
   Showcase — xrvpstudio는 title-img 없이 텍스트만 사용
   ============================================================= */
.ax-showcase__text {
  bottom: 120px;
}

@media (max-width: 900px) {
  .ax-showcase__text {
    bottom: 48px;
  }
}

/* =============================================================
   Feature — xrvpstudio 전용 헤드라인 케이스 유지
   ============================================================= */
.ax-feature__headline {
  text-transform: none;
}

/* =============================================================
   Creator Showcase — section header (news-head 동일 패턴)
   ============================================================= */
.ax-creators__head {
  display: flex;
  justify-content: center;         /* 제목박스 중앙 정렬 */
  padding: 64px 0 52px;
  /* grid가 full-bleed이므로 헤더에만 좌우 여백 부여 */
  padding-left:  clamp(20px, 6vw, 100px);
  padding-right: clamp(20px, 6vw, 100px);
}

.ax-creators__title-box {
  width: min(720px, 100%);
}
.uiux-section .ax-creators__title-box {
  text-align: center;
}
.uiux-section .xrv-ov__label {
  display:       flex;    /* inline-flex → flex: 블록 레벨로 확실한 렌더링 */
  color:         #000;
  margin-bottom: 1.2em;   /* ax-creators__title 0.4em 기준 ×3 */
}

/* ─── Creator 이미지 비교 슬라이더 래퍼 ─────────────────── */
.ax-creators__cmp-wrap {
  position: relative;
  width: 75%;
  margin: 0 auto 3%;
  height: 500px;
  overflow: hidden;
}
.ax-creators__cmp-wrap .ax-stmt__cmp {
  position: absolute;
  inset: 0;
}
/* 이미지 전체 표시 (크롭 없음) */
.ax-creators__cmp-wrap .ax-stmt__cmp-img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

/* 장식 수평선 — metahoop news-line 동일 */
.ax-creators__line {
  width: 64px;
  height: 3px;
  background: #0a0a0a;
  margin-bottom: 18px;
}

.ax-creators__title {
  font-size: clamp(21px, 2.4vw, 39px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #0a0a0a;
  text-align: center;
}

.ax-creators__sub {
  margin-top: 14px;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  color: #555;
  opacity: 0.85;
  text-align: center;
}

/* =============================================================
   Creator Showcase — 3-column image + info card grid
   ============================================================= */
.ax-creators {
  background: #fff;
  overflow: hidden;
  /* xrv-products 동일 — 좌우 여백을 섹션 레벨에서 처리 */
  padding-left:  var(--mha-sec-x, 60px);
  padding-right: var(--mha-sec-x, 60px);
}

/* xrv-products__wrap 동일 방식 — max-width + margin: auto */
.ax-creators__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2%;
  width:                 100%;
  max-width:             var(--mha-wrap-max, 1450px);
  margin:                0 auto;
}
/* layout_axdxrobot_index.css 의 #ax-creators .ax-creators__grid { width:85%; padding:… }
   가 ID 선택자 특이성(1,1,0)으로 위 규칙을 덮어쓰므로,
   동일 특이성으로 이 파일(나중에 로드)에서 재정의 */
#ax-creators .ax-creators__grid {
  width:   100%;
  padding: 0;
}

.ax-creators__col {
  display: flex;
  flex-direction: column;
}

/* 이미지 썸네일: 16:9 비율 고정 + hover zoom */
.ax-creators__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.ax-creators__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ax-creators__col:hover .ax-creators__thumb img {
  transform: scale(1.045);
}

/* 썸네일 그라데이션 오버레이 — 하단 30% 어둡게 */
.ax-creators__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10) 50%,
    rgba(0, 0, 0, 0.90) 100%
  );
  pointer-events: none;
}

/* 하단 정보 카드 */
.ax-creators__card {
  display: flex;
  justify-content: center;  /* 가로 중앙 정렬 */
  align-items: center;      /* 세로 중앙 정렬 */
  padding: 20px 24px 26px;
  /*border-top: 1px solid #e5e7eb;*/
  flex: 1;
}

/* 두 번째·세 번째 카드에 좌측 구분선 */
.ax-creators__col + .ax-creators__col .ax-creators__card {
  /*border-left: 1px solid #e5e7eb;*/
}

/* 텍스트 영역 */
.ax-creators__info {
  text-align: center;
}

.ax-creators__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.ax-creators__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #6b7280;
  word-break: keep-all;
}

/* 반응형 */
@media (max-width: 900px) {
  .ax-creators {
    padding-left:  var(--mha-sec-x-md, 24px);
    padding-right: var(--mha-sec-x-md, 24px);
  }
  .ax-creators__grid {
    grid-template-columns: 1fr;
  }
  .ax-creators__col + .ax-creators__col .ax-creators__card {
    border-left: none;
  }
}

/* =============================================================
   Hero Text — 미디어 모드 색상 전환
   이미지 모드 : 회색 (rgba 0.50)
   영상 모드   : 흰색 (rgba 1.00) — 5초 선형 (≈ 10%/초)
   방향별 transition 분리:
     진입(img→video): hero--video 선택자의 5s linear 사용
     이탈(video→img): 기본 선택자의 0.5s ease 사용
   ============================================================= */

/* 이미지 모드 기본값 + 이탈(video→img) 복귀 속도 */
.mha-hero-visual .hero-kicker,
.mha-hero-visual .hero-title,
.mha-hero-visual .hero-desc {
  transition: color 0.5s ease;
  color: rgba(255, 255, 255, 0.50);
}

/* 영상 모드 — 진입(img→video) 5초 선형 밝아짐 (≈ 10%/초) */
.mha-hero-visual.hero--video .hero-kicker,
.mha-hero-visual.hero--video .hero-title,
.mha-hero-visual.hero--video .hero-desc {
  transition: color 5s linear;
  color: #fff;
}

/* ── Tab text sweep: 영상 재생 시간 기준 좌→우 컬러 슬라이드 ──────
   --tab-progress : JS rAF 루프가 currentTime/duration 을 0%~100% 로 주입
   sharp-edge gradient 로 fill 선이 텍스트를 왼쪽부터 밝혀 나감
   ----------------------------------------------------------------- */
.mha-hero-visual .overlay-tab.is-progress,
.mha-hero-visual .overlay-tab.is-progress:hover {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    to right,
    #fff var(--tab-progress, 0%),
    rgba(255, 255, 255, 0.40) var(--tab-progress, 0%)
  );
  transition: transform var(--transition-fast);
}

/* ─── 영상(video) 위 50% 어둠 오버레이 ──────────────────────────
   video는 replaced element → ::after 불가 → sibling div로 처리.
   .uiux-visual(position:sticky)를 기준으로 inset:0 절대 배치.
   DOM 순서상 uiux-visual__videos 보다 앞 → videos 패널이 표시되면
   z-index 없이도 DOM order 상 videos가 위에 렌더링됨.
   ----------------------------------------------------------------- */
#haptic-tech .uiux-visual__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  pointer-events: none;
  border-radius: inherit;    /* uiux-visual 의 border-radius 10px 상속 */
}

/* ─── haptic-tech 비교 슬라이더 (uiux-visual__videos 컨텍스트) ───
   .uiux-visual__videos 는 position:absolute; inset:0 으로 비주얼 영역을 채움.
   그 안의 .ax-stmt__cmp 도 동일하게 inset:0 으로 확장하고
   pointer-events:all 로 드래그 핸들 인터랙션을 활성화.
   .ax-stmt__cmp-img 는 기존 CSS(position:absolute; inset:0)를 그대로 상속.
   ----------------------------------------------------------------- */
#haptic-tech .uiux-visual__videos .ax-stmt__cmp {
  position: absolute;
  inset: 0;
  --cmp-pos: 50%;
  pointer-events: all;
}

/* ─── gsipa.png 오버레이 — 비교 슬라이더 위 합성 ──────────────────
   .uiux-visual__videos 기준(position:absolute; inset:0) 위에 절대 배치.
   z-index:20 으로 비교 슬라이더 전체(handle z:3)보다 위에 위치.
   PNG 투명 영역을 통해 슬라이더가 보이고 pointer-events:none 으로
   드래그 핸들 인터랙션을 차단하지 않음.
   ----------------------------------------------------------------- */
#haptic-tech .haptic-cmp__overlay {
  position: absolute;
  bottom: 16px;             /* 하단 중앙 배치 */
  left: 10%;
  transform: translateX(-50%);
  width: 10%;               /* 100% × 0.2 */
  height: auto;
  z-index: 20;
  pointer-events: none;
}

/* ─── 비교 슬라이더 stacking 명시 (CSS 교환 후 역전) ───────────────
   --base(z:2)   ← clip-path 적용, 위에 위치 → 왼쪽 영역만 노출
   --reveal(z:1) ← 전체 표시, 아래 배경 레이어 → 오른쪽 영역이 비쳐 보임
   --handle(z:3) ← 기존 CSS 유지, 항상 최상위
   결과: 그라데이션은 BASE(왼쪽, xrvpstudio-05-1)에만 표시
         clip-path가 ::after도 동일하게 클립하므로 왼쪽 영역에 자연스럽게 격리됨
   ----------------------------------------------------------------- */
#haptic-tech .ax-stmt__cmp-img--base   { z-index: 2; }
#haptic-tech .ax-stmt__cmp-img--reveal { z-index: 1; }

/* JS가 style.backgroundImage(inline)로 배경을 설정하므로
   CSS background 재정의 불가 → ::after pseudo-element 로 처리.
   --base의 clip-path가 ::after에도 그대로 적용되어
   그라데이션이 왼쪽(BASE) 클립 영역 안에만 렌더링됨               */
#haptic-tech .ax-stmt__cmp-img--base::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 100%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

/* ─── XR VP 섹션 ↔ haptic-tech 섹션 간격 1/2 축소 ───────────────
   현재 간격:  ax-creators__head padding-bottom 52px
            + uiux-section     padding-top    60px  = 112px
   목표 간격:  26px + 30px = 56px  (≈ 112px / 2)
   ----------------------------------------------------------------- */
.ax-creators[aria-label="XR VP 비교 슬라이더"] .ax-creators__head {
  padding-bottom: 8px;    /* 52px → 26px → 16px → 8px */
}
#haptic-tech {
  padding-top: 15px;      /* 60px → 30px → 15px */
  padding-bottom: calc(var(--mha-sec-gap) / 4);  /* 60px → 30px (-50%) */
  background: #fff;
  scroll-margin-top: calc(var(--header-height, 45px) + 46px); /* sticky header + subnav 높이 */
}

/* ─── haptic-tech 카드 — metahoop #uiux-operation 동일 스타일 + 0.8 스케일 ──
   원본(metahoop): padding 48px 52px / gap 64px / panel-h 600px / accordion 380px
   0.8 적용:       padding 38px 42px / gap 51px / panel-h 480px / accordion 304px
   ----------------------------------------------------------------- */
#haptic-tech .uiux-layout {
  --uiux-panel-h: 576px;  /* 600px × 0.8 = 480px → × 1.2 = 576px */
  gap: 51px;              /* 64px × 0.8 */
  padding: 38px 42px;     /* 48px×0.8=38 / 52px×0.8=42 */
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08),
              0 1px  4px rgba(0, 0, 0, 0.04);
}
#haptic-tech .uiux-accordion {
  flex: 0 0 304px;        /* 380px × 0.8 */
}

/* ═══════════════════════════════════════════════════════
   Humanoid AI Platform 헤더 섹션
   ─────────────────────────────────────────────────────
   layout_axdxrobot_index.css 의 .news-head / .news-title /
   .news-sub / .news-line 을 그대로 재사용.
   여기서는 ① 섹션 여백·배경 ② 콘텐츠 max-width 정렬
   ③ news-line CSS 진입 애니메이션만 추가.
   ═══════════════════════════════════════════════════════ */
.ax-platform-head {
  background: #fff;
  padding: calc(var(--mha-sec-y) * 0.3) var(--mha-sec-x);  /* top 72px → 36px (-50%) */
  scroll-margin-top: calc(var(--header-height, 45px) + 46px); /* sticky header + subnav */
}
.ax-platform-head__inner {
  max-width: var(--mha-wrap-max);
  margin: 0 auto;
}
/* 하단 여백 제거 / 중앙 정렬 */
.ax-platform-head .ax-creators__head { margin-bottom: 0; justify-content: center; padding: 0; }
.ax-platform-head .ax-creators__title-box {
  text-align: center;
}

/* news-line: JS 없이 CSS @keyframes 로 width 0→full 애니메이션 */
@keyframes news-line-grow {
  from { width: 0; }
  to   { width: var(--mha-line-w); }
}
.ax-platform-head__line {
  animation: news-line-grow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (max-width: 768px) {
  .ax-platform-head {
    padding: calc(var(--mha-sec-y-md) * 0.3) var(--mha-sec-x-md);  /* top 48px → 24px */
  }
}

/* ═══════════════════════════════════════════════════════════
   XR·VP Studio — Hero Visual  (captury.html 스타일 이식)
   .xrv-hero 스코프로 격리 → aimotion·axdxrobot 에 무간섭
   ═══════════════════════════════════════════════════════════ */

/* ── 1. 페이지 전용 팔레트 & 미디어 불투명도 ─── */
.xrv-hero {
  --xrv-teal:    #33E0C4;
  --xrv-teal-d:  #1FBFA6;
  --xrv-violet:  #7C5CFF;
  --xrv-glow:    rgba(51, 224, 196, 0.42);

  /* captury.html 비디오 opacity .3 참조 */
  --video-opacity: 0.36;
  --img-opacity:   0.42;
}

/* ── 2. 딤 오버레이 — captury .hero-fade 이식 ─ */
/*    좌상단 방향 Radial + 하단 Linear + 우측 Violet glow */
.xrv-hero .visual-card::after {
  background:
    radial-gradient(ellipse 70% 62% at 28% 46%,
      rgba(8, 9, 13, .23) 0%,
      rgba(8, 9, 13, .14) 52%,
      transparent         82%),
    linear-gradient(to top,
      rgba(8, 9, 13, .25)  0%,
      rgba(8, 9, 13, .04)  26%,
      transparent          50%),
    radial-gradient(ellipse 58% 50% at 82% 28%,
      rgba(124, 92, 255, .03),
      transparent 68%);
}

/* ── 3. 히어로 텍스트 — 좌하단 배치 ─────────── */
.xrv-hero .hero-text {
  left:       clamp(140px, 11.5vw, 210px);
  top:        auto;
  bottom:     150px;
  transform:  none;
  text-align: left;
  max-width:  580px;
}

/* ── 4. Kicker → eyebrow 레이블 ─────────────── */
/*    captury .label 참조 : 장식선 + 모노 스케일 */
.xrv-hero .hero-kicker {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--xrv-teal);
  /* aimotion이 주입하는 color 전환 덮어쓰기 */
  transition:     none !important;
}
.xrv-hero .hero-kicker::before {
  content:    "";
  width:      24px;
  height:     1px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--xrv-teal), transparent);
}

/* ── 5. 타이틀 — 그라디언트 텍스트 ─────────── */
/*    흰색(첫 줄) → teal → violet(끝) 흐름 */
.xrv-hero .hero-title {
  font-size:      clamp(1rem, 2.6vw, 2.84rem);
  line-height:    1.08;
  letter-spacing: -0.03em;
  white-space:    normal;
  background:     linear-gradient(
                    112deg,
                    #EEF0F6 0%,
                    #EEF0F6 38%,
                    var(--xrv-teal) 68%,
                    var(--xrv-violet) 100%
                  );
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
  color:          transparent;
}
/* is-switching 중 투명 유지 */
.xrv-hero .hero-text.is-switching .hero-title {
  -webkit-text-fill-color: transparent;
}

/* ── 6. 설명 ─────────────────────────────────── */
.xrv-hero .hero-desc {
  font-size:   clamp(0.94rem, 1.55vw, 1.06rem);
  font-weight: 300;
  line-height: 1.85;
  color:       rgba(238, 240, 246, 0.72);
  margin-top:  16px;
  /* aimotion color 전환 덮어쓰기 */
  transition:  none !important;
  -webkit-text-fill-color: unset;
}

/* ── 7. CTA 버튼 ─────────────────────────────── */
/* hero-text { pointer-events: none } 상속 차단 — CTA 버튼/링크 클릭 복원 */
.xrv-hero .hero-text    { pointer-events: none; }
.xrv-hero .xrv-hero-ctas,
.xrv-hero .xrv-hero-ctas * { pointer-events: auto; }

.xrv-hero-ctas {
  display:    flex;
  gap:        14px;
  flex-wrap:  wrap;
  margin-top: 32px;
}
.xrv-btn-p {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        14px 28px;
  border-radius:  11px;
  background:     var(--xrv-teal);
  color:          #04110E;
  font-family:    var(--font-family);
  font-size:      0.975rem;
  font-weight:    700;
  border:         none;
  cursor:         pointer;
  box-shadow:     0 8px 28px var(--xrv-glow);
  text-decoration: none;
  transition:     transform .22s cubic-bezier(.16, 1, .3, 1),
                  box-shadow .22s, background .22s;
}
.xrv-btn-p:hover {
  background: #4BEAD0;
  transform:  translateY(-2px);
  box-shadow: 0 14px 40px rgba(51, 224, 196, .46);
}
.xrv-btn-p svg { width: 15px; height: 15px; flex-shrink: 0; }

.xrv-btn-ghost {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        14px 24px;
  border-radius:  11px;
  border:         1.5px solid rgba(255, 255, 255, .18);
  color:          #EEF0F6;
  font-family:    var(--font-family);
  font-size:      0.975rem;
  font-weight:    500;
  background:     rgba(255, 255, 255, .03);
  text-decoration: none;
  transition:     all .22s;
}
.xrv-btn-ghost:hover {
  border-color: var(--xrv-teal);
  color:        var(--xrv-teal);
  background:   rgba(51, 224, 196, .06);
}

/* ── 8. 기능 태그 pills ────────────────────── */
.xrv-hero-tags {
  display:    flex;
  gap:        10px;
  flex-wrap:  nowrap;   /* 1행 고정 */
  margin-top: 28px;
  max-width:  none;     /* 부모 580px 제약 해제 → 4개 1행 */
}
/* display:flex 가 UA [hidden]{display:none} 을 덮어쓰므로 명시 재정의 */
.xrv-hero-tags[hidden] { display: none !important; }
.xrv-htag {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--font-family);
  font-size:      1.05rem;
  font-weight:    300;
  letter-spacing: 0;
  color:          rgba(238, 240, 246, .72);
  background:     rgba(255, 255, 255, .04);
  border:         1px solid rgba(255, 255, 255, .10);
  padding:        7px 28px;  /* 14px → 28px (2×) */
  border-radius:  100px;
  white-space:    nowrap;    /* pill 내 텍스트 줄바꿈 방지 */
}
.xrv-pt {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   var(--xrv-teal);
  box-shadow:   0 0 8px var(--xrv-teal);
  flex-shrink:  0;
}

/* ── 9. 반응형 ──────────────────────────────── */
@media (max-width: 900px) {
  .xrv-hero .hero-text {
    left:      24px;
    right:     24px;
    bottom:    152px;
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .xrv-hero .hero-text    { bottom: 128px; }
  .xrv-btn-p,
  .xrv-btn-ghost           { padding: 12px 20px; font-size: .9rem; }
  .xrv-hero-tags           { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   XRV DEMO MODAL — captury.html #demo 이식 + xrv 스코프
   ══════════════════════════════════════════════════════════════ */
#xrv-demo {
  --xm-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --xm-surface: #12141C;               /* 다크 패널 */
  --xm-bg2:     #1c1f2e;               /* 인풋 배경 */
  --xm-txt:     #eef0f6;               /* 밝은 텍스트 */
  --xm-txt2:    rgba(238,240,246,.6);  /* 서브 텍스트 */
  --xm-txt3:    rgba(238,240,246,.35); /* 힌트 텍스트 */
  --xm-line:    rgba(255,255,255,.10);
  --xm-line2:   rgba(255,255,255,.08);
  --xm-accent:  #33E0C4;
  --xm-e3:      0 24px 80px rgba(0,0,0,.55);

  position:        fixed;
  inset:           0;
  z-index:         5000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity .35s var(--xm-expo);
}
#xrv-demo.open { opacity: 1; pointer-events: all; }

.xrv-m-bd {
  position:       absolute;
  inset:          0;
  background:     rgba(5,6,10,.72);
  backdrop-filter: blur(14px);
}
.xrv-m-box {
  position:             relative;
  z-index:              1;
  width:                100%;
  max-width:            900px;
  max-height:           90dvh;
  overflow:             hidden auto;
  background:           var(--xm-surface);
  border:               1px solid var(--xm-line2);
  border-radius:        20px;
  box-shadow:           var(--xm-e3);
  display:              grid;
  grid-template-columns: 1fr 1.35fr;
  transform:            scale(.96) translateY(14px);
  transition:           transform .4s var(--xm-expo);
}
#xrv-demo.open .xrv-m-box { transform: none; }

/* LEFT panel */
.xrv-m-left {
  background:      linear-gradient(165deg, #11141C 0%, #0a0c12 100%);
  color:           #fff;
  padding:         42px 36px;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
}
.xrv-m-logo {
  display:      flex;
  align-items:  center;
  gap:          10px;
  font-family:  var(--font-family);
  font-weight:  700;
  font-size:    1.05rem;
  margin-bottom: 26px;
}
.xrv-m-logo em  { color: var(--xm-accent); font-style: normal; }
.xrv-m-dot      { width: 8px; height: 8px; border-radius: 50%; background: var(--xm-accent); box-shadow: 0 0 10px var(--xm-accent); }
.xrv-m-left h2  { font-size: 1.55rem; margin-bottom: 12px; color: #fff; }
.xrv-m-sub      { font-size: .88rem; font-weight: 300; color: var(--xm-txt2); line-height: 1.7; margin-bottom: 26px; }
.xrv-m-ben      { display: flex; flex-direction: column; gap: 14px; }
.xrv-m-it       { display: flex; gap: 11px; align-items: center; }
.xrv-m-ic       { width: 28px; height: 28px; border-radius: 8px; background: rgba(51,224,196,.15); border: 1px solid rgba(51,224,196,.32); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.xrv-m-ic svg   { width: 14px; height: 14px; color: var(--xm-accent); }
.xrv-m-it h5    { font-size: .86rem; font-weight: 600; color: #fff; margin: 0 0 2px; }
.xrv-m-it p     { font-size: .76rem; font-weight: 300; color: var(--xm-txt3); line-height: 1.5; margin: 0; }
.xrv-m-note     { margin-top: 26px; font-size: .74rem; font-weight: 300; color: var(--xm-txt3); line-height: 1.6; }

/* RIGHT panel */
.xrv-m-right    { padding: 42px 40px 38px; position: relative; background: var(--xm-surface); }
.xrv-m-close    { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px; background: var(--xm-bg2); border: 1px solid var(--xm-line); color: var(--xm-txt2); display: flex; align-items: center; justify-content: center; transition: all .2s; cursor: pointer; }
.xrv-m-close:hover { color: var(--xm-accent); border-color: var(--xm-accent); transform: rotate(90deg); }
.xrv-m-close svg { width: 14px; height: 14px; }
.xrv-m-right h3 { font-size: 1.3rem; margin-bottom: 6px; color: var(--xm-txt); }
.xrv-m-fsub     { font-size: .84rem; font-weight: 300; color: var(--xm-txt2); margin-bottom: 22px; }

/* Form */
.xrv-m-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xrv-m-fg   { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.xrv-m-fg label { font-size: .76rem; font-weight: 400; color: var(--xm-txt2); }
.xrv-m-req  { color: var(--xm-accent); margin-left: 2px; }
.xrv-m-fg input,
.xrv-m-fg select,
.xrv-m-fg textarea {
  font-family:  var(--font-family);
  font-weight:  300;
  font-size:    .92rem;
  color:        var(--xm-txt);
  background:   var(--xm-bg2);
  border:       1px solid var(--xm-line);
  border-radius: 9px;
  padding:      11px 13px;
  outline:      none;
  width:        100%;
  transition:   border-color .2s, box-shadow .2s;
  box-sizing:   border-box;
}
.xrv-m-fg input::placeholder,
.xrv-m-fg textarea::placeholder { color: var(--xm-txt3); }
.xrv-m-fg input:focus,
.xrv-m-fg select:focus,
.xrv-m-fg textarea:focus { border-color: var(--xm-accent); box-shadow: 0 0 0 3px rgba(51,224,196,.14); }
.xrv-m-fg select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2369707e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 32px;
}
.xrv-m-fg select option { background: #12141C; color: var(--xm-txt); }
.xrv-m-submit {
  width:        100%;
  display:      flex;
  align-items:  center;
  justify-content: center;
  gap:          8px;
  padding:      14px;
  margin-top:   4px;
  border-radius: 10px;
  background:   var(--xm-accent);
  color:        #04110E;
  font-family:  var(--font-family);
  font-size:    1rem;
  font-weight:  700;
  box-shadow:   0 6px 20px rgba(51,224,196,.32);
  transition:   transform .2s var(--xm-expo), box-shadow .2s, background .2s;
  cursor:       pointer;
  border:       none;
}
.xrv-m-submit:hover { background: #4BEAD0; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(51,224,196,.45); }
.xrv-m-submit svg { width: 16px; height: 16px; }

/* Success state */
.xrv-m-ok       { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; min-height: 360px; padding: 30px; }
.xrv-m-ok.xrv-m-show  { display: flex; }
.xrv-m-wrap.xrv-m-hide { display: none; }
.xrv-m-ok-ic    { width: 56px; height: 56px; border-radius: 50%; background: rgba(51,224,196,.12); border: 1px solid rgba(51,224,196,.3); display: flex; align-items: center; justify-content: center; }
.xrv-m-ok-ic svg { width: 24px; height: 24px; color: var(--xm-accent); }
.xrv-m-ok h3    { color: var(--xm-txt); }

/* Responsive */
@media (max-width: 768px) {
  .xrv-m-box  { grid-template-columns: 1fr; }
  .xrv-m-left { display: none; }
  .xrv-m-right { padding: 36px 24px 28px; }
  .xrv-m-frow { grid-template-columns: 1fr; }
}

/* =============================================================
   XR·VP Studio — 솔루션 제품 리스트 (.xrv-products)
   mha-products 동일 구조·스타일 / 4×4 그리드
   ============================================================= */
.xrv-products {
  padding:   27px var(--mha-sec-x, 60px) 108px;
  background: #ffffff;
  position:   relative;
}
.xrv-products__wrap {
  max-width: var(--mha-wrap-max, 1450px);
  margin:    0 auto;
  padding:   0;
}
/* ── 헤더 레이아웃: ax-platform-head 동일 ── */
.xrv-products .news-head {
  margin-bottom:   56px;
  justify-content: flex-start;  /* 왼쪽 정렬 */
}
.xrv-products .news-title-box {
  width:      calc(100% * 2 / 5);
  min-width:  320px;
  text-align: left;
}
.xrv-products .news-line  { margin-left: 0; }
.xrv-products .news-title { white-space: normal; }

/* ── 4×4 카드 그리드 ── */
.xrv-products__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
}

/* ── 카드 ── */
.xrv-prod {
  position:       relative;
  border-radius:  16px;
  overflow:       hidden;
  border:         1px solid #E5E7EB;
  background:     #F9FAFB;
  padding:        32px 26px 28px;
  display:        flex;
  flex-direction: column;
  gap:            0;
  cursor:         pointer;
  transition:     transform .35s cubic-bezier(.22,1,.36,1),
                  box-shadow .35s,
                  border-color .35s;
}
.xrv-prod::before {
  content:        "";
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  background:     radial-gradient(ellipse 80% 55% at 50% -10%,
                    rgba(11,143,122,.06), transparent 65%);
  pointer-events: none;
}
.xrv-prod:hover {
  transform:    translateY(-5px);
  box-shadow:   0 20px 48px rgba(0,0,0,.10);
  border-color: rgba(11,143,122,.30);
}

/* ── 상단: 아이콘 + 번호 ── */
.xrv-prod__top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   22px;
}
.xrv-prod__ic {
  width:           48px;
  height:          48px;
  border-radius:   12px;
  background:      rgba(11,143,122,.10);
  border:          1px solid rgba(11,143,122,.20);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #0B8F7A;
  flex-shrink:     0;
}
.xrv-prod__ic svg { width: 22px; height: 22px; }
.xrv-prod__num {
  font-family:    var(--font-family);
  font-size:      2.8rem;
  font-weight:    800;
  letter-spacing: -.05em;
  line-height:    1;
  color:          #111827;
  user-select:    none;
}

/* ── 제품명 ── */
.xrv-prod__name {
  font-family:    var(--font-family);
  font-size:      1.14rem;
  font-weight:    700;
  letter-spacing: -.015em;
  line-height:    1.3;
  color:          #111827;
  margin:         0 0 12px;
}

/* ── 설명 ── */
.xrv-prod__desc {
  font-size:   .875rem;
  color:       #6B7280;
  font-weight: 400;
  line-height: 1.78;
  margin:      0 0 20px;
  flex-grow:   1;
}

/* ── 태그 ── */
.xrv-prod__tags {
  list-style:  none;
  margin:      0;
  padding:     0;
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  margin-top:  auto;
}
.xrv-prod__tags li {
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .04em;
  color:          #0B8F7A;
  background:     rgba(11,143,122,.08);
  border:         1px solid rgba(11,143,122,.22);
  border-radius:  100px;
  padding:        4px 10px;
  white-space:    nowrap;
}

/* ── 자세히 보기 ── */
.xrv-prod__more {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             6px;
  width:           100%;
  margin-top:      20px;
  padding-top:     16px;
  border-top:      1px solid #E5E7EB;
  font-size:       .82rem;
  font-weight:     600;
  letter-spacing:  .02em;
  color:           #0B8F7A;
  text-decoration: none;
  transition:      color .22s ease, border-color .22s ease;
}
.xrv-prod__more-arr {
  display:    inline-block;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.xrv-prod__more:hover { color: #097567; border-color: rgba(11,143,122,.30); }
.xrv-prod__more:hover .xrv-prod__more-arr { transform: translateX(5px); }
/* stretched link — 카드 전체를 <a> 히트 영역으로 확장 */
.xrv-prod__more::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
}

/* ── 배경 이미지 카드 variant ── */
.xrv-prod--bg {
  background:   none;
  border-color: transparent;
  isolation:    isolate;   /* ::before/after 음수 z-index를 카드 안에 격리 */
}
/* ① 배경 이미지 */
.xrv-prod--bg::before {
  content:    "";
  position:   absolute;
  inset:      0;
  background: var(--prod-bg) center / cover no-repeat;
  filter:     blur(0);
  z-index:    -2;
}
/* ② 그라데이션 스크림 — 하단 진한 네이비, 상단으로 투명 (사진 노출) */
.xrv-prod--bg::after {
  content:        "";
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
                    to top,
                    rgba(3, 6, 22, .90) 0%,
                    rgba(3, 6, 22, .88) 30%,
                    rgba(3, 6, 22, .54) 58%,
                    rgba(3, 6, 22, .22) 80%,
                    rgba(3, 6, 22, .10) 100%
                  );
  z-index:        -1;
  pointer-events: none;
}
/* ③ 텍스트 — 이미지 위 가독성 확보 */
.xrv-prod--bg .xrv-prod__num  {
  color:       #111827;
  text-shadow: none;
}
.xrv-prod--bg .xrv-prod__name {
  font-size:      1.5rem;
  font-weight:    800;
  letter-spacing: -.025em;
  line-height:    1.25;
  color:          #fff;
  text-shadow:    0 2px 12px rgba(0, 0, 0, .80),
                  0 1px  4px rgba(0, 0, 0, .55);
}
.xrv-prod--bg .xrv-prod__desc {
  color:       rgba(255, 255, 255, .90);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85), 0 2px 10px rgba(0, 0, 0, .55);
}
.xrv-prod--bg .xrv-prod__ic {
  background:   rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .25);
  color:        #fff;
}
.xrv-prod--bg .xrv-prod__tags li {
  color:        rgba(255, 255, 255, .92);
  background:   rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
}
.xrv-prod--bg .xrv-prod__more {
  color:        rgba(255, 255, 255, .90);
  border-color: rgba(255, 255, 255, .28);
}
.xrv-prod--bg .xrv-prod__more:hover {
  color:        #fff;
  border-color: rgba(255, 255, 255, .58);
}
.xrv-prod--bg:hover { border-color: rgba(255, 255, 255, .22); }
.xrv-prod--bg .xrv-prod__tags { margin-top: 16px; }

/* ── 스크롤 리빌 — ax-platform-head 동일 방식 ── */
/* news-line: 초기 width 0, .in-view 시 @keyframes 애니메이션 */
.xrv-products .news-line  { width: 0; }
/* news-title / sub: JS splitWords 가 단어별 #aaa→목표색 처리 */
.xrv-products .news-title { color: #aaa; }
.xrv-products .news-sub   { color: #aaa; }
/* 카드: opacity+translateY 리빌 */
.xrv-products .xrv-prod {
  opacity: 0; transform: translateY(24px);
  transition: opacity .60s cubic-bezier(.22,1,.36,1) var(--xp-delay, .30s),
              transform .60s cubic-bezier(.22,1,.36,1) var(--xp-delay, .30s);
}
/* 열(column) 기준 stagger */
.xrv-products__grid .xrv-prod:nth-child(4n+1) { --xp-delay: .28s; }
.xrv-products__grid .xrv-prod:nth-child(4n+2) { --xp-delay: .36s; }
.xrv-products__grid .xrv-prod:nth-child(4n+3) { --xp-delay: .44s; }
.xrv-products__grid .xrv-prod:nth-child(4n+4) { --xp-delay: .52s; }

/* .in-view 적용: line → @keyframes, 카드 → 표시 */
.xrv-products.in-view .news-line {
  animation: news-line-grow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.xrv-products.in-view .xrv-prod   { opacity: 1; transform: translateY(0); }

/* ── 반응형 ── */
@media (max-width: 1200px) { .xrv-products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .xrv-products { padding: 18px var(--mha-sec-x-md, 24px) 74px; }
  .xrv-products__grid { grid-template-columns: 1fr; }
  .xrv-prod { padding: 24px 20px 20px; }
}

/* ── FAB Cluster: subnav 이전 숨김, 이후 표시 ─────────────────────── */
.fab-cluster {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.fab-cluster.fab-visible {
  opacity: 1;
  pointer-events: all;
}

/* ══ XR·VP 탭 — 정적 배경 슬라이드쇼 Ken Burns 모션 ══════════════════
   layout_aimotion_index.js 가 vp_bg1~3 전환마다 xrv-kb-1/2/3 을 순환
   교체 → 서로 다른 방향의 완만한 줌·팬으로 정적 이미지에 생동감을 부여.
   기존 opacity 크로스페이드(--media-fade)와 함께 재생된다. */
.xrv-hero .media-stage > img.xrv-kb-1,
.xrv-hero .media-stage > img.xrv-kb-2,
.xrv-hero .media-stage > img.xrv-kb-3 {
  animation-duration: 3.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.xrv-hero .media-stage > img.xrv-kb-1 { animation-name: xrv-kb-pan-1; }
.xrv-hero .media-stage > img.xrv-kb-2 { animation-name: xrv-kb-pan-2; }
.xrv-hero .media-stage > img.xrv-kb-3 { animation-name: xrv-kb-pan-3; }

@keyframes xrv-kb-pan-1 {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.4%, -1%, 0); }
}
@keyframes xrv-kb-pan-2 {
  from { transform: scale(1.1)  translate3d(1.2%, 0.6%, 0); }
  to   { transform: scale(1.01) translate3d(-1%, -0.4%, 0); }
}
@keyframes xrv-kb-pan-3 {
  from { transform: scale(1.02) translate3d(0, 1.2%, 0); }
  to   { transform: scale(1.1)  translate3d(1.3%, -0.8%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .xrv-hero .media-stage > img.xrv-kb-1,
  .xrv-hero .media-stage > img.xrv-kb-2,
  .xrv-hero .media-stage > img.xrv-kb-3 {
    animation: none;
  }
}