/* ═══════════════════════════════════════════════════════════════════════════
   xrv-news.css — 뉴스 소식 섹션 공용 컴포넌트  (NVIDIA Newsroom 스타일)
   공유 사이트: metahoop / axdxrobot / xrvpstudio

   레이아웃 구조:
     .xrv-news__layout
       ├── .xrv-news__main  (좌, 넓은 컬럼) — 수평 기사 리스트 (2개씩 페이지)
       │     .xrv-news__page  [카드 × 최대 2개]
       │     .xrv-news__nav   [이전/다음 버튼 + 도트 인디케이터]
       └── .xrv-news__side  (우, 고정 컬럼) — Recent News 텍스트 목록

   배경: #06080d  — Use Cases(.xrv-uc)와 동일한 다크 테마
   액센트: #33E0C4 (teal)
   컨테이너: --mha-wrap-max / --mha-sec-x 변수 재사용 (mha-products 등과 동일)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 섹션 래퍼 ──────────────────────────────────────────────────────────── */
.xrv-news {
  background: #06080d;
  /* 좌우 padding: 사이트 공통 --mha-sec-x 변수 재사용 (mha-products / xrv-ov 등과 동일) */
  padding: 40px var(--mha-sec-x, 60px) 100px;
  /* 서브내비 클릭 시 sticky header + subnav 높이만큼 스크롤 여백 보정
     (다른 섹션들이 사용하는 것과 동일한 값 — .xrv-ov, .xrv-uc, #mha-products 등) */
  scroll-margin-top: calc(var(--header-height, 45px) + 46px);
}

.xrv-news__wrap {
  max-width: var(--mha-wrap-max, 1450px);
  margin: 0 auto;
  padding: 0;
}

/* ── 섹션 헤더 (.xrv-ov__head 와 동일 스타일) ──────────────────────────── */
.xrv-news__head {
  max-width:    720px;
  margin:       0 auto 64px;
  text-align:   center;
}

.xrv-news__label {
  font-family:      var(--font-family);
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-medium);
  letter-spacing:   .16em;
  text-transform:   uppercase;
  color:            #33E0C4;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              10px;
  margin-bottom:    0px;
}

.xrv-news__label::before,
.xrv-news__label::after {
  content: "";
  width:   24px;
  height:  1px;
}

