/* 홈 (HM-01) — Figma "pc · 메인 · 로그아웃"(340:7116) 기준. 클래스는 모두 hc- 로 시작
 * 값은 tokens.css 변수만 쓰고, 공통 부품(dp-*)은 components.css 를 그대로 쓴다.
 * 섹션 간격 96, 내용 폭 최대 1680 + 좌우 120. 히어로·세계관 띠는 화면 끝까지.
 */

/* 앱 셸의 1240px 폭·여백을 홈에서만 푼다 (router 가 화면을 바꿀 때 className 을 다시 쓴다) */
.app.home-c { max-width: none; padding: 0; }
@media (min-width: 1025px) { .app.home-c { margin-left: var(--side-w); } }

.hc { display: flex; flex-direction: column; gap: 96px; padding-bottom: 96px; font-family: var(--font-sans); color: var(--color-text-primary); }
.hc h2, .hc h3, .hc p, .hc dl, .hc dd { margin: 0; }
.hc-wrap { width: 100%; max-width: calc(var(--content-max) + var(--gutter-pc) * 2); margin: 0 auto; padding: 0 var(--gutter-pc); box-sizing: border-box; }
@media (max-width: 1439px) { .hc-wrap { padding: 0 var(--space-40); } }
/* 모바일 (Figma "mobile · 메인 · 로그아웃" 340:10511 / "로그인" 247:5246): 섹션 간격 64, 아래 56, 좌우 16 */
@media (max-width: 767px) { .hc { gap: 64px; padding-bottom: 56px; } .hc-wrap { padding: 0 var(--gutter-mobile); } }

/* ── 대화 스트립 (Figma Chat Strip: 아래 1px, 좌우 120 · 위아래 16, 대화 4칸은 오른쪽 1px로 구분) ── */
.hc-chatstrip { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--gutter-pc); border-bottom: 1px solid var(--color-border-default); margin-bottom: -96px; }
.hc-chatstrip-label { flex: none; display: flex; flex-direction: column; gap: var(--space-2); font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); white-space: nowrap; }
.hc-chatstrip-label b { font-weight: 400; color: var(--color-text-accent); }
.hc-chatstrip-label span { color: var(--color-text-secondary); }
.hc-chatstrip-list { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hc-chat { display: flex; align-items: center; gap: var(--space-12); min-width: 0; padding: 10px var(--space-16) 10px 10px; border-right: 1px solid var(--color-border-default); color: inherit; text-decoration: none; }
.hc-chat:last-child { border-right: 0; }
.hc-chat-avatar { flex: none; width: 40px; height: 40px; overflow: hidden; background: var(--color-surface-default); }
.hc-chat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-chat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); white-space: nowrap; }
.hc-chat-text b { font: 600 14px/1.5 var(--font-sans); letter-spacing: var(--tracking-base); overflow: hidden; text-overflow: ellipsis; }
.hc-chat-text span { font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; }
.hc-chat-time { flex: none; font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-tertiary); white-space: nowrap; }
.hc-chat.is-new .hc-chat-time { color: var(--color-text-accent); }
.hc-chat:hover .hc-chat-text b { color: var(--color-text-accent); }
.hc-chatstrip > .dp-link { flex: none; font-size: 14px; line-height: 1.5; }
@media (max-width: 1439px) { .hc-chatstrip { padding: var(--space-16) var(--space-40); } }
@media (max-width: 1279px) { .hc-chatstrip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hc-chat:nth-child(3) { border-right: 0; } .hc-chat:nth-child(n+4) { display: none; } }
@media (max-width: 1023px) {
  .hc-chatstrip { flex-wrap: wrap; margin-bottom: -48px; }
  .hc-chatstrip-label { flex-direction: row; gap: var(--space-8); }
  .hc-chatstrip > .dp-link { margin-left: auto; }
  .hc-chatstrip-list { order: 3; flex-basis: 100%; grid-template-columns: 1fr; }
  .hc-chat, .hc-chat:nth-child(3) { border-right: 0; border-top: 1px solid var(--color-border-default); padding-left: 0; }
  .hc-chat:nth-child(n+4) { display: none; }
}
/* 모바일 Chat Strip (343:3339): 최근 대화 · 전체보기 한 줄, 아래로 250폭 대화 카드 가로 스크롤(간격 8, 오른쪽 끝까지) */
@media (max-width: 767px) {
  .hc-chatstrip { gap: 10px var(--space-16); padding: var(--space-12) 0 var(--space-12) var(--gutter-mobile); margin-bottom: -64px; }
  .hc-chatstrip > .dp-link { margin-right: var(--gutter-mobile); gap: 3px; font: 700 12px/1.4 var(--font-sans); }
  .hc-chatstrip-list { display: flex; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .hc-chatstrip-list::-webkit-scrollbar { display: none; }
  .hc-chat, .hc-chat:nth-child(3) { flex: 0 0 250px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: var(--space-2) 10px; padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8); border: 0; box-sizing: border-box; scroll-snap-align: start; }
  .hc-chat:nth-child(n+4) { display: grid; }
  .hc-chat:last-child { margin-right: var(--gutter-mobile); }
  .hc-chat-avatar { grid-row: 1 / 3; width: 36px; height: 36px; align-self: center; }
  .hc-chat-text { display: contents; }
  .hc-chat-text b { grid-column: 2; grid-row: 1; }
  .hc-chat-text span { grid-column: 2 / 4; grid-row: 2; }
  .hc-chat-time { grid-column: 3; grid-row: 1; align-self: start; } /* Figma Top: 이름·시간 위 맞춤, 양 끝 */
}

