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

/* ==========================================================================
   [Theme Config] - ?대옒 ?됱긽 肄붾뱶 ?쒖쨪濡? ?꾩껜 遺꾩꽍?댁쓣 蹂€寃쏀븬?? ?덉쑝.
   - Purple: #3182f6 / Toss Blue: #3182f6 / Kakao Yellow: #fdd835
   ========================================================================== */
:root {
    --primary-color: #3182f6;
    --primary-rgb: 49, 130, 246;
    --active-text-color: #fff;


    --secondary-color: #03dac6;
    --background-color: #0b0b0f;
    --surface-color: rgba(25, 25, 35, 0.7);
    --glass-border: rgba(var(--primary-rgb), 0.2);
    --text-color: #e0e0e0;
    --accent-glow: rgba(var(--primary-rgb), 0.3);
    --card-bg: rgba(255, 255, 255, 0.03);

}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}

/* Base Layout (Mobile First) */
body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: #0b0b0f;
    color: var(--text-color);
    min-height: 100vh;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Sidebar Navigation */
.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%; /* [수정] 100vw -> 100% (스크롤바 포함 문제 방지) */
    overflow-x: hidden; /* [추가] 가로 스크롤 강제 방지 */
    position: relative;
}

.sidebar {
    width: 200px;
    background: #111113;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
    z-index: 1000;
    flex-shrink: 0;
    overflow: hidden;
}

body.sidebar-collapsed .sidebar {
    width: 56px;
}

/* Flexbox 최소 너비 이슈 방지 (내부 콘텐츠가 가로로 터지는 현상 막음) */
.main-wrapper, .main-content {
    min-width: 0;
}

.sidebar-header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 8px;
    flex-shrink: 0;
}

.sidebar-logo {
    font-size: 1.1rem;
    font-weight: 800;
    color: #E2E8F0;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: opacity 0.2s, width 0.2s;
}

body.sidebar-collapsed .sidebar-logo {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

#sidebarToggleBtn {
    background: transparent;
    border: none;
    color: #71717A;
    font-size: 1rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

#sidebarToggleBtn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #A1A1AA;
}

.sidebar-menu {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
}

/* Nav Item - 가로 리스트형 */
.sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    height: 42px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    color: #71717A;
    border-left: 3px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

.sidebar .nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #D4D4D8;
}

.sidebar .nav-item.active {
    background: rgba(255, 255, 255, 0.06);
    color: #F4F4F5;
    border-left-color: var(--primary-color);
}

.sidebar .nav-icon {
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* AI 텍스트 아이콘 전용 스타일 */
.sidebar .nav-icon-text {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary-color);
}

.sidebar .nav-item.active .nav-icon {
    color: var(--primary-color);
}

.sidebar .nav-item.active .nav-icon-text {
    color: var(--primary-color);
}

