/* ============================================================
   컴포넌트: 패널 · 버튼 · 카드 · 폼 · 테이블 · 모달
   ============================================================ */
/* ============================================================
   STEP 2 : 패널(카드) 스타일 통일
   - 흰색 카드 + 얇은 Border + 부드러운 Shadow + 약한 Glow (시안 기준)
   ============================================================ */
.gg-card {
  background: #ffffff;
  border: 1px solid #e3edf9;
  border-radius: 18px;
  padding: 18px;
  box-shadow:
    0 6px 20px rgba(96, 143, 214, .10),   /* 부드러운 그림자 */
    0 1px 3px rgba(96, 143, 214, .06),
    0 0 26px rgba(130, 180, 255, .08);    /* 약한 글로우 */
}
.gg-card-title {
  font-size: 14px; font-weight: 900; color: #16305e;
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
}
.gg-card-title .gg-t-ico { width: 18px; height: 18px; flex: none; }
.gg-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gg-card-head .gg-card-title { margin-bottom: 0; }

/* 카드 안 연회색-블루 이너 패널 */
.gg-inner { background: #f2f7fc; border: 1px solid #e8f1fa; border-radius: 12px; padding: 14px; }

/* ---------- 리소스 이미지 공통 규칙 ---------- */
img.gg-logo-img, img.gg-avatar, img.gg-nav-ico, img.gg-t-ico, img.gg-coin,
img.gg-me-duck, img.gg-gift, img.gg-attend-gift, img.gg-charge-duck,
img.gg-jackpot-crown, img.gg-p-ico, img.gg-guide-duck, img.gg-shop-img,
img.gg-m-ico, img.gg-s-ico, img.gg-slot-duck, img.gg-recent-empty-duck {
  background: none;
  object-fit: contain;
  image-rendering: pixelated;
}
/* 고해상도 일러스트(무지개/폭죽)는 부드럽게 */
img.gg-img-smooth { image-rendering: auto; }

/* 출석 마지막 날: 선물 뱃지 이미지 */
.gg-attend-day.is-gift { background: none; }
.gg-attend-day.is-gift img { width: 100%; height: 100%; }

/* 최근 당첨 빈 상태 오리 */
.gg-recent-empty-duck { width: 44px; height: 44px; }


/* ============================================================
   STEP 2 : 버튼 스타일 통일
   - 큰 Radius / Gradient / Hover 밝아짐 / 클릭 눌림 / Transition 0.2~0.3s
   - 모든 색상은 디자인 시안에서 직접 추출
   ============================================================ */

/* ---------- 기본 파랑 버튼 (출석 완료 / 구매하기 / 포인트 충전하기 등) ---------- */
.gg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-weight: 800; white-space: nowrap;
  background: linear-gradient(180deg, #3b86fa 0%, #1d6bfa 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(29, 107, 250, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: filter .25s ease, transform .2s ease, box-shadow .25s ease;
}
/* display:inline-flex 가 hidden 속성보다 우선하므로 숨김 규칙을 따로 둔다.
   (이게 없으면 hidden 을 걸어도 버튼이 그대로 보인다 — 예: 일반 회원에게 '공지 등록') */
.gg-btn[hidden] { display: none; }
.gg-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(29, 107, 250, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.gg-btn:active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.97);
  box-shadow: 0 2px 6px rgba(29, 107, 250, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.gg-btn-block { display: flex; width: 100%; }
.gg-btn-sm { height: 32px; padding: 0 14px; font-size: 12px; }
.gg-btn-md { height: 38px; padding: 0 18px; font-size: 13px; }

/* ---------- 더보기 버튼 (흰색 보조 버튼) ---------- */
.gg-more-btn {
  font-size: 11px; font-weight: 700; color: #7d8aa0;
  border: 1px solid #e3edf9; background: #fff;
  border-radius: 9px; padding: 5px 11px; cursor: pointer;
  transition: filter .25s ease, transform .2s ease, border-color .25s ease, color .25s ease;
}
.gg-more-btn:hover { border-color: #b9d4fb; color: #256eeb; filter: brightness(1.02); }
.gg-more-btn:active { transform: translateY(1px) scale(.97); }

/* ---------- START! 버튼 (옐로우 그라데이션) ---------- */
.gg-start-btn {
  height: 66px; border: none; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #ffde55 0%, #f9cc30 100%);
  color: #2b2c2b; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 6px 0 #d9ab12, 0 10px 18px rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .5);
  transition: filter .25s ease, transform .2s ease, box-shadow .2s ease;
}
.gg-start-btn b { font-size: 22px; font-weight: 900; letter-spacing: 2px; }
.gg-start-btn span { font-size: 11px; font-weight: 800; opacity: .8; }
.gg-start-btn:hover { filter: brightness(1.06); }
.gg-start-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #d9ab12, 0 4px 10px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .5);
}

/* ---------- 베팅 칩 조절(−/+) 버튼 ---------- */
.gg-chip-adjust {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(180deg, #40699f 0%, #315a90 100%);
  color: #fff; font-size: 20px; font-weight: 900; border: none; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: filter .25s ease, transform .2s ease;
}
.gg-chip-adjust:hover { filter: brightness(1.15); }
.gg-chip-adjust:active { transform: translateY(1px) scale(.95); }

/* ---------- 베팅 칩 (파랑 10 / 초록 100 / 오렌지 1,000) ---------- */
.gg-chip {
  width: 62px; height: 62px; border-radius: 50%;
  border: 5px dashed rgba(255, 255, 255, .85);
  color: #fff; font-size: 14px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 3px 6px rgba(255, 255, 255, .25);
  transition: filter .25s ease, transform .2s ease, box-shadow .25s ease;
}
.gg-chip:hover { filter: brightness(1.1); transform: translateY(-2px); }
.gg-chip:active { transform: translateY(0) scale(.95); }
.gg-chip-blue   { background: radial-gradient(circle at 50% 35%, #4d8ffa 0%, #2f7bf8 60%, #1e5fd6 100%); }
.gg-chip-green  { background: radial-gradient(circle at 50% 35%, #56c77a 0%, #3fb564 60%, #2c924c 100%); }
.gg-chip-orange { background: radial-gradient(circle at 50% 35%, #f5913f 0%, #ed7527 60%, #d55c0d 100%); }


/* ============================================================
   좌/우 컬럼 + 하단 카드 내부 레이아웃 — STEP 1
   ============================================================ */

/* ---------- 내 정보 ---------- */
/* 아래에 버튼 두 개(충전하기·포인트 거래)가 들어가면서 그만큼만 카드 키를 늘렸다 */
.gg-me { height: 298px; display: flex; flex-direction: column; }
.gg-me-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.gg-me-duck { width: var(--duck-size); height: var(--duck-size); }
.gg-me-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; }
.gg-me-lv { font-size: 11px; font-weight: 800; color: #7d5bd6; border: 1px solid #cfc2f2; border-radius: 999px; padding: 1px 9px; }
.gg-me-points { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; }
.gg-me-points .gg-coin { width: 26px; height: 26px; }
.gg-me-points small { font-size: 14px; color: var(--tx-sub); font-weight: 800; }
.gg-me-exp { width: 100%; margin-top: 6px; }
/* 내 정보 칸 아래 버튼 (충전하기 · 포인트 거래) */
.gg-me-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.gg-me-btns .gg-btn { width: 100%; height: 36px; padding: 0 8px; font-size: 12.5px; white-space: nowrap; }
.gg-me-exp-row { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; color: var(--tx-sub); margin-bottom: 5px; }
.gg-bar { height: 8px; border-radius: 999px; background: #e4edf8; overflow: hidden; }
.gg-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4d8ffa, #1d6bfa); }

/* ---------- 오늘의 미션 ---------- */
.gg-mission { height: 170px; display: flex; flex-direction: column; }
.gg-mission .gg-gift { width: 26px; height: 26px; }
.gg-mission-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.gg-mission-name { font-size: 12px; font-weight: 700; color: var(--tx-sub); }
.gg-mission-count { font-size: 20px; font-weight: 900; }
.gg-mission-reward { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; }
.gg-mission-reward b { color: var(--blue); }

/* ---------- 출석 체크 ---------- */
.gg-attend { height: 202px; display: flex; flex-direction: column; }
.gg-attend-streak { font-size: 12px; font-weight: 800; color: var(--tx-sub); margin-bottom: 10px; }
.gg-attend-days { display: flex; justify-content: space-between; margin-bottom: 12px; }
.gg-attend-day {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ph);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--tx-sub);
}
.gg-attend-day.is-done { background: linear-gradient(180deg, #43cf68, #2db14e); color: #fff; box-shadow: 0 2px 5px rgba(45, 177, 78, .35); }
.gg-attend-reward { font-size: 12px; font-weight: 700; color: var(--tx-sub); margin-bottom: 12px; }
.gg-attend .gg-btn { margin-top: auto; }

/* ---------- 포인트 충전 ---------- */
.gg-charge { flex: 1; display: flex; flex-direction: column; }
.gg-charge-body { flex: 1; display: flex; align-items: center; gap: 14px; }
.gg-charge-duck { width: 84px; height: 96px; flex: none; }
.gg-charge-txt { display: flex; flex-direction: column; gap: 10px; }
.gg-charge-txt p { font-size: 13px; font-weight: 700; line-height: 1.5; }

/* ---------- 실시간 잭팟 ---------- */
.gg-jackpot { height: 211px; display: flex; flex-direction: column; }
.gg-jackpot-inner {
  flex: 1; border-radius: 16px;
  background: linear-gradient(180deg, #4288f5 0%, #3279f2 100%);
  border: 1px solid #5a97f7;
  box-shadow: 0 8px 18px rgba(50, 121, 242, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.gg-jackpot-crown {
  display: block;
  width: 40px; height: 33px;   /* 원본 80×66의 정확히 1/2 (정수 배율) */
  object-fit: contain;
  background: transparent;
}
.gg-jackpot-amount {
  /* 10억(1,000,000,000 DC) 같은 큰 금액도 "숫자 + DC"가 반드시 한 줄에 들어가게:
     전광판을 넓히고(85%→94%) 글씨를 줄였다(19→16px). 줄바꿈 금지 + 숫자 폭 고정. */
  width: 94%; height: 44px; border-radius: 12px;
  background: #1c1d22;
  border: 1px solid #34363e;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
  color: var(--gold); font-size: 16px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; letter-spacing: 0.3px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  padding: 0 8px; overflow: hidden;
}
.gg-jackpot-who { font-size: 12px; font-weight: 800; color: #fff; }
.gg-jackpot-time { font-size: 11px; color: rgba(255, 255, 255, .75); font-weight: 700; }

/* ---------- 등급별 확률 ---------- */
.gg-prob { height: 286px; display: flex; flex-direction: column; }
.gg-prob-rows { flex: 1; display: flex; flex-direction: column; }
.gg-prob-row {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #edf2f8; font-size: 13px; font-weight: 800;
}
.gg-prob-row:last-child { border-bottom: none; }
.gg-prob-name { display: flex; align-items: center; gap: 8px; }
.gg-prob-name .gg-p-ico { width: 16px; height: 16px; }
.gg-prob-row .gg-pct { color: var(--tx-sub); font-weight: 800; }

/* ---------- 게임 안내 ---------- */
.gg-guide { flex: 1; display: flex; flex-direction: column; }
.gg-guide-list { display: flex; flex-direction: column; gap: 12px; font-size: 12.5px; line-height: 1.55; color: #40507a; font-weight: 600; }
.gg-guide-list li { list-style: none; padding-left: 12px; position: relative; }
.gg-guide-list li::before { content: "·"; position: absolute; left: 0; font-weight: 900; }
.gg-guide-duck { margin-top: auto; align-self: flex-end; width: 130px; height: 96px; }

/* ---------- 최근 당첨 내역 ----------
   2026-08-18 변경 — 큰 카드 3칸 대신 «한 줄씩 스크롤 목록» (최신이 맨 위).
   칸(섹션) 크기는 그대로 두고 목록만 안에서 스크롤된다. */
.gg-recent { flex: 1; display: flex; flex-direction: column; }
.gg-recent-cards {
  /*  안쪽 스크롤 없음 (2026-08-18) — 목록은 최근 8줄만 보여준다.
      스크롤 영역이 있으면 모바일에서 화면 터치 스크롤이 이 칸에 갇혀 불편했다. */
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
}
/* 빈 상태·불러오는 중 안내 카드 (기존 모양 유지) */
.gg-recent-card {
  flex: 1; padding: 18px;
  border: 1px solid var(--card-border); border-radius: 12px; background: #fff;
  box-shadow: 0 2px 8px rgba(96, 143, 214, .08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.gg-recent-name { font-size: 13px; font-weight: 900; }
.gg-recent-icons { display: flex; gap: 3px; }
.gg-recent-icons i { width: 20px; height: 20px; }
.gg-recent-amt { font-size: 13px; font-weight: 900; color: var(--blue); }
.gg-recent-time { font-size: 11px; color: var(--tx-sub); font-weight: 700; }
.gg-recent-tag { font-size: 10px; font-weight: 900; color: #f08c00; }
/* 당첨 한 줄 */
.gg-recent-row {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 7px 10px; border: 1px solid var(--card-border); border-radius: 10px;
  background: #fff; box-shadow: 0 1px 4px rgba(96, 143, 214, .06);
}
.gg-recent-row.is-jackpot { border-color: #ffd43b; background: #fffdf2; }
.gg-rr-name {
  flex-shrink: 1; min-width: 0; max-width: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 900; color: var(--tx);
}
.gg-rr-icons { display: flex; gap: 2px; flex-shrink: 0; }
.gg-rr-icons i {
  width: 16px; height: 16px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  image-rendering: pixelated;
}
.gg-rr-jack { flex-shrink: 0; font-size: 10.5px; font-weight: 900; color: #f08c00; }
.gg-rr-amt { margin-left: auto; flex-shrink: 0; font-size: 12.5px; font-weight: 900; color: var(--blue); }
.gg-rr-time { flex-shrink: 0; width: 54px; text-align: right; font-size: 10.5px; font-weight: 700; color: var(--tx-sub); }

/* ---------- 포인트 상점 ---------- */
.gg-shop { display: flex; flex-direction: column; }
.gg-shop-items { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
.gg-shop-item {
  border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 10px; background: #fff;
  box-shadow: 0 2px 8px rgba(96, 143, 214, .08);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .2s ease, box-shadow .25s ease;
}
.gg-shop-item:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(96, 143, 214, .16); }
.gg-shop-img { width: 78px; height: 78px; }
.gg-shop-name { font-size: 12px; font-weight: 800; text-align: center; line-height: 1.4; }
.gg-shop-price { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 900; }
.gg-shop-price .gg-coin { width: 15px; height: 15px; }
.gg-shop-item .gg-btn { margin-top: auto; width: 100%; height: 30px; font-size: 12px; }

/* ---------- 미니 게임 ---------- */
.gg-mini { display: flex; flex-direction: column; }
.gg-mini-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
.gg-mini-card {
  border: 1px solid #dcebf8; border-radius: 12px; background: #e9f4fb;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; font-weight: 800; color: var(--tx); cursor: pointer;
  transition: filter .25s ease, transform .2s ease, box-shadow .25s ease;
}
.gg-mini-card:hover { filter: brightness(1.03); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(96, 143, 214, .18); }
.gg-mini-card:active { transform: translateY(0) scale(.98); }
.gg-mini-card .gg-m-ico { width: 34px; height: 34px; }
.gg-mini-card.is-wide { grid-column: 1 / -1; }
/* 열린 게임 카드 (준비 중이 아닌 것) — 링크라서 밑줄을 지우고 색을 살린다 */
.gg-mini-card.is-live {
  position: relative; text-decoration: none;
  border-color: #b9d9f6;
  background: linear-gradient(180deg, #ddefff, #cfe6fd);
  color: #12336b;
}
.gg-mini-card.is-live .gg-new-badge { top: 6px; right: 8px; }


/* ---------- 준비 중 뱃지 ---------- */
.gg-soon {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 900; color: #f08c00;
  background: rgba(240, 140, 0, .1);
  border: 1px solid rgba(240, 140, 0, .3);
  border-radius: 999px; padding: 3px 10px;
}
.gg-soon-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 46px 20px; text-align: center;
}
.gg-soon-panel img { width: 90px; height: 90px; object-fit: contain; image-rendering: pixelated; opacity: .9; }
.gg-soon-panel p { color: var(--tx-sub); font-size: 13px; font-weight: 700; line-height: 1.6; }

/* ---------- 로그인/회원가입 ---------- */
.gg-auth-wrap { max-width: 420px; margin: 60px auto; padding: 0 16px; }
.gg-auth-card { text-align: center; padding: 34px 30px; }
/* (2026-08-25) 기본 아바타를 쓴다 — 649px 원본을 작게 줄이므로 pixelated 는 외곽선을 끊는다.
   아바타 레이어와 같은 규칙(auto)으로 부드럽게 줄인다. */
.gg-auth-card .gg-auth-duck { width: 96px; height: 96px; object-fit: contain; image-rendering: auto; margin-bottom: 8px; }
.gg-auth-card h1 { font-size: 24px; font-weight: 900; color: var(--tx); margin-bottom: 4px; }
.gg-auth-card .gg-auth-sub { font-size: 12px; color: var(--tx-sub); font-weight: 700; letter-spacing: 2px; margin-bottom: 22px; }
.gg-input {
  width: 100%; height: 46px; border-radius: 12px;
  border: 1px solid var(--card-border); background: #f7fafd;
  padding: 0 15px; font-size: 14px; color: var(--tx); font-family: inherit;
  margin-bottom: 10px;
}
.gg-input:focus { outline: none; border-color: var(--blue); background: #fff; }
.gg-auth-err { color: #e03131; font-size: 12.5px; font-weight: 700; min-height: 18px; margin: 4px 0 8px; }
.gg-auth-switch { margin-top: 16px; font-size: 13px; color: var(--tx-sub); }
/* 가입 승인 대기 안내 (2026-08-26) — 오류가 아니라 «접수됐다» 는 안내 */
.gg-auth-pending { margin: 6px 0 14px; padding: 14px 16px; border-radius: 12px;
  background: rgba(59, 130, 246, .10); border: 1px solid rgba(59, 130, 246, .30); text-align: left; }
.gg-auth-pending b { display: block; font-size: 14px; font-weight: 900; color: var(--blue); margin-bottom: 6px; }
.gg-auth-pending p { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--tx-sub); line-height: 1.7; }

.gg-auth-switch a { color: var(--blue); font-weight: 800; cursor: pointer; text-decoration: none; }

/* ---------- 데이터 테이블 (관리자/거래내역) ---------- */
.gg-table { border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; }
.gg-tr {
  display: grid; gap: 8px; align-items: center;
  padding: 11px 14px; font-size: 12.5px; color: var(--tx);
  border-bottom: 1px solid #edf3fa;
}
.gg-tr:last-child { border-bottom: none; }
.gg-tr-head { background: #f2f7fc; color: var(--tx-sub); font-weight: 800; font-size: 11.5px; }
/* ============================================================
   관리자 회원 관리 표
     예전에는 칸 너비를 화면 코드에서 px 로 박아 넣었다. 그래서 닉네임이
     길면 글자가 두 줄로 접히고, 그 줄만 키가 커져 표 전체가 어긋나 보였다.
     → 칸 너비를 여기로 옮기고, 아이디·닉네임은 한 줄로 자른다(… 로 표시).
       전체 이름은 마우스를 올리면 보인다.
   ============================================================ */
/* 관리자 화면 폭
     회원 관리처럼 칸이 많은 표는 조금 넓게 쓴다.
     다만 너무 넓히면 글자가 좌우로 멀어져 읽기 힘들다 — 1060px 로 잡는다.
     포인트 거래내역은 예전 폭(960px)이 읽기 좋아서 그 탭만 좁게 둔다. */
.gg-admin-page { width: min(calc(100% - 24px), 1180px); }   /* 2026-08-24: 1060 → 1180 — 닉네임 칸 확보 */
.gg-admin-page.is-narrow { width: min(calc(100% - 24px), 960px); }
.gg-admin-users .gg-tr {
  /* 아이디 · 닉네임 · 상태 · 권한 · 포인트 · 기록 · 지급/회수 */
  grid-template-columns:
    minmax(90px, 1fr) minmax(150px, 1.6fr) 92px 68px 108px 58px 258px;
  min-height: 52px;        /* 줄 키를 맞춰 눈이 편하게 */
  padding: 8px 14px;
}
/* 운영자 화면에는 오른쪽에 "관리" 칸이 하나 더 붙는다 */
.gg-admin-users.is-admin .gg-tr {
  grid-template-columns:
    minmax(90px, 1fr) minmax(150px, 1.6fr) 92px 68px 108px 58px 258px 200px;
}
/* 한 줄로 자르기 (칸을 넘치면 … 로) */
.gg-admin-users .u-id,
.gg-admin-users .u-nick {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gg-admin-users .u-nick { font-weight: 800; }
/* 상태 칸 — 배지를 살짝 올리고 그 아래에 마지막 접속 경과 시간을 작게 붙인다 */
.gg-admin-users .u-status-cell {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; line-height: 1.2; margin-top: -3px; min-width: 0;
}
/* 두 줄 모두 한 줄로 — 칸이 좁아도 "오프라인" / "4분 전" 이 중간에서 끊기지 않는다 */
.gg-admin-users .u-status,
.gg-admin-users .u-seen { white-space: nowrap; }
.gg-admin-users .u-seen {
  font-size: 10px; font-weight: 700; color: #aab4c6; white-space: nowrap; letter-spacing: -0.2px;
}
.gg-admin-users .u-seen:empty { display: none; }
.gg-admin-users .u-points { text-align: right; font-variant-numeric: tabular-nums; }
.gg-admin-users .gg-tr-head .u-points { text-align: right; }
/* 버튼 묶음은 줄바꿈 없이 한 줄 유지 */
.gg-admin-users .gg-tr > span { min-width: 0; }
.gg-admin-users .gg-mini-input { width: 100%; min-width: 0; }

/* 전체 회원 일괄 도구 줄 */
.gg-admin-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gg-admin-bulk-lab { font-size: 12px; font-weight: 800; color: var(--tx-sub); }
.gg-admin-bulk .gg-mini-input { width: 110px; }

.gg-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.gg-badge-admin { background: rgba(245, 166, 35, .15); color: #f5a623; }
.gg-badge-manager { background: rgba(76, 175, 80, .15); color: #37a63c; }
.gg-badge-member { background: #eef3f9; color: var(--tx-sub); }
.gg-badge-banned { background: rgba(224, 49, 49, .12); color: #e03131; }
.gg-badge-online { color: #2db14e; font-weight: 800; font-size: 11.5px; }
.gg-badge-offline { color: #b0bacc; font-size: 11.5px; }
/* 회원관리 상태 칸 — 정지된 회원 (접속중/오프라인 대신 표시) */
.gg-badge-suspended { color: #e03131; font-weight: 900; font-size: 11.5px; }
.gg-amt-plus { color: #2db14e; font-weight: 900; }
.gg-amt-minus { color: #e03131; font-weight: 900; }

/* 관리자 탭 */
.gg-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.gg-tab {
  padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 800;
  color: var(--tx-sub); background: #fff; border: 1px solid var(--card-border); cursor: pointer;
  transition: all .2s ease;
}
.gg-tab.is-active { color: #fff; background: linear-gradient(180deg, #3b86fa, #1d6bfa); border-color: transparent; }

/* 관리자 소형 입력/버튼 */
.gg-mini-input {
  width: 84px; height: 30px; border-radius: 8px; border: 1px solid var(--card-border);
  background: #f7fafd; padding: 0 8px; font-size: 12px; color: var(--tx); font-family: inherit;
}
.gg-mini-input:focus { outline: none; border-color: var(--blue); }
.gg-select {
  height: 30px; border-radius: 8px; border: 1px solid var(--card-border);
  background: #fff; font-size: 12px; color: var(--tx); font-family: inherit; padding: 0 6px;
}
.gg-btn-danger { background: linear-gradient(180deg, #ff6b6b, #e03131); box-shadow: 0 4px 10px rgba(224,49,49,.25), inset 0 1px 0 rgba(255,255,255,.25); }
.gg-btn-ghost { background: #fff; color: var(--tx-sub); border: 1px solid var(--card-border); box-shadow: none; }

/* ---------- 토스트 ---------- */
.gg-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(10px);
  background: #16305e; color: #fff; font-size: 13px; font-weight: 700;
  padding: 12px 22px; border-radius: 12px; box-shadow: 0 10px 24px rgba(20, 45, 90, .35);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: 1000;
}
.gg-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   게임 결과 알림 팝업 (하이로우 · 바카라 공통)
   z-index 는 확인·경고 모달(9500 이상)보다 낮게 둔다 —
   올인 확인이나 개인회생 안내가 뜨면 그쪽이 항상 위에 와야 한다.
   ============================================================ */
.gr-back {
  position: fixed; inset: 0; z-index: 9300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px;
  background: rgba(15, 40, 85, .34);
  animation: grFade .16s ease;
}
@keyframes grFade { from { opacity: 0; } to { opacity: 1; } }
.gr-card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 320px;
  padding: 24px 22px 18px;
  border-radius: 20px; text-align: center;
  background: #fff;
  box-shadow: 0 22px 52px rgba(20, 45, 90, .3);
  animation: grRise .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes grRise {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.gr-ico { font-size: 40px; line-height: 1; }
.gr-title { margin: 8px 0 2px; font-size: 18px; font-weight: 900; color: #16305e; }
.gr-amount { margin: 4px 0 0; font-size: 28px; font-weight: 900; letter-spacing: -.5px; line-height: 1.15; }
.gr-amount small { font-size: 13px; font-weight: 800; margin-left: 2px; }
.gr-sub { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #5a6b87; line-height: 1.6; }
.gr-note { margin: 5px 0 0; font-size: 12px; font-weight: 800; color: #e08a1e; line-height: 1.5; }
.gr-ok {
  margin-top: 16px; width: 100%; height: 42px;
  border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #3f8bfb, #2470ef);
  box-shadow: 0 5px 12px rgba(44, 126, 248, .28);
  transition: filter .15s ease, transform .12s ease;
}
.gr-ok:hover { filter: brightness(1.05); }
.gr-ok:active { transform: translateY(1px); }
/* 남은 시간 막대 — 다 줄어들면 저절로 닫힌다 */
.gr-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(20, 45, 90, .08); }
.gr-bar i { display: block; height: 100%; width: 100%; transform-origin: left center; animation: grBar linear forwards; }
@keyframes grBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.gr-back.is-win  .gr-amount { color: #1f9254; }
.gr-back.is-win  .gr-bar i  { background: #2fb06a; }
.gr-back.is-lose .gr-amount { color: #d64545; }
.gr-back.is-lose .gr-bar i  { background: #e8695f; }
.gr-back.is-push .gr-amount { color: #3273c8; }
.gr-back.is-push .gr-bar i  { background: #5b9bf0; }

/* 움직임을 줄이는 설정에서는 애니메이션 없이 바로 보여준다 */
@media (prefers-reduced-motion: reduce) {
  .gr-back, .gr-card { animation: none; }
  .gr-bar i { animation: none; transform: scaleX(0); }
}
@media (max-width: 430px) {
  .gr-card { max-width: 300px; padding: 20px 18px 15px; }
  .gr-ico { font-size: 34px; }
  .gr-title { font-size: 16.5px; }
  .gr-amount { font-size: 25px; }
}

/* ============================================================
   운영자 지급 · 회수 알림 팝업
   돈이 오간 안내라 저절로 닫히지 않는다 — 확인을 눌러야 한다.
   그래서 다른 팝업보다 위에 둔다.
   ============================================================ */
.pa-back {
  position: fixed; inset: 0; z-index: 12800;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px;
  background: rgba(12, 32, 70, .5);
  animation: grFade .18s ease;
}
.pa-card {
  width: 100%; max-width: 330px;
  padding: 26px 24px 20px;
  border-radius: 22px; text-align: center; background: #fff;
  box-shadow: 0 24px 60px rgba(15, 40, 90, .35);
  animation: grRise .24s cubic-bezier(.2, .9, .3, 1.2);
}
.pa-ico { font-size: 42px; line-height: 1; }
.pa-tag {
  display: inline-block; margin-top: 8px; padding: 4px 12px;
  border-radius: 999px; font-size: 11.5px; font-weight: 900; letter-spacing: .3px;
}
.pa-back.is-give .pa-tag { background: #e8f6ee; color: #1f9254; }
.pa-back.is-take .pa-tag { background: #fdeaea; color: #d64545; }
/* 한글이 낱말 가운데서 끊기지 않게 (…지급했 / 습니다 로 갈라지던 것) */
.pa-line { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #16305e; line-height: 1.65; word-break: keep-all; }
.pa-line b { font-weight: 900; }
.pa-amount { margin: 6px 0 0; font-size: 27px; font-weight: 900; letter-spacing: -.5px; line-height: 1.2; }
.pa-amount small { font-size: 13px; font-weight: 800; margin-left: 2px; }
.pa-back.is-give .pa-amount { color: #1f9254; }
.pa-back.is-take .pa-amount { color: #d64545; }
/* 운영자가 적어 넣은 멘트 */
.pa-msg {
  margin: 14px 0 0; padding: 11px 13px;
  border-radius: 12px; background: #f4f8ff;
  font-size: 13px; font-weight: 700; line-height: 1.7; color: #45577a;
  white-space: normal; word-break: break-word;
}
.pa-ok {
  margin-top: 18px; width: 100%; height: 44px;
  border: none; border-radius: 13px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #3f8bfb, #2470ef);
  box-shadow: 0 5px 12px rgba(44, 126, 248, .28);
  transition: filter .15s ease, transform .12s ease;
}
.pa-ok:hover { filter: brightness(1.05); }
.pa-ok:active { transform: translateY(1px); }
.pa-ok:disabled { filter: grayscale(.35) brightness(.98); cursor: default; }
/* 랜덤박스 — 열기 전 두근두근 */
.pa-more { margin: 10px 0 0; font-size: 12px; font-weight: 800; color: #8b95a8; }
.pa-back.is-box .pa-line b { color: #e0553b; }
.pa-box-ico { animation: paBoxIdle 1.6s ease-in-out infinite; }
.pa-box-ico.is-shaking { animation: paBoxShake .28s linear infinite; }
@keyframes paBoxIdle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(-4deg) scale(1.06); }
}
@keyframes paBoxShake {
  0%, 100% { transform: rotate(-12deg) scale(1.1); }
  50%      { transform: rotate(12deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .pa-box-ico, .pa-box-ico.is-shaking { animation: none; }
}
@media (max-width: 430px) {
  .pa-card { max-width: 306px; padding: 22px 19px 17px; }
  .pa-ico { font-size: 36px; }
  .pa-line { font-size: 13px; }
  .pa-amount { font-size: 24px; }
}

/* ---------- 확인 모달 ---------- */
.gg-modal-back {
  position: fixed; inset: 0; background: rgba(15, 35, 75, .45);
  display: flex; align-items: center; justify-content: center; z-index: 900;
  animation: ggFadeIn .2s ease;
}

/*  팝업이 떠 있는 동안 «뒤 페이지» 가 함께 구르지 않게 잠근다 (2026-08-16)
    — 사이트의 모든 팝업 껍데기(-back)를 나열한다. 새 팝업을 만들면 여기에 추가.
    팝업 안 목록이 끝에 닿아도 스크롤이 밖으로 번지지 않는다. */
body:has(.gg-modal-back:not([hidden])),
body:has(.pa-back:not([hidden])),
body:has(.pm-back:not([hidden])),
body:has(.cg-back:not([hidden])),
body:has(.gt-back:not([hidden])),
body:has(.gr-back:not([hidden])),
body:has(.sp-back:not([hidden])),
body:has(.rc-modal-back:not([hidden])),
body:has(.dr-pop-back:not([hidden])),
body:has(.hl-warn-back:not([hidden])),
body:has(.hl-allin-back:not([hidden])),
body:has(.bcr-warn-back:not([hidden])),
body:has(.bcr-allin-back:not([hidden])) { overflow: hidden; }

/*  팝업 내부 스크롤 영역 — 맨 위·아래에 닿아도 관성이 뒤로 안 넘어간다 (터치·트랙패드) */
.gg-modal-back *, .pa-back *, .pm-back *, .cg-back *, .gt-back *, .gr-back *,
.sp-back *, .rc-modal-back *, .dr-pop-back *,
.hl-warn-back *, .hl-allin-back *, .bcr-warn-back *, .bcr-allin-back * {
  overscroll-behavior: contain;
}
/*  회원 기록 팝업 — 안쪽 표(.gg-table)는 모바일에서 «가로» 스크롤 상자인데,
    위 contain 이 세로에도 걸려 표 위에 손가락을 대고 세로로 밀면 팝업 본문으로
    스크롤이 전달되지 않았다(스크롤이 아예 안 됨 · 실측 재현). 세로만 풀어 준다 (2026-08-18) */
.rc-modal-back .gg-table { overscroll-behavior-y: auto; }
.gg-modal {
  background: #fff; border-radius: 18px; padding: 26px 26px 20px;
  width: 340px; max-width: calc(100vw - 40px);
  box-shadow: 0 20px 50px rgba(20, 45, 90, .3);
  animation: ggRise .25s ease;
}
.gg-modal p { font-size: 14px; font-weight: 700; color: var(--tx); line-height: 1.6; margin-bottom: 18px; }
.gg-modal-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* 포인트 상점 모바일 스크롤 힌트 (데스크톱에서는 숨김) */
.gg-shop-hint { display: none; font-size: 11px; color: var(--tx-sub); font-weight: 700; margin-left: 6px; }

/* ============================================================
   다중 탭 차단 — 이 탭 로그아웃 화면
   ============================================================ */
#gg-tab-block {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(237, 247, 253, .985);
}
.gg-tabout-card {
  width: 100%;
  max-width: 360px;
  padding: 34px 28px 28px;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(20, 45, 90, .18);
  text-align: center;
}
.gg-tabout-card img {
  width: 64px; height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
}
.gg-tabout-title {
  margin: 14px 0 8px;
  font-size: 17px;
  font-weight: 900;
  color: var(--tx);
}
.gg-tabout-sub {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--tx-sub);
}
.gg-tabout-sub b { color: #e03131; font-weight: 900; }

/* ============================================================
   New 뱃지 — 안 받은 미션 보상이 있을 때 노란 불빛으로 반짝임
   (상단 메뉴 홈 · 모바일 하단 네비 홈 · 홈 바로가기의 미션 칸)
   ============================================================ */
.gg-nav-item, .gg-bottomnav a, .gg-home-quick-item { position: relative; }

.gg-new-badge {
  position: absolute; top: 4px; right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 16px; padding: 0 6px;
  border: 1px solid #f0b400; border-radius: 999px;
  background: linear-gradient(180deg, #ffe27a, #ffc21e);
  font-size: 9.5px; font-weight: 900; letter-spacing: .2px; color: #6b4a00;
  pointer-events: none; z-index: 2;
  animation: ggNewGlow 1.4s ease-in-out infinite;
}
/* 상단 네비: 뱃지가 글자를 덮지 않도록 오른쪽 여백을 넓히고 그 자리에 배치 */
.gg-nav-item.has-new { padding-right: 42px; }
.gg-nav-item .gg-new-badge { top: 50%; right: 8px; margin-top: -19px; }
/* 모바일 햄버거로 펼친 세로 메뉴에서는 오른쪽 끝에 세로 중앙 정렬 */
.gg-nav.is-open .gg-nav-item.has-new { padding-right: 16px; }
.gg-nav.is-open .gg-nav-item .gg-new-badge { top: 50%; right: 16px; margin-top: -8px; }
/* 공지·자게는 상단 메뉴 칸이 좁다 (메뉴가 9~10개라 여백을 늘리면 줄이 넘친다)
   → 여백은 그대로 두고 글자 오른쪽 위에 작게 얹는다 */
.gg-nav-item[href="#/notice"].has-new,
.gg-nav-item[href="#/free"].has-new { padding-right: 22px; }
.gg-nav-item[href="#/notice"] .gg-new-badge,
.gg-nav-item[href="#/free"] .gg-new-badge {
  top: 6px; right: 2px; margin-top: 0;
  height: 13px; padding: 0 4px; font-size: 8px;
}
.gg-nav.is-open .gg-nav-item[href="#/notice"].has-new,
.gg-nav.is-open .gg-nav-item[href="#/free"].has-new { padding-right: 16px; }
.gg-nav.is-open .gg-nav-item[href="#/notice"] .gg-new-badge,
.gg-nav.is-open .gg-nav-item[href="#/free"] .gg-new-badge {
  top: 50%; right: 16px; margin-top: -8px; height: 16px; padding: 0 6px; font-size: 9.5px;
}
/* 홈 바로가기 카드는 여유가 있어 오른쪽 위 모서리에 */
.gg-home-quick-item .gg-new-badge { top: 8px; right: 10px; height: 18px; font-size: 10px; }

@keyframes ggNewGlow {
  0%   { box-shadow: 0 0 0 0 rgba(255, 190, 20, .75), 0 1px 3px rgba(180, 130, 0, .3); filter: brightness(1); }
  55%  { box-shadow: 0 0 9px 4px rgba(255, 190, 20, 0),  0 1px 3px rgba(180, 130, 0, .3); filter: brightness(1.18); }
  100% { box-shadow: 0 0 0 0 rgba(255, 190, 20, 0),      0 1px 3px rgba(180, 130, 0, .3); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .gg-new-badge { animation: none; }
}

/* 하이로우 설정 토글 */
.gg-hl-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--card-border); border-radius: 12px;
  background: #fbfdff;
  font-size: 12.5px; font-weight: 800; color: var(--tx);
  cursor: pointer;
}
.gg-hl-toggle input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.gg-hl-toggle:has(input:checked) { background: #eaf2fe; border-color: #9ec6f6; }

/* ============================================================
   매크로 의심 — 스핀 간격 분포 막대
   ============================================================ */
.mc-chart {
  display: flex; align-items: flex-end; gap: 1px;
  height: 190px; padding: 10px 8px 22px;
  background: #f7fafd; border: 1px solid #e6eef8; border-radius: 12px;
  overflow-x: auto;
}
.mc-bar { position: relative; flex: 1 0 7px; height: 100%; display: flex; align-items: flex-end; }
.mc-bar i {
  display: block; width: 100%; min-height: 1px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #6aa6ff, #2f6fe0);
}
.mc-bar small {
  position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
  font-size: 9.5px; color: #93a1b8; white-space: nowrap;
}

/* ============================================================
   보상 설정 — 개인회생
   ============================================================ */
.rw-rv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.rw-rv-row { display: flex; align-items: center; gap: 8px; }
.rw-rv-label { flex: 1; font-size: 12.5px; font-weight: 800; color: #16305e; }
.rw-rv-row select.gg-mini-input { width: 110px; }
.rw-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.rw-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rw-switch i {
  width: 40px; height: 22px; border-radius: 999px; background: #dbe3ee; position: relative;
  transition: background .2s ease;
}
.rw-switch i::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.rw-switch input:checked + i { background: #34c47c; }
.rw-switch input:checked + i::after { transform: translateX(18px); }
.rw-switch b { font-size: 12px; font-weight: 800; color: #5a6b87; }
@media (max-width: 720px) { .rw-rv { grid-template-columns: minmax(0, 1fr); } }

/* 설정 화면 경고 배너 (서버 배포가 아직 안 된 경우 등) */
.rw-warn {
  margin: 10px 0 2px; padding: 11px 13px;
  background: #fff4e5; border: 1px solid #ffd8a8; border-radius: 11px;
  font-size: 12px; font-weight: 700; color: #a05a00; line-height: 1.7;
}
.rw-warn b { color: #d9480f; }

/* ============================================================
   포인트 거래내역 — 분류 탭 · 기간 · 요약
   ============================================================ */
.tx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tx-cats { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.tx-cat {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 11px; border-radius: 9px; cursor: pointer;
  background: #fff; border: 1px solid #dbe6f5; color: #5a6b87;
  font-family: inherit; font-size: 12px; font-weight: 800;
}
.tx-cat small { font-size: 10.5px; font-weight: 700; color: #9aa7bd; }
.tx-cat:hover { background: #f4f8fd; }
.tx-cat.is-active { background: #256eeb; border-color: #256eeb; color: #fff; }
.tx-cat.is-active small { color: rgba(255, 255, 255, .8); }
.tx-periods { display: flex; gap: 6px; flex: none; }

.tx-sum {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; margin-bottom: 10px;
  background: #f4f8fd; border: 1px solid #e6eef8; border-radius: 12px;
}
.tx-sum-item { display: flex; align-items: baseline; gap: 6px; }
.tx-sum-item span { font-size: 11.5px; color: #7f8a9e; font-weight: 700; }
.tx-sum-item b { font-size: 14px; color: #16305e; font-weight: 900; }
.tx-sum-item.is-plus b { color: #2f8b5f; }
.tx-sum-item.is-minus b { color: #e03131; }
.tx-sum-note { margin-left: auto; font-size: 11px; color: #93a1b8; }

.tx-more {
  width: 100%; height: 44px; margin-top: 10px; cursor: pointer;
  background: #fff; border: 1px solid #dbe6f5; border-radius: 12px;
  font-family: inherit; font-size: 13px; font-weight: 800; color: #256eeb;
}
.tx-more:hover { background: #f4f8fd; }
.tx-more:disabled { opacity: .6; cursor: not-allowed; }
.tx-end { text-align: center; font-size: 11.5px; color: #9aa7bd; margin-top: 10px; }
@media (max-width: 767px) {
  .tx-periods { width: 100%; }
  .tx-sum-note { margin-left: 0; width: 100%; }
}
.tx-etc {
  margin: -4px 0 10px; padding: 9px 12px; font-size: 11.5px; line-height: 1.7; color: #8a6a3a;
  background: #fff8ec; border: 1px solid #f2e0bd; border-radius: 10px;
}
.tx-etc b { color: #b3860c; }

/* 실시간 갱신 토글 + 새로 들어온 줄 표시 */
.tx-live {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  height: 32px; padding: 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid #dbe6f5;
  font-family: inherit; font-size: 12px; font-weight: 800; color: #7f8a9e;
}
.tx-live i { width: 7px; height: 7px; border-radius: 50%; background: #c3cddd; }
.tx-live.is-on { border-color: #2f8b5f; color: #2f8b5f; background: #f2fbf6; }
.tx-live.is-on i { background: #2f8b5f; animation: txPulse 1.6s ease-in-out infinite; }
.tx-live.is-blink { box-shadow: 0 0 0 3px rgba(47, 139, 95, .18); }
@keyframes txPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.gg-tr.tx-new { animation: txNew 2.5s ease-out; }
@keyframes txNew {
  0% { background: #dff5e8; }
  70% { background: #f2fbf6; }
  100% { background: transparent; }
}

/* ============================================================
   DC 충전 안내 모달 (카카오페이)
     · 기존 .gg-modal(확인창)과 겹치지 않도록 cg- 전용 클래스만 사용
     · 반응형(1199 / 767 / 430)은 responsive.css 에서 처리
   ============================================================ */
body.cg-lock { overflow: hidden; }

.cg-back {
  position: fixed; inset: 0; z-index: 12000;         /* 모바일 하단 메뉴(및 헤더)보다 위 */
  background: rgba(15, 45, 90, .42);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px;
  animation: cgFade .18s ease;
}
@keyframes cgFade { from { opacity: 0; } to { opacity: 1; } }

.cg-modal {
  width: 100%; max-width: 760px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 24px;
  box-shadow: 0 24px 60px rgba(20, 60, 120, .22);
}

/* ---------- 상단 ---------- */
.cg-top {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 18px 20px; border-bottom: 1px solid var(--card-border);
  background: linear-gradient(180deg, #fffdf3, #ffffff);
}
.cg-top-duck-box {
  width: 56px; height: 56px; flex: none; border-radius: 16px;
  background: #fff6d9; border: 1px solid #ffe6a3;
  display: flex; align-items: center; justify-content: center;
}
.cg-top-duck {
  width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated;
}
.cg-top-tx { flex: 1; min-width: 0; }
.cg-title { margin: 0; font-size: 20px; font-weight: 900; color: var(--blue); letter-spacing: -.2px; }
.cg-sub { margin: 3px 0 0; font-size: 12.5px; font-weight: 700; color: var(--tx-sub); }
.cg-close {
  width: 36px; height: 36px; flex: none; cursor: pointer;
  border: 1px solid var(--card-border); border-radius: 12px; background: #fff;
  font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1; color: var(--tx-sub);
}
.cg-close:hover { background: #f4f8fd; color: var(--tx); }

/* ---------- 본문 (PC 2열) ---------- */
.cg-body {
  display: grid; grid-template-columns: 1fr 320px; gap: 18px;
  padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cg-side { min-width: 0; }

/* 금액 */
.cg-label { display: block; font-size: 13px; font-weight: 800; color: var(--tx); margin-bottom: 8px; }
.cg-amount {
  display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px;
  background: #f5faff; border: 1px solid #d7e8fa; border-radius: 14px;
}
.cg-coin {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--gold); color: #7a5a00;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
.cg-amount-in {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: inherit; font-size: 22px; font-weight: 900; color: var(--blue);
  text-align: right; font-variant-numeric: tabular-nums;
}
.cg-unit { font-size: 13px; font-weight: 800; color: var(--tx-sub); }
.cg-limits {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--tx-sub);
}
.cg-error { margin: 6px 0 0; min-height: 16px; font-size: 12px; font-weight: 800; color: #e03131; }

.cg-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.cg-quick-btn {
  height: 42px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800;
  color: var(--tx); background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
}
.cg-quick-btn:hover { background: #f4f8fd; }
.cg-quick-btn.is-on { border-color: var(--blue); color: var(--blue); background: #eef5ff; }

/* "받게 되는 포인트" 위 안내 — 예시 금액일 뿐임을 분명히 한다 */
.cg-example {
  margin: 12px 0 8px; padding: 9px 12px; border-radius: 11px;
  background: #fff4f4; border: 1px solid #f6d4d4;
  font-size: 11.5px; font-weight: 800; line-height: 1.7; color: #c14343; text-align: center;
}

.cg-reward {
  margin-top: 0; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(180deg, #f3f9ff, #eaf4ff); border: 1px solid #d7e8fa;
}
.cg-reward-label { display: block; font-size: 11.5px; font-weight: 800; color: var(--tx-sub); }
.cg-reward-value {
  display: block; margin-top: 4px; font-size: 26px; font-weight: 900; color: var(--blue);
  font-variant-numeric: tabular-nums; letter-spacing: -.4px;
}
.cg-notice {
  display: flex; gap: 8px; margin: 12px 0 0; padding: 11px 13px; border-radius: 12px;
  background: #fff8ec; border: 1px solid #f2e0bd;
  font-size: 11.5px; font-weight: 700; line-height: 1.7; color: #8a6a3a;
}
.cg-notice-mark {
  width: 17px; height: 17px; flex: none; margin-top: 1px; border-radius: 50%;
  background: #f0a92b; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900;
}

/* QR */
.cg-side-qr {
  display: flex; flex-direction: column;
  padding: 14px; border-radius: 18px;
  background: #f5fbff; border: 1px solid #d7e8fa;
}
.cg-qr-label {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 10px;
  font-size: 12.5px; font-weight: 800; color: var(--tx);
}
.cg-qr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.cg-qr-box {
  background: #fff; border: 1px solid var(--card-border); border-radius: 16px;
  padding: 10px; display: flex; align-items: center; justify-content: center;
}
.cg-qr { width: 100%; max-width: 260px; height: auto; object-fit: contain; display: block; }
.cg-recipient { margin: 10px 0 12px; text-align: center; font-size: 12px; font-weight: 700; color: var(--tx-sub); }
.cg-recipient b { color: var(--tx); font-weight: 900; }

.cg-act {
  display: flex; align-items: center; justify-content: center;
  height: 46px; border-radius: 14px; text-decoration: none;
  font-family: inherit; font-size: 14px; font-weight: 900; letter-spacing: -.2px;
  transition: filter .15s ease, transform .12s ease;
}
.cg-act + .cg-act { margin-top: 8px; }
.cg-act-pay { background: var(--gold); color: #6b4e00; box-shadow: 0 5px 12px rgba(255, 211, 77, .4); }
.cg-act-confirm { background: var(--blue); color: #fff; box-shadow: 0 5px 12px rgba(37, 110, 235, .28); }
.cg-act:hover { filter: brightness(1.04); }
.cg-act:active { transform: translateY(1px); }
.cg-act.is-off { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }

/* PC 에서 카카오페이 송금 버튼을 눌렀을 때의 안내 (모바일 전용 서비스) */
.cg-hint {
  margin: 8px 0 0; display: none;
  padding: 9px 11px; border-radius: 11px;
  background: #fff8ec; border: 1px solid #f2e0bd;
  font-size: 11.5px; font-weight: 700; line-height: 1.65; color: #8a6a3a;
}
.cg-hint.is-show { display: block; }
.cg-hint + .cg-act { margin-top: 8px; }


/* ============================================================
   가입 승인 (2026-08-26)
   ============================================================ */
/* 탭 위의 «대기 인원» 숫자 배지 */
.gg-tab-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px;
  border-radius: 9px; background: #e03131; color: #fff;
  font-size: 10.5px; font-weight: 900; line-height: 1;
}
.gg-tab-dot[hidden] { display: none; }

.gg-sg-wrap { display: flex; flex-direction: column; gap: 16px; }

.gg-sg-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px;
  background: var(--card-soft, rgba(37, 110, 235, .06));
  border: 1px solid var(--card-border);
}
.gg-sg-toggle b { font-size: 14px; font-weight: 900; color: var(--tx); }
.gg-sg-toggle p { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--tx-sub); line-height: 1.6; }

.gg-sg-sec { display: flex; flex-direction: column; gap: 8px; }
.gg-sg-head { font-size: 13px; font-weight: 900; color: var(--tx); }
.gg-sg-head b { color: var(--blue); }

.gg-sg-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  background: var(--card-bg, #fff); border: 1px solid var(--card-border);
}
.gg-sg-who { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gg-sg-who b { font-size: 13.5px; font-weight: 900; color: var(--tx); }
.gg-sg-who span { font-size: 11.5px; font-weight: 700; color: var(--tx-sub); }
.gg-sg-when { font-size: 11.5px; font-weight: 700; color: var(--tx-sub); white-space: nowrap; }
.gg-sg-act { display: flex; gap: 6px; }

.gg-sg-empty { margin: 0; padding: 14px; font-size: 12.5px; font-weight: 700; color: var(--tx-sub); text-align: center; }

.gg-sg-note { margin: 0; padding-left: 18px; color: var(--tx-sub); font-size: 12px; font-weight: 700; line-height: 1.9; }

@media (max-width: 560px) {
  .gg-sg-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .gg-sg-when { grid-column: 1; }
  .gg-sg-act { grid-column: 2; grid-row: 1 / span 2; }
}

/* 관리자 탭: 운영 탭과 게임 설정 탭 사이 구분선 */
.gg-tab-sep {
  width: 1px; align-self: stretch; margin: 4px 6px;
  background: var(--card-border); flex: none;
}

/* 게임 설정 공통: 사용 / 공개 토글 줄 */
.gg-game-flags { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gg-game-flags-hint { font-size: 11.5px; font-weight: 700; color: var(--tx-sub); }

/* ============================================================
   게임 설정 공통: 올인 확인 창 문구 편집 (하이로우 · 바카라)
   왼쪽에 입력칸, 오른쪽에 회원 화면 그대로의 미리보기를 둔다.
   미리보기 카드는 게임 화면의 CSS(.hl-allin-card / .bcr-allin-card)를 그대로 빌려 쓴다.
   ============================================================ */
.gg-allin-edit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px; align-items: start;
}
.gg-allin-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gg-allin-msg { resize: vertical; min-height: 84px; line-height: 1.7; font-family: inherit; }
.gg-allin-hint {
  margin: 0; font-size: 11.5px; font-weight: 700; line-height: 1.8; color: var(--tx-sub);
}
.gg-allin-hint b { font-weight: 900; color: var(--tx); }
.gg-allin-pv { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.gg-allin-pv-lab { font-size: 11.5px; font-weight: 800; color: var(--tx-sub); }
/* 실제 창은 화면 한가운데 크게 뜨지만, 여기서는 옆에 놓을 수 있게 조금 줄인다 */
.gg-allin-pv-card {
  width: 268px; max-width: 268px; padding: 18px 16px 15px;
  pointer-events: none; user-select: none;
}
.gg-allin-pv-card [class$="-allin-mark"] { font-size: 30px; }
.gg-allin-pv-card [class$="-allin-title"] { font-size: 15px; }
.gg-allin-pv-card [class$="-allin-amount"] { font-size: 20px; }
.gg-allin-pv-card [class$="-allin-tx"] { font-size: 12px; margin-bottom: 12px; }
.gg-allin-pv-card [class$="-allin-y"],
.gg-allin-pv-card [class$="-allin-n"] { width: 52px; height: 36px; font-size: 14px; opacity: .95; }
@media (max-width: 767px) {
  .gg-allin-edit { grid-template-columns: minmax(0, 1fr); }
  .gg-allin-pv { align-items: stretch; }
  .gg-allin-pv-card { width: 100%; max-width: 100%; }
}

/* 게임 설정 공통: 예상 환수율 표시 */
.gg-rtp {
  margin-top: 10px; font-size: 12.5px; font-weight: 900; color: var(--blue);
}
.gg-rtp b { font-weight: 900; }
.gg-rtp.is-over { color: #d2544e; }
.gg-rtp-sub { font-size: 11.5px; font-weight: 700; color: var(--tx-sub); }
.gg-rtp-detail { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--tx-sub); }
.gg-rtp-detail b { color: var(--tx); font-weight: 900; }

/* ============================================================
   랭킹 메뉴 아이콘 (컬러 원본)
   기본 메뉴 아이콘은 픽셀아트라 pixelated + 비활성 회색 처리를 쓰지만,
   랭킹 아이콘은 컬러 일러스트라 원본 색이 그대로 보여야 한다.
   ============================================================ */
.gg-nav-item[href="#/ranking"] .gg-nav-ico,
.gg-bottomnav a[href="#/ranking"] img {
  image-rendering: auto;
  object-fit: contain;
  filter: none;            /* 회색 필터·색 변형 금지 (원본 그대로) */
}
.gg-nav-item[href="#/ranking"] .gg-nav-ico { width: 20px; height: 20px; }
.gg-bottomnav a[href="#/ranking"] img { width: 22px; height: 22px; }
.gg-bottomnav.is-7 a[href="#/ranking"] img { width: 21px; height: 21px; }
/* 비활성 상태에서도 색이 죽지 않게 — 투명도만 아주 살짝 */
.gg-bottomnav a:not(.is-active)[href="#/ranking"] img { opacity: .9; }

/* ---------- 전체 지급/회수 대상 선택 팝업 ---------- */
.bulk-card { max-width: 420px; width: 100%; text-align: left; }
.bulk-title { font-size: 16px; font-weight: 900; color: var(--tx); margin-bottom: 4px; }
.bulk-amt { font-size: 13px; font-weight: 700; color: var(--tx-sub); margin-bottom: 14px; }
.bulk-amt b { color: var(--blue); font-size: 15px; }
.bulk-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px; margin-bottom: 8px;
  border: 1px solid var(--card-border); border-radius: 12px;
  background: #fff; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bulk-opt:hover { background: #f4f8ff; }
.bulk-opt.is-on { border-color: var(--blue); background: #eef5ff; }
.bulk-opt input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--blue); }
.bulk-opt b { display: block; font-size: 13.5px; font-weight: 900; color: var(--tx); }
.bulk-opt small { display: block; font-size: 11.5px; font-weight: 700; color: var(--tx-sub); margin-top: 2px; }
/* 고를 것이 없는 안내 칸 — 눌러도 아무 일이 없으니 손 모양을 없앤다 */
.bulk-opt.is-fixed { cursor: default; }
.bulk-opt.is-fixed:hover { background: #eef5ff; }
/* 지급 뒤 자동 회수 안내 */
.pn-hint {
  margin: -2px 0 12px; padding: 10px 12px;
  border-radius: 10px; background: #fff8e6; border: 1px solid #ffe2a8;
  font-size: 11.5px; font-weight: 700; color: #8a6100; line-height: 1.55; word-break: keep-all;
}
.pn-hint b { font-weight: 900; color: #b9700a; }
.bulk-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ---------- 지급·회수 알림 멘트 작성 (개별 지급 팝업 · 전체 지급 팝업 공통) ---------- */
.pn-card { max-width: 420px; width: 100%; text-align: left; }
.pn-title { font-size: 16px; font-weight: 900; color: var(--tx); margin-bottom: 4px; }
.pn-who { font-size: 13px; font-weight: 700; color: var(--tx-sub); line-height: 1.7; margin-bottom: 14px; }
.pn-who b { font-size: 16px; font-weight: 900; }
.pn-who b.is-give { color: #1f9254; }
.pn-who b.is-take { color: #d64545; }
.pn-field { display: block; margin-top: 12px; }
.pn-lab { display: block; font-size: 12px; font-weight: 800; color: var(--tx-sub); margin-bottom: 5px; }
.pn-lab small { font-weight: 700; color: #9aa7bd; }
.pn-msg { width: 100%; resize: vertical; min-height: 68px; line-height: 1.7; font-family: inherit; }
.pn-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* 상단 메뉴 "상점" 의 NEW — 마지막 상점 방문 이후 등록된 신상품(24시간 이내)이 있을 때.
   상점에 한 번 들어갔다 나오면 사라진다. */
.gg-nav-new {
  display: inline-block; margin-left: 5px; padding: 1px 5px;
  font-size: 9px; font-weight: 900; color: #fff; line-height: 1.5;
  background: linear-gradient(180deg, #ff8a5c, #ff5c7a); border-radius: 999px;
  vertical-align: 2px; white-space: nowrap;
}

/* ============================================================
   칭호 (Title) — 닉네임 위에 붙는 그림표
   ============================================================
   ⚠ 칭호마다 «원래 표시 크기» 가 다르다. 서버가 그 값을 내려 주고,
      컴포넌트가 그림에 --tt-w / --tt-h 로 박아 둔다.
        유일무이   600×128 원본 → 150×32 로 «축소» 표시
        사장·부사장 100×28  GIF  → 100×28  «원본 그대로» (확대 금지)
   ⚠ 그래서 크기는 언제나 «높이만» 정하고 폭은 auto 다.
        height: min(var(--tt-h), 이 화면의 최대 높이)
      → 원본보다 커지지 않고, 좁은 화면에서는 비율을 지킨 채 작아지기만 한다.
      → 폭을 직접 지정하지 않으므로 절대 찌그러지지 않는다.
   ⚠ image-rendering 은 auto (pixelated 금지 — 축소 표시라 계단이 생긴다).
   ⚠ 배경을 깔지 않는다 (GIF 의 투명 배경이 그대로 보이게 — 흰/검 박스 금지).
   ⚠ 칭호가 없는 회원에게는 아무것도 그리지 않는다 → 기존 줄 높이가 그대로 유지된다.
   ⚠ 움직이는 GIF 는 그대로 반복 재생된다 (animation-play-state 를 건드리지 않는다).
   반응형(좁은 화면) 규칙은 responsive.css 에만 둔다.
   ------------------------------------------------------------ */
.gg-title {
  display: block;
  width: auto;                            /* 폭은 비율이 정한다 — 강제하지 않는다 */
  height: min(var(--tt-h, 32px), 32px);   /* 원본 크기를 «넘지» 않는다 */
  max-width: min(var(--tt-w, 150px), 100%);
  background: none;             /* 투명 배경 유지 — 흰/검 박스가 생기지 않게 */
  object-fit: contain;          /* 비율 고정 · 자르기 금지 */
  image-rendering: auto;
  flex: 0 0 auto;
  pointer-events: none;         /* 아래 닉네임 클릭을 가리지 않는다 */
  user-select: none;
}
/* 게시판 목록·댓글·랭킹처럼 좁은 자리 — 비율은 그대로 두고 높이만 줄인다 */
.gg-title.is-sm { height: min(var(--tt-h, 32px), 25px); }

/* 「칭호 → 닉네임」 세로 묶음.
   inline-flex 라서 원래 가로 배치(줄) 안에 그대로 들어간다 —
   부모(줄)의 배치를 바꾸지 않으므로 칭호가 없는 회원 화면은 예전 그대로다. */
.gg-ident {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 2px; min-width: 0; max-width: 100%;
  vertical-align: middle;
}
.gg-ident.is-center { align-items: center; text-align: center; }
.gg-ident-name {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 0; max-width: 100%;
}
/* 긴 닉네임이 옆 칸을 밀지 않게 */
.gg-ident-name > * { min-width: 0; }

/* ---------- 홈 「내 정보」 · 전체 「내 정보」 · 랭킹 1·2·3위 — 닉네임 위 가운데 ---------- */
.gg-home-me-name .gg-title,
.pf-nick .gg-title,
.gg-rk-top-name .gg-title { margin: 0 auto 3px; }
/* 이 세 자리는 원래 «한 줄» 이었다 → 칭호가 붙는 동안만 세로로 바꾼다.
   (칭호가 없으면 .gg-title 이 아예 없으므로 :has() 가 안 걸려 예전 배치 그대로다) */
.gg-home-me-name:has(> .gg-title),
.pf-nick:has(> .gg-title),
.gg-rk-top-name:has(> .gg-title) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* 1·2·3위 닉네임은 원래 한 줄 말줄임이었다 — 안쪽 칸이 그 역할을 이어받는다 */
.gg-rk-top-name .gg-ident-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}

/* ---------- 내 칭호 화면 ---------- */
.tt-wrap { display: flex; flex-direction: column; gap: 16px; }
.tt-now {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
  border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px;
}
.tt-now-lab { font-size: 12px; font-weight: 900; color: #5f6f92; }
.tt-now-empty { font-size: 13px; font-weight: 800; color: var(--tx-sub); }
.tt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tt-card {
  display: flex; flex-direction: column; gap: 9px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 14px;
  padding: 14px; box-shadow: 0 2px 8px rgba(22, 48, 94, .05);
}
.tt-card.is-on { border-color: #9ec5ff; box-shadow: 0 4px 14px rgba(37, 110, 235, .14); }
.tt-card-desc { font-size: 12.5px; font-weight: 700; color: var(--tx-sub); line-height: 1.6; min-height: 20px; }
.tt-card-foot { display: flex; align-items: center; gap: 8px; }
.tt-card-foot .gg-btn { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 11px; }
.tt-on-tag {
  font-size: 11px; font-weight: 900; color: #1158c3;
  background: #e4eefb; border-radius: 999px; padding: 3px 10px;
}
/*  권한 전용 칭호(사장·부사장) 표시 — 손으로 주고받는 물건이 아니라는 것을 분명히 한다 */
.tt-role-tag, .tt-adm-role {
  align-self: flex-start;
  font-size: 11px; font-weight: 900; color: #8a5a00;
  background: linear-gradient(180deg, #fff3cd, #ffe8a3);
  border: 1px solid #f0d484; border-radius: 999px; padding: 2px 9px;
  white-space: nowrap;
}
.tt-card.is-role { border-color: #f0d484; background: linear-gradient(180deg, #fffdf6, #fff9e8); }
.tt-adm-row.is-role { border-color: #f0d484; background: linear-gradient(180deg, #fffdf6, #fff9e8); }
.tt-adm-auto {
  margin-left: 8px; font-size: 11px; font-weight: 800; color: #8a5a00;
  background: #fff3cd; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

.tt-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 16px; text-align: center;
  background: #fff; border: 1px dashed var(--card-border); border-radius: 14px;
  font-size: 13.5px; font-weight: 800; color: var(--tx-sub);
}
.tt-empty small { font-size: 12px; font-weight: 700; color: #a8b3c4; }

/* ---------- 관리자 칭호 탭 ---------- */
.tt-adm-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--card-border); border-radius: 14px; padding: 14px; background: #fff;
}
.tt-adm-holder { font-size: 12.5px; font-weight: 800; color: var(--tx); }
.tt-adm-holder b { color: #1158c3; }
.tt-adm-none { font-size: 12.5px; font-weight: 800; color: var(--tx-sub); }
.tt-adm-find { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tt-adm-hits { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tt-adm-hit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--card-border); border-radius: 11px; padding: 8px 12px; background: #fbfdff;
  font-size: 13px; font-weight: 800; color: var(--tx);
}
.tt-adm-hit small { font-weight: 700; color: var(--tx-sub); }
.tt-adm-hit .gg-btn { margin-left: auto; height: 30px; padding: 0 12px; font-size: 12px; border-radius: 9px; }

/* 닉네임을 눌러 여는 회원 메뉴 맨 위의 칭호 */
.gt-menu-title { display: flex; justify-content: center; padding: 8px 10px 2px; }

/* ------------------------------------------------------------
   칭호 «한 줄» 배치 (게시판 전용)
   ------------------------------------------------------------
   왜 게시판만 다른가
     홈·내 정보·랭킹은 칸이 넉넉해서 «칭호 위 / 닉네임 아래» 가 보기 좋다.
     그런데 게시판은 줄 단위라 세로로 쌓으면 그 줄만 높아진다.
     그래서 게시판에서는 가로 한 줄로 놓는다.
       글 상세 : 칭호 → 닉네임 → 작성일 → 조회수
       댓글    : 칭호 → 닉네임 → 작성일
     ⚠ 글 «목록» 에는 칭호를 넣지 않는다 (작성자 칸이 좁아 표가 어수선해진다).
     칭호 높이를 글자 줄 높이(20~22px)에 맞춰서 줄 높이가 늘어나지 않는다.
     ⚠ 원본(600×128)은 그대로 쓰고 CSS 로 줄이기만 한다. 확대·pixelated 금지.
   ------------------------------------------------------------ */
.gg-ident.is-inline {
  flex-direction: row;
  align-items: center;          /* 칭호와 닉네임의 세로 중앙선을 맞춘다 */
  gap: 5px;
  white-space: nowrap;
}
/* 위치를 임의 이동하지 않고 줄 상자를 줄여 flex 중앙 정렬 기준을 정확히 맞춘다 */
.gg-ident.is-inline > .gg-ident-name { line-height: 1; }
.bd-author-inline { vertical-align: middle; }
.bd-author-inline .bd-author-title {
  display: block;
  width: auto; height: min(var(--tt-h, 32px), 20px);    /* 비율 그대로 → 폭은 약 94px */
  max-width: 105px;
  object-fit: contain;
  image-rendering: auto;
  /*  자리가 모자라면 «칭호가» 먼저 줄어든다 (닉네임을 자르지 않기 위해).
      object-fit: contain 이라 비율은 그대로 유지된 채 작아진다.
      작성자 열이 200px 라서 평소에는 94px 그대로 나온다. */
  flex: 0 1 auto;
  min-width: 34px;
}
.bd-author-inline .bd-author-nickname {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;               /* 닉네임이 우선 — 잘리지 않는다 */
  min-width: 0; line-height: 20px;
}
/* 그래도 넘칠 만큼 긴 닉네임은 말줄임 (다음 칸을 덮지 않게) */
.bd-author-inline .bd-author-nickname > .bd-author-btn {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* 작성자 칸(142px)이 좁아도 다음 칸을 밀지 않게 */
.bd-author { overflow: hidden; }
/* 글 상세 작성자 — 글자가 조금 커서 칭호도 한 단계 크게 */
.bd-post-meta-author { gap: 6px; }
.bd-post-meta-author .bd-author-title { height: min(var(--tt-h, 32px), 22px); max-width: 115px; }

/* ------------------------------------------------------------
   「내 칭호」 — 게시글 목록 표시 선택 (아바타 / 칭호)
   ------------------------------------------------------------
   사이트 공통 규칙을 그대로 따른다
     · 카드 = 흰 배경 + var(--card-border) + 큰 radius + 은은한 그림자
     · 선택 = 파란 그라데이션(.gg-btn 과 같은 #3b86fa→#1d6bfa) + 파란 테두리
     · hover 는 «살짝 떠오르고», active 는 «눌린다» (.gg-btn 과 같은 움직임)
   글로만 설명하지 않고 «실제 게시판 줄 모양» 을 미리보기로 넣었다.
   ------------------------------------------------------------ */
.tt-mode {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--card-border); border-radius: 16px; padding: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f8ff 100%);
  box-shadow: 0 2px 8px rgba(22, 48, 94, .05);
}
.tt-mode-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 900; color: var(--tx);
}
.tt-mode-h-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px; font-size: 13px;
  background: #e4eefb; flex: 0 0 auto;
}
.tt-mode-opts { display: flex; gap: 12px; flex-wrap: wrap; }

.tt-mode-btn {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 210px; min-width: 0;
  border: 2px solid var(--card-border); border-radius: 14px;
  background: #fff; padding: 13px 14px; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--tx);
  box-shadow: 0 2px 6px rgba(22, 48, 94, .05);
  transition: border-color .2s ease, background .2s ease, box-shadow .25s ease, transform .2s ease;
}
.tt-mode-btn:hover {
  border-color: #b9d5ff; transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(37, 110, 235, .14);
}
.tt-mode-btn:active { transform: translateY(0) scale(.99); }
.tt-mode-btn:focus-visible { outline: 3px solid rgba(37, 110, 235, .35); outline-offset: 2px; }
.tt-mode-btn.is-on {
  border-color: var(--blue);
  background: linear-gradient(180deg, #f4f9ff 0%, #e8f1ff 100%);
  box-shadow: 0 6px 16px rgba(37, 110, 235, .18);
}
.tt-mode-btn[disabled] { cursor: default; transform: none; }
.tt-mode-btn[disabled]:hover { transform: none; box-shadow: 0 2px 6px rgba(22, 48, 94, .05); }
.tt-mode-btn[disabled]:not(.is-on):not(.is-busy) { opacity: .55; }

/* 윗줄 : 아이콘 · 이름/설명 · 선택 표시 */
.tt-mode-top { display: flex; align-items: center; gap: 10px; }
.tt-mode-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px; font-size: 17px; line-height: 1;
  background: #f1f6fd; border: 1px solid var(--card-border); flex: 0 0 auto;
  transition: background .2s ease, border-color .2s ease;
}
.tt-mode-btn.is-on .tt-mode-ic { background: #fff; border-color: #b9d5ff; }
.tt-mode-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tt-mode-name { font-size: 14px; font-weight: 900; color: var(--tx); }
.tt-mode-btn small {
  font-size: 11.5px; font-weight: 700; color: var(--tx-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt-mode-btn.is-on .tt-mode-name { color: #1158c3; }

/* 선택 동그라미 — 고르면 파란 그라데이션 + 체크 */
.tt-mode-check {
  margin-left: auto; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 999px;
  border: 2px solid #d7e4f5; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tt-mode-btn.is-on .tt-mode-check {
  border-color: transparent;
  background: linear-gradient(180deg, #3b86fa 0%, #1d6bfa 100%);
  box-shadow: 0 3px 8px rgba(29, 107, 250, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.tt-mode-check::after {
  content: "✓"; font-size: 12px; font-weight: 900; color: #fff; opacity: 0;
  transform: scale(.5); transition: opacity .18s ease, transform .18s ease;
}
.tt-mode-btn.is-on .tt-mode-check::after { opacity: 1; transform: scale(1); }
/* 저장하는 동안 — 체크 자리에 돌아가는 표시 */
.tt-mode-btn.is-busy .tt-mode-check {
  border-color: #b9d5ff; border-top-color: var(--blue); background: #fff;
  box-shadow: none; animation: ttSpin .7s linear infinite;
}
.tt-mode-btn.is-busy .tt-mode-check::after { opacity: 0; }
@keyframes ttSpin { to { transform: rotate(360deg); } }

/* 아랫줄 : 실제 게시판 줄 미리보기 */
.tt-mode-prev {
  display: flex; align-items: center; gap: 9px;
  border-radius: 11px; padding: 8px 10px;
  background: #f7fafd; border: 1px dashed var(--card-border);
  min-height: 42px; overflow: hidden;
  transition: background .2s ease, border-color .2s ease;
}
.tt-mode-btn.is-on .tt-mode-prev { background: #fff; border-color: #cfe0f8; border-style: solid; }
.tt-mode-prev-lab {
  font-size: 10px; font-weight: 900; color: #8fa2bd; letter-spacing: .2px;
  flex: 0 0 auto; padding-right: 8px; border-right: 1px solid var(--card-border);
}
.tt-mode-prev-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tt-mode-prev-nick {
  font-size: 12.5px; font-weight: 800; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*  미리보기 안의 아바타·칭호는 «게시판 목록과 같은 26px» 로 맞춘다
    (여기서 크기가 다르면 미리보기라고 부를 수 없다) */
.tt-mode-prev .gg-avatar, .tt-mode-prev .tt-mode-av { flex: 0 0 auto; }
.tt-mode-prev .tt-mode-tt {
  display: block; width: auto; height: min(var(--tt-h, 32px), 26px); max-width: 124px;
  object-fit: contain; image-rendering: auto; flex: 0 0 auto;
}

.tt-mode-note {
  margin: 0; font-size: 12px; font-weight: 700; color: var(--tx-sub); line-height: 1.7;
}
.tt-mode-note b { color: var(--tx); font-weight: 900; }

/* ------------------------------------------------------------
   게시글 «목록» 에서 아바타 자리에 들어가는 칭호
   ------------------------------------------------------------
   핵심 규칙 — «닉네임 자리는 절대 움직이지 않는다»
     칭호 그림은 아바타보다 훨씬 넓다(26px 높이 기준 약 122px).
     이걸 그냥 줄에 넣으면 그 줄만 닉네임이 오른쪽으로 밀려서
     목록의 닉네임이 줄마다 들쭉날쭉해진다.
     그래서 칭호는 «아바타와 똑같은 26×26 자리»(.bd-author-tslot)만 차지하게 하고,
     그림 자체는 그 칸 오른쪽 끝에 붙여서 «왼쪽으로» 삐져나가게 둔다.
       → 칭호가 있든 없든 닉네임 위치는 완전히 동일하다.
       → 줄 높이도 아바타와 같아 변하지 않는다.
     ⚠ 원본(600×128)은 그대로 쓰고 높이만 CSS 로 줄인다. 확대·pixelated 금지.
   ------------------------------------------------------------ */
.bd-author-tslot {
  position: relative;
  flex: 0 0 auto;
  width: 26px; height: 26px;          /* 아바타와 똑같은 자리 */
}
.bd-author-tslot > .bd-author-title {
  position: absolute;
  right: 0; top: 50%;                 /* 오른쪽 끝 고정 → 왼쪽으로 자란다 */
  transform: translateY(-50%);
  display: block;
  width: auto; height: min(var(--tt-h, 32px), 26px); max-width: 124px;
  object-fit: contain; image-rendering: auto;
  pointer-events: none;               /* 옆 칸(제목) 클릭을 가로막지 않는다 */
}
/*  칭호가 왼쪽으로 나가야 하므로 이 줄의 작성자 칸만 잘라내지 않는다.
    (아바타를 쓰는 줄은 예전 그대로 overflow: hidden) */
.bd-author.has-title { overflow: visible; position: relative; z-index: 1; }
/*  칭호가 왼쪽으로 넘어가는 만큼 «그 줄의 제목만» 조금 일찍 말줄임한다.
    → 긴 제목 글자 위에 칭호가 겹쳐 보이는 일이 없다.
    → 열 너비는 그대로다 (칭호가 없는 줄은 아무 영향 없음).
    계산: 그림 최대 124px − 자리 26px = 98px 이 왼쪽으로 나가고,
          칸 사이 간격 8px 을 빼면 제목 칸을 최대 90px 침범한다 → 92px 확보. */
.bd-row:has(.bd-author-tslot) .bd-t { padding-right: 92px; }

/* ============================================================
   우편함 (2026-08-14) — 종 아이콘 + 알림 팝업
     화면을 가리던 지급·랜덤박스 팝업 대신, 종의 빨간 숫자로만 알린다.
   ============================================================ */
.gg-mail-btn {
  position: relative; flex: none;
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid #e3edf9; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #5a7ba8; padding: 0;
  transition: color .15s ease, border-color .15s ease;
  vertical-align: middle;
}
.gg-mail-btn svg { width: 21px; height: 21px; display: block; }
.gg-mail-btn:hover { color: #1d6bfa; border-color: #bcd6f8; }
.gg-mail-btn.has-mail { color: #1d6bfa; }
.gg-mail-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #ff4d6b; color: #fff;
  font-size: 10px; font-weight: 900; line-height: 17px; text-align: center;
  box-shadow: 0 2px 6px rgba(255, 77, 107, .45);
  pointer-events: none;
}
/* 새 우편이 «늘어난» 순간에만 종이 살짝 흔들린다 */
@keyframes ggMailRing {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); } 30% { transform: rotate(11deg); }
  45% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
}
.gg-mail-btn.is-ring svg { animation: ggMailRing .8s ease; transform-origin: 50% 22%; }
@media (prefers-reduced-motion: reduce) { .gg-mail-btn.is-ring svg { animation: none; } }

/* 홈 «내 정보» 카드 — 카드 오른쪽 위 구석 (모바일에서 제목 줄이 숨어도 종은 남는다) */
.gg-home-me2 { position: relative; }
.gg-home-me2 .gg-mail-corner { position: absolute; top: 12px; right: 12px; z-index: 2; }
/* 확성기 — 종 «왼쪽» 아이콘 (PC). 모바일 자리는 responsive.css 가 정한다 (2026-08-18) */
.gg-mega-corner {
  position: relative; flex: none;
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid #e3edf9; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
  vertical-align: middle;
}
.gg-mega-corner img { width: 24px; height: 24px; object-fit: contain; display: block; }
.gg-mega-corner:hover { border-color: #bcd6f8; box-shadow: 0 2px 8px rgba(29, 107, 250, .12); }
.gg-home-me2 .gg-mega-corner { position: absolute; top: 12px; right: 58px; z-index: 2; }
/* 내 정보 화면 — 제목 옆 */
.gg-card-title .gg-mail-inline { margin-left: 8px; margin-top: -4px; }
.gg-card-title .gg-mega-inline { margin-left: 6px; margin-top: -4px; }

/* ---------- 우편함 팝업 ---------- */
.gg-mail-pop { width: 400px; padding: 0; overflow: hidden; }
.gg-mail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 16px 13px; border-bottom: 1px solid #edf3fa;
}
.gg-mail-head-ico { display: inline-flex; color: #1d6bfa; }
.gg-mail-head-ico svg { width: 19px; height: 19px; }
.gg-mail-head b { flex: 1; font-size: 15px; color: var(--tx); }
.gg-mail-x {
  border: none; background: none; cursor: pointer; padding: 4px 6px;
  font-size: 14px; color: #9ca5bd; border-radius: 8px;
}
.gg-mail-x:hover { background: #f2f7fd; color: var(--tx); }
/* 세로 20% 확대 (2026-08-15) — 기록이 몇 줄 더 보이게. 작은 화면에서는 화면의 74%까지만 */
/* overscroll-behavior: 목록 끝에서 스크롤이 뒤 배경(사이트)으로 번지지 않게 (2026-08-15) */
.gg-mail-body { max-height: min(516px, 74vh); overflow-y: auto; padding: 10px 12px 12px; overscroll-behavior: contain; }
.gg-mail-loading, .gg-mail-empty {
  padding: 34px 10px; text-align: center;
  font-size: 13px; font-weight: 800; color: var(--tx-sub); line-height: 1.9;
}
.gg-mail-empty { font-size: 13.5px; }
.gg-mail-sub { margin: 10px 4px 4px; font-size: 11.5px; font-weight: 900; color: #9ca5bd; }
.gg-mail-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 12px; margin-top: 6px;
  background: #f7fafd; border: 1px solid #edf3fa;
}
.gg-mail-row:first-child { margin-top: 0; }
.gg-mail-row.is-done { background: #f1fbf4; border-color: #d9f2e1; }
.gg-mail-row.is-log { background: #fff; }
.gg-mail-row.is-log.is-new { background: #f4f8ff; border-color: #d8e7fc; }
.gg-mail-ico { flex: none; font-size: 20px; }
.gg-mail-tx { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--tx); line-height: 1.5; }
.gg-mail-tx b { font-weight: 900; }
.gg-mail-tx b.is-plus { color: #1d9a55; }
.gg-mail-tx b.is-minus { color: #e2506b; }
.gg-mail-note { display: block; font-size: 11.5px; font-weight: 700; color: var(--tx-sub); }
.gg-mail-left { display: block; font-size: 11px; font-weight: 700; color: #9ca5bd; }
.gg-mail-boxlog { display: block; font-size: 11.5px; font-weight: 800; color: #1d9a55; }
.gg-mail-act { flex: none; }
.gg-mail-new {
  flex: none; font-size: 10px; font-weight: 900; color: #1d6bfa;
  background: #e3eeff; border-radius: 999px; padding: 3px 8px;
}
@media (max-width: 480px) {
  .gg-mail-pop { width: calc(100vw - 28px); }
  .gg-mail-btn { width: 34px; height: 34px; border-radius: 10px; }
  .gg-mega-corner { width: 34px; height: 34px; border-radius: 10px; }
  .gg-mega-corner img { width: 21px; height: 21px; }
  .gg-home-me2 .gg-mega-corner { left: 50px; }
  .gg-mail-btn svg { width: 19px; height: 19px; }
}

/* ---------- 우편 도착 잔상 알림 + 일괄수령 (2026-08-14) ---------- */
/* 화면 위쪽에 잠깐 떴다 사라진다. 아무것도 막지 않고, 누르면 우편함이 열린다. */
.gg-mail-toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 12900;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #d8e7fc; border-radius: 999px;
  background: rgba(255, 255, 255, .97); color: var(--tx);
  padding: 9px 16px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(29, 107, 250, .22);
  animation: ggMailToastIn .35s cubic-bezier(.2, .9, .3, 1.2);
}
.gg-mail-toast small { font-size: 11px; font-weight: 800; color: #1d6bfa; }
.gg-mail-toast.is-out { animation: ggMailToastOut .45s ease forwards; }
@keyframes ggMailToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ggMailToastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .gg-mail-toast, .gg-mail-toast.is-out { animation: none; }
}
@media (max-width: 480px) {
  .gg-mail-toast { top: 10px; font-size: 12px; padding: 8px 13px; max-width: calc(100vw - 24px); white-space: normal; }
}

/* [한 번에 모두 받기] — 우편함 맨 위 가로로 꽉 찬 버튼 */
/* [한 번에 모두 받기] — 줄 전체를 차지하던 막대를 작은 알약 버튼으로 (2026-08-15) */
.gg-mail-all {
  display: inline-block; width: auto;
  padding: 6px 14px; margin-bottom: 4px;
  font-size: 12.5px; font-weight: 800; border-radius: 999px;
}
.gg-mail-all:disabled { opacity: .75; }

/* 우편함 — 칭호 획득·회수 알림 (2026-08-14). 원본 100×28 그대로, 확대·효과 없음 */
.gg-mail-title-img {
  display: block; margin-bottom: 3px;
  width: auto; max-width: 100px; height: 28px;
  object-fit: contain; image-rendering: auto; flex: 0 0 auto;
}

/* ---------- 우편함 카테고리 탭 (2026-08-15) — 전체 · 포인트 · 랜덤박스 · 칭호 ---------- */
/* 탭 줄은 스크롤 영역(.gg-mail-body) «밖» 에 있다 — 목록이 이 줄 밑에서만 스크롤된다 */
.gg-mail-tabs {
  display: flex; gap: 6px;
  padding: 10px 12px 9px;
  border-bottom: 1px solid #edf3fa;
  background: #fff;
}
.gg-mail-tabs:empty { display: none; }            /* 불러오는 중에는 줄 자체를 숨긴다 */
.gg-mail-tabbtn {
  flex: 1 1 0; padding: 7px 4px; border-radius: 9px; cursor: pointer;
  border: 1px solid #e3edf9; background: #f7fafd;
  font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--tx-sub);
}
.gg-mail-tabbtn.is-on { background: #1d6bfa; border-color: #1d6bfa; color: #fff; }

/* ============================================================
   전역 확성기 — 아이콘은 헤더, 방송은 현재 화면 최상단 잔상 팝업
   ============================================================ */
.gg-megaphone-bar {
  position: fixed; top: 14px; left: 50%; z-index: 12910;
  box-sizing: border-box;
  display: flex; align-items: center; width: min(1060px, calc(100vw - 36px)); height: 42px; overflow: hidden;
  border: 1px solid #c99b27; border-radius: 10px; background: #0c0d0f;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-14px);
  box-shadow: 0 8px 24px rgba(22, 16, 3, .24);
  transition: opacity 1s ease, transform 1s ease, visibility 0s linear 1s;
}
.gg-megaphone-bar.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 1s ease, transform 1s ease, visibility 0s;
}
.gg-megaphone-track { min-width: 0; flex: 1; overflow: hidden; }
.gg-megaphone-stream { display: flex; width: max-content; animation: ggMegaphoneMove 13s linear infinite; will-change: transform; }
.gg-megaphone-stream > span {
  box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: flex-end;
  /* 긴 글 대비: 창 너비는 '최소값'으로만 잡는다 — 글이 창보다 길면 칸이 내용만큼 늘어나
     두 번째 복사본과 겹치지 않는다 (예전에는 고정 너비라 넘친 글자가 서로 포개졌다) */
  min-width: calc(min(1060px, 100vw - 36px) - 42px); padding-right: 22px;
  white-space: nowrap; color: #fff; font-style: normal; font-size: 14px; font-weight: 800;
}
.gg-megaphone-stream b { margin-right: 15px; color: #ffd75b; font-weight: 900; }
.gg-megaphone-stream i { color: #fff; font-style: normal; }
@keyframes ggMegaphoneMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gg-megaphone-dismiss {
  flex: 0 0 28px; width: 28px; height: 28px; margin-right: 7px; padding: 0;
  border: 1px solid rgba(255,255,255,.68); border-radius: 50%; background: rgba(255,255,255,.08);
  color: #fff; font: 700 18px/24px Arial, sans-serif; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.gg-megaphone-dismiss:hover { border-color: #fff; background: rgba(255,255,255,.2); }

.gg-megaphone-pop {
  position: fixed; top: 64px; right: auto; left: max(18px, calc((100vw - 1060px) / 2)); z-index: 12920;
  width: 340px; padding: 16px; border: 1px solid #dce5f1; border-radius: 14px;
  box-sizing: border-box; background: #fff; box-shadow: 0 16px 42px rgba(28, 48, 80, .2); color: var(--tx);
}
.gg-megaphone-pop[hidden] { display: none; }
/* PC — 화면 한가운데 (여는 순간 스크립트가 붙이는 클래스) (2026-08-18) */
.gg-megaphone-pop.is-center { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); }
.gg-megaphone-pophead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.gg-megaphone-pophead strong { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.gg-megaphone-pophead strong img { width: 28px; height: 28px; object-fit: contain; }
.gg-megaphone-pophead button { width: 28px; height: 28px; border: 0; background: transparent; color: #758096; font-size: 24px; line-height: 1; cursor: pointer; }
.gg-megaphone-pop label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: #657087; }
.gg-megaphone-pop textarea { box-sizing: border-box; width: 100%; height: 78px; resize: none; padding: 10px 11px; border: 1px solid #dce5f1; border-radius: 10px; outline: none; font: 13px/1.5 inherit; color: var(--tx); }
.gg-megaphone-pop textarea:focus { border-color: #2775e7; box-shadow: 0 0 0 3px rgba(39,117,231,.1); }
.gg-megaphone-fee { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 9px 10px; border-radius: 9px; background: #f6f8fb; font-size: 12px; }
.gg-megaphone-fee b { color: #b37b00; }
.gg-megaphone-status { min-height: 18px; margin: 9px 1px; color: #21824b; font-size: 12px; font-weight: 800; }
.gg-megaphone-status.is-busy { color: #d05454; }
.gg-megaphone-send {
  display: block; width: 34%; min-width: 108px; height: 44px;
  margin: 4px auto 0; padding: 0 18px; border-radius: 12px;
  font-size: 13.5px; font-weight: 900;
}
.gg-megaphone-send:disabled { opacity: .48; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .gg-megaphone-bar { transition-duration: .01ms; }
  .gg-megaphone-stream { animation-duration: 22s; }
}

/* ── 보유 칭호 효과 안내 카드 (2026-08-23 · 전 게임 공통) ── */
.tfx { margin: 10px 0 0; }
.tfx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #cfe0f8; cursor: pointer;
  font-size: 12.5px; font-weight: 800; color: #2b6cd4;
}
.tfx-btn:hover { background: #f4f8ff; }
.tfx-btn:focus-visible { outline: 2px solid #7aa9ee; outline-offset: 2px; }
.tfx-i {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  background: #e3edfd; color: #2b6cd4; font-size: 10px; font-weight: 900; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}
.tfx-n {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: #2b6cd4; color: #fff; font-size: 10.5px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
}
.tfx-chev { font-size: 10px; color: #8fb1e4; transition: transform .15s ease; }
.tfx.is-open .tfx-chev { transform: rotate(180deg); }
.tfx-panel {
  margin-top: 8px; padding: 10px 12px;
  background: #fff; border: 1px solid #cfe0f8; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(43, 108, 212, .07);
}
.tfx-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 12.5px;
}
.tfx-row + .tfx-row { border-top: 1px dashed #edf2fa; }
.tfx-row b { font-weight: 900; color: var(--tx, #223); }
.tfx-row.is-plus span { color: #1d9a53; font-weight: 800; }
.tfx-row.is-minus span { color: #d1372c; font-weight: 800; }
.tfx-est {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: #f4f8ff; border: 1px solid #e2ecfb;
}
.tfx-est-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 0; font-size: 12px; color: var(--tx-sub, #5a6a80); font-weight: 700;
}
.tfx-est-row b { font-weight: 900; color: var(--tx, #223); font-variant-numeric: tabular-nums; }
.tfx-est-row.is-total { border-top: 1px solid #dbe7fb; margin-top: 4px; padding-top: 6px; }
.tfx-est-row.is-total b { color: #d1372c; }
.tfx-note { margin: 8px 0 0; font-size: 11.5px; color: var(--tx-sub, #7b8698); }
.tfx-note b { color: #2b6cd4; }
@media (max-width: 900px) { .tfx-btn { width: 100%; justify-content: center; } }