/* ===== 안내·칼럼·약관 페이지 공통 게임 테마 (밤하늘) =====
   각 페이지의 기본 <style> 뒤에 로드되어 배경·카드·버튼을 게임 톤으로 덮어쓴다 */

body {
  background: linear-gradient(180deg, #262a63 0%, #3d448f 42%, #5b6cff 82%, #8d8af0 100%);
  background-attachment: fixed;
}

/* 별이 반짝이는 하늘 + 은은한 달 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 12%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 26%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(2px 2px at 45% 9%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 20%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(2px 2px at 74% 32%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 24%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 42%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(2px 2px at 34% 55%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 58%, rgba(255, 255, 255, 0.5), transparent 60%);
  animation: contentStars 4.5s ease-in-out infinite alternate;
}
@keyframes contentStars {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* 달은 반짝임과 분리된 고정 레이어 (또렷한 초승달) */
body::after {
  content: '';
  position: fixed;
  top: 22px;
  right: 30px;
  width: 42px;
  height: 42px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: inset -11px 8px 0 0 #ffeebc, 0 0 22px rgba(255, 238, 188, 0.4);
  transform: rotate(-16deg);
}

/* 돌아가기: 게임 스타일 3D 필 버튼 (앱 내 뒤로가기와 같은 파란 그라데이션) */
.back {
  background: linear-gradient(180deg, #6d9cff, #4f8df9);
  border: 2px solid #fffdf2;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  box-shadow: 0 4px 0 #2c50c8, 0 8px 14px rgba(10, 12, 50, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.back:active { transform: translateY(3px); box-shadow: 0 1px 0 #2c50c8; }

/* 본문 카드: 흰 테두리 + 바닥 그림자의 게임 판때기 */
.doc {
  background: rgba(255, 255, 255, 0.97);
  border: 3px solid #fffdf2;
  border-radius: 22px;
  box-shadow: 0 7px 0 rgba(20, 24, 80, 0.45), 0 18px 30px rgba(10, 12, 50, 0.4);
}

/* 칼럼 목차 카드도 살짝 게임 톤으로 */
.post {
  border: 2px solid #e6eaff;
  border-radius: 14px;
  box-shadow: 0 3px 0 #dde2f8;
  transition: transform 0.1s, box-shadow 0.15s;
}
.post:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #dde2f8, 0 10px 18px rgba(60, 70, 140, 0.18); }
.post:active { transform: translateY(2px); box-shadow: 0 1px 0 #dde2f8; }

/* 링크: 웹 문서 느낌(파란색+밑줄) 제거 — 게임 톤으로 */
.doc a {
  color: #6a5ae0;
  text-decoration: none;
  font-weight: 800;
}
.doc a:active { opacity: 0.6; }

/* ===== 태블릿 이상 (가로 600px~) =====
   각 페이지의 기본 <style>은 .wrap 을 760px로 묶고 폰 기준 글자 크기를 쓴다.
   넓은 화면에서는 좌우가 남고 글자가 작아 보이므로 폭과 크기를 함께 키운다.
   기본 <style>에는 축소용 max-width:600px 쿼리만 있어 충돌하지 않고,
   이 파일이 뒤에 로드되므로 아래 값이 이긴다. */
@media (min-width: 600px) {
  body { padding: 32px 28px 80px; }
  .wrap { max-width: 880px; }
  .doc { padding: 40px 44px; border-radius: 26px; }
  .back { padding: 11px 20px; font-size: 15px; margin-bottom: 22px; }

  .doc h1 { font-size: 30px; }
  .doc h2 { font-size: 20px; margin: 38px 0 12px; padding-top: 22px; }
  .doc p, .doc ul, .doc ol { font-size: 17px; }
  .doc table { font-size: 16px; }
  .doc th, .doc td { padding: 11px 14px; }
  .doc .meta { font-size: 15px; }
  .doc .note, .doc .warn { font-size: 16px; padding: 15px 18px; }
  .doc .post h2 { font-size: 19px; margin: 0 0 6px; padding-top: 0; }
}

/* 태블릿(600~1199px): PC보다 눈이 가깝지만 폰보다 화면이 커서 같은 크기가 작아 보인다.
   본문과 버튼을 한 단계씩 더 키운다. 1200px 이상은 위 값을 그대로 쓴다. */
@media (min-width: 600px) and (max-width: 1199px) {
  .doc { padding: 44px 46px; }
  .back { padding: 14px 24px; font-size: 17px; }
  .doc h1 { font-size: 33px; }
  .doc h2 { font-size: 22px; }
  .doc p, .doc ul, .doc ol { font-size: 18px; line-height: 1.85; }
  .doc li { margin-bottom: 8px; }
  .doc table { font-size: 17px; }
  .doc th, .doc td { padding: 13px 16px; }
  .doc .meta { font-size: 16px; }
  .doc .note, .doc .warn { font-size: 17px; padding: 17px 20px; }
  .doc .post h2 { font-size: 21px; }
  .doc a.mail { padding: 17px 32px; font-size: 18px; }
}

/* 칼럼 목차만 2열로 (본문형 페이지는 2열이면 읽기 불편해 한 열 유지).
   페이지 종류를 :has() 로 판별하면 미지원 브라우저에서 규칙 전체가 무시돼
   약관까지 2열로 깨지므로, columns.html 에 doc-list 클래스를 직접 붙여 구분한다. */
@media (min-width: 700px) {
  .doc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .doc-list > h1,
  .doc-list > .meta,
  .doc-list > .foot { grid-column: 1 / -1; }
  .doc-list > .post { margin: 0 0 16px; }
}

/* 삭제 요청 메일 버튼 — 위의 `.doc a`(보라색)가 페이지 내부 `.mail`보다 우선해서
   파란 배경 위에 보라 글자가 되어 거의 보이지 않던 문제. `.doc a.mail`로 특정도를 올린다.
   모양은 상단 '돌아가기'(.back)와 같은 게임 톤 3D 버튼으로 맞춘다.
   한국어 원본과 영·중·일 번역본이 모두 같은 클래스를 쓰므로 이 한 곳만 고치면 된다. */
.doc a.mail {
  display: inline-block;
  margin: 12px 0 8px;
  padding: 15px 28px;
  background: linear-gradient(180deg, #6d9cff, #4f8df9);
  border: 2px solid #fffdf2;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  box-shadow: 0 4px 0 #2c50c8, 0 8px 14px rgba(10, 12, 50, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.doc a.mail:hover { filter: brightness(1.05); }
.doc a.mail:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #2c50c8;
  opacity: 1; /* .doc a:active 의 반투명 처리를 되돌린다 */
}

/* 📝 약관 개정 사유 메모 — 부칙 아래에 작게 붙는 안내 (본문보다 한 단계 약하게) */
.doc .rev-note {
  font-size: 0.88rem;
  color: #6b7280;
  background: #f6f7fb;
  border-left: 3px solid #d7dbe8;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-top: 10px;
  line-height: 1.75;
  word-break: keep-all;
}

/* 📰 업데이트 소식 게시판 — 관리자가 등록한 공지가 여기에 쌓인다 (js/notice-board.js) */
#notice-board .nb-item {
  border: 1px solid var(--line, #e7eaf5);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0 14px;
  background: #fff;
}
#notice-board .nb-item h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text, #262b40);
  word-break: keep-all;
}
#notice-board .nb-item h3 small {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--muted, #7a80a0);
  margin-left: 6px;
  white-space: nowrap;
}
#notice-board .nb-item p { margin: 0; line-height: 1.8; word-break: keep-all; }
#notice-board .nb-empty { color: var(--muted, #7a80a0); margin: 8px 0 14px; }
/* 아래로 이어지는 옛 목록과의 경계 */
#notice-board .nb-past { margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--line, #e7eaf5); }