/*
 * 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;

  /* ── 제목 라인 ──────────────────────────── */
  --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:    138px;
  --news-feat-h:    360px;
  --news-part-gap:   5px;

  /* ── 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-semi);
  font-size:       var(--font-size-md);
  color:           var(--color-heading);
  text-decoration: none;
  cursor:          pointer;
  position:        relative;
  z-index:         1;
  transition:      color var(--transition-fast);
}
.logo:hover { color: var(--color-heading); }
.logo-img   { height: 32px; width: auto; }
.logo-text  { white-space: nowrap; }

/* 가운데 네비 */
.main-nav {
  position:   absolute;
  left:       50%;
  transform:  translateX(-50%);
  transition: opacity var(--transition-mid), visibility var(--transition-mid);
}

/* ── 스크롤 상태: nav 페이드아웃 + 로고 중앙 이동 ── */
.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; }
.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%; }

/* navWork 서브메뉴 — "AI 메타후프아레나" 항목 전용 드롭다운.
   과거 .mega/.mega-inner(전체 폭 메가 패널, JS로 컬럼 위치 계산)를 대체.
   .main-nav li { position:relative; }가 이미 있어 순수 CSS 호버/포커스
   드롭다운으로 충분 — JS 위치 계산(positionColumns 등)이 필요 없다.
   var(--token, fallback) 폴백은 이 파일의 기존 관례(1664·1669·2233행)를 따름 —
   이 페이지가 로드하는 CSS 어디에도 --color-text/--brand-red/--bg-card 실제
   정의가 없는 기존 이슈가 있어, 새로 만드는 이 블록만이라도 값이 깨지지 않게
   방어적으로 넣었다(폭넓은 root 토큰 정리는 이번 작업 범위 밖). */
.main-nav li.has-submenu { position: relative; }
.main-nav li.has-submenu .col {
  position: absolute;
  top: 100%;
  left: 50%;                      /* 부모(navWork <li>) 가로 중앙 기준점 */
  width: 170px;
  max-width: calc(100vw - 40px);  /* 화면 폭이 좁아져도 우측 경계 밖으로 잘리지 않도록 */
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-card, #ffffff);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  /* translateX(-50%)로 실제 가로 중앙 정렬 + translateY로 슬라이드인 —
     둘 다 같은 transform 선언 안에 있어야 함(선언이 나뉘면 나중 값이 앞의 값을 덮어씀) */
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 10;
}
.main-nav li.has-submenu:hover .col,
.main-nav li.has-submenu:focus-within .col {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.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, #111);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.2;
}
.col a:hover { color: var(--brand-red, #e10600); }


/* =============================================================
   ✅ 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 5 : media(1) · 10%-overlay(after,1) 위 / PiP(6) 아래
 * media-stage(will-change:transform) 스태킹 컨텍스트 안에서 독립.
 * is-active 클래스로 fade-in/out 제어.
 * ─────────────────────────────────────────────────────────────── */
.mha-hero-visual .media-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.mha-hero-visual .media-loader.is-active {
  opacity: 1;
}
.mha-hero-visual .media-loader__ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .18);
  border-top-color: rgba(255, 255, 255, .88);
  animation: mha-loader-spin .75s linear infinite;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, .22));
}
@keyframes mha-loader-spin {
  to { transform: rotate(360deg); }
}

/* ── 딤 오버레이 (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;

  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.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, .65);
  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;
}
.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: 60px;
  right: 60px;
  bottom: var(--hero-text-b);
  z-index: 4;
  pointer-events: none;
  max-width: 450px;
  color: #fff;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 1;
  transform: translateY(0);
  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: var(--hero-title-sz);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, .96);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.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;
}


/* ═══════════════════════════════════════════════════════════
   MetaHoop Arena — Hero Visual: xrv-hero 스타일
   .xrv-hero 스코프로 격리 → 기존 .mha-hero-visual 스타일 덮어쓰기
   ═══════════════════════════════════════════════════════════ */

/* ── 1. 페이지 전용 팔레트 & 미디어 불투명도 ──────────────────────────────
   딤 오버레이를 인디고/퍼플→오렌지/코랄로 바꾸면서, 기존 청록(teal) 액센트가
   새 배경과 완전히 충돌해 kicker/CTA 버튼/태그 dot 색을 함께 오렌지·라벤더
   계열로 맞췄다. 변수명(--xrv-teal 등)은 아래에서 참조하는 곳이 많아
   그대로 두고 값만 교체 — 이름 유지가 누락 위험이 가장 낮다. ── */
.xrv-hero {
  --xrv-teal:    #FF9466;   /* 케이스: kicker 텍스트/언더라인, CTA 버튼 bg, 태그 dot */
  --xrv-teal-d:  #FF7A45;   /* 진한 코랄 (오버레이의 코랄 stop과 동일 색) */
  --xrv-violet:  #B39DFF;   /* 타이틀 그라디언트 끝단 — 인디고 쪽과 이어지는 연보라 */
  --xrv-glow:    rgba(255, 148, 102, 0.45);
  --video-opacity: 0.36;
  --img-opacity:   0.42;
}

