/*
 * WEB-03 작품 팝업 — design/project/ContentPopup.dc.html 그대로.
 * 2열(포스터+스틸 / 정보) · 크레딧 박스(전체 폭, 맨 위) · 제목+메타(왼쪽)와 QR 블록(오른쪽)이 한 줄
 * · 알약 3 · 줄거리(전체 폭) · 버튼 2개(가운데 정렬) · 캐러셀(큰 카드 · 겹치는 원형 화살표).
 * @TASK POPUP-LAYOUT-2 - 대표 시안(images/4.png)대로 재배치.
 * @TASK POPUP-LAYOUT-2c - PC 다이얼로그 폭을 70%로 축소(포스터·QR·캐러셀 카드·코드 글자도 비례 축소).
 * 색은 전부 tokens.css 의 var(--…) 만 씁니다.
 */
.content-popup {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

/* content_popup_controller.js#connect 가 초점 가둠을 위해 이 div(role=dialog · tabindex=-1) 를
   this.element.focus() 로 직접 포커스합니다. 화면 전체(inset:0)가 포커스를 받으므로
   전역 *:focus-visible 외곽선(application.css)이 뷰포트 가장자리에 테두리로 그려집니다 —
   안쪽 버튼·링크의 포커스 링(:focus-visible)은 그대로 두고, 이 컨테이너 자신만 없앤다. */
.content-popup:focus,
.content-popup:focus-visible {
  outline: none;
}

.content-popup__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.content-popup__dialog {
  position: relative;
  z-index: 1;
  /* PC 화면 폭 축소(POPUP-LAYOUT-2c) — 이전 폭(뷰포트 92% · 최대 1500px)의 약 70% */
  width: min(64vw, 1050px);
  max-width: 1050px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  background: var(--color-background);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-lg);
}

.content-popup__topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-4) var(--space-5) 0;
}

.content-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.content-popup__close:hover {
  background: var(--color-line);
}

.content-popup__body {
  display: grid;
  /* minmax(0, 1fr) — 그냥 1fr 이면 트랙의 최소 크기가 "auto"(포스터 이미지 실제 크기)로 잡혀
     좁은 화면에서 포스터가 옆으로 넘칩니다(min-content 오버플로 버그). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-2) var(--space-8) var(--space-6);
}

@media (min-width: 900px) {
  .content-popup__body {
    /* 포스터 열도 다이얼로그 폭과 같은 비율로 축소(440px → 310px, POPUP-LAYOUT-2c) */
    grid-template-columns: 310px minmax(0, 1fr);
    gap: var(--space-6);
  }
}

.content-popup__poster,
.content-popup__info {
  min-width: 0;
}

/* 왼쪽: 큰 포스터 + 스틸 캐러셀 */
.content-popup__poster-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--tint-1);
}

.content-popup__poster-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-popup__sign-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-text) 85%, transparent);
  color: var(--color-background);
  font-size: var(--font-size-caption);
}