.sidebar .nav-label {
    font-size: 0.85rem;
    font-weight: 500;
    transition: opacity 0.2s, width 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.sidebar-collapsed .sidebar .nav-label {
    opacity: 0;
    width: 0;
    pointer-events: none;
    overflow: hidden;
    margin: 0;
}

body.sidebar-collapsed .sidebar .nav-item {
    justify-content: center;
    padding: 0;
    gap: 0;
    border-left-width: 0;
}

body.sidebar-collapsed .sidebar .nav-item.active {
    border-left-width: 0;
    border-bottom: 2px solid var(--primary-color);
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    background: radial-gradient(circle at 50% 0%, #1e1e2f, #0b0b0f);
}

.container {
    padding: 30px;
    width: 100%;
}


/* Layout Adjustments (PC Sidebar Mode) */
@media (min-width: 1200px) {
    .app-layout {
        display: flex;
        flex-direction: row;
        height: 100vh;
        width: 100%; /* [수정] 100vw -> 100% */
        overflow: hidden;
    }

    .main-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow-y: auto;
        background: radial-gradient(circle at 50% 0%, #1e1e2f, #0b0b0f);
        position: relative;
    }

    /* Header styling remains consistent inside main-wrapper */
    header {
        margin: 0 !important;
        padding: 20px 40px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(15px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 0 !important;
        z-index: 10;
    }

    .main-content {
        padding: 30px !important;
        flex: 1;
        /* overflow-y: auto; -> 메인 래퍼가 담당하므로 중복 스크롤 방지 */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
}

.container {
    max-width: 1800px;
    margin: 0 auto;
}

/* Header & Status */
header {
    background: var(--surface-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.header-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.status-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.status-item {
    flex: 1 1 180px;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--primary-color);
}

.status-item small {
    color: #888;
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.status-item strong,
.status-item span {
    color: #fff;
    display: block;
    font-size: 0.95rem;
}

.controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* App Launcher (The Box Menu) */
.app-launcher {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.app-box {
    background: var(--surface-color);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.app-box:hover {
    background: rgba(49, 130, 246, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.app-box.active {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary-color);
    box-shadow: inset 0 0 15px rgba(var(--primary-rgb), 0.1), 0 10px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

.app-box .icon {
    font-size: 24px;
    color: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.app-box.active .icon {
    color: var(--primary-color) !important;
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--accent-glow);
}

.app-box.active .label {
    color: var(--active-text-color) !important;
}

.app-box:hover .icon {
    transform: scale(1.2);
}

.app-box .label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dashboard Grid (Multi-App Monitoring) */
.dashboard-grid {
    display: flex;
    justify-content: center; /* [추가] 탭 패널 전체 중앙 정렬 */
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    align-items: flex-start;
    min-height: 50vh;
}

/* Individual Pane Wrapper in Grid */
.pane-window {
    background: var(--surface-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    /* ?뚮젆???ш린 ?먮룞怨꾩궛???꾩쟾 鍮꾪솢?깊솕?섏뿬 ?쒕옒洹?媛믪쓣 ?덈??곸쑝濡?蹂댁옣 */
    width: calc(50% - 12px);
    /* ?ㅼ젣 臾쇰━???덈퉬 蹂€???곸슜 */
    height: 600px;
    /* ?ㅼ젣 臾쇰━???믪씠 蹂€???곸슜 */
    min-height: 300px;
    max-height: 95vh;
    min-width: 350px;
    max-width: 100%;
    resize: both;
    /* ?쒕옒洹몃줈 ?덈퉬/?믪씠 紐⑤몢 議곗젅 ?덉슜 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin: 0 !important; /* [추가] 패널 간 높이 정렬 불일치 방지 */
    transition: box-shadow 0.3s ease, border-color 0.3s ease, width 0.3s ease, transform 0.3s ease;
}

/* [추가] 사이드바 접었을 때 3열 모드로 자동 전환 (공간 효율 극대화) */
@media (min-width: 1500px) {
    body.sidebar-collapsed .pane-window:not([style*="width"]) {
        width: calc(33.333% - 14px);
    }
}

/* 수동 조절된 탭은 flex-basis 고정 */
.pane-window[style*="width"] {
    flex: 0 0 auto !important;
}

/* 유틸리티 모드 (1열 중앙 배치, 리사이즈 가능) */
.pane-window.utility-mode {
    max-width: 100%;
    min-height: 300px;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
}

.pane-window:hover {
    box-shadow: 0 15px 40px rgba(49, 130, 246, 0.15);
}

/* Pane Header inside the window */
.pane-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: grab;
}

.pane-header-main {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.pane-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

/* 헤더용 작은 배지 */
.header-badge {
    background: rgba(var(--primary-rgb), 0.15);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    color: var(--primary-color);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
}

/* 헤더 검색창 컨테이너 */
.header-search-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 0.3;
    /* 너무 넓어지지 않게 */
    max-width: 300px;
}

.header-search-container i {
    position: absolute;
    left: 12px;
    font-size: 0.8rem;
    color: #666;
    pointer-events: none;
}

.header-search-container input {
    width: 100%;
    padding: 6px 15px 6px 32px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    transition: all 0.2s;
}

.header-search-container input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--primary-color) !important;
    outline: none;
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
}


.pane-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pane-header .pane-controls {
    display: flex;
    gap: 8px;
}

.pane-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #666;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.pane-close-btn:hover {
    background: #cf6679 !important;
    color: #fff !important;
    transform: rotate(90deg);
}

/* Tab Content Adjustments for Grid */
.pane-window .tab-content .card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
}

.tab-content .card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tab-content h2 {
    display: none;
    /* Hide original redundant headers */
}

@media (max-width: 1100px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        /* Single column on tablet/mobile */
    }
}

/* New Data Highlighting - Premium Design */
/* New Data Highlighting - Premium Design */
@keyframes shimmer-highlight {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 새 글 하이라이트: 테두리 스타일 (PC/모바일 공통) */
.bg-new-cafe, .bg-new-dc {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 4px;
}

.bg-new-cafe {
    border: 1px solid rgba(253, 216, 53, 0.5) !important;
    box-shadow: 0 0 10px rgba(253, 216, 53, 0.12) !important;
    background: rgba(253, 216, 53, 0.03) !important;
}

.bg-new-dc {
    border: 1px solid rgba(91, 139, 216, 0.5) !important;
    box-shadow: 0 0 10px rgba(91, 139, 216, 0.12) !important;
    background: rgba(91, 139, 216, 0.03) !important;
}

/* 동그라미 도트 완전 제거 */
.bg-new-cafe td:first-child::before,
.bg-new-dc td:first-child::before {
    display: none !important;
}

/* 테두리 펄스 애니메이션 */
@keyframes border-pulse-cafe {
    0%, 100% { border-color: rgba(253, 216, 53, 0.25); box-shadow: 0 0 6px rgba(253, 216, 53, 0.05); }
    50% { border-color: rgba(253, 216, 53, 0.6); box-shadow: 0 0 12px rgba(253, 216, 53, 0.15); }
}
@keyframes border-pulse-dc {
    0%, 100% { border-color: rgba(91, 139, 216, 0.25); box-shadow: 0 0 6px rgba(91, 139, 216, 0.05); }
    50% { border-color: rgba(91, 139, 216, 0.6); box-shadow: 0 0 12px rgba(91, 139, 216, 0.15); }
}
.bg-new-cafe { animation: border-pulse-cafe 3s ease-in-out infinite !important; }
.bg-new-dc { animation: border-pulse-dc 3s ease-in-out infinite !important; }

/* Hover: 테두리 강조 */
.bg-new-cafe:hover {
    border-color: rgba(253, 216, 53, 0.8) !important;
    box-shadow: 0 0 14px rgba(253, 216, 53, 0.2) !important;
}
.bg-new-dc:hover {
    border-color: rgba(91, 139, 216, 0.8) !important;
    box-shadow: 0 0 14px rgba(91, 139, 216, 0.2) !important;
}

/* Article Card Style */
.article-card {
    background: var(--surface-color);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.article-card:hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.05) !important;
    border-color: var(--glass-border);
    transform: scale(1.02);
}

.article-card.ai-pick {
    border-left: 4px solid #fdd835;
    background: rgba(253, 216, 53, 0.05);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-game-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-game-name {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--primary-color);
}

.card-time {
    font-size: 0.7rem; /* [수정] 0.75rem -> 0.7rem */
    color: #fff; /* [수정] #666 -> #fff (시간 가독성 상향) */
    font-weight: 400;
}

.card-title {
    font-size: 1.05rem; /* [수정] 0.95rem -> 1.05rem (약 1pt 확대) */
    font-weight: 400;
    color: #eee;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}

/* Original Styles (kept for legacy/non-card tabs) */
.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* 요약 테이블과 상세 테이블 사이의 충분한 여백 확보 */
#jasa-summary-container,
#tasa-summary-container {
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

/* 타이틀 옆 안내 문구 (은은한 회색) */
.header-note {
    font-size: 0.85rem;
    font-weight: normal;
    color: #888;
    margin-left: 12px;
    vertical-align: middle;
}

/* 버튼 크기 및 간격 최적화 */
.small-button {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-header-with-button {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* 제목과 버튼들의 하단 라인을 맞춰 정돈됨 */
    margin-bottom: 15px;
    gap: 15px;
}

.badge.daum {
    background: #F7E600;
    color: #000;
}

.badge.dc {
    background: #5b8bd8;
    color: #000;
}

.badge.keyword {
    background: #ff8a80;
    color: #000;
}

.badge.super-keyword {
    background: #fdd835;
    color: #000;
}

#logOutput {
    background: #09090b;
    border-radius: 16px;
    padding: 20px;
    font-family: monospace;
    font-size: 0.85rem;
    height: 100%;
    min-height: 400px;
    border: 1px solid #1a1a1f;
}

/* ?쒖뒪??濡쒓렇 而щ윭 ?쒓렇 吏€??*/
.log-line {
    margin-bottom: 4px;
    line-height: 1.4;
    word-wrap: break-word;
}

.log-time {
    color: #888;
}

.log-level {
    font-weight: bold;
    margin-right: 5px;
}

.log-line.INFO .log-level {
    color: #4CAF50;
}

.log-line.WARNING .log-level {
    color: #FF9800;
}

.log-line.ERROR .log-level {
    color: #F44336;
}

.log-line.DEBUG .log-level {
    color: #9E9E9E;
}

.log-tag.tag-cafe {
    color: #F7E600;
}

.log-tag.tag-dc {
    color: #5b8bd8;
}

.log-tag.tag-system {
    color: #00bcd4;
}

.log-tag.tag-alert {
    color: #f44336;
}

.log-tag.tag-odin_global {
    color: #ffeb3b;
}

.log-tag.tag-account_trade {
    color: #ff9800;
}

.log-tag.tag-jasa_games {
    color: #8bc34a;
}

.log-tag.tag-tasa_games {
    color: #03a9f4;
}

.log-tag.tag-batch {
    color: #9c27b0;
}

.log-tag.tag-config {
    color: #e91e63;
}

.log-tag.tag-access {
    color: #009688;
}

.log-tag.tag-comments {
    color: #26c6da;
}

.log-tag.tag-database {
    color: #ff5722;
}

.log-tag.tag-default {
    color: #9e9e9e;
}

.log-message {
    color: #ddd;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
}

.status-badge.waiting {
    background: #222;
    color: #888;
}

.status-badge.running {
    background: var(--primary-color);
    color: #000;
}

button {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

button:hover {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 0 15px var(--accent-glow);
}

button.secondary {
    border-color: #444;
    color: #666;
}

button.secondary:hover {
    background: #333;
    color: #fff;
}

.tab-content {
    /* 湲곕낯?곸쑝濡쒕뒗 ?④? ?꾨뱶 (?€?μ냼 蹂닿??? */
    display: none;
    overflow: hidden;
}

/* ?€?쒕낫???덈룄???대??먯꽌????긽 ?쒖떆 */
.pane-window .tab-content {
    display: flex !important;
    flex-direction: column;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex: 1;
    min-height: 0;
    overflow: hidden !important; /* 바깥쪽 스크롤 제거 */
}
/* 야간동향/관리자 탭: 내부 콘텐츠가 많으므로 스크롤 허용 */
#trends-tab, #admin-tab { overflow: auto !important; }


.tab-content h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Drag and Drop States */
.pane-window.dragging {
    opacity: 0.4;
    transform: scale(0.98);
    border: 2px dashed var(--primary-color);
}

.pane-window.drag-over {
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 0 20px rgba(49, 130, 246, 0.3) !important;
    transform: translateY(-5px);
}

/* Excel Table Style */
.excel-table-container,
#totalArticlesContainer,
#aiAnalysisContainer,
#updateHistoryContainer,
.game-articles-container {
    width: 100%;
    background: #1a1a1e;
    border-radius: 12px;
    border: 1px solid #333;
    margin-top: 5px;
    margin-right: 5px;
    padding-right: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto !important; /* 안쪽 테이블 컨테이너만 스크롤 활성화 */
    overflow-x: auto; /* [추가] 좁은 화면 가로 스크롤 지원 */
}

/* 계정거래/다이아시세: 내부 스크롤 제거 → 외부(main-wrapper) 스크롤로 전체 확인 */
#account-trade-table-container,
#jasa-results-table-container,
#g2g-results-table-container,
#tasa-results-table-container {
    max-height: none;
    overflow-y: visible !important;
}

/* 계정거래/다이아시세 탭: 콘텐츠가 패널 밖으로 흐르도록 overflow 해제 */
#account-trade-tab,
#diamond-trade-tab {
    overflow: visible !important;
}

.excel-table,
.full-width-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.0rem;
    color: #e0e0e0;
}

.excel-table th,
.full-width-table th {
    background: #1e1e24;
    color: var(--primary-color);
    padding: 12px 15px;
    text-align: center !important;
    font-size: 0.9rem;
    font-weight: 700;
    border-bottom: 2px solid #333;
    position: sticky;
    top: 0;
    z-index: 20;
    white-space: nowrap;
}

.excel-table td,
.full-width-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #2a2a2f;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.full-width-table tr:hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.03) !important;
}

/* 전체/댓글/게임/커뮤니티 탭 마지막 열 (시간) 보장 */
.full-width-table th:last-child,
.full-width-table td:last-child {
    min-width: 90px;
    width: 90px;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}

/* 전체 탭: 댓글 탭과 동일하게 table-layout fixed로 시간 열 절대 보장 */
#totalArticlesContainer table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 420px;
}
#totalArticlesContainer table th:nth-child(1),
#totalArticlesContainer table td:nth-child(1) {
    width: 120px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center !important;
}
#totalArticlesContainer table th:nth-child(2),
#totalArticlesContainer table td:nth-child(2) {
    width: 65px !important;
    white-space: nowrap;
    text-align: center !important;
    overflow: visible;
}
#totalArticlesContainer table th:nth-child(3),
#totalArticlesContainer table td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#totalArticlesContainer table th:nth-child(4),
#totalArticlesContainer table td:nth-child(4) {
    width: 65px !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* 댓글 내용 열 (2번째 열) 특정 처리 */
