/*
 * AX·DX·ROBOT — Index Layout CSS
 *
 * Standalone CSS. Sections removed: pitch, img-comp, news, contact,
 * contact-media-logo, uiux, fab-nav (and their responsive rules).
 */

/*
 * MetaHoop Arena — Index Layout CSS (v3.0)
 *
 * ✅ root.css 기반 재작성
 *   - root.css 의 변수(--header-height, --color-text, --font-family 등)를 직접 참조
 *   - 이 파일에서 중복 재정의하지 않음
 *   - 페이지·섹션 고유 토큰만 :root 에서 추가 정의
 *
 * ✅ 핵심 버그 수정
 *   - .mha-hero-visual : min-height → 명시적 height 부여
 *     → 자식 height:100% 체인 붕괴 방지 → 영상 정상 노출
 *   - .media-stage : position:relative+height:100% → position:absolute+inset:0
 *     → 부모 크기에 무조건 종속 (높이 계산 불필요)
 *
 * ✅ (FIX) Virtual overlay 이미지 표시 문제 해결
 *   - .media-stage > img 규칙이 오버레이 이미지까지 잡아 inset:0/100%로 덮어씌우던 문제 해결
 *   - :not(.hero-overlay-img)로 "메인 미디어 img"만 제어
 *   - 오버레이는 top/right를 auto로 해제하여 inset 영향 차단
 *
 * 로드 순서 (base.html)
 *   1. root.css   ← design-system 변수 + 리셋
 *   2. 이 파일    ← 레이아웃·섹션·컴포넌트
 */

/* =============================================================
   ✅ Page-Level Tokens  (root.css 에 없는 것만 여기서 정의)
   ============================================================= */
:root {

  /* ── 섹션 여백 ──────────────────────────── */
  --mha-sec-y:      120px;
  --mha-sec-y-md:    80px;
  --mha-sec-x:       60px;
  --mha-sec-x-md:    24px;
  --mha-wrap-max:  1450px;

  /* ── 섹션 간 수직 간격 (단일 변수로 전체 제어)
        각 섹션은 상·하 패딩으로 절반씩 분담하며,
        인접 두 섹션의 합이 --mha-sec-gap 이 됩니다.
        예) 120px → 각 섹션 상·하 60px → gap 합계 120px  */
  --mha-sec-gap:    120px;
  --mha-sec-gap-md:  80px;

  /* ── Pitch 섹션 ──────────────────────────── */
  --pitch-w:        50%;            /* 전체 너비의 60% */
  --pitch-overlap:  15vh;           /* hero 하단 오버랩 = hero 높이의 5% */
  --pitch-space-x-md:     50px;    

  /* ── 제목 라인 ──────────────────────────── */
  --mha-line-w:    240px;
  --mha-line-w-md: 180px;
  --mha-line-h:      3px;

  /* ── Hero 딤(어둠) 오버레이 ─────────────── */
  --hero-dim-color:  0, 0, 0;
  --hero-dim-top:    0.15;
  --hero-dim-mid:    0.45;
  --hero-dim-bot:    0.60;
  --hero-dim-on:     1;        /* 0 = 딤 끄기 */

  /* ── Hero 탭 오버레이 배경 ──────────────── */
  --hero-ov-bg-opacity: 0;
  --hero-ov-blur:       0px;
  --hero-ov-height:     0px;

  /* ── Hero 텍스트 위치 ───────────────────── */
  --hero-text-b:    500px;
  --hero-text-b-md:  78px;
  --hero-text-b-sm:  64px;

  /* ── Hero 예약하기 위치 ───────────────────── */
  --hero-cta-b: 350px;     /* 하단에서 띄울 높이 (탭 위로) */
  --hero-cta-l: 60px;      /* 우측 여백 (데스크탑) */
  --hero-cta-b-md: 78px;  /* 900px 이하 */
  --hero-cta-r-md: 64px;

  /* ── Hero PIP 위치 ───────────────────── */
  --hero-pip-t: auto;
  --hero-pip-l: auto;
  --hero-pip-r: 18px;
  --hero-pip-b: 125px;
  --hero-pip-width: 500px;
  --hero-pip-height: 300px;

  /* ── Hero 타이포그래피 ──────────────────── */
  --hero-kicker-sz:  12px;
  --hero-title-sz:   22px;
  --hero-title-sz-md:20px;
  --hero-title-sz-sm:18px;
  --hero-desc-sz:    14px;
  --hero-desc-sz-md: 14px;
  --hero-desc-sz-sm: 13px;

  /* ── News 카드 ──────────────────────────── */
  --news-card-h:    700px;
  --news-thumb-h:   200px;
  --news-meta-h:     44px;
  --news-h3-h:       50px;
  --news-pad-x:      22px;
  --news-core-h:    115px;
  --news-feat-h:    300px;
  --news-part-gap:   10px;

  /* ── Contact media log ──────────────────── */
  --contact-video-log-l: 190px;
  --contact-video-log-b: 10px;

  /* ── Contact ────────────────────────────── */
  --contact-gap:        70px;
  --contact-col-left:  520px;
  --contact-media-min: 320px;
  --contact-media-max: 520px;



  /* ==========================================================
     ✅ Media Stage 조정 변수 (.media-stage 내 img / video 제어)
     ========================================================== */

  /* 공통 */
  --media-fit:         cover;
  --media-pos:         center center;
  --media-fade:        0.28s;

  /* 영상(video) */
  --video-opacity:     1;
  --video-bright:      1;
  --video-contrast:    1;
  --video-saturate:    1;
  --video-scale:       1;

  /* 이미지(img) */
  --img-opacity:       1;
  --img-bright:        1;
  --img-contrast:      1;
  --img-saturate:      1;
  --img-scale:         1;

  /* ── 미디어(video/img) 위 단색 오버레이 ── */
  --media-overlay-color:   0, 0, 0;   /* R,G,B — 검정 */
  --media-overlay-opacity: 0.10;      /* 10% : 값만 바꾸면 강도 조절 */
}


/* =============================================================
   Header — 고정 상단
   ============================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  background: var(--bg-card);
  z-index: 1000;
}
.header-bar {
  height: var(--header-height);
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* 로고 */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  color: var(--color-heading);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.logo:hover { color: var(--color-heading); }
/* =============================================================
   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); }
}

.logo-img  { height: 22px; width: auto; }
.logo-text { white-space: nowrap; }

/* ── 로고 이미지 전환: 투명 헤더(흰 로고) ↔ 스크롤 후(검정 로고) ──
   기본(투명 배경): --light 표시, --dark 숨김
   is-scrolled(흰 배경): --light 숨김, --dark 표시              */
.logo-img--dark { display: none; }
.site-header.is-scrolled .logo-img--light { display: none; }
.site-header.is-scrolled .logo-img--dark  { display: inline-block; }

/* 가운데 네비 */
.main-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 52px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.main-nav li { position: relative; }
.main-nav > ul > li > a {
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  height: var(--header-height);
  position: relative;
  white-space: nowrap;
}
.main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--brand-red);
  transition: width var(--transition-mid);
}
.main-nav > ul > li:hover > a::after { width: 100%; }

/* 우측 메뉴 */
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  height: var(--header-height);
}
.header-right a {
  text-decoration: none;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  height: var(--header-height);
  position: relative;
  white-space: nowrap;
}
.header-right a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--brand-red);
  transition: width var(--transition-mid);
}
.header-right a:hover::after { width: 100%; }

/* 메가 메뉴 */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-height);
  background: var(--bg-card);
  overflow: hidden;
  height: 0;
  transition: height var(--transition-fast);
  z-index: 10;
  padding: 0 60px;
  box-sizing: border-box;
}
.site-header.is-open .mega { height: 120px; }

.mega-inner {
  height: 120px;
  padding: 10px 0 16px;
  position: relative;
}
.col {
  position: absolute;
  top: 0;
  width: 170px;
}
.col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.col a {
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}
.col a:hover { color: var(--brand-red); }


/* =============================================================
   ✅ Hero Visual
   ============================================================= */
.mha-hero-visual {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height));
  min-height: 500px;
  overflow: hidden;
  background: #000;
}

/* visual-card: height:100% 이제 정상 동작 */
.mha-hero-visual .visual-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* media-stage: 부모를 완전히 채움 */
.mha-hero-visual .media-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform .32s ease, filter .32s ease;
  will-change: transform, filter;
}
.mha-hero-visual .media-stage.is-switching {
  transform: scale(1);
  filter: brightness(.98);
}

/* ── 공통: 메인 미디어(오버레이 제외) + 메인 video ──────────── */
.mha-hero-visual .media-stage > img:not(.hero-overlay-img),
.mha-hero-visual .media-stage > video:not(.hero-overlay-video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit:      var(--media-fit);
  object-position: var(--media-pos);
  display: block;
  opacity: 0;
  transition:
    opacity   var(--media-fade) ease,
    filter    var(--media-fade) ease,
    transform var(--media-fade) ease;
}

