/*:root { --primary: #f7f7f7; --bg: #fff; --gray: #f4f4f4; --dark: #333; --light: #fafafa; }
    body { margin: 0; font-family: sans-serif; background: var(--gray); color: var(--dark); }
    .container { max-width: 480px; margin: auto; padding: 0 8px; }
    h1 { text-align: center; font-size: 1.2rem; padding: 10px 0; background: #2a6f2a; color: #fff; margin: 0 0 8px; }*/
#formation-calc .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#formation-calc .results { background: var(--bg); padding: 8px; border-radius: 6px; margin-bottom: 8px; display: flex; justify-content: space-between; font-size: 0.85rem; }
#formation-calc .results div { text-align: center; flex: 1; }
#formation-calc .results div span { display: block; font-size: 1rem; font-weight: bold; }
#formation-calc table { width: 100%; border-collapse: collapse; background: var(--bg); border-radius: 6px; overflow: hidden; font-size: 0.8rem; }
#formation-calc th, td { border: 1px solid #ddd; text-align: center; padding: 6px 4px; }
#formation-calc th { background: var(--light); }
#formation-calc th .rank-label { display: block; margin-bottom: 4px; font-weight: bold; font-size: 0.75rem; }
#formation-calc .horse-num, .frame-num { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: bold; }
#formation-calc .horse-num { border-radius: 50%; color: #000; border: 1px solid #000; }
#formation-calc .frame-num { border-radius: 4px; color: #000; border: 1px solid #000; }
#formation-calc .checkbox-cell input { width: 20px; height: 20px; }
#formation-calc #clearBtn, #clearBtnF { background: #999; color: #fff; border: none; padding: 4px 6px; border-radius: 4px; font-size: 0.7rem; white-space: nowrap; }
#formation-calc .toggle-btn { background: #2a6f2a; color: #fff; border: none; padding: 6px 8px; border-radius: 4px; font-size: 0.8rem; white-space: nowrap; }
    /*.article { margin-top: 24px; background: var(--bg); padding: 16px; border-radius: 6px; }
    .article h2 { color: #2a6f2a; margin-top: 16px; }
    .article ul { padding-left: 20px; line-height: 1.6; }*/



/* ===== click anywhere area ===== */
#formation-calc .checkbox-cell { cursor: pointer; }
#formation-calc .checkbox-cell input { pointer-events: none; }

/* ==== 選択馬番表示エリア ==== */
#formation-calc .selection-display { background:#e7f5e7; border:1px solid #2a6f2a; border-radius:6px; padding:8px; margin-bottom:8px; display:flex; justify-content:space-between; gap:4px; font-size:0.8rem; }
#formation-calc .sel-col { flex:1; display:flex; flex-direction:column; align-items:flex-start; }
#formation-calc .sel-title { font-weight:bold; color:#2a6f2a; margin-bottom:4px; font-size:0.85rem; }
#formation-calc .sel-grid { display:flex; flex-wrap:wrap; gap:2px; }
#formation-calc .sel-num { width:24px; height:24px; display:flex; align-items:center; justify-content:center; border:1px solid #000; border-radius:4px; font-size:0.75rem; font-weight:bold; }