.excel-table td:nth-child(2) {
    max-width: 450px;
}

.excel-table tr:hover {
    box-shadow: inset 0 0 0 999px rgba(49, 130, 246, 0.05) !important;
}

.excel-table tr:last-child td {
    border-bottom: none;
}

.excel-table .cell-link {
    color: var(--secondary-color);
    text-decoration: none;
}

.excel-table .cell-link:hover {
    text-decoration: underline;
}

.excel-table .cell-time {
    color: #888;
    font-family: monospace;
}

/* 다이아 시세 테이블 중앙 정렬 */
.diamond-trade-table td {
    text-align: center !important;
}

/* 계정 거래 테이블 - 열 너비 강제 고정 */
.account-trade-table {
    table-layout: fixed !important;
    width: 100% !important;
}
.account-trade-table th,
.account-trade-table td {
    text-align: center !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-trade-table th:nth-child(3),
.account-trade-table td:nth-child(3) {
    text-align: left !important;
}

/* Full Width Table (for articles in Games/Community/Total tabs) */
.full-width-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    /* 湲€???고듃 ?곹뼢 (+1~2pt) */
    color: #e0e0e0;
}

.full-width-table th {
    background: rgba(0, 0, 0, 0.4);
    color: var(--primary-color);
    padding: 10px 12px;
    text-align: left;
    font-weight: 500;
    font-size: 0.85rem; /* [수정] 0.9rem -> 0.85rem */
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.full-width-table td {
    padding: 8px 12px;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* ??媛€濡쒖꽑 吏€??*/
    vertical-align: middle;
}

.full-width-table tr.clickable-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.full-width-table tr.clickable-row:hover {
    box-shadow: inset 0 0 0 999px rgba(49, 130, 246, 0.15) !important;
}

.card-grid,
.community-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    align-items: start;
    gap: 10px;
    padding: 5px;
    flex: 1;
    height: auto;
    min-height: 0;
}

