/* ─────────────────────────────────────────────────────────
 * 한봇 공용 스타일 (v27.22.0 디자인 리뉴얼)
 * - 모든 색·서체·라운드는 :root 토큰만 사용 (하드코딩 금지)
 * - 시그니처: 사이드바 브랜드 오드아이 램프 (.brand-lamp — 하늘·호박 두 점) 1곳
 * ───────────────────────────────────────────────────────── */

/* 한봇 게임즈 제목 글씨(도현, 2026-10-19) — 허브 제목·게임 이름·상단 바 로고에만 */
@font-face {
    font-family: "hb-games-display";
    src: url("/fonts/ui/do-hyeon-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard Variable";
    src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ───────── 공용 디자인 변수 ───────── */
:root {
    /* 브랜드 컬러 — 오드아이(마스코트 두 눈): 호박 주색 + 하늘 보조 (2026-10-01, 치지직 민트에서 교체) */
    --brand: #f5b70a;
    --brand-hover: #e2a500;
    --brand-rgb: 245, 183, 10;
    --brand-glow: rgba(245, 183, 10, 0.4);
    --brand-tint: rgba(245, 183, 10, 0.08);
    --brand-ink: #231800;          /* 호박 바탕 위 글자 */
    --eye1: #45c4f5;               /* 램프 왼쪽 눈(하늘) */
    --eye2: #f5b70a;               /* 램프 오른쪽 눈(호박) */

    /* 브라우저가 직접 그리는 부분(select 드롭다운 목록·날짜 선택기·스크롤바·자동완성)을 어둡게.
     * 이 선언이 없으면 문서가 라이트 모드로 취급돼 목록은 흰 바탕인데 글자만 밝은 색이라 안 보인다.
     * 그동안 날짜 입력칸마다 color-scheme:dark를 손으로 붙여 온 것을 여기서 한 번에 대신한다. */
    color-scheme: dark;

    /* 중립 스케일 (남색 기운) */
    --bg-base: #0e1218;
    --bg-card: #141922;
    --bg-elev: #19202a;
    --bg-input: #1c2430;
    --bg-deep: #0a0d12;
    --text-main: #e8edf3;
    --text-sub: #a3aebb;
    --text-dim: #7f8b99;
    --border: #252e3a;
    --border-dim: #1e2630;
    --border-strong: #313c4a;
    /* 글자색 계열 RGB — 흰 반투명으로 살짝 밝히던 hover·구분선은 rgba(var(--fg-rgb), a)로 (밝은 화면에선 검은 반투명이 된다) */
    --fg-rgb: 255, 255, 255;
    --scroll-thumb: #5f656b;       /* 스크롤바 손잡이 */

    /* 상태 컬러 — ok=성공·연결됨·켜짐, warn=진짜 경고만(강조용 노랑은 --brand), info=저장·안내 */
    --ok: #5fd49a;
    --ok-rgb: 95, 212, 154;
    --danger: #ef5a5a;
    --danger-hover: #d64343;
    --danger-rgb: 239, 90, 90;
    --warn: #ff8f45;
    --warn-rgb: 255, 143, 69;
    --info: #45c4f5;
    --info-hover: #2fb3e8;
    --info-rgb: 69, 196, 245;
    --info-ink: #052230;           /* 하늘 바탕 위 글자 */
    --info-soft: #8fd8f8;          /* 안내 상자 제목·링크 */

    /* 서체 */
    --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;

    /* 라운드 */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    /* 등급 색상 (카드뽑기/낚시/거래소 등 공용) */
    --rarity-common: #aaa;
    --rarity-uncommon: #00e5a0;
    --rarity-rare: #4da6ff;
    --rarity-epic: #a078ff;
    --rarity-legendary: #f0c040;
    --rarity-mythic: #ff6b6b;
    /* 기능 구분용 보라·분홍 (AI·후원·시즌 배지 등) · 순위 금은동 */
    --purple: #a078ff;
    --purple-rgb: 160, 120, 255;
    --purple-soft: #c8a0ff;        /* 보라 글자(옅은) */
    --pink: #ff7eb6;
    --rank-gold: #ffd700;
    --rank-silver: #c0c0c0;
    --rank-bronze: #cd7f32;
    /* 서버·데이터가 주는 임의 색 글자를 밝은 화면에서 읽히게: color-mix(in srgb, <색> var(--accent-mix), #000) — 어두운 화면은 그 색 그대로 */
    --accent-mix: 100%;

    /* 상단 바 높이 — PC(사이드바)는 0, 태블릿·휴대폰은 48px. 화면 위에 붙는(sticky) 요소는 top에 이 값을 더할 것 */
    --topbar-h: 0px;

    /* ── 다듬기 토큰 (2026-10-24 고도화 FC) — 새 규칙은 아래 값에서 고른다 ── */
    /* 간격 4px 단위 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    /* 글자 단계: 캡션 · 작은 글 · 보조 설명 · 본문 · 카드 제목 · 페이지 제목 */
    --fs-xs: 0.72rem;
    --fs-sm: 0.78rem;
    --fs-meta: 0.85rem;
    --fs-body: 0.9rem;
    --fs-md: 1rem;
    --fs-title: 1.25rem;
    --radius-xs: 4px;              /* 칩 속 작은 조각·표 안 입력칸 */
    /* 그림자 2단: 떠 있는 작은 상자(토스트·말풍선) / 창(모달·서랍) */
    --shadow-1: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.45);
    /* 폭 — 사이드바·본문 상한·설명 글 줄 길이·입력칸 최대 폭 (모두 rem이라 큰 화면·큰 글자에서 같이 커진다) */
    --side-w: 12.5rem;             /* 16px 기준 200px */
    --content-max: 120rem;         /* 본문(.container) 상한 — 4K에서 2,400px */
    --read-max: 72rem;             /* 설명 글 한 줄 상한 */
    --form-max: 48rem;             /* 설정 줄 입력칸·선택칸 상한 */
    /* 쌓임 순서 표 — 앱 설치 띠 < 공지 팝업 < 확인 창 < 화면 설정 창 < 말풍선 < 도우미 < 서랍(열림) < 대리 모드 띠 < 토스트 */
    --z-sticky: 5;
    --z-header: 100;
    --z-pwa: 1800;
    --z-popup: 1900;
    --z-modal: 2000;
    --z-sheet: 2500;
    --z-pop: 3000;
    --z-assist: 9990;
    --z-drawer-open: 9999;
    --z-banner: 10000;
    --z-toast: 10001;
    /* 큰 화면 배율 — 아래 html 글자 크기 규칙이 화면 설정 글자 크기(--hb-scale)와 곱한다 */
    --hb-screen: 1;
}
/* 큰 화면 단계 — 글자·여백이 rem이라 루트 글자 하나로 전체가 같이 커진다 (2560 +17% · 3840 +25%).
 * --hb-scale은 화면 설정 글자 크기(header.js·viewer-header.js __hbApplyDisplay가 넣음, 112% → 1.12) */
@media (min-width: 2560px) { :root { --hb-screen: 1.17; } }
@media (min-width: 3840px) { :root { --hb-screen: 1.25; } }
html { font-size: calc(100% * var(--hb-scale, 1) * var(--hb-screen)); }
/* ───────── 화면 설정 (header.js·viewer-header.js __hbApplyDisplay가 html에 붙이는 data 속성, 2026-10-01) ─────────
 * 밝은 화면은 토큰만 바꾼다 — 페이지 색이 토큰(var)을 써야 같이 바뀌고, 어두운 화면 색을 직접 적은 곳은 밝은 화면에서 깨진다.
 * 게임 화면(<header data-theme-lock="dark">)은 그림이 어두운 바탕에 맞춰져 있어 늘 어두운 화면 */
:root[data-theme="light"] {
    color-scheme: light;
    --brand: #a36f00;              /* 흰 바탕 글자로도 읽히는 진한 호박 (흰 바탕 대비 4.3) */
    --brand-hover: #8c5f00;
    --brand-rgb: 163, 111, 0;
    --brand-glow: rgba(163, 111, 0, 0.35);
    --brand-tint: rgba(196, 138, 0, 0.1);
    --brand-ink: #ffffff;
    --bg-base: #eef1f5;
    --bg-card: #ffffff;
    --bg-elev: #f8f9fb;
    --bg-input: #f4f6f9;
    --bg-deep: #e6eaf0;
    --text-main: #1a1f27;
    --text-sub: #4a5563;
    --text-dim: #677284;
    --border: #d5dbe3;
    --border-dim: #e3e7ec;
    --border-strong: #bcc4cf;
    --fg-rgb: 20, 28, 40;
    --scroll-thumb: #b9c1cc;
    --ok: #178a52;
    --ok-rgb: 23, 138, 82;
    --danger: #cf3a3a;
    --danger-hover: #b32f2f;
    --danger-rgb: 207, 58, 58;
    --warn: #bf5509;
    --warn-rgb: 191, 85, 9;
    --info: #0a72ad;
    --info-hover: #085f91;
    --info-rgb: 10, 114, 173;
    --info-ink: #ffffff;
    --info-soft: #075a8a;
    --rarity-common: #7c838d;
    --rarity-uncommon: #008f63;
    --rarity-rare: #1f7ad6;
    --rarity-epic: #7b4fe0;
    --rarity-legendary: #a87a00;
    --rarity-mythic: #d94343;
    --purple: #6b3fd4;
    --purple-rgb: 107, 63, 212;
    --purple-soft: #6b3fd4;
    --pink: #c2306f;
    --rank-gold: #a87a00;
    --rank-silver: #6f7782;
    --rank-bronze: #a8611f;
    --accent-mix: 58%;
    --shadow-1: 0 6px 20px rgba(20, 28, 40, 0.14);
    --shadow-2: 0 12px 40px rgba(20, 28, 40, 0.2);
}
/* 글자 또렷하게 — 보조·흐린 글자와 테두리를 한 단계 진하게 */
:root[data-contrast="high"] {
    --text-sub: #c4ccd6;
    --text-dim: #a7b1bd;
    --border: #34404f;
    --border-dim: #2a3442;
    --border-strong: #46546a;
}
:root[data-theme="light"][data-contrast="high"] {
    --text-main: #0f141b;
    --text-sub: #3a4350;
    --text-dim: #525d6d;
    --border: #bcc4cf;
    --border-dim: #d0d6de;
    --border-strong: #9aa4b2;
}
/* 줄 간격 넓게 — 본문은 물려받고, 문단·목록·표 칸은 한 클래스짜리 페이지 규칙보다 앞서게 */
:root[data-line="wide"] body,
:root[data-line="wide"] :is(p, li, td, th, dd, dt, label, small) { line-height: 1.75; }
/* 본문 폭 — PC만 (휴대폰·태블릿은 화면 폭 그대로) */
@media (min-width: 1025px) {
    :root[data-width="narrow"] .container { max-width: min(68.75rem, 90%); }
    :root[data-width="wide"] .container { max-width: 100%; }
}
body {
    background: var(--bg-base);
    color: var(--text-main);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding-left: var(--side-w);
}

/* hidden 속성은 언제나 숨김 — display를 지정한 공용 클래스(.status-chip 등)에 hidden을 줘도 보이던 것 */
[hidden] { display: none !important; }

/* 컬러 이모지 강제: 텍스트 폰트가 ♥️☂️☃️ 같은 기호를 흑백 글리프로 가로채는 것 방지 */
.emoji-glyph {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* 키보드 포커스 (품질 바닥선 — 제거 금지) */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ───────── 폼 컨트롤 전역 기준선 ─────────
 * select/textarea/checkbox/텍스트 input이 브라우저 기본(흰색)으로 뜨는 사고 방지.
 * 요소 선택자(최저 특이성)라 클래스·인라인 스타일이 있으면 그쪽이 우선. */
select,
textarea,
input:where(
    [type="text"],
    [type="search"],
    [type="number"],
    [type="password"],
    [type="email"],
    [type="url"],
    [type="tel"],
    [type="date"],
    [type="time"],
    [type="datetime-local"],
    :not([type])
) {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    padding: 6px 10px;
}
/* 드롭다운 목록의 각 줄. select에 준 색이 option에 자동으로 내려가지 않고,
 * 페이지가 select 배경을 반투명으로 덮어써도 목록만은 늘 불투명하게 남도록 못 박는다. */
option,
optgroup {
    background-color: var(--bg-input);
    color: var(--text-main);
}
/* 오버레이 미리보기 iframe — 위 :root color-scheme:dark와 오버레이 문서(선언 없음 = light)가 어긋나면
 * 크롬이 iframe 뒤에 흰 바탕을 깔아 투명 오버레이가 흰 판 위에 보인다. iframe만 기본값으로 되돌린다. */
iframe {
    color-scheme: normal;
}
select:focus,
textarea:focus,
input:where(
    [type="text"],
    [type="search"],
    [type="number"],
    [type="password"],
    [type="email"],
    [type="url"],
    [type="tel"],
    [type="date"],
    [type="time"],
    [type="datetime-local"],
    :not([type])
):focus {
    outline: none;
    border-color: var(--brand);
}
textarea::placeholder,
input::placeholder {
    color: var(--text-dim);
}
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand);
}