/* ── 이미지(img) 전용 조정 (오버레이 제외) ─────────────────── */
.mha-hero-visual .media-stage > img:not(.hero-overlay-img) {
  filter:    brightness(var(--img-bright))
             contrast(var(--img-contrast))
             saturate(var(--img-saturate));
  transform: scale(var(--img-scale));
}

/* ── 영상(video) 전용 조정 (메인 video만, overlay video 제외) ── */
.mha-hero-visual .media-stage > video:not(.hero-overlay-video) {
  display: none;
  filter:    brightness(var(--video-bright))
             contrast(var(--video-contrast))
             saturate(var(--video-saturate));
  transform: scale(var(--video-scale));
}

/* ── 이미지 모드 ───────────────────────────────────────────── */
.mha-hero-visual .media-stage.is-img > img:not(.hero-overlay-img) { display: block; opacity: var(--img-opacity); }
.mha-hero-visual .media-stage.is-img > video:not(.hero-overlay-video) { display: none; opacity: 0; }

/* ── 비디오 모드 ───────────────────────────────────────────── */
.mha-hero-visual .media-stage.is-video > video:not(.hero-overlay-video) { display: block; opacity: var(--video-opacity); }
.mha-hero-visual .media-stage.is-video > img:not(.hero-overlay-img) { display: none; opacity: 0; }

/*
 * ── 미디어 위 10% 단색 오버레이 ─────────────────────────────
 *
 * 레이어 순서 (아래 → 위):
 *   [1] video / img          ← 실제 미디어
 *   [2] media-stage::after   ← 이 오버레이 (z-index 1, 10% 투명)
 *   [3] PiP overlay (img/video) ← z-index 6
 *   ── media-stage 스태킹 컨텍스트 경계 ──
 *   [4] visual-card::after   ← 그래디언트 딤 (z-index 2, 위에서 15~60%)
 *   [5] hero-text, tabs 등   ← 텍스트·UI (z-index 3+)
 *
 * 왜 media-stage::after 인가:
 *   .media-stage { will-change: transform } 이 자체 스태킹 컨텍스트를 형성하므로
 *   ::after 는 미디어 바로 위에만 영향을 주고 상위 UI 요소에는 무관.
 *   pointer-events:none 으로 클릭 이벤트도 통과.
 */
.mha-hero-visual .media-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                    /* video/img(auto=0) 위, PiP overlay(6) 아래 */
  background: rgba(var(--media-overlay-color), var(--media-overlay-opacity));
  pointer-events: none;
  transition: opacity var(--media-fade) ease;  /* 탭 전환 시 자연스러운 페이드 */
}


/* ── 딤 오버레이 (z-index 2: media 위, text·tab 아래) ── */
.mha-hero-visual .visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--hero-dim-on);
  background: linear-gradient(
    180deg,
    rgba(var(--hero-dim-color), var(--hero-dim-top)) 0%,
    rgba(var(--hero-dim-color), var(--hero-dim-mid)) 45%,
    rgba(var(--hero-dim-color), var(--hero-dim-bot)) 100%
  );
  mix-blend-mode: normal;
}


/* =============================================================
   Overlay Tabs  (z-index 6–7: 딤 위)
   ============================================================= */
.mha-hero-visual .visual-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  pointer-events: auto;

  /* ── 탭 리프트 애니메이션 ────────────────────────────────
     pitch 섹션이 .is-visible 될 때 JS가 .tab-lifted 추가.
     0.15s delay: pitch 슬라이드업 시작 직후 탭이 따라 올라가는 효과.
     prefers-reduced-motion 대응은 JS에서 처리.
     ──────────────────────────────────────────────────────── */
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* pitch .is-visible 시 JS가 추가 → 탭 20px 상승 */
.mha-hero-visual .visual-overlay.tab-lifted {
  transform: translateY(-130px) translateX(0px);
}
.mha-hero-visual .visual-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hero-ov-height);
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(10, 12, 16, var(--hero-ov-bg-opacity)) 0%,
    rgba(10, 12, 16, 0) 100%
  );
  backdrop-filter: blur(var(--hero-ov-blur));
  -webkit-backdrop-filter: blur(var(--hero-ov-blur));
}

.mha-hero-visual .overlay-tabs {
  position: relative;
  z-index: 7;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 26px 20px 20px;
  pointer-events: auto;
}
.mha-hero-visual .overlay-tab {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform var(--transition-fast), color var(--transition-fast);
  padding: 6px 2px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.mha-hero-visual .overlay-tab:hover {
  color: rgba(255, 255, 255, .92);
  transform: translateY(-2px);
}
.mha-hero-visual .overlay-tab.is-active {
  color: #fff;
  font-weight: var(--font-weight-bold);
}

/* ── 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);
}

/* JS가 width·transform을 제어 */
.mha-hero-visual .overlay-underline {
  position: absolute;
  left: 0;
  bottom: 10px;
  height: 2px;
  width: 0;
  background: rgba(255, 255, 255, .78);
  border-radius: var(--radius-full);
  transform: translateX(0);
  transition: transform .25s ease, width .25s ease, opacity .25s ease;
  opacity: .95;
  z-index: 7;
  pointer-events: none;
}


/* =============================================================
   Hero Text  (z-index 4)
   ============================================================= */
.mha-hero-visual .hero-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */

  z-index: 4;
  pointer-events: none;
  max-width: 700px;
  width: 100%;
  text-align: center; /* 텍스트도 중앙 정렬 */

  color: #fff;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .45);

  opacity: 1;
  transition: opacity .28s ease, transform .28s ease;
}

.mha-hero-visual .hero-text.is-switching {
  opacity: 0;
  transform: translateY(10px);
}

.mha-hero-visual .hero-kicker {
  font-family: var(--font-family);
  font-size: var(--hero-kicker-sz);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, .90);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mha-hero-visual .hero-title {
  margin-top: 8px;
  font-family: var(--font-family);
  font-size: 50px;
  font-weight: var(--font-weight-semi);
  color: rgba(255, 255, 255, .96);
  letter-spacing: -0.02em;
  line-height: 1.12;
  white-space: pre-line;
}
.mha-hero-visual .hero-desc {
  margin-top: 20px;
  font-family: var(--font-family);
  font-size: var(--hero-desc-sz);
  font-weight: var(--font-weight-normal);
  color: rgba(255, 255, 255, .84);
  letter-spacing: -0.01em;
  line-height: 1.6;
}


/* =============================================================
   Brand Statement Section  (hero 직하단, 30vh)
   - 브랜드 핵심 메시지를 흰 배경 + 수직 중앙 정렬로 표시
   - strong 태그로 브랜드명 강조 (font-weight-bold)
   - 30vh + min-height 조합: 아주 낮은 뷰포트에서도 최소 공간 확보
   ============================================================= */
.ax-stmt {
  height: 30vh;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 0 60px;
}
.ax-stmt__inner {
  max-width: 700px;
  width: 100%;
  text-align: center;
}
.ax-stmt__text {
  font-family: var(--font-family);
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: var(--font-weight-normal);
  color: var(--color-heading);
  line-height: 2.0;
  letter-spacing: -0.02em;
  margin: 0;
  word-break: keep-all;        /* 한국어 단어 단위 줄바꿈 */
  overflow-wrap: break-word;
}
.ax-stmt__text strong {
  font-weight: var(--font-weight-bold);
}
@media (max-width: 640px) {
  .ax-stmt {
    height: auto;
    min-height: 30vh;
    padding: 48px 24px;
  }
  .ax-stmt__text { font-size: clamp(15px, 4vw, 17px); line-height: 1.85; }
}

/* =============================================================
   ax-stmt--bg-slide : 50/50 다크 그리드 레이아웃 (aimotion 동일)
   copy(좌, 텍스트) + media(우, 영상) 동등 분할
   기본 .ax-stmt(flex/center)를 이 모디파이어로 오버라이드합니다.
   ============================================================= */
