/* ============================
   한게임 추석특선 · 신맞고 모바일
   Figma 기준 스펙 (375px)
   ============================ */

/* --- 컬러 변수 (피그마 변수 세트 대응) ---
   6종 복제 시 게임별로 --color-brand / CTA 그라디언트만 교체 */
:root {
  /* 텍스트 */
  --color-text: #373737;        /* 본문·제목 텍스트 */
  --color-text-sub: #7c7c7c;    /* 보조 텍스트 */
  --color-text-weak: #acacac;   /* 약한 텍스트 (리뷰 닉네임) */
  --color-text-dark: #121212;   /* 짙은 텍스트 (경품 뱃지) */
  --prize-badge-text: var(--color-text-dark); /* 경품 뱃지 텍스트 (brand가 어두운 홀덤만 #fff 오버라이드) */
  /* 브랜드·포인트 */
  --color-brand: #ff503e;       /* 게임 키컬러 (신맞고) */
  --color-cta-from: #ff164f;    /* CTA 그라디언트 시작 */
  --color-cta-to: #ff6736;      /* CTA 그라디언트 끝 */
  --color-live-dot: #ff264b;    /* 히어로 뱃지 점 */
  --color-red-50: #feefe6;      /* 팝업 뱃지 배경 (Foundation/Red/red-50) */
  --color-orange: #f56000;      /* 팝업 뱃지 텍스트 */
  /* 라인·배경 */
  --color-line: #eaeaea;        /* 라인·디바이더 */
  --color-line-weak: #e7e7e7;   /* 리뷰 구분선 */
  --color-bg: #f2f2f2;          /* 페이지 배경 그라디언트 하단 */
  --color-bg-box: #fafafa;      /* URL 박스 배경 */
  --color-bg-footer: #e3e3e3;   /* 푸터 배경 */
  --color-bg-pc: #111;          /* PC 뷰포트 배경 */
  /* placeholder (에셋 로딩 전) */
  --color-ph: #d9d9d9;
  --color-ph-dark: #c4c4c4;
  --color-ph-light: #f5f5f5;
}

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light only;
  background: linear-gradient(180deg, #fff 17%, var(--color-bg) 63%);
}
body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  word-break: keep-all; /* 어절(공백) 단위 줄바꿈 — 디자이너 요청(8/25) */
  overflow-wrap: break-word; /* 긴 영문·URL이 한 어절일 때 넘침 방지 보완 */
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* 모바일 콘텐츠 폭 제한 (02-8) — body에 max-width 없으므로 개별 섹션에서 제한.
   배경 풀 블리드 섹션(.reviews, .footer, .sticky-cta)은 제외하고 미디어 쿼리로 처리 */
@media (max-width: 999px) and (orientation: portrait) {
  .header, .hero, .prizes, .events, .browse { max-width: 400px; margin-left: auto; margin-right: auto; }
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: transparent; cursor: pointer; }
dl, dt, dd { margin: 0; }
ul { list-style: none; }

/* 스크린리더 전용 텍스트 */
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 헤더 --- */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 8px;
}
.header__logo img { height: 35px; width: auto; }

/* --- 히어로 섹션 --- */
.hero { padding: 0 16px; }

.hero__poster {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: 8px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.36px;
  color: var(--color-text);
}
.hero__badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-live-dot); /* 시안 ver2.1의 정적 ● — 모션 사양 없음(요건서 애니메이션 「없음」) */
}

.hero__visual {
  position: relative;
  align-self: stretch;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4; /* 8/21 정정: 크롭(55vh 상한·center 30%) 폐기 — 포스터 원본 비율 그대로 */
  background: var(--color-ph);
  box-shadow: 2px 14px 30px 0 rgba(0, 0, 0, 0.3);
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__desc {
  padding: 12px;
}
.hero__desc p {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.26px;
  color: var(--color-text);
}

/* --- 이벤트 요약 정보 바 --- */
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  padding: 12px 0 18px;
}
.info-bar__item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-line);
  flex-shrink: 0;
}
.info-bar__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.info-bar__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.24px;
  color: var(--color-text-sub);
}
.info-bar__value {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.42px;
  color: var(--color-text);
}

