/* ==================================================================
   UI 복구 패치층 (FINAL PATCH V1~V3)
   구 style.css 3040~3648줄
   ⚠️ 파일명 번호 = 로드 순서. 뒤 파일이 앞을 덮어쓰므로 순서를 바꾸면 화면이 깨진다.
   ================================================================== */
/* === [최종 UI 복구 및 스타일 통합] === */

/* 1. 뉴스 모달 (카드뉴스) - 스크롤 필수 (사용자 요청) */
#news-modal {
    display: flex;
    /* 상시 표시 버그 수정됨 -> script.js가 display 조절 */
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    padding: 20px !important;
}

/* 스크롤 제어의 핵심 클래스 */
.news-modal-content {
    background: #1a1a1a !important;
    width: 95% !important;
    max-width: 1400px !important;

    /* ★ 사용자 요청: 높이 제한 및 스크롤 ★ */
    max-height: 80vh !important;
    overflow-y: auto !important;
    display: block !important;
    /* flex 제거하여 스크롤 꼬임 방지 */

    padding: 15px !important;
    border-radius: 2px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    position: relative !important;
    margin: auto !important;
    box-sizing: border-box !important;

    /* 모바일 터치 스크롤 */
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* [디자인 복구] 뉴스 모달 헤더 & 버튼 스타일 */
.news-modal-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.news-modal-header h2 {
    color: #ffd700;
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.news-modal-subtitle {
    color: #aaa;
    font-size: 0.95rem;
    margin: 0;
}

.news-modal-close-btn {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    border: none;
    padding: 12px 40px;
    border-radius: 2px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
    transition: all 0.2s ease;
}

.news-modal-close-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
    background: linear-gradient(135deg, #ffed4a, #ffbb33);
}

#news-modal .news-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 15px !important;
    height: auto !important;
    padding-bottom: 50px !important;
    /* 하단 여백 */
}


/* 2. 주식 뽑기 모달 (Opening Modal) - 인라인 스타일 대체 */
#opening-modal .modal-content {
    background: #222 !important;
    border: 2px solid #ffd700 !important;
    text-align: center !important;
    max-width: 600px !important;
    width: 90% !important;
    padding: 30px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2) !important;
}

#opening-modal h2 {
    color: #ffd700 !important;
    font-size: 2.0rem !important;
    margin-bottom: 15px !important;
    white-space: nowrap !important;
}

#slot-machine-display {
    font-size: 3rem !important;
    font-weight: bold !important;
    color: #0ff !important;
    margin: 30px 0 !important;
    min-height: 60px !important;
    text-shadow: 0 0 10px #0ff !important;
}

#opening-status {
    color: #ccc !important;
    margin-bottom: 20px !important;
    font-size: 1.2rem !important;
}

#current-player-num {
    color: #ffd700 !important;
    font-weight: bold;
}

#total-player-num {
    font-weight: bold;
}

#slot-stop-btn {
    width: 60% !important;
    max-width: 250px !important;
    height: 50px !important;
    font-size: 1.2rem !important;
    margin: 0 auto !important;
    display: block !important;
}


/* 3. 방송 송출 모달 (Broadcast Modal) - 인라인 스타일 대체 */
#broadcast-modal .modal-content {
    background: #222 !important;
    max-width: 400px !important;
}

#broadcast-modal h2 {
    color: #ffd700 !important;
    margin-bottom: 10px !important;
    font-size: 1.5rem !important;
}

#broadcast-modal p {
    color: #ccc !important;
    font-size: 0.9rem !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

#broadcast-modal .login-box {
    background: #333 !important;
    padding: 15px !important;
    border-radius: 2px !important;
    margin: 10px 0 !important;
}

#broadcast-status {
    color: #4caf50 !important;
    font-weight: bold !important;
    margin-bottom: 8px !important;
}

#broadcast-link {
    width: 100% !important;
    padding: 10px !important;
    margin-top: 5px !important;
    border: 1px solid #555 !important;
    background: #222 !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    box-sizing: border-box !important;
}

