/* ╔═════════════════════════════════════════════════════════════════════╗
   ║   APPLE DESIGN SYSTEM — Single Source of Truth (2026-04-27)             ║
   ║   · CSS Variables (:root) → 디자인 토큰 한 곳에서 관리                    ║
   ║   · DRY 원칙 — 중복 선택자 통합                                          ║
   ║   · PC-First 반응형 (모바일 땜질 코드 0)                                  ║
   ║   · Modal 시스템 통합 (position:fixed + inset:0 + z-index 레이어)        ║
   ║   · 마지막 로드 → cascade 항상 승리                                       ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — :root CSS Variables
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* ─ 색상 시스템 (Low-Strain Palette) ─ */
    --apple-bg:           #F2F2F7;                          /* ★ 차분한 오프화이트 (이전 #F5F5F7) */
    --apple-bg-warm:      #E5E5EA;                          /* ★ 웜그레이 보조 배경 */
    --apple-bg-alt:       #ECECEF;                          /* 중간 톤 */
    --apple-surface:      #F8F8FA;                          /* ★ 흰면도 살짝 톤다운 (순백 X) */
    --apple-card-bg:      rgba(255, 255, 255, 0.60);        /* ★ 글래스 0.6 (사용자 스펙) */
    --apple-glass:        rgba(255, 255, 255, 0.60);        /* 글래스 통일 */
    --apple-text:         #1D1D1F;                          /* 본문 */
    --apple-text-2:       #636366;                          /* 보조 텍스트 */
    --apple-text-3:       #8E8E93;                          /* 시스템 그레이 */
    --apple-divider:      rgba(0, 0, 0, 0.06);              /* 구분선 */
    --apple-red:          #FF453A;                          /* ★ 시스템 레드 (이전 #E3000E 톤다운) */
    --apple-green:        #2F7F4E;                          /* 세이지 그린 */
    --apple-purple:       #6B4FA3;                          /* 라벤더 */
    --apple-card-back:    #1C1C1E;                          /* ★ 카드 뒷면 딥 네이비 */

    /* ─ 모서리 ─ */
    --apple-radius:       20px;
    --apple-radius-sm:    12px;
    --apple-radius-pill:  980px;

    /* ─ 그림자 (저강도, 사용자 스펙) ─ */
    --apple-shadow-btn:   0 4px 12px rgba(0, 0, 0, 0.08);    /* ★ 버튼 — 옅게 떠있는 느낌 */
    --apple-shadow:       0 8px 24px rgba(0, 0, 0, 0.06);    /* 표준 */
    --apple-shadow-soft:  0 6px 16px rgba(0, 0, 0, 0.05);    /* 부드러움 */
    --apple-shadow-deep:  0 20px 48px rgba(0, 0, 0, 0.10);   /* 깊이 (모달) */

    /* ─ 블러 (사용자 스펙) ─ */
    --apple-blur:         blur(25px) brightness(1.1);        /* ★ Glassmorphism */

    /* ─ 간격 시스템 (4의 배수) ─ */
    --apple-gap-xs:       4px;
    --apple-gap-sm:       8px;
    --apple-gap-md:       12px;
    --apple-gap-lg:       16px;
    --apple-gap-xl:       24px;

    /* ─ 폰트 ─ */
    --apple-font: -apple-system, BlinkMacSystemFont,
                  "SF Pro Rounded", "SF Pro Display", "SF Pro Text",
                  "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR",
                  system-ui, sans-serif;

    /* ─ 레이어 (Z-INDEX 시스템) ─ */
    --z-base:             1;
    --z-header:           100;
    --z-dropdown:         500;
    --z-modal-overlay:    9000;
    --z-modal-content:    9001;
    --z-toast:            10000;
    --z-announce:         99999;
}

/* ═══════════════════════════════════════════════════════════════════
   2. 글로벌 RESET — 폰트 + 박스 모델 + 스크롤 정책
   ═══════════════════════════════════════════════════════════════════ */
html, body {
    font-family: var(--apple-font);
    background: var(--apple-bg);
    color: var(--apple-text);
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    height: 100dvh;
    max-height: 100dvh;
}
@supports not (height: 100dvh) {
    body { height: 100vh; max-height: 100vh; }
}
*, *::before, *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════════
   3. SCREEN STATE — 단일 활성 화면 (한 번에 하나만 visible)
   ═══════════════════════════════════════════════════════════════════ */
