@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");
/**
 * SLOTPASS shell v2 — 사이트 공통 리듬·푸터·본문 래퍼 정리 (base.html 연동)
 */

:root {
  --sp-shell-max: min(1240px, 96vw);
  --sp-shell-pad-x: clamp(16px, 3vw, 28px);
  --sp-shell-pad-y: 20px;
  --sp-shell-surface: rgba(6, 12, 24, 0.55);
  --sp-shell-border: rgba(34, 211, 238, 0.18);
  --sp-shell-muted: #94a3b8;
  --sp-shell-text: #e2e8f0;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(34, 211, 238, 0.35);
  color: #f8fafc;
}

/* 본문 래퍼: 좌우 여백·최대폭 통일 */
.sp-content-wrap.sp-site-width {
  width: 100%;
  max-width: var(--sp-shell-max);
  margin: 0 auto;
  padding: var(--sp-shell-pad-y) var(--sp-shell-pad-x) 40px;
  box-sizing: border-box;
}

/* 페이지 소제목 (게시판명 등) */
#container_title.sp-container-title {
  margin: 0 0 18px;
  padding: 10px 0 12px;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  color: var(--sp-shell-text);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--sp-shell-border);
}
#container_title.sp-container-title span:empty {
  display: none;
}
#container_title.sp-container-title:has(span:empty) {
  display: none;
}

/* 게시판·콘텐츠 블록과 헤더 사이 호흡 */
.sp-content-wrap .bo_common {
  margin-top: 4px;
}

/* 푸터: 다크 셸과 톤 맞춤 (기존 화이트 푸터와 이질감 제거) */
.sp-site-footer {
  text-align: center;
  padding: 36px var(--sp-shell-pad-x) 48px;
  margin-top: 48px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sp-shell-muted);
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.98), rgba(2, 6, 14, 1));
  border-top: 1px solid var(--sp-shell-border);
}

/* 포커스 가시성 (키보드 탐색) */
.sp-nav-inner a:focus-visible,
.sp-logo:focus-visible,
.sp-content-wrap a:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.65);
  outline-offset: 2px;
}

/* 스크린 리더 전용 블라인드 유지 */
.blind {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* 배너 이미지 → 관련링크(추적 URL) — 첨부(#article_img) 또는 본문 */
#view_article .sp-article-game-link,
#article_img .sp-article-game-link,
#article_contents .sp-article-game-link,
#bo_v_atc .sp-article-game-link,
#bo_v_con .sp-article-game-link {
  display: inline-block;
  max-width: 100%;
  border-radius: 12px;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
#view_article .sp-article-game-link:hover,
#article_img .sp-article-game-link:hover,
#article_contents .sp-article-game-link:hover,
#bo_v_atc .sp-article-game-link:hover,
#bo_v_con .sp-article-game-link:hover {
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.55), 0 10px 36px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
#view_article .sp-article-game-link img,
#article_img .sp-article-game-link img,
#article_contents .sp-article-game-link img,
#bo_v_atc .sp-article-game-link img,
#bo_v_con .sp-article-game-link img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =============================================================================
   Quantum read / list — 슬롯버프·MCP 뷰 느낌: 다크 글래스, 게임기 베젤, 흰 박스 제거
   (base의 board 블록보다 후순위로 로드되므로 .sp-content-wrap 안에서 정리)
   ============================================================================= */

.sp-content-wrap .bo_common.bo_view,
.sp-content-wrap .bo_common.bo_list {
  font-family: "Space Grotesk", "Inter", "Malgun Gothic", sans-serif;
  letter-spacing: 0.01em;
}

/* 목록: 가독형 타이포 */
.sp-content-wrap .bo_list .table_subject a,
.sp-content-wrap .bo_list .td_subject a,
.sp-content-wrap .bo_list .td_subject,
.sp-content-wrap .bo_list .td_name,
.sp-content-wrap .bo_list .td_datetime {
  font-size: 14px;
  line-height: 1.45;
}

/* 글보기: 외곽 게임기 베젤 */
.sp-content-wrap .bo_common.bo_view {
  border: 1px solid rgba(34, 211, 238, 0.32) !important;
  border-radius: 18px !important;
  padding: clamp(14px, 2.2vw, 24px) !important;
  box-sizing: border-box !important;
  background: linear-gradient(165deg, rgba(12, 20, 38, 0.88), rgba(4, 8, 18, 0.96)) !important;
  box-shadow:
    0 0 40px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.sp-content-wrap .bo_view #view_subject {
  color: #fef08a !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 0 24px rgba(250, 204, 21, 0.12);
}

.sp-content-wrap .bo_view #view_header {
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
  border-radius: 14px !important;
}

/* 본문 영역: 슬롯 화면 안쪽 패널 */
.sp-content-wrap .bo_view #view_article {
  margin-top: 8px;
  padding: 16px 14px 20px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(34, 211, 238, 0.15) !important;
  background: radial-gradient(120% 80% at 50% 0%, rgba(34, 211, 238, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(6, 10, 22, 0.75), rgba(2, 4, 12, 0.92)) !important;
}

.sp-content-wrap .bo_view #article_contents,
.sp-content-wrap .bo_view #article_contents.ckeditor4 {
  border-radius: 12px !important;
  border: 1px solid rgba(51, 65, 85, 0.45) !important;
  background: rgba(2, 6, 14, 0.55) !important;
  padding: 16px 18px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* 이전글 / 다음글 — 밝은 회색·파란 기본값 덮어쓰기 */
