/* ============================================================
   잡템키우기 RPG — 스타일
   ------------------------------------------------------------
   ★ 색상을 바꾸려면 바로 아래 :root 블록만 고치세요.
     페이지 전체에 한 번에 반영됩니다.

   테마: 밝은 잔디 — 배경색과 텍스처를 스크린샷 속 잔디에서 가져왔습니다.
   ============================================================ */

:root {
  /* ---------- 색상 ---------- */
  --c-bg:         #659042;   /* 페이지 기본 배경 (스크린샷 잔디에서 추출) */
  --c-panel:      #faf6e6;   /* 카드/패널 배경 — 크림 */
  --c-well:       #e8dfc4;   /* 입력칸·게이지처럼 쑥 들어간 칸 */
  --c-border:     #3c2614;   /* 테두리 */
  --c-border-lit: #2a7d1f;   /* 강조된 테두리 (마우스 올렸을 때) */
  --c-text:       #2c1a0d;   /* 패널 안 본문 글자 */
  --c-dim:        #5f4a33;   /* 패널 안 흐린 글자 */
  --c-accent:     #5d8f34;   /* 강조색 — 버튼, 숫자 */
  --c-accent-dk:  #3d6420;   /* 강조색 그림자 */
  --c-btn-text:   #ffffff;   /* 버튼 글자색 */
  --c-good:       #256b31;   /* 달성/성공 표시 */
  --c-error:      #a3271b;   /* 오류 문구 */

  /* 배경(잔디) 위에 바로 얹히는 글자
     잔디 무늬가 어지러워서 흰 글자만으로는 잘 안 읽힙니다.
     외곽선을 두르는 방식은 아래 "잔디 배경 위 글자의 외곽선" 항목 참고. */
  --c-over:       #fffdf2;                 /* 살짝 따뜻한 흰색 */
  --c-over-dim:   #fdf6dc;
  --c-over-mark:  #ffd873;                 /* 제목 양옆 장식 — 금색 */
  --c-over-edge:  #2b1636;                 /* 외곽선 색 — 홍보 이미지와 동일한 짙은 자주 */
  --over-shadow:
    -2px -2px 0 var(--c-over-edge),  0 -2px 0 var(--c-over-edge),  2px -2px 0 var(--c-over-edge),
    -2px  0   0 var(--c-over-edge),                                2px  0   0 var(--c-over-edge),
    -2px  2px 0 var(--c-over-edge),  0  2px 0 var(--c-over-edge),  2px  2px 0 var(--c-over-edge),
     4px  4px 0 rgba(12,24,6,.45);
  --c-hero-sub:   #ffe08a;                 /* 부제는 금색으로 구분 */

  /* 테마별 부품 */
  /* 페이지 전체에 깔리는 잔디 텍스처 (body::before 에 고정) —
     스크린샷 속 잔디와 이어져 보이게 하는 핵심입니다 */
  --page-layer: url("../assets/images/bg-grass.png") center center / cover no-repeat;
  /* 히어로는 그늘만 얹습니다. 배경 텍스처는 위 레이어가 그대로 비쳐 경계가 생기지 않습니다 */
  --hero-bg:
    radial-gradient(ellipse at 50% 46%, rgba(16,34,10,.5) 0%, rgba(16,34,10,.12) 58%, transparent 78%);
  --showcase-border: 4px solid var(--c-border);

  /* 폰트 (index.html 에서 불러옵니다 · 둘 다 OFL, 상업용 무료)
     제목은 스크린샷 이미지 속 큰 글자와 같은 Gothic A1 900,
     본문은 스크린샷 이미지 속 설명글과 같은 Pretendard 입니다.
     이미지와 페이지의 글자가 같은 폰트라 한 덩어리로 보입니다. */
  --f-title: "Gothic A1", "Pretendard Variable", Pretendard, sans-serif;
  --f-body:  "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --w-title: 900;

  /* 간격 */
  --gutter: 16px;
  --section-pad: 72px;
  --showcase-gap: 64px;
}