/* 커뮤니티 탭: 전체 높이 채우고 내부 그리드 아이템이 스크롤 동작 */
#community-tab .community-grid {
    height: 100%;
    overflow: hidden;
    grid-auto-rows: 1fr;
    align-items: stretch;
}

/* Mobile responsive for grids */
@media (max-width: 1100px) {

    .card-grid,
    .community-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual Game Section in Game Tab */
.game-section-table-wrapper {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

/* 커뮤니티 탭 - wrapper가 그리드 높이를 꽉 채우도록 */
#community-tab .game-section-table-wrapper {
    height: 100%;
    min-height: 0;
}

#games-tab .game-articles-container {
    /* 헤더 제외 5행 기준: 5행 × 38px + 여유 = 280px */
    max-height: 280px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.1);
}

/* Individual Community Section in Community Tab */
/* 전체 탭과 동일하게 flex:1 로 pane 높이를 채우고 내부 스크롤 */
#community-tab .game-articles-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.1);
}



.game-section-header {
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary-color);
}

.game-counts {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* [�߰�] �ؽ�Ʈ ���� �� �ʺ� ����ȭ (30% ���) */
.full-width-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.full-width-table .col-title {
    max-width: 330px;
    font-size: 0.92rem !important; /* [추가] 0.82rem -> 0.92rem (+1pt 확대) */
    font-weight: 600;
}

.excel-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.excel-table td:nth-child(2) {
    max-width: 450px;
}

/* [�߰�] ��� �������� ���� (Full-edge Resize) */
.pane-window {
    position: relative;
    resize: none !important;
}

.pane-resizer {
    position: absolute;
    background: transparent;
    z-index: 1000;
}

.pane-resizer.r {
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: ew-resize;
}

.pane-resizer.l {
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    cursor: ew-resize;
}

.pane-resizer.t {
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    cursor: ns-resize;
}

.pane-resizer.b {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    cursor: ns-resize;
}

.pane-resizer.tl {
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    cursor: nwse-resize;
    z-index: 1001;
}

.pane-resizer.tr {
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    cursor: nesw-resize;
    z-index: 1001;
}

.pane-resizer.bl {
    bottom: 0;
    left: 0;
    width: 15px;
    height: 15px;
    cursor: nesw-resize;
    z-index: 1001;
}

.pane-resizer.br {
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    cursor: nwse-resize;
    z-index: 1001;
}

.pane-resizer:hover {
    background: rgba(49, 130, 246, 0.1);
}


/* [추가] 탭 레이아웃 고도화 - 폴딩/너비/여백 */
.game-section-table-wrapper.is-folded {
    height: auto !important;
    align-self: flex-start;
}

.hide-btn {
    margin-left: 12px;
    white-space: nowrap;
}

/* 테이블 제목 및 데이터 정렬 최적화 (불필요한 너비 제한 제거) */
.excel-table td {
    max-width: none !important;
}

/* =========================================================================
   [추가] 주요 결과 탭 레이아웃 최적화 (너비 80%, 박스 축소 & 중앙 정렬)
   (계정거래, 다이아 시세, 시스템 로그 탭 적용)
   ========================================================================= */
/* 테두리 박스(Pane) 전체 크기 축소 및 중앙 배치 (유틸 모드 전환 시 기본 크기) */
#pane-account-trade,
#pane-diamond-trade,
#pane-log-viewer,
#pane-comments {
    width: 48%; /* 초기 너비를 2열 배치에 맞춤 */
    min-width: 400px;
    max-width: 1400px;
    margin: 0; 
}

/* 내부 콘텐츠는 박스에 꽉 채움 */
#account-trade-tab .card,
#diamond-trade-tab .card,
#log-viewer-tab .card,
#comments-tab .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

/* 테이블 제목 및 데이터 전체 가운데 정렬 (댓글 탭 포함) */
/* [수정] 모든 테이블(전체/게임/커뮤니티/댓글/시세)의 열 제목 폰트 스타일 통일 */
.excel-table th,
.full-width-table th,
#account-trade-tab .excel-table th,
#account-trade-tab .summary-table th {
    background: #25252b;
    color: var(--primary-color);
    padding: 10px 15px; /* [수정] 패딩 축소 */
    text-align: center !important;
    font-size: 0.9rem; /* [수정] 0.82rem -> 0.9rem (가독성 상향) */
    font-weight: 600;   /* [수정] 700 -> 600 (과도한 굵기 제거) */
    border-bottom: 2px solid #333;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

/* 전체 탭: 게임명(1), 구분(2), 시간(4) 중앙 정렬 */
#totalArticlesBody td:nth-child(1),
#totalArticlesBody td:nth-child(2),
#totalArticlesBody td:nth-child(4) {
    text-align: center !important;
}

#totalArticlesBody td:nth-child(4) {
    color: #fff !important; /* [수정] 시간 정보 흰색 강조 */
}

/* 게임 탭: 구분(1), 시간(3) 중앙 정렬 */
#gamesSections .full-width-table td:nth-child(1),
#gamesSections .full-width-table td:nth-child(3) {
    text-align: center !important;
}

#gamesSections .full-width-table td:nth-child(3) {
    color: #fff !important; /* [수정] 시간 정보 흰색 강조 */
}

/* 커뮤니티 탭: 게임명(1), 시간(3) 중앙 정렬 */
#communitySections .full-width-table td:nth-child(1),
#communitySections .full-width-table td:nth-child(3) {
    text-align: center !important;
}

#communitySections .full-width-table td:nth-child(3) {
    color: #fff !important; /* 시간 정보 흰색 강조 */
}

/* 댓글 테이블 관제 효율화 (table-layout: fixed를 통해 너비 강제 적용) */
#comments-tab .excel-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* 글 제목: 핵심 정보를 남기고 너비 축소 (120px 고정) */
#comments-tab .excel-table th:nth-child(1),
#comments-tab .excel-table td:nth-child(1) {
    color: #888 !important;
    text-align: left !important;
    width: 120px !important; /* [수정] 180px -> 120px (과감한 축소) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 댓글 내용: 사용자 요청에 따라 auto로 설정하여 나머지 최대 공간 차지 */
