/* =========================================================
   style.css — BBC TopGear Korea
   ========================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* =========================================================
   GmarketSans (self-hosted, woff2 / 전체 한글 서브셋)
   ========================================================= */
@font-face {
  font-family: "GmarketSans";
  src: url("../fonts/GmarketSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GmarketSans";
  src: url("../fonts/GmarketSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GmarketSans";
  src: url("../fonts/GmarketSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Industry (TopGear) — self-hosted (Adobe Typekit 대체)
   Medium 500 / Bold 700 / Ultra 900 / Ultra Italic 900 italic
   ========================================================= */
@font-face {
  font-family: "industry";
  src: url("../fonts/IndustryTG-Medium.eot");
  src:
    url("../fonts/IndustryTG-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/IndustryTG-Medium.woff2") format("woff2"),
    url("../fonts/IndustryTG-Medium.woff") format("woff"),
    url("../fonts/IndustryTG-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "industry";
  src: url("../fonts/IndustryTG-Bold.eot");
  src:
    url("../fonts/IndustryTG-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/IndustryTG-Bold.woff2") format("woff2"),
    url("../fonts/IndustryTG-Bold.woff") format("woff"),
    url("../fonts/IndustryTG-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "industry";
  src: url("../fonts/IndustryTG-Ultra.eot");
  src:
    url("../fonts/IndustryTG-Ultra.eot?#iefix") format("embedded-opentype"),
    url("../fonts/IndustryTG-Ultra.woff2") format("woff2"),
    url("../fonts/IndustryTG-Ultra.woff") format("woff"),
    url("../fonts/IndustryTG-Ultra.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "industry";
  src: url("../fonts/IndustryTG-UltraItalic.eot");
  src:
    url("../fonts/IndustryTG-UltraItalic.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/IndustryTG-UltraItalic.woff2") format("woff2"),
    url("../fonts/IndustryTG-UltraItalic.woff") format("woff"),
    url("../fonts/IndustryTG-UltraItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand Colors ---- */
  --color-main: #00c3d2; /* 헤더 메인 컬러 */
  --color-dark: #3e3a39; /* 메뉴 텍스트 / 구분선 */
  --color-fill: #25272e; /* 메뉴 hover·선택 채움 컬러 */

  /* ---- Neutrals ---- */
  --color-white: #ffffff;
  --color-bg: #0a0e1a;

  /* ---- Typography ---- */
  --font-primary:
    "GmarketSans", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", sans-serif; /* 본문 한글 기본 */
  --font-menu: "industry", sans-serif; /* 메뉴 — Industry Medium */
  --font-display:
    "industry", sans-serif; /* 큰 타이틀/헤드라인 영문 — Industry Medium(500)/Ultra(900) */

  /* ---- 스페이싱: 5칸 고정 사다리 {4,8,16,24,48} — 이 밖은 쓰지 않음 ---- */
  --space-0: 4px; /* 미세(아이콘-텍스트) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-6: 48px;

  /* ---- Bento gap: 사다리 기반 반응형 간격 (데스크탑 24 → 모바일 16) ---- */
  --bento-gap: 24px;

  /* ---- 타입 스케일: 6단계 (이 6개만 사용) ---- */
  --fs-caption: 14px; /* 캡션 — 메타/카테고리/뱃지/메뉴/푸터 */
  --fs-body: 16px; /* 본문 */
  --fs-title: clamp(18px, 1.8vw, 24px); /* 카드 제목·라벨·패널 헤드라인 */
  --fs-headline: clamp(28px, 3.2vw, 44px); /* 상세 제목·점수 뱃지 */
  --fs-display: clamp(28px, 4vw, 56px); /* 섹션 타이틀(DRIVEN/FEATURE 등) */
  --fs-hero: clamp(56px, 10vw, 120px); /* 히어로 타이틀·큰 점수 */

  /* ---- Layout frame ---- */
  --page-max: 1440px; /* 콘텐츠 최대 폭 (1920 화면 → 1440 기준 중앙 정렬) */
  --gutter: 48px; /* 좌우 거터 */

  /* ---- Header ---- */
  --header-height: 104px;
  --logo-width: 360px;
}

body {
  font-family: var(--font-primary);
  background: var(--color-bg);
  color: var(--color-white);
}

/* 컴포넌트 래퍼는 레이아웃 박스에서 제거 → 내부 .review-card/.dhero 등이 그리드·플로우에 직접 참여 */
tg-card,
tg-play-btn,
tg-hero,
tg-section-head,
tg-panel {
  display: contents;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-main); /* 청록 바는 풀블리드(전체 폭) 유지 */
  /* 좌우 패딩으로 콘텐츠를 1440 컬럼에 정렬 (1920 → 240px씩 여백) */
  padding: var(--space-3)
    max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))) 0;
}

/* ---- Logo: 뷰포트 폭에 따라 끊김 없이 유동 (390px≈160 → 1280px+ 360) ---- */
.site-header__logo img {
  width: clamp(160px, calc(72px + 22.5vw), var(--logo-width));
  height: auto;
}

/* =========================================================
   GNB (Global Nav) — 좌측 하단
   ========================================================= */

.gnb {
  margin-top: var(--space-2); /* 로고~메뉴 16px */
}

.gnb__list {
  display: flex;
  align-items: stretch;
}

/* 항목 사이 1px 구분선 (첫 항목 HOME 왼쪽엔 없음) */
.gnb__item:not(:first-child) {
  border-left: 1px solid rgba(62, 58, 57, 0.4);
}

.gnb__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-1) 12px; /* 위/좌우 8px, 아래 12px */
  font-family: var(--font-menu); /* Industry */
  font-size: var(--fs-caption);
  font-weight: 500; /* Medium */
  color: var(--color-dark);
  white-space: nowrap;
}

/* base(평상시) / fill(채움) 두 레이어 — 동일한 텍스트를 겹침 */
.gnb__base,
.gnb__fill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gnb__fill {
  position: absolute;
  inset: 0;
  padding: var(--space-1); /* base와 동일 정렬 */
  background: var(--color-fill);
  color: var(--color-white);
  clip-path: inset(100% 0 0 0); /* 평상시: 하단에 숨김 */
  transition: clip-path 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: clip-path;
}

/* 현재 선택 = 가득 채워진 상태 */
.gnb__item.is-active .gnb__fill {
  clip-path: inset(0 0 0 0);
}

/* 현재 선택 메뉴 언더라인 (base/fill 모두 → 색 플립) */
.gnb__item.is-active .gnb__base,
.gnb__item.is-active .gnb__fill {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 오버 효과는 hover 가능한 기기(마우스)에서만 — 터치 기기 sticky hover 방지 */
@media (hover: hover) {
  /* 오버 → 아래에서 위로 채움 (선택 항목 hover 시에도 유지) */
  .gnb__item:hover .gnb__fill {
    clip-path: inset(0 0 0 0);
  }

  /* 다른(비선택) 항목에 오버하면 → 기존 선택은 위에서 아래로 빠짐 */
  .gnb__list:has(.gnb__item:not(.is-active):hover)
    .gnb__item.is-active
    .gnb__fill {
    clip-path: inset(100% 0 0 0);
  }
}

/* MORE 화살표 아이콘 — mask로 currentColor 따라 색 플립 */
.gnb__arrow {
  display: inline-block;
  width: 6px;
  aspect-ratio: 15 / 8; /* 원본 비율 → 높이 3.2px */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 8'%3E%3Cpath d='M0 0 7.5 8 15 0' fill='%23000'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 8'%3E%3Cpath d='M0 0 7.5 8 15 0' fill='%23000'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* 모션 최소화 선호 시 즉시 전환 */
@media (prefers-reduced-motion: reduce) {
  .gnb__fill {
    transition: none;
  }
}

/* =========================================================
   MORE 드롭다운 (클릭 토글 · 모바일 메뉴와 동일 모션)
   ========================================================= */
.gnb__item--more {
  position: relative;
}

/* 열림 시: MORE 채움 유지 + 화살표 180° 회전 */
.gnb__item--more.is-open .gnb__fill {
  clip-path: inset(0 0 0 0);
}
.gnb__arrow {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform; /* GPU 레이어 승격 → 마스크 재래스터 방지(저더 제거) */
}
.gnb__item--more.is-open .gnb__arrow {
  transform: rotate(180deg);
}

.gnb__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: 0fr; /* 닫힘 */
  width: max-content; /* 가장 긴 항목(CAR OF THE MONTH)에 맞춤 */
  min-width: 100%;
  background: var(--color-fill); /* #25272E */
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.5);
  transition: grid-template-rows 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}
.gnb__item--more.is-open .gnb__sub {
  grid-template-rows: 1fr; /* 열림 */
  pointer-events: auto;
}
.gnb__sub-list {
  overflow: hidden;
  min-height: 0;
  list-style: none;
}
.gnb__sub-item a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-menu); /* 웹 메뉴 폰트 (Industry) */
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}
@media (hover: hover) {
  .gnb__sub-item a:hover {
    background: var(--color-white);
    color: var(--color-dark); /* 흰 배경 → 검정 텍스트 */
  }
}
/* 현재 페이지인 MORE 서브 항목: 오버 효과와 동일하게 표시 */
.gnb__sub-item.is-active a {
  background: var(--color-white);
  color: var(--color-dark); /* 흰 배경 → 검정 텍스트 */
}

