/* ============================================================
   GAMEBOY.KR 개편 — P1 디자인시스템 + 전역 chrome (라이브 morenews DOM 타겟)
   - 시안 chrome.css의 디자인 언어를 라이브 morenews 헤더/푸터/사이드바 DOM에 이식
   - 활성화: mu-plugins/gb-chrome-overrides.php가 ?gb_chrome=1(관리자) 프리뷰에서만 enqueue
   - 스왑(Phase C) 시 게이트 제거 → 전역 적용
   - ⛔ 모바일메뉴 v12 보호블록 의존 셀렉터(#main-navigation-bar overflow/position,
     #primary-menu, .toggle-menu)는 색/배경만 건드리고 구조(overflow/position/display)는 불변
   ============================================================ */

:root {
  --gb-bg: #15151b;
  --gb-bg2: #191921;
  --gb-bg3: #1b1b23;
  --gb-bg4: #101015;
  --gb-line: #26262f;
  --gb-line2: #2c2c37;
  --gb-line3: #33333f;
  --gb-txt: #e7e7ec;
  --gb-txt2: #b9b9c4;
  --gb-mut: #8a8a96;
  --gb-mut2: #6f6f7b;
  --gb-pur: #9229F7;
  --gb-pur-d: #7a1ed1;
  --gb-pink: #E72B99;
  --gb-amber: #f0a730;
  --gb-cyan: #27c0d6;
  --gb-green: #1bbd8a;
}

/* ── 전역 폰트 → Pretendard (morenews 인라인 Open Sans/Oswald 덮기) ── */
html body,
body button,
body input,
body select,
body optgroup,
body textarea,
body h1, body h2, body h3, body h4, body h5, body h6,
body .main-navigation ul li a,
body .site-branding .site-title,
body .widget-title,
body .read-title h3 a {
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif !important;
}

/* ── 다크 배경 #1A1A1A → #15151b ── */
html body.aft-dark-mode,
html body.aft-dark-mode.custom-background,
html body.aft-dark-mode #af-preloader,
html body.aft-dark-mode #sidr {
  background-color: var(--gb-bg) !important;
}

/* ============================================================
   ① 유틸바 (.top-header)
   ============================================================ */
.top-header {
  background: #1a1a22;
  border-bottom: 1px solid var(--gb-line);
}
/* 유틸바 = flex 2분할(좌: 날짜+슬로건 / 우: 회원) */
.top-header .top-bar-flex { display: flex; align-items: center; min-height: 36px; }
.top-header .top-bar-left.col-2 { width: auto; display: flex; align-items: center; }
.top-header .top-bar-right.col-2 { width: auto; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; }
.top-header .topbar-date,
.top-header .date-bar-left {
  color: var(--gb-mut);
  font-size: 12px;
}
.top-header .gb-util-tag {
  color: var(--gb-mut);
  font-size: 12px;
  margin-left: 14px;
}
/* 회원 메뉴 → 유틸바 우측(얇은 바에 맞게 컴팩트) */
/* gamernews .aft-small-social-menu{display:none !important} 전역 숨김을 유틸바 한정 복구 */
.top-header .top-bar-right .aft-small-social-menu {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}
/* morenews .aft-small-social-menu가 소셜아이콘용 font-size:0 등으로 텍스트를 죽이므로 복구 */
.top-header .aft-small-social-menu { font-size: 12.5px; }
.top-header .gamernews-user-menu { margin: 0; display: flex !important; font-size: 12.5px; }
.top-header .gn-login-btn { display: inline-flex !important; visibility: visible !important; font-size: 12.5px !important; }
.top-header .gn-login-btn span { font-size: 12.5px !important; }
.top-header .gn-user-btn { padding: 3px 8px; gap: 5px; background: transparent; }
.top-header .gn-avatar { width: 22px; height: 22px; }
.top-header .gn-username { font-size: 12.5px !important; color: var(--gb-txt2); }
.top-header .gn-gold-badge { font-size: 11px !important; }
.top-header .gn-dropdown-menu { right: 0; left: auto; }

/* ============================================================
   ② 브랜드바 (.af-middle-header) + 신규 로고 (.gb-logo)
   ============================================================ */
