/* ==================================================================
   모바일 전용 패치층 (MOBILE FIX V1~V5)
   구 style.css 3649~4371줄
   ⚠️ 파일명 번호 = 로드 순서. 뒤 파일이 앞을 덮어쓰므로 순서를 바꾸면 화면이 깨진다.
   ================================================================== */
/* =========================================
   [MOBILE ONLY] 모바일 전용 CSS (사용자 요청)
   ========================================= */

@media (max-width: 768px) {

    /* ===== 1. 카드뉴스 모바일 최적화 ===== */

    /* 모달 자체 여백 최소화 */
    #news-modal {
        padding: 10px !important;
    }

    .news-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* 그리드: 2열 배치, 짤림 방지 */
    #news-modal .news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 개별 카드 크기 조정 */
    .news-card {
        width: 100% !important;
        padding: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-size: 0.85rem !important;
    }

    /* 카드 헤더 (종목명 보이도록 최적화) */
    .single-line-header {
        display: flex !important;
        flex-direction: column !important;
        /* 세로 배치로 변경 */
        align-items: flex-start !important;
        gap: 4px !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }

    /* 첫 번째 줄: 아이콘 + 종목명 */
    .single-line-header .stock-icon,
    .single-line-header .stock-name {
        display: inline-block !important;
        margin-right: 5px !important;
    }

    .single-line-header .stock-icon {
        font-size: 1.2rem !important;
    }

    .single-line-header .stock-name {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #ffd700 !important;
        flex: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* 두 번째 줄: 가격 + 등락 */
    .single-line-header .stock-price,
    .single-line-header .stock-diff {
        font-size: 0.85rem !important;
        display: inline !important;
        margin-right: 8px !important;
    }

    /* 카드 본문 */
    .card-body {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        padding: 5px 0 !important;
    }

    /* 푸터 (상승/하락) */
    .single-line-footer {
        height: 35px !important;
        padding: 6px !important;
        gap: 6px !important;
    }

    .footer-graph {
        font-size: 1.2rem !important;
    }

    .footer-percent {
        font-size: 1.2rem !important;
    }

    /* 뉴스 모달 헤더 */
    .news-modal-header h2 {
        font-size: 1.3rem !important;
    }

    /* 뉴스 모달 푸터 버튼 */
    .news-modal-footer {
        padding: 10px 0 !important;
    }

    .news-modal-close-btn {
        padding: 10px 30px !important;
        font-size: 1rem !important;
    }


    /* ===== 2. 주식 뽑기 모달 모바일 최적화 ===== */
    #opening-modal .modal-content {
        width: 95% !important;
        padding: 20px !important;
    }

    #slot-machine-display {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin: 15px 0 !important;
        min-height: auto !important;
    }

    .opening-title-main {
        font-size: 2rem !important;
    }

    .opening-title-sub {
        font-size: 1rem !important;
    }


    /* ===== 3. 송출 모달 여백 제거 (모바일 + PC 공통) ===== */
    #broadcast-modal .modal-content {
        padding: 20px 20px 10px 20px !important;
        /* 하단 여백 대폭 축소 */
    }

    .viewer-count-box {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ===== PC/모바일 공통: 송출 모달 하단 여백 제거 ===== */
#broadcast-modal .modal-content {
    padding-bottom: 15px !important;
}


/* =========================================
   [MOBILE FIX V2] 모바일 카드뉴스 완전 재설계
   ========================================= */

