/* ══════════════════════════════════════════════════════════════════════
   공용 Overview 캐러셀 컴포넌트 (.xrv-ov__carousel)
   ─ metahoop_arena_index.html, ax_dx_robot_index.html 등 layouts/homepage/base.html
     을 extends 하는 모든 홈페이지에서 공유. 페이지 전용 색상/여백을 덮어써야
     한다면 해당 페이지의 layout_*.css 에서 이 파일 로드 *이후* 순서로 재정의할 것
     (base.html 공통 CSS 블록 → 페이지별 base_css 블록 순서라 페이지 CSS가 이긴다).
   ─ 마크업/데이터: homepage_carousel_cards 테이블(section_key로 섹션 구분) →
     각 페이지 라우트가 dao.list_active_by_section(...) 로 조회해 Jinja
     {% for card in ... %} 로 렌더링. 관리자 화면: admin/main/application/homepage_new.html
   ─ 스크립트: js/common/xrv-ov-carousel.js — document 내 .xrv-ov__carousel 요소를
     각각 독립적으로 찾아 초기화(자동 회전/스와이프/도트 등 인스턴스별 상태 분리).
   ══════════════════════════════════════════════════════════════════════ */

.xrv-ov__carousel {
  position:  relative;
  /* 반응형 노출 카드 수 (JS가 읽어서 슬라이드 계산에 사용) */
  --ov-vis: 2;
  --ov-gap: 12px;
}

/* 트랙 클리핑 영역 */
.xrv-ov__track-wrap {
  overflow:      hidden;
  border-radius: 14px;
}

