/* 할로윈위크 이벤트 팔레트 + 섹션 스타일.
   common.css 다음에 로드한다 (공용 변수/컴포넌트를 덮어쓴다).

   레이아웃 규칙 (피그마 880 프레임 기준)
   - 페이지는 최대 880px, 그 안의 콘텐츠 컬럼은 최대 480px 가운데 정렬.
     피그마의 880 프레임 / 중앙 480 컬럼 구조를 그대로 옮긴 것이다.
   - 풀블리드 장식(히어로 · 보상 섹션 배경)은 880 폭으로 그려져 있고
     `min(880px, 183.333%)` 로 깐다. 183.333% = 880÷480 이므로
       · 480 이하: 컬럼 폭에 비례해 축소되며 좌우가 균등하게 잘린다
       · 480~880: 880 그대로 깔리고 잘리는 양만 줄어든다
       · 880: 잘림 없이 피그마 원본 구도가 통째로 보인다 */

/* 이벤트 디스플레이 폰트 (피그마의 GS_HYEJAROUN:Bold) */
@font-face {
  font-family: 'GSHyejaroun';
  font-weight: 700;
  src: url('../fonts/halloween/GSHyejaroun-Bold.ttf') format('truetype');
  font-display: swap;
}

:root {
  --col-max: 480px;   /* 콘텐츠 컬럼 */
  --page-max: 880px;  /* 풀블리드 장식 원본 폭 */
  --page-bg: #060E28;

  /* 할로윈 팔레트 */
  --hw-card: #0A1435;      /* 카드/랭킹 배경 */
  --hw-line: #18254F;      /* 디바이더 · 비활성 탭 */
  --hw-muted: #3F4F83;     /* 비활성 탭 텍스트 */
  --hw-orange: #FF6C28;    /* 강조(활성 탭 · 내 랭킹) */
  --hw-orange2: #FE6C25;   /* 랭킹 타이틀/점수 */
  --hw-amber: #FFA93F;     /* 닉네임 · 보상 섹션 배경 */
  --hw-yellow: #FFDD00;    /* 날짜 · 참여 횟수 */
  --hw-text2: #F9FCFF;     /* textSecondary */
  --hw-text3: #CED6E4;     /* textTertiary */
}

body { color: var(--hw-text3); }

/* 페이지는 880까지 넓어지고(= 풀블리드 장식의 원본 폭) 바깥은 페이지 배경 */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}
/* 페이지가 880이어도 본문은 480 컬럼에 머문다 */
.hero-dates,
.section,
.reward-inner,
.notice-foot {
  max-width: var(--col-max);
  margin-left: auto;
  margin-right: auto;
}

/* ───────── 헤더 ───────── */
.header { top: 52px; }
.header .col { padding: 0 20px; }

/* ───────── 히어로 (section-01) ─────────
   hero.webp = 880×330 (피그마 section-01에서 헤더 버튼·날짜 텍스트 제거) */
.hero { position: relative; overflow: hidden; }
.hero-art {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--page-max), 183.3333%);
  max-width: none;
  height: auto;
}
.hero-dates {
  padding: 4px 20px 0;
  text-align: center;
  color: var(--hw-yellow);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* ───────── 섹션 공통 ───────── */
.section { padding: 0 20px; }
.sec-gap { height: 40px; }

/* ───────── 게임 카드 (section-02 / play) ───────── */
.game-card {
  background: var(--hw-card);
  border-radius: 20px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.game-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
}
.game-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 4px;
}
.game-title {
  font-family: 'GSHyejaroun', 'SeoulAlrim', 'Freesentation', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
}
.game-desc {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #FE6D21;
}
.game-icon { width: 52px; height: 52px; flex-shrink: 0; display: block; }

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
.score-left { display: flex; align-items: center; gap: 8px; color: var(--hw-text3); }
.score-left img { width: 16px; height: 16px; display: block; }
.score-val { color: var(--hw-text2); }
/* 게임 미참여 — 점수 자리에 '-' */
.score-val.none { color: var(--hw-text3); }

.game-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
/* 카드 안에서는 tertiary 버튼도 꽉 차게 */
.game-actions .btn.tertiary { width: 100%; }

.play-count {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
}
.play-count .label { color: var(--hw-text3); font-weight: 500; }
.play-count .value { color: var(--hw-yellow); font-weight: 700; }

.divider {
  height: 1px;
  background: var(--hw-line);
  margin: 12px 0;
}
/* 랭킹 ↔ 앱 링크 사이는 28px (피그마 section-02 기준) */
.divider.wide { margin: 28px 0; }

