/* ====================================================================
   팡팡내전 — 전장(Battlefield) 테마
   ---------------------------------------------------------------------
   customize.css / pangStyle.css 는 건드리지 않고, 이 파일에서 같은 선택자를
   "다시 칠하는" 방식으로만 동작한다. 레이아웃(폭/여백/flex/grid/반응형
   분기)은 그대로 두고 색·배경·그림자·타이포그래피·인터랙션만 바꾼다.
   따라서 기존 JS(admin.js/home.js)가 참조하는 id/class, DOM 구조,
   드래그앤드롭(SortableJS) 동작에는 영향이 없다.
   ==================================================================== */

/* -------------------- 0. 디자인 토큰 -------------------- */
:root {
    --bg-0: #05070c;
    --bg-1: #0a0e17;
    --bg-2: #10151f;
    --surface: rgba(20, 26, 38, 0.72);
    --surface-solid: #141a26;
    --surface-raised: rgba(var(--tint-rgb), 0.045);
    --border: rgba(var(--tint-rgb), 0.09);
    --border-strong: rgba(var(--tint-rgb), 0.16);
    --text: #edf1fa;
    --text-dim: #9aa4bd;
    --text-faint: #6c7690;

    /* 반투명 오버레이/그림자/글자용 골드는 테마별로 값이 갈린다(아래 라이트 토큰 참고) */
    --tint-rgb: 255, 255, 255;
    --shadow-k: 1;
    --nav-bg: rgba(9, 12, 20, 0.72);
    --scrim: rgba(10, 12, 18, 0.75);

    --gold: #ffc800;
    --gold-soft: #ffe27a;
    --gold-rgb: 255, 200, 0;
    --gold-ink: var(--gold);
    --gold-ink-soft: var(--gold-soft);

    --team1: #ff4d6d;
    --team1-soft: #ff8fa3;
    --team1-rgb: 255, 77, 109;

    --team2: #22d3ee;
    --team2-soft: #7ee8fa;
    --team2-rgb: 34, 211, 238;

    --violet: #8b6bf0;
    --violet-2: #667eea;
    --violet-rgb: 139, 107, 240;

    --success: #2fd66c;
    --danger: #ff4d5e;
    --info: #38bdf8;

    --radius-lg: 20px;
    --radius: 14px;
    --radius-sm: 10px;

    --font-body: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Noto Sans KR", var(--font-body);
    --font-numeric: "Noto Sans KR", var(--font-body);

    --shadow-ambient: 0 20px 60px rgba(0, 0, 0, calc(0.45 * var(--shadow-k)));
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* JS(theme-effects.js)가 pointermove 로 갱신 — 미실행 시에도 중앙에 고정돼 자연스러움 */
    --mx: 50%;
    --my: 50%;
}

/* 라이트 테마: <html data-theme="light"> 일 때 토큰만 갈아끼운다.
   헤더의 토글 버튼(#themeToggle)이 전환하고 localStorage('theme')에 저장한다. */
:root[data-theme="light"] {
    /* 순백(#fff)은 눈이 부셔서 쓰지 않는다 — 배경은 회청색, 카드는 한 톤 밝은 미색 */
    --bg-0: #dfe3eb;
    --bg-1: #e4e7ee;
    --bg-2: #d9dee8;
    --surface: rgba(240, 242, 246, 0.78);
    --surface-solid: #eef0f4;
    --surface-raised: rgba(246, 247, 250, 0.6);
    --border: rgba(15, 23, 42, 0.1);
    --border-strong: rgba(15, 23, 42, 0.18);
    --text: #141a26;
    --text-dim: #535e78;
    --text-faint: #7d879c;

    --tint-rgb: 15, 23, 42;
    --shadow-k: 0.3;
    --nav-bg: rgba(236, 238, 243, 0.85);
    --scrim: rgba(238, 240, 244, 0.85);

    /* 밝은 배경에서 노란 글자는 읽히지 않아 글자용만 짙은 호박색으로 */
    --gold-ink: #a86a00;
    --gold-ink-soft: #7d4f00;

    --team1: #e11d48;
    --team1-soft: #be123c;
    --team1-rgb: 225, 29, 72;

    --team2: #0e94b3;
    --team2-soft: #0e7490;
    --team2-rgb: 14, 148, 179;
}