/* --- 경품 미리보기 --- */
.hero__preview {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.24px;
  color: var(--color-text-sub);
}

/* --- CTA 버튼 --- */
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--color-cta-from) 0%, var(--color-cta-to) 100%);
  box-shadow: 1px 5px 15px 0 rgba(233, 86, 27, 0.4);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -0.03em; /* 피그마 149:13023 CTA 텍스트 */
  text-align: center;
}
/* 피그마 「좁은해상도」 변형(149:13023): 360px 이하 14px 기준 뷰포트 비례 축소, 하한 12px(접근성 최소 크기, ~308px에서 도달) */
@media (max-width: 360px) {
  .cta-btn { font-size: clamp(12px, calc(14 / 360 * 100vw), 14px); }
}

/* --- 참여 방법 --- */
.hero__steps {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.24px;
  color: var(--color-text-sub);
}
.hero__steps strong {
  font-weight: 700;
  color: var(--color-text);
}

/* --- 공통 섹션 헤더 --- */
.section-header { display: flex; flex-direction: column; gap: 1px; }
.section-header__label {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--color-brand);
}
.section-header__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: #000;
}
.section-header__desc {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--color-text-sub);
}

/* --- 경품 소개 섹션 --- */
.prizes {
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prizes__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prize-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.prize-card__img {
  position: relative;
  background: var(--color-ph);
  overflow: hidden;
}
.prize-card--main .prize-card__img { height: 196px; }
.prize-card--sub .prize-card__img { height: 135px; }
.prize-card__img img { width: 100%; height: 100%; object-fit: cover; }

.prize-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 20px;
  padding: 0 6px;
  border-radius: 46px;
  background: var(--color-brand);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.5px;
  color: var(--prize-badge-text);
}
.prize-card__body { padding: 8px; }
.prize-card__name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: #000;
}
.prize-card__sep {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #000;
  flex-shrink: 0;
}
.prize-card__desc {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--color-text-sub);
}

.prizes__sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.prizes__sub .prize-card__desc {
  letter-spacing: -0.05em;
}

/* --- 한줄평 섹션 --- */
.reviews {
  background: #fff;
  padding: 25px 16px 40px;
}
.reviews__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
}
.reviews__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: #000;
}