/* ───────── 랭킹 ───────── */
.rank {
  background: var(--hw-card);
  border-radius: 20px;
  padding: 20px 0 0;
  overflow: hidden;
}
.rank-tabs { display: flex; height: 40px; padding: 0 20px; }
.rank-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  background: var(--hw-line);
  color: var(--hw-muted);
  font: 500 16px/24px 'Freesentation', sans-serif;
  cursor: pointer;
}
.rank-tab.on { background: var(--hw-orange); color: var(--hw-card); }

/* 랭킹 본문 — 피그마 rankList 와 동일하게 392px 고정 + 내부 스크롤.
   행만 있을 땐 스크롤되고, 비어있음 안내가 있으면 남는 높이를 채운다. */
.rank-body {
  height: 392px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.rank-body::-webkit-scrollbar { width: 4px; }
.rank-body::-webkit-scrollbar-thumb { background: var(--hw-line); border-radius: 2px; }
.rank-list { padding: 20px 0; flex-shrink: 0; }
.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}
.rank-no {
  width: 16px;
  margin-right: 16px;
  flex-shrink: 0;
  font-family: 'Pally', 'Freesentation', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: #060E28;
}
.rank-user { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.rank-avatar { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.rank-avatar img {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
}
.rank-avatar .ring {
  position: absolute;
  inset: 2px;
  border: 2px solid var(--hw-amber);
  border-radius: 12px;
}
.rank-profile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-family: 'SeoulAlrim', 'Freesentation', sans-serif;
  font-weight: 900;
}
.rank-profile .t {
  font-size: 12px;
  line-height: 14px;
  color: var(--hw-orange2);
}
.rank-profile .n {
  font-size: 16px;
  line-height: 20px;
  color: var(--hw-amber);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-score {
  flex-shrink: 0;
  padding-left: 12px;
  font-family: 'Pally', 'Freesentation', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--hw-orange2);
}
/* 내 순위 하이라이트 */
.rank-row.me { background: var(--hw-orange); }
.rank-row.me .rank-no { color: var(--hw-amber); }
.rank-row.me .rank-avatar .ring { border-color: var(--hw-card); }
.rank-row.me .rank-profile .t { color: var(--hw-line); }
.rank-row.me .rank-profile .n { color: var(--hw-card); }
.rank-row.me .rank-score { color: var(--hw-line); }

/* 랭킹 비어있을 때 — 남는 높이를 채우고 가운데 정렬 */
.rank-empty {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}
.rank-empty p {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--hw-text3);
  white-space: pre-line;
}

/* ───────── 앱 다운로드 링크 ───────── */
.app-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 4px;
}
.app-link .left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.app-link img { width: 48px; height: 48px; border-radius: 12px; display: block; flex-shrink: 0; }
.app-link .desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  white-space: pre-line;
}
.app-link .dl {
  flex-shrink: 0;
  font-family: 'SeoulAlrim', 'Freesentation', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #F4FBFF;
  text-decoration: none;
  border-bottom: 1px solid #F4FBFF;
  padding-bottom: 3px;
  cursor: pointer;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
}

/* ───────── 보상 안내 (section-03) ─────────
   reward-bg.webp = 880×336 (피그마 벡터 재구성, 텍스트 없음) */
.reward {
  position: relative;
  overflow: hidden;
  background: #FFA93F;
}
/* 880×336 원본 비율을 유지한 채 바닥에 붙인다. 위쪽 여백은 .reward의
   배경색(#FFA93F — 아트 상단과 동일)이 그대로 이어받는다. */
.reward-art {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(var(--page-max), 183.3333%);
  max-width: none;
  height: auto;
}
.reward-inner {
  position: relative;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.reward-badge {
  background: #060E28;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.reward-char { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.reward-char .fig { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reward-char img { width: 124px; height: 97px; display: block; }
.reward-char .label { text-align: center; }
.reward-char .label .k {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hw-line);
}
.reward-char .label .n {
  margin-top: 4px;
  font-family: 'SeoulAlrim', 'Freesentation', sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 20px;
  color: #060E28;
}
/* 설명 2줄 + 앱 설치 안내 한 줄 (피그마 body 프레임, gap 8) */
.reward-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.reward-desc {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--hw-line);
  white-space: pre-line;
}
.reward-note {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hw-line);
}

/* ───────── 유의사항 ───────── */
.notice-foot {
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
  color: var(--hw-text3);
  font-size: 14px;
  line-height: 20px;
}
.notice-foot h4 { margin: 0 0 16px; font-size: 14px; font-weight: 700; }
.notice-foot ul { margin: 0; padding: 0; list-style: none; }
.notice-foot li { font-weight: 500; }
.notice-foot li + li { margin-top: 8px; }

/* ───────── 개발 환경 배지 (dev 도메인·localhost 에서만 렌더됨) ─────────
   헤더 행(.header .col, space-between) 안에서 뒤로가기·공유 사이 가운데 칸. */
.env-badge {
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--hw-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}