/* ── 2. 딤 오버레이 — 인디고/퍼플 → 오렌지/코랄 대각선 그라디언트 ──────────
   각도 60deg(요청 원안 135deg에서 조정): 135deg는 "좌상단→우하단"이라 오렌지가
   인물 얼굴 반대쪽(우하단)에 깔린다. 배경 인물이 좌측→우측 상단을 바라보는
   구도이므로, 60deg로 "좌하단(퍼플, 0%) → 우상단(오렌지, 100%)"로 맞춰
   얼굴 쪽에 밝은 오렌지가, 좌측 전체(상~하)에는 퍼플이 오도록 했다.

   ⚠ 기본값 — "AI 농구 통합 플랫폼"(virtual)·"AI 포토(PHOTO) 부스"(training) 탭에서
   사용. "AI 메타후프아레나(체육관)"(sports)·"AI 줄넘기 플랫폼"(sim) 탭은 아래
   [data-active-tab] 규칙으로 무채색으로 덮어써진다. 탭 전환 시 JS(setActive())가
   #mha-hero-visual 의 data-active-tab 속성을 갱신 — 이 파일 CSS만으로는 탭이
   구분되지 않았으므로 이번에 새로 추가한 메커니즘이다. ── */
.xrv-hero .visual-card::after {
  background: linear-gradient(
    60deg,
    rgba(46, 31, 110, 0.6) 0%,
    rgba(91, 60, 160, 0.44) 40%,
    rgba(255, 122, 69, 0.4) 75%,
    rgba(255, 148, 102, 0.36) 100%
  );
}

/* ── 2-1. 딤 오버레이 — 무채색 변형("체육관"/"줄넘기" 탭 전용) ──────────────
   버튼/텍스트 포인트 컬러(민트·오렌지 등)는 --xrv-teal 등 공용 변수를 그대로
   쓰므로 이 규칙과 무관 — 오버레이 배경만 무채색으로 교체된다. ── */
.xrv-hero[data-active-tab="sports"] .visual-card::after,
.xrv-hero[data-active-tab="sim"] .visual-card::after {
  background: linear-gradient(
    135deg,
    rgba(10, 12, 18, 0.6) 0%,
    rgba(30, 32, 38, 0.48) 50%,
    rgba(45, 47, 52, 0.4) 100%
  );
}

/* ── 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 레이블 ── */
.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);
  margin:         0;
  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;
  /* MAP[key].title의 "\n" 지점에서 줄바꿈 — titleEl.textContent(innerHTML 아님)로
     삽입되므로 <br>이 아닌 이 방식이 맞다. pre-line은 강제 줄바꿈 지점 외의
     공백은 그대로 normal처럼 접어서 좁은 화면에서도 자연스럽게 추가 개행된다. */
  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;
}
.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;
  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, #FF9466);
  color:           #2A1200;
  font-family:     var(--font-family);
  font-size:       0.975rem;
  font-weight:     700;
  border:          none;
  cursor:          pointer;
  box-shadow:      0 8px 28px var(--xrv-glow, rgba(255,148,102,.45));
  text-decoration: none;
  transition:      transform .22s cubic-bezier(.16,1,.3,1),
                   box-shadow .22s, background .22s;
}
.xrv-btn-p:hover {
  background: #FFA97D;
  transform:  translateY(-2px);
  box-shadow: 0 14px 40px rgba(255, 148, 102, .5);
}
.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, #FF9466);
  color:        var(--xrv-teal, #FF9466);
  background:   rgba(255, 148, 102, .08);
}

/* ── 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;
  color:          rgba(238, 240, 246, .72);
  background:     rgba(255, 255, 255, .04);
  border:         1px solid rgba(255, 255, 255, .10);
  padding:        7px 16px;
  border-radius:  100px;
  white-space:    nowrap;
}
.xrv-pt {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   var(--xrv-teal, #FF9466);
  box-shadow:   0 0 8px var(--xrv-teal, #FF9466);
  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; }
}


/* ═══════════════════════════════════════════════════════════
   MetaHoop Arena — 섹션 내비게이션 (.mha-subnav)
   position:sticky → 고정 헤더 바로 아래 고정
   ═══════════════════════════════════════════════════════════ */
.mha-subnav {
  position:        sticky;
  top:             var(--header-height, 45px);
  z-index:         120;
  background:      rgba(0, 0, 0, .88);
  backdrop-filter: blur(18px) saturate(1.4);
  border-top:      1px solid #333;
  border-bottom:   1px solid #333;
}
.mha-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;
}
.mha-subnav__row {
  display:         flex;
  justify-content: center;
  gap:             4px;
  flex-wrap:       wrap;
  padding:         11px 24px;
  max-width:       1450px;
  margin:          0 auto;
}
.mha-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;
}
.mha-subnav__link:hover,
.mha-subnav__link.is-active {
  color:           #33E0C4;
  /* background:      rgba(255, 255, 255, .05); */
}
/* 서브내비 아래 섹션: sticky header + subnav 높이만큼 스크롤 여백 */
#feature,
#uiux-operation,
#mha-products,
#contact {
  scroll-margin-top: calc(var(--header-height, 45px) + 46px);
}


/* ═══════════════════════════════════════════════════════════
   MetaHoop Arena — Overview Section (.xrv-ov)
   ═══════════════════════════════════════════════════════════ */
.xrv-ov {
  padding:           108px var(--mha-sec-x, 60px);
  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;
}

/* ── 섹션 헤더 ─────────────────────────────────────────── */
.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;
  position:    relative;
  overflow:    hidden;
  cursor:      pointer;
  transition:  background .25s;
}
.xrv-ov__stat:hover { background: rgba(51, 224, 196, .04); }

