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


/* =============================================================
   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-bold);
  font-size: 18px;
  color: var(--color-heading);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.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%);
}
.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-semi);
  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-semi);
  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; }


/* ── 딤 오버레이 (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;
}
.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: 60px;
  right: 60px;
  bottom: var(--hero-text-b);
  z-index: 4;
  pointer-events: none;
  max-width: 640px;
  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-extra);
  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-extra);
  color: rgba(255, 255, 255, .96);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.mha-hero-visual .hero-desc {
  margin-top: 10px;
  font-family: var(--font-family);
  font-size: var(--hero-desc-sz);
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, .84);
  letter-spacing: -0.01em;
  line-height: 1.6;
}


/* =============================================================
   News Section
   ============================================================= */
.news-section {
  background: var(--bg-section);
  padding: var(--mha-sec-y) 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-extra);
  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-semi);
  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 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform var(--transition-mid);
}
.news-card:hover .news-thumb img { transform: scale(1); }

/* 메타 */
.news-meta {
  height: var(--news-meta-h);
  flex: 0 0 auto;
  display: flex;
  align-items: 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) 10px;
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extra);
  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;
  overflow: hidden;
}

/* 본문 */
.news-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-card);
  padding: 12px 0;
  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: var(--mha-sec-y) 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-extra);
  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-extra);
  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 14px;
}
.contact-kv .k {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  font-weight: var(--font-weight-extra);
  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-extra);
  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: 600;
  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-footer);
  color: #fff;
  padding: 48px 60px 44px;
}
.footer-wrap {
  max-width: 1450px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.footer-left {
  max-width: 900px;
  font-size: var(--font-size-base);
  line-height: 1.9;
  letter-spacing: -0.1px;
}
.footer-left .line1 { font-weight: var(--font-weight-extra); opacity: .95; }
.footer-left .line2 { margin-top: 6px; font-weight: var(--font-weight-bold); opacity: .95; }
.footer-left .line3 {
  margin-top: 6px;
  font-weight: var(--font-weight-bold);
  opacity: .95;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.footer-left .muted { margin-top: 18px; opacity: .6; font-weight: var(--font-weight-semi); }

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  min-width: 140px;
}
.footer-logo-text {
  color: #fff;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extra);
  letter-spacing: -0.5px;
}
.footer-topbtn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255, 255, 255, .85);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  opacity: .95;
  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   { display: none; }
  .mega       { display: none; }
  .header-bar { padding: 0 20px; }

  /* 섹션 여백 */
  .news-section,
  .contact-section,
  .clients-section,
  .mha-service {
    padding: var(--mha-sec-y-md) 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:    150px;
    --news-feat-h:    250px;
    --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:  150px;
    --news-feat-h:  270px;
  }
}

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


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