/* Bootstrap 변수도 같은 팔레트로 맞춰서 .text-primary/.btn-primary 등도 일관되게 */
:root {
    --bs-body-bg: var(--bg-1);
    --bs-body-color: var(--text);
    --bs-primary: var(--gold);
    --bs-primary-rgb: var(--gold-rgb);
    --bs-link-color: var(--gold-ink);
    --bs-link-hover-color: var(--gold-ink-soft);
    --bs-border-color: var(--border);
}

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* -------------------- 1. 배경 레이어 -------------------- */
html, body { background: var(--bg-1); }

body {
    color: var(--text);
    font-family: var(--font-body);
    position: relative;
    min-height: 100vh;
}

/* CSS만으로 그리는 은은한 광원 — JS가 없어도(캔버스 실패해도) 항상 보이는 기본 배경 */
.bg-glow {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(60vmax 60vmax at 12% -10%, rgba(var(--gold-rgb), 0.16), transparent 60%),
        radial-gradient(55vmax 55vmax at 110% 15%, rgba(var(--team2-rgb), 0.14), transparent 60%),
        radial-gradient(70vmax 70vmax at 50% 120%, rgba(var(--team1-rgb), 0.12), transparent 60%),
        linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
}

/* 파티클 캔버스(theme-effects.js) — 광원 위, 실제 콘텐츠 아래 */
#bg-fx {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.55;
}

/* -------------------- 2. 스크롤바 / 선택영역 / 포커스 -------------------- */
* { scrollbar-color: rgba(var(--gold-rgb), 0.35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.45), rgba(var(--violet-rgb), 0.35));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--gold-rgb), 0.6); }

::selection { background: rgba(var(--gold-rgb), 0.35); color: var(--text); }

a { color: var(--gold-ink); }
a:hover { color: var(--gold-ink-soft); }

:focus-visible {
    outline: 2px solid rgba(var(--gold-rgb), 0.8);
    outline-offset: 2px;
    border-radius: 4px;
}

/* -------------------- 3. 타이포그래피 -------------------- */
/* 제목류는 굵은 임팩트체 대신, 같은 Noto Sans KR의 얇은 굵기를 써서
   가늘고 세련된 인상을 준다. pangStyle.css가 h1~h3에 강제하는
   font-weight:700을 여기서 덮어쓴다. */
h1, h2, h3, .h1, .h2, .h3,
#civilwar-title, .logo-section h1, .nickname-card h2,
.home-page-container #civilwar-title,
.page-title {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: 0;
}

.text-muted { color: var(--text-dim) !important; }
#civilwar-title {
    color: var(--text);
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.2);
    margin-bottom: 10px;
}

/* -------------------- 4. 네비게이션 / 푸터 -------------------- */
nav.navbar.bg-dark {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 8px 30px rgba(0, 0, 0, calc(0.35 * var(--shadow-k)));
}

nav.navbar .navbar-brand .brand-kicker {
    font-size: 1.05rem;
    transition: filter 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    display: inline-flex;
}
nav.navbar .navbar-brand:hover .brand-kicker { transform: scale(1.03); filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.5)); }

nav.navbar .nav-link {
    position: relative;
    color: var(--text-dim) !important;
    transition: color 0.2s;
}
nav.navbar .nav-link:hover { color: var(--text) !important; }
nav.navbar .nav-link.active { color: var(--gold-ink) !important; }
nav.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--team2));
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.7);
}

.nav-shell { padding-top: 6px; padding-bottom: 6px; }

.nav-pills-group { gap: 4px; }
.nav-pills-group .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px !important;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s;
}
.nav-pills-group .nav-link i { font-size: 0.85em; opacity: 0.85; }
.nav-pills-group .nav-link:hover { background: rgba(var(--tint-rgb), 0.06); }
.nav-pills-group .nav-link.active {
    background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.22), rgba(var(--gold-rgb), 0.08));
    box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.35);
}
.nav-pills-group .nav-link.active::after { display: none; } /* 알약형 active 표시로 대체, 밑줄 제거 */