.broadcast-controls {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.viewer-count-box {
    text-align: left !important;
    color: #888 !important;
    font-size: 0.85rem !important;
    margin-top: 10px !important;
}

/* 4. 모바일 최적화 (Mobile) */
@media (max-width: 768px) {

    /* 카드뉴스 2열 강제 */
    #news-modal .news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 주식 뽑기 모달 */
    #opening-modal .modal-content {
        padding: 15px !important;
        width: 95% !important;
    }

    #opening-modal h2 {
        font-size: 1.5rem !important;
        white-space: normal !important;
        /* 줄바꿈 허용 */
    }

    #slot-machine-display {
        font-size: 2.5rem !important;
        margin: 20px 0 !important;
    }

    #slot-stop-btn {
        width: 80% !important;
        height: 44px !important;
        font-size: 1rem !important;
    }

    /* 방송 송출 모달 */
    #broadcast-modal .modal-content {
        padding: 15px !important;
    }
}

/* =========================================
   [FINAL RECOVERY PATCH] 디자인 복구 및 레이아웃 수정
   ========================================= */

/* 1. [사진1 해결] 주식 뽑기 모달 디자인 복구 */
#opening-modal .modal-content {
    background: #222 !important;
    border: 2px solid #ffd700 !important;
    border-radius: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
}

#slot-machine-display {
    font-size: 2rem !important;
    color: #0ff !important;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7) !important;
    margin: 20px 0 !important;
    font-weight: bold !important;
}

/* 버튼 디자인 복구 */
#opening-modal button,
#slot-stop-btn {
    background: linear-gradient(135deg, #ffd700, #ffaa00) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3) !important;
}

/* 2. [사진2 해결] 송출(Broadcast) 모달 복구 */
#broadcast-modal .modal-content {
    background: #1a1a1a !important;
    border: 1px solid #444 !important;
    padding: 20px !important;
    max-width: 350px !important;
}

#broadcast-modal input {
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 5px !important;
    padding: 10px !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 송출 버튼 가로 배치 */
#broadcast-modal .button-row {
    display: flex !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

/* 3. [사진3 해결] 모바일 뷰어 차트 꽉 채우기 (Flex Fix) */
body.viewer-mode {
    height: 100vh !important;
    /* 화면 전체 높이 고정 */
    display: flex !important;
    flex-direction: column !important;
}

body.viewer-mode #app-root {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.viewer-mode .container {
    flex: 1 !important;
    /* 남은 공간 모두 차지 */
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
    /* 하단 여백 제거 */
    min-height: 0 !important;
    /* 자식 요소 스크롤 가능하게 */
}

