/*
 * 메이팅 기록(데스크톱) — beta2(계약 team/contracts/beta2-ui.md §9, 소유 U4).
 * 카드 격자: 표 마크업(table.mt > tbody#mt-rows > tr[data-id] > td…)을 CSS 격자로 보여 준다(E2E 훅 유지).
 * 카드 = 날짜(+추정) · 결과 태그 / 수컷·암컷(글자 태그 + 이름) / 메모 / 알 묶음 수 · "눌러서 고치기·지우기 ›".
 * (2026-10-14 UI 정돈 B4a) 카드 전체 = 누르는 곳 → 카드 아래 메뉴(공통 .menu-pop: 수정 · 수컷/암컷 보기 · 삭제).
 *   결과 필터 = 공통 .chip-seg · "결과 뜻" 안내 줄 뺌.
 * 색 = 토큰만(html.dark-ok). 공통 부품(.page·.btn·.chip·.tag·.menu-pop·.empty-state·.loading)은 css/ui.css.
 */

/* (2026-10-15 list-toolbar.md §2) 목록 화면이라 "‹ 알 관리 / 메이팅" 위치 줄(.mt-crumb) 없앰 — 제목 자리는 다른 목록 화면과 같음 */

/* ---- 골라 보기(결과) ---- */
.mt-tools{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s6);}

/* ---- 카드 격자(표 → 카드) ---- */
.mt{display:block;width:100%;}
.mt > tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:var(--s5);}
.mt td{display:block;height:auto;padding:0;border:0;white-space:normal;background:transparent;color:inherit;}
.mt tbody tr:hover td{background:transparent;}
.mt tr[data-id]{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  grid-template-areas:"h res" "pair pair" "memo memo" "f f";
  /* 메모가 없는 카드도 빈 줄 없이 — 줄 간격은 칸마다 위 여백으로, 아래 줄(알 묶음 · 눌러서…)은 카드 바닥에 */
  grid-template-rows:auto auto auto 1fr;gap:0 var(--s3);padding:var(--s5) var(--s5) var(--s4);background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);
  cursor:pointer;transition:box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);}
.mt tr[data-id]:hover{box-shadow:var(--sh-2);}
.mt tr[data-id]:active{background:var(--fill);}
.mt tr[data-id]:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
.mt tr[data-id].open{box-shadow:0 0 0 2px var(--sel-line),var(--sh-2);}
.mt tr[data-id].static{cursor:default;}
.mt tr[data-id].static:hover{box-shadow:var(--sh-1);}
.mt tr[data-id].static:active{background:var(--panel);}
.mt-c-h{grid-area:h;display:flex!important;align-items:center;gap:var(--s2);min-width:0;}
.mt-date{font-size:var(--t-xl);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.01em;white-space:nowrap;}
.est{height:28px;padding:0 10px;border-radius:var(--r-full);background:var(--warn-soft);color:var(--warn);
  font-size:var(--t-xs);font-weight:var(--w-bold);display:inline-flex;align-items:center;flex:0 0 auto;}
.mt-c-res{grid-area:res;}
/* 결과 태그 — 성공 초록 · 실패(삑) 빨강 · 미확인 회색(모양·색은 ui.css .st) */
.mt .st{height:34px;padding:0 var(--s4);font-size:var(--t-md);}

/* 수컷 · 암컷 — 글자만(누르는 곳은 카드 전체) */
.mt-c-pair{grid-area:pair;margin-top:var(--s3);display:flex!important;flex-direction:column;gap:var(--s2);padding:var(--s3) 0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;}
.mt-p{display:flex;align-items:center;flex-wrap:wrap;gap:2px var(--s3);min-height:40px;min-width:0;}
.mt-p .sx{flex:0 0 auto;min-width:76px;justify-content:center;}
.mt-p .gk-nm{font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);min-width:0;max-width:calc(100% - 76px - var(--s3));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mt-p .sr{flex:0 0 auto;font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap;}
.mt-p.gone .gk-nm{color:var(--ink-3);font-weight:var(--w-med);}
.mt-c-memo{grid-area:memo;margin-top:var(--s3);}
.mt-c-memo:empty{display:none!important;}
.memo{display:block;padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--fill);font-size:var(--t-md);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 아래 줄 — 알 묶음 수 · "눌러서 고치기·지우기 ›" */
.mt-c-f{grid-area:f;align-self:end;margin-top:var(--s3);display:flex!important;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s3);min-width:0;}
.mt-c-cc{font-size:var(--t-md);color:var(--ink-2);white-space:nowrap;}
.cc{font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);margin:0 2px;}
.cc.zero{color:var(--ink-3);font-weight:var(--w-semi);}
.mt-go{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--link);white-space:nowrap;}
/* 카드 메뉴 — 공통 .menu-pop(항목 48px). 카드 오른쪽 아래에 붙는다. */
.mt-menu{top:calc(100% - var(--s2));right:var(--s3);min-width:280px;}
.mt-menu .mi .gk-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--w-bold);}
.mt-menu[hidden]{display:none;}

/* 안내 줄(불러오는 중 · 빈 목록 · 오류) */
.mt tr:has(> .mt-empty){grid-column:1/-1;display:block;background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);}
.mt-err{padding:var(--s8) var(--s6);text-align:center;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--dang);}

/* 좁은 창 */
@media (max-width:430px){
  .mt tr[data-id]{padding:var(--s4) var(--s3) var(--s3);}
  .mt-p .sx{min-width:0;}
  .mt-p .gk-nm{max-width:100%;}
  .mt-menu{left:var(--s2);right:var(--s2);min-width:0;max-width:none;}
}