/* ---------- 기본 초기화 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden 속성이 확실히 먹히게 합니다.
   .form 처럼 display 를 직접 지정한 요소는 hidden 이 걸려도 그대로 보입니다
   (브라우저 기본 display:none 보다 우리 CSS 가 우선이라서).
   확인 단계를 만들면서 폼이 안 사라지는 문제를 겪었습니다. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.85;

  /* 한글 줄바꿈 처리 —
     word-break: keep-all    "소환수를" 같은 낱말을 중간에서 끊지 않습니다.
                             (브라우저 기본값은 한글을 아무 데서나 끊습니다)
     overflow-wrap           단, 이메일 주소처럼 띄어쓰기 없는 긴 덩어리는
                             어쩔 수 없이 끊어서 화면 밖으로 나가지 않게 합니다.
     text-wrap: pretty       마지막 줄에 글자 한두 개만 덩그러니 남는 것을 막습니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  /* -webkit-font-smoothing: none 을 쓰지 않는 이유:
     글자 테두리(-webkit-text-stroke)를 두르는데 안티앨리어싱을 꺼버리면
     테두리가 계단처럼 깨집니다. 특히 폰에서 심합니다. */
  overflow-x: hidden;
}

/* 배경 텍스처를 화면에 고정시켜 깝니다.
   body 에 background-attachment:fixed 를 직접 주면 iOS에서 확대되는 버그가 있어
   가짜 요소를 화면 크기로 고정해 쓰는 방식입니다. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: var(--page-layer);
}

/* image-rendering: pixelated 를 쓰지 않는 이유:
   로고와 스크린샷은 이미 완성된 합성 이미지입니다(도트 그림 + 안티앨리어싱된 한글).
   pixelated 를 걸면 고해상도 화면(레티나 등)에서 브라우저가 이미지를 확대할 때
   계단처럼 깨져 보입니다. 부드럽게 확대되도록 기본값(auto)으로 둡니다.
   낱개 도트 스프라이트를 정수배로 키워 쓸 때만 pixelated 를 따로 거세요. */
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: var(--c-accent); }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 520px; }

/* ---------- 공통 버튼 ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 21px;
  padding: 17px 38px;
  border: 3px solid var(--c-accent-dk);
  background: var(--c-accent);
  color: var(--c-btn-text);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(0,0,0,.55);   /* 흐림 없는 각진 그림자 = 도트 느낌 */
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(0,0,0,.55); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 rgba(0,0,0,.55); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- 1. 히어로 ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 64px var(--gutter);
  background: var(--hero-bg);
  overflow: hidden;
}

/* 최상단 왼쪽 펑크랜드 로고.
   로고 SVG 자체가 흰색(#F5F5F5)이라 잔디 위에서 그대로 읽힙니다.
   그래도 밝은 잔디와 겹치는 부분이 있어 그림자를 살짝 넣었습니다. */
.hero__punkland {
  position: absolute;
  top: 22px; left: 22px;
  z-index: 2;
  line-height: 0;
}
.hero__punkland img {
  width: 116px; height: auto;
  opacity: .95;
  filter: drop-shadow(0 2px 5px rgba(16,28,8,.75));
  transition: opacity .1s steps(2);
}
.hero__punkland:hover img { opacity: 1; }

@media (max-width: 640px) {
  .hero__punkland { top: 14px; left: 14px; }
  .hero__punkland img { width: 92px; }
}

/* 그리드 가운데 정렬만 걸어두면 이 블록의 폭이 "가장 긴 줄"에 맞춰집니다.
   그래서 태그라인이 길어지면 줄바꿈되지 않고 화면 밖으로 삐져나가
   로고와 카운트다운까지 잘립니다. 폭을 화면에 맞춰 묶어 둡니다. */
.hero__inner { position: relative; width: 100%; max-width: 620px; }
.hero__logo { display: block; margin: 0 auto 16px; width: 100%; max-width: 420px; height: auto; }

.hero__subtitle {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  color: var(--c-hero-sub);
  letter-spacing: .22em;
  font-size: clamp(18px, 4.4vw, 23px);
  margin-bottom: 10px;
}
.hero__title {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: clamp(32px, 8.4vw, 62px);
  line-height: 1.3;
  color: var(--c-over);
}
.hero__tagline {
  color: var(--c-over-dim);
  font-size: clamp(19px, 5vw, 26px);
  font-weight: 600;
  text-wrap: balance;   /* 마지막 줄에 "RPG" 만 떨어지던 것 방지 */
  margin-top: 16px;
}