#auth-screen.screen:not(.active),
#lobby-screen.screen:not(.active),
#game-screen.screen:not(.active) {
    display: none;
}
#auth-screen.screen.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}
#lobby-screen.screen.active {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}
#game-screen.screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   4. LAYOUT SYSTEM — PC-First, flex/grid 기반 (max-width 0)
   ═══════════════════════════════════════════════════════════════════ */

/* ─ 로비 헤더 (.top-bar) ─ flex space-between, 겹침 0 ─ */
body:not(.game-popup-body) header.top-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--apple-gap-md);
    padding: var(--apple-gap-sm) var(--apple-gap-lg);
    background: var(--apple-bg);
    border: none;
    border-bottom: 1px solid var(--apple-divider);
    box-shadow: none;
    z-index: var(--z-header);
}
body:not(.game-popup-body) .top-left {
    flex: 0 0 auto;          /* ★ 절대 안 줄어듬 */
    min-width: 0;
}
body:not(.game-popup-body) .top-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--apple-gap-sm);
    flex: 0 1 auto;
    min-width: 0;
}
/* 잔액/포인트 — 길어도 로고 침범 X */
body:not(.game-popup-body) #user-balance,
body:not(.game-popup-body) #user-points {
    flex-shrink: 0;             /* ★ 안전 영역 보장 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─ 로비 섹션 ─ grid 자식 채우기 ─ */
body:not(.game-popup-body) #lobby-screen.screen.active > .section {
    grid-row: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ─ 게임 캔버스 ─ JS scaler 가 transform 처리 ─ */
body.game-popup-body #game-scaler {
    width: 1600px;
    height: 900px;
    flex: 0 0 auto;
    transform-origin: center center;
}

/* ═══════════════════════════════════════════════════════════════════
   5. COMPONENT — APPLE CARD (재사용 클래스)
   ═══════════════════════════════════════════════════════════════════ */
.apple-card {
    background: var(--apple-surface);
    border: none;
    border-radius: var(--apple-radius);
    box-shadow: var(--apple-shadow-soft);
    padding: var(--apple-gap-lg);
}
.apple-card-glass {
    background: var(--apple-card-bg);
    backdrop-filter: var(--apple-blur);
    -webkit-backdrop-filter: var(--apple-blur);
    border: none;
    border-radius: var(--apple-radius);
    box-shadow: var(--apple-shadow);
    padding: var(--apple-gap-lg);
}

/* ═══════════════════════════════════════════════════════════════════
   6. MODAL SYSTEM — 통합
   · 오버레이형: .modal / #thankyou-modal / #result-modal — inset:0 배경 + 내부 .modal-content 중앙
   · 단일 카드형: #thankyou-select-popup — 자체가 카드 (배경 X) — 중앙 고정만
   ═══════════════════════════════════════════════════════════════════ */

/* 오버레이형 — 어두운 배경 + blur */
.modal,
#thankyou-modal,
#result-modal,
#win-announce-overlay,
#game-announce-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-modal-overlay);
}
.modal.hidden,
#thankyou-modal.hidden,
#result-modal.hidden {
    display: none;
}
/* 오버레이 내부 content — 중앙 카드 */
.modal-content,
#thankyou-modal .modal-content,
#result-modal .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(400px, 90vw);
    max-width: min(400px, 90vw);
    max-height: min(80vh, 80dvh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: var(--z-modal-content);
    background: var(--apple-surface);
    border: none;
    border-radius: var(--apple-radius);
    box-shadow: var(--apple-shadow-deep);
    padding: var(--apple-gap-xl);
    margin: 0;
    box-sizing: border-box;
}

/* ★ #thankyou-select-popup — 단일 카드 (오버레이 X) — 정중앙 고정 */
#thankyou-select-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(400px, 90vw) !important;
    max-width: min(400px, 90vw) !important;
    max-height: min(80vh, 80dvh) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    z-index: var(--z-modal-content) !important;
    background: var(--apple-surface) !important;
    border: none !important;
    border-radius: var(--apple-radius) !important;
    box-shadow: var(--apple-shadow-deep) !important;
    padding: var(--apple-gap-xl) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--apple-gap-md);
}
#thankyou-select-popup.hidden { display: none !important; }
#thankyou-select-popup .thankyou-select-card {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ★ MODAL ANIMATION FIX — keyframes 가 translate(-50%,-50%) 덮어쓰는 버그 차단
   apple.css 의 resultModalIn / appleFadeInUp 등이 transform 을 손실시켜
   모달이 우측하단으로 밀리는 문제 해결.
   ═══════════════════════════════════════════════════════════════════ */