/* 항목 순차 등장 (모바일 메뉴 참조) */
.gnb__sub-item {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.25s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.gnb__item--more.is-open .gnb__sub-item {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 50ms + 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .gnb__sub,
  .gnb__sub-item,
  .gnb__arrow {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Content — Bento Grid (반응형)
   ========================================================= */

.content {
  max-width: var(--page-max); /* 최대 1440 */
  margin-inline: auto; /* 중앙 정렬 */
  padding: var(--space-3) var(--gutter) var(--space-6); /* 상24 / 좌우48(거터) / 하48 */
}

.bento {
  display: flex;
  gap: var(--bento-gap);
  align-items: stretch; /* 좌우 컬럼 동일 높이 */
}

.bento__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bento-gap);
}

.bento__row {
  display: flex;
  gap: var(--bento-gap);
}

/* ---- Card (placeholder) ---- */
.card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  background: #2b3442;
  border-radius: 6px;
  overflow: hidden;
}

/* 풀폭 카드 (컬럼 폭에 stretch) — 지정 px 비율 */
.c-feature {
  aspect-ratio: 483 / 224;
}
.c-driven {
  aspect-ratio: 481 / 212;
}

/* 행 내 카드: flex grow = 지정 width 비율, basis 0 → 순수 비율 분배 */
.c-retro {
  flex: 130 1 0;
  aspect-ratio: 130 / 190;
}
.c-video {
  flex: 333 1 0;
  aspect-ratio: 333 / 190;
}
.c-motor {
  flex: 318 1 0;
  aspect-ratio: 318 / 129;
}
.c-fest {
  flex: 145 1 0;
  aspect-ratio: 145 / 129;
}
.c-cotm {
  flex: 130 1 0;
  aspect-ratio: 130 / 154;
}
.c-trend {
  flex: 331 1 0;
  aspect-ratio: 331 / 154;
}
.c-hot {
  flex: 251 1 0;
  aspect-ratio: 251 / 177;
}
.c-item {
  flex: 210 1 0;
  aspect-ratio: 210 / 177;
}