/* ── 히어로: 왼쪽 무대(1200×960) + 오른쪽 720 (FOR YOU · 배너 · 이벤트) ── */
.hc-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); background: var(--color-bg-canvas);
  /* 한 화면 안에: 보이는 높이 − 헤더 − 대화 스트립 (Figma 960이 최대, 560 아래로는 줄이지 않음).
   * --hc-strip-h 는 home.js 가 대화 스트립 실제 높이로 넣는다. 오른쪽 칸 내용이 더 길면 그만큼 늘어난다 */
  min-height: clamp(560px, calc(100vh - var(--topbar-h) - var(--hc-strip-h, 0px)), 960px);
  min-height: clamp(560px, calc(100svh - var(--topbar-h) - var(--hc-strip-h, 0px)), 960px);
}
.hc-stage { position: relative; min-width: 0; overflow: hidden; }
.hc-side { display: flex; flex-direction: column; border-left: 1px solid var(--color-border-default); min-width: 0; }
/* Hero Slot: 위아래 48 · 왼쪽 48 · 오른쪽 80, 카드 이미지가 남는 높이를 채운다 */
.hc-side > .dp-hero-slot { flex: 1; min-height: 0; padding: 48px 80px 48px 48px; }
.hc-side .dp-hero-picks { flex: 1; min-height: 0; }
.hc-side .dp-hero-pick { height: 100%; }
.hc-side .dp-hero-pick > .dp-thumb, .hc-side .dp-hero-slot.is-member .dp-hero-pick > .dp-thumb { flex: 1; min-height: 160px; aspect-ratio: auto; }
.hc-side > .dp-event-list { padding-right: 80px; }
/* Guest: 칩·카드 묶음과 '가입하고 대화 시작하기' 사이 40(+위 8), 링크 하나라 왼쪽 정렬 (Figma 340:11315) */
.hc-side > .dp-hero-slot:not(.is-member) > .dp-hero-actions { margin-top: 28px; justify-content: flex-start; }
@media (max-width: 1439px) { .hc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); } .hc-side > .dp-hero-slot, .hc-side > .dp-event-list { padding-right: 48px; } }
@media (max-width: 1023px) {
  .hc-hero { grid-template-columns: 1fr; min-height: 0; }
  .hc-stage { min-height: 640px; }
  .hc-side { border-left: 0; }
  .hc-side .dp-hero-pick > .dp-thumb { flex: none; aspect-ratio: 4 / 5; min-height: 0; }
}
/* 모바일·태블릿 Hero Extras: 화면 폭을 꽉 채우고 여백은 좌우 16만. FOR YOU(위아래 32) → 배너 → EVENTS(위아래 32) */
@media (max-width: 1023px) {
  .hc-side > .dp-hero-slot { padding: var(--space-32) var(--gutter-mobile); }
  .hc-side .dp-hero-picks { gap: var(--space-16); }
  /* 비로그인: 취향 칩은 줄바꿈 없이 오른쪽 끝까지 가로 스크롤, 카드 그림은 390 화면에서 108.67×164 비율 그대로 폭에 맞춰 커진다 */
  .hc-side .dp-hero-slot:not(.is-member) .dp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter-mobile) * -1); padding-right: var(--gutter-mobile); }
  .hc-side .dp-hero-slot:not(.is-member) .dp-chips::-webkit-scrollbar { display: none; }
  .hc-side .dp-hero-slot:not(.is-member) .dp-chip { flex: none; }
  .hc-side .dp-hero-slot:not(.is-member) .dp-hero-pick > .dp-thumb { aspect-ratio: 108.67 / 164; height: auto; }
  .hc-side > .dp-event-list { padding: var(--space-32) var(--gutter-mobile); }
  .hc-side .dp-event-row { gap: var(--space-20); }
  .hc-side .dp-event-kicker { width: 72px; }
}

/* 커버·매칭 공통 배경: 도시 배경 + 캐릭터 컷아웃 + 왼쪽·아래 그림자 (Figma Overlay · left / bottom) */
.hc-cover, .hc-match { position: absolute; inset: 0; }
/* 배경 864×817 (스테이지 1200×960 기준 72%·85%), 위에서 45.5%까지 캔버스색으로 사라짐 */
.hc-cover-bg { position: absolute; left: 0; bottom: 0; width: 72%; height: 85%; object-fit: cover;
  /* 위 45.5% 페이드(Figma) + 오른쪽 끝 페이드(높이가 줄어 컷아웃이 작아져도 배경 끝선이 보이지 않게) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45.5%), linear-gradient(90deg, #000 78%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 45.5%), linear-gradient(90deg, #000 78%, transparent 100%); mask-composite: intersect; }
/* 컷아웃: Figma Character 박스(x157, 1200×960) 안 left 25.58%·top 10.44%·높이 103.82% → 스테이지 기준 left 38.7% · top 10.4% */
.hc-cover-bg + .hc-cover-figure { position: absolute; left: 38.7%; top: 10.4%; height: 103.8%; width: auto; max-width: none; pointer-events: none; }
/* 실제 데이터: 컷아웃이 없어 포스터(3:4, 배경 꽉 참)를 스테이지 전체에 깐다. 얼굴이 위쪽에 있어 위 기준으로 자른다 */
.hc-cover-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; pointer-events: none; }
/* 꽉 찬 포스터는 옆으로 밀면 가장자리가 비어 보여 페이드만 (컷아웃 등장 애니메이션보다 우선) */
.hc-cover-figure.hc-cover-poster.is-enter { animation-name: hc-fade-in; }
@keyframes hc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.hc-cover-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 10, 16, 0) 66%, rgba(11, 10, 16, .8) 100%),
    linear-gradient(90deg, rgba(11, 10, 16, .94) 0, rgba(11, 10, 16, .55) 45%, rgba(11, 10, 16, 0) 75%);
}