/* 호버 시 "솔루션 자세히 보기" 오버레이 */
.xrv-ov__stat::after {
  content:         "솔루션\A자세히 보기";
  white-space:     pre;
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  font-family:     var(--font-family);
  font-size:       clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight:     500;
  line-height:     1.35;
  color:           #33E0C4;
  opacity:         0;
  transform:       translateY(6px);
  transition:      opacity .15s ease-out, transform .15s ease-out;
  pointer-events:  none;
}
.xrv-ov__stat:hover::after {
  opacity:   1;
  transform: none;
}

.xrv-ov__stat-n {
  font-family:   var(--font-family);
  font-weight:   500;
  font-size:     clamp(1.5rem, 2.6vw, 2.2rem);
  line-height:   1;
  margin-bottom: 8px;
  color:         #33E0C4;
  transition:    opacity .12s ease-out, transform .12s ease-out;
}
.xrv-ov__stat-t {
  font-size:     .95rem;
  color:         #eef0f6;
  font-weight:   500;
  margin-bottom: 4px;
  line-height:   1.3;
  transition:    opacity .12s ease-out, transform .12s ease-out;
}
.xrv-ov__stat-s {
  font-size:   .78rem;
  color:       rgba(238, 240, 246, .4);
  font-weight: 300;
  line-height: 1.5;
  transition:  opacity .10s ease-out, transform .10s ease-out;
}

/* 호버 시 기존 텍스트 위로 페이드아웃 */
.xrv-ov__stat:hover .xrv-ov__stat-n,
.xrv-ov__stat:hover .xrv-ov__stat-t,
.xrv-ov__stat:hover .xrv-ov__stat-s {
  opacity:   0;
  transform: translateY(-6px);
}

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


/* ═══════════════════════════════════════════════════════════
   MetaHoop Arena — Use Cases Section (.xrv-uc)
   ═══════════════════════════════════════════════════════════ */
.xrv-uc {
  padding:           108px var(--mha-sec-x, 60px);
  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;
}

/* ── 섹션 헤더 ── */
.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);
  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: relative;   /* grad의 기준점; 이미지 흐름 유지 */
  width:    100%;
}
.xrv-uc__img {
  display: block;
  width:   100%;
  height:  auto;        /* 자연 비율 — 상하 클리핑 없음 */
}

/* 컬러 그라디언트 오버레이 */
.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: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  z-index:  2;
  padding:  28px 30px 32px;
}
.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; }
}


/* =============================================================
   Image Comparison Slider
   — 드래그로 before/after 이미지를 비교하는 인터랙티브 컴포넌트
   ============================================================= */
.img-comp-container {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  margin-top: 0;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: col-resize;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
}

.img-comp-img {
  display: block;
  width: 100%;
  line-height: 0;
}
.img-comp-img img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.img-comp-overlay {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}
.img-comp-overlay img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  max-width: none;
}

.img-comp-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 5;
  padding: 72px 36px 32px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78)  0%,
    rgba(0, 0, 0, 0.42) 55%,
    rgba(0, 0, 0, 0.00) 100%
  );
  pointer-events: none;
}

.img-comp-caption__kicker {
  margin: 0 0 6px;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-orange, #F5920A);
  line-height: 1;
}

.img-comp-caption__subtitle {
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: var(--font-weight-medium);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
  line-height: 1.45;
  margin: 0 0 12px;
  word-break: keep-all;
}

.img-comp-caption__desc {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.78;
  max-width: 520px;
  margin: 0;
}
.img-comp-caption__desc strong { color: #fff; }

/* ── 분리선 ───────────────────────────────────────────────────── */
.img-comp-slider {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.90);
  transform: translateX(-50%);
  z-index: 9;
  cursor: col-resize;
  pointer-events: auto;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

/* ── 드래그 핸들 원형 버튼 ───────────────────────────────────── */
.img-comp-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.22),
    0 0  0  2px rgba(255, 255, 255, 0.60);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: col-resize;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.img-comp-container:active .img-comp-handle,
.img-comp-slider:hover .img-comp-handle {
  transform: translate(-50%, -50%) scale(1.10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
}

.img-comp-handle svg {
  width: 18px;
  height: 18px;
  color: #222;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .img-comp-handle { width: 40px; height: 40px; }
  .img-comp-handle svg { width: 14px; height: 14px; }
}


/* =============================================================
   News Section
   ============================================================= */
.news-section {
  background: var(--bg-section);
  padding: calc(var(--mha-sec-gap) / 2) var(--mha-sec-x);
}
.news-wrap {
  max-width: var(--mha-wrap-max);
  margin: 0 auto;
}
.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;
}
.news-title {
  font-size: clamp(32px, 3.2vw, 52px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--color-heading);
}
.news-sub {
  margin-top: 14px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  opacity: .85;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  align-items: start;
}

/* 카드 */
.news-card {
  height: var(--news-card-h);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-dialog);
  border: 1px solid rgba(0, 0, 0, .06);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .14);
}

/* 썸네일 */
.news-thumb {
  height: var(--news-thumb-h);
  background: var(--border-color);
  overflow: hidden;
  flex: 0 0 auto;
}
.news-thumb img,
.news-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform var(--transition-mid);
}
.news-card:hover .news-thumb img,
.news-card:hover .news-thumb video { transform: scale(1.04); }