/* 카드 배경 이미지 (라벨 뒤를 꽉 채움) */
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* 마우스오버가 빠질 때: 0.3초에 원상복귀 */
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}

/* 컴포넌트 미디어 placeholder 이미지 (미디어 박스를 꽉 채움) */
.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* transform 스태킹 컨텍스트를 0에 고정 → 그라데이션 오버레이가 위에 옴 */
  /* 마우스오버가 빠질 때: 0.3초에 원상복귀 (index 카드와 동일) */
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}
/* ph-img를 담는 미디어 박스: 위치 기준 + 넘침 클립 (줌 클립 포함) */
.review-card__media,
.rdetail__hero-media,
.fdetail__hero-media,
.fdetail__gallery-img,
.dhero__media,
.latest__media,
.latest-card__media {
  position: relative;
  overflow: hidden;
}
/* 마우스오버: 0.45초에 걸쳐 1.015배로 확대 (index 카드와 동일) */
.latest-card:hover .ph-img,
.review-card:hover .ph-img,
.dhero:hover .ph-img,
.driven:hover .ph-img {
  transform: scale(1.015);
  transition: transform 0.45s ease-in-out;
}

/* 마우스오버: 0.45초에 걸쳐 1.015배로 확대 (이미지만) */
.card:hover .card__img {
  transform: scale(1.015);
  transition: transform 0.45s ease-in-out;
}

/* 카드 배경 비디오 (호버 확대 효과 없음) */
.card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 라벨 가독성을 위한 하단 그라데이션 (카드 전체 폭을 덮음) */
.card:has(.card__img)::after,
.card:has(.card__video)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  z-index: 0;
  pointer-events: none;
}

.card__label {
  position: relative;
  z-index: 1;
  padding: var(--space-2);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 900; /* Industry Ultra, 비이탤릭 */
  font-style: normal;
  font-size: var(--fs-title); /* 최대 24px */
  line-height: normal;
  /* 텍스트 길이만큼 1px 언더라인 / 2px 간격 / 메인 컬러 */
  text-decoration: underline;
  text-decoration-color: var(--color-main);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.badge-new {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 2;
  padding: 4px;
  background: #ff2e7e;
  color: var(--color-white);
  font-family: var(--font-display); /* Industry Ultra */
  font-weight: 900;
  font-style: normal;
  font-size: var(--fs-caption);
  line-height: 1;
  border-radius: 2px;
}

/* ---- VIDEO 카드 재생 버튼 (3겹: 기어 링 2 + 삼각형) ---- */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 82px;
  height: 82px;
  z-index: 2;
  pointer-events: none; /* 클릭은 카드(링크)로 전달 */
}
.play-btn__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* 두 기어 링을 하나로 묶어 그룹 전체에 opacity 0.6
   (개별 적용 시 겹치는 부분이 비쳐 보이는 문제 방지) */
.play-btn__gears {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0.6;
}
/* 두 기어 링: 호버 시 서로 반대 방향으로 회전 (기어 맞물림) */
.play-btn__gear--0,
.play-btn__gear--1 {
  transition: rotate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .c-video:hover .play-btn__gear--0,
  .latest-card:hover .play-btn__gear--0,
  .driven:hover .play-btn__gear--0 {
    rotate: 55deg;
  }
  .c-video:hover .play-btn__gear--1,
  .latest-card:hover .play-btn__gear--1,
  .driven:hover .play-btn__gear--1 {
    rotate: -55deg;
  }
}
/* play_button(삼각형)은 고정 */

/* =========================================================
   LATEST 섹션
   ========================================================= */
.latest__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900; /* Industry Ultra */
  font-size: var(--fs-display);
  color: var(--color-white);
  margin: 0 0 var(--space-3); /* 상0 / 하24 */
}