header {
    position: fixed;
    left: 0;
    /* 대리 모드 띠(header.js — 화면 맨 위 고정)가 사이드바 머리를 가리지 않게 띠 높이만큼 내린다 (R33-16) */
    top: var(--banner-h, 0px);
    width: var(--side-w);
    height: calc(100vh - var(--banner-h, 0px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-elev);
    border-right: 1px solid var(--border);
    z-index: var(--z-header);
    overflow: hidden;
    /* 승인 대기 띠(화면 아래 고정)가 사이드바 아래 링크를 가리지 않게 — header.js가 띠 높이를 넣는다 */
    padding-bottom: var(--pending-h, 0px);
}
header h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ───────── 시그니처: 오드아이 램프 (마스코트 두 눈 — 하늘·호박 두 점이 번갈아) ───────── */
.brand-lamp { display: inline-flex; gap: 4px; flex-shrink: 0; }
.brand-lamp i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--eye1);
    box-shadow: 0 0 6px rgba(var(--info-rgb), 0.45), 0 0 12px rgba(var(--info-rgb), 0.3);
    animation: brand-lamp-pulse 2.6s ease-in-out infinite;
}
.brand-lamp i + i {
    background: var(--eye2);
    box-shadow: 0 0 6px rgba(var(--brand-rgb), 0.45), 0 0 12px rgba(var(--brand-rgb), 0.3);
    animation-delay: 1.3s;
}
@keyframes brand-lamp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) { .brand-lamp i { animation: none; } }

/* 사이드바 탭 */
.nav-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
.nav-tabs::-webkit-scrollbar { width: 8px; }
.nav-tabs::-webkit-scrollbar-track { background: transparent; }
.nav-tabs::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
.nav-tabs::-webkit-scrollbar-thumb:hover { background: var(--text-sub); }
.nav-sep {
    border-top: 1px solid var(--border);
    margin: 4px 0;
}
/* 관리자 전용 탭(adminOnly — 정식 오픈 전 게임 등): 기본 숨김, header.js meReady에서 is_admin일 때만 클래스를 떼어 드러낸다 (검색 필터가 display를 바꿔도 !important로 유지) */
.nav-tab.admin-only { display: none !important; }.nav-tab {
    display: flex;
    align-items: center;
    padding: 11px 20px;
    color: var(--text-sub);
    text-decoration: none;
    font-size: 1.1rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    user-select: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.nav-tab:hover {
    color: var(--text-main);
    background: rgba(var(--fg-rgb), 0.03);
}
.nav-tab.active {
    color: var(--brand);
    border-left-color: var(--brand);
    background: var(--brand-tint);
}

/* ───────── 사이드바 검색 ───────── */
.nav-search {
    padding: 10px 12px 6px;
    flex-shrink: 0;
}
.nav-search input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 8px 12px;
    color: var(--text-main);
    font-size: 0.8rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.nav-search input:focus { border-color: var(--brand); background: var(--bg-elev); }
.nav-search input::placeholder { color: var(--text-dim); }

/* ───────── 아코디언 그룹 ───────── */
.nav-group { flex-shrink: 0; }
.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 16px 9px 20px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: var(--text-sub);
    font-family: var(--font-sans);
    font-size: 0.975rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
    margin-top: 8px;
}
.nav-group-header:hover { color: var(--text-main); }
.nav-group-header.has-active { color: var(--brand); }
.nav-group-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    opacity: 0.5;
}
.nav-group.open .nav-group-arrow { transform: rotate(180deg); }
.nav-group-items {
    display: none;
    flex-direction: column;
}
.nav-group.open .nav-group-header { background: rgba(var(--fg-rgb), 0.04); }
.nav-group.open .nav-group-items { display: flex; background: rgba(var(--fg-rgb), 0.09); }
.nav-group-items .nav-tab { padding-left: 28px; }
/* 머리 없는 묶음(.nav-flat — 한봇 게임, 2026-10-19): 펼친 묶음 바탕·들여쓰기 없이 맨 위 칸처럼 */
.nav-group.nav-flat .nav-group-items { background: none; }
.nav-group.nav-flat .nav-group-items .nav-tab { padding-left: 20px; }
/* 구역 제목 (2026-10-08) — 그룹 묶음 위에 누르지 않는 흐린 글씨 + 가는 선, 접힌 그룹 헤더보다 낮게.
 * 검색 중이거나 매니저 모드에서 그 구역 그룹이 다 숨으면 header.js가 숨긴다 */
.nav-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 14px 16px 2px 23px;
    color: var(--text-dim);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: nowrap;
    user-select: none;
    cursor: default;
}
.nav-section::after { content: ""; flex: 1; min-width: 12px; border-top: 1px solid var(--border); }
.nav-section + .nav-group .nav-group-header { margin-top: 2px; }

/* ───────── 즐겨찾기 별 버튼 ───────── */
.nav-group-items .nav-tab { position: relative; }
.nav-fav-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(var(--fg-rgb), 0.3);
    padding: 2px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    opacity: 1;
    transition: color 0.15s, transform 0.2s;
}
.nav-fav-btn svg { fill: none; }
.nav-fav-btn.active { color: var(--brand); }
.nav-fav-btn.active svg { fill: var(--brand); }
.nav-fav-btn:hover { color: var(--brand); }
#group-fav .nav-group-header span svg { vertical-align: -1px; margin-right: 2px; color: var(--brand); fill: var(--brand); }
#group-fav { border-bottom: 1px solid var(--border); }
#group-fav .nav-group-header { margin-top: 0; }
/* 신규 기능 그룹 (즐겨찾기 바로 위, 7일 한시) */
#group-new { border-bottom: 1px solid var(--border); }
#group-new .nav-group-header { margin-top: 0; }
#group-new .nav-new-badge { margin-left: 5px; }
/* 그룹 펼치기 고정 핀 (스트리머·시청자 공통, 2026-09-16) — 고정된 그룹은 항상 펼침, 헤더 클릭으로 접히지 않음. 기본은 옅게 보이고 hover·고정 중에 진해짐 */
.nav-pin-btn {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
    padding: 2px;
    border-radius: 4px;
    color: rgba(var(--fg-rgb), 0.3);
    opacity: 0.35;
    transition: color 0.15s, opacity 0.15s;
}
.nav-pin-btn svg { fill: none; }
.nav-group-header:hover .nav-pin-btn, .nav-pin-btn.active { opacity: 1; }
.nav-pin-btn:hover { color: var(--text-main); }
.nav-pin-btn.active { color: var(--brand); }
.nav-pin-btn.active svg { fill: var(--brand); }
.nav-group.pinned .nav-group-arrow { display: none; }

.fav-empty-msg { font-size: 0.72rem; color: rgba(var(--fg-rgb), 0.3); padding: 10px 16px; text-align: center; }

/* ───────── 즐겨찾기 드래그 ───────── */
.fav-drag-handle {
    flex-shrink: 0;
    margin-right: 6px;
    color: rgba(var(--fg-rgb), 0.22);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
}
#group-fav .nav-tab:hover .fav-drag-handle { opacity: 1; }
#group-fav .nav-tab.fav-dragging { opacity: 0.35; }
#group-fav .nav-tab.fav-drop-over { background: rgba(var(--fg-rgb), 0.05); border-left-color: var(--border-strong); }

/* ───────── 즐겨찾기 폴더 ───────── */
.fav-folder { display: flex; flex-direction: column; }
.fav-folder-header .fav-folder-icon { flex-shrink: 0; margin-right: 6px; color: var(--brand); opacity: 0.75; }
.fav-folder-header .nav-group-arrow { margin-left: auto; }
.fav-folder.open .fav-folder-header .nav-group-arrow { transform: rotate(180deg); }
.fav-folder-header.has-active { color: var(--brand); }
.fav-folder-items { display: none; flex-direction: column; }
.fav-folder.open .fav-folder-items { display: flex; }
#group-fav .fav-folder-items .nav-tab { padding-left: 40px; }
.fav-folder-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 긴 폴더 이름이 연필·셰브론을 밀어내지 않게 말줄임 */
.fav-folder-edit {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(var(--fg-rgb), 0.3);
    padding: 2px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    /* 폴더 이름 바꾸기·빈 폴더 삭제 — 마우스를 올려야만 보이던 것(터치 화면에선 아예 안 보임)을 고정 핀처럼 옅게 늘 보이게 (2026-10-08) */
    opacity: 0.45;
    transition: opacity 0.15s, color 0.15s;
}
.fav-folder-header:hover .fav-folder-edit { opacity: 1; }
.fav-folder-edit:hover { color: var(--text-main); }
.fav-folder-del { margin-left: 2px; }
.fav-folder-del:hover { color: var(--danger); }
.fav-folder-name-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-main);
    font-size: 0.95rem;
    font-family: var(--font-sans);
    padding: 2px 6px;
}
.fav-add-folder {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(var(--fg-rgb), 0.3);
    font-size: 0.72rem;
    font-family: var(--font-sans);
    text-align: left;
    padding: 8px 16px 8px 28px;
    transition: color 0.15s;
}
.fav-add-folder:hover { color: var(--text-main); }

/* ───────── 업데이트 NEW 뱃지 ───────── */
.nav-new-badge {
    font-size: 0.55rem;
    font-weight: 700;
    background: var(--danger);
    color: #fff;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 6px;
    letter-spacing: 0.03em;
    vertical-align: middle;
    animation: nav-new-pulse 2s ease-in-out infinite;
}
@keyframes nav-new-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 사이드바 항목 개수 뱃지 (알림함 미읽음 등 — NEW·LIVE와 달리 깜빡임 없음) */
.nav-count-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--danger);
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    line-height: 1.3;
    min-width: 14px;
    text-align: center;
}

.nav-live-badge {
    font-size: 0.55rem;
    font-weight: 700;
    background: var(--danger);
    color: #fff;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 6px;
    letter-spacing: 0.03em;
    vertical-align: middle;
    animation: nav-live-pulse 1.5s ease-in-out infinite;
}
@keyframes nav-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.header-right span {
    color: var(--brand);
    font-size: 0.85rem;
}
.header-right a {
    color: var(--text-sub);
    text-decoration: none;
    font-size: 0.85rem;
}
.header-right a:hover {
    color: var(--text-main);
}
/* 사이드바 아래 계정 메뉴 — 평소엔 계정 줄(.acct-toggle)만, 누르면 그 위로 버튼이 두 칸씩 펼쳐진다(.acct-open, header.js·viewer-header.js).
 * 버튼은 .header-right 바로 아래 자식 그대로 — 도우미·알림 종·미니창·앱 설치 스크립트가 여기 끼워 넣고, 태블릿·휴대폰 서랍 '계정' 칸도
 * 이 자식들을 읽는다. 태블릿·휴대폰(~1024px)에선 계정 줄이 상단 바에서 숨고 서랍이 대신한다 (아래 반응형 블록) */
