body {
  margin: 0;
  padding: 0;
  font-family: 'Pretendard', sans-serif;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  min-height: 100vh;
}
/* ⬇️ 이 부분을 CSS 파일 최상단에 추가하세요 ⬇️ */
@font-face {
    font-family: 'PyeongchangPeace';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'PyeongchangPeace';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
/* --- 공통 섹션 숨김 기본값 --- */
.stage, .game {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* --- 이미지 + 텍스트 구조 --- */
.image-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 수염 안 짤리게 cover → contain으로 변경 */
  display: block;
  
  /* 🎁 [추가] 은은한 포장지 패턴 배경 */
  background-color: #fdfdfd; /* 아주 연한 흰색/회색 배경 */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    /* 테마의 빨간색(9A0002)을 매우 투명하게(0.04) 적용 */
    rgba(154, 0, 2, 0.19) 10px,  
    rgba(154, 0, 2, 0.19) 20px
  );
  /* 🎁 [추가] 끝 */
  
  /* ⬇️⬇️⬇️ 여기를 추가하세요! ⬇️⬇️⬇️ */
  /* 수평 그라데이션 마스크를 적용합니다. */
  mask-image: linear-gradient(
    to right,            /* 가로 방향으로 */
    transparent 0%,     /* 왼쪽 끝: 완전 투명 */
    black 20%,          /* 20% 지점: 완전 불투명 (검은색) */
    black 80%,          /* 80% 지점: 완전 불투명 */
    transparent 100%   /* 오른쪽 끝: 완전 투명 */
  );
  /* (웹킷 엔진 브라우저 호환용) */
  -webkit-mask-image: linear-gradient(
    to right, 
    transparent 0%, 
    black 10%, 
    black 90%, 
    transparent 100%
  );
}




/* --- 텍스트 오버레이 (수염 위에 글씨 배치) --- */
.text-overlay {
  position: absolute;
  top: 62%;      /* 화면 세로의 중앙 */
  left: 50%;     /* 화면 가로의 중앙 */
  transform: translate(-50%, -50%); /* 자기 크기 기준 정확히 중앙으로 */
  text-align: center;
  color: #333;
  width: 90%;
}
/* --- ⬇️ 텍스트 강조 CSS (기존 코드 교체) ⬇️ --- */

/* '궁극의 눈썰미' 강조용 (타이틀과 동일한 빨간색) + ✨반짝임✨ */
.text-red-strong {
  color: #9A0002;
  font-weight: bold;
  font-size: 1.05em; 
  transform: scaleY(1.1); 
  display: inline-block;
  /* ✨애니메이션 적용!✨ */
  animation: sparkle-glow 2.5s infinite ease-in-out; /* 2.5초 간격으로 반짝임 */
}

/* '산타급 눈썰미' 강조용 (기본 녹색 + 굵게) */
.text-green-strong {
  color: #0B493A; /* 기존 <h2>의 녹색과 동일 */
  font-weight: bold;
  font-size: 1.05em; /* 살짝 크게 */
}

/* '미션 성공!' 강조용 + 💖크기 펄스💖 */
.text-success {
   font-size: 1.2em;   
   font-weight: bold;
   color: #0B493A;   
   display: inline-block; 
   /* 💖애니메이션 적용!💖 */
   animation: pulse-size 1.5s infinite ease-in-out; /* 1.5초 간격으로 펄스 */
   /* (참고: 기존 transform은 @keyframes 안으로 이동했습니다) */
}

/* '확대 금지' 경고용 (강렬한 빨간색 + 밑줄) */
.text-warning-rule {
  color: #9A0002; /* 강렬한 경고용 빨간색 */
  font-weight: bold;
  
  font-size: 1.1em; /* 좀 더 크게 */
}

/* 먼저 폰트 불러오기 */
@font-face {
    font-family: 'HsJandari';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2510-2@1.0/HSJandari.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

h1 {
    font-family: 'PyeongchangPeace', sans-serif;
    font-size: 2.5em;
    margin-bottom: 100px; /* 기존 70px → 100px로 늘림 */
    letter-spacing: 1.5px;
    color: #9A0002;
    text-align: center;
    transform: scaleY(1.1);
    display: inline-block;
  
}

.text-overlay h2 {
    font-family: 'PyeongchangPeace', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color:#0B493A;
    transform: scaleY(1.1);
    display: inline-block;
    margin-top: 30px; /* h1과 h2 사이 추가 여백 */
  /* --- 🎁 텍스트 박스 디자인 추가 --- */
  background-color: #7A8450|; /* 따뜻한 크림색(양피지 느낌) 배경 */
  padding: 25px 35px;          /* 텍스트와 테두리 사이의 여백 */
  border-radius: 10px;         /* 모서리를 살짝 둥글게 */

  /* 테마의 빨간색을 사용한 점선 테두리 */
  border: 3px dashed #9A0002; 
  
  /* 입체감을 위한 은은한 그림자 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* --- 🎁 추가 끝 --- */
  
}






/* 🔹 600px 이하 — 모바일 화면 */
@media screen and (max-width: 600px) {
  body {
    background-color: #f0f4f8;
  }
  #intro-screen {
    display: block;
  }

  .text-overlay {
    bottom: 8%;
    width: 95%;
  }

  .text-overlay h1 {
    font-size: 1.6rem;
  }

  .text-overlay h2 {
    font-size: 0.9rem;
  }
}