/* 상단: DRIVEN 블록이 [이미지(좌) + 텍스트(우)] 전체를 하나의 빗각 테두리로 감쌈 (latest__media는 driven 안) */
.latest__top {
  display: block;
}

/* ---- DRIVEN 블록: 빗각 모서리(TL·BR) + 시안 테두리가 [이미지|텍스트] 전체를 감쌈 (clip-path 2겹) ---- */
.driven {
  --n: 26px; /* 빗각 크기 */
  --bd: 1.5px; /* 테두리 두께 */
  position: relative;
  padding: var(
    --bd
  ); /* 시안 테두리를 패딩으로 → inner가 콘텐츠만큼 높이 성장 */
  background: var(--color-main); /* = 테두리(시안) */
  clip-path: polygon(
    var(--n) 0,
    100% 0,
    100% calc(100% - var(--n)),
    calc(100% - var(--n)) 100%,
    0 100%,
    0 var(--n)
  );
}
.driven__inner {
  /* 다크 면 + 내용(이미지|텍스트). in-flow → 본문이 길면 높이가 늘어남 */
  position: relative;
  min-height: clamp(384px, 33vw, 496px); /* 최소 높이(부모 → inner로 이동) */
  display: grid;
  grid-template-columns: 1.7fr 1fr; /* 이미지 : 텍스트 */
  background: #0b1018;
  clip-path: polygon(
    calc(var(--n) - var(--bd) * 0.59) 0,
    100% 0,
    100% calc(100% - var(--n) + var(--bd) * 0.59),
    calc(100% - var(--n) + var(--bd) * 0.59) 100%,
    0 100%,
    0 calc(var(--n) - var(--bd) * 0.59)
  );
}

/* 좌측 이미지 (블록 안 좌측에 붙음, 프레임 없음) */
.latest__media {
  background: #2b3442; /* placeholder 이미지 */
}

/* 헤이저드 줄무늬: 텍스트 영역 풀폭 사각형. 우하단 코너는 부모 빗각이 자동 트리밍 */
.driven__stripe {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  height: 32px;
  background: repeating-linear-gradient(
    45deg,
    var(--color-main) 0 16px,
    /* 줄무늬 16px (더 굵게·균일) */ transparent 16px 28px /* 간격 12px */
  );
}
.driven__stripe--top {
  top: 0;
}
.driven__stripe--bottom {
  bottom: 0;
}

/* 빗금 흐름: 스크롤에 연동해 흐르고, 스크롤 방향에 따라 방향 반전.
   상/하단 밴드는 서로 반대 방향. (CSS 스크롤 기반 애니메이션, 미지원 시 정적) */
@keyframes hazard-flow-fwd {
  to {
    background-position: 395.98px 0;
  }
} /* 10주기 (1주기=28px*√2≈39.6) */
@keyframes hazard-flow-rev {
  to {
    background-position: -395.98px 0;
  }
}

@supports (animation-timeline: view()) {
  .driven__stripe {
    background-size: 39.598px 39.598px; /* 1주기 타일 → 이음새 없는 루프 */
  }
  .driven__stripe--top {
    animation: hazard-flow-fwd linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  .driven__stripe--bottom {
    animation: hazard-flow-rev linear both;
    animation-timeline: view();
    animation-range: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .driven__stripe {
    animation: none;
  }
}

/* 패널 내용 */
.driven__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 부모 높이 안에서 텍스트 상하 정중앙 */
  padding: 56px 40px 40px;
}
.driven__label {
  font-family: var(--font-menu);
  font-weight: 600;
  font-size: var(--fs-title);
  color: var(--color-main);
}
.driven__headline {
  margin-top: 8px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--color-white);
}
.driven__desc {
  margin-top: 24px;
  font-family: var(--font-primary); /* GmarketSans */
  font-weight: 500; /* Medium */
  font-size: var(--fs-body);
  color: var(--color-white);
}
.driven__date {
  display: block;
  margin-top: 32px;
  font-size: var(--fs-caption);
  color: #66727f;
}

/* ---- 하단 3카드 (이미지 + 중앙정렬 카테고리/제목) ---- */
.latest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bento-gap);
  margin-top: var(--bento-gap);
}
.latest-card {
  display: flex;
  flex-direction: column;
}
.latest-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #2b3442; /* placeholder */
}
.latest-card__cat {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-menu);
  font-weight: 500;
  font-size: var(--fs-caption);
  color: var(--color-main);
}
.latest-card__title {
  margin-top: 8px;
  text-align: center;
  font-family: var(--font-primary); /* GmarketSans */
  font-weight: 500; /* Medium */
  font-size: var(--fs-body);
  color: var(--color-white);
}
.latest-card__date {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: var(--fs-caption);
  color: #66727f;
}

/* ============================================================
   LATEST — 모바일/태블릿 반응형
   ※ 원복하려면 아래 두 @media 블록(이 주석~END 표시)을 통째로 삭제/주석
   ============================================================ */

