/* PickPC 메인 — 배경 영상 위의 홍보 페이지
 *
 * 로드 순서상 마지막입니다: tokens → base → public/styles.css → pickpc-v2.css → 이 파일.
 * pickpc-v2.css 가 body.pickpc-v2 (0,2,1) 로 스코프돼 있으므로 여기서도 body 를 물고
 * 같은 특이도로 맞춘 뒤 순서로 이깁니다.
 *
 * 값은 tokens.css 스케일만 씁니다.
 */

body[data-cine-page] {
  --cine-gutter: var(--space-7);
  --cine-film: #060f14;
  /* sticky 헤더 높이. cinematic.js 가 실측해 덮어씁니다. 앵커가 헤더에 가리지 않게 씁니다. */
  --cine-header-h: 128px;
  /* 읽기 폭.
     tokens 의 --content-width(1520px) 는 관리 화면용이라 랜딩에 쓰면 1440 뷰포트에서
     좌우 여백이 32px 밖에 남지 않아 문단과 카드가 화면을 가로지릅니다.
     랜딩만 따로 잡습니다. --content-width 자체는 다른 표면이 쓰므로 건드리지 않습니다. */
  --cine-measure: min(100% - var(--cine-gutter) * 2, 1200px);
}

/* 랜딩의 모든 콘텐츠 블록은 같은 폭·같은 축에 섭니다.
   헤더·푸터까지 같은 축에 세워야 로고와 헤드라인이 한 줄에 맞습니다.
   (개편 전 1920px 에서 로고 x=30, 헤드라인 x=353 으로 축이 둘이었습니다.) */
body[data-cine-page] .header-shell,
body[data-cine-page] .market-category-nav,
body[data-cine-page] .cine-section > .shell,
body[data-cine-page] .catalog-section > .shell,
body[data-cine-page] .trust-band > .shell,
body[data-cine-page] .process-section > .shell,
body[data-cine-page] .cine-cta__inner,
body[data-cine-page] .site-footer > .shell {
  width: var(--cine-measure);
  margin-inline: auto;
  padding-inline: 0;
}

/* 앵커로 이동했을 때 sticky 헤더 아래에 서도록 실측 높이를 씁니다.
   public/styles.css 는 --header-height(64px) + 64px 로 잡아뒀는데, 헤더가 두 줄(122px)이고
   좁은 화면에서는 세 줄(192px)이라 모자랐습니다. */
body[data-cine-page] #catalog,
body[data-cine-page] #categories,
body[data-cine-page] #processTitle {
  scroll-margin-top: calc(var(--cine-header-h) + var(--space-4));
}

/* ── 브랜드 마크 ──
 * 로고타이프 "PickPC" 의 첫 글자를 마크가 대신합니다.
 * 마크(233.5x307.5)는 위쪽 큰 링("보울", 전체의 73.3%)과 아래로 내려오는 갈고리로 나뉩니다.
 * 맞춰야 할 것은 전체 높이가 아니라 **보울이 옆 글자의 캡과 같은 자리에 오는 것**입니다.
 *
 * 30px / 700 에서 실측한 값 (16배 확대 캡처):
 *   어센더선(i 점·k) 19.94   P 의 캡 22.00 .. 44.19   C 의 캡 21.62 .. 44.62
 *
 * 보울 윗선은 캡이 아니라 **어센더선**에 맞춥니다.
 * 캡에 맞추면 갈고리가 베이스라인 아래로 9px 나 내려가 소문자 p 로 읽혔습니다.
 * 어센더선까지 올리면 마크가 워드마크에서 가장 높은 요소가 되어 대문자처럼 섭니다. */
body[data-cine-page] .brand-mark {
  /* base.css 가 img 를 display: block 으로 두고 있어서 그대로 두면
     마크가 자기 줄을 차지하고 "ickPC" 가 아래로 떨어집니다. */
  display: inline-block;
  width: auto;
  /* 보울이 전체의 73.3% 이므로 보울 23.0px 를 얻으려면 전체 31.4px = 1.046em. */
  height: 1.046em;
  margin-right: 0.02em;
  /* vertical-align: baseline 은 이미지 **아래 끝**을 베이스라인에 붙입니다.
     이 마크는 아래 끝이 갈고리라 그만큼 내려앉혀야 하는데, 보울 윗선을 어센더선에
     세우려면 거기서 다시 조금 올립니다. 결과로 갈고리는 베이스라인 아래 7.5px. */
  translate: 0 0.255em;
  vertical-align: baseline;
}