/* 메타 */
.news-meta {
  height: var(--news-meta-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--news-pad-x);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extra);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}

/* h3 */
.news-h3 {
  height: var(--news-h3-h);
  flex: 0 0 auto;
  padding: 12px var(--news-pad-x) 5px;
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.2px;
  line-height: 1.25;
  color: var(--color-heading);
  background: var(--bg-card);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 본문 */
.news-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-card);
  padding: 6px 0 12px;
  display: flex;
  flex-direction: column;
  gap: var(--news-part-gap);
}

.news-part {
  flex: 0 0 auto;
  background: var(--bg-card);
  border: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}
.news-part--core    { height: var(--news-core-h); }
.news-part--feature { height: var(--news-feat-h); }

.news-h5 {
  margin: 0;
  padding: 10px var(--news-pad-x) 6px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extra);
  letter-spacing: -0.1px;
  color: var(--color-heading);
}

.news-part__content {
  min-height: 0;
  overflow: auto;
  padding: 0 var(--news-pad-x) 10px;
}

.news-desc {
  margin: 0 0 10px;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  font-weight: var(--font-weight-semi);
  color: var(--color-muted);
}
.news-desc strong {
  color: var(--color-heading);
  font-weight: var(--font-weight-extra);
}

/* 스크롤바 */
.news-part__content::-webkit-scrollbar { width: 10px; }
.news-part__content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18);
  border-radius: var(--radius-full);
  border: 3px solid var(--bg-card);
}
.news-part__content::-webkit-scrollbar-track { background: transparent; }


/* =============================================================
   Contact Section
   ============================================================= */
.contact-section {
  background: var(--bg-section);
  padding: calc(var(--mha-sec-gap) / 2) var(--mha-sec-x);
  color: var(--color-text);
}
.contact-wrap {
  max-width: var(--mha-wrap-max);
  margin: 0 auto;
}
.contact-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 40px;
}
.contact-title-box { width: min(620px, 100%); }

.contact-line {
  width: var(--mha-line-w);
  height: var(--mha-line-h);
  background: var(--color-heading);
  margin-bottom: 18px;
}
.contact-title {
  font-size: clamp(34px, 3.6vw, 56px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--color-heading);
}

.contact-body {
  display: grid;
  grid-template-columns: var(--contact-col-left) 1fr;
  gap: var(--contact-gap);
  align-items: stretch;
}

/* 미디어(동영상) 패널 */
.contact-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-layout);
  box-shadow: var(--shadow-dialog);
  min-height: var(--contact-media-min);
  max-height: var(--contact-media-max);
  background: var(--border-color);
}
.contact-media__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  pointer-events: none;
}
.contact-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .10);
}

/* 정보 패널 */
.contact-panel {
  background: transparent;
  padding: 26px;
  overflow: hidden;
}
.contact-toprow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.contact-block { min-width: 0; }

.contact-h4 {
  margin: 0 0 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.contact-kv {
  display: grid;
  grid-template-columns: 70px 1fr;
  row-gap: 8px;
  column-gap: 14px;
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--color-text);
  align-content: start;
  margin: 0 0 56px;
}
.contact-kv .k {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  font-weight: var(--font-weight-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
}
.contact-kv .v {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin: 0;
  min-width: 0;
}
.contact-kv a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-semi);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.contact-kv a:hover {
  color: var(--color-heading);
  border-color: rgba(0, 0, 0, .45);
}

.contact-address {
  font-style: normal;
  line-height: 1.6;
}

.contact-address__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-weight-semi);
  text-decoration: none;
  color: var(--color-text, #111);
  transition: all 0.25s ease;
}

.contact-address__link:hover {
  color: var(--brand-red, #e10600);
}

.contact-address__en {
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: 0.7;
}



/* =============================================================
   Clients Section
   ============================================================= */
.clients-section {
  background: var(--bg-section);
  padding: var(--mha-sec-y) var(--mha-sec-x);
}
.clients-wrap {
  max-width: var(--mha-wrap-max);
  margin: 0 auto;
}
.clients-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 60px;
}
.clients-title-box { width: min(620px, 100%); }

