/* AI 딱걸린 예상지 — 출전 정보 표 · 조회 결과 줄(카드|출전 정보|AI 박스) 공통 스타일.
   화면(user-ddak-list.php)과 PDF(user-ddak-pdf.php)가 함께 쓴다. 휴대폰용 규칙은 화면 쪽에 있다. */
.ddak-scroll { overflow-x:auto; overflow-y:hidden; }
/* sticky 칸의 테두리가 스크롤과 함께 밀려 나가지 않도록 collapse 대신 separate 로 그린다 */
.ddak-view { border-collapse:separate; border-spacing:0; font-size:12px; background:#fff;
             border-top:1px solid #b9b9b9; border-left:1px solid #b9b9b9; }
.ddak-view th, .ddak-view td { border-right:1px solid #b9b9b9; border-bottom:1px solid #b9b9b9;
                               padding:4px 6px; text-align:center; white-space:nowrap; }
/* 출전 정보 칸은 왼쪽에 고정하고 AI 딱걸린 예상만 가로로 스크롤한다(left 는 스크립트가 채움) */
.ddak-view.is-fixed .fix { position:sticky; z-index:1; }
.ddak-view.is-fixed thead .fix { z-index:3; }
.ddak-view.is-fixed tbody td.fix { background:#fff; }
.ddak-view.is-fixed tbody tr:nth-child(even) td.fix { background:#fafafa; }
.ddak-view td.col-narrow { overflow:hidden; text-overflow:ellipsis; cursor:default; }
/* 출전 정보 칸은 좌우 여백을 줄여 예상 칸이 보일 자리를 넓힌다 */
.ddak-view .fix { padding-left:3px; padding-right:3px; font-size:10px; }
.ddak-view.is-fixed .fix-last { box-shadow:3px 0 4px -2px rgba(0,0,0,.25); }
.ddak-view thead th { background:#495057; color:#fff; font-weight:600; }
.ddak-view thead th.grp-api  { background:#6c757d; }
.ddak-view thead th.grp-pred { background:#0069d9; }
.ddak-view thead th.grp-sub  { border-bottom:1px solid #8a9199; }
.ddak-view thead th.sub      { font-weight:400; }
.ddak-view td.col-name { text-align:left; font-weight:600; }
.ddak-view td.col-pred { background:#f3f8ff; font-weight:600; }
/* 특이사항은 메모라 길어질 수 있다. 줄바꿈을 허용하고 왼쪽으로 붙인다 */
.ddak-view td.col-remark { text-align:left; white-space:normal; min-width:180px; max-width:280px; font-weight:400; }
.ddak-view thead th.col-remark { min-width:180px; }
.ddak-view tbody tr:nth-child(even) { background:#fafafa; }
.ddak-view td.m-sec { display:none; }
/* 조회 결과 한 줄: 경주 정보 카드 | 출전 정보 | AI 딱걸린 예상. 좁으면 아래로 내려간다 */
/* 세 덩어리의 높이를 가장 긴 것(보통 출전 정보)에 맞춘다. 남는 높이는 각 표의 줄이 나눠 갖는다 */
.ddak-board { display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin-top:6px; }
.ddak-board > .rc-head { flex:0 0 auto; width:440px; display:flex; flex-direction:column; }
.ddak-board > .rc-head > table { flex:1 1 auto; }
.ddak-board > .ddak-scroll { flex:1 1 480px; min-width:0; }
.ddak-board > .ddak-scroll > .ddak-view { height:100%; }
/* AI 딱걸린 예상: 바깥 테두리만 경주 정보 카드(.rc-head)와 같게 */
.ddak-board > .ddak-ai-box { flex:0 0 300px; display:flex; flex-direction:column; background:#fff; border:2px solid #212529; padding:4px; }
.ddak-ai-box > .ddak-ai { flex:1 1 auto; width:100%; height:100%; }
.ddak-board > .alert { flex:1 1 400px; margin:0; }
/* 출전 정보 표는 카드와 박스 사이 남은 폭을 꽉 채우고, 글자를 키워 카드 높이에 맞춘다 */
.ddak-board .ddak-view { width:100%; font-size:14px; }
.ddak-board .ddak-view .fix { font-size:13px; padding-left:4px; padding-right:4px; }
.ddak-board .ddak-view tbody td { padding-top:6px; padding-bottom:6px; }
.ddak-board .ddak-view td.col-pred { font-size:15px; font-weight:700; }
/* AI 딱걸린 예상 박스 */
.ddak-ai { border-collapse:separate; border-spacing:0 3px; margin:-3px 0; }
.ddak-ai th, .ddak-ai td { padding:6px 12px; color:#fff; font-size:17px; font-weight:700; line-height:1.3; white-space:nowrap; }
.ddak-ai thead th { background:#0b6fd6; text-align:center; font-size:18px; padding:4px 12px; }
.ddak-ai th.lbl { text-align:center; border-right:3px solid #fff; }
.ddak-ai td.val { text-align:left; letter-spacing:.5px; white-space:normal; word-break:break-all; }
/* 들여쓴 줄 왼쪽의 묶음 이름(승군착순·질주습성). 배경이 흰색이라 글자는 검정 */
.ddak-ai th.grp { background:transparent; color:#212529; width:30%; font-size:15px; text-align:center; vertical-align:middle; }
.ddak-ai td.val.empty { color:rgba(255,255,255,.6); }
.ddak-ai .c-red   { background:#ff0d0d; }
.ddak-ai .c-green { background:#25a944; }
.ddak-ai .c-pink  { background:#d667cf; }
.ddak-ai .c-blue  { background:#4a8fdc; }