/* ── 상단바 ──
 * 고정폭 그리드(374px / minmax(420px,584px) / 1fr)라 1200~1400px 구간에서
 * .entry-nav 가 자기 칸을 넘쳐 검색창 위로 겹쳤습니다.
 * 브랜드와 계정 메뉴는 필요한 만큼 가져가고 검색창이 줄어들게 바꿉니다. */
body[data-cine-page] .header-shell {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-6);
}

body[data-cine-page] .entry-nav {
  min-width: 0;
  flex-wrap: nowrap;
}

body[data-cine-page] .header-search {
  min-width: 0;
}

/* 좁아지면 브랜드 부제와 계정 메뉴 라벨을 접어 검색 폭을 지킵니다. */
@media (max-width: 1180px) {
  body[data-cine-page] .brand small {
    display: none;
  }
}

@media (max-width: 1024px) {
  body[data-cine-page] .entry-nav .entry-link span {
    display: none;
  }
}

/* 760~900px 에서는 한 줄에 브랜드·검색·계정을 다 넣으면 검색창이 430px 까지 눌립니다.
   public/styles.css 가 760px 이하에서 쓰는 2행 배치를 900px 부터 앞당겨 적용합니다. */
@media (max-width: 900px) {
  body[data-cine-page] .header-shell {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-3);
  }

  body[data-cine-page] .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ── 배경 영상 공통 ──
 * 포스터가 먼저 자리를 잡고, 영상이 준비되면 그 위에서 천천히 밝아집니다.
 * 포스터와 영상 첫 프레임이 같은 이미지라 전환이 눈에 띄지 않습니다. */

body[data-cine-page] .cine-poster,
body[data-cine-page] .cine-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 영상은 기본이 "보임" 입니다.
   예전에는 opacity:0 으로 두고 JS 가 data-cine-video="ready" 를 붙여야 보이게 했는데,
   그러면 JS 가 늦거나 실패했을 때 영상이 재생되면서도 투명해 화면에는 안 보입니다.
   실패했을 때만 숨기고 poster 가 그 자리를 지키게 뒤집었습니다. */
body[data-cine-page] .cine-video {
  opacity: 1;
}

/* 소스가 전부 실패해도 요소를 숨기지 않습니다.
   poster 가 video 요소에 붙어 있어서 숨기면 배경이 통째로 사라집니다.
   실패 시에는 브라우저가 poster 를 계속 보여주므로 그대로 두는 게 맞습니다. */

/* ── 메인 히어로 ──
 * public/styles.css 의 고정 높이·절대배치 히어로를 흐름 기반으로 되돌립니다. */

body[data-cine-page] .hero {
  position: relative;
  display: grid;
  height: auto;
  min-height: min(84svh, 780px);
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--cine-film);
  background-image: none;
}

/* 배경 영상. 원본 10초를 자르지 않고 통으로 재생하므로 구도가 계속 바뀝니다.
 *
 * 화면 전체를 cover 로 채우면 좌측 35% 가 카피와 스크림에 덮여 그만큼 버려집니다.
 * 그래서 우측으로 옮기고 contain 으로 프레임 전체를 살립니다.
 * 카드처럼 보이지 않도록 테두리·그림자를 두지 않고, 좌측 가장자리는 마스크로 배경에 녹입니다. */
body[data-cine-page] .hero-stage {
  position: absolute;
  /* 위를 히어로 최상단(= 상단 내비 아래 선)에 붙입니다. */
  top: 0;
  right: 0;
  bottom: auto;
  left: 38%;
  /* 박스를 영상 비율로 잡아 레터박스를 없앱니다.
     contain 으로 두면 박스 위와 그림 위가 어긋나 선이 맞지 않습니다. */
  aspect-ratio: 1440 / 964;
  max-height: 100%;
  z-index: 0;
  overflow: hidden;
  /* 왼쪽과 아래만 배경에 녹입니다. 위쪽은 선을 맞춰야 하므로 페이드하지 않습니다. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 18%, #000 100%),
    linear-gradient(0deg, transparent 0%, #000 14%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 18%, #000 100%),
    linear-gradient(0deg, transparent 0%, #000 14%, #000 100%);
  mask-composite: intersect;
}

body[data-cine-page] .hero-stage .cine-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 박스가 이미 영상 비율이라 잘려나가는 부분이 없습니다. */
  object-fit: cover;
  object-position: center top;
}