/* ── 태블릿 이하 (≤900px): DRIVEN 세로 스택 + 폰트/간격 모바일화 ── */
@media (max-width: 900px) {
  .latest__title {
    margin-bottom: var(--space-2); /* 24 → 16 */
  }

  /* DRIVEN: 이미지(위) / 텍스트(아래) 세로 스택 */
  .driven {
    min-height: 0;
    padding: var(--bd); /* 테두리 폭만큼 패딩 (margin collapse 방지) */
  }
  .driven__inner {
    position: relative; /* absolute → in-flow: 높이가 콘텐츠 따라 늘어남 */
    inset: auto;
    min-height: 0; /* 스택 시 최소 높이 해제 → 콘텐츠 높이 그대로 */
    grid-template-columns: 1fr; /* 1열 스택 */
    padding: 32px 0; /* 위/아래 줄무늬 밴드 자리 */
  }
  .latest__media {
    aspect-ratio: 16 / 9;
  } /* 스택 시 이미지 높이 확보 */

  /* 줄무늬를 body가 아닌 블록(inner) 기준으로 앵커 → 이미지 위(최상단)/텍스트 아래 */
  .driven__body {
    position: static;
    padding: 24px 24px 24px;
  } /* 데스크탑 56/40/40 → 축소. 날짜가 하단 빗금에 붙지 않도록 아래 24px */

  /* 하단 카드: 자연 반응형 (3→2→1) */
  .latest__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* ── 모바일 (≤600px): 추가 축소 + 카드 1열 ── */
@media (max-width: 600px) {
  .driven__body {
    padding: var(--space-3) var(--space-2) var(--space-3);
  }
  .latest__grid {
    grid-template-columns: 1fr;
  } /* 모바일 1열 스택 */
}
/* ===== LATEST 반응형 END ===== */

/* =========================================================
   모바일 액션 (로고 우측 아이콘) — 기본 숨김
   ========================================================= */
.m-actions {
  display: none;
}

.m-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px; /* 최소 터치 타겟 */
  color: var(--color-dark);
  background: none;
  border: 0;
  cursor: pointer;
  transition: scale 0.15s ease;
}
.m-actions__btn:active {
  scale: 0.96;
} /* 누름 피드백 */
.m-actions__btn svg {
  width: 24px;
  height: 24px;
}

/* ---- 햄버거 3선 → X 모핑 (translate/rotate 개별 트랜지션으로 단계 분리) ---- */
.m-toggle__box {
  position: relative;
  display: block;
  width: 24px;
  height: 16px;
}
.m-toggle__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  /* 닫힘 방향: 회전 먼저 → 이동(딜레이), 가운데선은 늦게 복귀 */
  transition:
    rotate 0.22s cubic-bezier(0.65, 0, 0.35, 1),
    translate 0.22s cubic-bezier(0.65, 0, 0.35, 1) 0.22s,
    opacity 0.16s ease 0.28s;
}
.m-toggle__bar:nth-child(1) {
  top: 0;
}
.m-toggle__bar:nth-child(2) {
  top: 7px;
} /* 가운데 */
.m-toggle__bar:nth-child(3) {
  top: 14px;
}

/* 열림: 이동(중앙 합류) 먼저 → 회전(딜레이), 가운데선 즉시 사라짐 */
.m-toggle.is-open .m-toggle__bar {
  transition:
    translate 0.22s cubic-bezier(0.65, 0, 0.35, 1),
    rotate 0.22s cubic-bezier(0.65, 0, 0.35, 1) 0.22s,
    opacity 0.12s ease;
}
.m-toggle.is-open .m-toggle__bar:nth-child(1) {
  translate: 0 7px;
  rotate: 45deg;
}
.m-toggle.is-open .m-toggle__bar:nth-child(2) {
  opacity: 0;
}
.m-toggle.is-open .m-toggle__bar:nth-child(3) {
  translate: 0 -7px;
  rotate: -45deg;
}

