/* V14.3: index.html에서 분리한 스타일 */
        :root {
            --primary-color: #4CAF50; 
            --bg-color: #f4f7f6;      
            --card-bg: #ffffff;       
            --text-main: #333333;     
            --text-sub: #777777;      
            --border-color: #dddddd;
            --btn-bg: #e0e0e0;
            --hover-bg: #e8f5e9;
            --shadow-sticky: rgba(0, 0, 0, 0.05);
        }

        [data-theme="dark"] {
            --primary-color: #2E7D32; 
            --bg-color: #121212;      
            --card-bg: #1e1e1e;       
            --text-main: #e0e0e0;     
            --text-sub: #aaaaaa;      
            --border-color: #333333;
            --btn-bg: #333333;
            --hover-bg: #2d452f;
            --shadow-sticky: rgba(0, 0, 0, 0.5);
        }
        
        body { font-family: 'Pretendard', -apple-system, sans-serif; background-color: var(--bg-color); color: var(--text-main); margin: 0; padding: 20px; transition: background-color 0.3s, color 0.3s; }
        .container { max-width: 850px; margin: 0 auto; position: relative; }
        
        .header { text-align: center; margin-bottom: 20px; position: relative; }
        .header h1 { color: var(--primary-color); margin: 0; font-size: 24px; transition: color 0.3s; }
        .version-badge { font-size: 12px; background-color: var(--primary-color); color: white; padding: 2px 6px; border-radius: 4px; vertical-align: super; }
        
        .theme-toggle { position: absolute; right: 0; top: 0; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 12px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: bold; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .theme-toggle:hover { filter: brightness(0.9); }

        /* 탭 스타일 */
        .tabs { display: flex; gap: 8px; margin-bottom: 15px; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; }
        .tab-btn { flex: 1; padding: 12px; background: none; border: none; color: var(--text-sub); font-size: 13px; font-weight: bold; cursor: pointer; transition: 0.2s; border-radius: 8px; text-align: center; }
        /* v12.3: 회색 배경에서는 강조색 대신 본문색을 사용해 대비를 확보합니다. */
        .tab-btn.active { color: var(--text-main); background-color: var(--btn-bg); }
        .tab-content { display: none; }
        .tab-content.active { display: block; }

        .card { background-color: var(--card-bg); border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; border: 1px solid var(--border-color); transition: background-color 0.3s, border-color 0.3s; }
        .input-row { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; } 
        .input-group { flex: 1; display: flex; flex-direction: column; min-width: 120px; } 
        .input-group label { font-size: 14px; margin-bottom: 5px; color: var(--text-sub); font-weight: bold; transition: color 0.3s; } 
        
        select, input { padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; outline: none; width: 100%; box-sizing: border-box; background-color: var(--card-bg); color: var(--text-main); transition: 0.3s; }
        
        .main-btn { width: 100%; padding: 15px; background-color: var(--primary-color); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; }
        .main-btn:hover { filter: brightness(1.1); } 
        .main-btn:disabled { background-color: var(--border-color); color: var(--text-sub); cursor: not-allowed; }

        /* 실시간 진행바 */
        .progress-container { display: none; width: 100%; background-color: var(--btn-bg); border-radius: 8px; overflow: hidden; margin: 15px 0; height: 16px; position: relative; }
        .progress-bar { width: 0%; height: 100%; background-color: var(--primary-color); transition: width 0.1s ease; }
        .progress-text { font-size: 12px; color: var(--text-main); font-weight: bold; position: absolute; width: 100%; text-align: center; line-height: 16px; top: 0; left: 0; text-shadow: 0 0 2px #fff; }

        .quick-btn-group { display: flex; gap: 5px; margin-top: 5px; }
        .quick-btn { flex: 1; padding: 12px 0; background-color: var(--btn-bg); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 5px; font-size: 12px; cursor: pointer; transition: 0.3s; font-weight: bold; }
        .quick-btn:hover { filter: brightness(0.8); }
        .ticker-info { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background-color: var(--btn-bg); border: 1px solid var(--border-color); color: var(--text-main); font-size: 12px; font-weight: bold; line-height: 1.35; min-height: 18px; }
        .ticker-info.loading { color: var(--text-main); opacity: 0.8; }
        .ticker-info.error { color: var(--text-main); border-color: #b71c1c; }
        .ticker-info.success { color: var(--text-main); }

        /* 커스텀 메시지 박스 */
        .msg-overlay { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; backdrop-filter: blur(2px); }
        .msg-box { background-color: var(--card-bg); padding: 20px; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .msg-box p { margin: 0 0 20px 0; font-size: 15px; line-height: 1.5; color: var(--text-main); }
        .msg-btn { padding: 10px 20px; background-color: var(--primary-color); color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }

        /* 테이블 디자인 */
        .table-container { width: 100%; max-height: 550px; overflow: auto; margin-top: 15px; border-radius: 8px; border: 1px solid var(--border-color); position: relative; }
        .sweep-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: center; font-size: 13px; min-width: 1000px; }
        .sweep-table.robust-table { min-width: 750px; } 
        
        .sweep-table th { background-color: var(--btn-bg); color: var(--text-main); font-weight: bold; padding: 12px 10px; border-bottom: 2px solid var(--border-color); position: sticky; top: 0; z-index: 10; }
        .sweep-table td { padding: 12px 10px; border-bottom: 1px solid var(--border-color); cursor: pointer; background-color: var(--card-bg); color: var(--text-main); transition: background-color 0.2s; }
        .sweep-table tr:hover td { background-color: var(--hover-bg); }

        /* 좌측 틀고정 (순위, N, SIGMA) */
        .sweep-table th:nth-child(1), .sweep-table td:nth-child(1) { position: sticky; left: 0; width: 32px; min-width: 32px; padding: 12px 2px; font-size: 11px; letter-spacing: -0.5px; box-sizing: border-box; z-index: 11; border-right: 1px solid var(--border-color); }
        .sweep-table th:nth-child(2), .sweep-table td:nth-child(2) { position: sticky; left: 32px; width: 40px; min-width: 40px; padding: 12px 2px; font-size: 11px; letter-spacing: -0.5px; box-sizing: border-box; z-index: 11; border-right: 1px solid var(--border-color); }
        .sweep-table th:nth-child(3), .sweep-table td:nth-child(3) { position: sticky; left: 72px; width: 42px; min-width: 42px; padding: 12px 2px; font-size: 11px; letter-spacing: -0.5px; box-sizing: border-box; z-index: 11; border-right: 2px solid var(--border-color); box-shadow: 2px 0 5px var(--shadow-sticky); }
        
        .sweep-table th:nth-child(1), .sweep-table th:nth-child(2), .sweep-table th:nth-child(3) { z-index: 12; }
        .bundle-table-container { max-height: none; overflow-x: auto; overflow-y: visible; border: none; -webkit-overflow-scrolling: touch; }
        .bundle-results-table { min-width: 1440px; table-layout: fixed; font-size: 13px; }
        .bundle-results-table th, .bundle-results-table td { position: static !important; left: auto !important; width: auto !important; min-width: 78px !important; padding: 11px 7px !important; box-shadow: none !important; white-space: normal; word-break: keep-all; }
        .bundle-results-table th { top: auto; }
        .bundle-results-table .bundle-group-row td { cursor: default; text-align: left; }
        .bundle-summary { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 18px 0; }
        .bundle-summary-section { border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; background: var(--card-bg); }
        .bundle-summary-title { font-size: 14px; font-weight: bold; color: var(--primary-color); margin-bottom: 10px; }
        .bundle-bar-row { display: grid; grid-template-columns: 96px minmax(140px, 1fr) 90px; gap: 9px; align-items: center; margin: 9px 0; font-size: 13px; }
        .bundle-bar-label { font-weight: bold; color: var(--text-main); }
        .bundle-bar-track { height: 42px; background: var(--btn-bg); border-radius: 5px; overflow: hidden; border: 1px solid var(--border-color); position: relative; }
        .bundle-bar-final { position: absolute; left: 0; top: 0; height: 100%; min-width: 4px; display: flex; align-items: center; padding-left: 6px; color: white; font-weight: bold; white-space: nowrap; box-sizing: border-box; z-index: 1; }
        .bundle-bar-invested { position: absolute; left: 0; bottom: 0; height: 42%; min-width: 3px; background: rgba(229, 57, 53, 0.86); border-right: 2px solid rgba(183, 28, 28, 0.95); z-index: 2; box-sizing: border-box; }
        .bundle-bar-text { position: absolute; left: 8px; right: 7px; top: 50%; transform: translateY(-50%); color: white; font-weight: bold; z-index: 3; text-shadow: 0 1px 2px rgba(0,0,0,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
        .bundle-bar-meta { color: var(--text-main); line-height: 1.25; font-weight: bold; }
        .krw-sub { display: block; margin-top: 3px; font-size: 0.82em; color: var(--text-sub); font-weight: 600; line-height: 1.25; }
        .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--btn-bg); color: var(--text-main); font-size: 12px; font-weight: bold; cursor: pointer; vertical-align: middle; }
        .help-btn:hover { filter: brightness(0.9); }

        /* 스마트 팝업창(Modal) 디자인 */
        .modal-overlay {
            display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); align-items: center; justify-content: center;
        }
        .modal-window {
            background-color: var(--card-bg); padding: 24px; border: 1px solid var(--border-color); width: 92%; max-width: 850px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); position: relative; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; animation: modalFadeIn 0.25s ease-out;
        }
        @keyframes modalFadeIn { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .close-btn { position: absolute; right: 20px; top: 15px; font-size: 28px; font-weight: bold; color: var(--text-sub); cursor: pointer; transition: 0.2s; line-height: 1; }
        .close-btn:hover { color: var(--primary-color); }

        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        @media (max-width: 600px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
        .stats-box { background-color: var(--btn-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
        .stats-label { font-size: 11px; color: var(--text-sub); font-weight: bold; margin-bottom: 3px; }
        /* v12.3: 통계 박스는 회색 배경이므로 푸른 계열 강조색 대신 검정/본문색을 사용합니다. */
        .stats-value { font-size: 15px; font-weight: bold; color: var(--text-main); }

        .chart-wrapper { position: relative; width: 100%; height: 400px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); }
        #chartArea { width: 100%; height: 100%; }
        
        .chart-legend { position: absolute; top: 15px; left: 15px; z-index: 10; font-size: 11px; font-family: 'Courier New', Courier, monospace; background: rgba(255, 255, 255, 0.85); color: #333333; padding: 10px; border-radius: 6px; border: 1px solid #dddddd; pointer-events: none; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
        [data-theme="dark"] .chart-legend { background: rgba(30, 30, 30, 0.85); color: #e0e0e0; border-color: #444444; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
        .classic-mode-section, .bundle-mode-section { display: none; }

        @media (max-width: 600px) { .theme-toggle { position: relative; display: block; width: 100%; margin-top: 10px; } .bundle-bar-row { grid-template-columns: 78px minmax(160px, 1fr) 58px; } .bundle-bar-text { font-size: 12px; } .bundle-table-container { border: 1px solid var(--border-color); border-radius: 8px; } }