/* 커버 이야기 (Story: Cover Label → 제목 50 → 설명 → 태그 → 대화 시작하기) */
.hc-story { position: absolute; left: 96px; bottom: 11.25%; width: min(520px, calc(100% - 192px)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20); }
.hc-story[hidden] { display: none; }
.hc-cover-title { font: 700 50px/1.2 var(--font-sans); letter-spacing: var(--tracking-tight); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-cover-desc { width: min(520px, 100%); font: 400 15px/1.6 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-emphasis); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-cover-tags { font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-secondary); }
/* 대화 시작하기: 채움 버튼 50 · 좌우 28 · Body/S Strong 14 (Figma Actions 340:11846) */
.hc-story-actions .dp-btn { height: 50px; padding: 0 28px; font-size: 14px; line-height: 1.5; white-space: pre; }
.hc-index { position: absolute; right: 56px; bottom: 11.25%; display: flex; align-items: baseline; gap: var(--space-12); }
.hc-index b { font: 700 50px/1.2 var(--font-sans); letter-spacing: var(--tracking-tight); }
.hc-index span { font: 400 15px/1.6 var(--font-sans); color: var(--color-text-secondary); }
.hc-progress { position: absolute; left: 96px; right: 56px; bottom: 4.8%; display: flex; gap: var(--space-4); }
.hc-progress button { position: relative; flex: 1; height: 2px; padding: 0; border: 0; background: var(--color-border-default); cursor: pointer; }
.hc-progress button::before { content: ""; display: block; height: 14px; margin-top: -6px; } /* 누르기 쉬운 영역 */
/* 진행 막대: 지난 칸은 꽉 차 있고, 지금 칸은 --hc-interval(home.js) 동안 왼쪽부터 채워진다. 다 차면 home.js 가 다음 슬라이드로 */
.hc-progress button::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-surface-accent); transform: scaleX(0); transform-origin: left center; }
.hc-progress button.is-done::after { transform: scaleX(1); }
.hc-progress button.is-current::after { animation: hc-fill var(--hc-interval, 6s) linear forwards; }
.hc-cover.is-paused .hc-progress button.is-current::after, .hc-match.is-paused .hc-progress button.is-current::after { animation-play-state: paused; }
.hc-cover.is-static .hc-progress button.is-current::after, .hc-match.is-static .hc-progress button.is-current::after { animation: none; transform: scaleX(1); }
@keyframes hc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 슬라이드 전환: 캐릭터는 오른쪽에서 스며들고, 글은 라벨 → 제목 → 설명 → 태그 → 버튼 순서로 아래에서 올라온다 */
.hc-cover-figure.is-enter { animation: hc-figure-in .9s var(--ease-out) both; }
.hc-story.is-enter > *, .hc-match-main.is-enter > * { animation: hc-rise .6s var(--ease-out) both; }
.hc-story.is-enter > :nth-child(2), .hc-match-main.is-enter > :nth-child(2) { animation-delay: .06s; }
.hc-story.is-enter > :nth-child(3), .hc-match-main.is-enter > :nth-child(3) { animation-delay: .12s; }
.hc-story.is-enter > :nth-child(4) { animation-delay: .18s; }
.hc-story.is-enter > :nth-child(5) { animation-delay: .24s; }
.hc-index b.is-enter { animation: hc-rise .5s var(--ease-out) both; }
@keyframes hc-figure-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes hc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hc-cover-figure.is-enter, .hc-story.is-enter > *, .hc-match-main.is-enter > *, .hc-index b.is-enter { animation: none; } }