.xrv-news__label::before {
  background: linear-gradient(90deg, transparent, #33E0C4);
}

.xrv-news__label::after {
  background: linear-gradient(90deg, #33E0C4, transparent);
}

.xrv-news__title {
  font-family:              var(--font-family);
  font-size:                var(--typo-overview-title-size);
  font-weight:              var(--typo-overview-title-weight);
  letter-spacing:           var(--typo-overview-title-letter-spacing);
  line-height:              var(--typo-overview-title-line-height);
  margin-top:               0.4em;
  margin-bottom:            20px;
}
/* 제목 텍스트 전용 인라인 span — 그라데이션(box-decoration-break:clone)을 여기에
   걸어야 하는 이유(2026-10-03 UX 리뷰):
   관리자 입력 제목(admin-editable, 30차)은 길이가 가변적이라 줄바꿈 위치가 매번
   달라지는데, 그라데이션을 h2(블록) 전체에 걸면 다중 라인 전체 박스를 기준으로
   0~100% 색상 구간이 매핑되어 "어느 단어가 어느 색으로 보일지"가 텍스트 길이에
   따라 사실상 무작위로 바뀐다(= 리뷰에서 지적된 "AI/콘텐츠가만 불규칙하게
   하이라이트"의 원인 — 수동 <span> 하드코딩도, JS/서버 하이라이트 로직도 아님).
   box-decoration-break:clone 은 인라인 요소가 여러 줄로 쪼개질 때 각 줄 조각마다
   배경을 "복제"해서 독립적으로 채우므로, 줄 수·줄바꿈 위치와 무관하게 매 줄이
   항상 동일한 그라데이션 패턴으로 보인다 — 특정 단어만 튀어 보이는 문제가 원천
   차단된다(요청의 Option B). <strong> 태그만 강조하는 Option A 는 관리자 입력
   HTML을 Jinja `|safe`로 신뢰해야 하는데, 이 프로젝트엔 관리자 입력을 `|safe`
   처리하는 선례가 전혀 없어(30차 결정) 채택하지 않았다. */
.xrv-news__title-text {
  background:               linear-gradient(112deg, #EEF0F6 0%, #EEF0F6 38%, #33E0C4 68%, #7C5CFF 100%);
  -webkit-background-clip:  text;
  background-clip:          text;
  -webkit-text-fill-color:  transparent;
  color:                    transparent;
  text-shadow:              none;
  -webkit-box-decoration-break: clone;
  box-decoration-break:         clone;
}

/* ── 전체 레이아웃 (메인 + 사이드바) — 3:1 비율 ────────────────────────── */
.xrv-news__layout {
  display: grid;
  grid-template-columns: 3fr 1fr;   /* 메인 카드 영역 : 사이드바 = 3:1 */
  gap: 60px;
  align-items: stretch;             /* 두 컬럼을 동일 높이로 — 도트 수직 정렬 기준 */
}

/* ═══════════════════════════════════════════════════════════════════════════
   메인 뉴스 리스트 (좌 컬럼)
   각 기사: [썸네일 왼쪽] + [제목·요약·날짜 오른쪽] 수평 배치
   ═══════════════════════════════════════════════════════════════════════════ */

.xrv-news__main {
  display: flex;
  flex-direction: column;
}

/* ── 페이지 (2개씩 묶음) ──────────────────────────────────────────────── */
.xrv-news__page {
  display: flex;
  flex-direction: column;
  /* 1~2카드 전환 시 섹션 높이 고정 — 2카드 기준 높이(232px×2 + 구분선 1px)에 맞춤.
     카드: min-height 168px + padding 32px×2 = 232px; 2장이면 232+1+232 = 465px */
  min-height: calc((168px + 32px + 32px) * 2 + 1px);
}

.xrv-news__page.is-hidden {
  display: none;
}

/* ── 페이지 네비게이션 바 ────────────────────────────────────────────────
   실제 화살표+점 캡슐(.xrv-carousel-controls)은 이 안의 자식으로 들어가며
   Overview 캐러셀과 동일한 공용 스타일(css/common/xrv-ov-carousel.css)을
   쓴다 — 여기서는 "컨테이너를 하단에 고정 + 가운데 정렬"만 담당.
   예전엔 전용 .xrv-news__nav-btn(화살표) 클래스가 따로 있었으나 마크업에
   한 번도 쓰이지 않은 죽은 코드였고(2026-10-03 확인), 이번에 화살표를 실제로
   추가하면서 Overview 와 동일한 .xrv-ov__btn 을 재사용하는 쪽으로 정리해
   제거했다(중복 스타일 유지 방지). */
.xrv-news__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;  /* 사이드바 도트와 수직 정렬: 남은 공간 흡수해 항상 하단에 배치 */
  /* 캡슐(.xrv-carousel-controls)이 자체 margin-top:24px 를 가지므로 여기서
     별도 padding-top 중복 추가하지 않음(2026-10-03). */
}

/* 기사 카드 — 수평 플렉스, 카드 박스 없음, 구분선으로 분리 */
.xrv-news__card {
  position: relative;      /* stretched link 기준점 */
  display: flex;
  flex-direction: row;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: none;
  overflow: visible;       /* 썸네일 zoom 은 .xrv-news__thumb 에서 clip */
  /* 카드 높이 고정 (border-box 기준):
     height: 232px, padding: 32px 0 (모든 카드 동일) → inner = 232-64 = 168px.
     ※ first-child padding-top: 0 제거 필수 — 그렇지 않으면 카드 1 inner=200px,
        카드 2 inner=168px 로 달라져 body 높이·날짜 위치가 카드마다 다르게 됨. */
  height: calc(168px + 32px + 32px);
}

.xrv-news__card:last-child  { border-bottom: none; }

.xrv-news__card--linked { cursor: pointer; }

/* Stretched link — 카드 전체 클릭 영역으로 확장
   body(z-index:2)보다 높은 z-index:3 으로 카드 전체를 덮어
   이미지·텍스트 어디를 클릭해도 페이지 이동이 작동함 */
.xrv-news__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-decoration: none;
}

/* ── 썸네일 — 이미지:텍스트 = 1:2 비율 (.xrv-news__body 와 합쳐 3등분) ── */
.xrv-news__thumb {
  /* 고정 width 대신 flex 비율 1 사용 — body(flex:2)와 함께 1:2 비율 달성 */
  flex: 1 1 0%;
  /* 고정 높이: 업로드 이미지 크기·비율과 무관하게 항상 168px.
     align-self:flex-start 으로 stretch 를 해제 — 세로로 긴 이미지가
     카드 전체 높이를 밀어올리는 현상 방지. */
  height: 168px;
  align-self: flex-start;
  border-radius: 8px;
  overflow: hidden;        /* image scale transform clip */
  background: #111318;
}

.xrv-news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .38s ease;
}