.reviews__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-item {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line-weak);
}
.review-item__term {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
}
.review-item__stars {
  display: flex;
  gap: 2px;
}
/* 별 모양은 mask, 색은 background-color — 채움색이 --color-brand를 따라 6종 자동 적용 */
.star {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #eaeaea;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0l2.15 4.36 4.81.7-3.48 3.39.82 4.8L7 11.07 2.7 13.25l.82-4.8L0.04 5.06l4.81-.7L7 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0l2.15 4.36 4.81.7-3.48 3.39.82 4.8L7 11.07 2.7 13.25l.82-4.8L0.04 5.06l4.81-.7L7 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.star.filled {
  background-color: var(--color-brand);
}
.star.half {
  background-image: linear-gradient(90deg, var(--color-brand) 50%, #eaeaea 50%);
}

.review-item__nick {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: var(--color-text-weak);
}
.review-item__quote {
  height: 21px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.reviews__caption {
  display: flex;
  align-items: center;
  height: 42px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.22px;
  color: var(--color-text-sub);
}

/* --- 이벤트 안내 섹션 --- */
.events {
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.events__viewport {
  position: relative;
}
.events__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 캐러셀 화살표 — 모바일에선 항상 숨김, PC에서 오버플로 시 JS가 .on 부여 */
.events__arrow {
  display: none;
}
.event-card {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.event-card__img {
  aspect-ratio: 1029 / 615; /* 원본 비율 유지 (02-3: 343×205 @ 360px) */
  background: var(--color-ph);
  overflow: hidden;
}
.event-card__img img { width: 100%; height: 100%; object-fit: cover; }
.event-card__body {
  padding: 10px 8px;
}
/* 이름+날짜 헤드행 — 설명글은 아래에서 전체폭 사용 (PC 278px 카드에서 줄바꿈 방지) */
.event-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.event-card__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: #000;
}
.event-card__desc {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--color-text-sub);
}
.event-card__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--color-brand);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.02em;
  color: var(--color-brand);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- 둘러보기 --- */
.browse {
  height: 290px;
}
.browse__title {
  padding: 0 16px 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.4px;
  color: #000;
}
.browse__scroll {
  height: 240px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.browse__scroll::-webkit-scrollbar { display: none; }
.browse__scroll.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.browse__row {
  display: flex;
  gap: 12px;
  padding: 0 16px;
  width: max-content;
}
.browse-card {
  display: flex;
  flex-direction: column;
  width: 129px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.browse-card__img {
  width: 129px;
  height: 172px;
  background: var(--color-ph-dark); /* 썸네일 에셋 전달 전 placeholder (Figma 기준) */
  overflow: hidden;
}
.browse-card__img img { width: 100%; height: 100%; object-fit: cover; }
.browse-card__name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-align: center;
}
.browse-card__name .nav-suffix { font-size: 11px; font-weight: 700; }

/* --- 푸터 --- */
.footer {
  background: var(--color-bg-footer);
  padding: 40px 16px 104px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 유의사항 */
.notice { display: flex; flex-direction: column; gap: 8px; }
.notice__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.42px;
  color: #000;
}
.notice__list { display: flex; flex-direction: column; }
.notice__item { display: flex; flex-direction: column; min-height: 24px; }
.notice__label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.24px;
  color: var(--color-text);
}
.notice__label:not(:empty)::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--color-text);
  flex-shrink: 0;
}
.notice__label--plain {
  font-weight: 500;
  line-height: 24px; /* 피그마 푸터(공통) 본문 유의 lh24 */
}
.notice__label--footnote {
  line-height: 22px; /* 피그마 하단 고지 4종 lh22 */
}

/* 푸터 로고 */
.footer__logo img { display: block; }

/* 사업자 정보·등급분류·면책 (3차 수정요청 260902 — Google 심사) */
.footer-corp {
  margin-top: -24px; /* .footer gap 40px → 로고와 16px (요청: 로고와 너무 떨어지지 않게) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.22px;
  color: var(--color-text-sub);
}
.footer-corp__toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  list-style: none; /* 기본 ▶ 마커 제거 */
  cursor: pointer;
}
.footer-corp__toggle::-webkit-details-marker { display: none; }
/* 셰브론은 mask + currentColor — 열림 시 180° 회전으로 ∨/∧ 겸용 (전달 SVG chevron_nhn 패스) */
.footer-corp__toggle::after {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.293 8.29297L19.7072 9.70718L12.7072 16.7072H11.293L4.29297 9.70718L5.70718 8.29297L12.0001 14.5851L18.293 8.29297Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.293 8.29297L19.7072 9.70718L12.7072 16.7072H11.293L4.29297 9.70718L5.70718 8.29297L12.0001 14.5851L18.293 8.29297Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.footer-corp__grade[open] .footer-corp__toggle::after { transform: rotate(180deg); }
.footer-corp__table { margin-top: 4px; border-collapse: collapse; }
.footer-corp__table th,
.footer-corp__table td {
  padding: 0;
  font-weight: 500;
  text-align: left;
  vertical-align: top;
}
.footer-corp__table th {
  padding-right: 12px;
  white-space: nowrap;
}

/* --- 하단 고정 CTA --- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  visibility: hidden; /* 숨김 상태에서 내부 CTA 탭 포커스 제외 */
  transition: transform .25s ease, visibility .25s;
  z-index: 100;
}
.sticky-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(214, 214, 214, 0.55) 0%, rgba(214, 214, 214, 0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(0deg, #000 50%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 50%, transparent 100%);
  z-index: -1;
}
.sticky-cta.is-visible { transform: translateY(0); visibility: visible; }

.cta-btn--sticky {
  gap: 6px; /* 피그마 149:13023 status=scroll */
}
/* 텍스트·날짜는 .cta-btn 크기(16px, 370px 이하 가변)를 그대로 상속 — 피그마에서 둘이 항상 동일 크기 */
.cta-btn__divider {
  width: 1px;
  height: 12px;
  background: #fff;
}
.cta-btn__date {
  letter-spacing: -0.02em; /* 피그마 149:13023 — 크기·굵기·색은 본문과 동일(상속) */
}
/* 피그마 cta 컴포넌트(149:13023) status=좁은해상도 — 뷰포트 360px 이하에선 14px로 가변 */

/* --- 팝업 공통 --- */
.popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup[hidden] { display: none; }
.popup__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}
.popup__box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 40px 40px 32px;
  text-align: center;
  z-index: 1;
}
.popup__title {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #000;
}
.popup__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--color-text);
}
.popup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--color-cta-from) 0%, var(--color-cta-to) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup__close img { width: 24px; height: 24px; display: block; }

