/* 1. CSS (스타일) */
:root {
    --bg:#0c1024; --card:#14183a; --accent:#6aa7ff; --green:#00d084; --red:#ff4d6d; --text:#ecf2ff;
    --header-height: 75px; /* JS에서 실제 높이로 덮어씀 */
}
* { box-sizing: border-box }
body { margin:0; font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); min-height: 100vh; }

/* --- [수정] 헤더: 상단 고정 --- */
header {
    padding: 12px 16px;
    border-bottom: 1px solid #1f2450;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
}

/* --- [요청 3] PC/모바일 공통 헤더 레이아웃 --- */
/* 1. PC/모바일 공통: [시간] [이벤트] [햄버거] 순서 */
header .hamburger-btn {
    display: flex !important; /* ⭐ 항상 햄버거 버튼 표시 */
    order: 3;                 /* 3. 햄버거 (오른쪽) */
    font-size: 1.5em;
    border-radius: 8px;
    background: #2a3280;
}

header .next-event {
    display: block !important; /* ⭐ 항상 다음 이벤트 표시 */
    width: auto;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    text-align: center; 
    font-size: 14px;
    flex-grow: 1;             /* 2. 남은 공간 차지 (중앙) */
    order: 2;                 /* 2. 다음 이벤트 */
    margin-left: 10px; 
    margin-right: 10px;
    
    /* 기본 색상 및 폰트 (기존 .next-event) */
    font-weight: 600;
    color: var(--accent);
}

header #timerContainer {
    text-align: left !important; /* ⭐ 항상 왼쪽 정렬 */
    flex-shrink: 0;
    order: 1;                 /* 1. 타이머 (왼쪽) */
}

/* 2. PC/모바일 공통: 기존 PC 요소들 항상 숨기기 */
header #headerLeftGroup,
header .view-toggle-group,
header h1 {
    display: none !important; /* ⭐ 항상 숨기기 */
}
/* --- [요청 3] 변경 끝 --- */

/* 다음 이벤트 알리미 내부 요소 스타일 정의 */
.next-event {
    /* 기존 스타일 유지 */
    gap: 6px; 
}

/* ⭐ [추가] "다음 이벤트: " 텍스트에 적용. 흰색(var(--text))으로 설정. */
.next-event .next-event-prefix {
    color: var(--text); /* 기본 텍스트 색상 */
    font-weight: 500;
}

/* ⭐ [수정] 시간 값 (02:50)에 적용. 강조색(var(--accent))으로 설정. */
.next-event .next-event-time-value {
    color: var(--accent); 
    font-weight: 700;
}

.next-event .next-event-market {
    /* 종목명은 기본 텍스트 색상(var(--text))으로 설정 */
    color: var(--text); 
    font-weight: 700;
    margin-right: 4px; /* 시간과 호재/악재 사이 간격 조정 */
}

/* ⭐ [추가된 부분] 나가기 버튼 스타일 (사이드 메뉴에서 사용됨) */
.header-btn {
    background: #444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
}
.header-btn:hover {
    background: #666;
}


/* [수정 1] 뷰 전환 버튼 그룹 (사이드 메뉴에서 사용됨) */
.view-toggle-group {
    /* display: flex; (전역에서 none 처리됨) */
    flex-shrink: 0;
}
.view-toggle-group button {
    padding: 6px 10px;
    min-width: 50px;
    border: 1px solid #2a3280;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    opacity: 0.6;
}
.view-toggle-group button:first-child {
    border-radius: 8px 0 0 8px;
    border-right-width: 0.5px;
}
.view-toggle-group button:last-child {
    border-radius: 0 8px 8px 0;
    border-left-width: 0.5px;
}
.view-toggle-group button.active {
    background: #3a47a8;
    border-color: #3a47a8;
    opacity: 1;
}


