* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: sans-serif; 
    padding: 20px; 
    max-width: 1200px; 
    margin: 0 auto; 
    color: #000; 
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1 { text-align: center; margin-bottom: 20px; font-size: 24px; }
.form-container { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; justify-content: center; }
.form-group { display: flex; align-items: center; gap: 5px; }
label { font-weight: bold; white-space: nowrap; }
input, select, button { padding: 8px; border: 1px solid #333; border-radius: 4px; background: #fff; color: #000; }
input[type="date"] { width: 18ch; }
select { width: 8ch; padding: 8px 4px; }
select#raceNumber { width: 6ch; }
select#recommendedBetsPageSize, select#minOdds, select#maxOdds, select#anchorHorse { width: 80px; }
select#anchorHorse { width: 200px; }
button { cursor: pointer; background: #fff; }
button:hover { background: #e8e8e8; }
.loader { display: none; margin: 20px auto; width: 40px; height: 40px; border: 4px solid #ccc; border-top: 4px solid #000; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
footer { text-align: center; margin-top: auto; padding-top: 30px; font-size: 12px; color: #666; }
.race-name { font-weight: bold; margin-bottom: 10px; font-size: 18px; }

.table-container { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
}

table { 
    width: 100%; 
    min-width: 600px;
    border-collapse: collapse;
    font-size: 14px;
}

th, td { 
    padding: 8px 6px; 
    text-align: center; 
    border-bottom: 1px solid #d0d0d0;
    word-wrap: break-word;
    vertical-align: middle;
}

tbody tr {
    transition: background-color 0.2s;
}

tbody tr:hover {
    background-color: #f0f0f0;
}

th { 
    font-weight: bold; 
    background: #f5f5f5; 
    border-bottom: 2px solid #d0d0d0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.race-name-cell { 
    text-align: left; 
    min-width: 120px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sortable-header { 
    cursor: pointer; 
    user-select: none; 
    position: relative; 
    transition: background-color 0.2s;
}

.sortable-header:hover { 
    background: #d8d8d8; 
}

.sort-arrow { 
    margin-left: 5px; 
    font-size: 12px; 
}

th:first-child, td:first-child { min-width: 60px; }
th:nth-child(2), td:nth-child(2) { min-width: 60px; }
th:nth-child(3), td:nth-child(3) { min-width: 120px; }
th:nth-child(4), td:nth-child(4) { min-width: 120px; }
th:last-child, td:last-child { min-width: 80px; }

.analysis-section { 
    border: 1px solid #d0d0d0; 
    border-radius: 5px; 
    padding: 15px; 
    margin: 20px 0; 
}

.betting-selection { 
    border: 1px solid #d0d0d0;
    border-radius: 5px; 
    padding: 15px; 
    margin: 20px 0; 
}

.prediction-level { 
    text-align: center; 
    padding: 10px; 
    border-radius: 4px; 
    margin: 10px 0; 
    font-weight: bold; 
}

.prediction-level.high { background: transparent; color: #000; }
.prediction-level.medium { background: transparent; color: #3a3a3a; }
.prediction-level.low { background: transparent; color: #6a6a6a; }

.analysis-metrics { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 15px; 
    margin: 15px 0; 
}

.metric-group { 
    background: #fff; 
    padding: 15px; 
    border: 1px solid #c0c0c0; 
    border-radius: 4px; 
}

.metric { 
    display: flex; 
    justify-content: space-between; 
    margin: 8px 0; 
    padding: 5px 0; 
    border-bottom: 1px solid #e8e8e8; 
    font-size: 14px;
}

.metric:last-child { 
    border-bottom: none; 
}

#horseTable .high-confidence,
#horseTable .medium-confidence,
#horseTable .low-confidence,
#recommendedBetsTable .high-confidence,
#recommendedBetsTable .medium-confidence,
#recommendedBetsTable .low-confidence { 
    background: transparent; 
    color: #000; 
}

.warning-message {
    background: #f0f0f0;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
    color: #333;
    font-weight: bold;
}

@media (max-width: 768px) {
    body { padding: 15px; }
    .form-container { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .form-group { flex-direction: row; width: auto; justify-content: flex-start; }
    select, button { width: auto; }
    select#anchorHorse { width: 150px; }
    table { font-size: 12px; min-width: 400px; }
    th, td { padding: 2px 1px; word-break: break-all; line-height: 1.3; }
    .race-name-cell { min-width: 70px; max-width: 90px; font-size: 12px; }
    .race-name { font-size: 16px; }
    .analysis-metrics { grid-template-columns: 1fr; gap: 10px; }
    .metric-group { padding: 10px; }
    .metric { font-size: 12px; }
    
    /* スマホ専用: 列幅を最小限に */
    th, td { font-size: 12px; }
    
    /* 出馬表テーブルの列幅調整 */
    #horseTable th:first-child, #horseTable td:first-child { min-width: 25px; padding: 2px 1px; }
    #horseTable th:nth-child(2), #horseTable td:nth-child(2) { min-width: 25px; padding: 2px 1px; }
    #horseTable th:nth-child(3), #horseTable td:nth-child(3) { min-width: 65px; padding: 2px 1px; }
    #horseTable th:nth-child(4), #horseTable td:nth-child(4) { min-width: 45px; padding: 2px 1px; }
    #horseTable th:nth-child(5), #horseTable td:nth-child(5) { min-width: 40px; padding: 2px 1px; }
    #horseTable th:nth-child(6), #horseTable td:nth-child(6) { min-width: 25px; padding: 2px 1px; }
    
    /* 推奨馬券テーブルの列幅調整 */
    #recommendedBetsTable { min-width: 320px; }
    #recommendedBetsTable th:first-child, #recommendedBetsTable td:first-child { min-width: 22px; padding: 2px 1px; font-size: 12px; }
    #recommendedBetsTable th:nth-child(2), #recommendedBetsTable td:nth-child(2) { min-width: 35px; padding: 2px 1px; font-size: 12px; }
    #recommendedBetsTable th:nth-child(3), #recommendedBetsTable td:nth-child(3) { min-width: 45px; padding: 2px 1px; font-size: 12px; }
    #recommendedBetsTable th:nth-child(4), #recommendedBetsTable td:nth-child(4) { min-width: 38px; padding: 2px 1px; font-size: 12px; }
    #recommendedBetsTable th:nth-child(5), #recommendedBetsTable td:nth-child(5) { min-width: 36px; padding: 2px 1px; font-size: 12px; }
    
    /* スマホ表示で単位「倍」を非表示 */
    .odds-unit { display: none; }
}
}
}
}
}