/* 영상 위로 아주 옅은 하단 그라디언트만 둡니다.
   카피는 이제 영상 위가 아니라 단색 배경 위에 있으므로 무거운 스크림이 필요 없습니다. */
body[data-cine-page] .hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 14, 20, 0.5) 0%, rgba(5, 14, 20, 0) 34%);
}

/* ── 마무리 마크 ──
 * 영상 마지막에 P 가 멈추면, 그 자리에서 또렷하게 떠올라 우측 빈 공간으로 흘러갑니다.
 * 시작 좌표는 손으로 찍지 않고 영상의 실제 렌더 박스에서 계산합니다. */

body[data-cine-page] .hero-mark {
  position: absolute;
  z-index: 2;
  /* 시작 위치는 영상 속 P 가 실제로 렌더되는 지점입니다.
     영상 박스를 옮기거나 크기를 바꾸면 P 위치도 따라 움직이므로
     cinematic.js 가 영상의 실제 렌더 박스에서 계산해 넣어줍니다. */
  top: var(--mark-start-y, 47%);
  left: var(--mark-start-x, 68%);
  /* 영상 속 P 와 같은 폭으로 뜹니다(cinematic.js 가 영상 렌더 폭 × 0.1556 로 넣어줌).
     PNG 에서 획 바깥 여백을 잘라냈으므로 이 값이 곧 글자 폭입니다.
     JS 가 못 넣었을 때만 뷰포트 기준 근사치로 떨어집니다. */
  width: var(--mark-size, clamp(96px, 9.6vw, 150px));
  height: auto;
  opacity: 0;
  translate: -50% -50%;
  /* 흐릿하고 살짝 크게 시작해 또렷하게 내려앉습니다. */
  scale: 1.16;
  filter: blur(12px);
  pointer-events: none;
  /* top/left 는 전이하지 않습니다. 창 크기를 바꾸면 placeStart() 가 좌표를 다시
     넣는데, 전이가 걸려 있으면 그때마다 마크가 900ms 동안 미끄러집니다. */
  transition:
    opacity 560ms var(--ease-out),
    filter 560ms var(--ease-out),
    scale 560ms var(--ease-out);
}

/* 루프가 처음으로 돌아갈 때는 위치를 되돌리는 과정이 보이면 안 됩니다.
   투명해지는 동안 제자리로 즉시 돌아가게 위치 전이를 끕니다. */
body[data-cine-page] .hero[data-cine-mark="hidden"] .hero-mark {
  transition:
    opacity 360ms var(--ease-out),
    filter 360ms var(--ease-out),
    scale 360ms var(--ease-out);
}

/* 마크가 자리를 잡으면 배경 영상이 스르륵 사라집니다.
   옅게(0.18) 남겨봤더니 흐릿한 케이스·노트북이 얼룩처럼 보이고
   그 안의 원본 P 와 마크가 겹쳐 P 가 둘로 읽혔습니다. 완전히 걷어냅니다. */
body[data-cine-page] .hero-stage .cine-video {
  transition: opacity 900ms var(--ease-out);
}

body[data-cine-page] .hero[data-cine-mark="settled"] .hero-stage .cine-video,
body[data-cine-page] .hero[data-cine-mark="moved"] .hero-stage .cine-video {
  opacity: 0;
}

/* 영상이 사라지는 동안 스크림도 같이 걷어 배경이 단정한 어둠으로 남게 합니다. */
body[data-cine-page] .hero-stage::after {
  transition: opacity 900ms var(--ease-out);
}

body[data-cine-page] .hero[data-cine-mark="settled"] .hero-stage::after,
body[data-cine-page] .hero[data-cine-mark="moved"] .hero-stage::after {
  opacity: 0;
}

/* 1단계 — 영상 속 P 자리에서 또렷하게 떠오릅니다. */
body[data-cine-page] .hero[data-cine-mark="settled"] .hero-mark,
body[data-cine-page] .hero[data-cine-mark="moved"] .hero-mark {
  opacity: 1;
  scale: 1;
  filter: none;
}