.countdown { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.countdown__unit {
  background: var(--c-panel);
  border: 3px solid var(--c-border);
  padding: 10px 6px;
  min-width: 72px;
}
.countdown__unit b {
  display: block;
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: clamp(28px, 7vw, 36px);
  color: var(--c-accent);
  line-height: 1.2;
}
.countdown__unit span { font-size: clamp(16px, 4vw, 18px); color: var(--c-dim); }
.countdown__label {
  font-size: clamp(17px, 4.2vw, 20px); font-weight: 600; color: var(--c-over-dim);
  margin-top: 14px; letter-spacing: .12em;
}

/* 버튼 초록(#5d8f34)과 잔디(#659042)가 비슷한 색이라 배경에 묻힙니다.
   그래서 플랫폼 뱃지(Android/Web)처럼 바깥에 금색 테두리를 한 겹 더 두릅니다.
   outline 을 쓰면 기존 각진 그림자(box-shadow)를 건드리지 않습니다. */
.hero__cta {
  margin-top: 40px;
  outline: 3px solid var(--c-over-mark);
  /* 금색 테두리 바깥으로도 각진 그림자가 보이도록 기본값(5px)보다 크게 */
  box-shadow: 8px 8px 0 rgba(0,0,0,.5);
}
.hero__cta:hover  { box-shadow: 6px 6px 0 rgba(0,0,0,.5); }
.hero__cta:active { box-shadow: 3px 3px 0 rgba(0,0,0,.5); }

.hero__platforms { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.hero__platforms li {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--c-over);
  background: rgba(20,36,10,.62);
  border: 2px solid var(--c-over-mark);
  padding: 7px 16px 7px 13px;
}
/* 아이콘은 글자 크기를 따라갑니다(1.25em). 색도 글자색을 그대로 씁니다. */
.platform__icon {
  width: 1.25em; height: 1.25em;
  flex: 0 0 auto;
  display: block;
}

.hero__scroll {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: var(--c-over-dim);
  animation: bob 1.4s steps(3) infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* ---------- 잔디 배경 위 글자의 외곽선 ----------
   잔디 무늬 위에서는 글자에 외곽선이 없으면 읽히지 않습니다.

   기본은 text-shadow 를 사방으로 깐 방식인데, 모서리에서 획이 끊겨
   특히 작은 글자에서 지저분해 보입니다.
   그래서 paint-order 를 지원하는 브라우저(요즘 브라우저 전부)에서는
   홍보 이미지와 똑같은 방식으로 바꿉니다:
     -webkit-text-stroke  글자 둘레를 실제로 한 번 그림 (모서리가 둥글게 이어짐)
     paint-order          외곽선을 먼저, 글자를 나중에 → 획이 안쪽을 파먹지 않음
   굵기는 글자 크기의 대략 1/7 로 잡았습니다(홍보 이미지와 같은 비율). */
.hero__subtitle, .hero__title, .hero__tagline, .countdown__label, .footer {
  text-shadow: var(--over-shadow);
}

@supports (paint-order: stroke) {
  .hero__subtitle, .hero__title, .hero__tagline, .countdown__label, .footer {
    text-shadow: none;
    paint-order: stroke fill;
    -webkit-text-stroke-color: var(--c-over-edge);
    filter: drop-shadow(0 3px 5px rgba(20,12,6,.45));
  }
  .hero__title { -webkit-text-stroke-width: 8px; }
  .hero__subtitle, .hero__tagline, .countdown__label,
  .footer { -webkit-text-stroke-width: 3px; }
}

/* ---------- 섹션 공통 ----------
   섹션 제목은 가로를 가득 채우는 크림색 띠(.section__head) 안에 들어갑니다.
   잔디 위에 제목만 떠 있으면 섹션 경계가 흐릿한데, 이 띠가 구분선 역할을 합니다.
   띠 안은 크림 바탕이라 글자에 외곽선을 두르지 않습니다(진한 갈색 글자). */
.section { padding: 0 0 var(--section-pad); }

.section__head {
  background: var(--c-panel);
  border-top: 4px solid var(--c-border);
  border-bottom: 4px solid var(--c-border);
  padding: 26px 0;
  margin-bottom: var(--section-pad);
  text-align: center;
}

/* .section--panel : 제목 띠뿐 아니라 본문까지 통째로 크림 블록인 섹션.
   잔디 위에 크림 카드가 떠 있는 것보다 상자가 덜 겹쳐 단순합니다.
   스크린샷처럼 배경이 잔디인 내용은 잔디 위에 그대로 두는 편이 나으므로
   이 방식은 글자 위주 섹션(사전예약)에만 씁니다. */
.section--panel {
  background: var(--c-panel);
  border-top: 4px solid var(--c-border);
  border-bottom: 4px solid var(--c-border);
}
.section--panel .section__head {
  background: none;
  border: 0;
  margin-bottom: 30px;
}
/* 크림 블록 안에서는 카드 배경/테두리를 벗깁니다 — 이미 크림 위입니다 */
.section--panel .reward,
.section--panel .form {
  background: none;
  border: 0;
  padding: 0;
}
.section--panel .reward { margin-bottom: 34px; }
.section__title {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: clamp(28px, 6.6vw, 44px);
  color: var(--c-text);
  line-height: 1.3;
  text-wrap: balance;
}
.section__desc {
  color: var(--c-dim);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 600;
  margin-top: 6px;
  text-wrap: balance;
}

/* ---------- 2. 플레이 영상 ----------
   유튜브는 재생 버튼을 누르기 전까지 불러오지 않습니다.
   그래서 처음에는 썸네일 + 재생 버튼(.video__cover)만 있고,
   누르면 그 자리에 iframe 이 들어갑니다. */
.video {
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 4px solid var(--c-border);
  box-shadow: 7px 7px 0 rgba(26,16,6,.34);
  background: #1b1520;
  overflow: hidden;
}
.video__el { width: 100%; height: 100%; display: block; border: 0; }

.video__cover {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: #1b1520;
  cursor: pointer;
}
.video__thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .15s steps(2);
}
.video__cover:hover .video__thumb { opacity: 1; }

.video__play {
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92px; height: 68px;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1;
  color: var(--c-btn-text);
  background: var(--c-accent);
  border: 4px solid var(--c-accent-dk);
  box-shadow: 5px 5px 0 rgba(0,0,0,.5);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.video__cover:hover .video__play {
  transform: translate(calc(-50% + 2px), calc(-50% + 2px));
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.video__label {
  position: absolute; left: 0; right: 0; bottom: 18px;
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 18px;
  color: var(--c-over);
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}

@media (max-width: 640px) {
  .video__play { width: 70px; height: 52px; font-size: 24px; }
  .video__label { font-size: 16px; bottom: 12px; }
}

/* ---------- 3. 게임 소개 (특징 + 스크린샷 통합) ---------- */
/* 스크린샷 안에 제목/설명이 이미 그려져 있어서, 화면에는 이미지만 크게 세로로 쌓습니다. */
.showcase { display: grid; gap: var(--showcase-gap); justify-items: center; }
.showcase img {
  width: 100%;
  max-width: 800px;          /* 원본 크기(800px)를 넘겨 늘리면 화질이 떨어집니다 */
  height: auto;
  /* 스크린샷 배경도 잔디, 페이지 배경도 잔디라서
     테두리가 없으면 어디까지가 이미지인지 구분이 안 됩니다 */
  border: var(--showcase-border);
  box-shadow: 7px 7px 0 rgba(26,16,6,.34);   /* 흐림 없는 각진 그림자 = 도트 느낌 */
}

/* ---------- 4. 사전예약 (보상 안내 + 신청 폼) ---------- */
/* 보상 안내와 신청 폼을 한 섹션에 둡니다. 보상 카드가 위, 신청 폼이 바로 아래. */
.reward {
  background: var(--c-panel);
  border: 3px solid var(--c-border);
  padding: 28px 24px;
  margin-bottom: 24px;
}
.reward__heading {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 24px;
  color: var(--c-text);
  line-height: 1.3;
}
.reward__desc {
  font-size: 17px;
  color: var(--c-dim);
  margin: 2px 0 20px;
}
/* 항목이 11개라 넓은 화면에서는 2단으로 나눕니다 (좁으면 자동으로 1단) */
.reward__list { display: grid; gap: 13px 22px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.reward__list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 19px; font-weight: 600;
}
.reward__list li::before {
  content: "◆";

  flex: 0 0 auto;
  line-height: 1.6;
}
.reward__note {
  margin-top: 22px; padding-top: 16px;
  border-top: 2px dashed var(--c-border);
  font-size: 16px; color: var(--c-dim);
}

/* 신청 폼 — 잔디 배경 위에서도 글자가 읽히도록 패널 위에 올립니다 */
.form {
  display: grid; gap: 18px;
  background: var(--c-panel);
  border: 3px solid var(--c-border);
  padding: 28px 24px;
}
.form__row { display: grid; gap: 6px; }
.form__label { font-size: 17px; color: var(--c-dim); }
.form__input {
  font-family: var(--f-body);
  font-size: 18px;
  background: var(--c-well);
  border: 3px solid var(--c-border);
  color: var(--c-text);
  padding: 12px 14px;
  width: 100%;
}
.form__input:focus { outline: none; border-color: var(--c-border-lit); }

/* 입력칸 아래 안내문 */
.form__help {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-dim);
  margin-top: 2px;
}

/* 펑크랜드 회원가입 버튼 — 펑크랜드 사이트 배경색(#17151d)에 흰 로고 */
.btn-punkland {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* 펑크랜드 공식 아이콘 배경의 보라 그라데이션 (아이콘에서 직접 추출) */
  background: linear-gradient(135deg, #7869d0 0%, #5f53b9 100%);
  border: 3px solid #453b8c;
  color: #f5f5f5;
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 17px;
  text-decoration: none;
  padding: 14px 20px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.35);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn-punkland img { width: 118px; height: auto; flex: 0 0 auto; }
.btn-punkland:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(0,0,0,.35); filter: brightness(1.08); }
.btn-punkland:active { transform: translate(5px, 5px); box-shadow: 0 0 0 rgba(0,0,0,.35); }

@media (max-width: 420px) {
  .btn-punkland { flex-direction: column; gap: 8px; font-size: 16px; }
}
.form__check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--c-dim); cursor: pointer; }
.form__check input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--c-accent); }
/* 동의 문구 옆 "처리방침 보기" 링크 */
.form__policy {
  margin-left: 6px;
  color: var(--c-accent);
  font-weight: 700;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.form__policy:hover { color: var(--c-border-lit); }

.form__error { color: var(--c-error); font-size: 16px; }
.form__submit { width: 100%; }

/* 자동 접수 방지 위젯 자리.
   평소에는 위젯이 아무것도 그리지 않아 높이가 0 입니다 —
   그래서 margin 대신 :not(:empty) 로 내용이 있을 때만 간격을 줍니다. */
.form__turnstile:not(:empty) { margin: 4px 0; }

/* ---------- 알림 팝업 ----------
   폼 위 빨간 글씨만으로는 놓치기 쉬워서 같이 띄웁니다.
   브라우저 기본 alert() 대신 페이지 안에 그려서 화면과 톤을 맞춥니다. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(14, 26, 8, .62); }
.modal__box {
  position: relative;            /* 배경막 위로 올라오게 */
  width: 100%;
  max-width: 380px;
  background: var(--c-panel);
  border: 3px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 10px 0 rgba(12, 24, 6, .35);
  padding: 26px 22px 22px;
  text-align: center;
  animation: modal-in .16s ease-out;
}
/* 화면에 툭 나타나면 눈에 안 들어와서 아주 짧게 키웁니다 */
@keyframes modal-in {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal__box { animation: none; }
}
.modal__title {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 20px;
  color: var(--c-text);
  margin-bottom: 10px;
}
.modal__text { font-size: 17px; color: var(--c-dim); line-height: 1.6; margin-bottom: 20px; }
.modal__ok { width: 100%; }
/* ---------- 확인 단계 ----------
   신청 버튼을 누르면 접수 전에 이 화면이 먼저 뜹니다.
   닉네임 조회 API가 없어 오타를 서버에서 걸러낼 수 없고 이메일도 안 받으므로,
   눈으로 한 번 더 확인하게 하는 것이 사실상 유일한 방어선입니다. */