.acct-toggle {
    order: 98;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-main);
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.acct-toggle:hover,
.header-right.acct-open .acct-toggle { background: var(--bg-input); border-color: var(--border); }
.acct-who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.header-right .acct-name,
.header-right .acct-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-right .acct-name { font-size: 0.86rem; font-weight: 700; color: var(--brand); }
.header-right .acct-name.acct-guest { font-weight: 500; color: var(--text-sub); }
.header-right .acct-sub { font-size: 0.72rem; color: var(--text-dim); }
.acct-caret { flex-shrink: 0; width: 14px; height: 14px; color: var(--text-dim); transition: transform 0.15s; }
.header-right.acct-open .acct-caret { transform: rotate(180deg); }
@media (min-width: 1025px) {
    .header-right { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; }
    #btn-noti-bell { order: 99; padding: 0 4px; }
    /* :where()로 묶어 제외 조건의 우선순위를 0으로 — 아래 로그아웃 한 줄 규칙이 이기게 */
    .header-right:not(.acct-open) > a:where(:not(#btn-noti-bell, #btn-assistant, .hr-login)) { display: none; }
    .header-right.acct-open > a:where(:not(#btn-noti-bell, #btn-assistant, .hr-login)) {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        flex: 1 1 calc(50% - 3px);
        min-width: 0;
        min-height: 34px;
        padding: 6px;
        box-sizing: border-box;
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: 0.78rem;
        line-height: 1.25;
        text-align: center;
        word-break: keep-all;
        transition: border-color 0.15s, color 0.15s;
    }
    .header-right.acct-open > a:where(:not(#btn-noti-bell, #btn-assistant, .hr-login)):hover { border-color: var(--border-strong); color: var(--text-main); }
    .header-right.acct-open > a.acct-logout { flex-basis: 100%; }
    /* 비로그인 시청자의 '로그인'은 접혀 있어도 계정 줄 위에 버튼으로 */
    .header-right .hr-login {
        order: 97;
        flex-basis: 100%;
        display: flex;
        justify-content: center;
        padding: 7px 8px;
        border: 1px solid var(--brand-glow);
        border-radius: var(--radius);
        color: var(--brand);
        font-weight: 700;
    }
}

.container {
    max-width: min(90%, var(--content-max));
    margin: 0 auto;
    padding: 28px 16px;
}

/* 설정 폼 */
.settings-grid {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 10px 16px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 14px;
}
.settings-grid label {
    font-size: 0.85rem;
    color: var(--text-sub);
}
.settings-grid input,
.settings-grid select,
.settings-grid textarea {
    padding: 7px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}
.settings-grid input:focus,
.settings-grid select:focus,
.settings-grid textarea:focus {
    outline: none;
    border-color: var(--brand);
}
/* 넓은 화면에서 입력칸이 화면 끝까지(4K 3,000px) 늘어나던 것 — 한 줄 입력·선택칸은 48rem, 여러 줄 글은 64rem까지 */
.settings-grid > :is(input, select) { max-width: var(--form-max); }
.settings-grid > textarea { max-width: calc(var(--form-max) * 4 / 3); }
/* 설명 글 한 줄 길이 상한 — 큰 화면에서 한 줄이 수천 px로 이어져 읽기 힘들던 것 (상자 없는 글만) */
.settings-hint,
.feature-desc,
.setting-desc { max-width: var(--read-max); }
.section-label {
    font-size: 0.72rem;
    font-weight: bold;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 32px;
    margin-bottom: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--border-dim);
}
.section-label:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.settings-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}

/* 빨간 경고 박스 — 법적·운영 주의 (포인트 관리 환급 금지, 추첨 경품 조건 등 공용) */
.warn-box {
    background: rgba(var(--danger-rgb), 0.08);
    border: 1px solid rgba(var(--danger-rgb), 0.3);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.warn-box-title { font-size: 0.78rem; font-weight: 600; color: var(--danger); }
.warn-box div:not(.warn-box-title) { font-size: 0.82rem; color: var(--text-sub); line-height: 1.6; }
.warn-box b { color: var(--text-main); }

/* 파란 안내 상자 — 처음 쓰는 분을 위한 기능 설명·순서 안내 (빨간 .warn-box는 주의·금지 전용) */
.info-box {
    background: rgba(var(--info-rgb), 0.07);
    border: 1px solid rgba(var(--info-rgb), 0.25);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    color: var(--text-sub);
    line-height: 1.65;
}
.info-box-title { font-size: 0.8rem; font-weight: 700; color: var(--info-soft); margin-bottom: 4px; }
.info-box b { color: var(--text-main); }
.info-box a { color: var(--info-soft); text-decoration: underline; text-underline-offset: 2px; }
.info-box ul, .info-box ol { padding-left: 18px; margin: 4px 0 0; }
.info-box li + li { margin-top: 2px; }

/* 도움말 물음표 — 어려운 설정·용어 옆에 붙이는 짧은 설명 (help-tip.js가 말풍선을 띄움)
 * 사용: <button type="button" class="help-tip" data-tip="설명 문장"></button>
 * PC는 마우스를 올리면, 휴대폰·태블릿은 누르면 뜨고, 바깥을 누르거나 Esc로 닫힌다. 줄바꿈은 &#10; */
.help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    margin: 0 0 0 5px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--bg-elev);
    color: var(--text-dim);
    font: 700 0.68rem/1 var(--font-sans);
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.help-tip::before { content: "?"; }
/* 보이는 크기는 작게, 누르는 영역은 넓게 */
.help-tip::after { content: ""; position: absolute; inset: -9px; }
.help-tip:hover,
.help-tip[aria-expanded="true"] { color: var(--brand); border-color: var(--brand); }
.help-tip-pop {
    position: fixed;
    z-index: var(--z-pop);
    max-width: min(20rem, calc(100vw - 24px));
    padding: 10px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.help-tip-pop[hidden] { display: none; }

/* ───────── 공용 카드 / OBS URL 행 ───────── */
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}
.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.obs-row,
.obs-url-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-deep);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.obs-label { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
/* OBS 주소 색은 하늘 하나(주소·링크 계열 — 호박은 강조·선택 전용, 2026-10-24 통일). 밝은 화면은 --info-soft가 진한 하늘로 바뀐다 */
.obs-url   { font-size: 0.82rem; color: var(--info-soft); word-break: break-all; flex: 1; min-width: 0; }
.obs-copy  { padding: 4px 12px; font-size: 0.78rem; flex-shrink: 0; }

/* 추가 폼 */
.add-form {
    display: grid;
    grid-template-columns: 1fr 2fr auto auto auto;
    gap: 8px;
    margin-bottom: 12px;
}
.add-form input,
.add-form select {
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}
.add-form input:focus,
.add-form select:focus {
    outline: none;
    border-color: var(--brand);
}
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s;
    /* 중립(보조) 버튼 기준선 — class="btn"만 쓴 버튼이 브라우저 기본(밝은 회색)으로 뜨던 것 정정.
     * 아래 .btn-add/.btn-save/.btn-del/.btn-cancel 등 변형이 배경·글자색을 덮어씀 */
    background: var(--bg-elev);
    color: var(--text-sub);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* <a class="btn">: 밑줄·세로 정렬 어긋남, inline이라 터치 최소 높이가 안 먹던 것 — :where로 감싸 페이지 규칙이 늘 우선 */
:where(a.btn) { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-add {
    background: var(--brand);
    color: var(--brand-ink);
}
.btn-add:hover { background: var(--brand-hover); }
.btn-del {
    background: var(--danger);
    color: #fff;
}
.btn-del:hover { background: var(--danger-hover); }
/* 위험 동작 버튼 전역 기준선 — 페이지들이 .btn-danger/.danger를 이미 쓰고 있으나 정의가 없어 회색 기본 버튼으로 보이던 것 정정 */
.btn-danger,
.btn.danger {
    background: var(--danger);
    color: #fff;
}
.btn-danger:hover,
.btn.danger:hover { background: var(--danger-hover); }
.btn-save {
    background: var(--info);
    color: var(--info-ink);
}
.btn-save:hover { background: var(--info-hover); }
.btn-save:disabled {
    background: rgba(var(--info-rgb), 0.18);
    color: var(--text-dim);
    cursor: not-allowed;
}
/* 작은 버튼 — 표 줄 안·새로고침·보조 동작 (.btn과 같이: class="btn btn-sm"). .btn.btn-sm은 휴대폰 .btn 여백 규칙보다 앞서게 */
.btn-sm,
.btn.btn-sm { padding: 5px 10px; font-size: var(--fs-sm); }

/* 테이블 */
table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-sub);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-dim);
    font-size: 0.9rem;
    vertical-align: middle;
}
tr:hover td { background: var(--bg-elev); }
tr.dragging { opacity: 0.35; }
.seq-input::-webkit-inner-spin-button,
.seq-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.seq-input { -moz-appearance: textfield; }
.drag-handle {
    cursor: grab;
    color: rgba(var(--fg-rgb), 0.3);
    text-align: center;
    user-select: none;
    font-size: 1rem;
    letter-spacing: -1px;
}
.drag-handle:active { cursor: grabbing; }
td input {
    width: 100%;
    padding: 4px 8px;
    background: var(--border);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}
td input:focus {
    outline: none;
    border-color: var(--brand);
}
.actions { display: flex; gap: 6px; }

.empty {
    color: var(--text-dim);
    text-align: center;
    padding: 32px;
}
.error {
    color: var(--danger);
    text-align: center;
    padding: 32px;
}

/* 토스트 */
/* 대리 모드 띠 아래로 내리고(R33-16), 한봇 도우미 패널(9990)·대리 모드 띠(10000)·확인 창(2000)보다 위에 그린다 —
   PC에서 도우미 패널이 펼쳐져 있으면 두 번째 알림부터 패널 밑에 깔려 안 보였다 (R33-15) */
.toast-container {
    position: fixed;
    top: calc(var(--banner-h, 0px) + 20px);
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: var(--z-toast);
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    min-width: 220px;
    max-width: 340px;
    animation: toast-in 0.2s ease;
    border-left: 3px solid;
    box-shadow: var(--shadow-1);
}
.toast.success { background: color-mix(in srgb, var(--ok) 14%, var(--bg-elev)); border-color: var(--ok); color: var(--ok); }
.toast.error   { background: color-mix(in srgb, var(--danger) 14%, var(--bg-elev)); border-color: var(--danger); color: var(--danger); }
.toast.info    { background: color-mix(in srgb, var(--info) 14%, var(--bg-elev)); border-color: var(--info); color: var(--info-soft); }
/* 오류 토스트 닫기 (header 공용 toast — 오류만) */
.toast-close {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 6px;
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    color: inherit;
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
}
.toast-close:hover { opacity: 1; background: rgba(var(--fg-rgb), 0.08); }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* 휴대폰: 옆에서 밀려 들어오면 들어오는 동안 화면 오른쪽 밖으로 16px 넘친다 — 위에서 내려오게 */
@keyframes toast-in-y {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(16px); }
}

/* 확인 모달 */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    animation: fade-in 0.15s ease;
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px 24px;
    min-width: 280px;
    text-align: center;
    box-shadow: var(--shadow-2);
}
/* pre-line: showConfirm/showPrompt 호출 다수가 \n 줄바꿈을 쓰는데 textContent라 한 줄로 뭉개지던 것 정정 */
.modal p { font-size: 1rem; color: var(--text-main); margin-bottom: 24px; line-height: 1.5; white-space: pre-line; }
.modal .input {
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    padding: 8px 12px;
    outline: none;
    box-sizing: border-box;
}
.modal .input:focus { border-color: var(--brand); }
.modal .input::placeholder { color: var(--text-dim); }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.btn-cancel { background: var(--border); color: var(--text-sub); }
.btn-cancel:hover { background: var(--border-strong); color: var(--text-main); }