/* --- 나머지 단계 기본 폰트 유지 --- */
#stage1, #stage2, #stage3 {
  font-family:'HsJandari', sans-serif;
  font-size: 4rem;
  font-weight: bold;
}

/* 이후 색상, 버튼, grid, theme 관련 스타일 그대로 이어 붙이면 됨 */




/* --- [수정] 1단계 (파란색 배경) --- */
@media screen and (min-width: 601px) and (max-width: 700px) {
  body { 
    /* background-color: #e0f2f7; */ /* 👈 패턴에 색이 포함되어 주석 처리 */
    
    /* 🎁 [추가] 흰색-하늘색 포장지 패턴 */
    background-image: repeating-linear-gradient(
      -45deg,
      #FFFFFF, /* 흰색 */
      #FFFFFF 10px,
      #e0f2f7 10px, /* 연한 하늘색 */
      #e0f2f7 20px
    );
  }
  #stage1 { display: block; color: #0277bd; } /* 진한 파란색 텍스트 */
}

/* --- '하' 레벨 (기존 '중' 레벨 색상 적용) --- */
@media screen and (min-width: 801px) and (max-width: 900px) {
  /* 기본 테마 변수 정의 */
  body[data-theme="easy-default"] {
    --bg-color: #ecf0f1;
    --text-color: #444;  
  }
  /* 옵션 1 테마 변수 정의 */
  body[data-theme="easy-opt1"] {
    --bg-color: #E8EAF6; /* 연한 남색 */
    --text-color: #3F51B5;  
  }
  /* 옵션 2 테마 변수 정의 */
  body[data-theme="easy-opt2"] {
    --bg-color: #F3E5F5; /* 연한 보라색 */
    --text-color: #9C27B0;  
  }

  /* 정의된 변수를 body에 적용 */
  body {
    background-color: var(--bg-color);
  }
  /* 눈송이 패턴 글자색에 변수 적용 */
  #grid span {
    color: var(--text-color);
  }

  #easy-game { display: block; color: #2c3e50; }  
}

/* --- [수정] 2단계 (주황색 배경) --- */
@media screen and (min-width: 901px) and (max-width: 1000px) {
  body { 
    /* background-color: #fff3e0; */ /* 👈 주석 처리 */
    
    /* 🎁 [추가] 흰색-주황색 포장지 패턴 */
    background-image: repeating-linear-gradient(
      -45deg,
      #FFFFFF, /* 흰색 */
      #FFFFFF 10px,
      #fff3e0 10px, /* 2단계의 연한 주황색 */
      #fff3e0 20px
    );
  }
  #stage2 { display: block; color: #ef6c00; } /* 진한 주황색 텍스트 */
}

/* --- '중' 레벨 (노란색, 주황색, 분홍색 적용) --- */
@media screen and (min-width: 1101px) and (max-width: 1200px) {
  /* 테마 1: 노란색 */
  body[data-theme="mid-default"] {
    --bg-color: #FFFDE7; /* 매우 연한 노란색 */
    --text-color: #F57F17; /* 어두운 노란색/갈색 */
  }
  /* 테마 2: 주황색 */
  body[data-theme="mid-opt1"] {
    --bg-color: #FFECB3; /* 연한 주황색 */
    --text-color: #FB8C00; /* 어두운 주황색 */
  }
  /* 테마 3: 분홍색 */
  body[data-theme="mid-opt2"] {
    --bg-color: #FCE4EC; /* 매우 연한 분홍색 */
    --text-color: #D81B60; /* 어두운 분홍색 */
  }

  /* 정의된 변수를 body에 적용 */
  body {
    background-color: var(--bg-color);
  }
  
  /* '별' 패턴 글자색에 변수 적용 */
  #star-grid span {  
    color: var(--text-color);
  }

  #mid-game { display: block; color: #34495e; }  
}

