/* ============================================================
   GALLA THEME — 전 페이지 톤앤매너 통일 최상위 레이어
   모든 페이지 CSS "뒤에" 로드되어 색·배경·버튼을 통일한다.
   원칙: 프리미엄 다크(순흑 배경) · 단일 인디고 액센트 · 골드 버튼 금지
   배틀 댓글 시스템(.bm-*, .army-*, 전장 HUD)은 정체성 유지 위해 건드리지 않음.
   ============================================================ */
:root {
  /* 배경 계층 */
  --bg: #000;
  --surface-1: #0c0d11;
  --surface-2: #14151a;
  --surface-3: #1c1e26;
  /* 선/구분 */
  --line-1: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  /* 텍스트 */
  --text-hi: #f3f4f6;
  --text-mid: #a4abb8;
  --text-low: #6b7280;
  /* 브랜드 액센트 (단일 인디고) */
  --accent: #4361ff;
  --accent-2: #6f86ff;
  --accent-grad: linear-gradient(135deg, #6a7bff 0%, #3a5bff 100%);
  --accent-glow: 0 6px 22px rgba(67,97,255,.32);
  /* 진영 (배틀 정체성, 고급 톤) */
  --pro: #4d8dff;
  --con: #ff5a6e;
  /* 상태 */
  --ok: #2fd07a;
  --danger: #ff4d67;
  /* GP 화폐 — 순화된 샴페인(텍스트 전용, 버튼 금지) */
  --gp: #cfd7e6;
  /* 반경 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
}

/* ===== 배경 통일 (헤더 위 노치/safe-area와 본문 색 단차 제거) =====
   iOS 앱 웹뷰가 투명(GallaBridgeVC: isOpaque=false, wv.bg=clear, 그 뒤 native view=black)이라
   html 배경이 노치 영역에 그대로 비친다. SPA 본문은 tab-pane의 'flat #0a0a0b'이므로
   html도 '같은 flat #0a0a0b'여야 노치=본문 단차가 사라진다(그라디언트는 위쪽이 밝아 오히려 단차).
   ⚠️ 노치가 검게 뜨면 GallaBridgeVC.swift의 view.backgroundColor=.black도 #0a0a0b로(네이티브 재빌드 필요). */
html {
  background: #0a0a0b !important;
}
body {
  background: #0a0a0b !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 🩹 안전영역(노치/상태바) filler — 상단 safe-area를 앱 배경색으로 채운다.
   ⚠️ 예전엔 background:#000(순검정)이라 본문(#0a0a0b)과 색 단차가 나 헤더 위가 시커멓게 떴다
   (실기기 픽셀 측정: 0~safe-area=(0,0,0), 이하=(10,10,11)). 앱 배경색과 일치시켜 단차 제거. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
  background: #0a0a0b; z-index: 2147483000; pointer-events: none;
}

/* ===== 골드 버튼 전면 폐지 → 세련된 인디고 액센트 =====
   (배틀 코어 아님. CTA/락/탭/일기토 버튼 통일) */
.rp-submit,
.fac-s-btn,
.tt-btn.on,
.emo-lock button,
.gif-lock button,
.c-duel,
.si-buy:not(.no):not(.owned) {
  background: var(--accent-grad) !important;
  color: #fff !important;
  box-shadow: var(--accent-glow) !important;
}
.c-duel { box-shadow: 0 0 16px rgba(67,97,255,.45) !important; }
@keyframes cDuelPulse { 50% { box-shadow: 0 0 24px rgba(67,97,255,.7) !important; transform: translateY(-1px); } }

/* 상점 충전 버튼도 동일 액센트 (이미 파랑이지만 톤 통일) */
.shop-charge { background: var(--accent-grad) !important; }

/* ===== 스크롤바/선택 — 프리미엄 디테일 ===== */
::selection { background: rgba(67,97,255,.35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
/* 가로 스크롤 칩/카테고리/서브탭 행 — 스크롤바(아래 '줄') 완전 숨김(터치 UI).
   SPA에선 페이지별 CSS가 늦게 로드돼 전역 8px 스크롤바가 카테고리 밑에 줄로 보였다.
   theme.css는 항상 먼저 로드되므로 여기서 전역으로 확실히 숨긴다. */
.cat-chips, .chip-scroll, .news-category-chips, .hv-cats, .hv-mode,
.plaza-categories, .tabs-header, .tabs-header-scroll, .dm-tabs, .news-category-chips {
  scrollbar-width: none; -ms-overflow-style: none;
}
.cat-chips::-webkit-scrollbar, .chip-scroll::-webkit-scrollbar, .news-category-chips::-webkit-scrollbar,
.hv-cats::-webkit-scrollbar, .hv-mode::-webkit-scrollbar, .plaza-categories::-webkit-scrollbar,
.tabs-header::-webkit-scrollbar, .tabs-header-scroll::-webkit-scrollbar, .dm-tabs::-webkit-scrollbar {
  display: none !important; width: 0 !important; height: 0 !important;
}

/* ===== 큰 골드 배너 → 프리미엄 뉴트럴 (배틀 골드유닛·GP 배지는 유지) ===== */
.rp-reward {
  background: linear-gradient(135deg, rgba(67,97,255,.10), rgba(255,255,255,.02)) !important;
  border-color: var(--line-2) !important;
}
.rp-reward-tx { color: var(--text-hi) !important; }
.rp-reward-tx b { color: var(--gp) !important; }
.rp-reward-tx small { color: var(--text-mid) !important; }

/* GP 잔액/뱃지 — 샴페인 텍스트만(면적 골드 축소) */
.shop-bal { background: rgba(207,215,230,.08) !important; border-color: rgba(207,215,230,.22) !important; color: var(--gp) !important; }

/* ===== 투표(진영 선택) 톤다운 통일 — 채도·명도↓ 프리미엄 (배틀 .bm-* 제외) ===== */
:root { --pro-solid: #3a54ad; --con-solid: #b04a60; }
.vote-pro,
.vote-section .vote-pro,
.stats-section .vote-pro { background: var(--pro-solid) !important; }
.vote-con,
.vote-section .vote-con,
.stats-section .vote-con { background: var(--con-solid) !important; }
.vote-bar, .vote-section .vote-bar, .stats-section .vote-bar { background: #191a20 !important; }

/* 투표 버튼 — 미투표(진영 틴트로 톤업) / 투표(채움) */
.faction-btn-a {
  background: linear-gradient(180deg, rgba(58,84,173,.26), rgba(58,84,173,.12)) !important;
  color: #c4d2f7 !important; border: 1px solid rgba(96,124,220,.55) !important;
}
.faction-btn-b {
  background: linear-gradient(180deg, rgba(176,74,96,.26), rgba(176,74,96,.12)) !important;
  color: #f4c2cc !important; border: 1px solid rgba(210,105,128,.55) !important;
}
.faction-btn-a.voted { background: var(--pro-solid) !important; border-color: var(--pro-solid) !important; color: #fff !important; }
.faction-btn-b.voted { background: var(--con-solid) !important; border-color: var(--con-solid) !important; color: #fff !important; }

/* ===== 후원하기 CTA — 세련된 그라데이션(코럴→로즈→마젠타 깊이) ===== */
.donate-cta {
  background: linear-gradient(120deg, #ff7a8d 0%, #ff5170 48%, #f0457e 100%) !important;
  box-shadow: 0 8px 24px rgba(255,81,112,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.donate-cta:active { filter: brightness(.96); }

/* ===== 작성자 헤더 정리·통일 (index·issue) — 인스타식 미니멀 ===== */
/* 등급: 아이콘만 작게(이름 텍스트 숨김) · 레벨 배지 숨김 · "작성자"는 JS에서 제거됨 */
.media-author-head .level-badge { display: none !important; }
.media-author-head .nick-title { display: inline-flex !important; align-items: center; margin-right: 1px; }
.media-author-head .nick-title .nt-name { display: none !important; }
.media-author-head .nick-title .nt-ico { font-size: 13px; line-height: 1; }
.media-author-head { align-items: center !important; }
.media-author-head .mah-line1 { gap: 6px !important; }
.media-author-head .mah-line1 .author-name {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--text-hi) !important; letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-author-head .mah-line2 { color: var(--text-low) !important; font-size: 12px !important; }
/* 팔로우 버튼 톤 통일 */
.media-author-head .follow-btn {
  border: 1px solid var(--line-2) !important; background: transparent !important;
  color: var(--text-mid) !important; font-weight: 800 !important;
}

/* ===== 공용 로그인 유도 모달 (GALLA_needLogin) ===== */
.glm-dim {
  position: fixed; inset: 0; z-index: 2147483200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .18s; padding: 24px;
}
.glm-dim.open { opacity: 1; pointer-events: auto; }
.glm-card {
  width: 100%; max-width: 320px; background: linear-gradient(180deg, #16171d, #101116);
  border: 1px solid var(--line-2); border-radius: 20px; padding: 24px 20px 18px; text-align: center;
  transform: translateY(10px) scale(.98); transition: transform .2s cubic-bezier(.2,.9,.3,1); box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.glm-dim.open .glm-card { transform: none; }
.glm-ico { font-size: 34px; }
.glm-title { font-size: 17px; font-weight: 900; color: var(--text-hi); margin: 10px 0 6px; }
.glm-msg { font-size: 13.5px; color: var(--text-mid); line-height: 1.5; margin-bottom: 18px; }
.glm-btns { display: flex; gap: 8px; }
.glm-btns button { flex: 1; padding: 13px; border: none; border-radius: 12px; font-weight: 800; font-size: 14px; cursor: pointer; }
.glm-cancel { background: rgba(255,255,255,.07); color: var(--text-mid); }
.glm-go { background: var(--accent-grad); color: #fff; box-shadow: var(--accent-glow); }

/* ===== 공용 팔로우 버튼 (.js-follow) — 예측·광장 등 ===== */
.js-follow {
  border: 1px solid var(--line-2); background: transparent; color: var(--text-mid);
  font-weight: 800; font-size: 12.5px; padding: 6px 14px; border-radius: 99px;
  cursor: pointer; white-space: nowrap; transition: .15s;
}
.js-follow:active { transform: scale(.96); }
.js-follow.following { background: rgba(255,255,255,.06); color: var(--text-low); border-color: var(--line-1); }
.pmd-follow { margin-left: auto; align-self: center; }
.pz-follow { display: inline-block; margin-top: 10px; }

/* ===== 플래티넘/실버 잔재 일소 → 세련된 블랙톤 (전 페이지 공용, 2026-07-13) ===== */
/* 플래티넘·샴페인·금색 그라데이션 버튼 → 프리미엄 딥블랙 (배틀 참전 버튼은 정체성상 예외) */
.cf-btn.main,
.si-buy:not(.no),
.oa-btn-gold,
.auth-btn,
.btn-main.full,
.comment-write button,
.plaza-write-bar button,
.donate-tier.on, .champ-btn {
  background: linear-gradient(180deg, #24262e 0%, #0c0d11 100%) !important;
  color: #f4f5f8 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.cf-btn.main:active,
.si-buy:not(.no):active,
.oa-btn-gold:active,
.auth-btn:active,
.btn-main.full:active,
.comment-write button:active,
.plaza-write-bar button:active { filter: brightness(1.18); transform: translateY(1px); }
.cf-btn.main:disabled, .auth-btn:disabled, .btn-main.full:disabled { opacity: .5 !important; box-shadow: none !important; }

/* 플래티넘 필 배지(부스트/핀/보유) → 다크 글래스 */
.pin-chip, .pin-badge, .si-owned {
  background: rgba(255,255,255,.08) !important;
  color: #e7ebf3 !important;
  -webkit-text-fill-color: #e7ebf3 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
/* 부스트/하이라이트 강조선 — 플래티넘 → 은은한 인디고 */
.card.pinned { border-color: rgba(111,134,255,.38) !important; }
.comment.hl, .reply.hl { border-color: rgba(111,134,255,.4) !important; }
.comment.hl::before, .reply.hl::before {
  background: rgba(111,134,255,.16) !important; color: #cdd6ff !important;
  -webkit-text-fill-color: #cdd6ff !important;
}

/* ===== 하단 네비 겹침 방지 (2026-07-13) ===== */
/* 모달·시트·드로어가 열리면 플로팅 네비 숨김 (네비 z-index가 높아 모달을 덮던 문제) */
body:has(#createModal:not([hidden])) .nav,
body:has(#plaza-write-modal:not(.hidden)) .nav,
body:has(.wh-sheet.open) .nav,
body:has(.shop-sheet.open) .nav,
body:has(.noti-drawer.open) .nav,
body:has(#dm-root.open:not(.page)) .nav,   /* DM 오버레이만 — dm.html 페이지 모드는 네비 유지 */
body:has(.glm-dim.open) .nav,
body:has(.bugr-dim) .nav,
body:has(.ssh-dim.open) .nav { display: none !important; }

/* 🪪 닉네임 실시간 확인 상태 */
.nick-stat { margin-top: 6px; font-size: 12px; color: #8b909b; min-height: 16px; }
.nick-stat.good { color: #2fd07a; }
.nick-stat.bad { color: #ff6b7a; }

/* ═══════════════════════════════════════════════════════════
   🔒 인스타식 선택 정책 — UI는 전역 선택 금지 + iOS 롱프레스 콜아웃(Copy/Translate/Share) 차단.
   실제로 복사할 텍스트만 예외: 입력창(input/textarea/contenteditable)과 채팅 메시지 텍스트(.dm-bub-body).
   (사장님: 채팅 대화 텍스트 외엔 전 페이지 어디서도 선택 안 되게 — 인스타처럼)
   ═══════════════════════════════════════════════════════════ */
html { -webkit-touch-callout: none; }
html, body {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
img, svg, video, canvas, a { -webkit-user-drag: none; }
input, textarea, select,
[contenteditable="true"], [contenteditable=""],
.dm-bub-body, .selectable, [data-selectable] {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}

/* 🤖 갈비스 진입 아이콘 — 앱(SPA) 전용 기능. 웹(MPA)에선 숨김(friend.js가 SPA에서만 위임 처리) */
body:not([data-page="spa"]) [data-galvis]{ display:none !important; }
/* 🤖 갈비스 아이콘 — 전역 크기·색. 각 페이지 버튼이 SVG 크기를 안 줘서 얇은 선으로 찌그러지던 것 방지(전 화면 공통). */
.gv-galvis{ width:22px; height:22px; flex:0 0 auto; color:#5fd8ff; }
[data-galvis]{ align-items:center; }