.xrv-news__card--linked:hover .xrv-news__thumb img {
  transform: scale(1.05);
}

.xrv-news__thumb--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #111318 0%, #1a1e28 100%);
}

/* ── 카드 텍스트 영역 — thumb(flex:1) 대비 2배 폭 (1:2 비율) ────────────── */
.xrv-news__body {
  position: relative;
  z-index: 2;              /* stretched link 위에 렌더링 */
  flex: 2 1 0%;            /* thumb(flex:1)과 함께 이미지:텍스트 = 1:2 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 0 0;        /* 하단 패딩 제거 — 메타 행이 이미지 하단 가장자리에 정렬 */
  overflow: hidden;        /* 콘텐츠가 카드 높이를 초과해 팽창되는 것을 방지 */
}

/* 카드 제목 — 1줄 고정, min-height 로 짧은 제목도 항상 1줄 분량 공간 확보 */
.xrv-news__card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(238, 240, 246, .92);
  line-height: 1.5;
  min-height: calc(1.15rem * 1.5);     /* 1줄 고정 높이: font-size × line-height */
  margin: 0 0 10px;
  transition: color .2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xrv-news__card--linked:hover .xrv-news__card-title {
  color: #33E0C4;
}

/* 요약 본문 */
.xrv-news__summary {
  font-size: 0.875rem;
  color: rgba(238, 240, 246, .50);
  line-height: 1.7;
  margin: 0;               /* auto 하단 여백 제거 → date에 margin-top: auto 로 이전 */
  padding-bottom: 0;
  /* min-height 는 -webkit-line-clamp 를 무력화시키므로 사용하지 않음.
     카드 자체가 height(고정)이므로 body/overflow:hidden이 클립을 보장함. */
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* 최대 3줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 날짜 — margin-top: auto 로 이하 메타 블록 전체를 카드 하단에 고정 */
.xrv-news__date {
  font-size: 0.78rem;
  color: rgba(238, 240, 246, .33);
  display: block;
  margin-top: auto;        /* 요약 아래 남은 공간을 모두 흡수해 메타를 하단 고정 */
  padding-top: 10px;       /* 요약 본문과의 간격 */
}

/* 기자이름·날짜 — 날짜 아래, 오른쪽 정렬 */
.xrv-news__byline {
  font-size: 0.78rem;
  color: rgba(238, 240, 246, .33);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  text-align: right;
}

/* 언론사명 — byline 아래 남은 공간 흡수 → 카드 하단 왼쪽 고정 */
.xrv-news__source {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(238, 240, 246, .33);
  display: block;
  margin-top: auto;    /* byline↔source 사이 여백 최대화 */
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
   사이드바 (우 컬럼) — "Recent News" 텍스트 목록
   ═══════════════════════════════════════════════════════════════════════════ */

/* 사이드바 전체를 감싸던 바깥 테두리(상하좌우)는 제거(45차, 2026-10-03) — 이미
   아래 3곳에 의도된 구분선이 각각 따로 있어서(① .xrv-news__side-head
   border-bottom, ② .xrv-news__item border-bottom + :last-of-type 로 카드
   사이에만, ③ .xrv-news__side-nav border-top), 바깥 테두리까지 함께 있으면
   전체가 "표"처럼 사방이 선으로 둘러싸인 느낌을 줬다. 3곳의 구분선은 전부
   카드 개수와 무관한 컨테이너 레벨 선이라(특정 :nth-child 가 아님) 페이지당
   카드가 3개 미만이어도 위치가 깨지지 않는다 — 이미 그렇게 되어 있었음.
   테두리를 지워도 배경색(rgba(255,255,255,.015), "뉴스 소식" 섹션 자체의
   배경 #06080d 보다 살짝 밝은 흰색 틴트)이 남아 있어 모서리가 둥근 박스
   형태의 "이음새"가 여전히 눈에 띄었음(2026-10-03 UX 리뷰로 발견) —
   .xrv-news__wrap/.xrv-news__layout 에는 배경이 없어 섹션 배경(#06080d)이
   그대로 비치므로, 여기 배경을 투명으로 바꾸면 섹션과 완전히 하나로
   섞여 박스 경계 자체가 사라진다(라운드 코너(border-radius)와
   overflow:hidden 은 카드 hover 하이라이트의 모서리를 맞추기 위해 유지). */
.xrv-news__side {
  display: flex;               /* 세로 flex → 사이드 내비를 margin-top: auto 로 하단 고정 */
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
}

/* 사이드바 헤더 */
.xrv-news__side-head {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.xrv-news__side-head-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(238, 240, 246, .88);
  letter-spacing: 0;
  text-transform: none;
}

/* 사이드바 아이템 */
.xrv-news__item {
  display: block;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  text-decoration: none;
  transition: background .15s;
}

.xrv-news__item:last-of-type { border-bottom: none; }
.xrv-news__item--nolink      { cursor: default; }

a.xrv-news__item:hover {
  background: rgba(255, 255, 255, .03);
}

/* 사이드바 카테고리 — pill 배지 (콤마로 여러 개 입력 시 배지를 여러 개 렌더링,
   margin-right 로 배지 사이 간격 확보 — 복수 배지 지원 추가 시 함께 추가) */
.xrv-news__item-cat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(238, 240, 246, .62);
  background: rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 3px 10px;
  margin: 0 6px 8px 0;
}

/* 사이드바 제목 — 최대 2줄 고정, min-height 로 짧은 제목도 항상 2줄 분량 공간 확보 */
.xrv-news__item-title {
  margin: 1.33em 0; /* h4 였을 때의 기본 세로 여백을 유지(h3 전환 후에도 동일) */
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(238, 240, 246, .78);
  line-height: 1.5;
  min-height: calc(0.9rem * 1.5 * 2); /* 2줄 고정 높이: font-size × line-height × 2 */
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}

a.xrv-news__item:hover .xrv-news__item-title {
  color: rgba(238, 240, 246, .95);
}

/* 사이드바 날짜 */
.xrv-news__item-date {
  font-size: 0.72rem;
  color: rgba(238, 240, 246, .33);
  display: block;
}

/* ── 사이드바 페이지 — 4개 아이템 묶음, is-hidden 으로 감춤 ─────────────── */
.xrv-news__side-page.is-hidden {
  display: none;
}

/* ── 사이드바 내비게이션 바 (메인 카드 .xrv-news__nav 와 동일 패턴) ──── */
.xrv-news__side-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;  /* 메인 도트와 수직 정렬: 남은 공간 흡수해 항상 하단에 배치 */
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ── 빈 상태 메시지 ──────────────────────────────────────────────────────── */
.xrv-news__empty {
  color: rgba(238, 240, 246, .33);
  font-size: 0.875rem;
  padding: 40px 20px;
  text-align: center;
  margin: 0;
}

/* ── 반응형 ──────────────────────────────────────────────────────────── */

/* 1100px 이하: 2단 → 1단 (사이드바를 메인 아래로) */
@media (max-width: 1100px) {
  .xrv-news__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .xrv-news__side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* 헤더·페이지·내비 모두 2열 전체 폭으로 — 내비가 페이지 옆 2번째 셀에 뜨는 현상 방지 */
  .xrv-news__side-head,
  .xrv-news__side-page,
  .xrv-news__side-nav {
    grid-column: 1 / -1;
  }
}

/* 760px 이하: 좌우 padding 모바일 값 + 기사 카드 수직 전환 + 사이드바 1열 */
@media (max-width: 760px) {
  .xrv-news {
    padding: 30px var(--mha-sec-x-md, 24px) 80px;
  }

  .xrv-news__page {
    min-height: unset;     /* 세로 전환 시 페이지 고정 높이 해제 */
  }

  .xrv-news__card {
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
    height: unset;         /* 세로 전환 시 고정 height 해제 (column 방향에서는 불필요) */
  }

  /* 모바일: flex 비율(1:2)을 해제하고 전체 폭 + 고정 높이로 복귀 */
  .xrv-news__thumb {
    flex: none;
    width: 100%;
    height: 200px;
    min-height: unset;
  }

  /* 모바일: body 도 자연 높이로 복귀 */
  .xrv-news__body {
    flex: 1;
  }

  .xrv-news__side {
    grid-template-columns: 1fr;
  }
}

/* 도트 인디케이터의 자동 전환 진행률 pill-fill 애니메이션(25~31차)은 2026-10-03
   "화살표+점 통합 캡슐" 디자인 교체 작업에서 제거됨 — 새 디자인은 진행률을
   표시하지 않는 단순 active/inactive 점(css/common/xrv-ov-carousel.css 의
   .xrv-ov__dot/.is-active)만 사용한다. 제거된 요소: .is-active::after pill
   채움, @keyframes xrv-news-dot-fill, is-paused 시 애니메이션 정지 규칙.
   자동 전환 자체(js/common/xrv-news-pager.js)는 그대로 유지 — 진행률 "표시"만
   없앤 것이지 전환 기능은 영향 없음. */