/* 2단계 — 그 자리에 그대로 머뭅니다.
 *
 * 원래는 "우측 빈 공간으로 스르륵 이동" 시켰는데, 재보니 **영상 속 P 가 이미
 * 그 빈 공간 한가운데**(우측 여백 중심 1071px, P 중심 1078px)에 있었습니다.
 * 갈 곳이 없으니 이동은 아래로 79px 흘러내리는 동작만 남았고, 그게 화면에서
 * "영상과 이어지지 않고 우측 하단으로 엉성하게 내려가는" 것으로 보였습니다.
 *
 * 그래서 위치 이동을 없앴습니다. P 가 있던 자리에 같은 크기로 또렷해지고,
 * 그 아래에서 영상이 사라집니다. 그게 가장 확실한 "이어짐" 입니다. */

body[data-cine-page] .hero-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--cine-measure);
  height: auto;
  margin-inline: auto;
  gap: var(--space-6);
  padding-inline: 0;
  padding-block: var(--space-8) var(--space-7);
}

body[data-cine-page] .hero-copy {
  position: static;
  display: grid;
  width: min(100%, 620px);
  gap: var(--space-5);
}

/* 영상 위 한 줄 메모. 카드가 아니라 배경 위에 얹힌 라벨입니다. */
body[data-cine-page] .hero-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

body[data-cine-page] .hero-note__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-selected-fill);
}

/* ── 용도 칩 ──
 * 누르면 아래 카탈로그를 실제로 검색합니다. */

body[data-cine-page] .hero-picker {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

body[data-cine-page] .hero-picker__label {
  color: var(--color-text-subtle);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

body[data-cine-page] .hero-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

body[data-cine-page] .hero-chip {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-5);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  transition: var(--interaction-transition);
}

body[data-cine-page] .hero-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
  transform: translateY(-1px);
}

body[data-cine-page] .hero-chip[aria-pressed="true"] {
  border-color: var(--color-selected-line);
  background: var(--color-selected-fill);
  color: var(--color-primary);
}

body[data-cine-page] .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

body[data-cine-page] .hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-primary);
}

body[data-cine-page] .hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: var(--weight-bold);
}

body[data-cine-page] .hero-description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
}

body[data-cine-page] .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* 보증 항목과 통계는 절대배치를 버리고 흐름 안으로 들어옵니다.
   개편 전 두 요소가 가로 44px 겹치던 결함이 여기서 사라집니다. */
/* 보증 항목과 마켓 현황은 두 단 아래에 폭 전체로 깔립니다.
   개편 전 두 요소가 가로 44px 겹치던 결함이 여기서 사라집니다. */
body[data-cine-page] .hero-assurances {
  position: static;
  display: grid;
  /* styles.css 의 width: 760px 는 절대배치 히어로 시절 값입니다. 흐름 배치에서는 폭 전체를 씁니다. */
  width: 100%;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-cine-page] .hero-assurances li {
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: var(--interaction-transition);
}

body[data-cine-page] .hero-assurances li:hover {
  border-color: var(--color-selected-line);
  background: var(--color-surface-raised);
  transform: translateY(-1px);
}

body[data-cine-page] .hero-market-stats {
  position: static;
  display: grid;
  width: 100%;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-canvas-soft);
}

/* "최근 업데이트" 값은 로케일 날짜라 길어집니다. styles.css 가 dd 를
   nowrap + ellipsis 로 잡아둬서, 390px 2단(칸 131px)에서는 날짜가 "…" 로
   통째로 사라졌습니다. 좁을 때만 두 줄로 접어 값을 살립니다. */