/* ───────── 스트리머 변경 모달 (viewer-header.js) ───────── */
.vs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: var(--z-sheet);
    display: none;
    align-items: center;
    justify-content: center;
    animation: fade-in 0.15s ease;
}
.vs-overlay.open { display: flex; }
.vs-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 16px;
    width: 360px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}
.vs-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.vs-sub { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 14px; }
.vs-search {
    width: 100%;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    padding: 9px 12px;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.vs-search:focus { border-color: var(--brand); }
.vs-list {
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-dim);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.vs-item:hover { border-color: var(--brand); background: var(--brand-tint); }
.vs-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-input);
    flex-shrink: 0;
}
.vs-name { font-size: 0.9rem; color: var(--text-main); flex: 1; }
/* MAX 스트리머 — 이름 옆 초록 체크 (대시보드 .card-ref-mark와 같은 모양) */
.vs-max { display: inline-flex; flex-shrink: 0; color: var(--ok); line-height: 0; }
.vs-max svg { display: block; width: 15px; height: 15px; }
.vs-empty { color: var(--text-dim); font-size: 0.83rem; text-align: center; padding: 20px 0; }
.vs-recent-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    padding: 2px 2px 6px;
    letter-spacing: 0.04em;
}
.vs-actions { display: flex; margin-top: 14px; }
.vs-cancel {
    width: 100%;
    padding: 10px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    cursor: pointer;
}
.vs-cancel:hover { border-color: var(--border-strong); color: var(--text-sub); }

/* ───────── 화면 설정 창 (display-settings.js — 화면 색·글자·줄 간격·본문 폭·글꼴, 틀은 위 .vs-overlay/.vs-box) ───────── */
.ds-box { width: 560px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; outline: none; }
.ds-label { font-size: 0.82rem; font-weight: 700; color: var(--text-sub); margin: 16px 0 8px; }
.ds-seg { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; }
.ds-note { margin-top: 6px; font-size: 0.72rem; color: var(--text-dim); }
.ds-opt,
.ds-font {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-sub);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ds-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 9px 4px; font-family: inherit; font-size: 0.86rem; word-break: keep-all; }
.ds-opt small { font-size: 0.7rem; color: var(--text-dim); }
.ds-font { padding: 10px 8px; font-size: 0.98rem; line-height: 1.3; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.ds-opt:hover,
.ds-font:hover { border-color: var(--border-strong); color: var(--text-main); }
.ds-opt[aria-pressed="true"],
.ds-font[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--text-main); }
.ds-opt[aria-pressed="true"] small { color: var(--brand); }
.ds-group-label { font-size: 0.72rem; color: var(--text-dim); margin: 10px 0 6px; }
.ds-font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.ds-sample {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 0.92rem;
    line-height: 1.6;
}
.ds-sample p { margin: 0; }
.ds-sample p + p { margin-top: 4px; color: var(--text-sub); }
.ds-actions { display: flex; gap: 8px; margin-top: 16px; }
.ds-actions > * { flex: 1; padding: 10px; }
@media (max-width: 640px) {
    .ds-box { padding: 18px 16px 14px; }
    .ds-seg[style*="--n:4"],
    .ds-font-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 컨트롤 버튼 (아웃라인 스타일 — 실시간 제어용) */
.ctrl-btn { padding: 7px 14px; font-family: var(--font-sans); font-size: 0.82rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-sub); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.ctrl-btn:hover { border-color: var(--brand); color: var(--brand); }
.ctrl-btn.primary { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.ctrl-btn.primary:hover { background: rgba(var(--brand-rgb),0.14); }
.ctrl-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.ctrl-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ───────── 공용 탭 버튼 ───────── */
/* flex-wrap: 좁은 화면에서 탭이 많으면 화면 밖으로 밀려나 가로 스크롤이 생기던 것 — 넘칠 때만 다음 줄로 */
.tab-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.tab-btn {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}
.tab-btn.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 700; }
.tab-btn:hover:not(.active) { color: var(--text-sub); border-color: var(--border-strong); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ───────── 적용 플랫폼 칩 (public/js/platform-chips.js — 기능마다 플랫폼 켜기/끄기·항목마다 보낼 플랫폼, 2026-10-07) ───────── */
/* 정기 메시지 '보낼 플랫폼' 칩을 공용으로 꺼냄 — 작은 탭 모양, 켬 = .active + aria-pressed. 아이콘은 HbPf.badge(공식 파일 그대로)
 * 줄: <div class="pf-row" data-feature="키"> (자동) · picker()가 채우는 칸(.pf-pick). 연결한 플랫폼이 하나뿐이면 hidden */
.pf-row[data-feature], .pf-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 12px; }
.pf-row[data-feature]:not(.pf-row-on), .pf-row[data-feature][hidden], .pf-pick[hidden] { display: none; }
.pf-row-label { font-size: 0.83rem; color: var(--text-dim); white-space: nowrap; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tab-btn.pf-chip { padding: 4px 12px; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 0; }
.pf-chip small { margin-left: 5px; font-size: 0.68rem; font-weight: 400; }
.pf-chip .pf-chip-state { display: none; }
.pf-chip.reply-off, .pf-chip.link-off { opacity: 0.6; }
.pf-chip.is-locked { opacity: 0.45; cursor: not-allowed; }
.pf-chip.is-locked:hover:not(.active) { color: var(--text-dim); border-color: var(--border); }
.pf-chip[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.pf-chip:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.pf-row[data-feature] .help-tip { margin-left: 0; }

/* ───────── 공용 빈 상태 ───────── */
.empty-state { text-align: center; padding: 36px; color: var(--text-dim); font-size: 0.9rem; }
/* 카드 격자 안에 빈 안내가 들어가면 한 칸에 찌그러지던 것 — 격자 한 줄 전체를 쓴다(격자가 아니면 무시됨) */
.empty-state { grid-column: 1 / -1; }

/* ───────── 공용 페이지네이션 (목록 페이지 공통 — 페이지 로컬 정의 대체) ───────── */
.pagination,
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
.page-btn {
    min-width: 30px; padding: 4px 8px; font-size: 0.8rem; border-radius: var(--radius-sm); cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-sub);
    font-family: var(--font-sans); transition: background 0.12s, border-color 0.12s;
}
.page-btn.active { background: rgba(var(--brand-rgb), 0.12); border-color: rgba(var(--brand-rgb), 0.4); color: var(--brand); }
.page-btn:hover:not(.active) { background: var(--border-dim); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-ellipsis { color: var(--text-dim); padding: 0 4px; align-self: center; }

/* ───────── 공용 목록 툴바 (검색·정렬·건수·내보내기) ───────── */
.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.list-toolbar .tab-bar { margin-bottom: 0; }
.list-toolbar .list-count { font-size: 0.78rem; color: var(--text-dim); margin-left: auto; white-space: nowrap; }
.list-toolbar select { padding: 6px 10px; font-size: 0.82rem; }

/* ───────── 공용 상태 칩 (봇 연결·방송 여부 등 — 대시보드·봇 기본 설정 공용) ───────── */
.status-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.8rem; font-weight: 600; color: var(--text-sub);
    border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; white-space: nowrap;
}
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.status-chip.ok { color: var(--ok); border-color: rgba(var(--ok-rgb), 0.3); }
.status-chip.ok .dot { background: var(--ok); box-shadow: 0 0 6px rgba(var(--ok-rgb), 0.4); }
.status-chip.bad { color: var(--danger); border-color: rgba(var(--danger-rgb), 0.3); }
.status-chip.bad .dot { background: var(--danger); }
.status-chip.live { color: var(--danger); border-color: rgba(var(--danger-rgb), 0.3); }
.status-chip.live .dot { background: var(--danger); animation: status-chip-blink 1.2s infinite; }
.status-chip a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@keyframes status-chip-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ───────── 공용 설정 행 (제목·설명 좌 / 컨트롤 우) ───────── */
.setting-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0; border-bottom: 1px solid var(--border-dim);
}
.setting-row:first-child { padding-top: 0; }
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-row-text { min-width: 0; }
.setting-title { font-size: 0.92rem; font-weight: 600; color: var(--text-main); }
.setting-desc { font-size: 0.8rem; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.setting-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
@media (max-width: 640px) {
    .setting-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .setting-actions { width: 100%; justify-content: flex-start; }
}

/* ───────── 공용 토글 스위치 (.game-toggle — label > input + .game-toggle-track > .game-toggle-knob) ─────────
 * 2026-10-24: 체크박스를 display:none 대신 '보이지 않게만' 숨겨 Tab·Space로 켜고 끌 수 있게, 켜짐 모양은 :checked로 CSS가 그린다.
 * 페이지 JS가 칠하던 인라인 값(바탕 --brand·손잡이 #fff·left 21px)과 같은 값이라 둘이 함께 있어도 어긋나지 않는다.
 * 켜짐 색 바꾸기: .game-toggle.tone-purple / .tone-info (또는 --toggle-on) */
.game-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
/* 보이는 크기는 그대로, 누르는 영역만 넓게 */
.game-toggle::after { content: ""; position: absolute; inset: -8px -4px; }
.game-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.game-toggle.tone-purple { --toggle-on: var(--purple); }
.game-toggle.tone-info { --toggle-on: var(--info); }
.game-toggle-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: var(--border-strong);
    border-radius: 11px;
    transition: 0.2s;
}
.game-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: 0.2s;
}
.game-toggle input:checked + .game-toggle-track { background: var(--toggle-on, var(--brand)); }
.game-toggle input:checked + .game-toggle-track .game-toggle-knob { left: 21px; background: #fff; }
.game-toggle input:focus-visible + .game-toggle-track { outline: 2px solid var(--brand); outline-offset: 2px; }
.game-toggle input:disabled + .game-toggle-track { opacity: 0.45; cursor: not-allowed; }

/* ───────── 공용 토글 스위치 (CSS :checked) ───────── */
.css-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; display: inline-block; }
/* 보이는 크기는 그대로, 누르는 영역만 넓게(터치 기준 38px) */
.css-toggle::after { content: ""; position: absolute; inset: -8px -4px; }
.css-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.css-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 22px;
    cursor: pointer;
    transition: 0.2s;
}
.css-toggle-slider:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: var(--text-dim);
    border-radius: 50%;
    transition: 0.2s;
}
.css-toggle input:checked + .css-toggle-slider { background: rgba(var(--brand-rgb), 0.25); }
.css-toggle input:checked + .css-toggle-slider:before { transform: translateX(18px); background: var(--brand); }
/* 잠긴 스위치(조건이 안 맞아 못 바꾸는 상태)는 흐리게 — 예전엔 켜짐/꺼짐과 구분되지 않았다 */
.css-toggle input:disabled + .css-toggle-slider { opacity: 0.45; cursor: not-allowed; }
.css-toggle input:focus-visible + .css-toggle-slider { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ───────── 게임 설정 공용 ───────── */
.game-setting-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.game-input {
    background: var(--bg-base);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    padding: 7px 10px;
    outline: none;
    width: 100px;
}
.game-input:focus { border-color: var(--brand); }
/* 잠긴 칸(조건이 안 맞거나 불러오기 실패)이 평소 칸과 똑같아 보이던 것 */
.game-input:disabled { opacity: 0.5; cursor: not-allowed; }
.game-label { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; }
.game-setting-row:last-child { margin-bottom: 0; }

/* ───────── 게임 ON/OFF 카드 ───────── */
.free-mode-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 14px;
}
.free-mode-card.theme-gold { background: color-mix(in srgb, var(--rarity-legendary) 7%, var(--bg-card)); border-color: color-mix(in srgb, var(--rarity-legendary) 22%, var(--bg-card)); }
.free-mode-card.theme-purple { background: color-mix(in srgb, var(--rarity-epic) 7%, var(--bg-card)); border-color: color-mix(in srgb, var(--rarity-epic) 22%, var(--bg-card)); }
.free-mode-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.free-mode-title { font-size: 0.92rem; font-weight: bold; color: var(--text-main); }
.feature-sub { font-size: 0.78rem; color: var(--text-dim); font-weight: 400; }
.toggle-wrap { display: flex; align-items: center; gap: 8px; }
.toggle-label { font-size: 0.82rem; color: var(--text-sub); }
.toggle-label.on, .toggle-label.is-on { color: var(--ok); }