/* 취향 매칭 (Figma Hero · Match 340:9916: 이름 + 세계관/이야기 · 첫 대사 · 버튼 3개 · 01/05) */
/* 컷아웃: Figma Character 박스(-97,-77, 1419×1135) 안 left 25.58%·top 10.44%·높이 103.82% → 스테이지 기준 left 22.2% · top 4.3% · 높이 122.7% */
.hc-match .hc-cover-bg + .hc-match-figure { left: 22.2%; top: 4.3%; height: 122.7%; }
/* Info: left 96 · 아래 108, 폭 1037 (왼쪽 560 + 오른쪽 01 / 05, 아래선 맞춤) */
.hc-match-story { position: absolute; left: 96px; right: 67px; bottom: 11.25%; display: flex; flex-direction: column; gap: 18px; }
.hc-match-info { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.hc-match-main { width: min(560px, 100%); display: flex; flex-direction: column; gap: 18px; }
.hc-match-story .hc-index { position: static; }
.hc-quote { font: 400 20px/1.3 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--color-text-emphasis); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 이름 50 + 오른쪽 세계관(12) / 이야기 제목(14) 두 줄, 간격 14 · 세로 가운데 */
.hc-match-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hc-match-name h2 { flex: none; font: 700 50px/1.2 var(--font-sans); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.hc-match-meta { display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); min-width: 0; }
.hc-match-meta span { font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-secondary); white-space: nowrap; }
.hc-match-meta b { font: 400 14px/1.5 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-emphasis); }
/* 버튼 3개를 간격 없이 붙임: 높이 50, Body/S Strong 14. 채움(좌우 28) · 옅은 배경(20) · 배경 없음(20) */
.hc-match-actions { display: flex; align-items: center; }
.hc-match-actions .dp-btn { height: 50px; font-size: 14px; line-height: 1.5; white-space: pre; transition: filter var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.hc-match-actions .dp-btn.is-primary { padding: 0 28px; }
.hc-match-actions .dp-btn.is-secondary { padding: 0 var(--space-20); color: var(--color-text-emphasis); }
.hc-match-actions .dp-btn[data-match="pass"] { padding: 0 var(--space-20); border-color: transparent; color: var(--color-text-emphasis); }
.hc-match-actions .dp-btn[data-match="pass"]:hover { background: var(--color-surface-subtle); }
/* 회원 추천 카드는 4:5 고정 (Figma Hero Slot · Member) */
.hc-side .dp-hero-slot.is-member .dp-hero-picks { flex: none; }
.hc-side .dp-hero-slot.is-member .dp-hero-pick { height: auto; }
.hc-side .dp-hero-slot.is-member .dp-hero-pick > .dp-thumb { flex: none; aspect-ratio: 4 / 5; min-height: 0; }

/* 모바일 히어로 (Cover Story 390×560): 배경 267×467 왼쪽 아래, 컷아웃 x31·y56·높이 100%, 아래로 95% 어둡게.
 * 이야기는 아래 50에서 위로 쌓고, 01 / 05 는 오른쪽 위 24, 진행 막대는 아래 24
 * 한 화면에: 높이 = 보이는 높이 − 헤더 − 대화 스트립 − 하단 탭바 (home.js 가 --hc-strip-h · --hc-tabbar-h 를 넣는다).
 * 글이 들어갈 최소 440, 최대 960. 그림은 Figma 크기(560 기준)보다 작아지지 않고 넘치면 잘리며, 화면이 크면 같이 커진다 */
@media (max-width: 767px) {
  .hc-stage {
    min-height: 0;
    height: clamp(440px, calc(100vh - var(--topbar-h) - var(--hc-strip-h, 0px) - var(--hc-tabbar-h, 0px)), 960px);
    height: clamp(440px, calc(100svh - var(--topbar-h) - var(--hc-strip-h, 0px) - var(--hc-tabbar-h, 0px)), 960px);
  }
  .hc-cover-bg { width: max(68.5%, 267px); height: max(83.4%, 467px); }
  .hc-cover-bg + .hc-cover-figure, .hc-match .hc-cover-bg + .hc-match-figure { left: 7.9%; top: 10.1%; height: max(100.1%, 560px); }
  .hc-cover-shade { background: linear-gradient(180deg, rgba(11, 10, 16, 0) 30%, rgba(11, 10, 16, .95) 100%); }
  .hc-index { top: var(--space-24); right: var(--gutter-mobile); bottom: auto; }
  .hc-index b { font-size: 20px; line-height: 1.3; }
  .hc-progress { left: var(--gutter-mobile); right: var(--gutter-mobile); bottom: var(--space-24); }
  /* 비로그인 커버: Cover Label → 제목 32 → 설명 14 → 태그 → 꽉 찬 버튼 47, 간격 14 */
  .hc-story { left: var(--gutter-mobile); right: var(--gutter-mobile); width: auto; bottom: 50px; gap: 14px; }
  .hc-cover-title { font-size: 32px; }
  .hc-cover-desc { width: 100%; font-size: 14px; line-height: 1.5; }
  .hc-story-actions { align-self: stretch; }
  .hc-story-actions .dp-btn, .hc-match-actions .dp-btn.is-primary { width: 100%; height: 47px; padding: 0; }
  /* 로그인 매칭: 이름 32 + (세계관 12 / 이야기 제목 11) → 대사 14 한 줄 → 꽉 찬 버튼 → 관심 없어요 · 다음 캐릭터, 간격 12 */
  .hc-match-story { left: var(--gutter-mobile); right: var(--gutter-mobile); top: 0; bottom: 50px; justify-content: flex-end; gap: 0; }
  .hc-match-info { display: block; }
  .hc-match-story .hc-index { position: absolute; top: var(--space-24); right: 0; }
  .hc-match-main { width: 100%; gap: var(--space-12); }
  .hc-match-name { gap: 10px; }
  .hc-match-name h2 { font-size: 32px; }
  .hc-match-meta { gap: var(--space-2); }
  .hc-match-meta b { font: 500 11px/1.3 var(--font-sans); }
  .hc-quote { font-size: 14px; line-height: 1.5; letter-spacing: var(--tracking-base); -webkit-line-clamp: 1; }
  .hc-match-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: var(--space-12); }
  .hc-match-actions .dp-btn.is-primary { grid-column: 1 / -1; }
  .hc-match-actions .dp-btn[data-match] { height: auto; padding: 0; border: 0; background: none; font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); }
  .hc-match-actions .dp-btn[data-match="pass"] { order: 2; justify-self: start; margin-top: var(--space-2); color: var(--color-text-secondary); }
  .hc-match-actions .dp-btn[data-match="pass"]:hover { background: none; color: var(--color-text-primary); }
  /* 다음 캐릭터  →: 밑줄 링크 (글자 아래 3에 1px) */
  .hc-match-actions .dp-btn[data-match="next"] { order: 3; margin-top: var(--space-2); flex-direction: column; align-items: stretch; gap: 3px; color: var(--color-text-primary); }
  .hc-match-actions .dp-btn[data-match="next"]::after { content: ""; display: block; height: 1px; background: currentColor; }
}
}