/* 슬라이드 트랙 */
.xrv-ov__track {
  display:    flex;
  gap:        var(--ov-gap);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* ── 카드 (2026-10-03, Apple 스타일 캡션 레이아웃으로 교체) ────────────────
   기존엔 이미지/영상 전체에 하단 비네트 그라데이션을 깔고 그 위에 제목·설명·
   버튼을 absolute 오버레이로 얹는 "히어로 카드" 방식이었음 — 이번 요청으로
   이미지는 텍스트 없이 그대로 보여주고(.xrv-ov__media), 제목/설명/버튼은
   이미지 "아래" 일반 텍스트 캡션(.xrv-ov__card-body)으로 분리. 버튼은 그대로
   유지하기로 결정(Option A, 2026-10-03 확인) — 캡션 영역 안에서 기존 pill
   버튼 스타일을 그대로 재사용. 이미지가 더 이상 텍스트를 받치지 않으므로
   비네트 그라데이션(.xrv-ov__stat::before)은 완전히 삭제, "카드 전체가
   클릭 영역"이던 stretched-link(::after)도 제거하고 버튼 자체만 링크로
   동작하게 함(옵션 A를 선택한 이상 "카드 전체 클릭"은 옵션 B의 동작이라
   혼선을 줄 수 있어 제외). */
.xrv-ov__stat {
  flex:           0 0 calc((100% - (var(--ov-vis) - 1) * var(--ov-gap)) / var(--ov-vis));
  min-width:      0; /* 플렉스 아이템 기본값(auto)은 자손의 min-content 폭을 넘지 못하게
    막는데, 50차에서 타이틀/부제목/설명에 white-space:nowrap 을 걸면서 긴 텍스트의
    "줄바꿈 없는 한 줄" min-content 폭이 그대로 이 카드(.xrv-ov__track 의 flex
    아이템)까지 전파되어 flex-basis 를 무시하고 카드 전체가 텍스트 길이만큼 넓게
    부풀어버리는 버그가 있었다(2026-10-03 발견 — 설명이 짧은 카드/사이트에서는
    안 보이다가 긴 설명이 들어간 카드에서만 드러남). */
  position:       relative;
  display:        flex;
  flex-direction: column;
}

/* 미디어(이미지/영상) 영역 — 2:1 고정 비율 박스(2026-10-03, 관리자가 올리는
   원본 이미지/영상 비율이 제각각이라 카드마다 높이가 들쭉날쭉해 보였던 문제 —
   원본 비율은 그대로 두고 노출 컨테이너만 2:1로 고정 + object-fit:cover 로
   크롭해 어떤 비율을 올리든 카드 모양이 항상 통일되게 함), 톤다운용 어두운
   오버레이(::after) 추가 — 더 이상 텍스트를 이미지 위에 얹지 않으므로(47차)
   가독성용 강한 그라데이션이 아니라 전체를 고르게 살짝 어둡게 하는 단일
   톤(rgba(0,0,0,.18))만 깐다. */
.xrv-ov__media {
  position:      relative;
  overflow:      hidden;
  border-radius: 14px;
  aspect-ratio:  2 / 1;
  /* 0단계 조사(2026-10-03) 결과 이 요소엔 원래 border/outline 이 전혀 없었음
     — 호버 시 추가되는 DETAIL 링크(.xrv-ov__media-detail)가 혹시라도 기본
     브라우저 포커스 테두리 등으로 테두리가 생겨 보이는 일이 없도록 명시적으로
     없앤다(링크 자신은 아래에서 별도의 접근성용 포커스 링을 가짐). */
  border:  none;
  outline: none;
}
.xrv-ov__media::after {
  content:        "";
  position:       absolute;
  inset:          0;
  background:     rgba(0, 0, 0, .18);
  pointer-events: none;
}
.xrv-ov__card-bg {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  transition:      transform .42s ease;
}
.xrv-ov__stat:hover .xrv-ov__card-bg {
  transform: scale(1.06);
}

/* ── 이미지 호버 시 블러 + 중앙 DETAIL 버튼 (2026-10-03, 49차 → 50차에서
   유일한 액션으로 통합) ────────────────────────────────────────────────
   49차에서는 캡션 아래 .xrv-ov__detail 버튼과 별개의 "지름길" 링크로
   추가했었으나, 50차에서 중복이라 판단해 캡션 버튼은 완전히 삭제하고 이 호버
   버튼 하나만 남김(텍스트도 하드코딩 "DETAIL" → card.detail_label 로 교체).
   카드/이미지 전체를 감싸는 <a> 는 애초에 없고(47차에서 "카드 전체 클릭"을
   의도적으로 뺐음, Option A) 지금도 새로 만들지 않음 — 대신 이미지 영역 안에
   독립된 <a>(.xrv-ov__media-detail, 캡션 버튼이 쓰던 것과 동일한
   card.detail_url/card.detail_label)를 두고 CSS hover/focus-within
   으로만 노출 — 평소엔 opacity:0 로 숨어 있지만 display:none 이 아니라 DOM/
   접근성 트리에는 항상 존재하므로, 스크린리더는 언제나 접근 가능하고 키보드로
   Tab 이동해 이 링크에 포커스가 오면 :focus-within 이 함께 발동해 시각적으로도
   나타난다(마우스 호버와 동일한 경험) — 지시문 예시의 aria-hidden/tabindex=-1
   고정 처리는 호버로 "보이기만 하고" 키보드로는 영원히 닿을 수 없는 접근성
   회귀를 만들 수 있어 채택하지 않았다. 터치 기기는 hover 가 의미 없으므로
   @media(hover:hover) and (pointer:fine) 로 감싸 블러/버튼 노출 자체를
   아예 발동시키지 않음.
   2026-10-03 후속: 캡션 아래 중복 버튼(.xrv-ov__detail)을 완전히 삭제하면서,
   터치 기기가 더 이상 기댈 하단 버튼이 없어졌다 — 터치에서 상세 링크로 갈
   방법이 아예 사라지는 회귀를 막기 위해, hover 가 없는(@media (hover:none),
   (pointer:coarse)) 환경에서는 이 링크를 "보이지는 않지만(opacity:0) 이미지
   전체를 덮는 투명 탭 영역"으로 바꿔 항상 클릭 가능하게 한다 — 카드는 여전히
   깨끗하게 보이면서, 탭하면 바로 이동. */
.xrv-ov__media-detail {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%) scale(.95);
  z-index:         2;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         10px 26px;
  border:          none;
  border-radius:   999px;
  background:      var(--xrv-carousel-accent, #33E0C4);
  color:           #0d1117;
  font-family:     var(--font-family);
  font-size:       .78rem;
  font-weight:     700;
  letter-spacing:  .12em;
  text-transform:  uppercase;
  text-decoration: none;
  white-space:     nowrap;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity .3s ease, transform .3s ease;
}
.xrv-ov__media-detail:focus-visible {
  outline:        2px solid #fff;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .xrv-ov__card-bg {
    transition: transform .42s ease, filter .3s ease;
  }
  .xrv-ov__media:hover .xrv-ov__card-bg,
  .xrv-ov__media:focus-within .xrv-ov__card-bg {
    filter: blur(4px);
  }
  .xrv-ov__media:hover .xrv-ov__media-detail,
  .xrv-ov__media:focus-within .xrv-ov__media-detail {
    opacity:        1;
    pointer-events: auto;
    transform:      translate(-50%, -50%) scale(1);
  }
}
/* 터치(hover 불가) 기기 전용 — 투명 전체 덮기 탭 영역으로 전환
   (inset:0 이 기본 규칙의 top:50%/left:50% 를 그대로 덮어써 네 변을 모두
   0으로 고정하므로, transform 의 translate(-50%,-50%) 는 더 이상 의미가
   없어져 scale(1)만 남겨 혹시 모를 레이아웃 영향 없이 비워둔다). */
