nav {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero {
  padding: 72px 0;
  background: linear-gradient(135deg, #171b26, #292334);
  color: #fff;
}

.hero-btn {
  margin-top: 20px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}
.pill {
  display: inline-block;
  padding: 7px 11px;
  border-radius: 20px;
  background: #ffffff13;
  /* 어두운 히어로 위 보조 라벨. 강조는 아래 h1 em 한 곳이면 충분합니다. */
  color: #c6ccd6;
  font-size: 12px;
  font-weight: 800;
}
.hero h1 {
  margin: 20px 0 16px;
  font-size: 48px;
  line-height: 1.16;
  letter-spacing: -3px;
}
.hero h1 em {
  color: #ff5b6e;
  font-style: normal;
}
.poster-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  transform: rotate(2deg);
}
.poster-stack img:nth-child(2) {
  transform: translateY(-18px);
}
.section {
  padding: 68px 0;
}
/* 콘텐츠ZONE 목록과 같은 포스터 카드입니다. */
.content-grid {
  --card-min: 180px;
  --cards-gap: 15px;
}
.content-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
}
.content-card {
  overflow: hidden;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.thumb {
  display: block;
}

/* 콘텐츠ZONE 카드와 같은 태그 줄입니다. 두 화면이 같은 규칙으로 읽히게 합니다.
   전에는 이 정보가 포스터 위 칩으로 얹혀 있었는데, 같은 자리에 카드마다
   다른 종류가 와서 무엇을 보고 고르는지 읽히지 않았습니다. */
/* 태그 줄은 늘 한 줄입니다. */
.tags {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  overflow: hidden;
  white-space: nowrap;
}
.tag {
  flex: 0 0 auto;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 20px;
  background: #eef1f6;
  color: #4a5666;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  /* 태그 하나가 길면 그 안에서 말줄임 합니다. */
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rank-info b {
  font-size: 15px;
}
.rank-info span {
  display: block;
  margin-top: 5px;
  /* 9px + #7c8591 은 흰 카드에서 대비 3.74:1 로 읽기 어려웠습니다. */
  color: var(--muted);
  font-size: var(--seed-font-size-t2);
  line-height: 1.5;
}
.go:hover {
  border-color: #b9c0cc;
  background: #f7f8fb;
}
.dark {
  background: #191d27;
  color: #fff;
}
/*
 * 어두운 구역 머리. 공용 .section-head 는 밝은 배경 기준이라
 * 여기서만 색을 덮어 씁니다. #d2d7de 는 #191d27 위에서 12.2:1 입니다.
 */
.dark .section-head .eyebrow {
  color: #d2d7de;
}

/*
 * 이 구역이 이끌고 싶은 행동입니다. 전에는 화살표 붙은 글자 링크라
 * 누를 수 있는 것처럼 보이지 않았습니다.
 * 강조색은 네 자리에만 쓰기로 했으므로(site.css 주석) 여기서는
 * 흰 판을 씁니다. 어두운 바탕에서 가장 또렷하고, 빨강을 하나 더
 * 늘리지 않습니다.
 */
.dark .section-head .head-action {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.dark .section-head .head-action:hover {
  background: #e8ebf0;
  border-color: #e8ebf0;
}
/* 글만 있는 안내 카드. 세 줄쯤 들어가는 폭입니다. */
.guide-grid {
  --card-min: 260px;
  --cards-gap: 13px;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid #ff8290;
  outline-offset: 3px;
}

.poster-stack a {
  min-width: 0;
}
.poster-stack a:nth-child(2) {
  transform: translateY(-12px);
}
.poster-stack img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: 0 15px 30px #0007;
  height: auto;
}
.hero p {
  color: #b8bec8;
  font-size: 16px;
  line-height: 1.8;
  max-width: 38em;
}
#popular {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.brand-name {
  width: 100%;
  text-align: center;
  color: #263b62;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.7px;
  white-space: nowrap;
}
/*
 * 이 버튼은 카드마다 하나씩, 한 화면에 열 개가 반복됩니다.
 * 솔리드로 두면 정작 이 섹션이 이끌고 싶은 "10곳 비교"보다 세게 읽힙니다.
 * 외곽선으로 내려 반복이 소음이 되지 않게 합니다.
 */
.go {
  padding: 8px 11px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.brand {
  height: 50px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 4px;
  justify-content: center;
}
/* 로고 크기 맞추기: 여백을 깎은 파일 + 보이는 면적이 같도록 높이를 --k(logoK)에 비례. */
.brand img {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(100%, calc(var(--k, 0.55) * 50px));
  object-fit: contain;
}
.rank-card {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  grid-template-columns: 30px 112px minmax(0, 1fr) auto;
}

/* ===== 홈 화면 정리 ===== */

/* 순위 카드의 공식 홈페이지 버튼이 9px 이었습니다. */
.rank-card a {
  font-size: var(--seed-font-size-t2);
}

/*
 * 이용 전 확인하세요 — 카드가 보이지 않던 문제.
 * article 이 #ffffff13 테두리와 #ffffff08 배경을 쓰고 있었는데,
 * 이 섹션은 어두운 배경이 아니라 밝은 배경이라 둘 다 사실상 투명했습니다.
 * 설명 글자도 #aeb4be 로 대비 1.96:1 이었습니다.
 */
.guide-grid article {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--seed-radius-r3);
}

.guide-grid b {
  /* 카드 배경을 흰색으로 고친 뒤에도 어두운 배경용 분홍이 남아
           흰 바탕에서 2.5:1 이었습니다. */
  color: var(--muted);
  font-size: var(--seed-font-size-t1);
  line-height: 1.4;
}

.guide-grid h3 {
  margin: 10px 0 0;
  font-size: var(--seed-font-size-t4);
  line-height: 1.4;
}

.guide-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--seed-font-size-t4);
  line-height: 1.6;
}