.af-middle-header {
  background: var(--gb-bg);
}
/* 브랜드바: 로고(좌) + 룰렛 CTA(우) — .logo div를 flex로 펴서 정렬 */
.af-middle-header .af-middle-container .logo {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 14px;
}
.af-middle-header .gb-roulette-cta { margin-left: auto; }
.gb-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.gb-logo .gb-logo-img,
.gb-logo .gb-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}
.gb-logo .gb-logo-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.gb-logo .gb-logo-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--gb-txt);
}
.gb-logo .gb-logo-tag {
  font-size: 10px;
  color: var(--gb-mut);
  letter-spacing: 3px;
}

/* ============================================================
   ③ 퍼플 네비 (#main-navigation-bar) — 배경/색만, 구조 불변(보호블록)
   ============================================================ */
#main-navigation-bar.af-bottom-header {
  background: var(--gb-pur) !important;
}
#main-navigation-bar .main-navigation ul li a,
#main-navigation-bar .menu.main-menu > li > a {
  color: #efe9ff;
}
#main-navigation-bar .main-navigation ul li a:hover {
  color: #fff;
}
#main-navigation-bar .toggle-menu .ham,
#main-navigation-bar .toggle-menu i {
  color: #fff;
}

/* ============================================================
   ③' 출석 룰렛 CTA (브랜드바 우측) + .search-watch(검색만)
   ============================================================ */
.gb-roulette-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gb-amber);
  color: #3a2500;
  border-radius: 22px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
}
.gb-roulette-cta:hover { background: #ffc04d; color: #3a2500; }
.gb-rc-pin { background: #3a2500; color: #ffd98a; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
/* 네비 .search-watch — 이제 검색만 남음(회원·룰렛 이동) */
#main-navigation-bar .search-watch {
  display: flex;
  align-items: center;
  gap: 14px;
}
#main-navigation-bar .search-watch .af-search-wrap {
  display: flex;
  align-items: center;
}
.search-watch .gb-roulette-cta:hover {
  background: #ffc04d;
  color: #3a2500;
}
.search-watch .gb-roulette-cta .gb-rc-ico {
  font-size: 14px;
}

/* 회원 메뉴(.gamernews-user-menu)는 유지 — 퍼플 바 위 가독만 보정 */
#main-navigation-bar .gn-username {
  color: #fff;
  white-space: nowrap;
}
/* 우측 액션(룰렛 CTA·회원메뉴)은 메뉴가 길어도 줄어들지/잘리지 않게 */
#main-navigation-bar .search-watch .gb-roulette-cta,
#main-navigation-bar .search-watch .gamernews-user-menu,
#main-navigation-bar .search-watch .af-search-wrap {
  flex-shrink: 0;
}

/* ============================================================
   ④ 푸터 — 개편 4컬럼(.gbf-) 주입 + morenews 기본 푸터 숨김
   ============================================================ */
html body.aft-dark-mode footer.site-footer {
  background: var(--gb-bg4);
  border-top: none;
}
/* morenews 3컬럼 위젯 + 보조 nav 숨김(.site-info 카피라이트는 유지) */
footer.site-footer .primary-footer,
footer.site-footer .secondary-footer {
  display: none !important;
}
footer.site-footer .site-info {
  border-top: 1px solid var(--gb-line);
  background: var(--gb-bg4);
}
footer.site-footer .site-info .col-1.color-pad {
  color: var(--gb-mut2);
  text-align: center;
  padding: 14px 18px;
  font-size: 12px;
}

