/* ===== CSS 변수 (블랙 베이스 + 부드러운 골드) - theme.js에서 동적 적용 ===== */
        :root {
            --bg-primary: #0a0a0a;
            --bg-secondary: #141414;
            --bg-card: #161616;
            --bg-surface: #1f1f1f;
            --border-color: #2a2a2a;
            --border-focus: #c9a962;
            --accent-color: #c9a962;
            --glow-color: rgba(201, 169, 98, 0.3);
            --glow-intensity: 0.3;
            --text-primary: #f5f0e8;
            --text-secondary: #c9c4b8;
            --text-muted: #8a8578;
        }

        * { box-sizing: border-box; }
        body {
            margin: 0;
            padding: 0;
            background: var(--bg-primary);
            background-image: radial-gradient(ellipse at 50% 0%, rgba(201, 169, 98, 0.06) 0%, transparent 50%);
            color: var(--text-primary);
            font-family: 'Suit', -apple-system, BlinkMacSystemFont, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* ===== 상단 네비게이션 (미니멀 얇은 바) ===== */
        .top-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 40px 32px;
            background: rgba(10, 10, 10, 0.95);
            border-bottom: 1px solid rgba(201, 169, 98, 0.2);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .top-nav .nav-links {
            display: flex;
            gap: 32px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .top-nav .nav-item {
            padding: 0;
            background: none;
            border: none;
            border-radius: 0;
            cursor: pointer;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            transition: color 0.2s;
        }
        .top-nav .nav-item:hover {
            color: var(--accent-color);
        }
        .top-nav .nav-item.active {
            color: var(--accent-color);
            font-weight: 500;
        }
        .top-nav .nav-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            position: absolute;
            right: 32px;
        }
        .nav-icon-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: 0.2s;
        }
        .nav-icon-btn:hover {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .nav-icon-btn.active {
            border-color: var(--accent-color);
            color: var(--accent-color);
            background: rgba(201, 169, 98, 0.1);
        }
        .nav-icon-btn#btn-edit-mode.dirty {
            border-color: var(--accent-color);
            color: var(--accent-color);
            box-shadow: 0 0 12px rgba(201, 169, 98, 0.4);
        }
        .nav-icon-btn#btn-edit-mode.saving {
            opacity: 0.8;
            pointer-events: none;
        }
        @keyframes master-glow-pulse {
            0%, 100% { box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.25), 0 0 10px rgba(201, 169, 98, 0.12); }
            15% { box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.4), 0 0 18px rgba(201, 169, 98, 0.28); }
            30% { box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.25), 0 0 10px rgba(201, 169, 98, 0.12); }
            45% { box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.4), 0 0 20px rgba(201, 169, 98, 0.3); }
            60%, 100% { box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.25), 0 0 10px rgba(201, 169, 98, 0.12); }
        }
        .nav-icon-btn--master {
            width: auto;
            min-width: 92px;
            padding: 0 14px;
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            border-color: var(--accent-color);
            color: var(--accent-color);
            box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.25), 0 0 10px rgba(201, 169, 98, 0.12);
            animation: master-glow-pulse 2s ease-in-out infinite;
        }
        .nav-icon-btn--master:hover {
            animation: none;
            box-shadow: 0 0 0 1px var(--accent-color), 0 0 20px rgba(201, 169, 98, 0.4);
            background: rgba(201, 169, 98, 0.08);
        }
        .nav-icon-btn#btn-login {
            width: auto;
            min-width: 40px;
            padding: 0 10px;
            gap: 6px;
        }
        .nav-icon-btn#btn-login .auth-label {
            font-size: 13px;
            white-space: nowrap;
        }
        /* 메인 전광판: 오른쪽→왼쪽 스크롤, 개인 전광판과 동일 글로우·배경 그라데이션 */
        .led-signboard {
            position: relative;
            overflow: hidden;
            min-height: 3em;
            box-sizing: border-box;
            background: linear-gradient(180deg, #0d0d0d 0%, #141414 100%);
            border-bottom: 1px solid rgba(201, 169, 98, 0.35);
            color: var(--accent-color);
            font-family: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.04em;
            padding: 10px 0;
            line-height: 1.4;
            text-shadow: 0 0 8px rgba(201, 169, 98, 0.4);
        }
        .led-signboard-track {
            position: absolute;
            left: 100%;
            display: inline-block;
            white-space: nowrap;
            animation: led-marquee 35s linear infinite;
        }
        .led-signboard-text {
            padding-right: 4em;
        }
        .led-signboard--full {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            box-sizing: border-box;
        }
        /* 한 사이클 = 100vw 이동 → 해상도 무관 동일 체감 속도 */
        @keyframes led-marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(var(--led-marquee-shift, -100vw)); }
        }
        /* 토스트 (저장됨/저장 실패) */
        .toast-container {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 300;
            pointer-events: none;
        }
        .toast {
            padding: 12px 20px;
            border-radius: 8px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            color: var(--text-primary);
            font-size: 14px;
            white-space: nowrap;
            animation: toast-in 0.25s ease;
        }
        .toast.success { border-color: rgba(168, 184, 106, 0.6); box-shadow: 0 0 12px rgba(168, 184, 106, 0.25); }
        .toast.error { border-color: rgba(232, 76, 76, 0.5); color: #e84c4c; }
        @keyframes toast-in {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== 메인 레이아웃: 좌측광고 | 콘텐츠 | 우측광고 ===== */
        .main-layout {
            display: flex;
            flex: 1;
            min-height: 0;
            width: 100%;
        }
        .ad-side {
            width: 160px;
            min-width: 160px;
            background-color: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 20px 0;
        }
        .ad-side.right {
            border-right: none;
            border-left: 1px solid var(--border-color);
        }
        .ad-placeholder {
            width: 120px;
            min-height: 600px;
            background: repeating-linear-gradient(
                -45deg,
                var(--bg-surface),
                var(--bg-surface) 10px,
                var(--bg-card) 10px,
                var(--bg-card) 20px
            );
            border: 1px dashed var(--border-color);
            border-radius: 8px;
            color: var(--text-muted);
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 10px;
        }
        @media (max-width: 768px) { .ad-side { display: none; } }

        /* ===== 메인 콘텐츠 ===== */
        .main-content {
            flex: 1;
            padding: 0;
            overflow-y: auto;
            width: 100%;
            position: relative;
        }

        /* ===== 히어로 섹션 ===== */
        .hero-section {
            position: relative;
            height: 280px;
            background: linear-gradient(135deg, rgba(20, 18, 15, 0.98) 0%, rgba(10, 10, 10, 0.98) 50%, rgba(25, 22, 18, 0.98) 100%);
            display: flex;
            align-items: flex-end;
            padding: 0 32px 40px;
            border-bottom: 1px solid rgba(201, 169, 98, 0.15);
        }
        .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 169, 98, 0.08) 0%, transparent 60%);
            pointer-events: none;
        }
        .hero-content {
            position: relative;
            z-index: 1;
        }
        .hero-title { font-size: 28px; font-weight: 600; letter-spacing: 2px; margin: 0 0 8px; color: var(--text-primary); }
        .hero-subtitle { font-size: 14px; color: var(--text-muted); letter-spacing: 1px; }

        /* ===== 원형 게임 썸네일 ===== */
        .game-thumbnails {
            display: flex;
            justify-content: center;
            gap: 24px;
            padding: 32px 24px;
            overflow-x: auto;
            border-bottom: 1px solid var(--border-color);
        }
        .game-thumb {
            flex-shrink: 0;
            width: 88px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .game-thumb:hover { transform: scale(1.05); }
        .game-thumb.active .game-thumb-circle { border-color: var(--accent-color); box-shadow: 0 0 24px var(--glow-color); }
        .game-thumb.active .game-thumb-name { color: var(--accent-color); }
        .game-thumb-circle {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            padding: 4px;
            background: var(--bg-card);
            transition: 0.2s;
            overflow: hidden;
        }
        .game-thumb-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        .game-thumb-name { font-size: 12px; color: var(--text-muted); letter-spacing: 0.5px; }
        .game-thumb-drag-handle {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 24px;
            height: 24px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            cursor: grab;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s;
            font-size: 10px;
            color: var(--text-muted);
            line-height: 1;
        }
        .game-thumb:hover .game-thumb-drag-handle { opacity: 1; }
        .game-thumb-drag-handle:active { cursor: grabbing; }
        .game-thumb.dragging { opacity: 0.5; }
        .game-thumb.drag-over { transform: scale(1.1); }

        /* 게임 썸네일 제거 버튼 (편집 모드에서만) */
        .game-thumb-remove-btn {
            position: absolute;
            top: -6px;
            left: -6px;
            width: 20px;
            height: 20px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: var(--text-muted);
            line-height: 1;
            transition: 0.2s;
            z-index: 2;
        }
        body.edit-mode .game-thumb-remove-btn { display: flex; }
        .game-thumb-remove-btn:hover { border-color: #e84c4c; color: #e84c4c; background: var(--bg-card); }

        /* 게임 추가 버튼 */
        .game-thumb-add {
            flex-shrink: 0;
            width: 88px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: transform 0.2s;
            display: none;
        }
        body.edit-mode .game-thumb-add { display: flex; }
        .game-thumb-add:hover { transform: scale(1.05); }
        .game-thumb-add-circle {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            border: 2px dashed var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-card);
            color: var(--text-muted);
            font-size: 24px;
            transition: 0.2s;
        }
        .game-thumb-add:hover .game-thumb-add-circle {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .game-thumb-add .game-thumb-name { color: var(--text-muted); font-size: 12px; }

        /* 게임 추가 모달 게임 선택 그리드 */
        .game-select-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 16px;
        }
        .game-select-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 8px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            transition: 0.2s;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .game-select-item:hover:not(.disabled) {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .game-select-item.disabled {
            opacity: 0.4;
            cursor: default;
        }
        .game-select-item img { width: 36px; height: 36px; border-radius: 50%; }
        
        .edit-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            background: rgba(20, 20, 20, 0.8);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: 0.2s;
        }
        .card:hover .edit-btn { opacity: 1; }
        .edit-btn:hover {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        
        .content-edit-item {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 10px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 6px;
        }
        .content-edit-item input {
            flex: 1;
            padding: 8px 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 14px;
        }
        .content-edit-item .btn-remove {
            width: 32px;
            height: 32px;
            padding: 0;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content-edit-item .btn-remove:hover {
            border-color: #ff4444;
            color: #ff4444;
        }

        /* ===== 콘텐츠 영역 ===== */
        .content-inner {
            max-width: 1100px;
            margin: 0 auto;
            padding: 40px 24px 60px;
        }

        /* ===== 게임 페이지 공지 배너 (LED 전광판, 항상 최상단·이동 불가) ===== */
        .game-notice-banner-standalone {
            margin-bottom: 16px;
        }
        .game-notice-banner-strip {
            display: flex;
            align-items: center;
            min-height: 48px;
            padding: 0 12px 0 16px;
            background: linear-gradient(180deg, #0d0d0d 0%, #141414 100%);
            border: 1px solid rgba(201, 169, 98, 0.35);
            border-radius: 6px;
            box-shadow: inset 0 1px 0 rgba(201, 169, 98, 0.08), 0 0 12px rgba(0, 0, 0, 0.4);
        }
        .game-notice-banner-content {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
        .game-notice-banner-actions {
            flex-shrink: 0;
            display: none;
            align-items: center;
            gap: 6px;
            margin-left: 8px;
        }
        body.edit-mode.is-master .game-notice-banner-actions--edit-only {
            display: flex;
        }
        .game-notice-banner-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: rgba(201, 169, 98, 0.1);
            border: 1px solid rgba(201, 169, 98, 0.3);
            border-radius: 6px;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            transition: color 0.2s, border-color 0.2s, background 0.2s;
        }
        .game-notice-banner-btn:hover {
            color: var(--accent-color);
            border-color: rgba(201, 169, 98, 0.5);
            background: rgba(201, 169, 98, 0.15);
        }
        .game-notice-banner-inner {
            overflow: hidden;
            padding: 12px 0;
            color: var(--accent-color);
            font-size: 15px;
            font-weight: bold;
            letter-spacing: 0.5px;
            text-shadow: 0 0 8px rgba(201, 169, 98, 0.4);
            -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
        }
        .game-notice-marquee {
            display: inline-flex;
            white-space: nowrap;
            animation: notice-marquee 30s linear infinite;
        }
        .game-notice-marquee-text {
            padding-right: 2em;
            flex-shrink: 0;
        }
        /* 여백 있음: 2복사 + 각 span 최소 50vw → 텅텅 빈 느낌 */
        .game-notice-marquee--spaced .game-notice-marquee-text {
            min-width: 50vw;
        }
        @keyframes notice-marquee {
            0%   { transform: translateX(0); }
            100% { transform: translateX(calc(-100% / var(--marquee-copies, 2))); }
        }

        /* ===== 카드 그리드 (이미지 상단 스타일) ===== */
        .card {
            background: rgba(22, 22, 22, 0.95);
            border-radius: 8px;
            margin-bottom: 24px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            border-color: rgba(201, 169, 98, 0.4);
            box-shadow: 0 4px 24px rgba(0,0,0,0.3);
        }
        .card-image {
            height: 120px;
            background: linear-gradient(135deg, rgba(201, 169, 98, 0.1) 0%, rgba(30, 28, 24, 0.9) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card-image img { width: 48px; height: 48px; opacity: 0.9; }
        .card-body { padding: 20px 24px; }
        .card-body h2 {
            margin-top: 0;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            color: var(--accent-color);
            font-size: 16px;
            letter-spacing: 0.5px;
        }

        /* ===== 트래커 페이지: 게임 아코디언 (3~20개 확장) ===== */
        .game-accordion { display: flex; flex-direction: column; gap: 12px; }
        .game-section {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .game-section:hover, .game-section.open {
            border-color: var(--border-focus);
            box-shadow: 0 0 16px var(--glow-color);
        }
        .game-section-header {
            padding: 16px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--bg-surface);
            user-select: none;
        }
        .game-section-header:hover { background-color: var(--bg-card); }
        .game-section-title { font-size: 18px; font-weight: bold; }
        .game-section-toggle { transition: transform 0.2s; }
        .game-section.open .game-section-toggle { transform: rotate(180deg); }
        .game-section-body {
            padding: 20px;
            border-top: 1px solid var(--border-color);
            display: none;
        }
        .game-section.open .game-section-body { display: block; }

        .check-group { margin-bottom: 20px; }
        .check-group:last-child { margin-bottom: 0; }
        .check-group-title { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
        .check-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
        }
        .check-item:last-child { border-bottom: none; }
        .check-item:hover { color: var(--accent-color); }
        .check-box {
            width: 22px; height: 22px;
            border: 2px solid var(--border-color);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(20, 20, 20, 0.6);
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
            font-size: 12px;
        }
        .check-item:active .check-box { transform: scale(0.92); }
        .check-item.checked .check-box {
            background: linear-gradient(180deg, var(--accent-color) 0%, #b89850 100%);
            border-color: var(--accent-color);
            color: #000;
            box-shadow: 0 0 12px var(--glow-color);
        }
        .check-item.checked .check-label { text-decoration: line-through; color: var(--text-muted); transition: color 0.2s ease, text-decoration-color 0.2s ease; }

        /* ===== 설정 모달 (테마 커스터마이징) ===== */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 200;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.open { display: flex; }
        .modal {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 28px;
            max-width: 480px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 0 30px var(--glow-color);
        }
        .modal h2 { margin-top: 0; }
        /* 첫 로그인 모달: 중앙 정렬 + 버튼 디자인 */
        #first-login-modal .modal {
            padding-top: 18px;
            border: 1px solid rgba(201, 169, 98, 0.45);
            box-shadow: 0 0 24px var(--glow-color), 0 0 0 1px rgba(201, 169, 98, 0.15);
        }
        .first-login-modal-inner {
            max-width: 380px;
            text-align: center;
        }
        .first-login-title {
            margin: 0 0 6px;
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.3px;
        }
        .first-login-sub {
            margin: 0 0 0;
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.3px;
            line-height: 1.4;
        }
        .first-login-desc {
            margin: 24px 0;
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        .first-login-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: stretch;
        }
        .first-login-btn {
            padding: 12px 20px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.3px;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        }
        /* 기존 설정 가져오기: 다크 배경 + 금색 텍스트/테두리 (가독성·선택 구분) */
        .first-login-btn-import {
            background: var(--bg-surface);
            color: var(--accent-color);
            border: 1px solid rgba(201, 169, 98, 0.5);
            box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.15);
        }
        .first-login-btn-import:hover {
            border-color: var(--accent-color);
            box-shadow: 0 0 12px rgba(201, 169, 98, 0.2);
            background: rgba(201, 169, 98, 0.08);
        }
        .first-login-btn-new {
            background: var(--bg-surface);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }
        .first-login-btn-new:hover {
            border-color: rgba(201, 169, 98, 0.4);
            color: var(--accent-color);
            background: rgba(201, 169, 98, 0.06);
        }
        .theme-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        .theme-row label { min-width: 100px; color: var(--text-secondary); }
        .theme-row input[type="color"] {
            width: 48px; height: 36px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            background: transparent;
        }
        .theme-row input[type="text"] {
            flex: 1;
            padding: 8px 12px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
        }
        .theme-actions {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }
        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-weight: bold;
            transition: 0.2s;
        }
        .btn-primary {
            background-color: var(--accent-color);
            color: #000;
        }
        .btn-primary:hover { box-shadow: 0 0 12px var(--glow-color); }
        .btn-secondary {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            font-size: 13px;
            letter-spacing: 0.5px;
        }
        .btn-secondary:hover {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .btn-icon {
            width: 36px;
            height: 36px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 16px;
            line-height: 1;
        }
        .theme-actions--icons {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }
        .widget-settings-cancel {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .widget-settings-cancel:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(201, 169, 98, 0.35);
            color: var(--text-secondary);
        }
        .widget-settings-save {
            background: rgba(201, 169, 98, 0.18);
            border: 1px solid rgba(201, 169, 98, 0.4);
            color: var(--accent-color);
            transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
        }
        .widget-settings-save:hover {
            background: rgba(201, 169, 98, 0.28);
            border-color: rgba(201, 169, 98, 0.6);
            box-shadow: 0 0 12px rgba(201, 169, 98, 0.2);
        }

        /* 공지 배너 설정: 스크롤 속도·적용 일시 등 공통 박스 */
        .notice-setting-box {
            padding: 12px 14px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }
        .notice-setting-box.widget-settings-speed-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .notice-speed-input-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px 6px 12px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .notice-speed-input-wrap:focus-within {
            border-color: rgba(201, 169, 98, 0.5);
            box-shadow: 0 0 0 2px rgba(201, 169, 98, 0.15);
        }
        .notice-speed-input {
            width: 44px;
            padding: 0;
            border: none;
            background: none;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            outline: none;
            -moz-appearance: textfield;
        }
        .notice-speed-input::-webkit-outer-spin-button,
        .notice-speed-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .notice-speed-input:hover,
        .notice-speed-input:focus {
            color: var(--accent-color);
        }
        .notice-speed-hint {
            font-size: 12px;
            color: var(--text-muted);
        }
        .notice-banner-game-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .notice-banner-game-item:hover {
            background: var(--bg-surface);
        }
        .notice-banner-game-item.selected {
            background: rgba(201, 169, 98, 0.12);
            border: 1px solid rgba(201, 169, 98, 0.35);
        }
        .notice-banner-game-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            flex-shrink: 0;
        }
        .notice-banner-game-name {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* 사각 건빵 스타일 토글 (게임 목록) - 소형 */
        .notice-banner-game-toggle-wrap {
            flex-shrink: 0;
            position: relative;
            display: inline-block;
            width: 38px;
            height: 22px;
            cursor: pointer;
        }
        .notice-banner-game-toggle-wrap .ws-toggle-track {
            position: absolute;
            inset: 0;
            border-radius: 5px;
            border: 1px solid var(--border-color);
            background: var(--bg-surface);
            transition: background 0.2s, border-color 0.2s;
        }
        .notice-banner-game-toggle-wrap .ws-toggle-dot {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 2px;
            left: 2px;
            border-radius: 4px;
            background: var(--text-muted);
            transition: left 0.2s, background 0.2s;
        }
        .notice-banner-game-toggle-wrap input:checked + .ws-toggle-track .ws-toggle-dot {
            left: calc(100% - 16px - 2px);
            background: #000;
        }
        .notice-banner-game-toggle-wrap input:checked + .ws-toggle-track {
            background: var(--accent-color);
            border-color: var(--accent-color);
        }
        .notice-banner-game-toggle-wrap input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }
        /* 꽉 차게 표시: 박스는 .notice-setting-box, 토글 소형 */
        .notice-setting-box.notice-banner-dense-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .notice-banner-dense-row .notice-dense-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .notice-banner-dense-row .toggle-cracker-dense {
            position: relative;
            display: inline-block;
            width: 38px;
            height: 22px;
            cursor: pointer;
        }
        .notice-banner-dense-row .toggle-cracker-dense .ws-toggle-track {
            position: absolute;
            inset: 0;
            border-radius: 5px;
            border: 1px solid var(--border-color);
            background: var(--bg-surface);
            transition: background 0.2s, border-color 0.2s;
        }
        .notice-banner-dense-row .toggle-cracker-dense .ws-toggle-dot {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 2px;
            left: 2px;
            border-radius: 4px;
            background: var(--text-muted);
            transition: left 0.2s, background 0.2s;
        }
        .notice-banner-dense-row .toggle-cracker-dense input:checked + .ws-toggle-track .ws-toggle-dot {
            left: calc(100% - 16px - 2px);
            background: #000;
        }
        .notice-banner-dense-row .toggle-cracker-dense input:checked + .ws-toggle-track {
            background: var(--accent-color);
            border-color: var(--accent-color);
        }
        .notice-banner-dense-row .toggle-cracker-dense input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }
        .widget-settings-extra .ws-toggle-track {
            position: absolute;
            inset: 0;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background: var(--bg-surface);
            transition: 0.2s;
        }
        .widget-settings-extra .ws-toggle-track .ws-toggle-dot {
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 4px;
            top: 2px;
            left: 2px;
            background: var(--text-muted);
            transition: 0.2s;
        }

        /* ===== 겜포 페이지 그리드 ===== */
        .game-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 32px;
        }
        .game-info-grid .card h2 {
            margin-top: 0;
            margin-bottom: 12px;
            font-size: 18px;
            letter-spacing: 0.5px;
        }
        .info-row { margin: 10px 0; padding: 5px 0; border-bottom: 1px solid var(--border-color); }
        .info-row:last-child { border-bottom: none; }
        .info-row .label { color: var(--text-muted); margin-right: 8px; }
        .info-row .value { color: var(--accent-color); }
        .quick-links { display: flex; flex-wrap: wrap; gap: 12px; }
        .quick-links a {
            color: var(--accent-color);
            text-decoration: none;
            padding: 8px 16px;
            background-color: var(--bg-surface);
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: 0.2s;
        }
        .quick-links a:hover {
            background-color: var(--accent-color);
            color: #000;
            border-color: var(--accent-color);
        }

        .page-content { display: none; }
        .page-content.active { display: block; }

        /* ===== 게임별 페이지 ===== */
        .game-page { display: none; }
        .game-page.active { display: block; }
        .game-page-title { margin-top: 0; margin-bottom: 8px; font-size: 24px; letter-spacing: 1px; }
        .game-page-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 28px; letter-spacing: 0.5px; }
        .game-overview-card {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
            margin-bottom: 24px;
        }
        .game-overview-item {
            padding: 12px 16px;
            background: rgba(30, 30, 30, 0.8);
            border-radius: 4px;
            border: 1px solid var(--border-color);
            border-left: 2px solid var(--accent-color);
        }
        .game-overview-item .label { color: var(--text-muted); font-size: 12px; }
        .game-overview-item .value { color: var(--accent-color); }
        .game-overview-item a, .game-page-subtitle a {
            color: var(--accent-color);
            text-decoration: none;
        }
        .game-overview-item a:hover, .game-page-subtitle a:hover { text-decoration: underline; }
        .overview-progress { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 8px; }
        .overview-progress-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
        .overview-progress-label { color: var(--text-muted); min-width: 32px; }
        .overview-progress-count { color: var(--text-secondary); min-width: 36px; font-variant-numeric: tabular-nums; }
        .overview-progress-bar { flex: 1; height: 6px; background: var(--bg-surface); border-radius: 3px; overflow: hidden; }
        .overview-progress-fill {
            height: 100%;
            min-width: 0;
            background: var(--accent-color);
            border-radius: 3px;
            transition: width 1s cubic-bezier(0.55, 0, 0.85, 1);
        }
        .overview-progress-fill.complete {
            background: rgba(168, 184, 106, 0.9);
        }
        .game-section-title { font-size: 16px; margin: 24px 0 12px; color: var(--accent-color); }

        /* 게임 이미지 */
        .game-logo, .game-page-icon {
            width: 32px;
            height: 32px;
            vertical-align: middle;
            margin-right: 10px;
            border-radius: 6px;
        }
        .game-tab-icon {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 8px;
            border-radius: 4px;
        }

        /* ===== 푸터 ===== */
        .footer {
            padding: 24px 32px;
            border-top: 1px solid var(--border-color);
            text-align: center;
            font-size: 12px;
            color: var(--text-muted);
            letter-spacing: 0.5px;
        }

        /* 위젯 대시보드: .card 재사용, 최소 추가 */
        .widget-slot .widget-slot-body:empty { min-height: 40px; }

        /* 위젯 편집 모드 & 헤더 */
        .widget-dashboard { position: relative; min-height: 400px; }
        .widget-dashboard.widget-dashboard-has-layout { min-height: 720px; }
        .widget-slot { transition: box-shadow 0.2s, border-color 0.2s, outline 0.2s; }
        /* 편집 모드 기본: 중립 테두리만. 드래그 시 valid/invalid는 삽입 라인(인디케이터)에만 표시 */
        body.edit-mode .widget-dashboard .widget-slot,
        body.edit-mode .widget-dashboard .card.widget-slot {
            border: 1px solid rgba(201, 169, 98, 0.25);
            box-shadow: none;
            outline: none;
            background-image: linear-gradient(rgba(201,169,98,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201,169,98,0.03) 1px, transparent 1px);
            background-size: 12px 12px;
        }
        .widget-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-surface);
            min-height: 44px;
            min-width: 0;
        }
        .widget-drag-handle {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
            cursor: default;
            font-size: 12px;
            user-select: none;
        }
        body.edit-mode .widget-drag-handle { cursor: grab; }
        body.edit-mode .widget-drag-handle:active { cursor: grabbing; }
        .widget-drag-handle:hover { border-color: var(--accent-color); color: var(--accent-color); }
        .widget-title {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 600;
            color: var(--accent-color);
            letter-spacing: 0.5px;
        }
        .widget-settings-btn {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: 0.2s;
        }
        .widget-settings-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }
        body.edit-mode:not(.is-master) .widget-settings-btn { display: none !important; }
        body.widget-dragging { user-select: none; }
        body.widget-dragging * { cursor: move !important; }

        /* ghost: 드래그 프리뷰. 카드에는 glow/outline 없음(인디케이터에만 valid/invalid) */
        .widget-ghost {
            position: absolute;
            pointer-events: none;
            z-index: 50;
            border: 1px solid rgba(201, 169, 98, 0.3);
            box-shadow: none;
            background: rgba(201, 169, 98, 0.06);
            border-radius: 8px;
            transition: left 0.05s ease-out, top 0.05s ease-out, width 0.05s ease-out, height 0.05s ease-out;
        }

        /* 삽입 위치 라인(2px): gap에 있을 때만 표시. drop-valid/drop-invalid는 여기에만 적용 */
        .widget-drop-indicator {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            pointer-events: none;
            z-index: 60;
            border-radius: 0;
            display: none;
        }
        .widget-drop-indicator.drop-valid {
            background: rgba(168, 184, 106, 0.9);
            box-shadow: 0 0 6px rgba(168, 184, 106, 0.5);
        }
        .widget-drop-indicator.drop-invalid {
            background: rgba(232, 76, 76, 0.9);
            box-shadow: 0 0 6px rgba(232, 76, 76, 0.5);
        }

        /* 편집 모드: 그리드 가이드 (12컬럼, row 40px + gap 12px) */
        body.edit-mode .widget-dashboard.widget-dashboard-has-layout {
            background-image:
                linear-gradient(to right, rgba(201,169,98,0.08) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(201,169,98,0.08) 1px, transparent 1px);
            background-size: calc((100% - 11 * 12px) / 12 + 12px) 52px;
            background-position: 0 0;
        }

        /* 드롭 거부: 빨간 테두리 + 흔들림 */
        .widget-slot.widget-invalid {
            outline: 2px solid rgba(220, 80, 80, 0.9);
            outline-offset: -2px;
            animation: widget-shake 0.4s ease-in-out;
        }
        .widget-slot.widget-insert-error {
            outline-color: rgba(220, 120, 60, 0.95);
        }
        .widget-slot.widget-dragging-source {
            opacity: 0.4;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }
        .widget-slot.widget-drag-over {
            outline: 2px dashed var(--accent-color);
            outline-offset: -2px;
        }
        @keyframes widget-shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-6px); }
            40% { transform: translateX(6px); }
            60% { transform: translateX(-4px); }
            80% { transform: translateX(4px); }
        }

        /* 위젯 숨기기 버튼 (편집 모드에서만 표시) */
        .widget-remove-btn {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            display: none;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 14px;
            transition: 0.2s;
        }
        body.edit-mode.is-master .widget-remove-btn { display: flex; }
        .widget-remove-btn:hover { border-color: #e84c4c; color: #e84c4c; }

        /* 위젯 추가 패널 (편집 모드에서만 표시) */
        .widget-add-panel {
            display: none;
            margin-top: 16px;
            padding: 16px;
            background: var(--bg-card);
            border: 1px dashed var(--border-color);
            border-radius: 8px;
        }
        body.edit-mode .widget-add-panel { display: block; }
        .widget-add-panel-title {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }
        .widget-add-list {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .widget-add-chip {
            padding: 6px 14px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: 0.2s;
        }
        .widget-add-chip:hover {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }

        /* ===== 위젯 리사이즈 핸들 (하단) ===== */
        .widget-resize-handle {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 8px;
            cursor: ns-resize;
            display: none;
            align-items: center;
            justify-content: center;
            background: transparent;
            border-top: 2px solid transparent;
            transition: border-color 0.15s;
            z-index: 10;
        }
        body.edit-mode .widget-resize-handle { display: flex; }
        .widget-resize-handle:hover { border-top-color: var(--accent-color); }
        .widget-resize-handle::after {
            content: '';
            width: 32px;
            height: 3px;
            border-radius: 2px;
            background: var(--border-color);
            transition: background 0.15s;
        }
        .widget-resize-handle:hover::after { background: var(--accent-color); }
        body.widget-resizing { user-select: none; }
        body.widget-resizing * { cursor: ns-resize !important; }

/* ===== 위젯 스택 (Flexbox 세로 배치) ===== */
.widget-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.widget-stack .widget-slot {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.widget-stack .widget-slot .widget-slot-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.widget-stack-drop-indicator {
  height: 4px;
  flex-shrink: 0;
  background: var(--accent-color);
  border-radius: 2px;
  pointer-events: none;
  display: none;
  box-shadow: 0 0 8px var(--glow-color);
  transition: box-shadow 0.15s ease;
}
.widget-stack-drop-indicator.visible {
  display: block;
  box-shadow: 0 0 12px var(--glow-color);
}
.widget-drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.65;
  border-radius: 8px;
  border: 1px dashed var(--accent-color);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  background: transparent !important;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}
.widget-drag-ghost .widget-header,
.widget-drag-ghost .card-body,
.widget-drag-ghost .card-image {
  background: transparent !important;
}
.widget-drag-ghost .widget-drag-handle {
  opacity: 0.9;
}
.widget-dashboard.widget-dashboard-has-layout {
  min-height: auto;
}

/* ===== 대시보드 뷰 (전체 진행률 카드) ===== */
.dashboard-summary {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-color);
}
.dashboard-summary-title { font-size: 18px; margin: 0 0 8px; color: var(--text-primary); }
.dashboard-summary-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 24px;
}
.dashboard-game-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  transition: 0.2s;
}
.dashboard-game-card:hover { border-color: rgba(201, 169, 98, 0.4); }
.dashboard-game-card.complete { border-color: var(--accent-color); box-shadow: 0 0 12px var(--glow-color); }
.dashboard-game-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dashboard-game-card-header img { width: 40px; height: 40px; border-radius: 50%; }
.dashboard-game-card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.dashboard-progress-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.dashboard-progress-row:last-child { margin-bottom: 0; }
.dashboard-progress-label { color: var(--text-muted); min-width: 48px; }
.dashboard-progress-bar { flex: 1; height: 8px; background: var(--bg-surface); border-radius: 4px; overflow: hidden; }
.dashboard-progress-fill {
  height: 100%;
  min-width: 0;
  background: var(--accent-color);
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.55, 0, 0.85, 1);
}
.dashboard-progress-fill.complete { background: rgba(168, 184, 106, 0.8); }
.dashboard-go-link { margin-top: 12px; font-size: 13px; color: var(--accent-color); cursor: pointer; }
.dashboard-go-link:hover { text-decoration: underline; }