/* ── 섹션 머리 (제목 32 + 설명 14, 오른쪽 기간·링크) ── */
.hc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-24); }
.hc-head-title { display: flex; flex-direction: column; gap: var(--space-8); }
.hc-head-title h2 { font: 700 32px/1.2 var(--font-sans); letter-spacing: var(--tracking-tight); }
.hc-head-title p { font: 400 14px/1.5 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-secondary); }
.hc-head-meta { display: flex; align-items: center; gap: var(--space-32); font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-secondary); }
.hc-head-meta .dp-link { gap: var(--space-6); } /* Figma Link · 전체 보기: 글자↔밑줄 6 */

/* ── Weekly Top 10 (2열, 간격 48) ── */
.hc-rank-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 1023px) { .hc-rank-cols { grid-template-columns: 1fr; gap: 0; } }
/* 모바일 Weekly Top 10 (340:10624): 머리는 WEEKLY TOP 10 · 기간(12) / 제목 20 + 오른쪽 아래 전체 보기, 5위까지, 행 77 */
@media (max-width: 767px) {
  .hc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 6px var(--space-8); margin-bottom: var(--space-8); }
  .hc-head-title, .hc-head-meta { display: contents; }
  .hc-head-title h2 { grid-column: 1; grid-row: 1; font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-accent); text-transform: uppercase; }
  .hc-head-meta > span { grid-column: 2; grid-row: 1; color: var(--color-text-tertiary); }
  .hc-head-title p { grid-column: 1 / 3; grid-row: 2; font: 700 20px/1.3 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); }
  .hc-head-meta .dp-link, .hc-chars-more .dp-link { grid-column: 3; grid-row: 2; gap: 3px; font: 400 12px/1.4 var(--font-sans); }
  .hc-rank-cols > :nth-child(2) { display: none; }
  .hc-rank .dp-rank-row { gap: var(--space-12); padding: 14px 0; }
  .hc-rank .dp-rank-num { width: 72px; height: 48px; display: flex; align-items: center; font-size: 20px; line-height: 1.3; }
  .hc-rank .dp-rank-title { font-size: 14px; line-height: 1.5; }
}

/* ── 세계관 (HM-04 · Figma World Feature 392:9681) — 가로 아코디언
   펼친 패널 1494 + 접힌 띠 136×3 (간격 6) = 화면 끝까지, 높이 785. 띠를 누르면 그 패널이 펼쳐진다
   본문: 위아래 100 · 왼쪽 120 · 오른쪽 80, Head ↔ Body 48, Story 760 안 간격 40 / 아래 줄(01 / 04 · 모든 세계관)은 위 24 · 좌우 120 ── */
.hc-world { --strip-w: 136px; display: flex; flex-direction: column; gap: var(--space-24); }
.hc-world-main { display: flex; gap: 6px; height: 785px; container-type: inline-size; }
.hc-world-panel { position: relative; flex: 0 0 var(--strip-w); min-width: 0; overflow: hidden; transition: flex-basis .6s var(--ease-out), flex-grow .6s var(--ease-out); }
.hc-world-panel.is-open { flex: 1 1 0; }
.hc-world-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-world-dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-out);
  background: linear-gradient(180deg, rgb(11, 10, 16) 0%, rgba(11, 10, 16, 0) 18%, rgba(11, 10, 16, 0) 82%, rgb(11, 10, 16) 100%),
    linear-gradient(90deg, rgba(11, 10, 16, .94) 0%, rgba(11, 10, 16, .8) 45%, rgba(11, 10, 16, .5) 100%); }