main { max-width:1200px; margin:0px auto; padding:0 10px; display:grid; grid-template-columns: 1fr 280px; gap:16px }
.card { background:var(--card); border:1px solid #1f2450; border-radius:12px; padding:5px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.big { font-size:24px; font-weight:800 }
.label { font-size:12px; opacity:.8 }
.small { font-size:12px; opacity:.75 }
.krw { font-variant-numeric:tabular-nums }
.green { color:var(--green)} .red { color:var(--red)}
.timer { font-weight:800; font-size:32px; color:var(--accent); }

/* [요청 2] 모드 정보와 뷰 전환 버튼을 감싸는 컨테이너 스타일 */
.info-controls-wrap {
    display: flex;
    justify-content: space-between; /* 양쪽 끝 정렬 */
    align-items: center;
    flex-wrap: wrap; /* 모바일 대응 */
    margin-bottom: 12px;
}
/* ⭐ [추가] 압축 보기(모바일)에서는 모드 정보 숨기기 */
.view-mode-list .info-controls-wrap {
    display: none;
}

/* [요청 2] 모드 정보 폰트 크기 조정 */
.game-mode-info .big {
    font-size: 20px; /* PC 기본 크기 조정 */
}

/* --- [수정 5] 'PC 보기 (Grid View)' 스타일 (CSS Grid로 재구성) --- */
.view-mode-grid .market-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.view-mode-grid .market {
    background: #10143a;
    border: 1px solid #212764;
    border-radius: 12px;
    padding: 12px;
    /* [수정 5] HTML 구조 변경에 따른 Grid 재정의 */
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
        "name price"
        "news news"
        "chart chart"
        "stats stats"
        "controls controls";
    gap: 8px;
}
.view-mode-grid .market-name { grid-area: name; }
.view-mode-grid .market-price { grid-area: price; text-align: right; }
.view-mode-grid .market-news { grid-area: news; margin-top: 0; display: flex; }
.view-mode-grid .chart { grid-area: chart; height: 80px; margin-top: 0; }
.view-mode-grid .statbox { grid-area: stats; margin-top: 0; }
.view-mode-grid .trade-controls { grid-area: controls; display: flex; align-items: center; margin-top: 0; }
.view-mode-grid .trade-input { width: 65px; }
.view-mode-grid .btn-buy { flex: 1; }
.view-mode-grid .btn-sell { flex: 1; }

/* 개별 종목 뉴스 알림 (PC용) */
.market-news {
    min-height: 30px; margin-top: 8px; padding: 4px 8px; border-radius: 6px; 
    font-size: 13px; font-weight: 600; align-items: center;
    justify-content: center; text-align: center;
}
.market-news.alert-up { background-color: rgba(0, 208, 132, 0.2); color: var(--green); border: 1px solid var(--green); }
.market-news.alert-down { background-color: rgba(255, 77, 109, 0.2); color: var(--red); border: 1px solid var(--red); }

/* 공통 매매 컨트롤 스타일 */
.trade-input { padding: 6px; border-radius: 6px; border: 1px solid #2a3280; background: #0d1133; color: var(--text); text-align: right; }
.btn-buy { background:#143b2b; color:var(--text); padding:8px 10px; border:none; border-radius:8px; cursor:pointer; font-weight:700; }
.btn-sell { background:#4a1930; color:var(--text); padding:8px 10px; border:none; border-radius:8px; cursor:pointer; font-weight:700; }
.btn-buy:hover{background:#18543b}
.btn-sell:hover{background:#64223f}

/* 대출/상환 버튼 스타일 */
.btn-borrow, .btn-repay {
    color: var(--text); padding: 8px 12px; border: none; border-radius: 8px;
    cursor: pointer; font-weight: 700; flex: 1;
}
.btn-borrow { background: #2a3280; }
.btn-repay { background: #4a1930; }
.btn-borrow:hover { background: #3a47a8; }
.btn-repay:hover { background: #64223f; }

.statbox { background:#0f1338; border:1px solid #212764; border-radius:10px; padding:10px; }
.chart { background:linear-gradient(180deg,#182058 0%, #0f1338 100%); border:1px solid #212764; border-radius:10px; overflow:hidden; margin-top: 4px; }
canvas { width:100%; height:100% }

/* [요청 4] 주요 뉴스 스타일 개선 */
.news-container {
    margin-top: 16px; 
    border-top: 1px solid #1f2450; 
    padding-top: 10px;
}
.news-label {
    font-size: 12px; 
    opacity: 0.8; 
    font-weight: 700; 
    color: var(--accent);
    margin-bottom: 4px;
}
/* ⭐ [충돌 요소 제거]: .news 선택자에 있던 2줄 말줄임표 관련 CSS가 모두 제거되었습니다. */
.news {
    /* 🚨 2줄 말줄임표 관련 속성 모두 제거됨 */
    border-left: 3px solid var(--accent); 
    padding-left: 10px; 
    margin-top: 0;
    font-weight: 600;
}
/* --- 0. 모바일 압축 보기 뉴스 컨테이너 설정 (기존 충돌 코드 재정의) --- */
.view-mode-list .news-container {
    margin-top: 0;
    padding-top: 8px;
    margin-bottom: 8px;
    /* 뉴스 라벨과 본문이 감싸는 컨테이너 */
}
/* ⭐ 충돌 해결: .view-mode-list .news 에 있던 텍스트 제한 속성 모두 제거/덮어쓰기! ⭐ */
.view-mode-list .news {
    /* 🚨 기존 -webkit-line-clamp: 1; 로 인한 충돌 제거 */
    font-size: 12px; /* 13px에서 12px로 변경하여 다른 요소와 통일 */
    
    /* 텍스트를 한 줄로 강제하는 속성 제거 */
    -webkit-line-clamp: unset !important;
    display: flex !important; /* display: -webkit-box; 를 덮어씀 */
    -webkit-box-orient: unset !important;
    text-overflow: unset !important;
}

.view-mode-list .news .news-label-type {
    font-size: 10px;
    padding: 2px 4px;
    margin-right: 4px;
}

.news.news-up { border-left:3px solid var(--green); color: var(--green); }
.news.news-down { border-left:3px solid var(--red); color: var(--red); }
/* [추가] 찌라시/일반 뉴스 중립 스타일 */
.news.news-neutral { border-left:3px solid var(--accent); color: var(--text); }

/* 새롭게 추가된 찌라시/일반 뉴스 라벨 스타일 */
.news .news-label-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 4px;
    margin-right: 8px;
    opacity: 0.8;
    background-color: #2a3280; /* 중립 기본 배경색 */
    color: var(--text);
    /* 라벨이 줄어들지 않도록 설정 */
    flex-shrink: 0;
}

/* 호재 찌라시/뉴스 라벨 색상 */
.news.news-up .news-label-type {
    background-color: var(--green);
    color: #0c1024; /* 어두운 배경 */
}

/* 악재 찌라시/뉴스 라벨 색상 */
.news.news-down .news-label-type {
    background-color: var(--red);
    color: #0c1024; /* 어두운 배경 */
}

/* --- 모달 오버레이 스타일 (생략 없음) --- */
#end-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); z-index: 9998; display: none; justify-content: center; align-items: center; }
.end-modal { 
    background: var(--card); 
    border: 2px solid var(--accent); 
    border-radius: 12px; 
    padding: 20px; 
    max-width: 400px; 
    width: 90%; 
    text-align: center; 
    
    /* ⭐ 필수 추가: 자식 버튼의 절대 위치 기준점 설정 */
    position: relative; 
}
.end-modal button { padding: 10px 15px; font-size: 14px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.end-modal button#restart { background: #2a3280; color: var(--text); }
.end-modal button#restart:hover { background: #3a47a8; }

/* ⭐ 새로 추가: X 버튼 스타일 및 위치 */
.modal-close-btn {
    position: absolute;
    top: 10px;    /* 모달 상단에서 10px 떨어진 위치 */
    right: 10px;  /* 모달 오른쪽에서 10px 떨어진 위치 */
    
    /* 버튼 스타일 초기화 및 설정 */
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: var(--text);
    padding: 5px; /* 클릭 영역 확보 */
    cursor: pointer;
    z-index: 20; 
    opacity: 0.7; 
    transition: opacity 0.2s;
}

.modal-close-btn:hover {
    opacity: 1;
}

/* --- 토스트 알림 스타일 (상단 중앙) --- */
.toast {
    visibility: hidden; 
    min-width: 250px; 
    
    /* [수정 1] 기존 margin-left를 삭제하고 transform으로 중앙 정렬 */
    /* margin-left: -125px; */ 
    margin-left: 0; 

    background-color: #0d1133; 
    color: var(--text); 
    text-align: center; 
    border-radius: 6px; 
    padding: 12px 20px; 
    position: fixed; 
    z-index: 9999; 
    left: 50%; 
    top: 80px; 
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #2a3280;
    
    /* ⭐ [수정 2] 긴 메시지 두 줄 문제 해결 및 모바일 최적화 */
    white-space: nowrap; /* 줄바꿈 방지 */
    overflow: hidden; /* 넘치는 텍스트는 숨김 */
    text-overflow: ellipsis; /* 숨겨진 텍스트는 ...으로 표시 */
    max-width: 90vw; /* 모바일에서 화면을 넘지 않도록 최대 너비 설정 */
    transform: translateX(-50%); /* 정확한 가변 너비 중앙 정렬 */
}
.toast.show {
    visibility: visible; 
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* fadein/fadeout 애니메이션 정의 */
@-webkit-keyframes fadein {
    from { top: 0; opacity: 0; }
    to { top: 80px; opacity: 1; }
}
@keyframes fadein {
    from { top: 0; opacity: 0; }
    to { top: 80px; opacity: 1; }
}
@-webkit-keyframes fadeout {
    from { top: 80px; opacity: 1; }
    to { top: 0; opacity: 0; }
}
@keyframes fadeout {
    from { top: 80px; opacity: 1; }
    to { top: 0; opacity: 0; }
}

/* 주가 변동 애니메이션 (생략 없음) */
@keyframes priceUpFlash { 0% { background-color: transparent; } 50% { background-color: rgba(0, 208, 132, 0.4); } 100% { background-color: transparent; } }
@keyframes priceDownFlash { 0% { background-color: transparent; } 50% { background-color: rgba(255, 77, 109, 0.4); } 100% { background-color: transparent; } }
.price-flash-up { animation: priceUpFlash 0.5s ease-out; }
.price-flash-down { animation: priceDownFlash 0.5s ease-out; }

/* 타임라인 스타일 (PC용) (생략 없음) */
.timeline-item { display: flex; align-items: center; padding: 5px 0; font-size: 13px; }
.timeline-time { width: 40px; font-weight: 700; color: var(--accent); flex-shrink: 0; text-align: right; padding-right: 8px; border-right: 2px solid #2a3280; margin-right: 8px; }
.timeline-content { flex-grow: 1; }
.timeline-current { background-color: rgba(106, 167, 255, 0.2); border-radius: 4px; padding: 4px; } 

/* ⭐ [제거] #player-stats-footer 관련 스타일 모두 제거 */


/* --- 모바일 '압축 보기 (List View)' 스타일 (⭐ 전면 수정) --- */
.view-mode-list .market-grid { 
    display: block; /* 수직 스택 */ 
    margin-top: 0; /* 마진 제거 */
}
.view-mode-list .market {
    display: flex; /* ⭐ Grid에서 Flex로 변경 */
    align-items: center;
    gap: 6px; /* 간격 축소 */
    padding: 8px; /* 패딩 축소 */
    background: #10143a;
    border: 1px solid #212764;
    border-radius: 12px;
    margin-bottom: 8px; /* 마진 축소 */
    flex-wrap: wrap; /* ⭐ [수정] 2줄로 나뉠 수 있도록 wrap 허용 */
}

/* 1. 이름 (Flex: 0 0 50px) */
.view-mode-list .market-name {
	order: 0; /* 가장 먼저 */
    grid-area: unset;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 50px; /* 50px 고정 너비 할당 */
    min-width: 50px;
	margin-right: 6px;
}
.view-mode-list .market-name .big {
    font-size: 16px;
}
.view-mode-list .market-name .label {
    display: none; /* 레이블 숨기기 (유지) */
}

/* 2. 그래프 (차트) - 이름 다음 */
/* ✅ [수정/통합] 압축 보기에서도 그래프(차트) 표시 (Order: 1) */
.view-mode-list .market .chart {
    display: block !important; /* 숨김 해제 */
    order: 1; /* ⭐ 순서 통일: 이름(0) 다음 */
    /* 👇 최소 너비를 60px로 축소하여 공간 확보 */
    flex: 1 1 60px; /* ⭐ 수정: 최소 60px 확보 후 남는 공간 차지 */
    height: 40px; /* 작게 표시 */
    margin: 0 8px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg,#182058 0%, #0f1338 100%);
    border: 1px solid #212764;
}

/* 2. 통계 박스(.statbox)의 구조 변경 및 불필요한 항목 숨기기 */
.view-mode-list .market .statbox {
	order: 2; /* ⭐ 순서 설정: 그래프(1) 다음 */
    display: block; /* 내부 줄 바꿈 허용 */
    padding: 0;
    margin: 0 8px; /* 그래프와 가격 사이에 적절한 간격 추가 */
    line-height: 1.2;
    font-size: 0.8em;
    /* ⭐ Flex Item으로서 최소한의 너비만 차지하도록 설정 */
    flex: 0 0 auto; /* 공간이 남아도 늘어나지 않고, 내용만큼만 너비 유지 */
    white-space: nowrap; /* 보유 수량 내부 텍스트 줄 바꿈 방지 */
    margin-top: 0; /* 종목명 밑에 두줄로 보이도록 위치 조정 (제거) */
}

/* 3. 보유 수량(첫 번째 flex:1)을 제외한 나머지 통계 항목 숨기기 */
.view-mode-list .market .statbox > div:not(:first-child) {
    display: none;
}

/* 4. 가격 (Flex: 1 1 auto) - 남은 공간 차지 */
.view-mode-list .market-price {
	order: 3; /* ⭐ 순서 설정: 보유 수량(2) 다음 */
    grid-area: unset;
    text-align: right;
    font-weight: 700;

    min-width: 90px; /* 가격이 줄바꿈 되지 않을 정도의 최소 너비 설정 */
    flex: 1 0 auto; /* 남은 공간을 차지하도록 설정 (줄어들지 않음) */

    white-space: nowrap; /* ⭐ 가격 요소 자체의 줄 바꿈 방지 (유지) */
    
    /* ⭐ [추가] 내부 요소(현재가, 변동폭)를 가로로 배치하기 위한 Flexbox 설정 */
    display: flex;
    flex-direction: column; /* 기존 설정 유지 */
    justify-content: center;
}
.view-mode-list .market-price .label {
    display: none; /* 레이블 숨기기 (유지) */
}
.view-mode-list .market-price .big {
    font-size: 16px;
    /* ⭐ [수정] 가격/변동폭 가로 배치 핵심: block 제거하고 inline-block */
    display: inline-block;
    vertical-align: middle;
}
.view-mode-list .market-price .small {
    font-size: 11px;
    font-weight: 600;
    /* ⭐ [수정] 가격/변동폭 가로 배치 핵심: block 제거하고 inline-block */
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px; /* 현재가와 변동 폭 사이 간격 */
}

/* ✅ 압축보기 두 번째 줄 (매매 컨트롤) 전체 폭 채우기 */
.view-mode-list .trade-controls {
    order: 5; /* 가장 마지막 */
    display: flex;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    flex: 1 1 100%; /* 두 번째 줄 전체 차지 */
    margin-top: 6px;
    gap: 8px;
}

/* 3. 가격 (Flex: 1 1 auto) - 남은 공간 차지 */
.view-mode-list .market-price {
	order: 3;
    grid-area: unset;
    text-align: right;
    font-weight: 700;
    
    /* ⭐ [수정] 90px 대신 110px로 늘려서 긴 가격(예: ₩1,234,567 +12.34%) 수용 */
    min-width: 110px; 
    
    /* 줄어들지 않고 남은 공간을 차지하도록 유지 */
    flex: 1 0 auto; 
    
    /* 줄 바꿈 방지 (유지) */
    white-space: nowrap; 
}

/* 가격 요소 내부의 변동폭(diffEl)은 더 작게 보이도록 */
.view-mode-list .market-price [data-id="diffEl"] {
    display: block; /* 줄 바꿈되어 보이더라도 요소 자체는 한 줄에 위치 */
    font-size: 0.7em;
}

/* ✅ 수량: 1 비율 (가운데 정렬 유지) */
.view-mode-list .trade-controls .trade-input {
  flex: 1 1 0;
  text-align: center;
  font-size: 16px;
  padding: 8px;
  height: 38px;
  border-radius: 8px;
}

/* ✅ 매수/매도: 각 1.5 비율로 넓게 */
.view-mode-list .trade-controls .btn-buy,
.view-mode-list .trade-controls .btn-sell {
  flex: 1.5 1 0; /* 수량보다 약 1.5배 넓게 */
  height: 40px;
  font-size: 15px;
  font-weight: 700;
  padding: 8px;
  border-radius: 8px;
}

/* ✅ 버튼 시각적 강조 (hover 효과 유지) */
.view-mode-list .trade-controls .btn-buy:hover {
  background: #18543b;
}
.view-mode-list .trade-controls .btn-sell:hover {
  background: #64223f;
}

/* --- 3. 2번째 줄: 호재 알림 (.market-news) - Order 4 (마퀴 부모) --- */
.view-mode-list .market-news {
    /* (전체 유지) */
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;

    order: 4; 
    display: flex; 
    flex: 0 0 100%; 
    
    margin-top: 6px;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 6px;
    
    /* ⭐ 마퀴(Marquee) 효과를 위한 설정 (유지) */
    overflow: hidden; 
    align-items: center; 
    
    /* ⭐ 줄 바꿈 방지 (유지) */
    flex-wrap: nowrap; 
}

/* --- [수정] PC 그리드 뷰: 통계 항목 레이아웃 (가로 정렬, 줄바꿈 방지 및 말줄임표 강제) --- */

/* 1. 통계 항목 컨테이너 (3개의 항목을 가로로 정렬) */
/* index.js의 <div class="row statbox" data-id="stats"> 요소를 타겟 */
.view-mode-grid .market [data-id="stats"] {
    display: flex; 
    flex-direction: row; /* ⭐ 핵심 수정: 가로 정렬 강제 (수직 정렬 오버라이드 방지) */
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    justify-content: space-between; /* 항목 사이에 공간 분배 */
    gap: 10px; /* 항목 간 간격 */
    padding: 0; 
    border: none; 
    background: transparent;
    margin-top: 4px;
}

/* 2. 각 통계 항목 (보유 수량, 평균 단가, 평가 금액)을 감싸는 inner div 스타일 */
/* index.js의 <div style="flex:1"> 요소를 타겟하여 카드 스타일 복원 */
.view-mode-grid .market [data-id="stats"] > div {
    text-align: right; /* 숫자 오른쪽 정렬 */
    padding: 8px;
    background: #0f1338;
    border: 1px solid #212764;
    border-radius: 10px;
}

/* 3. 모든 라벨과 값의 텍스트가 줄바꿈되지 않고 한 줄에 표시되도록 강제 */
.view-mode-grid .market .statbox .label,
.view-mode-grid .market .statbox [data-id] {
    white-space: nowrap;     /* 줄바꿈 강제 방지 (핵심) */
    word-break: keep-all;    /* 한글 단어 깨짐 방지 */
    min-width: 0;            /* flex 아이템이 넘칠 때 오류 방지 */
}

/* 4. '평가 금액'이 넘칠 경우 말줄임표(...)로 처리 및 툴팁 커서 설정 */
.view-mode-grid .market .statbox [data-id="valueEl"] {
    overflow: hidden;        /* 영역을 넘치는 내용 숨기기 */
    text-overflow: ellipsis; /* 넘치는 텍스트를 ... (말줄임표)로 표시 */
    font-weight: bold;       /* 금액 강조 */
    cursor: help;            /* 툴팁 표시를 위한 커서 */
}

/* ✅ PC 보기 (그리드 모드)에서도 뉴스 한 줄로 표시 */
.view-mode-grid .market-news,
.view-mode-grid .news-container .news {
    display: flex;
    align-items: center;
    overflow: hidden; /* 텍스트가 영역을 넘지 않도록 */
    flex-wrap: nowrap; /* 줄바꿈 방지 */
}

/* ✅ 텍스트 부분도 한 줄 유지 */
.view-mode-grid .market-news .news-text-wrapper,
.view-mode-grid .news-container .news .news-text-wrapper {
    overflow: hidden;
    flex: 1 1 0;
}

.view-mode-grid .market-news .news-text-inner,
.view-mode-grid .news-container .news .news-text-inner {
    display: inline-block;
    white-space: nowrap;
}

/* 뉴스 전체 컨테이너 */
.view-mode-list .market-news,
.view-mode-list .news-container .news {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden; /* 텍스트가 container 밖으로 안 나가도록 */
    flex-wrap: nowrap;
    margin-top: 6px;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 6px;
}

/* 라벨: 항상 위쪽 레이어 */
.view-mode-list .market-news .news-label-type,
.view-mode-list .news-container .news .news-label-type {
    position: relative;
    flex-shrink: 0;
    margin-right: 6px;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    z-index: 2; /* 텍스트보다 위 */
}

/* 텍스트 wrapper: 라벨 뒤로 안 들어가도록 보호 */
.view-mode-list .market-news .news-text-wrapper,
.view-mode-list .news-container .news .news-text-wrapper {
    flex: 1 1 0;         /* 남은 공간 채움 */
    overflow: hidden;    /* wrapper 밖 텍스트 숨김 */
    position: relative;
}

/* 실제 움직이는 텍스트 */
.view-mode-list .market-news .news-text-inner,
.view-mode-list .news-container .news .news-text-inner {
    display: inline-block;
    white-space: nowrap; 
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    z-index: 1;          /* 라벨보다 뒤 */

    /* 초기 상태: 애니메이션 적용 안함 */
    animation: none;
}

/* 마퀴 애니메이션 정의 (JS에서 이동 거리 계산 후 적용) */
@keyframes marquee-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--marquee-end, 0)); }
}

/* 1. 불필요한 요소 숨기기 (기존과 동일) */
.view-mode-list .market-name .label,
.view-mode-list .market-price .label {
    display: none;
}

/* ⭐ [신규] 햄버거 메뉴 관련 스타일 */
#slideMenuOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* 1. 슬라이드 메뉴 초기 상태 (숨김) */
#slideMenu {
    /* 기존 스타일 유지 (flex, column, height: 100%) */
    position: fixed;
    top: 0;
    right: -280px; /* 슬라이드 메뉴 너비만큼 화면 밖으로 이동하여 숨김 */
    width: 280px; /* 메뉴 너비 */
    height: 100%;
    z-index: 1000;
    background: var(--card); 
    border-left: 1px solid #1f2450;
    padding: 16px;
    transition: right 0.3s ease-out; /* 슬라이드 애니메이션 */
    
    /* 기존 스타일에서 누락될 수 있는 부분 재확인 */
    display: flex;
    flex-direction: column;
}

/* 2. 슬라이드 메뉴 활성화 상태 (보임) */
#slideMenu.active {
    right: 0; /* 화면 안으로 이동 */
}

/* ⭐ [신규] 메뉴 헤더 및 닫기 버튼 스타일 */
#slideMenu .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #2a3280;
    padding-bottom: 10px;
}
#slideMenu .menu-header h3 {
    margin: 0;
    color: var(--accent);
    padding-bottom: 0;
    border-bottom: none;
}
#slideMenu .close-menu-btn {
    background: transparent;
    color: var(--text);
    opacity: 0.7;
    width: 30px;
    height: 30px;
    font-size: 1.5em;
    font-weight: 700;
    border-radius: 8px;
    padding: 0; /* .header-btn 패딩 초기화 */
}
#slideMenu .close-menu-btn:hover {
    background: #2a3280;
    opacity: 1;
}
/* ⭐ [신규] 스타일 끝 */
#slideMenu .menu-section p {
    margin: 0 0 8px 0;
    font-weight: 700;
    opacity: 0.8;
    font-size: 14px;
}
/* JS로 메뉴가 열렸을 때 */
body.menu-open #slideMenuOverlay {
    opacity: 1;
    pointer-events: auto;
}
body.menu-open #slideMenu {
    left: auto !important; /* ⭐ left 고정 해제 */
    right: 0;              /* ⭐ 오른쪽 0으로 이동 */
}
/* --- [요청] 변경 끝 --- */


/* 뷰 모드 버튼 그룹화 (가로로 배치) */
#menuViewToggleContainer {
    display: flex;
    gap: 8px;
}

#menuViewToggleContainer .menu-btn {
    flex: 1; /* 두 버튼이 동일한 너비를 갖도록 */
    margin-top: 0;
}

