@charset "utf-8";

/* ==========================================================================
   라이브맨 배당 분석 상세 페이지 스타일 (style3.css - 최종 통합본)
   ========================================================================== */

/* 1. 기본 설정 */
body {
    font-family: 'Pretendard', 'Malgun Gothic', Dotum, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    line-height: 1.5;
    text-align: center;
}

/* 2. 메인 컨테이너 */
.content {
    width: 100%;
    max-width: 800px; /* PC 화면에서도 너무 넓게 퍼지지 않도록 제한 */
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    min-height: 100vh;
}

/* 3. 상단 메뉴바 */
.top-bar {
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    padding: 8px 15px;
    text-align: right;
    font-size: 12px;
}

/* 4. 광고 영역 */
.ad-area {
    padding: 0px;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
.ad-area img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 5px;
}

/* 5. 경기 정보 헤더 */
.match-header {
    background: #34495e; 
    color: #fff;
    padding: 20px 0px;
    font-weight: bold;
    font-size: 18px;
}
#e_mn { font-size: 14px; color: #cbd5e0; font-weight: normal; }
.match-status { background-color: #eee; padding: 8px; border-bottom: 1px solid #ddd; font-size: 13px; color: #555; }

/* ======================================================== */
/* 6. 배당 테이블 (모바일 최적화 및 글자 겹침 해결) */
/* ======================================================== */

/* 테이블 컨테이너: 화면보다 크면 가로 스크롤 생성 */
#odds_tb {
    margin: 0px auto;
    width: 100%;
    max-width: 800px;
    overflow-x: auto; /* 핵심: 가로 스크롤 허용 */
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
}

/* 테이블 기본 설정 */
#odds_list_table {
    width: 100%;
    min-width: 600px; /* 핵심: 테이블 최소 너비 보장 (찌그러짐 방지) */
    table-layout: auto; /* 내용에 따라 너비 자동 조절 */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    border: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

/* 헤더(TH) 스타일 */
.table-header th {
    background-color: #34495e;
    color: #fff;
    padding: 10px 2px; /* 좌우 여백 축소 */
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid #555;
    border-right: 1px solid #555;
    height: 40px;
    white-space: nowrap; /* 헤더 글자 줄바꿈 방지 */
}

/* [구분선] 헤더 굵은 선 (회사, 원정승, 원정%) */
.table-header th:nth-child(2), 
.table-header th:nth-child(5), 
.table-header th:nth-child(8) {
    border-right: 2px solid #aaa !important;
}

/* -------------------------------------------------------- */
/* 데이터 셀(TD) 스타일 */
/* -------------------------------------------------------- */

/* 공통 셀 */
#odds_list_table td {
    text-align: center;
    vertical-align: middle;
    padding: 4px 2px !important; /* 좌우 여백 최소화 */
    height: 35px;
    line-height: 1.3;
    border-right: 1px solid #eee;
    white-space: nowrap; /* 숫자 줄바꿈 방지 (한 줄로 유지) */
}

/* 첫 번째 줄 (초기 배당) */
.row-first td {
    background-color: #fff;
    color: #666;
    font-size: 11px;
    border-top: 1px solid #ccc;
}