.hc-world-panel.is-open .hc-world-dim { opacity: 1; }
/* 펼친 본문: 패널이 넓어지는 동안 글자가 다시 줄바꿈되지 않게 펼친 너비로 고정하고, 다 펼쳐진 뒤 나타난다 */
.hc-world-stage { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100cqw - var(--hc-world-closed) * (var(--strip-w) + 6px)); display: flex; }
.hc-world-stage[hidden] { display: none; }
.hc-world-panel.is-open .hc-world-stage { animation: hc-fade-in .4s .25s var(--ease-out) both; }
/* 소속 캐릭터에 마우스를 올리면 오른쪽에서 전신이 슬라이드인 (Figma Smart Animate 0.35s) */
.hc-world-figure { position: absolute; right: 0; bottom: 0; width: 50%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  opacity: 0; transform: translateX(48px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.hc-world-figure.is-on { opacity: 1; transform: none; }
.hc-world-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 48px; padding: 100px 80px 100px var(--gutter-pc); }
.hc-world-body.is-enter .hc-world-story > * { animation: hc-rise .6s .2s var(--ease-out) both; }
.hc-world-body.is-enter .hc-world-story > :nth-child(2) { animation-delay: .26s; }
.hc-world-body.is-enter .hc-world-story > :nth-child(3) { animation-delay: .32s; }
.hc-world-body.is-enter .hc-world-story > :nth-child(4) { animation-delay: .38s; }
.hc-world-row { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.hc-world-story { flex: 0 1 760px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.hc-world-story h2 { font: 700 40px/1.2 var(--font-sans); letter-spacing: var(--tracking-tight); }
.hc-world-story h2 a { color: inherit; text-decoration: none; }
.hc-world-story h2 a:hover { color: var(--color-text-accent); }
.hc-world-desc { font: 400 15px/1.6 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-emphasis); }
.hc-world-facts { margin: 0; display: flex; flex-direction: column; }
.hc-world-facts > div { display: flex; gap: var(--space-24); align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--color-border-default); }
.hc-world-facts dt { flex: none; width: 96px; font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-tertiary); }
.hc-world-facts dd { flex: 1; min-width: 0; margin: 0; font: 400 14px/1.5 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-primary); }
.hc-world-cast { display: flex; flex-direction: column; gap: var(--space-12); }
.hc-world-cast > p { font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-secondary); }
.hc-world-members { display: flex; gap: var(--space-16); }
.hc-world-member { flex: none; width: 88px; display: flex; flex-direction: column; gap: var(--space-8); color: var(--color-text-secondary); text-decoration: none; }
.hc-world-avatar { width: 88px; height: 88px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-surface-default);
  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--dur-fast) var(--ease-out); }
.hc-world-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-world-member:hover .hc-world-avatar, .hc-world-member:focus-visible .hc-world-avatar { outline-color: var(--color-surface-accent); }
.hc-world-name { font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-world-member:hover .hc-world-name { color: var(--color-text-primary); }
.hc-world-member.is-more .hc-world-avatar { font: 600 20px/1 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-emphasis); }
.hc-world-row > .dp-btn { flex: none; height: 50px; padding: 0 var(--space-20); font-size: 14px; line-height: 1.5; white-space: pre; color: var(--color-text-emphasis); }
/* PC·모바일 전용 요소 (모바일: 다섯 번째 캐릭터 대신 +N, 버튼 '세계관 더보기', 접힌 줄에 한 줄 소개) */
.hc-world-only-m, .hc-world-row > [data-world-more="m"], .hc-world-strip-desc { display: none; }
/* 접힌 띠 (번호 13 SemiBold · 선 1×32 · 세로 글자 이름 20 Bold + 캐릭터 수 12, 펼친 패널에서 멀수록 어둡게 --strip-dim) */
.hc-world-strip { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: none; color: var(--color-text-primary); cursor: pointer; font-family: var(--font-sans);
  transition: opacity .3s var(--ease-out), visibility 0s; }
.hc-world-panel.is-open .hc-world-strip { opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-out), visibility 0s .2s; }
.hc-world-panel:not(.is-open) .hc-world-bg { transition: transform .6s var(--ease-out); }
.hc-world-panel:not(.is-open):hover .hc-world-bg { transform: scale(1.04); }
.hc-world-strip-dim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 10, 16, 0) 0%, rgba(11, 10, 16, 0) 40%, rgba(11, 10, 16, .85) 100%), rgba(11, 10, 16, var(--strip-dim, .47)); }
.hc-world-strip:hover .hc-world-strip-dim, .hc-world-strip:focus-visible .hc-world-strip-dim { background-color: rgba(11, 10, 16, .2); }
.hc-world-strip-no { position: absolute; top: 100px; left: 0; width: var(--strip-w); text-align: center; font: 600 13px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-accent); }
.hc-world-strip-line { position: absolute; top: 132px; left: calc(var(--strip-w) / 2); width: 1px; height: 32px; background: rgba(255, 255, 255, .3); }
.hc-world-strip-text { position: absolute; bottom: 100px; left: calc(var(--strip-w) / 2); display: flex; gap: var(--space-8); writing-mode: vertical-rl; text-orientation: sideways; transform: translateX(-50%) rotate(180deg); text-align: start; white-space: nowrap; }
.hc-world-strip-text b { font: 700 20px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); }
.hc-world-strip-text span { font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: rgba(255, 255, 255, .6); }
/* 아래 줄: 01 / 04 · 진행 막대 · ← → (280) / 모든 세계관 */
.hc-world-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: 0 var(--gutter-pc); }
.hc-world-pager { width: 280px; display: flex; align-items: center; gap: var(--space-16); }
.hc-world-pager[hidden] { display: none; }
.hc-world-count { flex: none; font: 600 14px/1 var(--font-sans); letter-spacing: var(--tracking-base); color: rgba(255, 255, 255, .4); }
.hc-world-count b { font-weight: 600; color: var(--color-text-primary); }
.hc-world-progress { flex: 1; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.hc-world-progress i { display: block; height: 100%; background: var(--color-surface-accent); transition: width .35s var(--ease-out); }
.hc-world-btns { flex: none; display: flex; gap: var(--space-8); }
.hc-world-btns button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, .24); border-radius: 20px;
  background: none; color: var(--color-text-primary); font: 400 16px/1 var(--font-sans); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.hc-world-btns button:hover, .hc-world-btns button:focus-visible { background: rgba(255, 255, 255, .08); } /* 기본은 배경 없음, 호버하면 채움 (Figma → 버튼 채움 = 호버 상태) */