@media (max-width: 600px) {
  body[data-cine-page] .hero-market-stats dd {
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* ── 카테고리 타일 ──
 * 상단 탭 "카테고리"·"인기 PC" 가 도착하는 곳. 누르면 아래 카탈로그를 실제로 검색합니다. */

body[data-cine-page] .cine-category-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

body[data-cine-page] .cine-category {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: var(--interaction-transition);
}

body[data-cine-page] .cine-category svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

body[data-cine-page] .cine-category strong {
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
}

body[data-cine-page] .cine-category span {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

body[data-cine-page] .cine-category:hover {
  border-color: var(--color-selected-line);
  background: var(--color-surface-raised);
  transform: translateY(-1px);
}

body[data-cine-page] .cine-category[aria-pressed="true"] {
  border-color: var(--color-selected-line);
  background: var(--color-selected-fill);
}

/* ── 상품 카드 ── */

/* 사양이 한 줄로 잘려 "AMD Ryzen 9 795…" 처럼 끝이 사라졌습니다. 두 줄까지 보여줍니다.
   .product-card-content 가 height:140px + overflow:hidden 으로 고정돼 있어
   그대로 두면 늘어난 사양이 제목을 위로 밀어 잘라먹습니다. 내용에 맞춰 자라게 풉니다. */
body[data-cine-page] .product-card-content {
  height: auto;
  min-height: 0;
  gap: var(--space-2);
  overflow: visible;
}

body[data-cine-page] .product-specification {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-overflow: clip;
}

/* 제목도 두 줄까지 허용해 긴 모델명이 잘리지 않게 합니다. */
body[data-cine-page] .product-card h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  text-overflow: clip;
}

/* 카드 높이가 제각각이면 그리드가 지저분해지므로 셀에 맞춰 늘립니다. */
body[data-cine-page] .public-product-grid .product-card {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

body[data-cine-page] .product-card-footer {
  margin-top: auto;
}

/* 카드 전체가 클릭되게 합니다. 지금은 우측 화살표 버튼만 링크라 카드를 눌러도 반응이 없어
   기대와 어긋납니다. 기존 링크를 카드 전체로 넓히는 방식이라 마크업은 그대로입니다. */
body[data-cine-page] .product-card {
  position: relative;
}

body[data-cine-page] .product-card .product-card-footer .icon-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* 카드 어디를 눌러도 되지만, 마우스 커서는 링크 위에서만 바뀌지 않게 카드 전체에 줍니다. */
body[data-cine-page] .product-card:hover {
  cursor: pointer;
}

/* 카드에 포커스가 들어오면 카드 전체가 선택된 것처럼 보이게 합니다. */
body[data-cine-page] .product-card:has(.icon-button:focus-visible) {
  border-color: var(--color-selected-line);
  box-shadow: var(--shadow-lift);
}

/* ── 이용 흐름 ──
 * 순서가 있는 3단계인데 번호가 없어 그냥 나열로 읽혔습니다.
 * 마크업은 이미 <ol> 이므로 카운터로 번호를 붙입니다. */

body[data-cine-page] .process-list {
  counter-reset: pickpc-step;
}

body[data-cine-page] .process-list li {
  counter-increment: pickpc-step;
  position: relative;
}

body[data-cine-page] .process-list li > div::before {
  content: counter(pickpc-step);
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-selected-fill);
  color: var(--color-primary);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* 섹션 제목 크기를 카탈로그 쪽과 맞춥니다. */
body[data-cine-page] .process-shell h2,
body[data-cine-page] .section-heading h2 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

/* 신뢰 밴드가 푸터 띠처럼 눌려 보여 위아래를 조금 열어줍니다. */
body[data-cine-page] .trust-list {
  padding-block: var(--space-6);
}

/* ── 마지막 CTA ──
 * 두 번째 배경 영상을 얕게 깔고 그 위에 문구를 얹습니다. */

body[data-cine-page] .cine-cta {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  background-color: var(--cine-film);
}

body[data-cine-page] .cine-cta__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

body[data-cine-page] .cine-cta__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 14, 20, 0.86) 0%, rgba(5, 14, 20, 0.72) 50%, rgba(5, 14, 20, 0.9) 100%);
}

body[data-cine-page] .cine-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  padding-block: clamp(72px, 8vw, 120px);
  text-align: center;
}

body[data-cine-page] .cine-cta h2 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(26px, 4vw, 48px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

body[data-cine-page] .cine-cta p {
  max-width: 46ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lead);
}

body[data-cine-page] .cine-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* ── 푸터 ──
 * 제일 하단에는 마크만 둡니다. public/styles.css 의 flex 배치를 가운데 정렬로 되돌립니다. */

body[data-cine-page] .site-footer .shell {
  display: grid;
  min-height: 0;
  justify-items: center;
  padding-block: var(--space-7);
}