.clients-line {
  width: var(--mha-line-w);
  height: var(--mha-line-h);
  background: var(--color-heading);
  margin-bottom: 18px;
}
.clients-title {
  font-size: clamp(34px, 3.6vw, 56px);
  font-weight: var(--font-weight-extra);
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--color-heading);
}
.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 80px;
  row-gap: 70px;
  align-items: center;
  justify-items: center;
}
.client-item {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-text {
  color: var(--color-muted);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  text-align: center;
}


/* =============================================================
   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; 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컬럼 */
@media (max-width: 1200px) {
  .news-grid    { grid-template-columns: repeat(3, 1fr); }
  .clients-grid { grid-template-columns: repeat(5, 1fr); column-gap: 60px; }
  .contact-body { grid-template-columns: 420px 1fr; gap: 50px; }
}

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

/* 900px: 모바일 전환 */
@media (max-width: 900px) {
  /* 헤더 — .main-nav가 숨겨지므로 그 안의 navWork 서브메뉴(.col)도 함께 숨겨짐 */
  .main-nav   { display: none; }
  .header-bar { padding: 0 20px; }
  .site-header.is-scrolled .header-right { right: 20px; }

  /* 섹션 여백 */
  .news-section,
  .contact-section,
  .clients-section,
  .mha-service {
    padding: calc(var(--mha-sec-gap-md) / 2) var(--mha-sec-x-md);
  }

  /* 제목 라인 */
  .news-line,
  .contact-line,
  .clients-line { width: var(--mha-line-w-md); }

  /* 뉴스 */
  .news-head { justify-content: flex-start; }
  .news-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  /* Hero 텍스트 */
  .mha-hero-visual .hero-text {
    left: 24px;
    right: 24px;
    bottom: var(--hero-text-b-md);
    max-width: 92%;
  }

  /* Contact */
  .contact-head   { justify-content: flex-start; }
  .contact-body   { grid-template-columns: 1fr; gap: 22px; }
  .contact-toprow { grid-template-columns: 1fr; gap: 18px; }
  .contact-media  { max-height: 420px; }
  .contact-panel  { padding: 20px; }

  /* 토큰 재정의 */
  :root {
    --news-card-h:    740px;
    --news-thumb-h:   190px;
    --news-core-h:    180px;
    --news-feat-h:    300px;
    --hero-title-sz:  var(--hero-title-sz-md);
    --hero-desc-sz:   var(--hero-desc-sz-md);
  }
}

/* 560px: 1컬럼 뉴스 */
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
  :root {
    --news-card-h:  760px;
    --news-thumb-h: 190px;
    --news-core-h:  180px;
    --news-feat-h:  324px;
  }
}

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

/* =============================================================
   ✅ Contact Media Logo Overlay
   - video 위에 로고 고정 표시
   - contact-media::after(어두운 레이어)보다 위로
   ============================================================= */

/* contact-media는 이미 position:relative 이므로 그대로 사용 */

/* 로고 컨테이너 */
.contact-media__logo{
  position: absolute;
  z-index: 3;               /* video(기본) 위, ::after(z=2로 설정할 것) 위 */
  left: var(--contact-video-log-l);
  bottom: var(--contact-video-log-b);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 12px;
  border-radius: 14px;

  
  pointer-events: none;     /* 영상 조작/스크롤 방해 금지 */
}

/* 로고 이미지 */
.contact-media__logo img{
  height: 25px;             /* 필요 시 조정 */
  width: auto;
  display: block;
  opacity: 1.0;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

/* ✅ 기존 contact-media::after 레이어는 로고보다 아래로 */
.contact-media::after{
  z-index: 2;               /* 기존에 z-index 없었으므로 명시 */
}

/* (선택) video도 stacking 명확히 */
.contact-media__video{
  position: relative;
  z-index: 1;
}

/* 반응형: 모바일에서 로고 크기/여백 조정 */
@media (max-width: 900px){
  .contact-media__logo{
    left: 12px;
    top: 12px;
    padding: 8px 10px;
    border-radius: 12px;
  }
  .contact-media__logo img{
    height: 28px;
  }
}


/* =============================================================
   ✅ EASY TOUCH UI/UX OPERATION Section  (#uiux-operation)
   ============================================================= */

/* ── Section 컨테이너 — news-section 동일 배경, --mha-sec-gap 절반 분담 ── */
.uiux-section {
  background: var(--bg-section);
  padding: calc(var(--mha-sec-gap) / 2) var(--mha-sec-x);
  overflow: hidden;
  position: relative;
}

/* ── 헤더 정렬 재정의: news-head 우측 정렬 → 왼쪽 ─────────── */
.uiux-section .news-head { justify-content: flex-start; }
.uiux-section .news-title-box { width: 100%; }
.uiux-section .news-title { white-space: nowrap; }

/* ── 내부 래퍼 ─────────────────────────────────────────────── */
.uiux-wrap {
  max-width: var(--mha-wrap-max);
  margin: 0 auto;
  position: relative;
}

/* =============================================================
   ✅ UI/UX — 아코디언(좌) + 이미지(우)  Apple-style layout
   ============================================================= */

/* ── 2-컬럼 메인 레이아웃 — 카드 컨테이너 ─────────────────── */
.uiux-layout {
  --uiux-panel-h: 600px;               /* 아코디언·비주얼 공통 높이 토큰 */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 64px;
  padding: 48px 52px;
  background: var(--bg-card, #ffffff);
  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);
  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;      /* 아이템 사이 구분선 */
}
/* 첫 번째 아이템 상단·마지막 아이템 하단 border 제거 (컨테이너로 이동) */
.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(17px, 1.5vw, 22px);
  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);            /* 열림: 위 방향 ∧ */
}

/* 아코디언 본문 — max-height 슬라이드 */
.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: 15;
  font-weight: var(--font-weight-normal);
  line-height: 1.72;
  color: var(--color-sub);
  margin: 0;
  word-break: keep-all;
}

.uiux-item__img {
  display: block;
  width: 35%;
  height: auto;
  margin: 16px auto 0;
  border-radius: var(--radius-lg);
  object-fit: contain;
}

/* ── 아코디언 바디: 영상 2개 미리보기 (Easy UI/UX) ────────────
   portrait 비율(9:16) 가정 — 두 영상이 나란히 배치됩니다.
   ────────────────────────────────────────────────────────── */
.uiux-item__videos {
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 16px 0 0;
}
.uiux-item__video {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 9 / 16;
  width: 50%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: #000;
}