/* ───────── 카드 제목/설명 ───────── */
.feature-title { font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.feature-desc { font-size: 0.83rem; color: var(--text-sub); margin-bottom: 16px; line-height: 1.6; }

/* ───────── 인라인 코드 조각 (치환 키워드·명령어 예시 표기) ───────── */
.ph-code {
    background: var(--bg-input); border: 1px solid var(--border-dim); padding: 1px 6px;
    border-radius: var(--radius-xs); color: var(--text-sub); font-size: 0.8rem;
    /* <code>의 기본 고정폭 글꼴은 한글을 "! 미 션"처럼 띄엄띄엄 보이게 한다 */
    font-family: var(--font-sans);
}

/* ───────── 커맨드 섹션/노트 ───────── */
.cmd-section-label { font-size: 0.72rem; color: var(--text-dim); font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.cmd-note { font-size: 0.78rem; color: var(--text-dim); background: var(--bg-base); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 8px 12px; line-height: 1.6; margin-top: 4px; }

/* ───────── 통계 테이블 ───────── */
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.stats-table th { text-align: left; color: var(--text-dim); font-weight: 600; font-size: 0.72rem; padding: 4px 10px 8px; border-bottom: 1px solid var(--border-dim); }
.stats-table td { padding: 7px 10px; border-bottom: 1px solid var(--bg-elev); }
.stats-table tr:last-child td { border-bottom: none; }

/* ───────── 검색 입력 ───────── */
.search-input {
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    width: 180px;
    outline: none;
}
.search-input:focus { border-color: var(--brand); }
.search-input::placeholder { color: var(--text-dim); }

/* 테이블 래퍼 (가로 스크롤) */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═════════ 공용 부품 승격 (2026-10-24 고도화 FC — 페이지마다 복사돼 있던 모양을 한 벌로) ═════════
 * 페이지 <style>은 이 파일 뒤에 오므로 같은 이름을 페이지가 다시 정의하면 페이지 값이 이긴다(옮기는 동안 모양 유지).
 * 문맥 규칙은 :where()로 감싸 특이성을 클래스 하나(0,1,0)로 맞췄다 — 페이지의 한 클래스 규칙이 늘 우선. */

/* 페이지 제목 — 본문 맨 위 제목 줄. <div class="page-head"><div><h1 class="page-title">…</h1><p class="page-sub">…</p></div> [오른쪽 버튼]</div>
 * 구역 이름은 기존 .section-label(작은 흐린 글씨) 그대로 — 제목과 구역을 크기로 나눈다 */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-5);
}
.page-head > :first-child { min-width: 0; }
.page-title { font-size: var(--fs-title); font-weight: 800; color: var(--text-main); }
.page-sub { font-size: var(--fs-meta); color: var(--text-sub); }
:where(.page-head) .page-sub { display: block; margin-top: var(--sp-1); line-height: 1.6; max-width: var(--read-max); }

/* 저장 안 한 변경 표시 — 평소 숨김, .show일 때 보임 (HbUi.cfgForm dirtyNote가 토글) */
.dirty-note { display: none; font-size: var(--fs-sm); color: var(--warn); }
.dirty-note.show { display: inline; }

/* 폼 한 줄 — 라벨·입력칸·버튼을 한 줄에, 좁으면 다음 줄로 */
.form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) 10px;
    margin-bottom: 10px;
}
.form-row:last-child { margin-bottom: 0; }
.form-label { font-size: 0.83rem; color: var(--text-sub); }
:where(.form-row) > .form-label { flex-shrink: 0; }
.form-input {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    padding: 7px 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--brand); }
.form-input::placeholder { color: var(--text-dim); }
:where(.form-row) > .form-input { flex: 1 1 12rem; min-width: 0; max-width: var(--form-max); }
.form-hint { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.55; }

/* 기능 배지 — 제목 옆 '치지직 전용'·'MAX' 같은 작은 알약. 색 변형 .tone-purple / .tone-danger / .tone-mute */
.feature-badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--brand-rgb), 0.1);
    border: 1px solid rgba(var(--brand-rgb), 0.25);
    color: var(--brand);
    white-space: nowrap;
}
.feature-badge.tone-purple { background: rgba(var(--purple-rgb), 0.1); border-color: rgba(var(--purple-rgb), 0.25); color: var(--purple-soft); }
.feature-badge.tone-danger { background: rgba(var(--danger-rgb), 0.1); border-color: rgba(var(--danger-rgb), 0.25); color: var(--danger); }
.feature-badge.tone-mute { background: var(--bg-elev); border-color: var(--border-strong); color: var(--text-dim); }

/* 상태 배지 — 표 칸 안 '승인됨'·'대기'·'끊김' 같은 뜻 있는 알약. 뜻 색: ok 성공·켜짐 / warn 주의·대기 / info 정보 / muted 꺼짐·없음 / danger 오류·거부 */
.badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}
.badge-ok     { background: rgba(var(--ok-rgb), 0.13); color: var(--ok); border: 1px solid rgba(var(--ok-rgb), 0.3); }
.badge-warn   { background: rgba(var(--warn-rgb), 0.13); color: var(--warn); border: 1px solid rgba(var(--warn-rgb), 0.3); }
.badge-info   { background: rgba(var(--info-rgb), 0.12); color: var(--info-soft); border: 1px solid rgba(var(--info-rgb), 0.28); }
.badge-muted  { background: rgba(var(--fg-rgb), 0.06); color: var(--text-dim); border: 1px solid rgba(var(--fg-rgb), 0.14); }
.badge-danger { background: rgba(var(--danger-rgb), 0.12); color: var(--danger); border: 1px solid rgba(var(--danger-rgb), 0.28); }

/* 목록 표 — 머리글·줄 모양은 위 전역 table 규칙, 숫자 칸은 .num으로 오른쪽 정렬 */
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
:where(.data-table) :is(th, td).num { text-align: right; }

/* 거르기 알약 — 목록 위 '전체·승인됨·대기' 같은 보기 고르기 (탭 .tab-btn보다 가벼운 모양) */
.filter-tab {
    padding: 5px 14px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-sub);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-tab:hover:not(.active) { border-color: var(--border-strong); color: var(--text-main); }
.filter-tab.active { background: var(--brand-tint); border-color: rgba(var(--brand-rgb), 0.45); color: var(--brand); }

/* 숫자 요약 카드 — <div class="kpi-grid"><div class="kpi-card"><div class="kpi-value">…</div><div class="kpi-label">…</div></div></div> */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 10px;
    margin-bottom: var(--sp-5);
}
.kpi-card {
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.kpi-value { font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: var(--fs-xs); color: var(--text-dim); }

/* 불러오기 실패 상자 — HbUi.cfgForm·loadInto가 넣는다: <div class="load-error"><span>…</span><button class="btn btn-sm">다시 불러오기</button></div> */
.load-error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding: 12px 16px;
    margin-bottom: 14px;
    background: rgba(var(--danger-rgb), 0.07);
    border: 1px solid rgba(var(--danger-rgb), 0.3);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: var(--fs-meta);
    line-height: 1.55;
}
.load-error > span { flex: 1 1 14rem; min-width: 0; }
.load-error b { color: var(--danger); }

/* 끌어서 순서 바꾸기 (HbUi.sortable) — 끄는 칸·빈자리·터치용 ▲▼ */
.hb-sort-dragging { opacity: 0.6; outline: 2px dashed var(--brand); outline-offset: 2px; }
.hb-sort-ph { border: 1px dashed var(--border-strong); border-radius: var(--radius); background: rgba(var(--fg-rgb), 0.03); }
.hb-sort-arrows { display: inline-flex; gap: var(--sp-1); flex-shrink: 0; }
.hb-sort-arrows > button {
    min-width: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elev);
    color: var(--text-sub);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.hb-sort-arrows > button:hover { border-color: var(--brand); color: var(--brand); }

/* 공용 창 — HbModal: <div class="hb-modal-backdrop"><div class="hb-modal" role="dialog"><div class="hb-modal-title">…</div><div class="hb-modal-body">…</div><div class="hb-modal-actions">…</div></div></div>
 * 크기 .hb-modal.size-sm(24rem) / 기본(32rem) / .size-lg(48rem) */
.hb-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(0, 0, 0, 0.6);
    animation: fade-in 0.15s ease;
}
.hb-modal {
    width: min(100%, 32rem);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 22px 22px 18px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    color: var(--text-main);
    text-align: left;
}
.hb-modal.size-sm { width: min(100%, 24rem); }
.hb-modal.size-lg { width: min(100%, 48rem); }
.hb-modal-title { font-size: 1.05rem; font-weight: 700; margin-bottom: var(--sp-2); }
.hb-modal-body { font-size: var(--fs-body); color: var(--text-sub); line-height: 1.65; overflow-wrap: anywhere; }
.hb-modal-body.is-text { white-space: pre-line; } /* 글만 넣을 때 줄바꿈 문자를 살림 */
.hb-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: 18px; }

/* 앱 설치 띠 (header.js·viewer-header.js — #pwa-install-banner). 쌓임은 공지 팝업·확인 창보다 아래 */
.pwa-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: var(--z-pwa);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 10px 14px;
    background: var(--bg-elev);
    border: 1px solid rgba(var(--brand-rgb), 0.35);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    /* left:50%라 그냥 두면 폭이 화면 반으로 잡힘 — 내용 폭(최대 화면-24px)으로 */
    width: max-content;
}
/* 휴대폰·글자 확대 때 닫기 버튼이 화면 밖으로 나가지 않게 — 문구는 줄바꿈, 버튼은 줄이지 않음
   (머리글이 넣는 인라인 white-space:nowrap·padding을 이겨야 해서 !important) */
.pwa-bar > span { white-space: normal !important; min-width: 0; flex: 1 1 auto; word-break: keep-all; line-height: 1.4; }
.pwa-bar > button { flex-shrink: 0; }
@media (max-width: 640px) {
    .pwa-bar { gap: 6px; padding: 8px 10px; }
    .pwa-bar > button { padding: 6px 10px !important; }
}
/* 게임 화면(header data-shell="games"): 판 가운데를 가리지 않게 왼쪽 아래 작은 띠 — 오른쪽 아래 전체 채팅 단추(.gc-fab·.chat-fab) 자리는 비워 둔다 */
.pwa-bar.pwa-bar--game { left: 12px; transform: none; max-width: min(320px, calc(100vw - 150px)); gap: 6px; padding: 6px 8px 6px 12px; opacity: 0.94; }
.pwa-bar.pwa-bar--game > span { font-size: 0.76rem !important; }
.pwa-bar.pwa-bar--game > button { min-height: 32px !important; padding: 5px 10px !important; font-size: 0.76rem !important; }

/* ───────── 스크롤바 ───────── */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--bg-base);
}
/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-sub);
}
::-webkit-scrollbar-corner {
    background: var(--bg-base);
}

/* ───────── 햄버거 버튼 ───────── */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s;
}
.nav-toggle:hover { color: var(--text-main); }

/* ───────── 모션 최소화 (품질 바닥선) ───────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ───────── 반응형 — PC·태블릿·휴대폰 3단 ─────────
 * PC(1025px~)       : 왼쪽 고정 사이드바 200px (위 기본 규칙)
 * 태블릿·휴대폰(~1024px): 사이드바 대신 상단 고정 바(48px) + 왼쪽에서 밀려 나오는 서랍 메뉴.
 *                      상단 바에는 메뉴 버튼·로고·알림 종·도우미만 두고, 계정 이름·전환·로그아웃·앱 설치는
 *                      서랍 맨 위 '계정' 칸(.nav-account — header.js·viewer-header.js가 채움)으로 모은다.
 *                      (예전엔 640px 이하에서만 접혀 태블릿이 200px 사이드바에 본문을 빼앗기고,
 *                       휴대폰 상단 바는 링크 5~6개가 한 줄에 몰려 화면 밖으로 밀려났다)
 * 휴대폰(~640px)    : 본문 한 줄 배치(설정 1열·표→카드·버튼 40px·입력 16px) — 아래 640px 블록
 */