body[data-cine-page] .site-mark {
  width: auto;
  height: 44px;
  opacity: 0.9;
  transition: opacity var(--duration-base) var(--ease-out);
}

body[data-cine-page] .site-mark:hover {
  opacity: 1;
}

/* 카테고리 내비는 원래 overflow-x: auto 라 스크롤은 되지만 잘린 티가 나지 않습니다.
   넘칠 때만 오른쪽을 페이드해 "더 있다"를 보여줍니다. */
@media (max-width: 1080px) {
  body[data-cine-page] .hero-assurances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-cine-page] .market-category-nav {
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
}

/* ══ 마감 손질 ══
 * 여기까지가 구조이고, 아래는 "안 깨진 화면"을 "만든 화면"으로 만드는 부분입니다.
 * 직접 띄워놓고 본 뒤에 잡은 세 가지입니다. */

/* ── 1. 히어로가 통짜 검정이라 비어 보이는 문제 ──
 *
 * 영상이 11.25초에 멈추고 사라지면 우측 62% 가 단색 #060f14 로 남습니다.
 * 마크 하나만 떠 있으면 "여백"이 아니라 "덜 만든 자리"로 읽힙니다.
 *
 * 결(도트)과 빛(앰비언트)을 배경에 깝니다. 둘 다 `background-image` 라
 * 요소 내용보다 항상 아래에 그려집니다. z-index 를 건드릴 일이 없습니다. */
body[data-cine-page] .hero {
  background-color: var(--cine-film);
  background-image:
    /* 아주 옅은 도트. 검정이 "면"이 아니라 "재질"이 됩니다. */
    radial-gradient(circle, rgba(126, 231, 199, 0.055) 1px, transparent 1.6px),
    /* 우상단 앰비언트. 영상이 있던 쪽에 온기를 남겨 사라진 티를 덜어냅니다. */
    radial-gradient(122% 92% at 82% 6%, rgba(26, 92, 84, 0.32) 0%, transparent 58%);
  background-repeat: repeat, no-repeat;
  background-size: 28px 28px, auto;
}

/* 마크 주변에 앰비언트 원을 깔아봤지만 촌스러워서 걷어냈습니다.
   벡터 마크가 또렷해진 뒤로는 배경 결(위 .hero background-image)만으로 충분합니다. */

/* ── 2. 상품 6개가 사진 한 장을 돌려쓰는 문제 ──
 *
 * 6장 전부 `catalog-workstation.png` 입니다. 같은 프레임이 6번 반복되면
 * 카드가 아니라 벽지 무늬로 보입니다. 데이터를 바꿀 수는 없으니
 * **크롭 지점과 배율을 카드마다 다르게** 잡아 반복을 끊습니다.
 * 같은 사진의 다른 부분이라 거짓말은 아니고, 그리드는 6개 상품으로 읽힙니다. */
body[data-cine-page] .public-product-grid .product-card-media img {
  object-position: var(--shot-pos, 50% 50%);
  scale: var(--shot-zoom, 1);
  /* 배율만으로는 둘째 줄 셋이 여전히 닮아 보였습니다. 조명도 카드마다 틀어줍니다. */
  filter: var(--shot-light, none);
  transition: scale 420ms var(--ease-out);
}

body[data-cine-page] .public-product-grid .product-card:hover .product-card-media img {
  scale: calc(var(--shot-zoom, 1) * 1.05);
}

/* 크롭 위에 얹는 빛의 각도와 색조도 카드마다 틀어줍니다.
   색조는 민트(165) 둘레 150~200 안에서만 움직여 브랜드를 벗어나지 않습니다. */
body[data-cine-page] .public-product-grid .product-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      var(--shot-angle, 200deg),
      hsl(var(--shot-tint, 165) 62% 46% / 0.28) 0%,
      transparent 54%
    ),
    linear-gradient(0deg, rgba(5, 14, 20, 0.74) 0%, rgba(5, 14, 20, 0) 48%);
}

/* 위 오버레이가 배지를 덮지 않게 배지를 한 겹 올립니다. */
body[data-cine-page] .public-product-grid .product-media-badges {
  z-index: 2;
}