@media (hover: none), (pointer: coarse) {
  .xrv-ov__media-detail {
    inset:          0;
    transform:      none;
    opacity:        0;
    pointer-events: auto;
  }
}

/* 캡션 — 이미지 바로 아래, 좌측 정렬 텍스트 블록(2026-10-03, Apple 설명문구
   스타일 참고 — 기존 중앙 정렬에서 변경). */
.xrv-ov__card-body {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  padding:         18px 8px 0;
  min-width:       0; /* .xrv-ov__stat 의 min-width:0 과 같은 이유 — 체인의 모든
    단계에서 막아야 긴 한 줄 텍스트의 min-content 폭이 카드 바깥까지 전파되지
    않는다. */
}

/* 텍스트 그룹 (상단) */
.xrv-ov__text-group {
  text-align: left;
  width:      100%;
  min-width:  0; /* flex item 에서 자식 text-overflow 가 동작하려면 필수 */
}

/* 타이틀/부제목/설명 — 최대 3줄까지 자연 줄바꿈 허용 후 말줄임(2026-10-03,
   이전엔 nowrap+ellipsis로 1줄 고정이었음 — 요청에 따라 3줄로 완화).
   -webkit-line-clamp 는 블록 레벨 요소(.xrv-ov__stat-n) 기준으로 "렌더링된
   줄 수"를 세는 것이라, 안에 중첩된 인라인 span(부제목/구분자/설명)이 있어도
   전체가 하나의 문단처럼 자연스럽게 줄바꿈되며 3줄을 넘으면 마지막 줄 끝에
   "..." 가 붙는다(nowrap 때와 달리 white-space/text-overflow 는 더 이상
   필요 없음 — line-clamp 전용 속성으로 교체). 폰트 크기는 전부 부제목 크기
   (.92rem)로 통일(54차) — font-weight/color 로만 제목이 구분됨. */
.xrv-ov__stat-n {
  font-family:   var(--font-family);
  font-weight:   600;
  font-size:     .92rem; /* card.subtitle 과 동일 크기로 통일 */
  line-height:   1.3;
  margin-bottom: 6px;
  color:         #33E0C4;
  width:         100%;
  display:             -webkit-box;
  -webkit-box-orient:  vertical;
  -webkit-line-clamp:  3;
  overflow:            hidden;
}
/* 부제목(.xrv-ov__stat-t)은 2026-10-03부터 더 이상 별도 줄(block)이 아니라
   제목(.xrv-ov__stat-n) 안에 "제목 : 부제목" 형태로 같은 줄에 흘러들어가는
   인라인 span 이다(제목/부제목이 각자 줄바꿈되어 두 줄로 보이던 것을 한 줄로
   합쳐달라는 요청) — 그래서 폭/줄바꿈/말줄임 같은 블록 레벨 속성은 필요 없고
   (부모 .xrv-ov__stat-n 의 white-space:nowrap + text-overflow:ellipsis 가
   합쳐진 전체 한 줄에 그대로 적용됨), 글자 크기/색만 제목과 구분되게 유지한다. */
.xrv-ov__stat-t {
  font-family: var(--font-family);
  font-size:   .92rem; /* 기준(×1) */
  color:       #eef0f6;
  font-weight: 400;    /* 기준(×1) */
}
.xrv-ov__stat-sep {
  color:       rgba(238, 240, 246, .4);
  font-weight: 400;
  font-size:   .92rem;
}
/* 설명(.xrv-ov__stat-s)도 2026-10-03 후속 요청으로 부제목과 같은 방식으로
   제목 줄에 이어붙는 인라인 span 으로 전환(기존엔 별도 줄) — 블록 전용
   속성은 전부 제거하고 글자 크기/색만 유지. */