/* 팝업: 웹뷰 진입 */
.popup--wv .popup__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.popup--wv .popup__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 팝업: PC 전용 안내 */
.popup--pca .popup__box {
  width: 298px; /* 피그마 912:2966 */
  padding: 40px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.popup--pca .popup__close { right: 13px; } /* Figma: x=277 (박스폭 314 기준) */
.popup--pca .popup__content {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  gap: 16px;
}
.popup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.popup__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup__badge-pill {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-red-50);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--color-orange);
}
.popup__badge-arrow {
  width: 9px;
  height: 8px;
}
.popup__url-section {
  position: relative; /* 복사완료 토스트 기준점 */
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 4px;
}
.popup__url-label {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--color-text-sub);
}
.popup__url-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 8px 16px;
  background: var(--color-bg-box);
  border: 1px solid var(--color-line);
  border-radius: 8px;
}
.popup__url {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--color-text);
  user-select: all;
}
.popup__url-copy {
  display: flex;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  flex-shrink: 0;
  cursor: pointer;
}
/* 복사완료 토스트 (피그마 761:3286) — URL 박스 아래 중앙, 3초 노출 후 JS가 hidden 처리 */
.popup__copy-toast {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(4px);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  z-index: 1;
}
.popup__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.popup__divider {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  gap: 4px;
}
.popup__divider::before,
.popup__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-line);
}
.popup__divider-text {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--color-text-sub);
  white-space: nowrap;
}

/* 팝업: QR (PC 상태에서 CTA 클릭 시 노출 / 여는 조건은 개발 파트) — 피그마 610:2739 QR_팝업 */
.popup--qr .popup__box {
  width: 176px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border: 0.5px solid var(--color-line);
}
.popup--qr .popup__close {
  top: 9px;
  right: 9px;
}
.popup--qr .popup__title {
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap; /* 피그마 텍스트는 hug — 카드 패딩(28px) 침범 허용, 줄바꿈은 <br>로만 */
}
.popup--qr .popup__title em {
  font-style: normal;
  color: var(--color-brand);
}
.popup--qr .popup__desc {
  padding-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-sub);
  white-space: nowrap;
}
.popup__qr-img {
  display: block;
  width: 104px; /* 피그마 610:2739: 104×104 + 패딩 4 → QR 94×94 */
  height: 104px;
  padding: 5px;
  border-radius: 4px;
  background: #fff;
}
.popup__qr-img img {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- 자기 편 상태 (body.is-self) --- */
/* 클래스 부여는 개발 몫(host 판정, 8/21 코멘트) : 자기 게임 페이지에선 접속 유도 3종 숨김 */
body.is-self .cta-btn--inline,
body.is-self .hero__steps,
body.is-self .sticky-cta {
  display: none;
}

/* --- 하단 safe area 여백 --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

/* [D] Case View : 마크업 확인용 / 개발시 적용 제외 */
.case_view_wrap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 230px;
  z-index: 900;
  line-height: 20px;
}
.case_view_box {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #000;
  opacity: 0.9;
}
.case_view_box .title {
  margin-bottom: 6px;
  font-size: 15px;
  color: yellow;
  border-bottom: 1px solid #fff;
  line-height: 30px;
  font-weight: bold;
  cursor: move; /* 드래그로 위치 이동 가능 */
  touch-action: none; /* 터치 드래그 시 스크롤 방지 */
  user-select: none;
}
.case_view_wrap a {
  display: block;
  font-size: 13px;
  text-align: left;
  color: #fff;
  text-decoration: none;
}
.case_view_wrap a:active,
.case_view_wrap a:hover {
  color: orange;
}
.case_view_wrap .vlist {
  overflow-y: auto;
  height: 85%;
}