/* ===== 던전 위젯 - 카드 그리드 (다크/골드 톤) ===== */
.dungeon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 12px 0;
}

.dungeon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: none;
  overflow: hidden;
}
.dungeon-card:hover {
  border-color: rgba(201, 169, 98, 0.5);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(201, 169, 98, 0.15);
}

.dungeon-card.checked {
  border-color: var(--accent-color);
  box-shadow: 0 0 16px var(--glow-color);
  opacity: 0.85;
}
.dungeon-card.checked .dungeon-card-label {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* 커버 영역: 그라데이션 플레이스홀더 (풍경/분위기 느낌) */
.dungeon-card-cover {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: linear-gradient(165deg, #1a2332 0%, #0d1219 50%, #1f2a1a 100%);
}
.dungeon-card-cover[data-cover="1"] {
  background: linear-gradient(165deg, #2a1f2e 0%, #151018 50%, #1a1528 100%);
}
.dungeon-card-cover[data-cover="2"] {
  background: linear-gradient(165deg, #1e2d1f 0%, #0f180d 50%, #1a2520 100%);
}
.dungeon-card-cover[data-cover="3"] {
  background: linear-gradient(165deg, #25201a 0%, #141210 50%, #2a2218 100%);
}
.dungeon-card-cover[data-cover="4"] {
  background: linear-gradient(165deg, #1a1f2a 0%, #0e1118 50%, #1c2430 100%);
}
.dungeon-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.6) 85%);
  pointer-events: none;
}

.dungeon-card-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  z-index: 1;
}

.dungeon-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  gap: 4px;
  z-index: 1;
}
body.edit-mode .dungeon-card-actions { display: flex; }

.dungeon-card .dungeon-edit-btn,
.dungeon-card .dungeon-delete-btn {
  width: 26px; height: 26px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: 0.15s;
}
.dungeon-card .dungeon-delete-btn:hover { border-color: #e84c4c; color: #e84c4c; background: rgba(232,76,76,0.15); }
.dungeon-card .dungeon-edit-btn:hover { border-color: var(--accent-color); color: var(--accent-color); background: rgba(201,169,98,0.2); }

/* 카드 본문: 타이틀 + 푸터 바 */
.dungeon-card-body {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(22, 22, 22, 0.95);
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.dungeon-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.dungeon-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 20px;
  font-size: 11px;
  color: var(--text-muted);
  width: 100%;
  text-align: center;
}
.dungeon-card .dungeon-timer {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.dungeon-card .dungeon-timer.urgent { color: #e84c4c; font-weight: 600; }
.dungeon-card .dungeon-timer.warning { color: var(--accent-color); }
.dungeon-card .dungeon-timer.done {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 12px;
}

/* 항목 추가 카드 */
.dungeon-card-add {
  border-style: dashed;
  border-width: 2px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  gap: 6px;
  transition: 0.2s;
  display: none;
  background: var(--bg-surface);
}
body.edit-mode .dungeon-card-add { display: flex; }
.dungeon-card-add:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: rgba(201, 169, 98, 0.06);
}
.dungeon-card-add span:first-child { font-size: 22px; }

.dungeon-item-form {
  margin-top: 8px;
  padding: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dungeon-form-icon-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dungeon-form-icon-picker-label {
  font-size: 12px;
  color: var(--text-muted);
}
.dungeon-form-icon-picker {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.dungeon-icon-option {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.dungeon-icon-option:hover {
  border-color: rgba(201, 169, 98, 0.5);
  background: rgba(201, 169, 98, 0.08);
}
.dungeon-icon-option.selected {
  border-color: var(--accent-color);
  background: rgba(201, 169, 98, 0.15);
  box-shadow: 0 0 0 1px var(--accent-color);
}

.dungeon-item-form input:not([type="hidden"]),
.dungeon-item-form select {
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.dungeon-item-form input:focus,
.dungeon-item-form select:focus { border-color: var(--accent-color); }
.dungeon-form-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px;
}

.dungeon-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ===== 하단 탭바 (모바일에서만 표시) ===== */
.bottom-tab-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: rgba(10, 10, 10, 0.98);
  border-top: 1px solid rgba(201, 169, 98, 0.2);
  z-index: 100;
  align-items: center;
  justify-content: space-around;
}
.bottom-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10px;
  transition: color 0.2s;
}
.bottom-tab-item:hover,
.bottom-tab-item:focus {
  color: var(--accent-color);
}
.bottom-tab-item.active {
  color: var(--accent-color);
}
.bottom-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-tab-icon svg {
  width: 22px;
  height: 22px;
}

/* ===== 반응형 (모바일 ~768px) ===== */
@media (max-width: 768px) {
  .top-nav { display: none; }
  .bottom-tab-bar { display: flex; }
  .main-content {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 16px);
  }
  .ad-side { display: none; }
  .game-thumbnails { padding: 16px 12px; gap: 12px; }
  .game-thumb-circle { width: 56px; height: 56px; }
  .content-inner { padding: 20px 12px 40px; }
  .dashboard-cards { grid-template-columns: 1fr; padding: 16px 12px; }
  .dashboard-summary { padding: 16px 12px; }
}