.form__confirm {
  background: var(--c-panel);
  border: 3px solid var(--c-border);
  padding: 30px 24px;
  text-align: center;
}
.form__confirm-heading {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 20px;
  color: var(--c-text);
  text-wrap: balance;
}
.form__confirm-nick {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: clamp(28px, 7vw, 38px);
  color: var(--c-accent);
  background: var(--c-well);
  border: 3px solid var(--c-border);
  padding: 14px 16px;
  margin: 16px 0 14px;
  word-break: break-all;
}
.form__confirm-desc { font-size: 16px; color: var(--c-dim); line-height: 1.6; }
.form__confirm-actions {
  display: flex; gap: 12px; margin-top: 24px;
}
.form__confirm-actions .btn { flex: 1; padding-left: 12px; padding-right: 12px; }

/* 보조 버튼 — 강조색 대신 테두리만 */
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}

@media (max-width: 420px) {
  .form__confirm-actions { flex-direction: column; }
}

.form__done-nick {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 18px;
  color: var(--c-text);
  margin-top: 10px;
}

.form__done {
  text-align: center;
  background: var(--c-panel);
  border: 3px dashed var(--c-good);
  padding: 36px 20px;
  color: var(--c-good);
}
.form__done-mark { font-size: 40px; line-height: 1; margin-bottom: 12px; }

