@font-face {
  font-family: 'Digital-7';
  src: url('./fonts/digital-7.ttf') format('truetype');
}

:root {
  --panel-width: 160px;
  --panel-radius: 8px;
  --panel-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  --panel-bg: rgba(0, 68, 15, 0.5);
  --panel-fg: rgba(255, 255, 255, 0.9);
  --font-digital: 'Digital-7', monospace;
  --digit-spacing: 2px;
}



body {
      font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
      background-color: #fff;
      margin: 0;
      padding: 0;
      border-width: 0;
      cursor: pointer;
    }

    #menu {
      position: relative;
      list-style-type: none;
      padding-left: 5px;
      z-index: 1000;
      /* 1 */
      display: inline-block;
      text-align: center;
    }

    #menu li {
      margin: 2px;
      padding: 4px 10px;
      border-radius: 10px;
      background-color: #ffff80;
    }

    #menu li:hover {
      background-color: #ffDD60;
    }

    #menu {
      display: none !important;
    }

    #forPuzzle {
      position: absolute;
      width: 95vw;
      height: 95vh;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #f5f5f5;
      overflow: hidden;
      border:#dddddd 2px solid;
    }

    .polypiece {
      display: block;
      overflow: hidden;
      position: absolute;
    }

    .moving {
      transition-property: top, left;
      transition-duration: 1s;
      transition-timing-function: linear;
    }

    .gameCanvas {
      display: none;
      overflow: hidden;
      position: absolute;
    }

    .panel-box {  width: var(--panel-width);
      height: 64px;
      display: flex;                    /* ✅ Flexbox 사용 */
      align-items: center;             /* ✅ 수직 중앙 정렬 */
      justify-content: center;         /* ✅ 수평 중앙 정렬 */
      background-color: rgba(0, 0, 0, 0.6);
      color: rgba(255, 255, 255, 0.8);
      border: none;
  border-radius: var(--panel-radius);
  font-family: var(--font-digital);
      font-size: 32px;
  letter-spacing: var(--digit-spacing);
  box-shadow: var(--panel-shadow);
      box-sizing: border-box;
      text-align: center;
    }


    #side-panel {
      position: fixed;
      top: 10px;
      right: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      z-index: 1000;
    }

    #game-time {
      position: static;
  width: var(--panel-width);                         /* ✅ 고정 너비 설정 */
      text-align: center;                   /* ✅ 가운데 정렬 */
  background-color: var(--panel-bg); /* 반투명 검정 */
  color: var(--panel-fg);       /* 반투명 흰색 글자 */
      padding: 10px 15px;
  border-radius: var(--panel-radius);
      /*font-size: 48px;*/
      border: none;
  box-shadow: var(--panel-shadow);
  font-family: var(--font-digital);
  letter-spacing: var(--digit-spacing);
    }

    #start-button {
      position: static;
  width: var(--panel-width);                      /* 타이머와 동일 너비 */
      padding: 10px 0;
      /*font-size: 40px;*/
  background-color: var(--panel-bg);  /* 반투명 검정 배경 */
  color: var(--panel-fg);       /* 반투명 흰 글씨 */
      border: none;
  border-radius: var(--panel-radius);
      cursor: pointer;
  box-shadow: var(--panel-shadow);
  font-family: var(--font-digital);  /* 디지털 폰트 */
  letter-spacing: var(--digit-spacing);
      text-align: center;
      transition: background-color 0.3s;
    }

    #start-button:hover {
      background-color: rgba(0, 68, 15, 0.8);  /* hover 시 약간 더 진하게 */
    }

    /* SHOW ALL 버튼: START와 같은 느낌 유지 */
    /* 모달 오버레이 */
    #modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0,0,0,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }

    /* 모달 박스 */
    #modal-box {
      background-color: #fff;
      padding: 24px 32px;
      border-radius: 12px;
      text-align: center;
      width: 300px;
      font-family: Arial, sans-serif;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);
    }

    /* 메시지 텍스트 */
    #modal-message {
      font-size: 18px;
      margin-bottom: 20px;
    }

    /* 버튼 영역 */
    #modal-buttons button {
      margin: 0 8px;
      padding: 8px 16px;
      font-size: 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    /* 확인 버튼 */
    #modal-confirm {
      background-color: #444;
      color: white;
    }

    /* 취소 버튼 */
    #modal-cancel {
      background-color: #aaa;
      color: white;
    }

    /* 이미지 모달 오버레이 */
    #image-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3000;
    }

    /* 숨김 */
    .hidden { display: none !important; }

    /* 모달 콘텐츠 박스 */
    #image-modal .image-modal-content {
      position: relative;
      max-width: 90vw;
      max-height: 90vh;
      background: #111;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
      padding: 12px;
    }

    /* 전체 이미지 */
    #image-modal-img {
      display: block;
      max-width: 88vw;
      max-height: 80vh;
      border-radius: 8px;
    }

    /* 닫기 X 버튼 (오른쪽 위) */
    #image-modal-close {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 8px;
      background: rgba(255,255,255,0.9);
      color: #111;
      font-size: 18px;
      cursor: pointer;
      line-height: 36px;
    }
    #image-modal-close:hover {
      background: #fff;
    }