/* ── 오른쪽: 이미지 패널 ────────────────────────────────────── */
.uiux-visual {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;                    /* flex overflow 방지 */
  position: sticky;
  top: 88px;                          /* 헤더 높이 만큼 오프셋 */
  height: var(--uiux-panel-h);        /* 항상 600px 고정 */
  border-radius: 10px;
  align-self: flex-start;             /* 아코디언이 늘어나도 자신은 600px 유지 */
  overflow: hidden;
}

.uiux-visual__img {
  width: 100%;
  height: 100%;
  object-fit: contain;               /* 전체 이미지 표시, 크롭 없음 */
  display: block;
  opacity: 1;
  border-radius: 10px;               /* img 자체에 명시 — object-fit:contain 시 Safari letterbox 클리핑 버그 방지 */
  transition: opacity 0.28s ease;
}
.uiux-visual__img.is-fading { opacity: 0; }

/* ── 우측 패널: 영상 2개 나란히 (Easy UI/UX 선택 시) ──────────
   position:absolute+inset:0 으로 .uiux-visual(600px)에 종속.
   영상 크기 = 패널의 80% (너비·높이 모두). gap 16px.
   align/justify-content:center 으로 패널 정중앙 배치.
   ────────────────────────────────────────────────────────── */
.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); /* 두 영상 합 80% + gap 16px = 80% 점유 */
  height: 90%;
  object-fit: cover;
  
  border-radius: 10px;
}

/* Image Comparison Slider inside uiux-visual panel */
.uiux-visual .img-comp-container {
  flex: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  margin: 0;
}
.uiux-visual .img-comp-img { height: 100%; }
.uiux-visual .img-comp-img img {
  height: 100%;
  object-fit: cover;
}
.uiux-visual .img-comp-overlay img {
  height: 100%;
  object-fit: cover;
}

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

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

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

.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;
  }
  .fab-nav {
    width: 36px;
    height: 36px;
  }
  .inquiry-fab {
    width: 58px;
    height: 58px;
    font-size: 10px;
  }
}


/* ══════════════════════════════════════════════════════════════
   MetaHoop Arena — 도입 문의 MODAL  (xrv-demo 이식)
   ══════════════════════════════════════════════════════════════ */
#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;
  visibility:      hidden;           /* backdrop-filter 자식 요소의 pointer 차단 보장 */
  pointer-events:  none;
  transition:      opacity .35s var(--xm-expo),
                   visibility 0s .35s;
}
#xrv-demo.open {
  opacity:         1;
  visibility:      visible;
  pointer-events:  all;
  transition:      opacity .35s var(--xm-expo),
                   visibility 0s 0s;
}

.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; line-height: 1.25; }
.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-left 는 위 #xrv-demo
   의 다크 변수를 그대로 상속받아 영향 없음). 아래로는 .xrv-m-right 내부에서만
   쓰이는 선택자들이라 var(--xm-*) 값만 이렇게 덮어써도 개별 규칙은 그대로
   자동으로 라이트 테마 색으로 바뀐다. */
.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);
}
.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; }
.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 var(--xm-accent-glow); }
.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;
}
.xrv-m-fg select option { background: var(--xm-surface); color: var(--xm-txt); }
.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;
}
.xrv-m-submit:hover { background: var(--xm-accent-hover); transform: translateY(-2px); box-shadow: 0 10px 30px var(--xm-accent-shadow-hover); }
.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: var(--xm-accent-glow); border: 1px solid var(--xm-accent-shadow); 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; }
}

/* ══════════════════════════════════════════════════════════════
   MetaHoop Arena — Roboflow 레퍼런스 MODAL  (#xrv-ref-modal)
   ══════════════════════════════════════════════════════════════ */

/* 모달 래퍼 */
#xrv-ref-modal,
#xrv-shot-modal,
#xrv-highlight-modal,
#xrv-media-modal {
  position:        fixed;
  inset:           0;
  z-index:         5100;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  opacity:         0;
  visibility:      hidden;           /* backdrop-filter 스택 컨텍스트 내 자식 클릭 차단 */
  pointer-events:  none;
  transition:      opacity .3s cubic-bezier(0.16, 1, 0.3, 1),
                   visibility 0s .3s; /* 닫힐 때: opacity 완료 후 hidden */
}
#xrv-ref-modal.open,
#xrv-shot-modal.open,
#xrv-highlight-modal.open,
#xrv-media-modal.open {
  opacity:         1;
  visibility:      visible;          /* 열릴 때: 즉시 visible → opacity 애니메이션 */
  pointer-events:  all;
  transition:      opacity .3s cubic-bezier(0.16, 1, 0.3, 1),
                   visibility 0s 0s; /* 열릴 때: visibility 즉시 */
}