/* ---- 모바일 드롭다운 메뉴 (데스크탑 숨김) ---- */
.m-menu {
  display: none;
}
.m-menu__list {
  list-style: none;
}
.m-menu__item a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-menu);
  font-size: var(--fs-title);
  font-weight: 500;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.m-menu__item.is-active a {
  background: color-mix(in srgb, var(--color-main) 82%, #243042);
  color: var(--color-dark); /* 틸 배경 위 → 검정 텍스트 */
  border-bottom-color: transparent;
}
/* 모바일 메뉴는 hover 피드백 없음 (활성 HOME은 항상 틸+검정 유지) */

/* =========================================================
   반응형
   ========================================================= */

/* ---- 노트북 가로 (GNB 유지, 거터만 축소 → 헤더·콘텐츠 동시 적용) ---- */
@media (max-width: 1080px) {
  :root {
    --gutter: var(--space-3);
  } /* 좌우 24 */
}

/* ---- 태블릿 세로 / 모바일: 헤더 1줄 + 아이콘 ---- */
@media (max-width: 900px) {
  /* 헤더 → 로고 + 아이콘 한 줄 */
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-2); /* 24 / 16 */
  }
  .gnb {
    display: none;
  } /* 데스크탑 가로 메뉴 숨김 */
  .m-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  /* ── 드롭다운 메뉴: 위 → 아래로 부드럽게 펼침 (grid-rows 0fr→1fr) ── */
  .m-menu {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* 헤더 바로 아래 */
    grid-template-rows: 0fr;
    background: #1a2433;
    box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.55);
    transition: grid-template-rows 0.45s cubic-bezier(0.7, 0, 0.2, 1);
  }
  .m-menu.is-open {
    grid-template-rows: 1fr;
  }
  .m-menu__inner {
    overflow-y: auto;
    min-height: 0;
    max-height: calc(100dvh - 84px);
  }
  /* 항목: 위에서 순차적으로 페이드+슬라이드 (스태거) */
  .m-menu__item {
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity 0.3s ease,
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .m-menu.is-open .m-menu__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i) * 45ms + 140ms); /* 순차 등장 */
  }

  /* 카드 라벨: 좌·하 패딩 절반 (16 → 8) */
  .card__label {
    padding-bottom: var(--space-1);
    padding-left: var(--space-1);
  }

  /* 콘텐츠 → 1컬럼 스택 (컬럼이 전체 너비를 채움) */
  .bento {
    flex-direction: column;
    align-items: stretch;
    --bento-gap: 16px; /* 모바일 간격 16px */
  }
  .content {
    padding: var(--space-2);
  }
}

/* 모바일(≤600): 로고 확대 (시안 참조) */
@media (max-width: 600px) {
  .site-header__logo img {
    width: clamp(200px, 56vw, 260px);
  }
}

/* 모션 최소화 선호 시 즉시 전환 */
@media (prefers-reduced-motion: reduce) {
  .m-toggle__bar,
  .m-menu,
  .m-menu__item {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Footer (topgear.com 푸터 참조 — Korea 버전)
   ========================================================= */
.site-footer {
  background: var(--color-bg); /* 콘텐츠 배경과 동일 */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #8a929e;
  font-size: var(--fs-caption);
}
.footer__inner {
  max-width: var(--page-max); /* 1440 프레임 */
  margin-inline: auto;
  padding: var(--space-6) var(--gutter); /* 48 / gutter */
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 24 */
}

/* 상단: 워드마크 + 지역 */
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__brand {
  display: inline-block;
}
.footer__brand img {
  display: block;
  width: 180px; /* 헤더 로고(최대 360)의 절반 */
  height: auto;
  filter: brightness(0) invert(1); /* 검정 로고 → 흰색 반전 */
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.footer__social-link {
  display: inline-flex;
  color: var(--color-white); /* 기본 흰색 */
  transition: color 0.15s;
}
@media (hover: hover) {
  .footer__social-link:hover {
    color: var(--color-main);
  } /* 오버 → 메인 컬러 */
}
.footer__social-link svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}
/* 유튜브는 가로 알약형이라 높이가 짧음 → 인스타와 시각 높이를 맞추려 키움 (28 vs 인스타 24) */
.footer__social-link--yt svg {
  width: 28px;
  height: 28px;
}

/* BBC Studios 안내 */
.footer__bbc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer__bbc-logo {
  display: block;
  width: 180px; /* 위 탑기어 로고와 동일 폭 */
  height: auto; /* 비율 유지 (581×93 → 높이 ~29px) */
  filter: brightness(0) invert(1); /* 검정 로고 → 흰색 반전 */
}
.footer__bbc-text {
  color: #5c6470;
  font-size: var(--fs-caption);
}
.footer__bbc-logo-link {
  display: inline-block;
  align-self: flex-start; /* 클릭 영역을 로고에 맞춤 (stretch 방지) */
}

/* 인터내셔널 사이트 */
.footer__intl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2); /* 위 블록과 추가 간격 */
  padding-top: var(--space-3); /* 구분선~내용 24 */
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* 구분선 */
}
.footer__intl-title {
  font-family: var(--font-menu);
  font-weight: 500; /* Medium */
  font-size: var(--fs-caption);
  color: var(--color-white);
}
.footer__intl-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-2) var(--space-3);
  list-style: none;
}
.footer__intl-list a {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* 아이콘-텍스트 간격 */
  color: #8a929e;
  font-family: var(--font-menu); /* Industry */
  font-weight: 500; /* Medium */
  font-size: var(--fs-caption);
  transition: color 0.15s;
}
/* 앞쪽 외부링크 아이콘 (흰색, 글자 크기에 맞춤) */
.footer__intl-list a::before {
  content: "";
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: var(--color-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
@media (hover: hover) {
  .footer__intl-list a:hover {
    color: var(--color-white);
  }
}

/* 저작권 */
.footer__copyright {
  margin-top: -12px; /* flex gap(16) 일부 상쇄 → 간격 4 */
  color: #5c6470;
  font-family: var(--font-primary); /* GmarketSans */
  font-weight: 500;
  font-size: var(--fs-caption);
}

/* 반응형: 모바일 패딩 축소 */
@media (max-width: 900px) {
  /* 모바일은 content 하단 패딩이 16px라 푸터가 바짝 붙음 → 위 여백 보강 */
  .site-footer {
    margin-top: var(--space-3);
  } /* +24 → 콘텐츠~구분선 ≈ 40px */
  .footer__inner {
    padding: var(--space-6) var(--space-2);
  } /* 48 / 16 */
}

/* =========================================================
   DRIVEN 페이지 (DRIVEN.html)
   ========================================================= */

/* ---- Hero ---- */
.dhero {
  position: relative;
  aspect-ratio: 1640 / 560; /* 디자인 비율 */
  border-radius: 8px;
  overflow: hidden;
}
.dhero__media {
  position: absolute;
  inset: 0;
  background: #2b3442; /* placeholder 이미지 */
}
.dhero__media::after {
  /* 좌측 가독성 그라데이션 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* ph-img(z-index:0) 위에 표시 */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.15) 42%,
    transparent 68%
  );
}
.dhero__text {
  position: absolute;
  left: clamp(var(--space-3), 3%, var(--space-6));
  bottom: clamp(var(--space-3), 5%, var(--space-6));
  z-index: 1;
}
.dhero__title {
  font-family: var(--font-display); /* Industry Ultra */
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: 0.9;
  color: var(--color-white);
}
.dhero__sub {
  margin-top: var(--space-2);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(var(--fs-body), 1.6vw, 20px);
  color: var(
    --hero-sub-color,
    var(--color-main)
  ); /* 기본 teal, 인스턴스에서 --hero-sub-color로 조정 */
}