/* ---- Intro Hero (배경 이미지 버전) ---- */
.site-intro.has-hero {
  position: relative;
  overflow: hidden;
  /* 기존의 그라디언트 배경은 끄고 이미지/오버레이로 대체 */
  background: none;
  min-height: clamp(140px, 20vh, 240px);
  padding: 16px 14px;   
  display: flex;
  align-items: center;   /* 수직 가운데 정렬 */
  justify-content: center;
}

/* 배경 이미지 레이어 */
.site-intro.has-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./img/topBg.jpg") center / cover no-repeat;
  z-index: -2;
  transform: scale(1.02);           /* 가장자리 빈틈 예방용 살짝 확대 */
}

/* 어두운 오버레이(글자 가독성) */
.site-intro.has-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.85));
  z-index: -1;
}

/* 텍스트 색상/그림자 조정 */
.site-intro.has-hero .intro-title,
.site-intro.has-hero .intro-text {
  color: #555555;
  /*text-shadow: 0 2px 10px rgba(0,0,0,.35);*/
}

/* 큰 화면에서 패딩 조금 키우기 */
@media (min-width: 1024px) {
  .site-intro.has-hero { padding: 64px 24px; }
}

@media (max-width: 480px) {
  .site-intro.has-hero { min-height: 120px; }
}

/* 소개 글 가운데 정렬 */
.site-intro .intro-inner { text-align: center; }

/* 다크 모드에서도 오버레이만 유지하면 충분 (추가 조정 불필요) */

/* Zoomable stage inside the puzzle container */
#forPuzzle .stage {
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0 */
  transform-origin: 0 0; /* 좌상단(원점) 기준으로 스케일/이동 */
  will-change: transform;
  touch-action: none;    /* (터치 기기에서 기본 제스처 방지) */
}

/* 사용자 퍼즐용 오버레이 */
.user-overlay {
  position: fixed;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0; 와 같음 */
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 오버레이 안 버튼 */
.user-overlay-btn {
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  background: #ffd36b;
  color: #222;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.user-overlay-btn:hover {
  transform: translateY(-1px);
}

.user-overlay-inner {
  display: flex;
  flex-direction: column;
  /* ⬅ 세로 정렬의 핵심 */
  align-items: center;
  /* 가운데 정렬 */
  gap: 14px;
  /* 요소들 사이 간격 */
  background: #fff;
  padding: 20px 28px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.overlay-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.overlay-label {
  display: flex;
  flex-direction: column;
  /* 텍스트 + select 세로 배치 */
  align-items: center;
  font-weight: 600;
  gap: 6px;
}

#piece-count {
  padding: 8px 14px;
  font-size: 16px;
  border-radius: 8px;
}