.xrv-ov__stat-s {
  font-size:   .92rem; /* 부제목과 동일(×1) */
  color:       rgba(238, 240, 246, .62);
  font-weight: 400;    /* 부제목과 동일(×1) */
}

/* ── 하단 컨트롤 — 화살표(독립) + 점 캡슐, 진행률 애니메이션 (2026-10-03 수정) ──
   42차에서는 화살표+점을 하나의 캡슐로 통합했으나, 이번 요청으로 캡슐은 점
   그룹에만 적용하고 화살표는 캡슐 밖 독립 버튼으로 분리 — 레이아웃은 [화살표]
   [점 캡슐] [화살표]. 마크업 구조(.xrv-carousel-controls > [arrow, dots,
   arrow])는 42차에서 이미 이 순서로 만들어져 있어 그대로 두고, 캡슐
   배경(background/border-radius/padding)만 바깥 wrapper에서 .xrv-ov__dots
   로 옮기면 되므로 마크업 변경이 필요 없다.
   42차에서 제거했던 자동 전환 진행률 pill-fill 애니메이션도 복원 — 이번엔
   Overview 캐러셀/뉴스 메인 페이저/뉴스 사이드바 페이저 3곳이 전부 같은
   .xrv-ov__dot 클래스를 공유하고, 각자의 JS(xrv-ov-carousel.js/
   xrv-news-pager.js)가 이미 가장 가까운 조상(.xrv-ov__carousel 또는
   .xrv-news__nav/.xrv-news__side-nav)에 --pager-interval 커스텀 프로퍼티를
   설정해두므로(CSS 커스텀 프로퍼티는 자손에 상속) 섹션별로 선택자를 따로
   만들 필요 없이 아래 규칙 하나로 3곳 전부 커버된다 — 기존(25~31차)엔
   xrv-news.css 와 layout_metahoop_index.css 에 사실상 동일한 규칙이
   중복 정의돼 있었는데, 이번에 여기 한 곳으로 통합.
   색상: 프로젝트 전역에 이름 붙은 브랜드 변수가 없어(0단계 확인) 라벨·카드
   타이틀·디테일 버튼 등에서 이미 일관되게 쓰이던 사실상의 accent 색
   #33E0C4 를 컴포넌트 전용 변수로 감싸 재사용 — 화살표 hover·점 활성/진행률
   색을 전부 같은 변수로 묶어 통일. "뉴스룸(사이드바)이 흰 배경"이라는 지시문
   전제는 0단계에서 실제 CSS(.xrv-news__side background: rgba(255,255,255,
   .015), 사실상 투명) 확인 결과 사실이 아니었음 — 뉴스 소식/뉴스룸/주요기능
   전부 동일한 다크 배경 위라 컨텍스트별 색상 분기 없이 하나의 팔레트로
   충분하다. */
:root {
  --xrv-carousel-accent:       #33E0C4;
  --xrv-carousel-fg:           #eef0f6;
  --xrv-carousel-capsule-bg:   rgba(255, 255, 255, .14);
  --xrv-carousel-dot-inactive: rgba(255, 255, 255, .22);
  --xrv-carousel-dot-track:    rgba(255, 255, 255, .22);
}

.xrv-carousel-controls {
  display:     flex;
  width:       fit-content;
  align-items: center;
  gap:         10px;
  margin:      24px auto 0;
}

/* ── 화살표 — 캡슐 밖 독립 버튼 (기존 글래스 버튼 스타일 유지) ──────────── */
.xrv-ov__btn {
  position:        static;
  flex-shrink:     0;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--xrv-carousel-capsule-bg);
  border:          1px solid rgba(255, 255, 255, .14);
  color:           var(--xrv-carousel-fg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background .22s, border-color .22s, color .22s, opacity .22s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:         0;
}
.xrv-ov__btn:hover:not(:disabled) {
  background:   rgba(51, 224, 196, .18);
  border-color: var(--xrv-carousel-accent);
  color:        var(--xrv-carousel-accent);
}
.xrv-ov__btn:focus-visible {
  outline:        2px solid var(--xrv-carousel-accent);
  outline-offset: 2px;
}
.xrv-ov__btn:disabled {
  opacity: .32;
  cursor:  default;
}