/* --- [신규] 메뉴 버튼 공통 스타일 --- */
.menu-section {
    padding-bottom: 10px;
}

.menu-section .menu-btn {
    width: 100%;
    padding: 10px 15px;
    margin-top: 8px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    text-align: center; /* 텍스트 중앙 정렬 */
}

.menu-section .menu-btn:hover:not(:disabled) {
    background: #1f2450;
}

/* 활성화된 (선택된) 뷰 모드 버튼 */
.menu-section .menu-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg); /* 활성화된 버튼의 텍스트 색상 변경 */
    font-weight: 800;
}

/* 3. 나가기 버튼 스타일 */
.menu-exit-btn {
    background: #3a162a; /* 빨간 계열 배경 */
    border-color: var(--red);
    color: var(--red); /* 빨간 계열 글씨 */
    font-weight: 800;
}

.menu-exit-btn:hover:not(:disabled) {
    background: #5c203b;
}

.menu-exit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4 !important;
}

/* 4. 게임 규칙 모달 내부 스타일 */
#rulesModal .card {
    background: var(--card); /* 배경색 지정 */
    border: 1px solid #1f2450;
    border-radius: 12px;
}
#rulesModal ul {
    list-style-type: disc;
}
#rulesModal li {
    margin-bottom: 4px;
}

