body {
      background-color: #0d1b1e;
      font-family: 'Apple SD Gothic Neo', sans-serif;
      margin: 0;
      padding: 2rem;
      color: white;
    }

    .title {
      font-size: 2rem;
      border-left: 4px solid #507bff;
      padding-left: 0.5rem;
      font-weight: bold;
      margin-bottom: 2rem;
    }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: calc(200px * 5 + 3rem); /* 최대 5개까지 한 줄에 들어가게 제한 */
  margin: 0 auto;
  gap: 1rem;
}

    .card {
      background-color: #507bff;
      border-radius: 1.5rem;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      height: 80%;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s;
    }

    .card:hover {
      transform: scale(1.03);
    }

    .card .plus {
      position: absolute;
      top: 0.8rem;
      right: 1rem;
      font-size: 1.5rem;
    }

    .card .icon {
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    .card .label {
      font-size: 1.3rem;
      font-weight: 600;
      line-height: 1.4;
    }

    /* 링크 관련 스타일 */
    a.card {
      text-decoration: none;
      color: inherit;
      display: block;
      cursor: pointer;
    }

    a.card:hover {
      transform: scale(1.03);
    }

    .adsense-container {
      margin: 3rem auto 1rem;
      max-width: 728px;
      width: 100%;
      min-height: 90px;
      text-align: center;
    }
/* 공지사항 팝업창*/
  .notice-popup {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 280px;
  background: #fff8a3;
  color: #333;
  font-family: 'Apple SD Gothic Neo', sans-serif;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  z-index: 3000;
}

.notice-popup h3 {
  margin-top: 0;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.notice-popup .close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #888;
}

.notice-popup .close-btn:hover {
  color: #333;
}

#admin-box {
  display: none; /* 사용자에게는 기본 숨김 */
}

  .section {
    margin-bottom: 3rem;
    max-width: 1100px;
    margin-left: 100px;
    margin-right: auto;
  }

  .section-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    border-left: 4px solid #ffaa00;
    font-weight: bold;
  }

  .section-description {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }

      .section2 {
    margin-bottom: 3rem;
    max-width: 1100px;
    margin-left: 100px;
    margin-right: auto;
  }

  .section2-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    border-left: 4px solid #ffaa00;
    font-weight: bold;
  }

  .section2-description {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }

    .section3 {
    margin-bottom: 3rem;
    max-width: 1100px;
    margin-left: 100px;
    margin-right: auto;

  }

  .section3-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    border-left: 4px solid #ffaa00;
    font-weight: bold;
  }

  .section3-description {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px; /* 카드 사이 간격 */
  }
  /*준비중 카드*/
  .card.disabled {
    background-color: #555;
    cursor: default;
    opacity: 0.5;
  }

  .card.disabled:hover {
    transform: none;
  }

    .extra-small {
    font-size: 0.9rem;
  }
  
  .footer {
    background-color: #1f1f1f;
    padding: 1.2rem 0.5rem;
    font-family: 'Apple SD Gothic Neo', sans-serif;
    font-size: 12px;
    color: white;
  }

  .footer a {
    color: white;
    text-decoration: none;
    font-size: 10px;
  }

  .footer p {
    margin: 0.5rem 0;
  }

 /* ✅ 후원카드용 고정형 회전 카드 스타일 */
#sponsor-card {
  width: 100%;
  height: 227px;
  margin: 0 auto;
}

.card-wrapper {
  perspective: 1000px;
  width: 100%;
  height: 100%;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-wrapper.flipped .card-inner {
  transform: rotateY(180deg);
}

.card.front, .card.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-sizing: border-box;
  background-color: #507bff;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card.back {
  background-color: #fffbcc;
  color: #222;
  transform: rotateY(180deg);
}

.card .plus {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  font-size: 1.5rem;
}

.card .icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.card .label {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
}

#statcounter-container {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  opacity: 0.9;
}
#statcounter-container img {
  width: 100px; /* 크기 조절 */
  height: auto;
}