/* ── 점 캡슐 — 화살표와 동일한 재질(배경색)·높이(36px) ──────────────────── */
.xrv-ov__dots {
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
  gap:             8px;
  height:          36px;
  background:      var(--xrv-carousel-capsule-bg);
  border:          1px solid rgba(255, 255, 255, .14);
  border-radius:   999px;
  padding:         0 14px;
  box-sizing:      border-box;
}
.xrv-ov__dot {
  position:      relative;
  flex-shrink:   0;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--xrv-carousel-dot-inactive);
  border:        none;
  padding:       0;
  overflow:      hidden;
  cursor:        pointer;
  transition:    background .2s ease, width .2s ease, border-radius .2s ease;
}
.xrv-ov__dot:focus-visible {
  outline:        2px solid var(--xrv-carousel-accent);
  outline-offset: 3px;
  border-radius:  4px;
}
/* 활성 점: 56px 캡슐로 확장 — 진행 채움이 시각적으로 충분히 보이는 폭(D1).
   기존 22px에서 확대(2026-10-10). 폭 전환 ≤ 250ms는 CSS transition 300ms가 커버. */
.xrv-ov__dot.is-active {
  width:         56px;
  border-radius: 3px;
  background:    var(--xrv-carousel-dot-track);
}
.xrv-ov__dot.is-active::after {
  content:          "";
  position:         absolute;
  inset:            0;
  background:       var(--xrv-carousel-accent);
  transform-origin: left center;
  transform:        scaleX(0);
  animation:        xrv-carousel-dot-fill var(--pager-interval, 10000ms) linear forwards;
}
/* is-paused: 사용자 일시정지 / ended 상태(JS가 설정)
   is-vis-paused: 자동 정지(문서 숨김·화면 밖 50% 미만, 아이콘·상태 변경 없음)
   두 클래스 모두 진행률 채움 애니메이션을 멈춤 — animation-play-state:paused는
   완료된 forwards 애니메이션에 영향 없어 ended 상태의 마지막 점은 100% 유지됨. */
.xrv-news__nav.is-paused .xrv-ov__dot.is-active::after,
.xrv-news__side-nav.is-paused .xrv-ov__dot.is-active::after,
.xrv-ov__carousel.is-paused .xrv-ov__dot.is-active::after,
.xrv-ov__carousel.is-vis-paused .xrv-ov__dot.is-active::after {
  animation-play-state: paused;
}
@keyframes xrv-carousel-dot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .xrv-ov__carousel { --ov-vis: 1; }
}
@media (max-width: 480px) {
  .xrv-ov__carousel { --ov-vis: 1; }
}

/* ── prefers-reduced-motion — 채움 애니메이션 비활성 ───────
   JS가 AUTOPLAY=false로 상태 버튼·채움을 이미 숨기지만,
   CSS도 독립적으로 보호해 중간에 enabled 되어도 깜박임 없도록. */
@media (prefers-reduced-motion: reduce) {
  .xrv-ov__dot.is-active::after { animation: none; }
}

/* ── 인쇄 — 컨트롤 숨김 ─────────────────────────────────── */
@media print {
  .xrv-carousel-controls { display: none; }
}

/* ── 카드 제목/설명 분리 타이포 (2026-10-05 리뷰 반영, 세 사이트 공유) ──
   제목(.xrv-ov__stat-n) 20px/700, 설명(.xrv-ov__stat-s) 15px/400/1.65 · 최대 2줄. 부제목은 제목 옆 15px. */
.xrv-ov__stat-n {
  font-size:   20px;
  font-weight: 700;
  line-height: 1.4;
}
.xrv-ov__stat-t {
  font-size: 15px;
  font-weight: 400;
}
.xrv-ov__stat-s {
  display:            -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:           hidden;
  margin:             8px 0 0;
  font-size:          15px;
  font-weight:        400;
  line-height:        1.65;
  color:              #C4C8D0;
}

/* ── 카드 전체 클릭 + 설명 아래 CTA (2026-10-05, 호버 중앙 버튼 제거) ──
   카드마다 detail_url 로 이동. 전체 카드를 덮는 링크 하나만 두어 중첩 링크를 피한다.
   호버 시 이미지 블러는 기존 규칙(.xrv-ov__media:hover .xrv-ov__card-bg) 그대로 유지. */
.xrv-ov__stat {
  position: relative;
}
.xrv-ov__card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.xrv-ov__card-link:focus-visible {
  outline: 2px solid var(--xrv-carousel-accent, #33E0C4);
  outline-offset: -4px;
}
.xrv-ov__card-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--xrv-carousel-accent, #33E0C4);
}