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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

.ax-creators__title-box {
  width: min(720px, 100%);
}

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

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

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

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

/* =============================================================
   Creator Showcase — 3-column image + info card grid
   ============================================================= */
.ax-creators {
  background: #fff;
  overflow: hidden;
}

.ax-creators__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
  width: 75%;
  margin: 0 auto;
}

/* #ax-creators 그리드를 .uiux-wrap 과 동일한 폭으로 맞춤
   (max-width: 1450px + 좌우 60px 여백 = uiux-section + uiux-wrap 패턴과 동일) */
#ax-creators .ax-creators__grid {
  width: calc(100% - 2 * var(--mha-sec-x));
  max-width: var(--mha-wrap-max);
}

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

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

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

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

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

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

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

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

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

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

/* 반응형 */
@media (max-width: 900px) {
  .ax-creators__grid {
    grid-template-columns: 1fr;
  }

  .ax-creators__col + .ax-creators__col .ax-creators__card {
    border-left: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

/* ═══════════════════════════════════════════════════════
   Humanoid AI Platform 헤더 섹션
   ─────────────────────────────────────────────────────
   layout_axdxrobot_index.css 의 .news-head / .news-title /
   .news-sub / .news-line 을 그대로 재사용.
   여기서는 ① 섹션 여백·배경 ② 콘텐츠 max-width 정렬
   ③ news-line CSS 진입 애니메이션만 추가.
   ═══════════════════════════════════════════════════════ */
.ax-platform-head {
  background: #fff;
  padding: calc(var(--mha-sec-y) * 0.3) var(--mha-sec-x);  /* top 72px → 36px (-50%) */
}
.ax-platform-head__inner {
  max-width: var(--mha-wrap-max);
  margin: 0 auto;
}
/* 하단 여백 제거 / 왼쪽 3/5 여백 → 콘텐츠는 오른쪽 2/5 영역, 텍스트 왼쪽 정렬 */
.ax-platform-head .news-head { margin-bottom: 0; justify-content: flex-end; }
.ax-platform-head .news-title-box {
  width: calc(100% * 2 / 5);
  min-width: 320px;
  text-align: left;
}
.ax-platform-head .news-line { margin-left: 0; }

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

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