.hc-world-foot > .dp-link { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .hc-world-panel, .hc-world-dim, .hc-world-figure, .hc-world-strip { transition: none; }
  .hc-world-panel.is-open .hc-world-stage { animation: none; }
}
@media (max-width: 1439px) {
  .hc-world { --strip-w: 96px; }
  .hc-world-body { padding: 80px var(--space-40); }
  .hc-world-foot { padding: 0 var(--space-40); }
}
/* 좁은 화면: 띠는 숨기고 펼친 패널 하나만 (← → 로 넘긴다) */
@media (max-width: 1023px) {
  .hc-world-main { height: auto; min-height: 640px; }
  .hc-world-panel:not(.is-open) { display: none; }
  .hc-world-panel.is-open { flex: 1 1 auto; }
  .hc-world-stage { position: relative; width: 100%; }
  .hc-world-figure { display: none; }
  .hc-world-row { flex-direction: column; align-items: flex-start; }
  .hc-world-story { flex: none; align-self: stretch; }
  .hc-world-members { overflow-x: auto; scrollbar-width: none; }
}
/* 모바일 World Accordion (392:9801): 세로로 쌓고 간격 4. 펼친 세계관은 82% 어둡게 · 위아래 28 · 좌우 16 · 간격 26,
   접힌 세계관은 높이 69 가로 줄(번호 · 이름 15 Bold · 한 줄 소개). 아래 '모든 세계관'은 가운데 */
@media (max-width: 767px) {
  .hc-world-main { flex-direction: column; gap: var(--space-4); height: auto; min-height: 0; }
  .hc-world-panel, .hc-world-panel:not(.is-open) { display: block; flex: none; height: 69px; transition: none; }
  .hc-world-panel.is-open { height: auto; }
  .hc-world-dim { background: rgba(11, 10, 16, .82); }
  .hc-world-panel.is-open .hc-world-stage { animation-delay: 0s; }
  .hc-world-body { gap: 26px; padding: 28px var(--gutter-mobile); }
  .hc-world-body .dp-kicker { gap: var(--space-8); }
  .hc-world-row { gap: 26px; }
  .hc-world-story { gap: 26px; }
  .hc-world-story h2 { font-size: 20px; line-height: 1.3; }
  .hc-world-desc { font-size: 14px; line-height: 1.5; }
  .hc-world-facts, .hc-world-cast > p, .hc-world-name, .hc-world-only-pc { display: none; }
  .hc-world-only-m { display: inline; }
  .hc-world-members { gap: var(--space-8); padding-top: var(--space-4); overflow: visible; }
  .hc-world-member, .hc-world-avatar { width: 64px; }
  .hc-world-avatar { height: 64px; }
  .hc-world-member.is-more .hc-world-avatar { font-size: 15px; }
  .hc-world-row > [data-world-more="pc"] { display: none; }
  .hc-world-row > [data-world-more="m"] { display: inline-flex; height: auto; padding: var(--space-8) var(--space-12); font: 600 12px/1.5 var(--font-sans); letter-spacing: var(--tracking-base); }
  /* 접힌 줄: 왼쪽에서 오른쪽으로 옅어지는 어둡게 + 뒤로 갈수록 더 어둡게 (Figma .2 · .32 · .44 = PC 값 - .15) */
  .hc-world-strip { display: flex; align-items: center; gap: var(--space-12); padding: 0 var(--gutter-mobile); text-align: left; }
  .hc-world-strip-dim { background: linear-gradient(90deg, rgba(11, 10, 16, .9) 0%, rgba(11, 10, 16, .55) 60%, rgba(11, 10, 16, .2) 100%), rgba(11, 10, 16, calc(var(--strip-dim, .47) - .15)); }
  .hc-world-strip-no { position: relative; top: auto; left: auto; width: auto; font-size: 12px; color: var(--color-text-accent); }
  .hc-world-strip-line, .hc-world-strip-count { display: none; }
  .hc-world-strip-text { position: relative; bottom: auto; left: auto; flex: 1; min-width: 0; align-items: center; gap: var(--space-12); writing-mode: horizontal-tb; transform: none; }
  .hc-world-strip-text b { flex: none; font-size: 15px; }
  .hc-world-strip-desc { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base); color: rgba(255, 255, 255, .6); }
  .hc-world-foot { justify-content: center; padding: 0 var(--gutter-mobile); }
  .hc-world-pager { display: none; }
  .hc-world-foot > .dp-link { font-size: 14px; line-height: 1.5; gap: 3px; }
}