.nav-backdrop,
.nav-account { display: none; }
@media (max-width: 1024px) {
    :root { --topbar-h: 48px; }
    body { padding-left: 0; padding-bottom: var(--pending-h, 0px); }
    header {
        position: sticky;
        top: var(--banner-h, 0px);
        width: 100%;
        height: 48px;
        flex-direction: row;
        align-items: center;
        padding: 0 12px 0 4px;
        gap: 2px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow: visible;
    }
    /* 서랍이 열려 있는 동안은 떠 있는 채팅·설치 띠보다 위로 */
    header.nav-is-open { z-index: var(--z-drawer-open); }
    header h1 {
        order: 2;
        font-size: 1rem;
        padding: 0 6px;
        border-bottom: none;
        flex-shrink: 0;
    }
    .nav-toggle { order: 1; display: flex; width: 40px; height: 40px; }
    .header-right {
        order: 3;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: auto;
        padding: 0;
        border-top: none;
        gap: 14px;
        min-width: 0;
    }
    .header-right a { font-size: 0.85rem; }
    /* 상단 바에 남기는 것: 알림 종·도우미. 나머지(계정 줄 포함)는 서랍 '계정' 칸에 같은 버튼으로 나온다 */
    .header-right > :not(#btn-noti-bell):not(#btn-assistant):not(.hr-keep) { display: none !important; }
    /* 비로그인 시청자: '치지직 로그인'은 상단 바에도 알약 버튼으로 남긴다 */
    .header-right .hr-login {
        border: 1px solid var(--brand-glow);
        color: var(--brand);
        border-radius: 999px;
        padding: 5px 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* 서랍 메뉴 */
    .nav-tabs {
        position: fixed;
        top: calc(var(--banner-h, 0px) + 48px);
        left: 0;
        bottom: 0;
        width: min(340px, 88vw);
        flex-direction: column;
        background: var(--bg-elev);
        border-right: 1px solid var(--border);
        z-index: 2;
        overflow-x: hidden;
        overflow-y: auto;
        /* 메뉴 끝까지 굴려도 뒤 페이지가 따라 스크롤되지 않게 */
        overscroll-behavior: contain;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0.2s;
        box-shadow: var(--shadow-2);
    }
    .nav-tabs.nav-open { transform: none; visibility: visible; }
    /* 서랍 바깥 어둡게 — 눌러서 닫기 (밑에 있는 버튼이 같이 눌리지 않게 가로막는다) */
    .nav-backdrop {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: calc(var(--banner-h, 0px) + 48px);
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
    }
    .nav-backdrop.show { opacity: 1; visibility: visible; }
    html.nav-locked, html.nav-locked body { overflow: hidden; }

    /* 서랍 맨 위 계정 칸 */
    .nav-account {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 14px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-card);
        flex-shrink: 0;
    }
    .nav-account-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .nav-account-line { font-size: 0.82rem; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-account-line:first-child { font-size: 0.9rem; font-weight: 700; color: var(--brand); }
    /* 버튼은 두 칸씩 — 로그아웃·로그인은 한 줄 전체(.wide), PC 계정 메뉴와 같은 배치 */
    .nav-account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .nav-account-actions button.wide { grid-column: 1 / -1; }
    .nav-account-actions button {
        min-width: 0;
        min-height: 38px;
        padding: 8px 12px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        background: var(--bg-elev);
        color: var(--text-sub);
        font-family: var(--font-sans);
        font-size: 0.84rem;
        cursor: pointer;
        white-space: nowrap;
    }
    .nav-account-actions button:hover { color: var(--text-main); border-color: var(--brand); }
    .nav-account-actions button.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }

    .nav-tab {
        padding: 13px 20px;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--border-dim);
        border-left: 3px solid transparent;
        white-space: nowrap;
        background: none;
    }
    .nav-tab:last-child { border-bottom: none; }
    .nav-tab.active {
        border-left-color: var(--brand);
        border-bottom-color: transparent;
        background: var(--brand-tint);
    }

    /* 서랍 검색창 */
    .nav-search { padding: 10px 14px 6px; }
    .nav-search input { font-size: 0.9rem; padding: 9px 12px; }

    /* 서랍 아코디언 */
    .nav-group-header {
        padding: 13px 16px 13px 20px;
        font-size: 0.82rem;
        margin-top: 0;
        border-bottom: 1px solid var(--border-dim);
    }
    .nav-group-items .nav-tab {
        padding-left: 32px;
        border-bottom: 1px solid var(--bg-input);
    }
    .nav-group-items .nav-tab:last-child { border-bottom: 1px solid var(--border-dim); }
    /* 서랍 구역 제목 */
    .nav-section { padding: 16px 16px 6px 23px; font-size: 0.74rem; }
    .nav-section + .nav-group .nav-group-header { margin-top: 0; }
    /* 즐겨찾기 별·그룹 고정 핀: 터치 화면에서도 누르기 쉽게 */
    .nav-fav-btn { right: 10px; padding: 6px; }
    .nav-pin-btn { padding: 6px; opacity: 0.6; }
    .fav-folder-edit { padding: 6px; opacity: 0.6; }
}

/* 태블릿·휴대폰 — 게임 설정 줄의 라벨은 PC에선 한 줄 고정(nowrap)이지만, 좁은 화면에서 긴 라벨이
 * 화면 밖으로 밀려 페이지 전체가 좌우로 흔들리던 것(기준선 검사 10개 페이지) — 띄어쓰기 단위로 줄바꿈 */
@media (max-width: 1024px) {
    .game-label { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
    .game-setting-row > * { min-width: 0; }
    .toggle-wrap { flex-wrap: wrap; min-width: 0; }
}

@media (max-width: 640px) {
    /* 컨테이너 */
    .container { max-width: 100%; padding: 20px 12px; }

    /* 설정 그리드: 2컬럼 → 1컬럼 */
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 6px 0;
        padding: 16px;
    }
    .settings-grid label { margin-top: 10px; }
    .settings-grid label:first-child { margin-top: 0; }

    /* 추가 폼: 명령어·유형·버튼 첫 줄, 응답·쿨타임 둘째 줄 */
    .add-form {
        grid-template-columns: 1fr auto auto;
    }
    #new-msg      { grid-column: 1;    grid-row: 1; }
    #new-intf     { grid-column: 2;    grid-row: 1; }
    .add-form > .btn-add { grid-column: 3; grid-row: 1; }
    #new-result   { grid-column: 1 / 3; grid-row: 2; }
    #new-cooldown { grid-column: 3;    grid-row: 2; }

    /* 버튼 터치 영역 */
    .btn { min-height: 40px; padding: 8px 12px; }

    /* 토스트 */
    .toast-container { right: 10px; left: 10px; overflow-x: clip; } /* 닫힐 때 옆으로 빠지는 움직임도 화면 밖으로 안 넘치게 */
    .toast { min-width: unset; max-width: unset; width: 100%; animation-name: toast-in-y; }
    .toast > span { min-width: 0; overflow-wrap: anywhere; }

    /* 모달 — 모바일에서 거의 전체화면 (여유 8px만) */
    .modal { min-width: unset; width: calc(100vw - 16px); max-width: calc(100vw - 16px); padding: 20px 16px 16px; max-height: calc(100vh - 32px); overflow-y: auto; }

    /* 커맨드 테이블 → 카드 레이아웃 */
    /* 커맨드 관리 표 전용 카드 배치 — 예전엔 .table-wrap 안의 모든 표가 머리글을 잃고 칸이 이어 붙어 화면 밖으로 밀렸다 */
    .table-wrap:has(tr[data-msg]) table,
    .table-wrap:has(tr[data-msg]) tbody { display: block; }
    .table-wrap:has(tr[data-msg]) thead { display: none; }

    .table-wrap tr[data-msg] {
        display: grid;
        grid-template-columns: 20px auto 1fr auto auto;
        grid-template-rows: auto auto auto;
        column-gap: 6px;
        row-gap: 6px;
        padding: 10px 4px;
        border-bottom: 1px solid var(--border-dim);
        align-items: center;
    }
    .table-wrap tr[data-msg] td { padding: 0; border: none; background: none !important; }

    /* 드래그 핸들 */
    .table-wrap tr[data-msg] td:nth-child(1) { grid-column: 1; grid-row: 1; }
    /* 인식 순위 */
    .table-wrap tr[data-msg] td:nth-child(2) { grid-column: 2; grid-row: 1; }
    /* 명령어 */
    .table-wrap tr[data-msg] td:nth-child(3) { grid-column: 3; grid-row: 1; }
    /* 별칭 — 전체 너비, 두 번째 줄 */
    .table-wrap tr[data-msg] td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; }
    /* 응답 — 전체 너비, 세 번째 줄 */
    .table-wrap tr[data-msg] td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
    /* 유형 */
    .table-wrap tr[data-msg] td:nth-child(6) { grid-column: 4; grid-row: 1; }
    /* 쿨타임 — 숨기기 (데스크톱에서만) */
    .table-wrap tr[data-msg] td:nth-child(7) { display: none; }
    /* 삭제 */
    .table-wrap tr[data-msg] td:nth-child(8) { grid-column: 5; grid-row: 1; }

    /* 별칭/응답 입력란 강조 */
    .table-wrap tr[data-msg] td:nth-child(4) input,
    .table-wrap tr[data-msg] td:nth-child(5) input {
        background: var(--bg-elev);
        border-color: var(--border);
        font-size: 0.88rem;
        padding: 6px 10px;
    }

    /* 유형 셀렉트 축약 */
    .table-wrap .intf-select { font-size: 0.78rem; padding: 4px 4px; }

    /* 모바일: 테이블 가로 스크롤 */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 모바일: 폼 입력 터치 최적화 */
    input, select, textarea { font-size: 16px !important; }

    /* 비어있음 행 */
    .table-wrap:has(tr[data-msg]) tr td.empty { display: block; }

    /* 공용 카드 패딩 축소 */
    .feature-card { padding: 16px; }
    .section-card { padding: 14px 16px; }

    /* OBS URL 행 */
    .obs-row { padding: 8px 10px; gap: 8px; }
    .obs-url  { font-size: 0.78rem; }

    /* 컬러 피커 터치 영역 */
    input[type="color"] {
        width: 40px; height: 34px; padding: 2px; cursor: pointer; border-radius: 4px;
    }

    /* 레인지 슬라이더 터치 높이 */
    input[type="range"] { height: 24px; cursor: pointer; }

    /* 긴 모달 스크롤 */
    .modal { max-height: calc(100vh - 48px); overflow-y: auto; }

    /* settings-grid 자식 min-width 방지 오버플로 */
    .settings-grid > * { min-width: 0; }

    /* section-label 간격 축소 */
    .section-label { margin-top: 20px; padding-top: 16px; }

    /* 기능 ON/OFF 카드 머리글: 긴 제목과 켜기 스위치가 한 줄에서 엇갈리지 않게 — 제목이 길면 스위치가 다음 줄로 */
    .free-mode-header { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
    .free-mode-title { flex: 1 1 180px; min-width: 0; }

    /* 공용 창 단추는 한 줄에 나눠 넓게 */
    .hb-modal { padding: 20px 16px 16px; }
    .hb-modal-actions > * { flex: 1 1 0; }
}

/* 터치 화면(태블릿·휴대폰) — 손가락 권장 44px. 휴대폰 640px 블록(.btn 40px)보다 뒤에 둬야 이긴다.
 * 탭·쪽 번호·거르기 알약은 40px(줄이 많아 너무 높아지지 않게), 작은 아이콘 단추는 보이는 크기 그대로 누르는 영역만 넓힘 */
