/* ===== 히어로: 360 Lexington Ave 첫 화면 실측 이식 (hero_lex.py) — 좌표·타이포는 원본 1440×900 기준 px 그대로 ===== */
.lex-hero { background: #282828; }
.lex-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lex-bg video, .lex-bg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 원본은 65.92초 루프 영상. 영상 준비 전에는 정지컷 + 아주 느린 드리프트로 대체 */
.lex-bg__img { background-size: cover; background-position: 50% 50%; transform: scale(1.04); animation: lexDrift 30s ease-in-out infinite alternate; }
@keyframes lexDrift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.4%, -1%, 0); } }
.lex-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .24); }   /* 원본 실측값 */
.lex-content { position: absolute; inset: 0; z-index: 2; display: block; padding: 0; text-align: left; }

/* 좌하단 카피 블록 — 원본 반응형 실측(폭별):
     ≥1024 : 타이틀 바닥에서 230px, 설명 끝줄 158px, 설명 오른쪽은 카드를 피해 164px
      768  : 타이틀 302px, 설명 230px, 설명 폭 = 전체(카드가 아래로 내려감)
     ≤430  : 타이틀 318px, 설명 230px, 타이틀은 3줄로 감김
   → 어느 폭에서도 '타이틀 아래 40px 간격'은 동일. 글자 크기는 원본이 모바일에서도 48px 그대로 유지.
   블록을 바닥 기준으로 잡고 간격 40px을 주면 위 세 경우가 자동으로 재현된다. */
.lex-copy { position: absolute; left: 20px; right: 164px; bottom: 150px; }
.lex-title { margin: 0; color: #fff; font-family: 'Pretendard', Arial, sans-serif;
  font-size: 48px; line-height: 48px; font-weight: 400; letter-spacing: -1.44px; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
/* 설명: 원본 16px / ls -0.48px 그대로. 줄 간격만 한글에 맞춰 24px(원본 16px은 한글 글자가 서로 붙음) */
/* 원본 간격은 40px이지만 한글 줄 간격을 16→24px로 키운 만큼(2줄 = +16px) 블록을 8px 내리고 간격을 32px로 잡아,
   타이틀 위치는 원본과 정확히 같은 '바닥에서 230px'을 유지한다. */
.lex-sub { margin: 32px 0 0; color: #fff; font-family: 'Pretendard', Arial, sans-serif;
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
.lex-sub span { display: block; }

/* 우하단 카드: 원본 x=1276 y=710 w=144 h=170 (= 오른쪽·아래에서 각 20px) */
.lex-card { position: absolute; right: 20px; bottom: 20px; width: 144px; height: 170px; background: #fff; color: rgb(17, 18, 19);
  text-decoration: none; display: block; overflow: hidden; transition: transform .45s ease, box-shadow .45s ease; }
.lex-card:hover, .lex-card:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.lex-card__thumb { display: block; width: 100%; height: 92px; background-size: cover; background-position: 50% 50%; }
.lex-card__label { display: block; padding: 10px 12px 0; font-family: 'Pretendard', Arial, sans-serif; font-size: 24px; line-height: 28.8px; font-weight: 400; letter-spacing: -.72px; }
.lex-card__arrow { position: absolute; right: 10px; bottom: 8px; font-size: 16px; line-height: 1; opacity: .75; }

/* 면책 문구(우리 추가분) — 카드 왼쪽 옆, 어느 폭에서도 카드와 겹치지 않게 오른쪽을 카드 폭만큼 비운다 */
.lex-note { position: absolute; left: 20px; right: 164px; bottom: 20px; margin: 0; color: rgba(255,255,255,.72);
  font-family: 'Pretendard', Arial, sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: .02em; }

/* ── 반응형: 원본 실측 그대로 ──
   원본은 폭이 줄어도 글자 크기를 줄이지 않는다(모바일에서도 타이틀 48px). 대신 글이 여러 줄로 감기고,
   카드가 텍스트 아래로 내려가면서 카피 블록이 카드 위로 올라간다. 카드는 항상 144×170, 우·하 20px 고정. */
@media (max-width: 1023px) {
  /* 원본 768×1024 실측: 타이틀 바닥에서 302px, 설명 230px, 설명이 화면 폭을 다 씀(카드는 아래) */
  .lex-copy { right: 20px; bottom: 222px; }
}
@media (max-width: 767px) {
  /* 원본 390×844·360×740 실측: 타이틀 318px / 설명 230px. 타이틀은 3줄로 감김. 글자 크기는 그대로 48px */
  .lex-copy { right: 20px; bottom: 222px; }
}
/* 세로가 짧은 화면(가로로 눕힌 폰·작은 노트북)에서만 헤더와 겹치지 않도록 축소 — 원본에 없는 우리 보호 규칙 */
@media (max-height: 560px) {
  /* 세로가 짧으면 카드가 텍스트 아래로 못 내려가므로, 카피 오른쪽을 카드 폭(116)+여백(20)+간격(20)만큼 비운다 */
  .lex-copy { bottom: 116px; right: 156px; }
  .lex-title { font-size: 34px; line-height: 36px; letter-spacing: -1px; }
  .lex-sub { margin-top: 20px; }
  .lex-card { width: 116px; height: 136px; }
  .lex-card__thumb { height: 72px; }
  .lex-card__label { font-size: 18px; line-height: 22px; padding: 7px 10px 0; }
  .lex-note { right: 136px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .lex-bg__img { animation: none; transform: scale(1.04); }
  .lex-card { transition: none; }
}