/* ── Characters (제목 50 "Characters  →" + 오른쪽 탭 15 SemiBold 간격 28, 장르 텍스트 필터, 5열 한 줄) ── */
.hc-chars-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.hc-chars-head h2 { font: 700 50px/1.2 var(--font-sans); letter-spacing: var(--tracking-tight); white-space: pre; }
.hc-chars-title > .dp-kicker, .hc-chars-more { display: none; } /* 모바일 머리에서만 */
.hc-chars-head h2 a { color: inherit; text-decoration: none; }
.hc-chars-head h2 a:hover { color: var(--color-text-accent); }
.hc-chars-head .dp-tabs { gap: 28px; padding-bottom: var(--space-8); }
.hc-chars-head .dp-tab { font: 600 15px/1.6 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-tertiary); gap: var(--space-6); }
.hc-chars-head .dp-tab[aria-selected="true"], .hc-chars-head .dp-tab.is-selected { color: var(--color-text-primary); }
.hc-chars-head .dp-tab:hover { color: var(--color-text-secondary); }
/* 머리·필터·그리드 간격 32, 필터 위 1px 선 + 20 (Figma Filters 340:7234) */
.hc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); margin-top: var(--space-32); padding: var(--space-20) 0 0; margin-bottom: var(--space-32); border-top: 1px solid var(--color-border-default); }
.hc-filters > i { font-style: normal; color: var(--color-text-tertiary); font: 600 15px/1.6 var(--font-sans); }
.hc-filters > button { padding: 0; border: 0; background: none; cursor: pointer; font: 600 15px/1.6 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-secondary); }
.hc-filters > button:hover { color: var(--color-text-primary); }
.hc-filters > button[aria-pressed="true"] { color: var(--color-text-accent); }
.hc-chars .dp-grid[aria-busy="true"] { opacity: .5; transition: opacity var(--dur-fast) var(--ease-out); }
.hc-grid-more { height: 1px; } /* 무한 스크롤 센티널: 보이면 다음 페이지를 부른다 */
/* 모바일 Characters (340:10569): CHARACTERS / 제목 20 + 전체 보기 → 탭(14 SemiBold, 간격 20, 아래 1px) → 2열, 스크롤하면 이어짐. 간격 16.
 * 장르 텍스트 필터는 모바일 시안에 없어 숨긴다 */
@media (max-width: 767px) {
  .hc-chars-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-16) var(--space-8); }
  .hc-chars-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .hc-chars-title > .dp-kicker { display: flex; gap: var(--space-8); }
  .hc-chars-head h2 { font-size: 20px; line-height: 1.3; }
  .hc-chars-arrow { display: none; }
  .hc-chars-more { display: block; }
  .hc-chars-head .dp-tabs { grid-column: 1 / -1; gap: var(--space-20); padding: var(--space-4) 0 0; border-bottom: 1px solid var(--color-border-default); }
  .hc-chars-head .dp-tab { font: 600 14px/1.5 var(--font-sans); padding: 0; }
  .hc-filters { display: none; }
  .hc-chars .dp-grid { margin-top: var(--space-16); gap: var(--space-32) var(--space-12); }
  .hc-chars .dp-badge-original { padding: var(--space-2) var(--space-6); font-size: 10px; line-height: 1.2; }
}

/* ── 히어로를 한 화면에 (파일 끝에 두어 위 규칙을 덮는다) ── */
/* 화면 높이가 Figma(헤더·스트립 포함 1134)보다 낮을 때 오른쪽 칸을 촘촘하게 — 1단계: 여백 축소, 카드 이미지가 남는 높이를 채움 */
@media (min-width: 1024px) and (max-height: 1132px) {
  .hc-side > .dp-hero-slot { padding-top: var(--space-24); padding-bottom: var(--space-24); gap: 10px; }
  .hc-side .dp-hero-slot.is-member .dp-hero-picks { flex: 1; min-height: 0; }
  .hc-side .dp-hero-slot.is-member .dp-hero-pick { height: 100%; }
  .hc-side .dp-hero-pick > .dp-thumb, .hc-side .dp-hero-slot.is-member .dp-hero-pick > .dp-thumb { flex: 1; aspect-ratio: auto; min-height: 100px; }
  .hc-side > .dp-event-list { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .hc-side .dp-event-row { padding: var(--space-8) 0; }
  .hc-side > .dp-hero-slot:not(.is-member) > .dp-hero-actions { margin-top: 0; }
  .hc-match-story, .hc-match-main { gap: 14px; }
}
/* 2단계 (1440×900 노트북 등): 장르 줄 숨김, 이벤트 머리글 숨김, 이벤트 행 더 촘촘히 */
@media (min-width: 1024px) and (max-height: 820px) {
  .hc-side > .dp-hero-slot { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .hc-side .dp-hero-pick-genre, .hc-side .dp-event-head { display: none; }
  .hc-side .dp-hero-pick > .dp-thumb, .hc-side .dp-hero-slot.is-member .dp-hero-pick > .dp-thumb { min-height: 80px; }
  .hc-side > .dp-event-list { gap: 0; padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .hc-side .dp-event-row { padding: var(--space-6) 0; }
  .hc-side .dp-event-row:first-child { border-top: 0; }
  .hc-cover-title { font-size: 40px; }
  .hc-index b, .hc-match-name h2 { font-size: 40px; }
  .hc-quote { -webkit-line-clamp: 1; }
}