body.viewer-mode .chart-box {
    flex: 1 !important;
    /* 컨테이너 안에서 꽉 차게 */
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

/* 4 & 5. [사진4,5 해결] 카드뉴스 디자인 복구 (Flashy Style) */
.news-modal-header h2 {
    font-size: 1.8rem !important;
    background: linear-gradient(to right, #ffd700, #ffeb3b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px !important;
    text-align: center;
}

.news-modal-footer {
    text-align: center;
    padding: 20px 0;
}

/* 카드 스타일 복구 */
.news-card {
    background: #1e1e1e !important;
    border-radius: 2px !important;
    padding: 15px !important;
    border: 1px solid #333 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* 상승(Rise) 카드 */
.card-footer.rise {
    background: linear-gradient(135deg, #ff4d4d, #ff0000) !important;
    color: white !important;
    border-radius: 2px;
    padding: 10px;
    margin-top: 10px;
}

/* 하락(Fall) 카드 */
.card-footer.fall {
    background: linear-gradient(135deg, #4da6ff, #0066ff) !important;
    color: white !important;
    border-radius: 2px;
    padding: 10px;
    margin-top: 10px;
}

/* 텍스트 스타일 */
.stock-name {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #fff !important;
}

.stock-price {
    color: #ffd700 !important;
    font-weight: bold !important;
}


/* =========================================
   [FINAL PATCH V2] 사용자 요청 정밀 수정
   ========================================= */

/* 1. 뉴스 카드 헤더 한 줄 배치 (Flex) */
.single-line-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 요소별 비중 및 스타일 */
.single-line-header .stock-icon {
    font-size: 1.5rem !important;
    margin-right: 5px !important;
}

.single-line-header .stock-name {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #fff !important;
    flex: 1 !important;
    /* 이름이 남은 공간 차지 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
}

.single-line-header .stock-price {
    font-size: 1rem !important;
    color: #ffd700 !important;
    white-space: nowrap !important;
}

.single-line-header .stock-diff {
    font-size: 0.9rem !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
}


/* 2. 뉴스 카드 푸터 한 줄 배치 & 높이 조정 */
.single-line-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px !important;
    height: auto !important;
    min-height: 40px !important;
    margin-top: auto !important;
    /* 카드 하단 고정 */
}

.footer-graph {
    font-size: 1.5rem !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.footer-percent {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1 !important;
}


/* 3. 모바일 최적화 (짤림/여백 해결) */
@media (max-width: 768px) {

    /* 카드뉴스: 모바일은 1열이 가장 안전하고 가독성 좋음 */
    #news-modal .news-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 5px !important;
        /* 좌우 여백 확보 */
    }

    .news-card {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 15px !important;
    }

    /* 방송 모달 여백 축소 */
    #broadcast-modal .modal-content {
        padding-bottom: 25px !important;
        width: 85% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}


/* 4. 흑우증권 타이틀 스타일 */
.opening-title-main {
    font-size: 2.8rem !important;
    background: linear-gradient(135deg, #ff0000, #ff4d4d);
    /* 강렬한 레드 계열 */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 10px 0 !important;
    text-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
    font-weight: 900 !important;
    letter-spacing: -1px;
}

.opening-title-sub {
    font-size: 1.3rem !important;
    color: #ffd700 !important;
    margin-top: 5px !important;
    font-weight: normal !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}


/* 5. 방송 모달 — 예전엔 닫기 버튼을 position:absolute로 띄워
   헤더 흐름에서 벗어나 제목과 축이 어긋나 보였다.
   지금은 .ns-modal-head 안에서 정렬되므로 오버라이드를 두지 않는다. */


/* =========================================
   [FINAL PATCH V3] 뉴스 카드 정밀 디자인 (사용자 요청 반영)
   ========================================= */

/* 1. 모바일 뉴스 카드: 1줄에 2개 + 짤림 방지 */
@media (max-width: 768px) {
    #news-modal .news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .news-card {
        width: 100% !important;
        margin-bottom: 0 !important;
        min-height: 200px !important;
        /* 최소 높이 확보 */
    }
}

/* 2. 종목명 스타일 강화 (노란색, 크게, 진하게) */
.single-line-header .stock-name {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #ffd700 !important;
    /* 노란색 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    flex: 2 !important;
    /* 공간 더 차지 */
}

/* 3. 가격 & 등락폭 통일성 (폰트 크기 동일화) */
.single-line-header .stock-price,
.single-line-header .stock-diff {
    font-size: 0.95rem !important;
    font-weight: normal !important;
    color: #fff !important;
    /* 기본 흰색, diff는 클래스별 색상 */
    display: flex !important;
    align-items: center !important;
}

/* 4. 등락폭 색상 강제 (오리지널 클래스 활용) */
.stock-diff.plus {
    color: #ff4444 !important;
}

/* 빨강 */
.stock-diff.minus {
    color: #4444ff !important;
}

/* 파랑 */

/* 5. 푸터 라인 정리 (폰트 통일 및 라인 정렬) */
.single-line-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 8px !important;
    height: 45px !important;
}

.footer-graph {
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
}

.footer-percent {
    font-size: 1.4rem !important;
    /* 그래프 아이콘과 크기 통일 */
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* 상승/하락 박스 배경색 및 텍스트 색상 확실하게 */
.card-footer.rise {
    background: linear-gradient(to bottom, #ff4d4d, #cc0000) !important;
    color: #fff !important;
}

.card-footer.fall {
    background: linear-gradient(to bottom, #4d94ff, #005ce6) !important;
    color: #fff !important;
}