/* 메뉴 안의 버튼들 스타일 */
#menuViewToggleContainer .view-toggle-group {
    display: flex !important; /* ⭐ 메뉴 안에서는 뷰 토글을 항상 표시 */
    width: 100%;
}
#menuViewToggleContainer .view-toggle-group button {
    flex: 1; /* 50% 꽉 채우기 */
    padding: 12px;
    font-size: 16px;
}
#menuExitContainer #exit-btn {
    width: 100%;
    border-radius: 8px; /* 원형 대신 사각형 */
    font-size: 16px;
    padding: 12px;
	background: #28a745; /* 초록색 */
	color: white;
	border: none;
	cursor: pointer;
	text-align: center;
	white-space: nowrap; /* 줄바꿈 방지 */
	transition: background 0.3s;
}

/* 호버 효과 */
#exit-btn:hover {
	background: #218838; /* 어두운 초록색 */
}

/* ⭐️ [핵심 수정] 모바일 압축 보기 하단 푸터 높이 자동 조정 및 세로 쌓기 강제 ⭐️ */
.view-mode-list .stats-loan-block {
    position: fixed; /* ⭐ 하단 고정 */
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: #10143a; /* 배경색으로 덮기 */
    border-top: 1px solid #1f2450;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ⭐️ [수정] 높이를 내용에 맞게 자동 조정하고 세로로 쌓습니다. */
    flex-direction: column; 
    align-items: stretch; /* 자식 요소를 가로로 꽉 채움 */
    height: auto; 
    min-height: 70px;
}