@media (max-width: 768px) {

    /* ===== 뉴스 모달 크기 축소 ===== */
    #news-modal {
        padding: 5px !important;
    }

    .news-modal-content {
        width: 98% !important;
        max-width: 98% !important;
        padding: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 그리드: 항상 2열, 매우 작은 화면에도 유지 */
    #news-modal .news-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 카드 크기 최적화 */
    .news-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 6px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 헤더: 아이콘 + 종목명을 한 줄에, 가격/등락은 그 아래 */
    .single-line-header {
        display: block !important;
        padding: 5px 0 !important;
        margin-bottom: 6px !important;
    }

    /* 아이콘 + 종목명 라인 */
    .single-line-header .stock-icon {
        display: inline-block !important;
        font-size: 1rem !important;
        margin-right: 3px !important;
        vertical-align: middle !important;
    }

    .single-line-header .stock-name {
        display: inline-block !important;
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        color: #ffd700 !important;
        margin: 0 !important;
        vertical-align: middle !important;
        max-width: calc(100% - 1.5rem) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* 가격/등락 라인 (두 번째 줄) */
    .single-line-header .stock-price,
    .single-line-header .stock-diff {
        display: inline-block !important;
        font-size: 0.75rem !important;
        margin-right: 5px !important;
        margin-top: 3px !important;
    }

    /* 본문 */
    .card-body {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        padding: 4px 0 !important;
        word-break: keep-all !important;
    }

    /* 푸터 */
    .single-line-footer {
        height: 32px !important;
        padding: 5px !important;
        gap: 5px !important;
        margin-top: 5px !important;
    }

    .footer-graph {
        font-size: 1.1rem !important;
    }

    .footer-percent {
        font-size: 1.1rem !important;
    }

    /* 모달 헤더 */
    .news-modal-header h2 {
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
    }

    /* 모달 푸터 버튼 */
    .news-modal-footer {
        padding: 8px 0 5px 0 !important;
    }

    .news-modal-close-btn {
        padding: 8px 25px !important;
        font-size: 0.95rem !important;
    }
}

/* 매우 작은 화면 (360px 이하) - 추가 최적화 */
@media (max-width: 400px) {
    .single-line-header .stock-name {
        font-size: 0.85rem !important;
    }

    .single-line-header .stock-price,
    .single-line-header .stock-diff {
        font-size: 0.7rem !important;
    }

    .card-body {
        font-size: 0.65rem !important;
    }

    .footer-graph,
    .footer-percent {
        font-size: 1rem !important;
    }
}

/* ===== 송출 모달 크기 축소 (PC/모바일 공통) ===== */
#broadcast-modal .modal-content {
    padding: 15px 15px 8px 15px !important;
    max-width: 350px !important;
}

#broadcast-modal h2 {
    margin-bottom: 8px !important;
}

#broadcast-modal p {
    margin-bottom: 8px !important;
}

#broadcast-modal .login-box {
    margin: 8px 0 !important;
    padding: 12px !important;
}

.viewer-count-box {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    #broadcast-modal .modal-content {
        padding: 12px 12px 5px 12px !important;
        width: 90% !important;
        max-width: 90% !important;
    }
}


/* =========================================
   [MOBILE FIX V3] 아이콘 제거 및 송출 모달 여백 완전 제거
   ========================================= */

@media (max-width: 768px) {

    /* 모바일에서 카드뉴스 아이콘 숨기기 */
    .single-line-header .stock-icon {
        display: none !important;
    }

    /* 종목명을 첫 줄로, 최대 공간 활용 */
    .single-line-header .stock-name {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 3px !important;
    }

    /* 가격 + 등락을 같은 줄에 배치 */
    .single-line-header .stock-price {
        display: inline-block !important;
        margin-right: 8px !important;
    }

    .single-line-header .stock-diff {
        display: inline-block !important;
    }
}

/* 송출 모달 여백 강제 제거 (최종) */
#broadcast-modal .modal-content {
    padding: 12px 15px 5px 15px !important;
    margin: 0 !important;
}

#broadcast-modal .login-box {
    margin: 5px 0 !important;
    padding: 10px !important;
}

.viewer-count-box {
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
}

/* 모바일에서도 동일 */
@media (max-width: 768px) {
    #broadcast-modal .modal-content {
        padding: 10px 12px 3px 12px !important;
    }
}


/* =========================================
   [MOBILE FIX V4] 한 줄 배치 강제 및 송출 모달 최종 수정
   ========================================= */

@media (max-width: 768px) {

    /* 모바일 카드뉴스: 종목명/가격/등락을 한 줄로 */
    .single-line-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        padding: 4px 0 !important;
        margin-bottom: 5px !important;
    }

    /* 종목명 */
    .single-line-header .stock-name {
        flex: 0 1 auto !important;
        font-size: 0.85rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 45% !important;
    }

    /* 가격 */
    .single-line-header .stock-price {
        flex: 0 0 auto !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* 등락 */
    .single-line-header .stock-diff {
        flex: 0 0 auto !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

/* 송출 모달 강제 축소 (전체) */
#broadcast-modal .modal-content {
    min-height: auto !important;
    height: auto !important;
    padding: 10px 15px 8px 15px !important;
}

#broadcast-modal h2 {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

#broadcast-modal p {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

#broadcast-modal .login-box {
    margin: 8px 0 5px 0 !important;
    padding: 10px !important;
}

#broadcast-modal .viewer-count-box {
    margin: 5px 0 0 0 !important;
    padding: 0 0 3px 0 !important;
}


/* =========================================
   [LAYOUT FIX V5] 차트 짤림 현상 & 레이아웃 재구성 (Flexbox)
   ========================================= */