.ax-stmt.ax-stmt--bg-slide {
  height: 55vh;
  min-height: unset;
  background: #000;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}
.ax-stmt--bg-slide .ax-stmt__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 50px;
  min-width: 0;
  overflow-y: auto;
}
.ax-stmt--bg-slide .ax-stmt__brand-icon {
  display: block;
  height: 34px;
  width: auto;
  object-fit: contain;
  margin: 0 0 16px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.ax-stmt--bg-slide .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--bg-slide .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;
}
.ax-stmt--bg-slide .ax-stmt__headline-accent {
  display: block;
  color: #3b82f6;
}
.ax-stmt--bg-slide .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;
}
.ax-stmt--bg-slide .ax-stmt__divider {
  border: none;
  border-top: 2px solid #3b82f6;
  width: 44px;
  margin: 0 0 20px;
}
.ax-stmt--bg-slide .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;
  margin: 0;
}
.ax-stmt--bg-slide .ax-stmt__media {
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.ax-stmt--bg-slide .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--bg-slide .ax-stmt__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .ax-stmt.ax-stmt--bg-slide {
    height: auto;
    grid-template-columns: 1fr;
  }
  .ax-stmt--bg-slide .ax-stmt__media {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .ax-stmt--bg-slide .ax-stmt__copy {
    padding: 56px 28px 48px;
    overflow-y: visible;
  }
}

/* =============================================================
   Showcase Video Section  (Brand Statement 직하단)
   - 전체 뷰포트 폭·높이 (width:100%, height:100vh)
   - 영상이 섹션 전체를 object-fit:cover 로 채움
   - ::after 30% 어둠 오버레이: 시각적 집중도 + 연출감 부여
   - controls + autoplay muted loop: 쇼케이스 + 사용자 제어 병행
   - IntersectionObserver(JS): 뷰포트 이탈 시 자동 pause → 배터리·CPU 절약
   ============================================================= */
.ax-showcase {
  width: 100%;
  height: 80vh;
  position: relative;
  overflow: hidden;
  background: #000;
}
.ax-showcase__wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.ax-showcase__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
}

/* 50% 어둠 오버레이 (pointer-events:none → 텍스트·영상 클릭 통과) */
.ax-showcase__wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  pointer-events: none;
  z-index: 1;
}

/* ── 텍스트 오버레이 (dim::after 위, z-index:2) ───────────────
   좌하단 기준 배치 — 넓은 화면에서 왼쪽 여백 60px, 하단 80px
   ─────────────────────────────────────────────────────────── */
.ax-showcase__text {
  position: absolute;
  left: 60px;
  bottom: 250px;
  z-index: 2;
  max-width: 520px;
  pointer-events: none;
}
.ax-showcase__title-img {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 0 20px;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .40));
}
.ax-showcase__desc {
  margin: 0;
  font-family: var(--font-family);
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: var(--font-weight-normal);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  .ax-showcase__text {
    left: 24px;
    right: 24px;
    bottom: 48px;
    max-width: none;
  }
}
@media (max-width: 480px) {
  .ax-showcase__text  { bottom: 32px; }
  .ax-showcase__title-img { height: 38px; margin-bottom: 14px; }
}


/* =============================================================
   Feature Cards Section
   - 흰 배경, 80% 너비 중앙 정렬
   - 3컬럼 수직 구분선
   - 카드별: 보라 filled badge → 화살표 → 보라 lead text → 콘텐츠
   ============================================================= */
/* ── Feature Section: Editorial Split Layout ───────────── */
.ax-feature {
  background: #ffffff;
  padding: 150px 0 64px;
  overflow: hidden;
}
.ax-feature__inner {
  width: 80%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 42fr 58fr;
  align-items: center;
  min-height: 432px;
}

/* Left: headline + body */
.ax-feature__copy {
  padding-right: 72px;
}
.ax-feature__headline {
  font-family: var(--font-family);
  font-size: clamp(30px, 4.5vw, 54px);
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 40px;
}
.ax-feature__body {
  font-family: var(--font-family);
  font-size: 16px;
  color: #555555;
  line-height: 1.75;
}
.ax-feature__body p { margin: 0 0 18px; }
.ax-feature__body p:last-child { margin: 0; }

/* Right: robot image */
.ax-feature__visual {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.ax-feature__hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 20px;
}

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ax-feature__inner { width: 92%; }
  .ax-feature__copy  { padding-right: 48px; }
}
@media (max-width: 900px) {
  .ax-feature__inner {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0 28px;
  }
  .ax-feature__copy { padding-right: 0; padding-bottom: 40px; }
}
@media (max-width: 480px) {
  .ax-feature { padding: 51px 0 48px; }
  .ax-feature__headline { font-size: clamp(32px, 8vw, 42px); }
}


/* =============================================================
   Footer
   ============================================================= */
.site-footer {
  background: var(--bg-body);
  font-family: var(--font-family);
  color: var(--color-text);
  font-size: var(--font-size-xse);
  font-weight: var(--font-weight-normal);
  padding: 0 60px 44px;  /* top 0: 경계선·간격을 footer-wrap이 담당 */
}
.footer-wrap {
  /* border-top을 여기에 배치 → .uiux-layout 과 동일한 max-width 1450px 기준 정렬 */
  border-top: 1px solid var(--border-light);
  padding-top: 40px;     /* 경계선 ↔ 콘텐츠 간격 (기존 site-footer top 이관) */
  max-width: 1450px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}
.footer-left {
  max-width: 1450px;
  font-size: var(--font-size-xse);
  line-height: 1.9;
  letter-spacing: -0.1px;
}
.footer-left .line1 { margin-left: 10px; font-weight: var(--font-weight-normal); opacity: .95; }
.footer-left .line2 { margin-top: 10px; margin-left: 10px; font-weight: var(--font-weight-normal); opacity: .95; }
.footer-left .line3 {
  margin-top: 10px;
  margin-left: 10px;
  font-weight: var(--font-weight-normal);
  opacity: .95;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.footer-copy {
  flex: 1;                             /* 좌·우 사이 공간 점유 */
  text-align: center;                  /* 텍스트 가운데 정렬 */
  align-self: flex-end;                /* footer-right 하단과 수직 맞춤 */
  opacity: .55;
  font-size: var(--font-size-xse);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  min-width: 140px;
}
.footer-logo-text {
  color: var(--color-heading);       /* 흰 배경에 맞춰 진한 텍스트 */
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.5px;
}
.footer-topbtn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(0, 0, 0, .18);  /* 흰 배경에 맞춰 어두운 테두리 */
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-sub);              /* 흰 배경에 맞춰 어두운 아이콘 */
  opacity: .85;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.footer-topbtn:hover { transform: translateY(-2px); opacity: 1; }


/* =============================================================
   Service Section  (텍스트 중심 1컬럼)
   ============================================================= */
.mha-service {
  background: var(--bg-section);
  color: var(--color-text);
  padding: var(--mha-sec-y) var(--mha-sec-x);
}
.mha-service__wrap {
  max-width: var(--mha-wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}
.mha-service__eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extra);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-heading);
  opacity: .75;
  margin-bottom: 12px;
}
.mha-service__title {
  margin: 0 0 14px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(30px, 3.2vw, 52px);
}
.mha-service__title-sub {
  display: block;
  margin-top: 12px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--color-muted);
  letter-spacing: .02em;
}
.mha-service__lead {
  margin: 0 0 22px;
  color: var(--color-muted);
  line-height: 1.8;
  font-size: 15px;
}
.mha-service__lead strong {
  color: var(--color-heading);
  font-weight: var(--font-weight-extra);
}
.mha-service__cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.mha-service .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-extra);
  font-size: var(--font-size-base);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  user-select: none;
}
.mha-service .btn--ghost {
  background: var(--bg-card);
  color: var(--color-heading);
  border-color: var(--border-light);
}
.mha-service .btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}


/* =============================================================
   Responsive
   ============================================================= */

/* 1200px: 4컬럼 → 3컬럼 */
/* 980px: 2컬럼 belief */
@media (max-width: 980px) {
  .belief-section { padding: 80px 24px 90px; }
  .belief-grid    { grid-template-columns: 1fr; gap: 40px; }
  .belief-logo    { justify-content: flex-start; }
}
@media (max-width: 900px) {
  /* 헤더 */
  .main-nav   { display: none; }
  .mega       { display: none; }
  .header-bar { padding: 0 20px; }
  /* Hero 텍스트 */
  .mha-hero-visual .hero-text {
    left: 24px;
    right: 24px;
    bottom: var(--hero-text-b-md);
    max-width: 92%;
  }

  :root {
    --hero-title-sz:  var(--hero-title-sz-md);
    --hero-desc-sz:   var(--hero-desc-sz-md);
  }
}
/* 520px: 소형 폰 */
@media (max-width: 520px) {
  :root {
    --hero-title-sz: var(--hero-title-sz-sm);
    --hero-desc-sz:  var(--hero-desc-sz-sm);
  }
  .mha-hero-visual .hero-text { bottom: var(--hero-text-b-sm); }
  .mha-service .btn            { width: 100%; }
  .contact-kv                  { grid-template-columns: 66px 1fr; }
}
/* 푸터 반응형 */
@media (max-width: 900px) {
  .site-footer  { padding: 38px 24px; }
  .footer-wrap  { flex-direction: column; align-items: flex-start; }
  .footer-right { align-items: flex-start; }
  .footer-copy  { text-align: left; align-self: auto; }
}


