/*
 * 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: 18px;
  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%);
}
.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, .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);
}

/* 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;
}
.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-physical 섹션 하단 여백 50% 축소 */
#ax-physical {
  height: 15vh;
  min-height: 150px;
}


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

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


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

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