.nav-user-group { align-items: center; gap: 6px; }
.nav-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    background: rgba(var(--tint-rgb), 0.05);
    border: 1px solid var(--border);
    margin-right: 4px;
}
.user-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #1a1300;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}
.nav-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(var(--tint-rgb), 0.05);
    border: 1px solid var(--border);
}
.nav-logout:hover { background: rgba(var(--team1-rgb), 0.18); color: var(--team1-soft) !important; }
/* nav.navbar .nav-link 의 color:!important(연한 회색)보다 우선하도록 같은 조상 체인으로 묶는다 */
nav.navbar .nav-link.nav-login-btn {
    padding: 8px 18px !important;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), #e6a800);
    color: #1a1300 !important;
    font-weight: 700;
}
nav.navbar .nav-link.nav-login-btn:hover { color: #1a1300 !important; box-shadow: 0 6px 18px rgba(var(--gold-rgb), 0.35); }

/* PC에서는 collapse 래퍼를 풀어(display: contents) 메뉴/스위치/사용자 영역을 한 줄의
   flex 아이템으로 만들고, order로 스위치를 로그인 버튼 바로 왼쪽에 끼운다.
   (스위치는 모바일에서도 항상 보여야 해서 DOM상으로는 collapse 밖에 있다) */
@media (min-width: 992px) {
    nav.navbar.navbar-expand-lg .navbar-collapse { display: contents !important; }
}

/* 테마 스위치: 알약형 트랙 위에서 원(knob)이 좌우로 미끄러진다.
   다크 = 왼쪽(달), 라이트 = 오른쪽(해) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 56px; height: 30px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(var(--tint-rgb), 0.1);
    border: 1px solid var(--border-strong);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
}
.theme-toggle:hover { border-color: rgba(var(--gold-rgb), 0.6); }
.theme-toggle-knob {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg-1);
    font-size: 0.7rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, calc(0.4 * var(--shadow-k)));
    transition: transform 0.28s var(--ease-out), background 0.25s, color 0.25s;
}
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle { background: rgba(var(--tint-rgb), 0.14); }
:root[data-theme="light"] .theme-toggle-knob { transform: translateX(26px); background: #fff; color: #c27c00; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .fa-moon { display: none; }

.footer {
    color: var(--text-faint);
    position: relative;
    z-index: 1;
}
.footer a.link-dark { color: var(--text-dim) !important; }
.footer a.link-dark:hover { color: var(--gold-ink) !important; }

body > section, body > .container, body > .container-fluid { position: relative; z-index: 1; }

/* -------------------- 5. 버튼 -------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background 0.18s, border-color 0.18s, opacity 0.18s;
    position: relative;
    overflow: hidden;
}
.btn:not(:disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):active { transform: translateY(0); }
.btn:disabled, .btn.disabled { opacity: 0.45; transform: none; box-shadow: none; }

/* 클릭 리플용 컨테이너(theme-effects.js 가 span.ripple 추가).
   .btn 조상이 있어야만 적용되는 선택자였는데, kakao-btn/edit-btn/delete-btn/
   btn-add-member/submit-btn 처럼 .btn 클래스가 없는 <button>에는 이 스타일이
   전혀 먹지 않아 position:absolute가 빠진 채 일반 flex 자식으로 들어가
   버튼이 리플 크기(최대 변 길이)만큼 순간적으로 커져 보이는 버그가 있었다.
   조상 클래스에 의존하지 않도록 전역 선택자로 바꾼다. */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: scale(0);
    animation: ripple-pop 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes ripple-pop {
    to { transform: scale(2.6); opacity: 0; }
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold), #e6a800);
    border-color: transparent;
    color: #1a1300;
    box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.28);
}
.btn-primary:hover { box-shadow: 0 10px 28px rgba(var(--gold-rgb), 0.4); color: #1a1300; }

.btn-outline-primary {
    color: var(--gold-ink);
    border-color: rgba(var(--gold-rgb), 0.55);
    background: rgba(var(--gold-rgb), 0.06);
}
.btn-outline-primary:hover {
    background: rgba(var(--gold-rgb), 0.16);
    border-color: var(--gold);
    color: var(--gold-ink-soft);
    box-shadow: 0 8px 22px rgba(var(--gold-rgb), 0.22);
}

.btn-secondary {
    background: var(--surface-raised);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-secondary:hover { background: rgba(var(--tint-rgb), 0.09); border-color: var(--border-strong); }

.btn-success { background: linear-gradient(135deg, #34d976, var(--success)); border-color: transparent; box-shadow: 0 6px 18px rgba(47, 214, 108, 0.25); }
.btn-success:hover { box-shadow: 0 10px 26px rgba(47, 214, 108, 0.38); }

.btn-danger { background: linear-gradient(135deg, #ff6b7a, var(--danger)); border-color: transparent; box-shadow: 0 6px 18px rgba(255, 77, 94, 0.28); }
.btn-danger:hover { box-shadow: 0 10px 26px rgba(255, 77, 94, 0.4); }

.btn-info { background: linear-gradient(135deg, #59e0f7, var(--info)); border-color: transparent; color: #04202c; box-shadow: 0 6px 18px rgba(56, 189, 248, 0.28); }
.btn-info:hover { color: #04202c; box-shadow: 0 10px 26px rgba(56, 189, 248, 0.4); }

.btn-link { color: var(--text-dim); }
.btn-link:hover { color: var(--gold-ink); }

.btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: 0.7; }
.btn-close:hover { opacity: 1; }

/* 커스텀 버튼들 */
.btn-add-member {
    background: linear-gradient(135deg, var(--violet-2), var(--violet));
    box-shadow: 0 6px 18px rgba(var(--violet-rgb), 0.35);
}
.btn-add-member:hover { background: linear-gradient(135deg, var(--violet), var(--violet-2)); box-shadow: 0 10px 26px rgba(var(--violet-rgb), 0.45); transform: translateY(-2px); }

.game-btn:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, calc(0.35 * var(--shadow-k))); }

.btn-action { box-shadow: 0 8px 22px rgba(var(--violet-rgb), 0.18); }
.btn-join { background: linear-gradient(135deg, var(--violet-2), var(--violet)); border: none; }
.btn-join:hover { background: linear-gradient(135deg, var(--violet), var(--violet-2)); }
.btn-join:disabled { background: rgba(var(--violet-rgb), 0.25); color: var(--text-dim); box-shadow: none; }

.btn-cancel { background: transparent; color: var(--team1); border: 2px solid rgba(var(--team1-rgb), 0.6); }
.btn-cancel:hover { background: var(--team1); color: #fff; border-color: var(--team1); }

.btn-accept { background: linear-gradient(135deg, #34d976, var(--success)); }
.btn-decline { background: linear-gradient(135deg, #ff6b7a, var(--danger)); }

.edit-btn { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #1a1300; }
.delete-btn { background: linear-gradient(135deg, #ff6b7a, var(--danger)); }

/* -------------------- 6. 폼 -------------------- */
.form-control, .form-select {
    background-color: rgba(var(--tint-rgb), 0.04);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus, .form-select:focus {
    background-color: rgba(var(--tint-rgb), 0.06);
    border-color: rgba(var(--gold-rgb), 0.6);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.18);
}
.form-select option { background: var(--surface-solid); color: var(--text); }
.form-label { color: var(--text-dim); }

/* -------------------- 7. 카드형 컨테이너 -------------------- */
.admin-main-container .top-bar {
    padding-bottom: 16px;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--border);
}
.admin-main-container .top-bar .match-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(var(--tint-rgb), 0.05);
    border: 1px solid var(--border-strong);
}
.admin-main-container .top-bar .match-chip i { color: var(--gold-ink); }

.main-container, .home-main-container, .match-history-container, .dash-shell {
    background: var(--surface);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-ambient);
    color: var(--text);
}

.section-card, .section-card2, .chat-panel, .control-panel,
#home-notification-box, .wait-col, .team-card {
    background: var(--surface-raised) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, calc(0.28 * var(--shadow-k))) !important;
    border-radius: var(--radius) !important;
    transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

/* 커서를 따라다니는 은은한 스포트라이트(theme-effects.js가 --mx/--my 갱신) */
.section-card, .section-card2, .chat-panel, .team-card, .wait-col, #home-notification-box {
    position: relative;
    overflow: hidden;
}
.section-card::before, .section-card2::before, .chat-panel::before,
.team-card::before, .wait-col::before, #home-notification-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(320px circle at var(--mx) var(--my), rgba(var(--tint-rgb), 0.06), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}
.section-card:hover::before, .section-card2:hover::before, .chat-panel:hover::before,
.team-card:hover::before, .wait-col:hover::before, #home-notification-box:hover::before { opacity: 1; }
.section-card > *, .section-card2 > *, .chat-panel > *, .team-card > *, .wait-col > *, #home-notification-box > * {
    position: relative;
    z-index: 1;
}

/* -------------------- 8. 섹션 헤더(그라디언트 리본) -------------------- */
.section-header, .chat-header, .team-title, .wait-title {
    box-shadow: 0 6px 18px rgba(0, 0, 0, calc(0.25 * var(--shadow-k)));
}
.today-header, .wait-title { background: linear-gradient(120deg, var(--violet-2), var(--violet)) !important; }
.member-section-header { background: linear-gradient(120deg, var(--gold), #e0a400) !important; color: #1a1300 !important; }
.team1-header, .team1-title { background: linear-gradient(120deg, var(--team1), #c22645) !important; }
.team2-header, .team2-title { background: linear-gradient(120deg, var(--team2), #0f9bb5) !important; }
.chat-header { background: linear-gradient(120deg, #2a3040, #171b26) !important; }

.section-header .badge.bg-light, .chat-header .badge.bg-light,
.team-title .badge.bg-light, .wait-title .badge.bg-light {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #14161f !important;
    border-radius: 999px;
}

/* count 뱃지가 값 변경 시 잠깐 반짝이는 연출 (theme-effects.js가 .count-pulse 토글) */
.count-pulse { animation: count-pulse 0.55s var(--ease-out); }
@keyframes count-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); filter: brightness(1.4); }
    100% { transform: scale(1); }
}

/* -------------------- 9. 리스트 아이템 -------------------- */
.member-item {
    background: rgba(var(--tint-rgb), 0.035);
    border: 1px solid var(--border);
    color: var(--text);
}
.member-item:hover {
    background: rgba(var(--gold-rgb), 0.08);
    border-color: rgba(var(--gold-rgb), 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, calc(0.35 * var(--shadow-k)));
}
.member-item.in-team-1 { background: rgba(var(--team1-rgb), 0.14) !important; border-left: 4px solid var(--team1); }
.member-item.in-team-2 { background: rgba(var(--team2-rgb), 0.14) !important; border-left: 4px solid var(--team2); }
.member-item.disabled { background: rgba(var(--tint-rgb), 0.02); }

.member-name, .member-name-text { color: var(--text); }
/* 오늘참여자 승률: 50% 이하 빨강 / 51~60% 기본 글자색 / 61% 이상 초록 (admin.js 가 클래스 부여) */
.win-rate-low { color: #ff6b7a; }
.win-rate-mid { color: var(--text); }
.win-rate-high { color: var(--success); }
:root[data-theme="light"] .win-rate-low { color: #dc3545; }
:root[data-theme="light"] .win-rate-high { color: #1e8e3e; }
.small-stats { color: var(--text-faint); }

.empty-state { color: var(--text-faint); }

.drop-zone { border-color: var(--border-strong); }
.drop-zone.drag-over { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }

/* SortableJS 드래그 상태 폴리시 */
.sortable-ghost { opacity: 0.35 !important; background: rgba(var(--gold-rgb), 0.15) !important; border: 1px dashed var(--gold) !important; }
.sortable-chosen { box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.55), 0 12px 28px rgba(0, 0, 0, calc(0.45 * var(--shadow-k))) !important; }
.sortable-drag { box-shadow: 0 16px 34px rgba(0, 0, 0, calc(0.55 * var(--shadow-k))) !important; }

.user-list li {
    background: rgba(var(--tint-rgb), 0.045);
    color: var(--text);
    box-shadow: none;
    border: 1px solid var(--border);
    transition: transform 0.18s var(--ease-out), background 0.18s;
}
.user-list li:hover { transform: translateX(3px); background: rgba(var(--tint-rgb), 0.08); }

.chat-msg { background: rgba(var(--tint-rgb), 0.045); box-shadow: none; border: 1px solid var(--border); }
.chat-msg .msg-text { color: var(--text); }
.chat-msg.disabled-request::after { background: var(--scrim); color: var(--team1); }

.notification-title { color: var(--text); border-bottom-color: var(--border); }
.notification-message .message { color: var(--text); }
.notification-message .timestamp { color: var(--text-faint); }
.notification-apply { background-color: rgba(47, 214, 108, 0.14); border-left-color: var(--success); }
.notification-accept { background-color: rgba(56, 189, 248, 0.14); border-left-color: var(--info); }
.notification-decline, .notification-reject { background-color: rgba(255, 77, 94, 0.16); border-left-color: var(--danger); }
.notification-cancel { background-color: rgba(255, 200, 0, 0.14); border-left-color: var(--gold); }

/* -------------------- 10. 뱃지 -------------------- */
.badge-num, .home-badge-num {
    background: linear-gradient(135deg, var(--team1), #c22645);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, calc(0.25 * var(--shadow-k)));
}
.pc-badge { background: rgba(var(--tint-rgb), 0.12); color: var(--text-dim); }
.pc-badge.active { background: var(--danger) !important; }
.rest-badge { background: rgba(var(--tint-rgb), 0.12); color: var(--text-dim); }
.rest-badge.active { background: var(--success) !important; }

/* -------------------- 11. 모달(인라인 스타일 오버라이드) -------------------- */
#addMemberModal > div, #editMemberModal > div, #operatorModal > div {
    background: var(--surface-solid) !important;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-ambient) !important;
    color: var(--text);
}
#addMemberModal, #editMemberModal, #operatorModal { backdrop-filter: blur(4px); }
#operatorModal h5 { color: var(--text); }
#operator-modal-list { border-color: var(--border) !important; }
#operator-modal-list .modal-member-item { background: rgba(var(--tint-rgb), 0.03); border-color: var(--border); color: var(--text); }
#operator-modal-list .modal-member-item:hover { background: rgba(var(--tint-rgb), 0.08); }
#operator-modal-list .modal-member-item.selected { background: rgba(var(--gold-rgb), 0.18); border-color: var(--gold); }
#operator-modal-list .modal-member-item.operator-member { background: rgba(var(--violet-rgb), 0.18); }

/* -------------------- 12. 기록/필터 페이지(공통 카드류) -------------------- */
.page-header, .filter-section, .match-item, .stat-item,
.search-box, .load-more-section {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
.page-title { color: var(--text); }
/* members.html/pay.html 은 페이지 헤더 글자색을 인라인 스타일(밝은 배경 전제)로 고정해 둬서
   어두운 배경 위에서는 대비가 깨진다. 이 부분만 안전하게 덮어쓴다. */
.main-container .page-header h1,
.main-container .page-header p { color: var(--text) !important; }
.main-container .page-header p { color: var(--text-dim) !important; }
.stat-value { color: var(--gold-ink); font-family: var(--font-numeric); }
.stat-label { color: var(--text-faint); }
.match-date, .match-duration { color: var(--text-dim); }
.team-section { background: rgba(var(--tint-rgb), 0.03); border-radius: var(--radius-sm); }
.team-section.team-1 .team-name, .winner-badge { color: var(--team1); }
.team-section.team-2 .team-name { color: var(--team2); }
.vs-divider { color: #fff; }
.player-item { color: var(--text-dim); border-color: var(--border); }
.empty-icon { color: var(--text-faint); }
.load-more-btn { background: var(--surface-raised); border: 1px solid var(--border-strong); color: var(--text); }
.load-more-btn:hover { background: rgba(var(--gold-rgb), 0.12); border-color: var(--gold); color: var(--gold-ink-soft); }

/* -------------------- 12-1. 비로그인 안내 카드 / 범용 Bootstrap 유틸 -------------------- */
.bg-light:not(.badge) {
    background: var(--surface) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-ambient);
}
.text-primary { color: var(--gold-ink) !important; }
.text-secondary { color: var(--text-dim) !important; }
.spinner-border.text-primary { color: var(--gold-ink) !important; }

/* -------------------- 13. 진입 애니메이션(GSAP; 미로드시 그대로 정상 표시) -------------------- */
.reveal-up { will-change: transform, opacity; }

/* -------------------- 15. 홈 대시보드(신규 레이아웃) -------------------- */
.dash-container { padding-top: 28px; padding-bottom: 28px; }
.dash-shell { padding: 26px 28px 30px; }

.dash-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-numeric);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold-ink);
    text-transform: uppercase;
}
.dash-kicker i { color: var(--team1); }

.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border);
}
.dash-hero-text h1#civilwar-title { display: none; }
.dash-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(var(--tint-rgb), 0.06);
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
}
.dash-status-pill::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-btn {
    padding: 11px 24px;
    border-radius: 999px;
    font-weight: 700;
    border: none;
}
.dash-btn-join { background: linear-gradient(135deg, var(--violet-2), var(--violet)); color: #fff; box-shadow: 0 8px 22px rgba(var(--violet-rgb), 0.35); }
.dash-btn-join:hover { color: #fff; }
.dash-btn-join:disabled { background: rgba(var(--violet-rgb), 0.22); color: var(--text-dim); box-shadow: none; }
.dash-btn-cancel { background: transparent; color: var(--team1); border: 2px solid rgba(var(--team1-rgb), 0.55); }
.dash-btn-cancel:hover { background: var(--team1); color: #fff; }
.dash-btn-rest { background: linear-gradient(135deg, #34d976, var(--success)); color: #063017; box-shadow: 0 8px 22px rgba(47, 214, 108, 0.3); }
.dash-btn-rest:hover { color: #063017; }
.dash-btn-rest:disabled, .dash-btn-cancel:disabled { opacity: 0.4; }

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
}

.vs-board {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: start;
}
.vs-team { min-width: 0; }
.vs-team-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 2px solid transparent;
}
.vs-team-1 .vs-team-head { border-color: rgba(var(--team1-rgb), 0.4); }
.vs-team-2 .vs-team-head { border-color: rgba(var(--team2-rgb), 0.4); }
.vs-team-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0;
}
.vs-team-1 .vs-team-name { color: var(--team1-soft); }
.vs-team-2 .vs-team-name { color: var(--team2-soft); }
.vs-count {
    min-width: 26px;
    padding: 2px 9px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-numeric);
}
.vs-team-1 .vs-count { background: rgba(var(--team1-rgb), 0.18); color: var(--team1-soft); }
.vs-team-2 .vs-count { background: rgba(var(--team2-rgb), 0.18); color: var(--team2-soft); }

/* 부모가 세로로 쌓이는 모바일에서도 늘어나지 않도록 크기를 고정한다. */
.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    min-width: 0;
    padding: 0;
    justify-self: center;
}
.vs-divider span {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: #fff;
    writing-mode: horizontal-tb;
}

.roster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.roster-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(var(--tint-rgb), 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 500;
    color: var(--text);
    transition: transform 0.18s var(--ease-out), background 0.18s;
}
.roster-list li:hover { transform: translateX(3px); background: rgba(var(--tint-rgb), 0.08); }
.roster-list .avatar {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0b0e15;
    box-shadow: 0 0 0 2px rgba(var(--tint-rgb), 0.12);
}
.roster-list .roster-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-side { display: flex; flex-direction: column; gap: 20px; }
.side-panel {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, calc(0.28 * var(--shadow-k)));
}
.side-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.side-panel-head i { color: var(--gold-ink); margin-right: 6px; }
.side-count {
    min-width: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(var(--gold-rgb), 0.18);
    color: var(--gold-ink-soft);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}
.wait-panel .roster-list { max-height: 420px; overflow-y: auto; }
.notice-panel #notification-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }

#home-notification-box.notice-panel-top {
    height: auto;
    margin-bottom: 20px;
}
.notice-panel-top #notification-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    /* 배경이 투명한 스크롤 영역은 브라우저가 별도 레이어로 올리지 않아, 스크롤할 때마다 뒤의
       블러 배경·파티클과 함께 메인 스레드에서 다시 그려져 스크롤바 드래그가 뚝뚝 끊긴다.
       레이어로 강제 승격시켜 스크롤을 합성 단계에서 처리하게 한다. */
    will-change: transform;
}
.notice-panel-top #notification-list li {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .dash-hero { flex-direction: column; align-items: stretch; text-align: center; }
    .dash-hero-text { text-align: center; }
    .dash-actions { justify-content: center; }
    .dash-btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
    .vs-board { grid-template-columns: 1fr; }
    .vs-divider span { display: block; }
}

/* -------------------- 15-1. 비로그인 게스트 히어로 -------------------- */
.guest-hero {
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.guest-hero-inner {
    max-width: 640px;
    width: 100%;
    text-align: center;
    background: var(--surface);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-ambient);
    padding: 56px 40px;
}
.guest-title {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    margin: 18px 0 14px;
    color: var(--text);
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.22);
}
.guest-lead { color: var(--text-dim); font-size: 1.1rem; line-height: 1.7; margin-bottom: 30px; }
.guest-cta { padding: 14px 36px; font-size: 1.05rem; }
.guest-features {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}
.guest-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(var(--tint-rgb), 0.04);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.88rem;
    font-weight: 600;
}
.guest-feature i { color: var(--gold-ink); }

/* -------------------- 14. 반응형 안전장치 -------------------- */
@media (max-width: 992px) {
    #bg-fx { opacity: 0.35; }
}
@media (max-width: 768px) {
    /* customize.css의 모바일 #civilwarDay 규칙(display:block;width:100%)이
       .match-chip 알약 안에서는 어색해지므로 이 컨텍스트에서만 되돌린다 */
    .admin-main-container .top-bar .match-chip #civilwarDay {
        display: inline !important;
        width: auto !important;
    }
    .admin-main-container .top-bar .match-chip { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    #bg-fx { display: none; } /* 저사양 모바일에서는 파티클 생략, 그라디언트 배경만 유지 */
}

/* -------------------- 16. 라이트 테마 보정 -------------------- */
/* 토큰만으로 안 바뀌는 것들: Bootstrap navbar-dark 아이콘, 닫기 버튼 필터,
   그리고 login.html/nickname.html 이 인라인 <style>에 어두운 색을 고정해 둔 부분. */
:root[data-theme="light"] nav.navbar .navbar-toggler { border-color: var(--border-strong); }
:root[data-theme="light"] nav.navbar .navbar-toggler-icon { filter: invert(1); }
:root[data-theme="light"] .btn-close { filter: none; }

:root[data-theme="light"] .login-wrapper::after {
    background: radial-gradient(80% 65% at 50% 45%, rgba(228, 231, 238, 0.1) 0%, rgba(228, 231, 238, 0.4) 100%);
}
/* 3D 장식 색은 login.html 스크립트가 라이트용(짙은 남색·보라)으로 바꾼다 — 여기서는 덜 흐리게만 */
:root[data-theme="light"] .login-hero-canvas { opacity: 0.85; }
:root[data-theme="light"] .login-card,
:root[data-theme="light"] .nickname-card {
    background: var(--surface-solid);
    border-color: var(--border-strong);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}
:root[data-theme="light"] .login-card:hover { box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2); }
:root[data-theme="light"] .logo-section h1,
:root[data-theme="light"] .nickname-card h2 { color: var(--text); }
:root[data-theme="light"] .logo-section p,
:root[data-theme="light"] .loading p,
:root[data-theme="light"] .nickname-card p { color: var(--text-dim); }
:root[data-theme="light"] .login-footer { border-top-color: var(--border); }
:root[data-theme="light"] .login-footer p { color: var(--text-faint); }
:root[data-theme="light"] .input-group label { color: var(--text); }
:root[data-theme="light"] .input-group input {
    background: rgba(246, 247, 250, 0.9);
    border-color: var(--border-strong);
    color: var(--text);
}
:root[data-theme="light"] .input-group input::placeholder { color: var(--text-faint); }
:root[data-theme="light"] .input-group input:focus { border-color: var(--gold); }
:root[data-theme="light"] .validation-message.success { color: #15803d; }
:root[data-theme="light"] .validation-message.error { color: #dc2626; }
:root[data-theme="light"] #submit-btn:disabled { background: rgba(var(--tint-rgb), 0.1); color: var(--text-faint); }

/* -------------------- 대기실 미니게임 입장 버튼 (home) -------------------- */
.arena-enter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 18px;
    padding: 16px 22px;
    border: 2px solid rgba(var(--gold-rgb), 0.6);
    border-radius: var(--radius);
    background: linear-gradient(100deg, rgba(var(--gold-rgb), 0.18), rgba(var(--violet-rgb), 0.16));
    color: var(--text);
    font-family: var(--font-body);
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.arena-enter[hidden] { display: none; }
.arena-enter:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 28px rgba(var(--gold-rgb), 0.25); }
.arena-enter-label { font-size: 1.15rem; font-weight: 900; color: var(--gold-ink); white-space: nowrap; }
.arena-enter-sub { font-size: 0.85rem; color: var(--text-dim); flex: 1; }
.arena-enter-arrow { color: var(--gold-ink); transition: transform 0.2s; }
.arena-enter:hover .arena-enter-arrow { transform: translateX(4px); }
/* 뒤에서 천천히 흐르는 픽셀 격자 */
.arena-enter-pixels {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.25;
    background-image:
        linear-gradient(90deg, rgba(var(--gold-rgb), 0.35) 1px, transparent 1px),
        linear-gradient(rgba(var(--gold-rgb), 0.35) 1px, transparent 1px);
    background-size: 8px 8px;
    animation: arena-pixels 6s linear infinite;
}
@keyframes arena-pixels { to { background-position: 64px 0; } }
@media (max-width: 640px) { .arena-enter-sub { display: none; } }

/* 클릭하면 버튼 자리에서 화면 전체로 펼쳐지는 판 */
.arena-expand {
    position: fixed; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #3a2a00, #ffc800 60%, #ffe27a);
    color: #1a1300; font-family: var(--font-body); font-weight: 900; font-size: 1.1rem;
    transition: top 0.55s cubic-bezier(0.7, 0, 0.2, 1), left 0.55s cubic-bezier(0.7, 0, 0.2, 1),
                width 0.55s cubic-bezier(0.7, 0, 0.2, 1), height 0.55s cubic-bezier(0.7, 0, 0.2, 1),
                border-radius 0.55s;
}
.arena-expand.open { border-radius: 0; }
.arena-expand span { opacity: 0; transition: opacity 0.2s 0.35s; }
.arena-expand.open span { opacity: 1; }