/* =============================================================
   ✅ Hero CTA Overlay (예약하기 버튼을 HERO 위에 오버레이)
   - 딤(z=2), 텍스트(z=4), 탭(z=6~7) 위로 버튼 배치(z=8)
   ============================================================= */
.mha-hero-visual .mha-hero-cta{
  position: absolute;
  left: var(--hero-cta-l);
  bottom: var(--hero-cta-b);
  z-index: 8;
  pointer-events: auto;
  margin: 0;
}

/* hero 영역에서도 btn 스타일이 먹도록(현재 .mha-service .btn 으로만 제한되어 있어 보완) */
.mha-hero-visual .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-extra);
  font-size: var(--font-size-base);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  user-select: none;
}

.mha-hero-visual .btn--ghost{
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mha-hero-visual .btn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.45);
}

/* 반응형: 모바일에서는 우측 여백/높이 조정 */
@media (max-width: 900px){
  .mha-hero-visual .mha-hero-cta{
    right: var(--hero-cta-l-md);
    bottom: var(--hero-cta-b-md);
  }
}


/* =============================================================
   ✅ HERO: PiP 오버레이 (이미지 / 동영상 공용)
   - img:  id="heroOverlayImg"   class="hero-overlay-img"
   - video:id="heroOverlayVideo" class="hero-overlay-video"
   - JS가 .media-stage에 has-virtual-overlay(img) / has-overlay-video(video) 를 토글
   - media-stage 는 will-change:transform → stacking context 형성
     → 이 z-index(6)는 media-stage 내부 순서 제어용
     → tabs(.visual-overlay z-index:6~7)는 항상 PiP 위에 렌더링됩니다
   - bottom: 125px 로 tab bar(~80px) 위에 배치
   ============================================================= */

/* ── 공통 베이스 (위치·크기·전환·초기 숨김) ─────────────────
   img / video 공통: 위치·크기·전환만 정의
   배경·테두리는 각 타입별 규칙에서 별도 지정
   ───────────────────────────────────────────────────────── */
.mha-hero-visual .hero-overlay-img,
.mha-hero-visual .hero-overlay-video {
  position: absolute;

  /* ✅ 공통 inset:0 규칙에서 분리 (top/left 자동) */
  top: var(--hero-pip-t);
  left: var(--hero-pip-l);

  right: var(--hero-pip-r);
  bottom: var(--hero-pip-b);

  width: var(--hero-pip-width);
  height: var(--hero-pip-height);

  object-fit: contain;
  object-position: center center;

  border-radius: 14px;

  opacity: 0;
  transform: translateY(8px);

  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;

  z-index: 6;
  display: block;
}

/* ── 이미지 PiP 전용: 장식 효과 전체 제거 ───────────────────
   PNG 이미지 자체만 표시. 배경·테두리·그림자·둥근모서리 없음.
   ───────────────────────────────────────────────────────── */
.mha-hero-visual .hero-overlay-img {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* ── 동영상 PiP 전용: 레터박스 배경 + 테두리 유지 ────────────
   video 엘리먼트는 alpha 채널 없으므로 레터박스 배경 필요.
   ───────────────────────────────────────────────────────── */
.mha-hero-visual .hero-overlay-video {
  background: rgba(0, 0, 0, 0.60);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .40);
}

/* ── 이미지 PiP 활성 (has-virtual-overlay) ───────────────── */
.mha-hero-visual .media-stage.has-virtual-overlay .hero-overlay-img {
  opacity: 1;
  transform: translateY(0);
}

/* ── 동영상 PiP 활성 (has-overlay-video) ────────────────── */
.mha-hero-visual .media-stage.has-overlay-video .hero-overlay-video {
  opacity: 1;
  transform: translateY(0);
}

/* ── 반응형(≤900px) ──────────────────────────────────────── */
@media (max-width: 900px) {
  .mha-hero-visual .hero-overlay-img,
  .mha-hero-visual .hero-overlay-video {
    width: min(320px, 82vw);
    height: calc(min(320px, 82vw) * 0.6);
    right: 10px;
    left: auto;
    bottom: 80px;
  }
}
/* ── FAB Nav (이전/다음 섹션 스크롤) ───────────────────────────── */
.fab-nav {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: rgba(80, 80, 80, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, transform 0.15s, opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}
.fab-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.fab-nav:hover {
  color: rgba(40, 40, 40, 0.95);
  transform: scale(1.15);
}
.fab-nav:active { transform: scale(0.9); }

/* ── FAB Cluster (scroll nav + inquiry) ────────────────────────── */
.fab-cluster {
  position: fixed;
  bottom: 40px;
  right: 28px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.inquiry-fab {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #7c3aed;
  color: #fff;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
  margin-top: 4px;
  flex-shrink: 0;
}
.inquiry-fab__main { font-family: var(--font-family); font-size: 14px; line-height: 1; }
.inquiry-fab__sub  { font-family: var(--font-family); font-size: 9px;  line-height: 1; opacity: 0.85; }
.inquiry-fab:hover {
  background: #6d28d9;
  transform: scale(1.07);
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.6);
}
.inquiry-fab:active {
  transform: scale(0.97);
}

@media (max-width: 600px) {
  .fab-cluster {
    bottom: 24px;
    right: 16px;
  }
  .inquiry-fab {
    width: 58px;
    height: 58px;
    font-size: 10px;
  }
}

/* ── Inquiry Modal ──────────────────────────────────────────────── */
.inq-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9100;
  opacity: 0;
  transition: opacity 0.25s;
}
.inq-backdrop.is-open {
  display: block;
  opacity: 1;
}

