사용자:Malgok1/대문

#vector-sticky-header {
  display: none;
}

/* 반응형 그리드 유틸리티 */
.grid-2col { display: grid; grid-template-columns: 100%; gap: 1em; }
.grid-4col { display: grid; grid-template-columns: 50% 50%; gap: 1em; }

@media (min-width: 800px) {
  .grid-2col { grid-template-columns: 50% 50%; }
  .grid-4col { grid-template-columns: 25% 25% 25% 25%; }
}

/* 1. 히어로 섹션 */
.hero-section {
  border-color: hsl(320, 95%, 80%);
  background: light-dark(#fff, #000);
  margin: 8px 0; 
  box-shadow: 0 2px 2px #c8ccd1;
  text-align: left;
  padding: 2.5em 1em;
  margin-bottom: 1em;
  break-inside: avoid;
}
.hero-title { font-size: 1.8em; font-weight: bold; margin-bottom: 0.3em; }
.hero-subtitle { color: #00A500; font-weight: bold; }
.hero-links { margin-top: 1em; font-size: 0.9em; }

/* 2. 상단 네비게이션 탭 */
.top-nav-tabs {
  display: grid;
  grid-template-columns: 50% 50%;
  border: 1px solid #00A500;
  margin-bottom: 2em;
  text-align: center;
  font-weight: bold;
}
.top-nav-tabs > div {
  background-color: #EEFFEE;
  border-right: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
}
/* 모바일 환경: 우측 두 번째 칸들의 오른쪽 테두리를 제거해 이중 테두리 현상 해결 */
.top-nav-tabs > div:nth-child(2n) {
  border-right: none;
}
.top-nav-tabs > div > a {
  display: block;
  padding: 1em;
  color: #000;
  text-decoration: none;
}
.top-nav-tabs > div:hover { background-color: #BBEEBB; }
.top-nav-tabs .nav-primary { background-color: #00A500; border: none; }
.top-nav-tabs .nav-primary a { color: #FFF; }

@media (min-width: 800px) {
  .top-nav-tabs { grid-template-columns: 25% 25% 25% 25%; }
  .top-nav-tabs > div {
    border-bottom: none;
    border-right: 1px solid #FFF;
  }
  /* 데스크톱 환경: 2열 단위의 테두리를 복원하고 가장 우측(4번째) 칸의 테두리를 제거 */
  .top-nav-tabs > div:nth-child(2n) {
    border-right: 1px solid #FFF;
  }
  .top-nav-tabs > div:last-child {
    border-right: none;
  }
}

/* 3. 추천/홍보 박스 (2단) */
.promo-box {
  border: 1px solid #00A500;
  margin-bottom: 3em;
}
.promo-box > div { padding: 1.5em; }
.promo-left { border-bottom: 1px solid #00A500; text-align: center; }
.promo-right { font-size: 0.95em; line-height: 1.6; }
.promo-right ul { padding-left: 1.5em; }
.promo-title { font-size: 1.2em; font-weight: bold; margin-bottom: 1em; display: flex; justify-content: space-between; align-items: center; }
.promo-title-link { font-size: 0.6em; font-weight: normal; color: gray; text-decoration: underline; }

@media (min-width: 800px) {
  .promo-left { border-bottom: none; border-right: 1px solid #00A500; }
}

/* 각 게임 섹션 헤더 */
.section-header {
  font-size: 1.4em;
  font-weight: bold;
  border-bottom: 2px solid #EEFFEE;
  margin-bottom: 1em;
  padding-bottom: 0.3em;
}
.section-subtitle {
  font-size: 0.6em;
  font-weight: normal;
  color: gray;
  margin-left: 0.5em;
}

/* 게임카드 및 레이팅 정렬 재정의 */
.gamecards, .section-ratings {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 10px;
  min-width: 50%;
}
@media (min-width: 800px) {
  .gamecards, .section-ratings { grid-template-columns: 25% 25% 25% 25%; }
}

/* 탭 확장기능 디자인 오버라이드 */
.tabs-label {
  background-color: #EEFFEE;
  font-size: 14px;
  font-weight: bold;
  border-radius: 0;
  border: 1px solid white;
  color: #000;
  padding: 0.5em 1em;
}
.tabs-tabbox > .tabs-input:checked + .tabs-label {
  background-color: #00A500;
  color: white;
}
.tabs-tabbox > .tabs-container {
  border: none; /* 미사용 테두리를 깔끔하게 제거하여 문법 검사기 에러 방지 */
  margin-top: 1em;
}

/* 하단 콜투액션 (CTA) */
.bottom-cta {
  background-color: #EEFFEE;
  padding: 2em;
  margin-bottom: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5em;
}
.cta-text h3 { font-size: 1.5em; font-weight: bold; margin: 0.2em 0; color: #000; }
.cta-text p { font-size: 0.95em; margin: 0; color: #555; }
.cta-button {
  background-color: #00A500;
  padding: 0.8em 1.5em;
  font-weight: bold;
}
.cta-button a { color: #FFF; text-decoration: none; }

@media (min-width: 800px) {
  .bottom-cta { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* 푸터 영역 */
.footer-info { font-size: 0.9em; color: #000; text-align: left; margin-bottom: 2em; }
.footer-links { font-weight: bold; margin-bottom: 0.5em; }

/* CSS 변수 대신 prefers-color-scheme를 이용한 직접 오버라이딩 적용 */
@media (prefers-color-scheme: dark) {
  .hero-section {
    border-color: #0F3E0F;
  }
  .top-nav-tabs > div {
    background-color: #000F00;
  }
  .top-nav-tabs > div > a {
    color: #EEE;
  }
  .top-nav-tabs > div:hover {
    background-color: #0F3E0F;
  }
  .section-header {
    border-bottom-color: #000F00;
  }
  .tabs-label {
    background-color: #000F00;
    color: #EEE;
  }
  .bottom-cta {
    background-color: #000F00;
  }
  .cta-text h3 {
    color: #EEE;
  }
  .footer-info {
    color: #EEE;
  }
}