/* [추가] 모바일 압축 보기에서 대출/상환 버튼 컨테이너 강제 표시 */
.view-mode-list .stats-loan-block .loan-buttons {
	display: flex !important; /* 버튼 컨테이너가 숨겨지지 않도록 강제 */
	width: 100%; /* 부모 statbox 내에서 전체 너비 차지 */
	gap: 8px;
	margin-top: 4px; /* 대출 금액과 버튼 사이 간격 추가 */
}

.timeline-item.passed {
    opacity: 0.5; /* 시간이 지난 항목은 투명도를 낮춰서 흐릿하게 표시 */
}

/* --- 반응형 --- */
@media (max-width:1080px){
    main { 
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
		/* ⭐️ [수정] 하단 푸터가 두 줄이 될 경우를 대비해 패딩을 70px에서 110px로 확장 */
        padding-bottom: 110px; 
    }
    #game-section { order: 1; } /* 게임 섹션 위로 */
    #timeline-aside { order: 2; } /* 타임라인 섹션 아래로 */
    
    /* ⭐ [제거] 1080px 이하 헤더 규칙들 (글로벌로 이동됨) */


    /* ⭐ [신규] 모바일 압축 보기에서 하단 고정 푸터 (stats-loan-block) 재정의 */
    .view-mode-list #game-section {
        position: relative; /* 자식 요소의 fixed 기준이 아님 */
        padding-bottom: 10px; /* 푸터 높이만큼 여유 공간 (스크롤 끝 도달 시) */
    }
	.view-mode-list .stats-loan-block {
		/* ✨ 하단 푸터가 두 줄의 내용을 모두 담도록 높이와 방향을 강제 */
		display: flex !important; 
		height: auto !important; /* 높이 자동 조정 강제 */
        flex-direction: column !important; /* 세로 정렬 강제 */
		
		position: fixed !important; 
		bottom: 0 !important; 
		left: 0 !important; 
		width: 100% !important; 

		/* 기존 코드 유지 */
		background: var(--bg);
		padding: 8px; 
		z-index: 20;
		border-top: 1px solid #1f2450;
		margin-top: 0 !important; 
	}
    /* #marginWarn은 #stats-loan-row 위에 겹쳐야 함 */
    .view-mode-list #marginWarn {
        bottom: 100px; /* 대략적인 푸터 높이 위에 */
        padding: 8px 16px;
        border-radius: 8px 8px 0 0;
        border-bottom: none;
    }
    .view-mode-list #stats-loan-row {
         z-index: 21; /* 마진콜 경고보다 위에 있도록 */
         align-items: flex-start !important; /* 인라인 스타일 덮어쓰기 */
    }


    /* 푸터 내부 폰트 크기 강제 조정 (모바일 최적화) */
    .view-mode-list .stats-loan-block .row {
        gap: 8px; /* 모바일에서 갭 줄임 */
        flex-wrap: nowrap; /* ⭐ 모바일에서도 한 줄 유지 */
    }
    .view-mode-list .stats-loan-block .big {
        font-size: 14px; 
    }
    .view-mode-list .stats-loan-block .btn-borrow,
    .view-mode-list .stats-loan-block .btn-repay {
        padding: 6px 8px;
        font-size: 12px;
    }
    .view-mode-list .stats-loan-block .statbox {
        padding: 6px; /* 패딩 감소 */
        min-width: 80px !important; /* min-width 강제 축소 */
        flex: 1 1 80px !important;
    }
	/* ⭐️ [수정/제거] 버튼 컨테이너가 statbox의 자식이 아님을 반영하여 잘못된 규칙을 제거/단순화 */
	/* 1. Loan Statbox (대출 잔액을 표시하는 박스) */
	.view-mode-list .stats-loan-block .statbox:last-child {
		/* 불필요한 display:flex/flex-direction:column 규칙 제거 */
		min-width: 80px !important; /* 크기 유지 */
		flex: 1 1 80px !important;
	}

	/* 2. Loan Buttons 컨테이너 (정상적으로 동작할 수 있도록 단순화) */
	.view-mode-list .stats-loan-block .loan-buttons {
		display: flex !important; 
		visibility: visible !important; 
		width: 100% !important;
		gap: 6px; 
		
		margin-top: 4px !important; 
		margin-bottom: 0 !important;
		padding: 0 !important;
        /* 버튼이 사라지는 것 방지용 최소 높이 유지 */
        min-height: 25px !important; 
	}

	/* 3. Statbox 내부의 대출 금액 텍스트 (추정되는 클래스) */
	/* 이 요소가 공간을 너무 많이 차지하는 것을 방지 */
	.view-mode-list .stats-loan-block .statbox:last-child > div:first-child,
	.view-mode-list .stats-loan-block .statbox:last-child > span:first-child {
		line-height: 1.2 !important; /* 텍스트 한 줄 높이로 압축 */
		margin-bottom: 0 !important;
	}
    /* [수정] 압축 보기에서 모드 정보/뷰 버튼 그룹 레이아웃: [모드 정보 (좌)] [버튼 (우)] */
    /* 이 블록은 .info-controls-wrap을 다루므로, 
       .view-mode-list에서는 숨겨졌기 때문에 .view-mode-grid에만 적용되도록 수정 */
    .view-mode-grid .info-controls-wrap {
        flex-wrap: nowrap; /* 줄바꿈 방지 */
        justify-content: space-between; /* 양쪽 끝 정렬 */
        flex-direction: row; /* 순서 반전 제거 */
    }
    .view-mode-grid .game-mode-info {
        flex-shrink: 1; /* 내용이 길면 줄어들도록 허용 */
        min-width: 0; 
        display: block; /* 압축 모드에서 숨기지 않음 */
    }
    .view-mode-list .game-mode-info {
        display: block; /* 압축 모드에서 모드 정보 표시 */
    }
    .view-mode-list .info-controls-wrap {
        /* 목록 보기일 때의 기존 반전/정렬 규칙 제거 및 통합 */
        justify-content: space-between;
    }
	
	/* 1. 통계 정보 (현금, 순자산, 대출) 블록의 부모 요소 타겟 */
    /* HTML에서 display:flex가 적용된 <div style="display:flex; ...">를 타겟 */
    .view-mode-grid .row.stats-loan-block > div:first-child {
        flex-wrap: wrap; /* 아이템이 공간 부족 시 다음 줄로 넘어가도록 허용 */
        /* flex-direction: column; 대신 flex-wrap: wrap;을 사용해 유연성 확보 */
    }

    /* 2. 각 statbox 요소 (현금, 순자산, 대출) */
    /* 세로로 쌓이도록 너비를 100%로 설정하고, 인라인 min-width를 무시 */
    .view-mode-grid .row.stats-loan-block .statbox {
        width: 100%; 
        /* 인라인 스타일(min-width:180px/240px, flex:1)을 강제 무시하고 너비 100%를 적용합니다. */
        min-width: unset !important; 
        flex: 0 0 100% !important;
    }
    
    /* 3. 대출/상환 버튼 (loan-buttons)은 1:1 가로 배치를 유지하도록 명시 */
    .view-mode-grid .row.loan-buttons {
        flex-direction: row; 
        flex-wrap: nowrap; /* 절대로 세로로 쌓이지 않도록 명시 */
    }
    
    .loan-buttons button {
        flex: 1 1 50%; /* 1:1 비율 유지 */
    }
}