.inq-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  z-index: 9200;
  width: min(600px, 60vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
.inq-modal.is-open {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.inq-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  color: #111;
  transition: background 0.15s;
}
.inq-close:hover { background: #f0f0f0; }

.inq-header {
  background: #111;
  padding: 22px 60px;
  flex-shrink: 0;
}
.inq-title {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-align: center;
  margin: 0;
}

.inq-body {
  overflow-y: auto;
  padding: 32px 60px 36px;
  flex: 1;
}

.inq-form { display: flex; flex-direction: column; gap: 0; }

.inq-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }

.inq-label {
  font-size: 14px;
  font-weight: 500;
  color: #111;
  letter-spacing: -0.1px;
}
.inq-req { color: #e02020; margin-left: 2px; }

.inq-input,
.inq-select,
.inq-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-family);
  color: #111;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.inq-input:focus,
.inq-select:focus,
.inq-textarea:focus { border-color: #7c3aed; }
.inq-input.inq-error,
.inq-select.inq-error,
.inq-textarea.inq-error { border-color: #e02020; }
.inq-hint {
  font-size: 11px;
  color: #e02020;
  min-height: 16px;
  margin-top: 3px;
  letter-spacing: -0.1px;
}

.inq-textarea { resize: vertical; min-height: 100px; }

.inq-phone-row { display: flex; gap: 8px; }
.inq-phone-row .inq-select { flex: 0 0 160px; }
.inq-phone-row .inq-input  { flex: 1; }

.inq-divider {
  border: none;
  border-top: 1px solid #e8e8e8;
  margin: 8px 0 16px;
}

.inq-agree-all {
  margin-bottom: 10px;
}
.inq-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  position: relative;
}
.inq-check-label.inq-check-all {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  border-bottom: none;
}
.inq-check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #7c3aed;
  cursor: pointer;
  flex-shrink: 0;
}
.inq-check-label.inq-error { color: #e02020; }

.inq-detail-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #999;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.inq-detail-btn:hover { color: #555; }

/* ── 제출 피드백 메시지 ─────────────────────────────────────── */
.inq-msg {
  min-height: 20px;
  margin: 0 0 12px;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  border-radius: 6px;
  padding: 0;
}
.inq-msg:empty { margin: 0; }
.inq-msg--ok  { color: #1a7f37; background: #edfdf3; padding: 10px 14px; }
.inq-msg--err { color: #c0392b; background: #fdf2f2; padding: 10px 14px; }

.inq-footer { display: flex; justify-content: center; padding-top: 8px; }

.inq-submit {
  width: 240px;
  height: 52px;
  border: 1.5px solid #111;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.18s, color 0.18s;
}
.inq-submit:hover { background: #111; color: #fff; }

@media (max-width: 600px) {
  .inq-body    { padding: 24px 20px 28px; }
  .inq-header  { padding: 18px 20px; }
  .inq-phone-row { flex-direction: column; }
  .inq-phone-row .inq-select { flex: none; width: 100%; }
  .inq-submit  { width: 100%; }
}


/* =============================================================
   Creator Showcase — section header
   ============================================================= */
.ax-creators__head {
  display: flex;
  justify-content: center;
  padding: 32px clamp(20px, 6vw, 100px) 52px;  /* top: 64px → 32px (gap 50% 축소) */
}
.ax-creators__title-box {
  width:      min(800px, 90%);
  text-align: center;
}
/* news-line 공유 컴포넌트: title-box 내부에서 중앙 정렬 */
.ax-creators__title-box .news-line { margin: 0 auto 18px; }

.ax-creators__line {
  width: 64px;
  height: 3px;
  background: #0a0a0a;
  margin-bottom: 18px;
}
.ax-creators__title {
  font-size: clamp(21px, 2.4vw, 36px);
  font-weight: var(--font-weight-medium);
  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;
}
.ax-creators__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
  width: 70%;
  margin: 0 auto;
}
.ax-creators__col {
  display: flex;
  flex-direction: column;
}
.ax-creators__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.ax-creators__thumb img,
.ax-creators__thumb video {
  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,
.ax-creators__col:hover .ax-creators__thumb video {
  transform: scale(1.045);
}
.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;
  flex: 1;
}
.ax-creators__info {
  text-align: center;
}
.ax-creators__name {
  display: block;
  font-size: clamp(15px, 1.5vw, 20px); 
  font-weight: var(--font-weight-medium);
  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__grid {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0 24px;
  }
  .ax-creators__col + .ax-creators__col .ax-creators__card {
    border-left: none;
  }
}

/* =============================================================
   Haptic Tech Section — news-head 공유 컴포넌트
   ============================================================= */

.news-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 50px;
}
.news-title-box { width: min(620px, 100%); }

.news-line {
  width: var(--mha-line-w);
  height: var(--mha-line-h);
  background: var(--color-heading);
  margin-bottom: 18px;
  transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.news-line.is-collapsed { width: 0; }
.news-title {
  font-size: clamp(21px, 2.4vw, 36px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--color-heading);
}
.news-sub {
  margin-top: 14px;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  color: var(--color-text);
  opacity: .85;
}

/* =============================================================
   ✅ HAPTIC TECH Section  (#haptic-tech)
   ============================================================= */

.uiux-section {
  background: var(--bg-section);
  padding: calc(var(--mha-sec-gap) / 2) var(--mha-sec-x);
  overflow: hidden;
  position: relative;
}

.uiux-section .news-head { justify-content: flex-start; }
.uiux-section .news-title-box { width: 100%; }
.uiux-section .news-title { white-space: nowrap; }

/* #haptic-tech 헤더 중앙 정렬 — uiux-section flex-start 오버라이드 */
#haptic-tech .news-head      { justify-content: center; margin-bottom: 56px; }
#haptic-tech .news-title-box { text-align: center; width: min(620px, 100%); }
#haptic-tech .news-title     { white-space: normal; }
#haptic-tech .news-line      { margin: 0 auto 18px; }

.uiux-wrap {
  max-width: var(--mha-wrap-max);
  margin: 0 auto;
  position: relative;
}

.uiux-layout {
  --uiux-panel-h: 600px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 64px;
  padding: 35px 0px;
  background: var(--bg-card, #ffffff);
  /* border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.07); */
  margin-top: 8px;
}

.uiux-accordion {
  flex: 0 0 380px;
  min-width: 0;
  min-height: var(--uiux-panel-h);
  border-top:    1px solid #d2d2d7;
  border-bottom: 1px solid #d2d2d7;
}

.uiux-item + .uiux-item { border-top: 1px solid #d2d2d7; }
.uiux-item:first-child   { border-top: none; }
.uiux-item:last-child    { border-bottom: none; }

.uiux-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}

.uiux-item__title {
  font-family: var(--font-family);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.uiux-item__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #6e6e73;
  transform: rotate(180deg);
  transition: transform 0.35s ease;
}
.uiux-item.is-open .uiux-item__chevron { transform: rotate(0deg); }

.uiux-item__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              padding-bottom 0.42s ease;
  padding-bottom: 0;
}
.uiux-item.is-open .uiux-item__body {
  max-height: 800px;
  padding-bottom: 24px;
}

.uiux-item__desc {
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-normal);
  line-height: 1.72;
  color: var(--color-sub);
  margin: 0;
  word-break: keep-all;
}

.uiux-item__lead { margin-top: 14px; }

.uiux-item__list {
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
}
.uiux-item__list li {
  position: relative;
  padding-left: 1.25em;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-normal);
  line-height: 1.72;
  color: var(--color-sub);
  word-break: keep-all;
}
.uiux-item__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-heading);
  font-weight: var(--font-weight-medium);
}

.uiux-visual {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  position: sticky;
  top: calc(var(--header-height, 40px) + 48px); /* header + subnav ≈ 88px */
  height: var(--uiux-panel-h);
  border-radius: 10px;
  align-self: flex-start;
  overflow: hidden;
}

.uiux-visual__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1;
  border-radius: 10px;
  transition: opacity 0.28s ease;
}
.uiux-visual__img.is-fading { opacity: 0; }

/* 영상(video) 위 50% 어둠 오버레이 — video는 ::after 불가 → sibling div
   .uiux-visual(position:sticky)를 기준으로 inset:0 절대 배치.
   DOM 순서상 uiux-visual__videos 앞 → videos 패널이 표시되면 위에 렌더링. */
.uiux-visual__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
  border-radius: inherit;
}

/* 영상 중앙 캡션 — dim(50%) 위에 배치, z-index:2 */
.uiux-visual__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  z-index: 2;
  pointer-events: none;
}
.uiux-visual__caption[hidden] { display: none; }
.uiux-visual__caption__eyebrow {
  display: block;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 10px;
}
.uiux-visual__caption__headline {
  font-family: var(--font-family);
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.uiux-visual__videos {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 50px;
  border-radius: 10px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.uiux-visual__videos[hidden] { display: none; }
.uiux-visual__video {
  flex: none;
  width: calc(35% - 8px);
  height: 90%;
  object-fit: cover;
  border-radius: 10px;
}

@media (max-width: 1100px) {
  .uiux-layout    { gap: 48px; padding: 40px 44px; }
  .uiux-accordion { flex-basis: 300px; }
}

@media (max-width: 860px) {
  .uiux-layout {
    flex-direction: column-reverse;
    gap: 28px;
    padding: 32px 28px;
  }
  .uiux-accordion { flex-basis: auto; width: 100%; }
  .uiux-visual    { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 900px) {
  .uiux-section { padding: calc(var(--mha-sec-gap-md) / 2) var(--mha-sec-x-md); }
}

/* =============================================================
   AX·DX·ROBOT — Transparent Hero Header
   헤더가 hero visual 위에 오버레이됩니다.
   ============================================================= */

/* 1. hero를 전체 뷰포트로 확장 — 헤더 오버레이이므로 padding 불필요 */
.content         { padding-top: 0; }
.mha-hero-visual { height: 100vh; }

/* 2. 헤더 투명화 + 전환 애니메이션 */
.site-header {
  background:              transparent;
  box-shadow:              none;
  backdrop-filter:         none;
  -webkit-backdrop-filter: none;
  transition:
    background  0.30s ease,
    box-shadow  0.30s ease;
}

/* 3. 로고 · 네비 · 우측 링크 → 흰색 (hero 위) */
.logo,
.logo:hover                       { color: #fff;                      transition: color 0.30s ease; }
.main-nav > ul > li > a           { color: rgba(255, 255, 255, 0.92); transition: color 0.30s ease; }
.main-nav > ul > li > a::after    { background: #fff; }
.header-right a                   { color: rgba(255, 255, 255, 0.85); transition: color 0.30s ease; }
.header-right a::after            { background: #fff; }

/* 4. 메가 드롭다운 — 투명 배경 (hero 위) */
.mega {
  background:              transparent;
  backdrop-filter:         none;
  -webkit-backdrop-filter: none;
  transition: background 0.30s ease;
}
.col a       { color: rgba(255, 255, 255, 0.80); transition: color 0.30s ease; }
.col a:hover { color: #fff; }

/* ── hero 스크롤 아웃 시: 흰 배경 + 기본 텍스트색 ── */
.site-header.is-scrolled {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.site-header.is-scrolled .logo,
.site-header.is-scrolled .logo:hover        { color: var(--color-heading); }
.site-header.is-scrolled .main-nav > ul > li > a   { color: var(--color-text); }
.site-header.is-scrolled .main-nav > ul > li > a::after { background: var(--brand-red); }
.site-header.is-scrolled .header-right a    { color: var(--color-text); }
.site-header.is-scrolled .header-right a::after     { background: var(--brand-red); }
.site-header.is-scrolled .mega             { background: #fff; }
.site-header.is-scrolled .col a            { color: var(--color-text); }
.site-header.is-scrolled .col a:hover      { color: var(--brand-red); }

/* ── is-scrolled: 로고 중앙 고정, 네비 숨김 ── */
.site-header.is-scrolled .header-bar  { justify-content: center; }
.site-header.is-scrolled .main-nav    { opacity: 0; visibility: hidden; pointer-events: none; }
.site-header.is-scrolled .header-right {
  position: absolute;
  right: 60px;
}
@media (max-width: 900px) {
  .site-header.is-scrolled .header-right { right: 20px; }
}

/* 5. Hero 상단 그라디언트 — 헤더 텍스트 가독성 보장
   z-index 3 : dim overlay(::after, z:2) 위 / hero-text(z:4)·tabs(z:6) 아래 */
.mha-hero-visual .visual-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.18) 55%,
    transparent         100%
  );
  z-index: 3;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════
   AX·DX Robot — Hero Visual  (xrvpstudio.html 스타일 이식)
   .xrv-hero 스코프로 격리 → 기존 mha-hero-visual 에 무간섭
   ═══════════════════════════════════════════════════════════ */

/* ── 1. 페이지 전용 팔레트 ─── */
.xrv-hero {
  --xrv-teal:    #33E0C4;
  --xrv-teal-d:  #1FBFA6;
  --xrv-violet:  #7C5CFF;
  --xrv-glow:    rgba(51, 224, 196, 0.42);
  --video-opacity: 0.36;
  --img-opacity:   0.42;
}

/* ── 2. 딤 오버레이 — 좌하단 텍스트 가독성 강화 ─ */
.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. 히어로 텍스트 — 좌하단 배치 (center → bottom-left) ─── */
.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 레이블 스타일 ─── */
.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);
  text-shadow:    none;
  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. 타이틀 — 그라디언트 텍스트 ─── */
.xrv-hero .hero-title {
  font-size:      clamp(1rem, 2.6vw, 2.84rem);
  line-height:    1.08;
  letter-spacing: -0.03em;
  white-space:    pre-line;
  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;
  text-shadow:    none;
}
.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;
  text-shadow: none;
  transition:  none !important;
  -webkit-text-fill-color: unset;
}

/* ── 7. CTA 버튼 — pointer-events 복원 ─── */
.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;
  margin-top: 28px;
  max-width:  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:       0.92rem;
  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 20px;
  border-radius:   100px;
  white-space:     nowrap;
}
.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; }
}


/* ══════════════════════════════════════════════════════════════
   AX·DX DEMO MODAL — xrvpstudio #xrv-demo 이식 + ax 스코프
   ══════════════════════════════════════════════════════════════ */
#ax-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);
}
#ax-demo.open { opacity: 1; pointer-events: all; }

#ax-demo .xrv-m-bd {
  position:        absolute;
  inset:           0;
  background:      rgba(5,6,10,.72);
  backdrop-filter: blur(14px);
}
#ax-demo .xrv-m-box {
  position:              relative;
  z-index:               1;
  width:                 100%;
  max-width:             900px;
  max-height:            90vh;   /* fallback: dvh 미지원 브라우저 */
  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);
}
#ax-demo.open .xrv-m-box { transform: none; }