.sp-content-wrap .bo_view #view_move {
  background: transparent !important;
  margin-top: 20px !important;
}
.sp-content-wrap .bo_view #view_move a.prev,
.sp-content-wrap .bo_view #view_move a.next {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.98)) !important;
  border: 1px solid rgba(34, 211, 238, 0.28) !important;
  border-radius: 14px !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.sp-content-wrap .bo_view #view_move .prev .label,
.sp-content-wrap .bo_view #view_move .next .label {
  color: #7dd3fc !important;
}
.sp-content-wrap .bo_view #view_move .subject {
  color: #fde68a !important;
}
.sp-content-wrap .bo_view #view_move .date,
.sp-content-wrap .bo_view #view_move .prev .date,
.sp-content-wrap .bo_view #view_move .prev .label {
  color: #94a3b8 !important;
}

/* 관련링크 */
.sp-content-wrap .bo_view .view_filelink li {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
  border-radius: 12px !important;
}
.sp-content-wrap .bo_view .view_filelink a {
  color: #7dd3fc !important;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px !important;
}
.sp-content-wrap .bo_view .view_filelink .filelink_cnt {
  color: #64748b !important;
}

/* 댓글: 퀀텀 패널 */
.sp-content-wrap .bo_view .comment_opener {
  margin-top: 22px !important;
  padding: 14px 16px !important;
  border-radius: 12px 12px 0 0 !important;
  border: 1px solid rgba(34, 211, 238, 0.28) !important;
  border-bottom: none !important;
  background: rgba(15, 23, 42, 0.88) !important;
  color: #e2e8f0 !important;
}
.sp-content-wrap .bo_view .comment_opener b {
  color: #fef08a !important;
}
.sp-content-wrap .bo_view .bo_comment {
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  background: rgba(6, 10, 20, 0.72) !important;
}
.sp-content-wrap .bo_view .bo_comment .empty {
  color: #94a3b8 !important;
  padding: 2.5rem 1rem !important;
  background: transparent !important;
}
.sp-content-wrap .bo_view .bo_comment .comment {
  border-bottom: 1px solid rgba(51, 65, 85, 0.5) !important;
}
.sp-content-wrap .bo_view #bo_basic_comment_write.bo_comment_write,
.sp-content-wrap .bo_view .bo_comment_write {
  margin-top: 18px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(34, 211, 238, 0.28) !important;
  background: rgba(15, 23, 42, 0.9) !important;
}
.sp-content-wrap .bo_view .bo_comment_write textarea,
.sp-content-wrap .bo_view .bo_comment_write #wr_content {
  background: rgba(2, 6, 18, 0.9) !important;
  border: 1px solid rgba(71, 85, 105, 0.65) !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.sp-content-wrap .bo_view .bo_comment_write .btn_submit {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.35), rgba(8, 47, 73, 0.95)) !important;
  border: 1px solid rgba(34, 211, 238, 0.45) !important;
  color: #ecfeff !important;
  border-radius: 10px !important;
}

/* 슬롯버프(slotbuff3) 출처 이미지 아래 캡션·브랜딩 블록 비표시 (:has + JS .sp-slotbuff-source-tail) */
.sp-content-wrap #article_contents figure:has(img[src*="slotbuff"]) figcaption,
.sp-content-wrap #article_contents figure:has(img[src*="Slotbuff"]) figcaption,
.sp-content-wrap #freeslot_article_contents figure:has(img[src*="slotbuff"]) figcaption,
.sp-content-wrap #freeslot_article_contents figure:has(img[src*="Slotbuff"]) figcaption,
.sp-content-wrap #article_img figure:has(img[src*="slotbuff"]) figcaption,
.sp-content-wrap #article_img figure:has(img[src*="Slotbuff"]) figcaption,
.sp-content-wrap #article_contents figure:has(a[href*="slotbuff"] img) figcaption,
.sp-content-wrap #freeslot_article_contents figure:has(a[href*="slotbuff"] img) figcaption {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
}

.sp-content-wrap #article_contents .sp-slotbuff-source-tail,
.sp-content-wrap #freeslot_article_contents .sp-slotbuff-source-tail,
.sp-content-wrap #article_img .sp-slotbuff-source-tail {
  display: none !important;
}

/* 무료슬롯(no_pay): 첨부 배너를 #view_article 박스 가로에 맞춤 (base 인라인 inline-block·고정 width 덮어씀) */
body.theme-dark-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img,
body.theme-white-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img {
  width: 100%;
  box-sizing: border-box;
}
body.theme-dark-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img .view_image,
body.theme-dark-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img .view_image--no_pay_banner,
body.theme-dark-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img .sp-article-game-link,
body.theme-white-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img .view_image,
body.theme-white-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img .view_image--no_pay_banner,
body.theme-white-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img .sp-article-game-link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
body.theme-dark-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img img,
body.theme-dark-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img .sp-article-game-link img,
body.theme-white-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img img,
body.theme-white-spring .sp-content-wrap .bo_view[data-bo-table="no_pay"] #article_img .sp-article-game-link img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* bootstrap 게시판 읽기 */
#bo_v[data-bo-table="no_pay"] #bo_v_img img,
#bo_v[data-bo-table="no_pay"] #bo_v_img .sp-article-game-link img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}
#bo_v[data-bo-table="no_pay"] #bo_v_img .sp-article-game-link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}