/* 3단계 (스테이지 화면) */
@media screen and (min-width: 1301px) and (max-width: 1400px) {
  body { 
    /* background-color: #fdeaea; */ /* 👈 주석 처리 */
    
    /* 🎁 [추가] 흰색-빨간색 포장지 패턴 */
    background-image: repeating-linear-gradient(
      -45deg,
      #FFFFFF, /* 흰색 */
      #FFFFFF 10px,
      #fdeaea 10px, /* 3단계의 연한 빨간색 */
      #fdeaea 20px
    );
  }
  #stage3 { display: block; color: #e74c3c; }  
}

/* --- '상' 레벨 (기존과 동일) --- */
@media screen and (min-width: 1401px) {
  /* 3단계 테마 1: 옐로우 */
  body[data-theme="hard-default"] {
    --bg-color: #FFFDE7;  
    --text-color: #F57F17;  
  }
  /* 3단계 테마 2: 그린 */
  body[data-theme="hard-opt1"] {
    --bg-color: #E8F5E9;  
    --text-color: #2E7D32;  
  }
  /* 3단계 테마 3: 레드 */
  body[data-theme="hard-opt2"] {
    --bg-color: #FFEBEE;  
    --text-color: #C62828;  
  }

  body {
    background-color: var(--bg-color);
  }
  #bell-grid span {
    color: var(--text-color);
  }

  #hard-game { display: block; color: #000; }  
}

/* 1단계(눈송이) <p> 태그의 여백 제거 및 줄 간격 조절 */
#grid p {
  margin: 0;
  line-height: 1.2;
}

/* 3단계(종) <p> 태그의 여백 제거 및 줄 간격 조절 */
#bell-grid p {
  margin: 0;
  line-height: 0.8;
}

/* 1단계(눈송이) 'Jua' 폰트 및 크기 설정 */
#grid span {
  font-family: "Jua", sans-serif;
  font-size: 1.4rem !important;
}

/* 3단계(종) 'Jua' 폰트 및 크기 설정 */
#bell-grid span {
  font-family: "Jua", sans-serif;
  font-size: 0.7rem !important;
}

/* [추가] 2단계(별) <p> 태그 여백/줄간격 */
#star-grid p {
  margin: 0;
  line-height: 1.0; /* 줄 간격 조절 */
}

/* [추가] 2단계(별) 'Jua' 폰트 및 크기 설정 */
#star-grid span {
  font-family: "Jua", sans-serif;
  font-size: 1.0rem !important; /* JS에서 설정한 값과 일치 */
  /* 호버/클릭 효과는 JS에서 직접 제어합니다 */
}

/* 게임 제목 (이제 intro-screen에서만 사용됨) */
.game-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 15px;
  letter-spacing: 2px;
}


/* --- 배경색 변경 버튼 스타일 --- */
.color-palette {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
  z-index: 100;
}

.color-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ffffff; /* 버튼 테두리 색상 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-btn:hover {
  transform: scale(1.15);
}

/* 선택된 버튼에 하이라이트 추가 */
.color-btn.active {
  border-color: #007bff; /* 선택된 버튼 테두리 색상 */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* 파란색 발광 효과 */
}


/* --- 각 버튼 색상 지정 (배경색만 지정하고, 텍스트 색상은 JS에서 관리) --- */

/* '하' 레벨 버튼 색상 (기존 '중' 레벨 색상 - 변경 없음) */
#easy-palette .color-btn[data-theme="easy-default"] { background-color: #ecf0f1; }
#easy-palette .color-btn[data-theme="easy-opt1"]   { background-color: #E8EAF6; }
#easy-palette .color-btn[data-theme="easy-opt2"]   { background-color: #F3E5F5; }

/* '중' 레벨 버튼 색상 (노란색, 주황색, 분홍색 - 변경 없음) */
#mid-palette .color-btn[data-theme="mid-default"] { background-color: #FDD835; } /* 노란색 */
#mid-palette .color-btn[data-theme="mid-opt1"]   { background-color: #FF9800; } /* 주황색 */
#mid-palette .color-btn[data-theme="mid-opt2"]   { background-color: #F48FB1; } /* 분홍색 */

/* '상' 레벨 버튼 색상 (기존과 동일) */
#hard-palette .color-btn[data-theme="hard-default"] { background-color: #FDD835; } /* 노란색 */
#hard-palette .color-btn[data-theme="hard-opt1"]   { background-color: #66BB6A; } /* 초록색 */
#hard-palette .color-btn[data-theme="hard-opt2"]   { background-color: #EF5350; } /* 빨간색 */


#snow-canvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* 눈송이 위 클릭 방해 X */
  z-index: 500; /* intro-screen 위에 표시 */
}