#ax-demo .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;
}
#ax-demo .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;
}
#ax-demo .xrv-m-logo em  { color: var(--xm-accent); font-style: normal; }
#ax-demo .xrv-m-dot      { width: 8px; height: 8px; border-radius: 50%; background: var(--xm-accent); box-shadow: 0 0 10px var(--xm-accent); }
#ax-demo .xrv-m-left h2  { font-size: 1.55rem; margin-bottom: 12px; color: #fff; }
#ax-demo .xrv-m-sub      { font-size: .88rem; font-weight: 300; color: var(--xm-txt2); line-height: 1.7; margin-bottom: 26px; }
#ax-demo .xrv-m-ben      { display: flex; flex-direction: column; gap: 14px; }
#ax-demo .xrv-m-it       { display: flex; gap: 11px; align-items: center; }
#ax-demo .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; }
#ax-demo .xrv-m-ic svg   { width: 14px; height: 14px; color: var(--xm-accent); }
#ax-demo .xrv-m-it h5    { font-size: .86rem; font-weight: 600; color: #fff; margin: 0 0 2px; }
#ax-demo .xrv-m-it p     { font-size: .76rem; font-weight: 300; color: var(--xm-txt3); line-height: 1.5; margin: 0; }
#ax-demo .xrv-m-note     { margin-top: 26px; font-size: .74rem; font-weight: 300; color: var(--xm-txt3); line-height: 1.6; }

/* RIGHT panel — 라이트 테마 전용 색상 변수 재정의(MetaHoop Arena 모달과 동일한
   방식 — #ax-demo .xrv-m-left 는 위 #ax-demo 의 다크 변수를 그대로 상속받아
   영향 없음). */
#ax-demo .xrv-m-right {
  --xm-surface:             #FFFFFF;
  --xm-bg2:                 #F3F4F6;
  --xm-txt:                 #18181B;
  --xm-txt2:                #6B7280;
  --xm-txt3:                #9CA3AF;
  --xm-line:                #E5E7EB;
  --xm-line2:               #E5E7EB;
  --xm-accent:              #E8823C;
  --xm-accent-hover:        #F0954D;
  --xm-accent-glow:         rgba(232,130,60,.14);
  --xm-accent-shadow:       rgba(232,130,60,.32);
  --xm-accent-shadow-hover: rgba(232,130,60,.45);

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

#ax-demo .xrv-m-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#ax-demo .xrv-m-fg   { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
#ax-demo .xrv-m-fg label { font-size: .76rem; font-weight: 400; color: var(--xm-txt2); }
#ax-demo .xrv-m-req  { color: var(--xm-accent); margin-left: 2px; }
#ax-demo .xrv-m-fg input,
#ax-demo .xrv-m-fg select,
#ax-demo .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;
}
#ax-demo .xrv-m-fg input::placeholder,
#ax-demo .xrv-m-fg textarea::placeholder { color: var(--xm-txt3); }
#ax-demo .xrv-m-fg input:focus,
#ax-demo .xrv-m-fg select:focus,
#ax-demo .xrv-m-fg textarea:focus { border-color: var(--xm-accent); box-shadow: 0 0 0 3px var(--xm-accent-glow); }
#ax-demo .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='%236B7280' 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;
}
#ax-demo .xrv-m-fg select option { background: var(--xm-surface); color: var(--xm-txt); }

#ax-demo .xrv-m-submit {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         14px;
  margin-top:      8px;  /* 개인정보 동의 체크박스 행과의 간격 — 기존 4px의 2배 */
  border-radius:   10px;
  background:      var(--xm-accent);
  color:           #FFFFFF;
  font-family:     var(--font-family);
  font-size:       1rem;
  font-weight:     700;
  box-shadow:      0 6px 20px var(--xm-accent-shadow);
  transition:      transform .2s var(--xm-expo), box-shadow .2s, background .2s;
  cursor:          pointer;
  border:          none;
}
#ax-demo .xrv-m-submit:hover { background: var(--xm-accent-hover); transform: translateY(-2px); box-shadow: 0 10px 30px var(--xm-accent-shadow-hover); }
#ax-demo .xrv-m-submit svg { width: 16px; height: 16px; }

#ax-demo .xrv-m-ok       { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; min-height: 360px; padding: 30px; }
#ax-demo .xrv-m-ok.xrv-m-show  { display: flex; }
#ax-demo .xrv-m-wrap.xrv-m-hide { display: none; }
#ax-demo .xrv-m-ok-ic    { width: 56px; height: 56px; border-radius: 50%; background: var(--xm-accent-glow); border: 1px solid var(--xm-accent-shadow); display: flex; align-items: center; justify-content: center; }
#ax-demo .xrv-m-ok-ic svg { width: 24px; height: 24px; color: var(--xm-accent); }
#ax-demo .xrv-m-ok h3    { color: var(--xm-txt); }

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

/* ═══════════════════════════════════════════════════════════
   AX·DX Robot — 섹션 내비게이션 (.ax-subnav)
   position:sticky → 헤더 바로 아래 고정
   ═══════════════════════════════════════════════════════════ */