.content-popup__stills-header {
  margin-top: var(--space-3);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.content-popup__stills {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.content-popup__still {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--space-2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--tint-4);
  cursor: pointer;
}

.content-popup__still.is-active {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.content-popup__still-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 오른쪽: 함께한 사람들 · 제목 · 메타 · 배지 · 줄거리 · 버튼 */
.content-popup__credits {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  font-size: var(--font-size-caption);
}

.content-popup__credits-heading {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.content-popup__credits-line {
  margin: 0;
  display: flex;
  gap: var(--space-3);
}

.content-popup__credits-label {
  flex: 0 0 auto;
  width: 48px;
  color: var(--color-text-muted);
}

/* 서포터가 20명을 넘으면 [더보기] 로 나머지를 아래로 펼칩니다(라벨 칸만큼 들여 씀) */
.content-popup__credits-more {
  margin: var(--space-1) 0 0 calc(48px + var(--space-3));
}

.content-popup__credits-more-button {
  display: inline-block;
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.content-popup__credits-line--more {
  margin-top: var(--space-2);
}

/* 제목 + 메타(왼쪽) · QR 블록(오른쪽)을 한 줄로(POPUP-LAYOUT-2) — 좁은 화면에서는 세로로 쌓인다 */
.content-popup__header-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

@media (min-width: 640px) {
  .content-popup__header-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.content-popup__meta-column {
  min-width: 0;
  flex: 1 1 auto;
}

.content-popup__title {
  margin: 0;
  font-size: var(--font-size-title-lg);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.content-popup__original-title {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.content-popup__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-body);
}

.content-popup__meta li {
  display: flex;
  gap: var(--space-3);
  color: var(--color-text);
}

.content-popup__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.content-popup__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  line-height: 18px;
}

.content-popup__badge--paid {
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
}

.content-popup__badge--free {
  background: var(--color-surface);
  color: var(--color-text);
}

.content-popup__description {
  margin: var(--space-4) 0 0;
  line-height: 1.6;
}

.content-popup__more {
  margin-left: var(--space-1);
  border: none;
  background: none;
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  padding: 0;
}

/* 제목/메타 옆 QR 블록(POPUP-LAYOUT-2) — 카드 테두리 없이 떠 있는 모양.
   "앱으로 QR 동기화" 라는 이름은 시각적으로는 감추고 aria-label 로만 남긴다(접근성 이름 유지).
   QR 자체 모양(이미지·6자리 코드·새 QR 받기)은 content-detail__qr-* 를 그대로 재사용하고,
   ContentDetail::QrSectionComponent 의 layout: :popup 변형(아래 블록)으로 크기만 바꾼다. */
.content-popup__qr-card {
  /* QR · 안내 · 코드 · 유효 시간 · [1분 샘플 보기]를 한 폭으로 가운데 맞춥니다(2026-10-01) */
  --popup-qr-size: 220px;
  flex: 0 0 var(--popup-qr-size);
  width: var(--popup-qr-size);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

/* content-detail__qr-section--popup — QrSectionComponent(layout: :popup) 전용 변형.
   기본 카드 모양(WEB-02·WEB-14, application.css)은 그대로 두고 팝업에서만 세로 배치·큰 글자로 바꾼다. */
.content-detail__qr-section--popup {
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.content-detail__qr-section--popup .content-detail__qr-image {
  /* QR 그림이 스스로 흰 여백(4칸)과 흰 바탕을 가지므로 칸에는 여백 · 바탕을 주지 않고 열 폭에 꼭 맞춥니다 */
  width: var(--popup-qr-size, 220px);
  height: var(--popup-qr-size, 220px);
  padding: 0;
  background: none;
}

.content-detail__qr-section--popup .content-detail__qr-info {
  min-width: 0;
  width: 100%;
  text-align: center;
}

.content-detail__qr-section--popup .content-detail__qr-instruction {
  margin-bottom: var(--space-1);
}

.content-detail__qr-section--popup .content-detail__qr-code {
  /* 코드 글자 크기도 같은 비율로 축소(약 70%) */
  font-size: calc(var(--font-size-title-xl) * 0.7);
  letter-spacing: 0.08em;
}

.content-detail__qr-section--popup .content-detail__qr-footer {
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
}

.content-detail__qr-section--popup .content-detail__qr-footer > * {
  line-height: 1.4;
}

/* QR 열 안의 단추 영역 — 열 폭에 꼭 맞게 */
.content-popup__qr-card .content-popup__actions {
  margin-top: 0;
  align-items: stretch;
}

.content-popup__qr-card .content-popup__action-row,
.content-popup__qr-card .content-popup__action-button {
  width: 100%;
}

.content-popup__qr-card .content-popup__action-button {
  box-sizing: border-box;
  padding: 0 var(--space-3);
}

/* 버튼 2개(또는 요청 단추)를 가운데 정렬(POPUP-LAYOUT-2) */
.content-popup__actions {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.content-popup__action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.content-popup__action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 var(--space-6);
  border-radius: var(--radius-card);
  text-decoration: none;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.content-popup__action-button--primary {
  background: var(--color-primary-pressed);
  color: var(--color-background);
  border: 1px solid var(--color-primary-pressed);
}

.content-popup__action-button--primary:hover {
  background: var(--color-indigo-900);
}

.content-popup__action-button--outline {
  border: 1px solid var(--color-line);
  color: var(--color-text);
}

.content-popup__request-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* 하단: 이전/다음 작품 캐러셀 */
.content-popup__related {
  padding: var(--space-4) var(--space-8) var(--space-6);
  border-top: 1px solid var(--color-surface);
}

/* 제목은 화면에는 감추고 스크린리더용으로만 남긴다(sr-only) — 시안에 보이는 제목 텍스트가 없다 */
.content-popup__related-heading {
  margin: 0;
}

/* 카드 트랙 — 좌우 화살표 버튼이 이 트랙의 좌우 끝에 겹쳐 앉는다 */
.content-popup__related-track {
  position: relative;
}

.content-popup__related-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border: none;
  border-radius: 50%;
  background: var(--color-background);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transform: translateY(-50%);
}

.content-popup__related-button--prev {
  left: -24px;
}

.content-popup__related-button--next {
  right: -24px;
}

/* 캐러셀 맨 앞 · 맨 끝에 닿으면 그쪽 화살표를 색+커서+흐림 3중으로 비활성 표시(POPUP-RELATED-24) */
.content-popup__related-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.content-popup__related-list {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
}

.content-popup__related-item {
  flex-shrink: 0;
  /* 다이얼로그 폭 축소에 맞춰 비례 축소(150px → 105px, POPUP-LAYOUT-2c) — 보이는 장수는 줄어도 된다 */
  width: 105px;
}

.content-popup__related-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.content-popup__related-thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--tint-3);
}

.content-popup__related-item.is-current .content-popup__related-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.content-popup__related-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-popup__related-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.content-popup__related-current-chip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-1);
  background: var(--color-primary);
  color: var(--color-background);
  font-size: 10px;
  text-align: center;
}

.content-popup__related-title {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  text-align: center;
  /* 카드 아래 가운데 정렬로 2줄까지 허용하고, 그 이상은 자른다 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 폰(390) — 팝업을 위쪽만 둥근 전체 화면 시트로 바꾼다(내용은 안에서 스크롤). */
@media (max-width: 640px) {
  .content-popup {
    padding: 0;
    align-items: flex-end;
  }

  .content-popup__dialog {
    width: 100%;
    max-width: 100%;
    /* 100vh 는 모바일 브라우저 주소창 높이만큼 밀려서 아래쪽이 잘리므로 100dvh(작은 뷰포트 기준)를 쓴다. */
    height: 100dvh;
    max-height: 100dvh;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 닫기 버튼은 스크롤해도 위에 고정 */
  .content-popup__topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-background);
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }

  .content-popup__related {
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }

  /* QR 블록은 메타 아래에 가운데(POPUP-LAYOUT-2) */
  .content-popup__qr-card {
    align-self: center;
  }

  .content-detail__qr-section--popup {
    align-items: center;
    text-align: center;
  }
}

/* 1분 샘플 영상 창(sample_player_controller.js · 2026-10-01) — 작품 팝업 위에 바로 뜹니다.
   세로(9:16) 수어 영상이 화면 높이에 맞게 들어가도록 높이 기준으로 크기를 정합니다. */
.sample-player {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.sample-player__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 70%);
}

.sample-player__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: calc(100vh - 2 * var(--space-4));
  padding: var(--space-4);
  border-radius: var(--radius-card);
  /* 영상 둘레는 어느 테마에서나 검정(시네마 테마에서 회색 단계가 뒤집혀도 그대로) */
  background: var(--color-background-dark);
}

.sample-player__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sample-player__title {
  margin: 0;
  color: var(--color-grey-50);
  font-weight: var(--font-weight-bold);
}

.sample-player__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--color-grey-700);
  color: var(--color-grey-50);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.sample-player__close:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.sample-player__video {
  display: block;
  height: min(72vh, 760px);
  max-width: calc(100vw - 4 * var(--space-4));
  border-radius: var(--radius-card);
  /* 영상 둘레는 어느 테마에서나 검정(시네마 테마에서 회색 단계가 뒤집혀도 그대로) */
  background: var(--color-background-dark);
}

.sample-player__message {
  min-width: 260px;
  margin: var(--space-6) 0;
  color: var(--color-grey-200);
  text-align: center;
}

/* QR 자리의 [수어통역 요청](수어 영상이 아직 없는 작품 · 비회원도 · 2026-10-01) — 열 폭에 꼭 맞게 */
.content-popup__qr-card .content-request {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  text-align: center;
}

.content-popup__qr-card .content-request form,
.content-popup__qr-card .content-request__button {
  width: 100%;
}

.content-popup__qr-card .content-popup__request-info {
  text-align: left;
}

.content-popup__guest-hint {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: 1.5;
  text-align: left;
}