/* ---------- 6. 푸터 ---------- */
.footer {
  border-top: 4px solid var(--c-border);
  padding: 44px 0;
  text-align: center;
  font-size: 16px;
  color: var(--c-over-dim);
}
/* 푸터 — 작은 로고 + 저작권 줄 (게임명은 로고가 대신하므로 글자로 반복하지 않습니다) */
.footer__logo { width: 120px; height: auto; margin: 0 auto 12px; opacity: .95; }
.footer__copy { font-size: 17px; font-weight: 600; }
.footer a { color: var(--c-over); }
.footer__links { display: flex; justify-content: center; gap: 16px; margin: 14px 0; flex-wrap: wrap; }

/* ---------- SNS 아이콘 버튼 ----------
   잔디 배경 위에 얹히므로 다른 버튼들처럼 테두리 + 각진 그림자를 둘러
   배경에 묻히지 않게 합니다. 마우스를 올리면 각 서비스 고유색으로 바뀝니다. */
/* 서비스별 브랜드 색.
   펑크랜드 버튼(.btn-punkland)이 보라를 쓰는 것과 같은 방식입니다 —
   공식 색을 그대로 입히면 무슨 서비스로 가는 버튼인지 한눈에 읽힙니다.
   새 채널을 추가하려면 여기 한 줄만 더 쓰면 됩니다. */