.ax-subnav {
  position:        sticky;
  top:             var(--header-height, 40px);
  z-index:         120;
  background:      var(--bg-subnav, #000);
  backdrop-filter: blur(18px) saturate(1.4);
  border-top:      1px solid #444;
  border-bottom:   1px solid #444;
}
.ax-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;
}
.ax-subnav__row {
  display:         flex;
  justify-content: center;
  gap:             4px;
  flex-wrap:       wrap;
  padding:         11px 24px;
  max-width:       1200px;
  margin:          0 auto;
}
.ax-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;
}
.ax-subnav__link:hover,
.ax-subnav__link.is-active {
  color:           #33E0C4;
  background:      rgba(255, 255, 255, .05);
}
/* 기본 상태는 다른 링크와 동일하게 무채색(회색)으로 두어 "항상 활성화된
   것처럼" 보이지 않게 하고, 테두리만 남겨 버튼임을 은은히 표시.
   실제 강조(teal 채움)는 hover/focus 시에만 나타나 명확한 CTA 피드백을 준다.
   (xrvpstudio 서브내비 .xrv-subnav__cta 와 동일 처리) */
.ax-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;
}
.ax-subnav__cta:hover,
.ax-subnav__cta:focus-visible {
  color:        #04140F;   /* .ax-subnav__link:hover 의 teal 텍스트 재정의 방지 */
  background:   #33E0C4;
  border-color: #33E0C4;
}
/* 서브내비 아래 섹션: sticky header + subnav 높이만큼 스크롤 여백 */
#ax-overview,
#ax-usecases,
#ax-showcase,
#ax-feature,
#ax-creators,
#haptic-tech,
#axrobot-products {
  scroll-margin-top: calc(var(--header-height, 45px) + 46px);
}


/* ═══════════════════════════════════════════════════════════
   AX·DX Robot — Overview Section (.xrv-ov 재사용)
   xrvpstudio의 .xrv-ov 스타일을 axdxrobot에 이식
   ═══════════════════════════════════════════════════════════ */
.xrv-ov {
  padding:           108px 0;
  background:        #0a0c12;
  position:          relative;
  scroll-margin-top: calc(var(--header-height, 45px) + 46px);
}
.xrv-ov__wrap {
  max-width: var(--mha-wrap-max, 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.2rem, 4vw, 3.2rem);
  font-weight:             500;
  letter-spacing:          -.025em;
  line-height:             1.14;
  margin-top:              0.4em;
  margin-bottom:           20px;
  background:              linear-gradient(112deg,
                             #EEF0F6 0%,
                             #EEF0F6 38%,
                             #33E0C4 68%,
                             #7C5CFF 100%);
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
  color:                   transparent;
  text-shadow:             none;
}
.xrv-ov__desc {
  font-size:   1.06rem;
  color:       rgba(238, 240, 246, .72);
  font-weight: 300;
  line-height: 1.85;
}

/* ── 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); }

.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; }
}


/* ═══════════════════════════════════════════════════════════
   AX·DX Robot — Solutions Section (.xrv-uc 재사용)
   xrvpstudio의 xrv-uc 2×2 카드 그리드를 axdxrobot에 이식
   ═══════════════════════════════════════════════════════════ */
.xrv-uc {
  padding:           108px 0;
  background:        #06080d;
  position:          relative;
  scroll-margin-top: calc(var(--header-height, 45px) + 46px);
}
.xrv-uc__wrap {
  max-width: var(--mha-wrap-max, 1450px);
  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;
  margin-top:              0.4em;
  margin-bottom:           16px;
  background:              linear-gradient(112deg,
                             #EEF0F6 0%,
                             #EEF0F6 38%,
                             #33E0C4 68%,
                             #7C5CFF 100%);
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
  color:                   transparent;
  text-shadow:             none;
}
.xrv-uc__desc {
  font-size:   1.04rem;
  color:       rgba(238, 240, 246, .72);
  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; }
  .xrv-uc__grid  { grid-template-columns: 1fr; }
  .xrv-uc__card  { min-height: 280px; }
  .xrv-uc__body  { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   AX·DX Robot — 페이지 전용 오버라이드
   (ax_dx_robot_index.html 인라인 <style> 에서 이전)
   ═══════════════════════════════════════════════════════════ */

/* ax-showcase min-height 초기화 */
#ax-showcase { min-height: unset; }

/* ax-creators 그리드 1.5× 확장 (axdxrobot 전용 오버라이드)
 * 공통 CSS: width 70% → 각 컬럼 ≈ 22vw
 * 여기서:   width 85% → ax-creators 와 동일 기준
 * 측면 여백 padding으로 시각적 밀도 조정 */
#ax-creators .ax-creators__grid {
  width: 85%;
  padding: 0 clamp(16px, 3vw, 48px);
  box-sizing: border-box;
}

/* haptic-tech 가로 폭 = ax-creators 동일 정렬
 * ax-creators__grid : width 85%; margin 0 auto (section 무패딩)
 * 동일하게 section 횡방향 padding 제거 후 wrap 을 85% 로 고정 */
#haptic-tech {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 30px;  /* #axrobot-products 와의 gap 50% 축소 (60px → 30px) */
}
#haptic-tech .uiux-wrap {
  max-width: none;
  width: 79%;
}
@media (max-width: 900px) {
  /* ax-creators__grid 900px 이하: width 100% + padding 24px */
  #haptic-tech .uiux-wrap {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
}

/* haptic-tech 아코디언 본문 전체 #333 → #111 */
#haptic-tech .uiux-item__desc,
#haptic-tech .uiux-item__list li {
  color: #111;
}

/* Force Feedback 패널: 상단 대형 + 하단 썸네일 */
#haptic-tech .uiux-visual__videos {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  background: #fff;
}
#haptic-tech .uiux-visual__panel-img {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
  background: #fff;
}
#haptic-tech .uiux-visual__panel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0px 0px;
  margin-top: -16px;
  background: #fff;
}
#haptic-tech .uiux-visual__panel-thumb {
  flex: 0 0 auto;
  width: 12%;
  height: auto;
  display: block;
  object-fit: cover;
}
#haptic-tech .uiux-visual__panel-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#haptic-tech .uiux-visual__panel-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #444;
  word-break: keep-all;
}
#haptic-tech .uiux-visual__panel-cta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
  letter-spacing: 0.01em;
}
#haptic-tech .uiux-visual__panel-cta:hover { text-decoration: underline; }

/* 스펙 footer: 4칸 그리드 */
#haptic-tech .uiux-visual__panel-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 14px 16px;
}
#haptic-tech .panel-spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border-right: 1px solid #e5e5ea;
}
#haptic-tech .panel-spec-item:last-child {
  border-right: none;
}
#haptic-tech .panel-spec-value {
  font-size: 1.8rem;
  font-weight: 500;
  color: #111;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
#haptic-tech .panel-spec-unit {
  font-size: 0.95rem;
  font-weight: 500;
  color: #4a9eff;
  margin-left: 2px;
  vertical-align: baseline;
}
#haptic-tech .panel-spec-label {
  font-size: 0.8rem;
  color: #999;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* =============================================================
   PRODUCT LIST — #axrobot-products
   (mha-products 와 동일한 흰 배경 / 글꼴 스타일)
   ============================================================= */

.axprod-section {
  background: #ffffff;
  /* ax-creators 동일: 측면 패딩 없이 내부 wrap이 width:85% 로 폭 제어 */
  /* bottom: ax-creators 와의 gap 50% 축소 (120px → 60px) */
  padding: 60px 0 60px;
  overflow: hidden;
}
.axprod-wrap {
  width: 85%;
  max-width: none;
  margin: 0 auto;
  position: relative;
}

/* news-head: mha-products 와 동일 — 중앙 정렬 + 폰트 스케일 통일 */
.axprod-section .news-head      { justify-content: center; margin-bottom: 28px; }
.axprod-section .news-title-box { text-align: center; width: min(860px, 100%); }
.axprod-section .news-line      { margin: 0 auto 18px; }
.axprod-section .news-title     { white-space: nowrap; font-size: clamp(32px, 3.2vw, 52px); }
/* ※ color/width/transform 은 스크롤 리빌 블록에서 관리 */

/* Group block */
.axprod-group {
  border-radius: 16px;
  padding: 32px 36px 36px;
  background: #ffffff;
  margin-bottom: 20px;
}
.axprod-group:last-child { margin-bottom: 0; }