/* ==================================================
   PC 레이아웃 (≥1000px) : 모바일 골격 그대로 + 좌우 레일
   PC 상태 클래스: body.is-pc (JS matchMedia로 동기화, 개발 파트 팝업 분기용)
   - 좌: 로고 + 6종 메뉴 / 우: QR 박스
   - 배경: 키비주얼 blur+딤 (pc_bg 에셋 전달 시 교체)
   ================================================== */
.pc-rail { display: none; }


/* 02-8: 모바일 400px+ 배경 풀 블리드 — body에 max-width 없으므로 콘텐츠 패딩으로 제한 (portrait만 — landscape는 body max-width 400px) */
@media (max-width: 999px) and (orientation: portrait) {
  .reviews {
    padding-left: max(16px, calc((100vw - 400px) / 2 + 16px));
    padding-right: max(16px, calc((100vw - 400px) / 2 + 16px));
  }
  .footer {
    padding-left: max(16px, calc((100vw - 400px) / 2 + 16px));
    padding-right: max(16px, calc((100vw - 400px) / 2 + 16px));
  }
  .sticky-cta {
    padding-left: max(16px, calc((100vw - 400px) / 2 + 16px));
    padding-right: max(16px, calc((100vw - 400px) / 2 + 16px));
  }
}

/* ==================================================
   배경 키비주얼 딤+블러 — PC(≥1000px) + 가로 웹뷰(landscape) 공통
   (피그마 484:14454 가로 웹뷰 : 콘텐츠 제외한 좌우 여백은
    PC와 동일하게 포스터 블러(15px)+딤드 Black 50% 처리)
   컬럼 폭은 각자 유지 — 가로 웹뷰는 base 400px(피그마 484:14454), PC는 아래 블록 600px
   ================================================== */