/* SAFE GUIDE 제목은 내용 대비 과했습니다. 28 -> 24px.
   .head h2 는 다른 섹션도 쓰므로 이 섹션으로만 범위를 좁힙니다. */
section:has(.guide-grid) .head h2 {
  font-size: var(--seed-font-size-t9);
  letter-spacing: -1px;
}

/* ===== 홈 웹하드 순위 자동 갱신 ===== */
.home-ranking-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  color: #c8cfda;
  font-size: var(--seed-font-size-t2);
  line-height: 1.5;
}

.home-ranking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36c66f;
  box-shadow: 0 0 0 4px rgba(54, 198, 111, 0.12);
  flex: 0 0 auto;
}

.rank {
  font-size: 20px;
  font-weight: 900;
  color: var(--red);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.home-rank-number {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-rank-move {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.home-ranking-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
}

.home-ranking-summary span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.home-ranking-summary .is-up,
.home-rank-move.is-up {
  color: #ff697f;
}

.home-ranking-summary .is-down,
.home-rank-move.is-down {
  color: #79a0ff;
}

.home-ranking-summary .is-new,
.home-rank-move.is-new {
  color: #f1b253;
}

.home-ranking-summary .is-same,
.home-rank-move.is-same {
  color: #9da8b7;
}

/* ===== 홈 콘텐츠 카드 줄 수 최종 규칙 ===== */
.content-body {
  flex: 1;
  padding: 12px;
  min-width: 0;
}

.content-body b {
  font-weight: 800;
  letter-spacing: -0.3px;
  font-size: 17px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  max-height: 2.7em;
  white-space: normal;
  overflow: hidden;
}

.content-body p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-body .tags {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.content-body .tag {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 50px 0;
  }
  .hero h1 {
    font-size: 38px;
  }
  .poster-stack {
    max-width: 420px;
  }
  .ranking {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .poster-stack a:nth-child(2),
  .poster-stack img:nth-child(2) {
    transform: none;
  }
  .section {
    padding: 38px 0;
  }
  .content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .content-card {
    min-width: 0;
    border-radius: 10px;
  }
  .content-body {
    padding: 9px;
  }
  .content-body b {
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
  }
  .content-body p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
  }
  .tag {
    padding: 2px 6px;
    font-size: 10px;
  }
  .ranking {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .rank-card {
    grid-template-columns: 32px 80px minmax(0, 1fr);
    gap: 9px;
    padding: 11px;
    border-radius: 12px;
  }
  .brand {
    height: 44px;
    padding: 3px 5px;
  }
  .brand img {
    height: min(100%, calc(var(--k, 0.55) * 46px));
  }
  .rank-info {
    min-width: 0;
  }
  .rank-info b {
    font-size: 15px;
  }
  .rank-info span {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .go {
    grid-column: 2 / -1;
    width: 100%;
    min-height: 40px;
    display: grid;
    place-items: center;
    padding: 7px 10px;
    font-size: 12px;
  }
  .home-ranking-status {
    margin-top: 6px;
    font-size: 11px;
  }
  .home-ranking-summary {
    gap: 6px;
    margin-top: 6px;
  }
  .guide-grid {
    --card-min: 100%;
    gap: 10px;
  }

  /* 모바일 홈: 콘텐츠로 바로 진입할 수 있도록 히어로를 한 화면 안에 둡니다. */
  .hero {
    padding: 25px 0 28px;
  }
  .hero-grid {
    gap: 26px;
    display: block;
  }
  .hero .pill {
    padding: 5px 9px;
    font-size: 10.5px;
    font-weight: 600;
  }
  .hero h1 {
    letter-spacing: -1.8px;
    margin: 12px 0 9px;
    font-size: 29px;
    line-height: 1.16;
  }
  .hero p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
  }
  .hero-btn {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    min-height: 44px;
  }
  .poster-stack {
    width: min(100%, 330px);
    margin: 0 auto;
    gap: 7px;
    transform: none;
    display: none;
  }
}

@media (max-width: 600px) {
  .poster-stack {
    max-width: none;
  }
  .head a {
    font-size: 13px;
    text-align: right;
  }
  .rank-info span {
    overflow-wrap: anywhere;
  }
  nav {
    height: auto;
    min-height: 68px;
    flex-wrap: wrap;
    padding-top: 10px;
  }
  #popular {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .head {
    gap: 14px;
    align-items: start;
  }
  .brand-name {
    font-size: 15px;
  }

  .home-rank-number {
    font-size: 18px;
  }

  .home-rank-move {
    font-size: 9px;
  }

  .home-ranking-summary span {
    font-size: 10px;
  }
}

@media (max-width: 560px) {
  /* 홈의 미리보기 카드는 좁은 화면에서 두 장씩. */
  .content-grid {
    --card-min: 140px;
    --cards-gap: 10px;
  }
}

@media (max-width: 480px) {
  .head h2 {
    font-size: 24px;
  }
}

@media (max-width: 380px) {
  .rank-card {
    grid-template-columns: 29px 72px minmax(0, 1fr);
  }
  .hero h1 {
    font-size: 27px;
  }
}

@media (max-width: 360px) {
  .head h2 {
    font-size: 23px;
  }
}

/* 홈 "지금 볼 만한 것" 박스오피스 카드: 순위·누적 관객 태그가 좁은 폭에서
   말줄임되지 않도록 넘치면 다음 줄로 내립니다. */
#picks .content-body .tags {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* ===== 홈 "지금 인기 극장 상영작" — 박스오피스 순위 딱지와 관객 수 ===== */
#picks .thumb {
  position: relative;
}

/* 포스터 오른쪽 위 순위 딱지. 강조색 규칙에 따라 잉크색을 씁니다. */
.pick-rank {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(23, 32, 45, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
}

/* 관객 줄: 누적 관객을 크게 */
.pick-audience {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 8px;
}

.pick-total {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pick-total strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (max-width: 760px) {
  .pick-rank {
    top: 6px;
    right: 6px;
    padding: 3px 7px;
    font-size: 11.5px;
  }
  .pick-total strong {
    font-size: 14.5px;
  }
  .pick-total {
    font-size: 11px;
  }
}