.footer__sns[data-sns="lounge"]  { --sns-bg: #03C75A; --sns-fg: #ffffff; --sns-edge: #027a38; }
.footer__sns[data-sns="discord"] { --sns-bg: #5865F2; --sns-fg: #ffffff; --sns-edge: #3a44b0; }
.footer__sns[data-sns="kakao"]   { --sns-bg: #FEE500; --sns-fg: #3C1E1E; --sns-edge: #a08e00; }

.footer__sns {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 3px solid var(--sns-edge, var(--c-border));
  background: var(--sns-bg, var(--c-panel));
  color: var(--sns-fg, var(--c-text));
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 16px;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  transition: transform .08s steps(2), box-shadow .08s steps(2), filter .1s steps(2);
}
.footer__sns-icon { width: 18px; height: 18px; flex: 0 0 auto; }

a.footer__sns:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0,0,0,.35);
  filter: brightness(1.08);
}
a.footer__sns:active { transform: translate(4px, 4px); box-shadow: 0 0 0 rgba(0,0,0,.35); }

/* 아직 주소가 없는 것 — 눌리지 않는다는 걸 한눈에 알 수 있게 흐리게 */
/* 아직 주소가 없는 것.
   브랜드 색을 그대로 쓰면 눌리는 버튼처럼 보이므로 채도를 죽입니다.
   opacity 로 흐리게 하지 않는 이유: 뒤의 잔디 무늬가 비쳐 글자가 안 읽힙니다.
   배경은 불투명하게 두고 색만 바랜 상태로 만듭니다. */
.footer__sns--soon {
  cursor: default;
  filter: grayscale(.75) brightness(.92);
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.footer__sns--soon small {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  opacity: .85;
}
.footer__note { margin-top: 14px; opacity: .55; }

/* ---------- 스크롤 등장 효과 ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .4s steps(6); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 작은 화면 ---------- */
@media (max-width: 640px) {
  :root { --section-pad: 52px; --showcase-gap: 40px; }
  .countdown { gap: 6px; }
  .countdown__unit { min-width: 0; flex: 1; padding: 8px 2px; }
  .countdown__unit b { font-size: 20px; }
  .reward { padding: 22px 18px; }
  .form { padding: 20px 16px; }
}

/* 애니메이션을 끄도록 설정한 사용자 존중 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   개인정보 수집 및 이용 동의 페이지 (privacy.html)
   랜딩페이지와 같은 색·폰트를 그대로 씁니다.
   ============================================================ */
.doc__top { text-align: center; padding: 40px var(--gutter) 32px; }
.doc__top img { width: 100%; max-width: 240px; height: auto; margin: 0 auto; }

.doc { font-size: 18px; }
.doc p { margin-bottom: 16px; }
.doc a { color: var(--c-accent); font-weight: 700; }
/* 위 규칙이 버튼 글자색까지 덮어써서 초록 바탕에 초록 글자가 됐었습니다 */
.doc a.btn { color: var(--c-btn-text); }

.doc__h2 {
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 23px;
  color: var(--c-text);
  margin: 34px 0 10px;
  padding-top: 20px;
  border-top: 2px dashed var(--c-border);
}

.doc__table {
  width: 100%;
  border-collapse: collapse;
  border: 3px solid var(--c-border);
  margin: 22px 0 18px;
  font-size: 17px;
}
.doc__table th,
.doc__table td {
  border: 2px solid var(--c-border);
  padding: 12px 10px;
  text-align: center;
  vertical-align: middle;
}
.doc__table th {
  background: var(--c-well);
  font-family: var(--f-title);
  font-weight: var(--w-title);
  font-size: 15px;
}
.doc__table small { color: var(--c-dim); }

/* 항목이 많아 가로로 늘어놓으면 폰에서 글자가 뭉개지는 표(국외이전 안내 등).
   머리글을 왼쪽 세로줄로 세우고 내용을 오른쪽에 둡니다. */
.doc__table--rows th {
  width: 38%;
  text-align: left;
  white-space: nowrap;
}
.doc__table--rows td { text-align: left; }
@media (max-width: 640px) {
  .doc__table--rows th { width: 42%; }
}

.doc__small {
  font-size: 15px;
  color: var(--c-dim);
  line-height: 1.75;
  margin: 0 0 8px;
}

.doc__note {
  background: var(--c-well);
  border-left: 6px solid var(--c-accent);
  padding: 16px 18px;
  font-size: 17px;
}

.doc__list { display: grid; gap: 8px; margin-bottom: 16px; }
.doc__list li { display: flex; gap: 10px; }
/* flex 칸은 기본적으로 내용보다 작아지지 않습니다.
   그래서 띄어쓰기 없는 이메일 주소가 든 줄이 좁은 화면에서 밖으로 삐져나갔습니다.
   min-width 를 풀고, 정 안 되면 주소 중간에서라도 끊도록 합니다. */
.doc__list li > * { min-width: 0; }
.doc__list a { overflow-wrap: anywhere; }
.doc__list li::before { content: "•"; color: var(--c-accent); flex: 0 0 auto; }

.doc__date { font-size: 15px; color: var(--c-dim); margin-top: 28px; }
.doc__back { display: block; width: fit-content; margin: 8px auto 0; }

@media (max-width: 640px) {
  .doc__table th, .doc__table td { padding: 10px 6px; font-size: 15px; }
  .doc__table th { font-size: 14px; }
}