/* 결과 모달 애니메이션 — center translate 유지 */
@keyframes resultModalIn {
    0%   { opacity: 0; transform: translate(-50%, -45%) scale(0.94); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes appleFadeInUp {
    0%   { opacity: 0; transform: translate(-50%, -45%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes resultTitleIn {
    /* h2 자체는 transform 영향 X — translate 안 들어감 */
    0%   { opacity: 0; transform: scale(0.7); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

/* h2 / 자식 요소엔 별도 keyframe — 모달 본체 translate 와 분리 */
.result-modal h2 {
    /* h2 자체 animation 만 */
    animation: resultTitleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both !important;
}

/* 모달 본체 — 우리 정의한 keyframes 사용, translate(-50%,-50%) 항상 유지 */
#result-modal .modal-content,
#result-modal .modal-content.result-modal,
#thankyou-modal .modal-content,
#theme-modal .modal-content {
    animation: appleFadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
#result-modal .modal-content.result-modal {
    animation: resultModalIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* min-width 700px 등 legacy 룰 무력화 — 작은 화면에서 모달 넘침 방지 */
#result-modal .modal-content,
#result-modal .modal-content.result-modal,
.result-modal {
    min-width: 0 !important;
    max-width: min(400px, 90vw) !important;
    width: min(400px, 90vw) !important;
}
@media (min-width: 768px) {
    #result-modal .modal-content,
    #result-modal .modal-content.result-modal,
    .result-modal {
        max-width: min(560px, 90vw) !important;
        width: min(560px, 90vw) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   7. DROPDOWN — 햄버거 메뉴 (body 직속 fixed)
   ═══════════════════════════════════════════════════════════════════ */
#lobby-menu-dropdown {
    position: fixed;
    top: 60px;
    right: 12px;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: var(--apple-gap-xs);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-width: 200px;
    max-width: min(280px, 90vw);
    padding: var(--apple-gap-sm);
    background: var(--apple-card-bg);
    backdrop-filter: var(--apple-blur);
    -webkit-backdrop-filter: var(--apple-blur);
    border: none;
    border-radius: var(--apple-radius-sm);
    box-shadow: var(--apple-shadow);
}
#lobby-menu-dropdown.hidden { display: none; }
#lobby-menu-dropdown > * {
    flex-shrink: 0;             /* ★ 항목 안 줄어듬 — 로그아웃 항상 보임 */
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;            /* iOS 터치 표준 */
}

/* ═══════════════════════════════════════════════════════════════════
   8. UTILITY — 자주 쓰는 패턴
   ═══════════════════════════════════════════════════════════════════ */
.flex-row     { display: flex; flex-direction: row; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.no-shrink    { flex-shrink: 0; }
.gap-md       { gap: var(--apple-gap-md); }
.gap-lg       { gap: var(--apple-gap-lg); }

/* ═══════════════════════════════════════════════════════════════════
   9. RESPONSIVE — PC-First (≤ 1024px 에서만 fluid 폰트)
   · 레이아웃 재배치 X · 폰트만 비례 축소
   ═══════════════════════════════════════════════════════════════════ */
html { font-size: 16px; }
@media (max-width: 1024px) {
    html { font-size: clamp(13px, 1.4vw, 16px); }
}
@media (max-width: 600px) {
    html { font-size: clamp(11px, 2.6vw, 14px); }
    body:not(.game-popup-body) header.top-bar {
        gap: var(--apple-gap-sm);
        padding: var(--apple-gap-xs) var(--apple-gap-sm);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   10. PLAYER BADGE — 닉네임 잘림 방지 + 크기 정규화
   ═══════════════════════════════════════════════════════════════════ */
body.game-popup-body .player-badge {
    min-width: 180px !important;          /* ★ 박스 폭 확보 → 이름 안 잘림 */
}
body.game-popup-body .player-badge .pb-name {
    font-size: 16px !important;           /* ★ 12 → 16px */
    font-weight: 700 !important;
    color: var(--apple-text) !important;
    letter-spacing: -0.01em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: none !important;            /* 자르기 제한 해제 */
    min-width: 100px !important;           /* ★ 최소 폭 확보 */
}
body.game-popup-body .player-badge .pb-balance,
body.game-popup-body .player-badge .pb-gold {
    font-size: 15px !important;
    font-weight: 800 !important;
}
body.game-popup-body .player-badge .pb-status,
body.game-popup-body .player-badge .pb-penalties {
    font-size: 12px !important;            /* 10 → 12px */
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   11. SPECTATOR BADGE — 상단 관전자 인원수 카운트 키움
   ═══════════════════════════════════════════════════════════════════ */
body.game-popup-body #spectator-hud-badge {
    min-width: 64px !important;           /* ★ 사이즈 업 */
    height: 40px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    gap: 8px !important;
}
body.game-popup-body #spectator-hud-badge::before {
    width: 22px !important;
    height: 22px !important;
}
body.game-popup-body #spectator-hud-badge .hud-count,
body.game-popup-body #spectator-hud-count {
    font-size: 18px !important;           /* ★ 15 → 18px */
    font-weight: 800 !important;
    color: var(--apple-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   12. SOPHISTICATED TEXTURE — Low-Strain · 클래식 애플 톤
   ═══════════════════════════════════════════════════════════════════ */

/* ─ 글로벌 타이포 — 자간/행간 정돈 ─ */
html body {
    background: var(--apple-bg) !important;       /* ★ #F2F2F7 통일 */
    letter-spacing: -0.02em;
    line-height: 1.5;
}
html body * {
    letter-spacing: -0.02em;
}

/* ─ 게임 화면 / 로비 / 인증 — 모두 같은 오프화이트 톤 ─ */
body.game-popup-body,
body.game-popup-body #game-screen,
body.game-popup-body .game-layout,
body.game-popup-body #game-scaler {
    background: var(--apple-bg) !important;
}
/* [REMOVED 2026-05-11] table-viewport / oval-table / table-felt 라이트 배경 룰 제거
   - 이전: linear-gradient(apple-bg-alt → apple-bg) / var(--apple-surface) 흰 톤
   - 이후: apple-game.css v7+ 의 다크 펠트 + 다마스크 룰이 담당 */

/* ─ 좌석/플레이어 뒤 검정 공간 제거 ─ */
body.game-popup-body .seat-slot {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
body.game-popup-body #seats-container,
body.game-popup-body .seat-area {
    background: transparent !important;
    background-image: none !important;
}

/* ─ 카드 뒷면 — 매트 딥 네이비 + 미세 베벨 ─ */
body.game-popup-body .card-back {
    background: var(--apple-card-back) !important;
    background-image:
        linear-gradient(155deg,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 30%,
            rgba(0, 0, 0, 0.10) 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),       /* 상단 베벨 */
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),             /* 하단 베벨 */
        var(--apple-shadow-btn) !important;
    color: #FFFFFF !important;
}
body.game-popup-body .card-back #deck-count {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 800 !important;
    font-size: 20px !important;                         /* 18 → 20 */
    letter-spacing: -0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* ─ 카드 숫자 — SF Pro 스타일 + 굵은 폰트 + 큰 사이즈 ─ */
body.game-popup-body .hand-card,
body.game-popup-body .meld-card {
    background: var(--apple-surface) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--apple-shadow-btn) !important;
}
body.game-popup-body .hand-card .card-rank,
body.game-popup-body .meld-card .card-rank,
body.game-popup-body .hand-card .card-corner-top,
body.game-popup-body .hand-card .card-corner-bottom,
body.game-popup-body .meld-card .card-corner-top,
body.game-popup-body .meld-card .card-corner-bottom {
    font-family: -apple-system, "SF Pro Display", "SF Pro Rounded", system-ui, sans-serif !important;
    font-weight: 800 !important;                         /* ★ 더 굵게 */
    letter-spacing: -0.04em !important;                  /* 숫자는 더 좁게 */
}

/* ─ 상단 HUD — Glassmorphism (사용자 스펙) ─ */
body.game-popup-body header.game-hud,
body:not(.game-popup-body) header.top-bar {
    background: rgba(255, 255, 255, 0.6) !important;     /* ★ 사용자 스펙 */
    backdrop-filter: blur(25px) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(25px) brightness(1.1) !important;
    border: none !important;
    border-bottom: 1px solid var(--apple-divider) !important;
    box-shadow: none !important;
}

/* ─ 하단 컨트롤 바 — 동일 글래스 ─ */
body.game-popup-body footer.my-area,
body.game-popup-body .my-area {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(25px) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(25px) brightness(1.1) !important;
    border: none !important;
    border-top: 1px solid var(--apple-divider) !important;
    box-shadow: none !important;
}

/* ─ 버튼 — 원색 제거, 연한 회색 + 포인트 글자 ─ */
body.game-popup-body .action-btn,
body:not(.game-popup-body) .btn-sm,
body:not(.game-popup-body) .nav-btn {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(20px) brightness(1.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    color: var(--apple-text) !important;
    border-radius: 14px !important;
    box-shadow: var(--apple-shadow-btn) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}
body.game-popup-body .action-btn:hover,
body:not(.game-popup-body) .btn-sm:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10) !important;
}

/* ─ 스톱·로비로 등 빨강 강조 — 톤다운 시스템 레드 ─ */
body.game-popup-body .action-btn.btn-stop-action,
body.game-popup-body .action-btn#btn-stop,
body.game-popup-body .hud-action-leave,
body.game-popup-body .btn-danger {
    background: rgba(255, 69, 58, 0.92) !important;       /* ★ #FF453A 톤다운 시스템 레드 */
    color: #FFFFFF !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.game-popup-body .action-btn.btn-stop-action:hover,
body.game-popup-body .hud-action-leave:hover {
    background: #FF453A !important;
}

/* ─ 정보 박스 (잔액/포인트) — 패딩 1.5배 + 자간 ─ */
body:not(.game-popup-body) #user-balance,
body:not(.game-popup-body) #user-points {
    padding: 12px 21px !important;                        /* ★ 1.5배 (이전 8px 14px) */
    letter-spacing: -0.02em !important;
    line-height: 1.4 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(20px) brightness(1.05) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: var(--apple-shadow-btn) !important;
}
body.game-popup-body .player-badge {
    padding: 12px 18px !important;                         /* ★ 8 12 → 12 18 (1.5배) */
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(20px) brightness(1.05) !important;
    box-shadow: var(--apple-shadow-btn) !important;
    line-height: 1.5 !important;
}

/* ─ 로고가 정보를 침범하지 않도록 안전 마진 ─ */
body:not(.game-popup-body) .top-left {
    padding-right: var(--apple-gap-lg) !important;
    margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ROOM LIST (로비) — 텍스트 가독성 보정 (2026-05-08)
   · 방 카드 메타 폰트 13 → 14, 회색 톤 진하게
   · room-tag 11 → 12px, 색상 대비 확보
   · "최소 X원" 인라인 태그 / "👁 관전" 버튼 — 흰 카드 위에서 안 보이던 문제 해결
   ═══════════════════════════════════════════════════════════════════ */
body:not(.game-popup-body) .room-card .room-meta {
    font-size: 14px !important;
    color: #4A4A4F !important;
}
body:not(.game-popup-body) .room-card .room-meta span {
    color: #4A4A4F !important;
}
body:not(.game-popup-body) .room-tag {
    font-size: 12px !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}
body:not(.game-popup-body) .tag-waiting {
    background: rgba(48, 209, 88, 0.18) !important;
    color: #1F7A32 !important;
    font-weight: 700 !important;
}
body:not(.game-popup-body) .tag-playing {
    background: rgba(255, 69, 58, 0.18) !important;
    color: #C0271E !important;
    font-weight: 700 !important;
}
body:not(.game-popup-body) .tag-multiplier {
    background: rgba(255, 184, 0, 0.20) !important;
    color: #8B5A00 !important;
    font-weight: 800 !important;
}
/* "최소 X원" 인라인 태그 — JS 인라인 style 보다 specificity 높여 덮어씀 */
body:not(.game-popup-body) .room-card .room-tags span.room-tag[style] {
    background: #F2F2F7 !important;
    color: #4A4A4F !important;
    font-weight: 600 !important;
}
/* 관전 버튼 — 골드 → 다크 + 가시 배경 */
body:not(.game-popup-body) .room-card button[onclick*="spectateRoom"] {
    background: rgba(255, 184, 0, 0.18) !important;
    color: #8B5A00 !important;
    border: 1px solid rgba(255, 184, 0, 0.4) !important;
    font-weight: 700 !important;
}