@media (max-width:600px){
    /* PC 보기(그리드)일 때의 모바일 스타일 */
    .view-mode-grid .market-grid { grid-template-columns: 1fr; }
    .view-mode-grid .trade-controls { flex-wrap: wrap; }
    .view-mode-grid .trade-input { flex: 1; }
    .view-mode-grid .btn-buy, .view-mode-grid .btn-sell { margin-top: 6px; margin-left: 0; }
    .view-mode-grid .btn-sell { margin-left: 6px; }

    /* 모드 정보 폰트 크기를 줄여 한 줄에 들어갈 확률 높임 (600px 이하에서) */
    .game-mode-info .big {
        font-size: 16px; 
    }

    /* ⭐ [제거] 600px 이하 헤더 규칙 (글로벌로 이동됨) */
}

/* 카운트다운 오버레이 (JS에서 opacity와 display를 제어) */
#countdownOverlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.8); 
    color: white; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 9999; 
    opacity: 0; 
    transition: opacity 0.5s;
    pointer-events: none; /* 클릭 방지 */
}

/* 카운트다운 숫자 스타일 */
#countdownText {
    font-size: 5em; /* 텍스트 크기 */
    font-weight: 800;
}

/* '3', '2', '1' 숫자 스탬프 애니메이션 */
@keyframes stampIn {
    0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
    50% { transform: scale(1.1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.stamp {
    display: inline-block;
    animation: stampIn 0.3s ease-out forwards;
    color: #ffeb3b; /* 노란색 */
    text-shadow: 0 0 10px rgba(255, 235, 59, 0.6);
}

/* 'START' 페이드인 애니메이션 */
@keyframes startFade {
    0% { opacity: 0; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

.start-fade {
    display: inline-block;
    font-size: 1.5em; /* 'START'를 더 크게 */
    color: #4CAF50; /* 녹색 */
    animation: startFade 0.5s ease-out forwards;
    text-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
}

.trade-input {
  width: 80px;
  padding: 10px;
  font-size: 18px;
  font-weight: 700;
  text-align: center; /* ✅ 가운데 정렬 */
  border: 1px solid #2a3280;
  border-radius: 8px;
  background: #0d1133;
  color: #ecf2ff;
  outline: none;
  transition: all 0.2s ease;
}

.trade-input:focus {
  border-color: #6aa7ff;
  box-shadow: 0 0 6px rgba(106,167,255,0.6);
}

/* 트레이드 컨트롤 영역을 그리드로 변경하여 2줄 구성 */
.trade-controls {
    display: grid;
    /* 첫 번째 줄: 수량 입력(1fr), 매수 버튼(1fr), 매도 버튼(1fr) */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 8px; /* 그리드 요소 간 간격 */
    align-items: stretch;
    padding-top: 8px;
    border-top: 1px solid #1f2450;
}

/* 수량 입력칸 */
.trade-input {
    grid-column: 1 / 2; /* 1번 칸 차지 */
    text-align: center;
    padding: 8px;
    border: 1px solid #3d4677;
    border-radius: 4px;
    background: #1f2450;
    color: var(--text);
    font-size: 14px;
}

/* --- [수정] 매매 툴팁 스타일 (호버 시 표시 및 위치 조정) --- */

/* 트레이드 컨트롤 영역의 그리드 설정 유지 (수량, 매수, 매도 버튼을 3열로 배치) */
.trade-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 8px;
    align-items: stretch;
    padding-top: 8px;
    border-top: 1px solid #1f2450;
    position: relative; /* 자식 툴팁의 절대 위치 기준점 */
}

/* 툴팁을 담는 컨테이너 제거. 툴팁 요소를 버튼 아래 팝업처럼 띄웁니다. */
.tooltip-buy, .tooltip-sell {
    position: absolute; /* 버튼 위에 팝업처럼 띄우기 */
    z-index: 10;
    
    font-size: 11px;
    text-align: center;
    padding: 6px 8px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    
    /* 툴팁 숨기기 설정 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    
    /* 위치 조정 */
    top: -30px; /* 버튼 상단에 위치 */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* 매수 툴팁 스타일 */
.tooltip-buy {
    background: #10346c; /* 진한 파랑 배경 */
    color: #a0c3ff;      /* 연한 파랑 글씨 */
}

/* 매도 툴팁 스타일 */
.tooltip-sell {
    background: #3a1523; /* 진한 빨강 계열 배경 */
    color: #f7a0b2;      /* 연한 빨강 글씨 */
}

/* 현금/주식 부족 시 경고 스타일 */
.tooltip-buy.warn, .tooltip-sell.warn {
    color: #ff7a7a; 
    font-weight: bold;
}

/* ⭐ [핵심] 호버 시 툴팁 표시 */
.trade-controls .btn-buy:hover + .tooltip-buy,
.trade-controls .btn-sell:hover + .tooltip-sell {
    opacity: 1;
    visibility: visible;
}

/* 툴팁 위치 조정: 매수 툴팁을 매수 버튼 위에 정렬 */
.trade-controls .btn-buy:hover + .tooltip-buy {
    /* 매수 버튼 (그리드 2열) 중앙 위에 띄우기 위해 left 위치를 조정 */
    left: calc(100% / 3 * 1.5); 
}

/* 툴팁 위치 조정: 매도 툴팁을 매도 버튼 위에 정렬 */
.trade-controls .btn-sell:hover + .tooltip-sell {
    /* 매도 버튼 (그리드 3열) 중앙 위에 띄우기 위해 left 위치를 조정 */
    left: calc(100% / 3 * 2.5); 
}

/* --- 게임 규칙 모달 스타일 (최종 수정본) --- */

/* 오버레이 (JS에서 display: flex로 제어) */
.rules-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex; 
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* 모달 카드 (팝업 본체) - (수정) 하단 고정 버튼을 위한 패딩 추가 */
.rules-modal-card {
    max-width: 600px; /* ⭐ [최종] 가로 길이 확장 */
    width: 100%;
    padding: 24px 24px 80px 24px; /* ⭐ [수정] 하단 패딩을 늘려 고정 버튼 공간 확보 (약 80px 높이) */
    text-align: left;
    max-height: 90vh; 
    overflow-y: hidden; /* ⭐ [수정] 모달 본체 스크롤 숨김 (내부 컨테이너만 스크롤) */
    position: relative; /* 하단 푸터의 absolute 기준점 */
    
    background: var(--card); 
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* ⭐ [신규] 스크롤되는 내용 컨테이너 */
.rules-scroll-content {
    max-height: calc(90vh - 150px); /* 제목/패딩/마진/푸터 공간을 제외한 높이 */
    overflow-y: auto; /* 이 영역만 스크롤되도록 설정 */
}

/* ⭐ [신규] 스크롤바 숨김 (Webkit 브라우저 - Chrome, Safari, Firefox) */
.rules-scroll-content::-webkit-scrollbar { 
    width: 0;
    background: transparent;
}
.rules-scroll-content {
    scrollbar-width: none; /* Firefox */
}


/* ⭐ [신규] 하단 고정 닫기 버튼 컨테이너 */
.rules-fixed-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px 24px;
    background: var(--card); 
    border-top: 1px solid #1f2450;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999; 
    border-radius: 0 0 12px 12px;
}


/* 제목과 X 버튼 컨테이너 */
.modal-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    color: var(--accent);
    flex-grow: 1; 
}

/* 상단 닫기 버튼 */
.modal-close-btn {
    font-size: 18px; 
    line-height: 1;
    border: none;
    background: none;
    color: var(--text);
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.modal-close-btn:hover {
    opacity: 1;
}

/* 규칙 섹션 헤더 */
.rule-header {
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px 0;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 5px;
}

/* 마진 조절 유틸리티 */
.mt-20 {
    margin-top: 20px !important;
}

/* 항목 그룹 */
.rule-item-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 개별 규칙 항목 */
.rule-item {
    margin: 0;
    padding: 8px 10px;
    background: #191f4a; 
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    display: flex; 
    align-items: flex-start;
}

.rule-item .emoji {
    margin-right: 8px;
    font-size: 16px;
    line-height: 1.5;
    min-width: 16px; 
}

.rule-item .rule-text {
    flex: 1; 
}


/* 핵심 키워드 강조 스타일 */
.highlight {
    font-weight: bold;
    color: var(--accent);
}

.highlight-green {
    font-weight: bold;
    color: var(--green);
}

.highlight-red {
    font-weight: bold;
    color: var(--red);
}

/* 하단 닫기 버튼 스타일 */
.rules-close-btn {
    width: 100%;
    margin-top: 0; /* 고정 푸터 내부이므로 마진 제거 */
    font-weight: bold;
    padding: 12px 20px; 
    font-size: 16px;
    background: var(--accent);
    color: var(--card); 
    border: 1px solid var(--accent);
}

.rules-close-btn:hover {
    background: var(--text);
    color: var(--bg);
}

/* --- [신규] 일시정지 상태 스타일 --- */
.paused {
    color: var(--red) !important; /* 일시정지 시 빨간색으로 강조 */
    font-weight: 800;
}

/* 1. ⭐ [수정] 긴급 뉴스 라벨 (배경) */
.news-label-긴급-뉴스 {
    background-color: #ff9900; /* 🔶 비비드 오렌지 (골드/경고 느낌) */
    color: #14183a; /* 어두운 텍스트 (밝은 배경 대비) */
    font-weight: 800; 
    border: 1px solid #ff7700;
    animation: flashLabel 1s infinite alternate; 
}

/* 2. ⭐ [수정] 긴급 금리 뉴스 전용 스타일 (본문 및 테두리 색상) */
.news.news-emergency-hike {
    /* 붉은색(--red) 스타일을 덮어씁니다. */
    border-left: 3px solid #ff9900; /* 오렌지 테두리 */
    color: #ff9900; /* 🔶 오렌지색 텍스트 색상 적용 */
}

@keyframes flashLabel {
    from { opacity: 1; }
    to { opacity: 0.7; }
}

/* ===== [신규] 차트 툴팁 스타일 ===== */
#tooltip {
  position: absolute;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-family: Pretendard, sans-serif; /* 폰트 일관성 */
  font-weight: 600;
  pointer-events: none; /* 마우스 이벤트 통과 */
  white-space: nowrap;
  
  /* 커서의 중앙 위(120%)에 위치하도록 조정 */
  transform: translate(-50%, -120%); 
  
  display: none; /* 기본 숨김 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 10000; /* 최상단에 표시 */
}