/* 딤 배경 */
.xrv-ref-bd {
  position:        absolute;
  inset:           0;
  background:      rgba(5, 6, 10, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 모달 박스 — 스크롤을 박스 자체에서 처리 (sticky 헤더) */
.xrv-ref-box {
  position:       relative;
  z-index:        1;
  width:          100%;
  max-width:      722px;  /* 602 × 1.2 */
  max-height:     88vh;
  max-height:     88dvh;
  background:     #fff;
  border-radius:  14px;
  overflow-y:     auto;
  overflow-x:     hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;          /* Firefox */
  box-shadow:     0 24px 80px rgba(0, 0, 0, .55);
  transform:      translateY(24px);
  transition:     transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.xrv-ref-box::-webkit-scrollbar { display: none; } /* Chrome · Safari · Edge */
#xrv-ref-modal.open .xrv-ref-box,
#xrv-shot-modal.open .xrv-ref-box,
#xrv-highlight-modal.open .xrv-ref-box,
#xrv-media-modal.open .xrv-ref-box { transform: none; }

/* 헤더 바 — sticky로 스크롤 중에도 상단 고정 */
.xrv-ref-head {
  position:        sticky;
  top:             0;
  z-index:         10;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 16px 0 20px;
  height:          48px;
  border-bottom:   1px solid #e8eaed;
  background:      #f8f9fa;
}

.xrv-ref-title {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   13px;
  font-weight: 600;
  color:       #3c4043;
}

.xrv-ref-badge {
  display:        inline-block;
  padding:        2px 8px;
  border-radius:  4px;
  background:     #e8f0fe;
  color:          #1a73e8;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .04em;
}

/* 닫기 버튼 */
.xrv-ref-close {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  background:      transparent;
  border:          none;
  border-radius:   6px;
  color:           #6b7280;
  cursor:          pointer;
  transition:      background .15s, color .15s;
}
.xrv-ref-close:hover { background: #f1f3f4; color: #202124; }

/* 스크롤 본문 — 단순 컨테이너 */
.xrv-ref-body { display: block; width: 100%; }

/* ─── 케이스 스터디 아티클 ─────────────────────────────────── */
.xrv-cs {
  padding:    36px 40px 52px;
  background: #fff;           /* 다크 테마 색상 상속 차단 */
  color:      #111827;
}

.xrv-cs__title {
  font-size:      22px;
  font-weight:    700;
  line-height:    1.4;
  color:          #111827;
  margin:         0 0 28px;
  padding-bottom: 20px;
  border-bottom:  1px solid #e5e7eb;
  text-align:     center;
}

.xrv-cs__layout {
  width:  95%;
  margin: 0 auto;
}

/* 사이드바 */
.xrv-cs__aside {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.xrv-cs__aside-fig {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.xrv-cs__aside-img {
  display:    block;
  width:      100%;
  height:     auto;
  object-fit: cover;
  border-radius: 8px;
}

.xrv-cs__meta-group {
  background:    #f8f9fa;
  border:        1px solid #e5e7eb;
  border-radius: 8px;
  padding:       14px 16px;
}

.xrv-cs__meta-label {
  display:        block;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .1em;
  color:          #6b7280;
  margin:         0 0 8px;
  text-transform: uppercase;
}

.xrv-cs__meta-val {
  font-size:   13px;
  line-height: 1.6;
  color:       #374151;
  margin:      0;
}

.xrv-cs__meta-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        6px;
}
.xrv-cs__meta-list li {
  font-size:   13px;
  color:       #374151;
  line-height: 1.5;
}
.xrv-cs__meta-list li::before {
  content: "- ";
  color:   #9ca3af;
}

.xrv-cs__link {
  color:           #6366f1;
  text-decoration: none;
  font-weight:     500;
}
.xrv-cs__link:hover { text-decoration: underline; }

/* 본문 */
.xrv-cs__main {
  display:        flex;
  flex-direction: column;
  gap:            22px;
}

.xrv-cs__para {
  font-size:   14.5px;
  line-height: 1.78;
  color:       #374151;
  margin:      0;
}

.xrv-cs__figure { margin: 0; }

/* 이미지 영역 — SVG 플레이스홀더로 항상 표시 */
.xrv-cs__vid-wrap {
  position:      relative;
  width:         100%;
  border-radius: 8px;
  overflow:      hidden;
  background:    #0a1128;
  aspect-ratio:  16 / 9;
}

.xrv-cs__vid {
  display: block;
  width:   100%;
  height:  100%;
  object-fit: cover;
}
/* 슛 분석 모달 전용 — 비디오 래퍼에 테두리 */
#xrv-shot-modal .xrv-cs__vid-wrap {
  border: 1px solid #d1d5db;
}

.xrv-cs__caption {
  margin-top:  8px;
  font-size:   12.5px;
  color:       #6b7280;
  text-align:  center;
  line-height: 1.5;
}

.xrv-cs__h2 {
  font-size:   18px;
  font-weight: 700;
  color:       #111827;
  margin:      0;
  line-height: 1.4;
}

/* 반응형 */
@media (max-width: 768px) {
  .xrv-ref-box  { border-radius: 10px; }
  .xrv-cs       { padding: 24px 20px 40px; }
  .xrv-cs__layout { width: 100%; }
  .xrv-cs__title  { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   MetaHoop Arena — Product List Section (.mha-products)
   ═══════════════════════════════════════════════════════════ */
.mha-products {
  padding:           108px var(--mha-sec-x, 60px);
  background:        #ffffff;
  position:          relative;
}
.mha-products__wrap {
  max-width: var(--mha-wrap-max, 1450px);
  margin:    0 auto;
  padding:   0;
}

/* ── news-head 중앙 정렬 ── */
.mha-products .news-head       { justify-content: center; margin-bottom: 56px; }
.mha-products .news-title-box  { text-align: center; }
.mha-products .news-title      { white-space: normal; }
.mha-products .news-line       { margin: 0 auto 18px; }

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

/* ── 카드 — 화이트 테마 리디자인(파란 헤더 바 + 흰 바디 + 중앙 제품 이미지) ── */
.mha-prod {
  /* 페이지 전역 액센트(#33E0C4 민트)는 얇은 선/작은 글자로만 쓰이던 색이라
     큰 면적 배경에 원색 그대로 쓰면 흰 텍스트 대비가 부족해진다. 이 카드가
     리디자인 전 아이콘 배경으로 이미 쓰던 진한 틸(#0B8F7A)을 그대로 계승해
     통일감과 대비를 함께 확보한다(사용자 확인 완료 — 옵션 A). */
  --mprod-teal:      #0B8F7A;
  --mprod-teal-dark: #076358;

  position:       relative;
  border-radius:  14px;
  overflow:       hidden;
  border:         1px solid #E5E7EB;
  background:     #FFFFFF;
  box-shadow:     0 1px 3px rgba(17,24,39,.05);
  display:        flex;
  flex-direction: column;
  cursor:         pointer;
  transition:     transform .35s cubic-bezier(.22,1,.36,1),
                  box-shadow .35s,
                  border-color .35s;
}
.mha-prod:hover {
  transform:    translateY(-5px);
  box-shadow:   0 20px 48px rgba(17,24,39,.12);
  border-color: rgba(11, 143, 122, .35);
}

/* ── 헤더 바(다크 네이비 배너): 화살표 + 제품명 + 번호
   .xrv-m-left(도입문의 모달 좌측 패널)와 동일한 그라데이션 재사용 —
   이미 이 프로젝트에서 검증된 "다크 패널" 조합이라 사이트 전체 통일감이
   더 강해진다(사용자 확인 완료 — B안). ── */
.mha-prod__header {
  display:         flex;
  align-items:     flex-start;
  gap:             10px;
  padding:         16px 20px;
  background:      linear-gradient(165deg, #11141C 0%, #0a0c12 100%);
}
.mha-prod__header-arr {
  flex-shrink: 0;
  color:       #fff;
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}
.mha-prod__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;
}
.mha-prod__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;
}

/* ── 본문(흰 배경) ── */
.mha-prod__body {
  display:        flex;
  flex-direction: column;
  padding:        24px 26px 28px;
  flex:           1;
}
.mha-prod__subtitle {
  font-style:  italic;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--mprod-teal-dark);
  margin:      0 0 4px;
}
.mha-prod__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;
}

/* ── 제품 이미지 박스(옅은 회색 + 점무늬) ── */
.mha-prod__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;
}
.mha-prod__imgwrap img {
  max-width:     100%;
  max-height:    100%;
  width:         auto;
  height:        auto;
  object-fit:    contain;
  border-radius: 4px;
}

/* ── 설명 ── */
.mha-prod__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;
}

/* ── 세부보기 버튼(아웃라인) ── */
.mha-prod__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(--mprod-teal);
  background:      #fff;
  color:           var(--mprod-teal);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-semi);
  letter-spacing:  .02em;
  text-decoration: none;
  transition:      color .22s ease,
                   background .22s ease,
                   border-color .22s ease;
}
.mha-prod__cta-arr {
  display:    inline-block;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.mha-prod__cta:hover {
  background: var(--mprod-teal);
  color:      #fff;
}
.mha-prod__cta:hover .mha-prod__cta-arr {
  transform: translateX(5px);
}
/* stretched link — 카드 전체를 <a> 히트 영역으로 확장.
 * .mha-prod__cta 는 static 이라 이 ::after 의 위치 기준(containing block)은
 * position:relative 인 .mha-prod 자신이 되어, 카드 전체를 투명하게 덮는다. */
.mha-prod__cta::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  2;
}