/* 개편 4컬럼 푸터 (상단푸터 훅 주입) */
.gbf-footer {
  background: var(--gb-bg4);
  border-top: 1px solid var(--gb-line);
}
/* 본문(.container-wrapper)과 동일 컨테이너로 감싸 좌측 끝선 정렬 */
.gbf-wrap {
  padding: 28px 0 18px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 24px;
}
.gbf-col h5 { font-size: 12px; color: var(--gb-txt2); margin-bottom: 10px; font-weight: 700; }
.gbf-col ul { list-style: none; margin: 0; padding: 0; }
.gbf-col li { line-height: 2; }
.gbf-col li a { font-size: 12.5px; color: var(--gb-mut); }
.gbf-col li a:hover { color: var(--gb-txt2); }
.gbf-about .gbf-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.gbf-about .gbf-logo-img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.gbf-about .gbf-name { font-size: 16px; font-weight: 700; letter-spacing: .5px; color: var(--gb-txt); }
.gbf-about p { font-size: 12.5px; color: var(--gb-mut); line-height: 1.6; margin: 0; }
.gbf-social { display: flex; gap: 10px; margin-top: 12px; }
.gbf-social a { font-size: 12px; color: var(--gb-txt2); border: 1px solid var(--gb-line2); border-radius: 20px; padding: 5px 12px; }
.gbf-social a:hover { border-color: var(--gb-line3); }
@media (max-width: 768px) {
  .gbf-wrap { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ============================================================
   ⑤ 사이드바 공유 컴포넌트 (gb_render_sidebar_extras → .gbh-*)
   ============================================================ */
.gbh-side-roulette {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gb-amber);
  color: #3a2500;
  border-radius: 13px;
  padding: 13px 15px;
  margin-bottom: 16px;
  text-decoration: none;
}
.gbh-side-roulette:hover {
  background: #ffc04d;
  color: #3a2500;
}
.gbh-side-roulette .gbh-sr-ico {
  font-size: 24px;
  flex: 0 0 auto;
}
.gbh-side-roulette .gbh-sr-txt {
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
}
.gbh-side-roulette .gbh-sr-txt small {
  font-size: 11.5px;
  font-weight: 500;
  color: #5a3c00;
}

.gbh-swidget {
  border: 1px solid var(--gb-line);
  border-radius: 13px;
  background: var(--gb-bg2);
  padding: 15px;
  margin-bottom: 16px;
}
.gbh-swidget h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 11px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.gbh-swidget h3 .gbh-ver {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #c4b9ff;
  background: rgba(146, 41, 247, .18);
  padding: 2px 9px;
  border-radius: 20px;
}

/* 회원 박스 (시안: 아바타+이름+역할뱃지+골드 상단 / 링크 6개 그리드) */
.gbh-member-box .gbh-mb-top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gb-line);
  margin-bottom: 11px;
}
.gbh-member-box .gbh-mb-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: block;
}
.gbh-member-box .gbh-mb-id { min-width: 0; }
.gbh-member-box .gbh-mb-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gb-txt);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gbh-member-box .gbh-mb-badge {
  font-size: 10px;
  font-weight: 600;
  color: #c4b9ff;
  background: rgba(146, 41, 247, .2);
  padding: 2px 8px;
  border-radius: 20px;
}
.gbh-member-box .gbh-mb-gold {
  font-size: 13px;
  color: #f0c98a;
  font-weight: 600;
  margin-top: 4px;
}
.gbh-member-box .gbh-mb-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gbh-member-box .gbh-mb-links a {
  font-size: 12.5px;
  color: var(--gb-txt2);
  background: var(--gb-bg3);
  border: 1px solid var(--gb-line);
  border-radius: 8px;
  padding: 9px 10px;
  text-align: center;
  text-decoration: none;
}
.gbh-member-box .gbh-mb-links a:hover {
  border-color: var(--gb-line3);
  color: var(--gb-txt);
}
.gbh-member-box .gbh-mb-logout { grid-column: 1 / -1; color: #e99 !important; }
.gbh-member-box.gbh-guest p {
  font-size: 13px;
  color: var(--gb-mut);
  margin-bottom: 11px;
}
.gbh-member-box .gbh-mb-login {
  display: block;
  background: var(--gb-pur);
  color: #fff;
  border-radius: 9px;
  padding: 11px;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}

/* 업데이트 로그 위젯 */
.gbh-changelog .gbh-cl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--gb-line);
  font-size: 12.5px;
}
.gbh-changelog .gbh-cl-row:last-of-type {
  border-bottom: none;
}
.gbh-changelog .gbh-cl-d {
  font-size: 11px;
  color: var(--gb-mut);
  flex: 0 0 auto;
}
.gbh-changelog .gbh-cl-b {
  font-size: 11.5px;
  flex: 0 0 auto;
}
.gbh-changelog .gbh-cl-t {
  font-size: 12px;
  color: var(--gb-txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gbh-changelog .gbh-cl-all {
  display: block;
  margin-top: 11px;
  font-size: 12.5px;
  color: #c4b9ff;
  text-decoration: none;
}