@media (pointer: coarse) {
    .btn, .ctrl-btn { min-height: 44px; }
    .tab-btn, .filter-tab { min-height: 40px; }
    .page-btn { min-height: 40px; min-width: 40px; }
    .nav-pin-btn, .fav-folder-edit { position: relative; }
    .nav-fav-btn::after,
    .nav-pin-btn::after,
    .fav-folder-edit::after { content: ""; position: absolute; inset: -10px -8px; }
    .game-toggle::after { inset: -11px -6px; }
    /* 오류 토스트 닫기 — 누르는 칸 44px, 위아래 음수 여백으로 토스트 높이는 그대로 */
    .toast-close { min-width: 44px; min-height: 44px; margin-top: -10px; margin-bottom: -10px; margin-right: -8px; }
}


/* ───────── 풋터 ───────── */
.site-footer {
    border-top: 1px solid var(--bg-input);
    padding: 14px 24px;
    background: var(--bg-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 0;
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-top: 16px;
}
.site-footer a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s;
}
.site-footer a:hover { color: var(--text-sub); }
.footer-links { display: flex; flex-wrap: wrap; }
.footer-links a {
    padding: 0 10px;
    border-right: 1px solid var(--border);
    line-height: 1;
}
.footer-links a:first-child { padding-left: 0; }
.footer-links a:last-child { border-right: none; }
.footer-copy { text-align: center; flex: 1; }
.footer-contact { text-align: right; }
@media (max-width: 640px) {
    .site-footer { flex-direction: column; gap: 8px; }
    .footer-copy, .footer-contact { text-align: left; flex: none; }
}

/* ───────── 모바일 테이블 → 카드 변환 유틸 ───────── */
/* 사용법: <table class="responsive-card">. 각 <td>에 data-label="컬럼명" 속성 부여 시 레이블 자동 표시 */
@media (max-width: 640px) {
    table.responsive-card { display: block; width: 100%; }
    table.responsive-card thead { display: none; }
    table.responsive-card tbody { display: block; }
    table.responsive-card tr {
        display: block;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    table.responsive-card td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border: none;
        font-size: 0.85rem;
        gap: 10px;
    }
    table.responsive-card td::before {
        content: attr(data-label);
        color: var(--text-dim);
        font-weight: 600;
        font-size: 0.78rem;
        flex-shrink: 0;
    }
    table.responsive-card td:empty, table.responsive-card td[data-label=""] { display: none; }
}

/* ───────── MAX 스트리머 혜택 (public/js/max-benefits.js — 대시보드 버튼·지정 안내 창) ───────── */
.mb-open-btn {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: 1px;
    font-family: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.4; color: var(--brand);
    background: rgba(var(--brand-rgb), 0.08); border: 1px solid rgba(var(--brand-rgb), 0.4); border-radius: 999px;
    padding: 2px 10px; cursor: pointer; white-space: nowrap;
}
.mb-open-btn:hover { background: rgba(var(--brand-rgb), 0.16); }
.mb-modal { max-width: 560px; width: calc(100vw - 32px); text-align: left; padding: 24px 22px 18px; }
.mb-modal .mb-body { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 4px; }
.modal p.mb-title { font-weight: 700; font-size: 1.08rem; color: var(--text-main); margin-bottom: 6px; }
.modal p.mb-lead { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 14px; line-height: 1.6; }
.mb-perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-perks li { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; background: rgba(var(--brand-rgb), 0.05); border: 1px solid rgba(var(--brand-rgb), 0.18); }
.mb-perks b { font-size: 0.9rem; color: var(--brand); }
.mb-perks span { font-size: 0.84rem; color: var(--text-sub); line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.modal p.mb-sub, .mb-sub { font-size: 0.88rem; font-weight: 700; color: var(--text-main); margin: 4px 0 8px; }
.mb-sub span { font-size: 0.76rem; font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.mb-table-wrap { overflow-x: auto; }
.mb-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.mb-table th, .mb-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.mb-table thead th { color: var(--text-dim); font-weight: 600; font-size: 0.76rem; }
.mb-table td { color: var(--text-sub); word-break: keep-all; overflow-wrap: anywhere; }
.mb-table td.mb-n, .mb-table td.mb-m, .mb-table thead th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.mb-table td.mb-m { color: var(--brand); font-weight: 700; }
.mb-table tr.mb-group th { padding-top: 12px; color: var(--text-main); font-size: 0.8rem; font-weight: 700; border-bottom-color: var(--border-strong, var(--border)); }
@media (max-width: 640px) {
    .mb-open-btn { min-height: 32px; padding: 4px 14px; margin: 6px 0 0; }
    .mb-modal { width: calc(100vw - 16px); padding: 20px 14px 14px; }
    .mb-table { font-size: 0.78rem; }
    .mb-table th, .mb-table td { padding: 5px 6px; }
}

/* ───────── 한봇 게임즈 상단 바 (2026-10-19) ─────────
 * 게임 페이지 <header data-shell="games"> — header.js·viewer-header.js가 사이드바 대신 게임 메뉴(js/games-catalog.js)를 넣는다.
 * PC(1025px~)만 가로 상단 바로 바꾸고, 태블릿·휴대폰은 기존 상단 바 + 서랍 그대로(서랍 안이 게임 메뉴).
 * --topbar-h를 PC에서도 바 높이로 줘서 페이지의 sticky 탭·스크롤 여백이 바 아래에 붙는다 */
.gx-logo { color: inherit; text-decoration: none; font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: 1.2rem; letter-spacing: 0; }
@media (min-width: 1025px) {
    :root:has(header[data-shell="games"]) { --topbar-h: 56px; }
    body:has(> header[data-shell="games"]) { padding-left: 0; }
    header[data-shell="games"] {
        position: sticky;
        top: var(--banner-h, 0px);
        width: 100%;
        height: 56px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 0 17.75rem 0 20px; /* 오른쪽은 계정 칸(.header-right, 떠 있는 상자) 자리 */
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow: visible;
        box-sizing: border-box;
    }
    header[data-shell="games"] h1 { padding: 0; border-bottom: none; }
    header[data-shell="games"] .nav-toggle { display: none; }
    header[data-shell="games"] .nav-tabs {
        flex-direction: row;
        align-items: center;
        gap: 2px;
        min-width: 0;
        height: 100%;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    header[data-shell="games"] .nav-tabs::-webkit-scrollbar { display: none; }
    header[data-shell="games"] .nav-tab {
        height: 100%;
        padding: 0 11px;
        font-size: 0.95rem;
        border-left: none;
        border-bottom: 2px solid transparent;
        box-sizing: border-box;
    }
    header[data-shell="games"] .nav-tab.active { border-bottom-color: var(--brand); background: none; font-weight: 700; }
    header[data-shell="games"] .nav-sep { flex-shrink: 0; width: 0; height: 18px; margin: 0 6px; border-top: none; border-left: 1px solid var(--border); }
    /* 한봇으로 돌아가기 — PC는 바 위 버튼(.gx-home), 메뉴 줄 끝 칸(.gx-back)은 서랍용이라 숨김 */
    header[data-shell="games"] .gx-back,
    header[data-shell="games"] .nav-sep:has(+ .gx-back) { display: none; }
    header[data-shell="games"] .gx-home {
        flex-shrink: 0;
        margin-left: auto;
        padding: 6px 12px;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        color: var(--text-sub);
        font-size: 0.84rem;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.15s, border-color 0.15s;
    }
    header[data-shell="games"] .gx-home:hover { color: var(--text-main); border-color: var(--brand); }
    /* 계정 칸 — 닫힘: 바 오른쪽 한 줄(도우미·알림 종·계정 줄) / 열림: 같은 자리에서 아래로 펼쳐지는 상자 */
    header[data-shell="games"] .header-right {
        position: absolute;
        top: 8px;
        right: 16px;
        width: 16.25rem;
        flex-wrap: wrap;
        padding: 0;
        border: 1px solid transparent;
        border-top: 1px solid transparent;
        border-radius: var(--radius-lg);
        box-sizing: border-box;
    }
    header[data-shell="games"] .header-right.acct-open {
        padding: 6px;
        top: 2px;
        right: 10px;
        width: 17rem;
        background: var(--bg-elev);
        border-color: var(--border);
        box-shadow: var(--shadow-2);
    }
    header[data-shell="games"] .acct-toggle { order: 2; }
    header[data-shell="games"] #btn-noti-bell { order: 1; }
    header[data-shell="games"] .header-right > a:where(:not(#btn-noti-bell, #btn-assistant, .hr-login)) { order: 3; }
    /* 도우미(assistant.js)는 PC에서 화면 오른쪽 위에 고정이라 바를 가린다 — 게임 바에선 계정 칸 안 한 줄로 */
    header[data-shell="games"] #btn-assistant { position: static; order: 0; }
    /* 비로그인 시청자의 '로그인'도 바 안 한 줄에 */
    header[data-shell="games"] .header-right .hr-login { order: 0; flex-basis: auto; padding: 5px 12px; border-radius: 999px; }
}
/* PC 두 줄(.gx-two — games-catalog.js fitBar가 메뉴가 한 줄에 안 들어갈 때 붙인다). 폭 기준만으로는 로그인 상태·닉네임·글자 크기에 따라
 * 메뉴 끝이 잘렸다(2026-10-19 사용자 지적 두 번). 윗줄 로고·돌아가기·계정 / 아랫줄 게임 메뉴 전체 폭 */
@media (min-width: 1025px) {
    :root:has(header[data-shell="games"].gx-two) { --topbar-h: 100px; }
    header[data-shell="games"].gx-two { height: 100px; flex-wrap: wrap; align-content: flex-start; row-gap: 0; padding-right: 20px; }
    header[data-shell="games"].gx-two h1 { height: 52px; }
    header[data-shell="games"].gx-two .gx-home { order: 2; margin-right: 16.75rem; } /* 오른쪽은 계정 칸(떠 있는 상자) 자리 */
    header[data-shell="games"].gx-two .nav-tabs { order: 3; flex: 1 0 100%; height: 47px; margin: 0 -20px; padding: 0 12px; border-top: 1px solid var(--border-dim); }
}
/* 한봇 게임 펼침 목록 (2026-10-28 — 게임 16종이 되어 바가 넘침). PC: '한봇 게임 16 ▾' 버튼 + 지금 게임 칸, 목록은 버튼 아래 떠 있는 판.
 * 태블릿·휴대폰 서랍은 버튼 없이 목록이 그대로 줄지어 보인다(display: contents) */
.gx-games-btn, .gx-cur { display: none; }
.gx-games { display: contents; }
@media (min-width: 1025px) {
    header[data-shell="games"] .gx-games-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
        background: none;
        border-top: none;
        border-right: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }
    header[data-shell="games"] .gx-games-btn[aria-expanded="true"] { border-bottom-color: var(--brand); }
    header[data-shell="games"] .gx-games-btn svg { transition: transform 0.15s; }
    header[data-shell="games"] .gx-games-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
    header[data-shell="games"] .gx-games-n { color: var(--text-dim); font-size: 0.8em; font-variant-numeric: tabular-nums; }
    header[data-shell="games"] .gx-cur { display: flex; align-items: center; flex-shrink: 0; }
    header[data-shell="games"] .gx-games {
        display: none;
        position: fixed;
        z-index: 1000;
        grid-template-columns: repeat(4, minmax(8.5rem, auto));
        gap: 2px;
        padding: 8px;
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-2);
    }
    header[data-shell="games"] .gx-games.open { display: grid; }
    header[data-shell="games"] .gx-games .nav-tab {
        height: auto;
        padding: 9px 12px;
        border-bottom: none;
        border-radius: var(--radius-md, 8px);
        white-space: nowrap;
    }
    header[data-shell="games"] .gx-games .nav-tab:hover { background: var(--bg-hover, rgba(255,255,255,0.06)); }
    header[data-shell="games"] .gx-games .nav-tab.active { color: var(--brand); background: none; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    header[data-shell="games"] .gx-games-btn svg { transition: none; }
}
/* 태블릿·휴대폰 — 상단 바엔 자리가 없어 돌아가기는 서랍 맨 아래 칸(.gx-back)으로 */
@media (max-width: 1024px) {
    header[data-shell="games"] .gx-home { display: none; }
    header[data-shell="games"] .gx-back { color: var(--brand); font-weight: 700; }
}

/* ───────── 한봇 게임즈 전체화면(몰입) 모드 (2026-10-26) ─────────
 * games-catalog.js(fitBar)가 게임 바에 '전체화면'(.gx-full)을, body 끝에 '나가기'(.gx-exit)를 넣고 들어가면 body.hb-immersive.
 * 머리글(게임 메뉴·계정)·앱 설치 띠·보는 스트리머 고르기·페이지 제목·'이 페이지 사용법' 띠를 숨기고 본문을 화면 폭으로. 채팅 단추·알림·게임 안 창은 그대로 */
.gx-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid var(--info);
    border-radius: 999px;
    background: var(--info);
    color: var(--info-ink);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
/* 2026-10-26 사용자 "전체화면 버튼 색을 다른 걸로 해서 잘 보이게" — 메뉴·주요 버튼의 호박색과 겹치지 않게 하늘색으로 채움 */
.gx-full:hover { background: var(--info-hover); border-color: var(--info-hover); }
.gx-full svg { width: 16px; height: 16px; }
.gx-exit { display: none; }
@media (min-width: 1025px) {
    header[data-shell="games"] .gx-full { margin-left: auto; }
    header[data-shell="games"] .gx-full + .gx-home { margin-left: 0; }
    header[data-shell="games"].gx-two .gx-full { order: 2; }
}
/* 태블릿·휴대폰 — 상단 바 오른쪽 끝 아이콘만(이름은 aria-label) */
@media (max-width: 1024px) {
    header[data-shell="games"] .gx-full { order: 4; width: 40px; height: 40px; padding: 0; margin-left: 2px; }
    header[data-shell="games"] .gx-full svg { width: 20px; height: 20px; }
    header[data-shell="games"] .gx-full-label { display: none; }
}
:root:has(> body.hb-immersive) { --topbar-h: 0px !important; }
body.hb-immersive > header[data-shell="games"],
body.hb-immersive #hb-pick,
body.hb-immersive .pwa-bar,
body.hb-immersive .top-row :is(.page-title, .page-sub),
body.hb-immersive .page-help-wrap,
body.hb-immersive > .container > :is(.section-label, .info-box),
body.hb-immersive .mg-desc { display: none !important; }
body.hb-immersive > .wrap,
body.hb-immersive > * > .wrap,
body.hb-immersive > .container { max-width: 100%; }
/* 오른쪽 위 '나가기' 자리 — 화면 맨 위에 오는 줄(제목 줄·마법학교 지도 머리)은 그만큼 비워 두고, 알림은 그 아래로 */
body.hb-immersive :is(.top-row, .gw-top, .mg-bar, .map-head) { padding-right: 104px; }
@media (max-width: 640px) {
    body.hb-immersive .map-head { padding-right: 0; } /* 휴대폰 지도 머리는 제목 한 줄 + 아래 버튼 줄이라 제목 옆에 들어간다 */
}
body.hb-immersive .toast-container { top: calc(var(--banner-h, 0px) + 60px); }
body.hb-immersive .gx-exit {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    z-index: 850; /* 게임 안 창(마법학교 900·전투 950·던전 950~980·공용 1000~) 아래 — 창이 열리면 창이 덮는다. 채팅 단추는 오른쪽 아래라 안 겹친다 */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-elev);
    color: var(--text-main);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-2);
    transition: opacity 0.4s, border-color 0.15s;
}
body.hb-immersive .gx-exit svg { width: 16px; height: 16px; }
body.hb-immersive .gx-exit:hover { border-color: var(--brand); }
body.hb-immersive .gx-exit.is-idle { opacity: 0.2; }
body.hb-immersive .gx-exit.is-idle:is(:hover, :focus-visible) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    body.hb-immersive .gx-exit { transition: none; }
}

/* ───────── 한봇 게임즈 바 — 좁은 PC 한 줄 (2026-11-01 게임 고도화 H1) ─────────
 * 1280px에서 지금 게임 이름 길이에 따라 1줄/2줄이 섞여 게임을 옮길 때 판이 44px씩 튀었다.
 * 1025~1499px: 오락실·망울고치·게임 업데이트는 '한봇 게임' 펼침 판 아랫줄(.gx-mid)로, 바 위 칸(.gx-wide)은 지금 화면일 때만,
 * '한봇으로 돌아가기'는 화살표 아이콘만(이름은 aria-label·title — games-catalog.js compactHome). 넘치면 예전처럼 두 줄(fitBar) */
.gx-mid, .gx-games-more, .gx-home svg { display: none; }
@media (min-width: 1025px) {
    header[data-shell="games"] .gx-home { display: inline-flex; align-items: center; gap: 6px; }
    header[data-shell="games"] .gx-home svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }
}
@media (min-width: 1025px) and (max-width: 1499px) {
    header[data-shell="games"] .gx-wide:not(.active) { display: none; }
    header[data-shell="games"] .gx-games .gx-mid { display: flex; }
    header[data-shell="games"] .gx-games-more { display: block; grid-column: 1 / -1; margin-top: 4px; padding: 8px 12px 2px; border-top: 1px solid var(--border-dim); font-size: 0.76rem; color: var(--text-dim); }
    header[data-shell="games"] .gx-home { padding: 6px 9px; }
    header[data-shell="games"] .gx-home-label { display: none; }
}