/* 1. 기본 레이아웃 (PC/Mobile 공통: Viewer Mode) */
body.viewer-mode {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

/* 헤더 고정 (크기 유지) */
body.viewer-mode header {
    flex: 0 0 auto !important;
}

/* 컨테이너: 남은 공간 모두 차지 + 스크롤 방지 */
body.viewer-mode .container {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    min-height: 0 !important;
    /* Flex item shrink fix */
}

/* 상단 상태보드 (크기 유지) */
body.viewer-mode .status-board {
    flex: 0 0 auto !important;
}

/* 차트 박스: 남은 공간 모두 차지 (핵심) */
body.viewer-mode .chart-box {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 캔버스 */
body.viewer-mode canvas#stockChart {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* 푸터 고정 (가장 하단) */
body.viewer-mode .floating-footer {
    flex: 0 0 auto !important;
    position: relative !important;
    /* fixed 제거하고 flex flow에 참여 */
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: 100 !important;
    background: #000 !important;
    /* 배경색 확보 */
}


/* 2. 모바일 (운영 모드 & Viewer 공통) */
@media (max-width: 768px) {

    /* 운영 모드도 Flexbox 적용 */
    body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    #app-root,
    .wrapper-div-if-exists {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* 컨테이너 flex 전환 */
    .container {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        /* 하단 패딩 제거 */
        overflow: hidden !important;
    }

    .status-board {
        flex-shrink: 0 !important;
    }

    /* 차트 영역 확보 */
    .chart-box {
        flex: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    #myChart,
    #stockChart {
        height: 100% !important;
    }

    /* 푸터 및 컨트롤 패널 */
    footer,
    .controls,
    .floating-footer {
        flex-shrink: 0 !important;
        position: relative !important;
        bottom: auto !important;
        padding-bottom: env(safe-area-inset-bottom, 10px) !important;
        /* 아이폰 하단 바 대응 */
    }
}


/* =========================================
   [모바일 차트 짤림 최종 긴급 패치]
   ========================================= */

@media (max-width: 768px) {
    /* 강제로 푸터를 화면 하단에 고정하고 차트 영역 높이를 계산 */

    body {
        height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #app-root {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .container {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        height: auto !important;
    }

    .chart-box {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        /* 중요: flex 자식의 최소 높이 리셋 */
        display: flex !important;
        flex-direction: column !important;
    }

    canvas#myChart,
    canvas#stockChart {
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 하단 푸터 영역 고정 */
    footer,
    .controls,
    .floating-footer {
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 9999 !important;
        padding-bottom: env(safe-area-inset-bottom, 5px) !important;
        background: #111 !important;
    }

    /* 뉴스 티커 등 기타 요소가 차트를 가리지 않게 */
    .news-ticker-container {
        margin-top: 0 !important;
    }
}


/* =========================================
   [MOBILE UI UX FIX] 운영모드 카드뉴스 가림 해결
   ========================================= */

@media (max-width: 768px) {

    /* 모바일 운영모드에서 뉴스 모달 중앙 정렬 복구 (기존 상단 정렬 제거) */
    #news-modal {
        align-items: center !important;
        /* 중앙 정렬 */
        padding-top: 0 !important;
        z-index: 10000 !important;
    }

    /* 모달 컨텐츠 중앙 배치 및 적절한 여백 */
    .news-modal-content {
        margin: auto !important;
        margin-bottom: auto !important;
        max-height: 85vh !important;
    }

    /* 하단 푸터(컨트롤바) : z-index 낮춤 (모달보다 아래로) */
    .floating-footer {
        z-index: 900 !important;
        /* 모달(10000)보다 낮게 */
    }

    /* 하단 푸터 내부: 년차 표시(회색바) 숨김 */
    #round-display-group {
        display: none !important;
    }

    /* 하단 푸터 내부: 버튼 그룹 3x2 그리드 배치 */
    .controls {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* 3열 */
        gap: 5px !important;
        padding: 5px !important;
        height: auto !important;
        flex-wrap: wrap !important;
    }

    /* 기존 flex 구조 무력화 및 그리드 아이템화 */
    .controls .button-group {
        display: contents !important;
        /* 자식 요소들이 직접 그리드 셀이 됨 */
    }

    /* 버튼 크기 꽉 채우기 */
    .controls button {
        width: 100% !important;
        margin: 0 !important;
        height: 45px !important;
        /* 터치하기 좋은 높이 */
        font-size: 0.9rem !important;
    }
}

/* Viewer/TV Mode Safe Area Fix */
.tv-mode .floating-footer,
.viewer-mode .floating-footer {
    padding-bottom: env(safe-area-inset-bottom);
}