/* 두 번째 줄 (현재 배당) */
.row-second td {
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

/* -------------------------------------------------------- */
/* [중요] 특정 데이터 칼럼 스타일 조정 */
/* -------------------------------------------------------- */

/* 업체명 (왼쪽) */
.company-name {
    font-size: 12px;
    background-color: #f9f9f9 !important;
    white-space: normal !important; /* 업체명은 줄바꿈 허용 */
    line-height: 1.3;
    word-break: break-all;
}
.company-name a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

/* 확률(%) 및 수익률 숫자 (공간 부족 시 겹침 방지) */
.row-first td:nth-child(n+5), /* 배당 뒷부분 */
.row-second td:nth-child(n+4) {
    font-size: 11px;       /* 폰트 조금 작게 */
    letter-spacing: -0.5px; /* 자간 좁힘 */
    font-family: 'Arial', sans-serif;
}

/* 현재 배당 숫자 (홈/무/원) - 잘 보여야 함 */
.row-second td:nth-child(1),
.row-second td:nth-child(2),
.row-second td:nth-child(3) {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0;
}

/* -------------------------------------------------------- */
/* [구분선] 데이터 셀 굵은 선 적용 */
/* -------------------------------------------------------- */
.row-first td:nth-child(2) { border-right: 2px solid #aaa !important; }
.row-first td:nth-child(5), .row-second td:nth-child(3) { border-right: 2px solid #aaa !important; }
.row-first td:nth-child(8), .row-second td:nth-child(6) { border-right: 2px solid #aaa !important; }

/* ======================================================== */
/* 배당 변화 화살표 스타일 */
/* ======================================================== */
.odds-up-blue {
    background-color: #0066FF !important;
    color: #FFFFFF !important;
    font-weight: bold;
    background-image: url('/odds/img/arr_up.gif') !important;
    background-repeat: no-repeat;
    background-position: right 2px center !important;
}
.odds-down-red {
    background-color: #FFFF00 !important;
    color: #FF0000 !important;
    font-weight: bold;
    background-image: url('/odds/img/arr_down.gif') !important;
    background-repeat: no-repeat;
    background-position: right 2px center !important;
}
.normal { background-color: #ffffff; }

/* ======================================================== */
/* 통계 행 스타일 (최고/최저/평균) */
/* ======================================================== */
.stat-row td {
    height: 30px !important;
    font-size: 12px;
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
}
.stat-title { background-color: #f4f4f4; font-weight: bold; color: #333; }
.stat-max td { background-color: #fff0f0; color: #d90000; }
.stat-max .stat-title { background-color: #ffeaea; }
.stat-min td { background-color: #f0f8ff; color: #0066cc; }
.stat-min .stat-title { background-color: #e6f2ff; }
.stat-avg td { background-color: #f0fff0; color: #008000; font-weight: bold; }
.stat-avg .stat-title { background-color: #e8fce8; }

/* 7. 하단 컨트롤 패널 */
.btn-control {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    text-align: center;
    box-sizing: border-box;
}
.btn-control input[type=button] {
    padding: 6px 12px;
    cursor: pointer;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    margin: 2px;
}
.btn-control input[type=text] {
    text-align: center;
    border: 1px solid #ccc;
    padding: 4px;
    width: 40px;
}

/* 8. 푸터 */
.footer {
    padding: 30px;
    background: #333;
    color: #888;
    font-size: 13px;
    font-weight: bold;
    margin-top: 20px;
}
.footer a { color: #888 !important; text-decoration: none !important; transition: color 0.3s; }
.footer a:hover { color: #ffffff !important; }

/* ======================================================== */
/* 차트 및 분석 박스 스타일 (New) */
/* ======================================================== */
#charts_container {
    display: none;
    max-width: 800px;
    margin: 15px auto;
}
.chart-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.chart-header {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
    border-left: 4px solid #34495e;
    padding-left: 10px;
    background-color: #f9f9f9;
    padding: 8px;
}

/* 심층 분석 알림 박스 */
#deep_analysis_box {
    display: none; 
    width: 100%; 
    max-width: 800px; 
    margin: 15px auto;
    border: 2px solid #d90000; 
    background-color: #fff;
    border-radius: 8px; 
    padding: 15px; 
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
}
.deep-title {
    font-weight: bold; 
    color: #d90000; 
    font-size: 15px;
    border-bottom: 1px solid #ffcccc; 
    padding-bottom: 8px; 
    margin-bottom: 10px;
}
.deep-item {
    margin-bottom: 15px; 
    padding: 15px; 
    background: #fff0f0;
    border-left: 4px solid #d90000; 
    font-size: 13px; 
    color: #333;
    border-radius: 4px;
}
.mini-chart-box {
    background: #fff;
    border: 1px solid #ffcccc;
    border-radius: 4px;
    margin-top: 10px;
    height: 220px; 
    position: relative;
}