/* ---- 리뷰 카드 그리드 ---- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bento-gap);
  margin-top: var(--space-6); /* 48 */
}
.review-card {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-main); /* 하단 틸 라인 */
}
.review-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #2b3442; /* placeholder */
  border-radius: 4px;
  overflow: hidden;
}
/* 점수 뱃지 (Industry Ultra Italic) */
.review-card__score {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-1);
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-style: italic; /* → Ultra Italic */
  font-weight: 900;
  line-height: 1;
}
.review-card__score b,
.review-card__score i {
  font-size: var(--fs-headline);
}
.review-card__score b {
  color: var(--color-white);
}
.review-card__score i {
  color: var(--color-main);
  margin-left: 3px;
}

.review-card__cat {
  margin-top: var(--space-2);
  text-align: center;
  font-family: var(--font-menu);
  font-weight: 500;
  font-size: var(--fs-caption);
  color: var(--color-main);
}
.review-card__name {
  margin-top: var(--space-1);
  text-align: center;
  font-family: var(
    --card-name-font,
    var(--font-menu)
  ); /* 기본 Industry, 페이지에서 --card-name-font로 조정 */
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--color-white);
}
.review-card__meta {
  margin-top: var(--space-2);
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-caption);
  color: #66727f;
}

/* ---- DRIVEN 반응형 ---- */
@media (max-width: 900px) {
  .dhero {
    aspect-ratio: 16 / 10;
  } /* 더 세로로 (텍스트 공간) */
  .review-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
@media (max-width: 600px) {
  .dhero {
    aspect-ratio: 4 / 5;
  } /* 모바일 세로 비율 */
  .review-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   DRIVEN 상세 (driven_detail.html)
   ========================================================= */
.rdetail {
  position: relative;
}

.rdetail__eyebrow {
  font-family: var(--font-menu);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--color-main);
}
.rdetail__title {
  margin-top: var(--space-1);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-headline);
  color: var(--color-white);
}

/* 가격/렌트 스펙 */
.rdetail__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-3);
}
.spec__label {
  display: block;
  font-size: var(--fs-caption);
  color: #8a929e;
}
.spec__value {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  color: var(--color-main);
}
.spec__value b {
  font-size: var(--fs-title);
  font-weight: 700;
}

/* 점수 (우상단, 큼 / Ultra Italic) */
.rdetail__score {
  position: absolute;
  top: var(--space-1);
  right: 0;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  font-size: var(--fs-hero); /* b는 1em, i(/10)는 0.72em으로 상대 */
}
.rdetail__score b {
  font-size: 1em;
  color: var(--color-white);
}
.rdetail__score i {
  font-size: 0.72em;
  color: var(--color-main);
  margin-left: 4px;
}

/* 작성자 + GOOD/BAD */
.rdetail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-3);
}
.author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* 하단 작성자(모바일 전용) — 기본 숨김, 위 구분선 */
.author--bottom {
  display: none;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.author__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2b3442;
  flex-shrink: 0;
}
.author__name {
  display: block;
  font-size: var(--fs-body);
  color: var(--color-white);
}
.author__date {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: #8a929e;
}

.verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-left: auto; /* 오른쪽으로 */
  list-style: none;
}
.verdict {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.verdict__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.verdict__label {
  display: block;
  font-family: var(--font-menu);
  font-weight: 700;
  font-size: var(--fs-caption);
}
.verdict--good .verdict__label {
  color: var(--color-main);
}
.verdict--bad .verdict__label {
  color: #ff2e7e;
}
.verdict__text {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-caption);
  color: var(--color-white);
}