@media (min-width: 1000px), (orientation: landscape) {
  html { background: var(--color-bg-pc); }
  body { max-width: 400px; margin: 0 auto; background: linear-gradient(180deg, #fff 17%, var(--color-bg) 63%); }
  .sticky-cta { max-width: 400px; margin: 0 auto; }
  /* 배경 키비주얼 + 딤/블러 (피그마 PC_Dark 원본 에셋) */
  body::before {
    content: '';
    position: fixed;
    inset: -40px;
    z-index: -1;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) center / cover no-repeat; /* 배경 이미지는 BRAND_CSS에서 slug별 주입 */
    filter: blur(15px);
  }
}

/* ==================================================
   PC 오버라이드 (≥1000px) — 구 css/pc.css 병합 (8/25 한벌 확정)
   ================================================== */
@media (min-width: 1000px) {
  body { max-width: 600px; margin: 0 auto; }
  /* 헤더(추석특선 로고)는 피그마 PC 컬럼 상단에도 존재 → 모바일 그대로 표시 */
  .sticky-cta { display: none; }
  /* PC는 좌측 GNB가 타이틀 이동 대체 → 둘러보기 숨김 (PC 시안 확인, 8/21) */
  .browse { display: none; }
  .hero__visual { max-height: none; }
  .footer { padding-bottom: 64px; }

  /* 경품 이미지: 모바일 고정 높이 그대로 두면 cover 크롭으로 하단('9월 16일 대공개') 잘림
     (피그마 PC: 메인 h324.57, 서브 h227) */
  .prize-card--main .prize-card__img { height: 325px; }
  .prize-card--sub .prize-card__img { height: 227px; }

  /* 인게임 이벤트 카드 2열 (피그마: 이벤트 카드 목록 row, gap 12, 이미지 h166) */
  .events__cards {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .events__cards::-webkit-scrollbar { display: none; }
  .event-card {
    flex: 1;
    min-width: 0;
  }
  .event-card__img { aspect-ratio: 1029 / 615; /* PC도 원본 비율 유지 */ }

  /* 카드 3장 = 캐러셀 (클래식, 피그마 473:7190/496:14800 — 카드 240 고정, 창 568에 176px 오버플로) */
  /* 뷰포트를 좌우 패딩 밖까지 블리드(100% + 32px) — 스크롤 시 카드가 컬럼 끝까지 가고,
     정지 상태에선 스크롤러 안쪽 padding 16px로 첫/마지막 카드 여백 유지 */
  .events__viewport:has(.event-card:nth-child(3)) { margin: 0 -16px; }
  .events__cards:has(> .event-card:nth-child(3)) {
    padding: 0 16px;
    cursor: grab;
  }
  .events__cards:has(> .event-card:nth-child(3)).is-dragging { cursor: grabbing; }
  .events__cards:has(> .event-card:nth-child(3)) .event-card { flex: 0 0 240px; }
  .events__cards:has(> .event-card:nth-child(3)) .event-card__img { aspect-ratio: 1029 / 615; }

  /* 캐러셀 화살표 : 36×36 흰 원, 카드 세로 중앙, 창 좌/우 끝 (피그마 btn_arrow 496:14980) */
  .events__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }
  .events__arrow.on { display: flex; }
  .events__arrow--prev { left: 16px; }
  .events__arrow--next { right: 16px; }

  /* --- 좌측 레일 : 로고 + 메뉴 --- */
  .pc-rail--left {
    display: block;
    position: fixed;
    top: 24px;
    right: calc(50% + 324px);
    width: 176px;
    z-index: 50;
  }
  .pc-rail__logo img {
    width: 176px;
    height: auto;
  }
  .pc-rail__menu {
    display: flex;
    flex-direction: column;
    padding-top: 24px;
  }
  .pc-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-top: 16px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--color-line);
  }
  .pc-menu:hover { background: rgba(0, 0, 0, 0.4); }
  .pc-menu.is-active {
    background: rgba(0, 0, 0, 0.7);
    font-weight: 700;
    color: #fff;
  }
  .pc-menu__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
  }
  .pc-menu__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pc-menu .nav-suffix {
    font-size: 12px;
    vertical-align: middle;
  }

  /* --- 우측 레일 : QR 박스 --- */
  .pc-rail--right {
    display: block;
    position: fixed;
    bottom: 24px; /* 피그마: QR 박스 하단 y=1036, 뷰포트 1060 기준 24px */
    left: calc(50% + 324px);
    width: 176px;
    z-index: 50;
  }
  .pc-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    text-align: center;
  }
  .pc-qr__img {
    width: 88px;
    height: 88px;
    padding: 5px; /* 피그마 414:1009: 88 박스 안 QR 78 */
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
  }
  .pc-qr__img img {
    width: 100%;
    height: 100%;
  }
  .pc-qr__title {
    padding-top: 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--color-text);
    white-space: nowrap;
  }
  .pc-qr__title em {
    font-style: normal;
    color: var(--color-brand);
  }
  .pc-qr__desc {
    padding-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--color-text-sub);
    white-space: nowrap;
  }
}