/* Group header — 2× × 0.7 = 1.4× 스케일 */
.axprod-group__hd {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 20px;
}
.axprod-group__ic {
  width:           56px;
  height:          56px;
  border-radius:   14px;
  background:      color-mix(in srgb, var(--grp-accent, #6B7280) 14%, #FFFFFF);
  border:          1px solid color-mix(in srgb, var(--grp-accent, #6B7280) 30%, transparent);
  color:           var(--grp-accent, #111);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.axprod-group__name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: .01em;
}

/* Sub-category */
.axprod-cat { margin-bottom: 24px; }
.axprod-cat:last-child { margin-bottom: 0; }
.axprod-cat__label {
  font-size: .70rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: #9CA3AF;
  text-transform: uppercase;
  padding-bottom: 11px;
  margin-bottom: 16px;
  border-bottom: 1px solid #E5E7EB;
}

/* Cards grid — mha-products__grid 동일 */
.axprod-cards {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   20px;
}

/* Individual card — 헤더 바(그룹 accent 다크 틴트) + 흰 바디 + 이미지 박스
   + 아웃라인 버튼 (MetaHoop .mha-prod 구조 이식, 색상은 이 페이지 자체의
   그룹 accent 시스템을 color-mix 로 어둡게 틴트해 재사용) */
.axprod-card {
  position:       relative;
  background:     #FFFFFF;
  border:         1px solid color-mix(in srgb, var(--grp-accent, #6B7280) 20%, #E5E7EB);
  border-radius:  14px;
  box-shadow:     0 1px 3px rgba(17,24,39,.05);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  cursor:         pointer;
  transition:     transform .35s cubic-bezier(.22,1,.36,1),
                  box-shadow .35s ease, border-color .35s ease;
}
.axprod-card:hover {
  transform:    translateY(-5px);
  box-shadow:   0 20px 48px color-mix(in srgb, var(--grp-accent, #6B7280) 18%, transparent);
  border-color: color-mix(in srgb, var(--grp-accent, #6B7280) 55%, transparent);
}

/* ── 헤더 바: 화살표 + 제품명 + 번호 (그룹 accent를 어둡게 틴트) ──
   원색 그룹 accent(블루/오렌지/퍼플)는 밝은 톤이라 흰 텍스트 배경으로
   그대로 쓰면 대비가 부족해, #0a0c12(이 프로젝트의 다크 네이비 기준값 —
   Overview 섹션·도입문의 모달 좌측 패널과 동일)에 섞어 어둡힌다. */
.axprod-card__header {
  display:    flex;
  align-items: flex-start;
  gap:        10px;
  padding:    16px 20px;
  background: linear-gradient(135deg,
                color-mix(in srgb, var(--grp-accent, #6B7280) 55%, #0a0c12) 0%,
                color-mix(in srgb, var(--grp-accent, #6B7280) 28%, #06080d) 100%);
}
.axprod-card__header-arr {
  flex-shrink: 0;
  color:       #fff;
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}
.axprod-card__name {
  flex:           1;
  font-family:    var(--font-family);
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-bold);
  letter-spacing: -.01em;
  line-height:    1.35;
  color:          #fff;
  margin:         0;
}
.axprod-card__num {
  flex-shrink:    0;
  font-family:    var(--font-family);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-bold);
  letter-spacing: .04em;
  color:          rgba(255,255,255,.72);
  user-select:    none;
}

/* ── 본문(흰 배경) ── */
.axprod-card__body {
  display:        flex;
  flex-direction: column;
  padding:        24px 26px 28px;
  flex:           1;
}
.axprod-card__subtitle {
  font-style:  italic;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       color-mix(in srgb, var(--grp-accent, #6B7280) 70%, #000);
  margin:      0 0 4px;
}
.axprod-card__headline {
  font-family:    var(--font-family);
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-extra);
  letter-spacing: -.01em;
  color:          #111827;
  margin:         0 0 16px;
}

/* ── 제품 이미지 박스(옅은 회색 + 점무늬) ──
   이미지가 없는 카드는 .axprod-card__ic-fallback(기존 SVG 아이콘)을
   이 박스 안에 크게 배치한다(사용자 확인 완료). */
.axprod-card__imgwrap {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  aspect-ratio:     4 / 3;
  margin:           0 0 18px;
  padding:          16px;
  border-radius:    12px;
  border:           1px solid #E5E7EB;
  background-color: #F3F4F6;
  background-image: radial-gradient(#D1D5DB 1px, transparent 1px);
  background-size:  14px 14px;
  overflow:         hidden;
}
.axprod-card__imgwrap img {
  max-width:     100%;
  max-height:    100%;
  width:         auto;
  height:        auto;
  object-fit:    contain;
  border-radius: 4px;
}
.axprod-card__ic-fallback {
  width:           92px;
  height:          92px;
  border-radius:   22px;
  background:      color-mix(in srgb, var(--grp-accent, #0B8F7A) 14%, #FFFFFF);
  border:          1px solid color-mix(in srgb, var(--grp-accent, #0B8F7A) 32%, transparent);
  color:           var(--grp-accent, #0B8F7A);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.axprod-card__ic-fallback svg { width: 46px; height: 46px; }

/* ── 설명 ── */
.axprod-card__desc {
  font-size:   var(--font-size-sm);
  color:       #6B7280;
  font-weight: var(--font-weight-normal);
  line-height: 1.75;
  margin:      0 0 20px;
  flex-grow:   1;
}

/* ── 세부보기 버튼(아웃라인) ── */
.axprod-card__cta {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  align-self:      center;
  gap:             6px;
  padding:         10px 24px;
  border-radius:   100px;
  border:          1.5px solid var(--grp-accent, #0B8F7A);
  background:      #fff;
  color:           var(--grp-accent, #0B8F7A);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-semi);
  letter-spacing:  .02em;
  text-decoration: none;
  cursor:          pointer;
  transition:      color .22s ease, background .22s ease, border-color .22s ease;
}
.axprod-card__arr {
  display:    inline-block;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.axprod-card__cta:hover {
  /* 밝은 그룹 accent를 그대로 배경에 채우면 흰 텍스트 대비가 부족해질 수
     있어 살짝 어둡혀서(85%) 채운다 — 3개 그룹색 전부에서 안전한 대비 확보. */
  background: color-mix(in srgb, var(--grp-accent, #0B8F7A) 85%, #000);
  color:      #fff;
}
.axprod-card__cta:hover .axprod-card__arr { transform: translateX(5px); }
/* stretched link — 카드 전체를 <a> 히트 영역으로 확장.
 * .axprod-card__cta 는 static 이라 이 ::after 의 위치 기준(containing block)은
 * position:relative 인 .axprod-card 자신이 되어, 카드 전체를 투명하게 덮는다. */
.axprod-card__cta::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  2;
}

/* Responsive — mha-products__grid 동일 기준 */
@media (max-width: 1200px) {
  .axprod-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .axprod-wrap  { width: 100%; padding: 0 24px; box-sizing: border-box; }
}
@media (max-width: 768px) {
  .axprod-section      { padding: 72px 0; }
  .axprod-group        { padding: 24px 20px; }
  .axprod-cards        { grid-template-columns: 1fr; }
  .axprod-card__header { padding: 14px 18px; }
  .axprod-card__body   { padding: 18px 18px 20px; }
}

/* ── 스크롤 리빌 — 초기 상태 (mha-products 동일 color 전환 방식) ──
 * 흰 배경에서 텍스트 시작색 #D1D5DB (연회색) → 최종색으로 전환
 *   news-line  : width 0 → var(--mha-line-w, 240px)
 *   news-title : #D1D5DB → var(--color-heading)  (#111)
 *   news-sub   : #D1D5DB → var(--color-text)      (#12192c)
 *   axprod-group: opacity 0→1 + translateY 스태거
 * ────────────────────────────────────────────────────────────── */

.axprod-section .news-line {
  width: 0;
  transition: width .65s ease-out;
}
.axprod-section .news-title {
  color:      #D1D5DB;
  transform:  translateY(14px);
  transition: color     .65s cubic-bezier(.22,1,.36,1) .10s,
              transform .60s cubic-bezier(.22,1,.36,1) .10s;
}
.axprod-section .news-sub {
  color:      #D1D5DB;
  transform:  translateY(10px);
  transition: color     .55s cubic-bezier(.22,1,.36,1) .25s,
              transform .55s cubic-bezier(.22,1,.36,1) .25s;
}

/* groups: opacity + translateY (스태거) */
.axprod-section .axprod-group {
  opacity:   0;
  transform: translateY(28px);
  transition: opacity   .65s cubic-bezier(.22,1,.36,1) var(--grp-delay, .38s),
              transform .65s cubic-bezier(.22,1,.36,1) var(--grp-delay, .38s);
}
/* axprod-wrap 의 2·3·4번째 자식이 group (1번째는 news-head) */
.axprod-section .axprod-group:nth-child(2) { --grp-delay: .38s; }
.axprod-section .axprod-group:nth-child(3) { --grp-delay: .52s; }
.axprod-section .axprod-group:nth-child(4) { --grp-delay: .66s; }

/* ── 리빌 완료 상태 (.axprod-section.in-view) ── */
.axprod-section.in-view .news-line    { width: var(--mha-line-w, 240px); }
.axprod-section.in-view .news-title   { color: var(--color-heading); transform: translateY(0); }
.axprod-section.in-view .news-sub     { color: var(--color-text);    transform: translateY(0); }
.axprod-section.in-view .axprod-group { opacity: 1;                  transform: translateY(0); }