#comments-tab .excel-table th:nth-child(2),
#comments-tab .excel-table td:nth-child(2) {
    text-align: left !important;
    width: auto !important; /* [수정] 60px -> auto (가변 영역으로 전환) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 시간 열: 현재 너비(75px) 유지 */
#comments-tab .excel-table th:nth-child(3),
#comments-tab .excel-table td:nth-child(3) {
    width: 75px !important;
    text-align: center !important;
    white-space: nowrap;
    color: #fff !important;
}




/* 댓글 탭 호버: 공통 excel-table 호버(box-shadow)를 무력화하고 독립 처리 */
#comments-tab .excel-table tr:hover {
    box-shadow: none !important;
}
/* 일반 행 호버 */
#comments-tab .excel-table tr:not(.bg-new-cafe):hover td {
    background: rgba(49, 130, 246, 0.08);
}
/* 최신 댓글(카페) 호버: 노란 톤 유지하며 밝아짐 */
#comments-tab .excel-table tr.bg-new-cafe:hover td {
    background: rgba(253, 216, 53, 0.10);
}

/* 다이아 시세 탭: 크롤러 상태 메시지 완전 숨김 (대시보드에서 확인 가능) */
#jasa-status-message,
#tasa-status-message,
#odin-global-status-message {
    display: none !important;
}

/* 게임 탭: table-layout fixed 적용 - 시간 열 항상 보장 */
#gamesSections .full-width-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 380px; /* 좁은 pane에서도 제목 열 최소 너비 보장 */
}
#gamesSections .full-width-table th:nth-child(1),
#gamesSections .full-width-table td:nth-child(1) {
    width: 65px !important;
    white-space: nowrap;
    text-align: center;
    overflow: visible;
}
#gamesSections .full-width-table th:nth-child(3),
#gamesSections .full-width-table td:nth-child(3) {
    width: 65px !important;
    white-space: nowrap !important;
}

/* 커뮤니티 탭: table-layout fixed 적용 - 시간 열 항상 보장 */
#communitySections .full-width-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 380px; /* 좁은 pane에서도 제목 열 최소 너비 보장 */
}
#communitySections .full-width-table th:nth-child(1),
#communitySections .full-width-table td:nth-child(1) {
    width: 100px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#communitySections .full-width-table th:nth-child(3),
#communitySections .full-width-table td:nth-child(3) {
    width: 75px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* 상태 메시지 및 특정 헤더 영역 중앙 정렬 */
#account-trade-tab .card-header-with-button {
    justify-content: center !important;
    text-align: center;
    gap: 20px;
}

#account-trade-status-message {
    text-align: center !important;
    width: 100%;
}

/* [추가] 사이드바 접었을 때 대시보드 4열 레이아웃 자동 전환 (최대 효율) */
@media (min-width: 1300px) {
    body.sidebar-collapsed .pane-window:not([style*="width"]) {
        width: calc(25% - 15px) !important;
        flex: 0 0 calc(25% - 15px) !important;
    }
}

/* 수동 조절된 탭은 flex-basis 고정 */
.pane-window[style*="width"] {
    flex: 0 0 auto !important;
}

/* 전체 탭 뱃지: 게임 탭과 동일 크기 (min-width 제거) */
#totalArticlesBody td:nth-child(2) span.badge {
    display: inline-block;
}

/* 전역 테이블 폰트 및 스타일 표준화 (댓글 탭 기준 동기화) */
.excel-table,
.full-width-table {
    font-size: 1.0rem !important; /* 전체 기본 폰트 크기 통일 */
    color: #e0e0e0;
}

.excel-table td,
.full-width-table td {
    font-size: 1.0rem !important; /* 데이터 폰트 크기 통일 */
    padding: 10px 15px;
    vertical-align: middle;
}

/* 글 제목 열 폰트 스타일 통일 (모든 탭 동일 적용) */
#totalArticlesContainer .col-title,
#gamesSections .col-title,
#communitySections .col-title,
#comments-tab .col-title,
#comments-tab td:nth-child(1),
#comments-tab td:nth-child(2) {
    font-size: 1.05rem !important; /* [수정] 1.0rem -> 1.05rem (시인성 강화) */
    font-weight: 400 !important;
}

/* 시간 열 폰트는 약간 작게 유지하되 색상 통일 */
.excel-table td:last-child,
.full-width-table td:last-child {
    font-size: 0.85rem !important;
    color: #fff !important;
}




/* ====================================================================
   설정 모달 (Settings Modal)
   ==================================================================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.modal[style*="display: block"] {
    display: flex !important;
}
.settings-modal-content {
    background: #1e1f22;
    border: 1px solid #3c3f45;
    border-radius: 12px;
    width: 90vw;
    max-width: 1100px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #3c3f45;
    background: #25262b;
    flex-shrink: 0;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e0e0e0;
}
.close-modal {
    font-size: 1.4rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.close-modal:hover { color: #fff; }

/* 상단 탭 (키워드 / 메인 크롤러 / 서브 크롤러 / 화면 설정) */
.settings-top-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    background: #25262b;
    border-bottom: 1px solid #3c3f45;
    flex-shrink: 0;
}
.settings-tab-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 8px 8px 0 0;
    background: #2e2f35;
    color: #888;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.settings-tab-btn:hover { background: #3e3f45; color: #ccc; }
.settings-tab-btn.active {
    background: #5865f2;
    color: #fff;
}