/* 히어로 이미지 */
.rdetail__hero {
  margin-top: var(--space-3);
  border-radius: 8px;
  overflow: hidden;
}
.rdetail__hero-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #2b3442;
}

/* 본문 기사 */
.rdetail__body {
  margin-top: var(--space-3);
  color: #9aa4b2; /* 콘텐츠 폭에 꽉 차게 */
  font-size: var(--fs-body);
  line-height: 1.5; /* 긴 본문 가독성 */
}
.rdetail__body p + p {
  margin-top: var(--space-3);
}

/* ---- DRIVEN 상세 반응형 ---- */
@media (max-width: 900px) {
  /* 점수(7/10)는 데스크탑처럼 우상단 유지 (아우디 Q3 반대편) — static override 제거 */
  /* 헤더 작성자는 숨기고, 하단 작성자를 표시 (프로필을 콘텐츠 맨 하단으로) */
  .rdetail__meta .author {
    display: none;
  }
  .author--bottom {
    display: flex;
  }
  /* GOOD·BAD 세로 스택 (간격 살짝 좁게) */
  .rdetail__meta {
    align-items: flex-start;
  }
  .verdicts {
    margin-left: 0;
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* =========================================================
   FEATURE 상세 (feature_detail.html) — 모바일 콘텐츠 기준, 반응형
   ========================================================= */
/* 히어로 이미지 */
.fdetail__hero {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.fdetail__hero::after {
  /* 하단 가독성 그라데이션 (오버레이 텍스트용) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* ph-img(z-index:0) 위에 표시 */
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 38%);
  pointer-events: none;
}
.fdetail__hero-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #2b3442;
}

/* 제목 영역 — FEATURE+제목을 히어로에 살짝 겹침 (모바일/웹 공통, 겹침양만 다름) */
.fdetail__head {
  position: relative;
  z-index: 1;
  margin-top: -72px; /* 모바일 겹침 */
}
.fdetail__eyebrow {
  font-family: var(--font-menu);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--color-main);
}
.fdetail__title {
  margin-top: var(--space-2);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-headline); /* clamp(28,3.2vw,44) */
  color: var(--color-white);
}
.fdetail__sub {
  margin-top: var(--space-3);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-title);
  color: var(--color-white);
  line-height: 1.5;
}

/* 사진 2장 */
.fdetail__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bento-gap);
  margin-top: var(--space-3);
}
.fdetail__gallery-img {
  display: block;
  width: 100%;
  aspect-ratio: 23 / 12;
  background: #2b3442;
  border-radius: 4px;
}

/* 본문 */
.fdetail__body {
  margin-top: var(--space-3);
  color: #9aa4b2;
  font-size: var(--fs-body);
  line-height: 1.5; /* 긴 본문 가독성 */
}
.fdetail__body p + p {
  margin-top: var(--space-3);
}

/* ---- FEATURE 상세 반응형 ---- */
@media (max-width: 600px) {
  .fdetail__hero-media {
    aspect-ratio: 4 / 3;
  } /* 모바일은 더 세로로 */

  /* 갤러리: 좌우 스크롤 캐러셀 (이미지 1개 = 화면 2/3, 다음 이미지 살짝 노출) */
  .fdetail__gallery {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-2);
    margin-inline: calc(var(--space-2) * -1); /* 콘텐츠 거터 상쇄 → 풀블리드 */
    padding-inline: var(--space-2); /* 양 끝 거터 유지 */
    scrollbar-width: none; /* 스크롤바 숨김 */
  }
  .fdetail__gallery::-webkit-scrollbar {
    display: none;
  }
  .fdetail__gallery-img {
    flex: 0 0 66vw; /* 전체화면의 2/3 */
    scroll-snap-align: start;
  }
}

/* 웹은 제목이 커서 더 깊게 겹침 */
@media (min-width: 901px) {
  .fdetail__head {
    margin-top: -120px;
  }
}

/* =========================================================
   리스트 페이지 상단 (VIDEO/TRENDING/MOTOR SPORTS/HOT LIST/RETRO/FEST/COTM/ITEM)
   <tg-section-head> = 중앙 타이틀 + 틸 부제
   ========================================================= */
.list-head {
  text-align: center;
}
.list-head .latest__title {
  margin-bottom: 0;
} /* 부제가 바로 아래 */
.list-head__sub {
  margin: var(--space-1) 0 var(--space-6);
  font-size: var(--fs-body);
  color: var(--color-main);
}

/* 재생 버튼을 미디어 정중앙에 올리기 위한 위치 컨텍스트 (홈/LATEST엔 영향 없음) */
.latest__media,
.latest-card__media {
  position: relative;
}

/* =========================================================
   FEATURE 리스트 (feature.html) — DRIVEN 페이지 dhero/review-card 재사용
   카드 제목이 한글 기사 제목이므로 GmarketSans (DRIVEN은 차명=Industry)
   ========================================================= */
.feature-page {
  --card-name-font: var(--font-primary);
} /* 한글 제목 → GmarketSans (변수 훅) */