body[data-cine-page] .public-product-grid .product-card:nth-child(6n + 1) {
  --shot-pos: 12% 38%;
  --shot-zoom: 1.06;
  --shot-light: brightness(1.06) saturate(0.92);
  --shot-tint: 165;
  --shot-angle: 210deg;
}
body[data-cine-page] .public-product-grid .product-card:nth-child(6n + 2) {
  --shot-pos: 68% 30%;
  --shot-zoom: 1.34;
  --shot-light: brightness(0.92) saturate(1.18);
  --shot-tint: 193;
  --shot-angle: 152deg;
}
body[data-cine-page] .public-product-grid .product-card:nth-child(6n + 3) {
  --shot-pos: 40% 72%;
  --shot-zoom: 1.16;
  --shot-light: brightness(1.02) saturate(1.04) hue-rotate(-8deg);
  --shot-tint: 150;
  --shot-angle: 242deg;
}
body[data-cine-page] .public-product-grid .product-card:nth-child(6n + 4) {
  --shot-pos: 90% 48%;
  --shot-zoom: 1.24;
  --shot-light: brightness(0.88) saturate(1.1);
  --shot-tint: 200;
  --shot-angle: 182deg;
}
body[data-cine-page] .public-product-grid .product-card:nth-child(6n + 5) {
  --shot-pos: 4% 64%;
  --shot-zoom: 1.44;
  --shot-light: brightness(1.1) saturate(0.86);
  --shot-tint: 172;
  --shot-angle: 236deg;
}
body[data-cine-page] .public-product-grid .product-card:nth-child(6n + 6) {
  --shot-pos: 52% 16%;
  --shot-zoom: 1.10;
  --shot-light: brightness(0.96) saturate(1.22) hue-rotate(6deg);
  --shot-tint: 184;
  --shot-angle: 168deg;
}

/* ── 3. 4열에 상품 6개라 둘째 줄이 반쯤 뚫리는 문제 ──
 *
 * 4열이면 4 + 2 로 끊겨 우측에 카드 두 칸이 통째로 빕니다.
 * 3열이면 2줄이 정확히 찹니다. 카드도 282px → 384px 로 커져
 * 사양 두 줄과 가격이 훨씬 편하게 앉습니다. */
@media (min-width: 1081px) {
  body[data-cine-page] .public-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── 카테고리 타일에 손잡이 달기 ──
 * 여섯 개가 똑같은 사각형이라 누를 수 있는 물건으로 안 보였습니다. */
body[data-cine-page] .cine-category {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(126, 231, 199, 0.045) 0%, transparent 58%),
    var(--color-surface);
}

body[data-cine-page] .cine-category::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

body[data-cine-page] .cine-category:hover::before,
body[data-cine-page] .cine-category[aria-pressed="true"]::before {
  opacity: 1;
}

/* ── 모바일 ── */

@media (max-width: 760px) {
  body[data-cine-page] {
    --cine-gutter: var(--space-5);
  }

  /* 좁은 화면에서는 카피가 폭 전체를 쓰므로 마크가 글자 위에 겹칩니다. 내립니다. */
  body[data-cine-page] .hero-mark {
    display: none;
  }

  /* 보증 항목을 2열로 접어 히어로가 세로로 늘어지지 않게 합니다. */
  body[data-cine-page] .hero-assurances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  body[data-cine-page] .hero-assurance-copy span {
    display: none;
  }
}

/* 마켓 현황 값("8. 6. 오전 09:00")이 잘리던 문제 —
   좁은 폭에서는 4열을 2열로 줄여 값을 온전히 보여줍니다.
   1열까지 내리면 4행이 되어 히어로가 세로로 늘어지므로 2열에서 멈춥니다. */
@media (max-width: 900px) {
  body[data-cine-page] .hero-market-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 모션 축소 ──
 * 영상을 붙이지 않으므로 포스터가 그대로 배경이 됩니다. 전환도 없앱니다. */

@media (prefers-reduced-motion: reduce) {
  body[data-cine-page] .cine-video {
    transition: none;
  }

  /* 기본 좌표가 곧 최종 좌표라 위치를 덮을 게 없습니다. 떠오르는 연출만 끕니다. */
  body[data-cine-page] .hero-mark {
    opacity: 1;
    scale: 1;
    filter: none;
    transition: none;
  }
}