/* 검색 필터 바 */
.settings-search-bar {
    padding: 10px 16px 6px;
    flex-shrink: 0;
}
.settings-search-bar input {
    width: 100%;
    box-sizing: border-box;
    background: #252526;
    color: #e0e0e0;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
}
.settings-search-bar input:focus { border-color: #5865f2; }

/* Config 테이블 영역 */
.config-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 8px;
}
.config-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.config-table thead th {
    background: #25262b;
    color: #bbb;
    padding: 9px 8px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #3c3f45;
    font-weight: 600;
}
.config-table tbody tr { border-bottom: 1px solid #2a2b30; }
.config-table tbody tr:hover { background: rgba(88,101,242,0.07); }
.config-table td {
    padding: 5px 6px;
    vertical-align: middle;
}
.config-table td input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: #2b2d31;
    color: #e0e0e0;
    border: 1px solid #3c3f45;
    border-radius: 5px;
    padding: 5px 7px;
    font-size: 0.85rem;
    outline: none;
}
.config-table td input[type="text"]:focus { border-color: #5865f2; }
.config-table td select {
    width: 100%;
    background: #2b2d31;
    color: #e0e0e0;
    border: 1px solid #3c3f45;
    border-radius: 5px;
    padding: 5px 4px;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
    text-align: center;
}
.row-action-btn {
    background: rgba(207,102,121,0.12);
    border: 1px solid #cf6679;
    color: #cf6679;
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.15s;
}
.row-action-btn:hover { background: rgba(207,102,121,0.35); }

/* 화면 설정(LocalSettings) 탭 */
#settingsLocalPanel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 16px;
}
.local-settings-batch-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(88,101,242,0.08);
    border: 1px solid #5865f2;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 10px 0 8px;
    flex-shrink: 0;
}
.local-settings-batch-label {
    color: #7289da;
    font-weight: 700;
    font-size: 0.95rem;
    flex: 1;
}
.local-settings-batch-bar input[type="number"],
.local-settings-card input[type="number"] {
    width: 110px;
    background: #252526;
    color: #fff;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    outline: none;
}
.local-settings-batch-bar input:focus,
.local-settings-card input:focus { border-color: #5865f2; }
.local-settings-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 8px;
}
.local-settings-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #1e1f22;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 8px 16px;
    transition: border-color 0.15s, background 0.15s;
}
.local-settings-card:hover { border-color: #555; background: #252628; }
.local-settings-card.comment-card { border-color: #2c4a7a; }
.local-settings-card .card-label {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e0e0e0;
}
.local-settings-card .card-label.dim { color: #555; }
.local-settings-card .card-label.comment-label { color: #4A90E2; }

/* CSS 토글 스위치 */
.toggle-switch {
    position: relative;
    width: 38px;
    height: 20px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: #4a4a4a;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.toggle-slider:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: #5865f2; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

/* 모달 하단 버튼 영역 */
.modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #3c3f45;
    background: #25262b;
    flex-shrink: 0;
}
.modal-footer button {
    padding: 8px 18px;
    border-radius: 7px;
    border: none;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.modal-footer button:not(.secondary) {
    background: #5865f2;
    color: #fff;
}
.modal-footer button:not(.secondary):hover { background: #4752c4; }
.modal-footer button.secondary {
    background: #2e2f35;
    color: #bbb;
    border: 1px solid #3c3f45;
}
.modal-footer button.secondary:hover { background: #3a3b42; color: #e0e0e0; }

/* ============================================================
   RESPONSIVE UI - 3단 브레이크포인트 시스템
   ≥1200px : 데스크탑 (사이드바 + 2열 패널)
   768~1199px: 태블릿 (아이콘 사이드바 + 1열 패널)
   <768px  : 모바일 (하단 탭바 + 1열 패널)
   ============================================================ */

/* 모바일 햄버거 버튼 (현재 미사용 - 하단 탭바로 대체) */
#mobile-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(49, 130, 246, 0.35);
    color: var(--primary-color);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
#mobile-hamburger:hover { background: rgba(49, 130, 246, 0.12); }

/* 사이드바 오버레이 배경 */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1999;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* 오버플로우 패널 (태블릿·모바일 헤더 버튼 ⋯ 더보기) */
#controls-overflow-panel {
    display: none;
    position: fixed;
    top: 62px;
    right: 10px;
    background: rgba(12, 12, 22, 0.98);
    border: 1px solid rgba(49, 130, 246, 0.2);
    border-radius: 14px;
    padding: 10px;
    z-index: 1800;
    flex-direction: column;
    gap: 7px;
    min-width: 210px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
#controls-overflow-panel button {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
}

/* 하단 탭바 (<768px) */
.bottom-tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(11, 11, 15, 0.97);
    border-top: 1px solid rgba(49, 130, 246, 0.15);
    z-index: 900;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    align-items: stretch;
}
.bottom-tabbar::-webkit-scrollbar { display: none; }

.btab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    min-width: 54px;
    padding: 5px 4px;
    cursor: pointer;
    gap: 3px;
    color: #666;
    transition: color 0.2s, background 0.2s;
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    background: transparent;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative; /* nav-badge absolute 위치 기준점 */
}
.btab-item i { font-size: 1.05rem; transition: color 0.2s, text-shadow 0.2s; }
.btab-item:hover { color: var(--primary-color); background: rgba(49, 130, 246, 0.08); }
.btab-item.active { color: var(--primary-color); }
.btab-item.active i { text-shadow: 0 0 10px var(--accent-glow); }
.btab-item .btab-ai-label { font-size: 0.85rem; font-weight: 900; line-height: 1; color: inherit; }

/* ============================================================
   데스크탑: pointer:fine(PC/마우스) 기기 전체
   pointer:fine = 마우스/트랙패드 → 창 너비와 무관하게 항상 데스크탑 레이아웃
   ============================================================ */
@media (pointer: fine) {
    #mobile-hamburger { display: none !important; }
    #sidebar-overlay { display: none !important; }
    #controls-overflow-panel { display: none !important; }
    #mobile-overflow-btn { display: none !important; }
    .controls > button { display: inline-flex !important; }
    .bottom-tabbar { display: none !important; }
}

/* ============================================================
   모바일: pointer:coarse(터치 기기) 전체 — 너비 무관
   pointer:coarse = 마우스 없는 터치 기기(폰/태블릿)만 적용
   PC에서 창을 좁혀도 이 블록은 트리거되지 않음
   ============================================================ */
@media (pointer: coarse) {
    /* 사이드바 숨김 → 하단 탭바로 대체 */
    .sidebar { display: none !important; }
    .bottom-tabbar { display: flex !important; }

    /* 레이아웃 */
    .app-layout { flex-direction: column; }
    .main-wrapper { padding-bottom: 66px; }

    /* 헤더 */
    header {
        padding: 8px 10px !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
    }
    .header-info {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .status-box { display: none !important; }
    .controls {
        flex-wrap: nowrap;
        padding-top: 0;
        border-top: none;
        gap: 5px;
        flex: 1;
        justify-content: flex-end;
        overflow: visible;
    }
    .controls > button:not(.mobile-primary):not(#mobile-overflow-btn) { display: none !important; }
    #mobile-overflow-btn { display: inline-flex !important; }
    body.controls-overflow-open #controls-overflow-panel { display: flex; }
    #controls-overflow-panel { top: 55px; right: 8px; }

    /* 패널 — 헤더(~55px) + 하단 탭바(66px) + 여유(4px) 제외한 전체 화면 높이 활용 */
    .pane-window {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: calc(100vh - 125px) !important;
        min-height: 300px !important;
        resize: none;
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .pane-window.utility-mode { height: calc(80vh - 66px) !important; }

    /* 그리드 */
    .dashboard-grid { padding: 0 6px; gap: 10px; margin-top: 6px; }
    .main-content { padding: 6px !important; }

    /* ── 모바일 전반 크기 축소 ── */
    .tab-content h2 { font-size: 1rem; font-weight: 700; }
    .pane-window .tab-content { padding: 10px !important; }
    button { padding: 5px 10px; font-size: 0.78rem; }
    .small-button { padding: 4px 8px; font-size: 0.72rem; }
    .tabs-header .tab-btn { padding: 5px 10px; font-size: 0.78rem; }
    .header-note { font-size: 0.7rem; }
    .card-header-with-button h2 { font-size: 0.95rem; }

    /* ── 계정거래/다이아시세 패널: auto height 유지 ── */
    #pane-account-trade,
    #pane-diamond-trade {
        height: auto !important;
        min-height: 200px;
    }


    /* ── 게임 패널: JS의 height:auto가 !important에 밀리지 않도록 복원 ── */
    #pane-games {
        height: auto !important;
        max-height: none !important;
        min-height: 200px !important;
    }
    /* ── 게임탭 그리드: align-content stretch 해제 → 각 섹션 자연 높이 유지 ── */
    #games-tab .card-grid {
        align-content: start !important;
        height: auto !important;
    }
    /* ── 게임탭 섹션: 2행 레이아웃 기준 7~8개 표시 ── */
    #games-tab .game-articles-container { max-height: 450px; overflow-y: auto; }

    /* ── 커뮤니티탭: 그리드 1fr 배분 해제 → 섹션별 독립 높이 ── */
    #community-tab .community-grid {
        height: auto !important;
        grid-auto-rows: auto !important;
        overflow-y: visible !important;
    }
    #community-tab .game-section-table-wrapper { height: auto !important; min-height: 0; }
    #community-tab .game-articles-container { flex: none !important; max-height: 290px; overflow-y: auto; }

    /* ── 커뮤니티 게임 링크: 가로 스크롤 (줄바꿈 없음, 버튼 축소 방지) ── */
    .community-game-links {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        align-items: center;
        min-height: 40px;
        padding: 4px 10px;
    }
    .community-game-links > * {
        flex-shrink: 0;
        min-width: max-content;
        padding: 5px 10px;
        line-height: 1.4;
    }

    /* ── 테이블 모바일 축소 ── */
    .excel-table, .full-width-table { font-size: 0.8rem; }
    .excel-table th, .excel-table td { padding: 6px 4px !important; font-size: 0.75rem; }
    .diamond-trade-table th, .diamond-trade-table td { font-size: 0.72rem !important; padding: 6px 4px !important; }

    /* ── 계정거래: 가로 스크롤 — overflow !important 충돌 해소 ── */
    #account-trade-table-container {
        overflow-x: auto !important;
        overflow-y: auto !important;   /* 전역 overflow-y:visible!important 덮어쓰기 */
        -webkit-overflow-scrolling: touch !important;
    }
    .account-trade-table {
        table-layout: fixed !important;
        width: 820px !important;
        font-size: 0.85rem !important;
    }
    .account-trade-table th, .account-trade-table td {
        font-size: 0.82rem !important;
        padding: 8px 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 모바일 열 너비 재분배: 글 제목 22% → 13% (-40%), 나머지 소폭 증가 */
    .account-trade-table th:nth-child(1), .account-trade-table td:nth-child(1) { width: 15% !important; }
    .account-trade-table th:nth-child(2), .account-trade-table td:nth-child(2) { width: 12% !important; }
    .account-trade-table th:nth-child(3), .account-trade-table td:nth-child(3) { width: 12% !important; }
    .account-trade-table th:nth-child(4), .account-trade-table td:nth-child(4) { width: 11% !important; }
    .account-trade-table th:nth-child(5), .account-trade-table td:nth-child(5) { width: 12% !important; }
    .account-trade-table th:nth-child(6), .account-trade-table td:nth-child(6) { width: 14% !important; }
    .account-trade-table th:nth-child(7), .account-trade-table td:nth-child(7) { width: 13% !important; }
    .account-trade-table th:nth-child(8), .account-trade-table td:nth-child(8) { width: 11% !important; }

    /* 카드 컴팩트화 */
    .article-card { padding: 10px; gap: 6px; border-radius: 10px; }
    .card-title { font-size: 0.9rem; }
    .game-section-table-wrapper { border-radius: 8px; }

    /* === 모바일 2행 카드 레이아웃 (전체/게임/커뮤니티/댓글 탭) === */
    /* 배지 min-width 초기화 — PC용 min-width:60px 모바일에서 해제 */
    #totalArticlesBody td:nth-child(2) span.badge { min-width: 0 !important; }
    #totalArticlesContainer table thead,
    #gamesSections table thead,
    #communitySections table thead,
    #comments-tab .excel-table thead { display: none !important; }

    #totalArticlesContainer table colgroup,
    #gamesSections table colgroup,
    #communitySections table colgroup { display: none !important; }

    #totalArticlesContainer table,
    #gamesSections table,
    #communitySections table,
    #comments-tab .excel-table { display: block !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; }

    #totalArticlesContainer table tbody,
    #gamesSections table tbody,
    #communitySections table tbody,
    #comments-tab .excel-table tbody { display: block !important; width: 100% !important; }

    #totalArticlesContainer tr.clickable-row,
    #gamesSections tr.clickable-row,
    #communitySections tr.clickable-row,
    #comments-tab .excel-table tr {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        gap: 3px 6px !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #totalArticlesContainer tr.clickable-row td,
    #gamesSections tr.clickable-row td,
    #communitySections tr.clickable-row td,
    #comments-tab .excel-table tr td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: normal !important;
        text-align: left !important;
    }

    /* 전체 탭: td1 게임명 / td2 구분 / td3 글제목 / td4 시간 */
    #totalArticlesContainer tr.clickable-row td:nth-child(3) { order: 1 !important; flex: 0 0 100% !important; font-size: 0.9rem !important; line-height: 1.4 !important; }
    #totalArticlesContainer tr.clickable-row td:nth-child(2) { order: 2 !important; flex: 0 0 auto !important; font-size: 0.78rem !important; width: auto !important; text-align: left !important; margin-top: 4px !important; }
    #totalArticlesContainer tr.clickable-row td:nth-child(1) { order: 3 !important; flex: 1 !important; font-size: 0.78rem !important; width: auto !important; text-align: left !important; margin-top: 4px !important; }
    #totalArticlesContainer tr.clickable-row td:nth-child(4) { order: 4 !important; flex: 0 0 auto !important; margin-left: auto !important; width: auto !important; min-width: 0 !important; font-size: 0.75rem !important; color: #888 !important; margin-top: 4px !important; }

    /* 게임 탭: td1 구분 / td2 글제목 / td3 시간 */
    #gamesSections tr.clickable-row td:nth-child(2) { order: 1 !important; flex: 0 0 100% !important; font-size: 0.9rem !important; line-height: 1.4 !important; }
    #gamesSections tr.clickable-row td:nth-child(1) { order: 2 !important; flex: 0 0 auto !important; font-size: 0.78rem !important; width: auto !important; text-align: left !important; margin-top: 4px !important; }
    #gamesSections tr.clickable-row td:nth-child(3) { order: 3 !important; flex: 0 0 auto !important; margin-left: auto !important; width: auto !important; min-width: 0 !important; font-size: 0.75rem !important; color: #888 !important; margin-top: 4px !important; }

    /* 커뮤니티 탭: td1 게임명 / td2 글제목 / td3 시간 */
    #communitySections tr.clickable-row td:nth-child(2) { order: 1 !important; flex: 0 0 100% !important; font-size: 0.9rem !important; line-height: 1.4 !important; }
    #communitySections tr.clickable-row td:nth-child(1) { order: 2 !important; flex: 1 !important; font-size: 0.78rem !important; width: auto !important; text-align: left !important; margin-top: 4px !important; }
    #communitySections tr.clickable-row td:nth-child(3) { order: 3 !important; flex: 0 0 auto !important; margin-left: auto !important; width: auto !important; min-width: 0 !important; font-size: 0.75rem !important; color: #888 !important; margin-top: 4px !important; }

    /* 댓글 탭: td1 글제목 / td2 댓글내용 / td3 시간 */
    #comments-tab .excel-table tr td:nth-child(2) { order: 1 !important; flex: 0 0 100% !important; font-size: 0.9rem !important; line-height: 1.4 !important; }
    #comments-tab .excel-table tr td:nth-child(1) { order: 2 !important; flex: 0 0 auto !important; font-size: 0.78rem !important; color: #888 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: calc(100% - 60px) !important; }
    #comments-tab .excel-table tr td:nth-child(3) { order: 3 !important; flex: 0 0 auto !important; margin-left: auto !important; font-size: 0.75rem !important; }

}

/* === 사이드바 새 글 뱃지 === */
.nav-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #e53935;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    line-height: 1;
}

/* 하단 탭바 뱃지: 아이콘 우상단에 작게 표시 */
.btab-item .nav-badge {
    top: 4px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    font-size: 0.6rem;
    padding: 0 3px;
}

/* === 키워드 하이라이트 === */
.kw-highlight {
    background: rgba(187, 134, 252, 0.22);
    color: inherit;
    font-weight: 700;
    border-radius: 3px;
    padding: 0 2px;
}

/* 슈퍼키워드 하이라이트 — 주황-앰버 */
.kw-highlight-super {
    background: rgba(255, 179, 71, 0.35);
}

/* === AI 분석 탭 — 컨테이너 flex fill (max-height: 75vh 하드코딩 제거) === */
#aiAnalysisContainer {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* === 게임/커뮤니티 탭 내부 검색바 === */
.tab-search-bar {
    padding: 6px 0 8px;
    flex-shrink: 0;
}
.tab-search-bar .header-search-container {
    max-width: 360px;
}

/* === AI 분석 탭 카드 뷰 === */
.ai-game-articles-container {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-analysis-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 14px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
    position: relative;
}
.ai-analysis-card:hover {
    background: rgba(255, 255, 255, 0.03);
}
.ai-analysis-card.ai-pick {
    border-left: 4px solid #fdd835;
    padding-left: 10px;
}
/* is_new 하이라이팅: div 기반 */
.ai-analysis-card.bg-new-cafe {
    animation: shimmer-highlight 1s ease-out;
    box-shadow: inset 4px 0 0 0 rgba(100, 181, 246, 0.7);
    background: rgba(100, 181, 246, 0.04);
}
.ai-analysis-card.bg-new-dc {
    animation: shimmer-highlight 1s ease-out;
    box-shadow: inset 4px 0 0 0 rgba(255, 204, 128, 0.7);
    background: rgba(255, 204, 128, 0.04);
}
/* 글로우 도트 */
.ai-analysis-card.bg-new-cafe::before,
.ai-analysis-card.bg-new-dc::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.ai-analysis-card.bg-new-cafe::before { background: rgba(100, 181, 246, 0.9); box-shadow: 0 0 6px rgba(100, 181, 246, 0.8); }
.ai-analysis-card.bg-new-dc::before   { background: rgba(255, 204, 128, 0.9); box-shadow: 0 0 6px rgba(255, 204, 128, 0.8); }

.ai-card-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ai-card-title {
    font-size: 0.95rem;
    color: #e0e0e0;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}
.ai-card-title:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.ai-summary-text {
    font-size: 0.84rem;
    color: #c8c8c8;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 6px 10px;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.035);
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 4px 4px 0;
}
/* 출처별 요약 스트립 색상 */
.ai-summary-text.src-daum { border-left-color: rgba(247, 230, 0, 0.6); }
.ai-summary-text.src-dc   { border-left-color: rgba(100, 181, 246, 0.6); }
.ai-card-row1 .card-time {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== 헤더 레이아웃 ===== */
.pane-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}
.pane-header-title { margin: 0; flex-shrink: 0; white-space: nowrap; }
.pane-header-top .pane-controls { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }

/* 검색창만 남은 공간 전부 차지 */
.pane-header-search {
    flex: 1 1 0;
    min-width: 60px;
    max-width: none !important;
}

.pane-header-subbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    flex-wrap: wrap;
}

/* date input 다크 스타일 */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}
input[type="date"]:focus { outline: none; border-color: var(--primary-color, #bb86fc); }

/* ===== 게임/커뮤니티 섹션 헤더 2행 ===== */
.game-section-header-row1 {
    display: flex;
    align-items: center;
}
.game-section-header-row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    flex-wrap: wrap;
}
/* 커뮤니티 탭: 게임 바로가기 버튼 행 */
.community-game-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.count-item {
    font-size: 0.78rem;
    color: var(--text-muted, #888);
}