/* ── 스크롤 리빌 — 초기 상태 (color 전환 방식) ──────────────────
 * opacity 전환 대신 실제 color 값 전환을 사용합니다.
 *   news-line  : width 0 → 240px  (라인 드로잉)
 *   news-title : #D1D5DB → #111   (연회색 → 진한 헤딩색)
 *   news-sub   : #D1D5DB → #12192c (연회색 → 본문색)
 *   카드 4장   : opacity 0→1 스태거 (박스 요소는 opacity 유지)
 * ─────────────────────────────────────────────────────────────── */

/* news-line: 폭이 0 에서 성장 */
.mha-products .news-line {
  width:      0;
  transition: width .65s ease-out;
}

/* news-title: 연회색 → 헤딩 색 + 위로 올라오기 */
.mha-products .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;
}

/* news-sub: 연회색 → 본문 색 + 위로 올라오기 */
.mha-products .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;
}

/* 카드: opacity + translateY (박스 요소) + hover 전환 통합 */
.mha-products .mha-prod {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity      .60s cubic-bezier(.22,1,.36,1) var(--prod-delay, 0s),
              transform    .60s cubic-bezier(.22,1,.36,1) var(--prod-delay, 0s),
              box-shadow   .35s cubic-bezier(.22,1,.36,1),
              border-color .35s;
}
.mha-products .mha-prod:nth-child(1) { --prod-delay: .38s; }
.mha-products .mha-prod:nth-child(2) { --prod-delay: .48s; }
.mha-products .mha-prod:nth-child(3) { --prod-delay: .58s; }
.mha-products .mha-prod:nth-child(4) { --prod-delay: .68s; }

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

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