/* ───────── 게임 채팅 단추·창 공용 (2026-11-01 게임 고도화 H7 — 게임 화면 16곳에 복사돼 있던 규칙 한 벌) ─────────
 * 쓰는 법: 게임 화면 <body data-hb-chat> + 원래 마크업(#chat-fab.chat-fab · #chat-panel.chat-panel …) 그대로, 게임 색은 --chat-accent(기본 brand)만.
 * body 속성이 있는 화면에만 걸려 아직 옮기지 않은 화면의 인라인 규칙과 부딪히지 않는다(옮기는 차례는 GI9 RESULT '2단계 계획').
 * 자리: 오른쪽 아래 — 전체화면 '나가기'(850, 오른쪽 위)·앱 설치 띠(왼쪽 아래)와 겹치지 않는다. 게임 안 창(900~)보다 아래 */
body[data-hb-chat] { --chat-accent: var(--brand); --chat-accent-ink: var(--brand-ink); }
body[data-hb-chat] .chat-fab { position: fixed; right: 18px; bottom: 18px; z-index: 880; display: inline-flex; align-items: center; background: var(--chat-accent); border: 1px solid var(--chat-accent); border-radius: 24px; color: var(--chat-accent-ink); font-family: inherit; font-size: 0.88rem; font-weight: 800; padding: 11px 22px; cursor: pointer; box-shadow: var(--shadow-2, 0 4px 16px rgba(0, 0, 0, 0.45)); }
body[data-hb-chat] .chat-fab:hover { filter: brightness(1.06); }
body[data-hb-chat] .chat-unread { display: inline-block; margin-left: 6px; background: var(--danger); color: #fff; font-size: 0.66rem; font-weight: 800; border-radius: 10px; padding: 1px 7px; vertical-align: middle; }
body[data-hb-chat] .chat-panel { display: none; position: fixed; right: 18px; bottom: 72px; z-index: 880; width: min(340px, calc(100vw - 36px)); height: 480px; max-height: min(70vh, 480px); background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2, 0 8px 28px rgba(0, 0, 0, 0.5)); flex-direction: column; overflow: hidden; }
body[data-hb-chat] .chat-panel.open { display: flex; }
body[data-hb-chat] .chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.84rem; font-weight: 800; color: var(--text-main); }
body[data-hb-chat] .chat-head-sub { flex: 1; font-size: 0.68rem; font-weight: 400; color: var(--text-dim); }
body[data-hb-chat] .chat-close { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); font-family: inherit; font-size: 0.72rem; padding: 4px 10px; cursor: pointer; }
body[data-hb-chat] .chat-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
body[data-hb-chat] .chat-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
body[data-hb-chat] .chat-input { flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-main); padding: 8px 12px; font-family: inherit; font-size: 0.82rem; }
body[data-hb-chat] .chat-send { background: var(--chat-accent); border: 1px solid var(--chat-accent); border-radius: var(--radius); color: var(--chat-accent-ink); font-family: inherit; font-size: 0.8rem; font-weight: 800; padding: 8px 14px; cursor: pointer; }
body[data-hb-chat] :is(.chat-fab, .chat-close, .chat-send):focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
@media (max-width: 640px) {
    body[data-hb-chat] .chat-fab { right: 12px; bottom: 12px; padding: 10px 18px; }
    body[data-hb-chat] .chat-panel { right: 8px; left: 8px; bottom: 64px; width: auto; max-height: min(72vh, 520px); }
    body[data-hb-chat] :is(.chat-close, .chat-send) { min-height: 38px; }
}
@media (min-width: 2200px) {
    body[data-hb-chat] .chat-panel { width: 400px; height: 560px; max-height: min(70vh, 560px); }
}

/* ───────── 연간 시즌 띠 · 명예의 전당 창 공용 (2026-11-01 게임 고도화 H5 — public/js/game-season-ui.js가 그린다) ─────────
 * 게임마다 복사돼 있던 .season-bar/.season-overlay와 이름이 겹치지 않게 hbs-. 게임 색은 --hbs-accent(기본 brand) */
.hbs-bar { --hbs-accent: var(--brand); display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 10px 0 0; padding: 8px 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--hbs-accent); border-radius: 10px; font-size: 0.78rem; color: var(--text-sub); }
.hbs-bar[hidden] { display: none; }
.hbs-bar b { color: var(--text-main); }
.hbs-note { color: var(--text-dim); }
.hbs-open { margin-left: auto; font-family: inherit; font-size: 0.74rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-sub); cursor: pointer; white-space: nowrap; }
.hbs-open:hover { color: var(--text-main); border-color: var(--hbs-accent); }
.hbs-overlay { --hbs-accent: var(--brand); display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 24, 0.72); align-items: center; justify-content: center; padding: 20px; }
.hbs-overlay.open { display: flex; }
.hbs-box { width: min(640px, 100%); max-height: 80vh; overflow-y: auto; padding: 18px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; color: var(--text-sub); box-sizing: border-box; }
.hbs-box h3 { display: flex; align-items: center; margin: 0 0 6px; font-size: 0.98rem; color: var(--text-main); }
.hbs-close { margin-left: auto; font-family: inherit; font-size: 0.74rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-sub); cursor: pointer; }
.hbs-sub { margin-bottom: 12px; font-size: 0.76rem; line-height: 1.6; color: var(--text-dim); }
.hbs-season { margin: 12px 0 6px; font-size: 0.8rem; font-weight: 700; color: var(--hbs-accent); }
.hbs-season small { font-weight: 400; color: var(--text-dim); }
.hbs-box table { width: 100%; border-collapse: collapse; }
.hbs-box th { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.72rem; color: var(--text-dim); }
.hbs-box td { padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 0.8rem; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.hbs-box tr.top1 td { color: var(--hbs-accent); font-weight: 700; }
.hbs-empty { padding: 28px 10px; text-align: center; font-size: 0.82rem; line-height: 1.7; color: var(--text-dim); }
.hbs-bar :focus-visible, .hbs-box :focus-visible { outline: 2px solid var(--hbs-accent); outline-offset: 2px; }
@media (max-width: 640px) {
    .hbs-bar { padding: 7px 12px; }
    .hbs-overlay { padding: 10px; align-items: flex-end; }
    .hbs-box { padding: 14px; max-height: 88vh; }
    .hbs-open, .hbs-close { min-height: 38px; }
}