/*
 * 04 알 관리(데스크톱) — beta2. 06 산란 등록의 배경 목록도 이 파일. (2026-10-14 UI 정돈 B4a — team/contracts/ui-declutter.md §3)
 * 단계 = 세그먼트(.chip-seg — 하나만 고르기) · 무정란·중지한 알·페어별 묶기·정렬 = "보기 설정" 펼침(.surface-fill 안 체크 칩·선택칸).
 * 알 = 표 한 장(.tbl), 줄마다 2줄 · 행 전체 누름 · 끝 ›. 공통 부품(.btn·.chip·.chip-seg·.tbl·.st·.empty-state)은 css/ui.css — 배치만.
 * 하드코딩 색 없음(html.dark-ok). 부화 막대·안내는 css/egg-row.css.
 * (2026-10-15 egg-temp §7) 산란 묶음 머리 줄(tr.eg-cl — 표시만, 누르지 않음) · [목록으로 보기 | 칸으로 보기](.seg.eg-view) ·
 *   칸으로 보기(#egg-grid — 3~5열, 묶음 머리·페어 머리는 줄 전체). 카드 모양(.eg-tile)은 css/egg-row.css.
 */

/* ---- 도구 줄: 단계 세그먼트 · 보기 설정 ---- */
/* (2026-10-15 list-toolbar.md) ① 찾기 줄(공용 .lt-find · .f-search, 02 와 같은 폭 320) · ②·③ 한 줄: 단계 세그먼트 · [보기 설정 ▾] · [정렬 ▾] ······ [목록|칸] */
.eg-find{margin-bottom:var(--s3);}
.lt-find > .eg-search{flex:0 1 320px;width:320px;min-width:180px;padding-right:4px;}
.eg-search input::-webkit-search-cancel-button{display:none;}
.eg-sortbtn{flex:0 0 auto;}
.eg-tools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5);}
.eg-stage{flex:0 1 auto;}
.eg-stage > .chip .n{margin-left:2px;}
.eg-vs{flex:0 0 auto;}
.eg-view{flex:0 0 auto;margin-left:auto;}
.eg-vs-n{font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--accent);}
.eg-vs svg{transition:transform var(--dur-1) var(--ease);}
.eg-vs[aria-expanded="true"] svg{transform:rotate(180deg);}
.eg-viewpanel{flex:1 1 100%;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);}
.eg-viewpanel[hidden]{display:none;}
.eg-vp-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);}
.eg-vp-t{min-width:72px;font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink-2);}
.eg-sort{width:auto;min-width:240px;max-width:100%;}

/* ---- 알 표 ---- */
.eg-box{padding:var(--s2) var(--s4);position:relative;}   /* relative: 숨은 읽기 글자(.eg-sr)가 문서를 넓히지 않게 */
.eg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.eg-cards.is-empty thead{display:none;}
.eg-cards tbody tr[data-egg]{cursor:pointer;}
.eg-cards tbody tr[data-egg]:active td{background:var(--fill-2);}
.eg-cards tbody tr:last-child td{border-bottom:0;}
.eg-cards td{padding-top:var(--s2);padding-bottom:var(--s2);}
.eg-cards tr.muted{opacity:.6;}
.eg-cards tr.muted:hover{opacity:.8;}
.eg-c-days{width:1%;white-space:nowrap;}
.eg-c-days .elv{font-size:var(--t-2xl);line-height:1;letter-spacing:-.03em;}
.eg-c-days .elu{font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink-3);margin-left:3px;}
.eg-cards td.eg-c-pair{white-space:normal;min-width:180px;}
/* 알 번호(굵게) + 페어(작은 회색 한 줄 — 전체 이름은 위 산란 묶음 머리에) */
.eg-no{display:block;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.015em;line-height:1.3;white-space:nowrap;}
.eg-pair{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink-3);line-height:1.4;overflow-wrap:anywhere;}
.eg-due-n{display:none;}   /* 좁은 창(예상 해칭 칸을 접을 때)에만 페어 칸 아래 한 줄 */
.eg-cards td.eg-c-hatch{white-space:normal;min-width:180px;width:24%;}
.eg-c-hatch .eg-hatch{gap:6px;}
.eg-c-hatch .eg-hint{font-size:var(--t-sm);}
.eg-c-hatch .eg-bar{height:8px;}
.eg-c-stage{width:1%;}
.eg-cards td.eg-c-meta{width:1%;white-space:nowrap;}
.eg-laid{display:block;color:var(--ink-2);}
.eg-inc{display:block;font-size:var(--t-xs);color:var(--ink-3);}
.eg-go-h{width:1%;}
.eg-cards td.go{width:1%;padding:0 var(--s1) 0 0;text-align:right;}
.eg-cards td.go a{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl);height:var(--ctl);border-radius:var(--r-btn);color:var(--ink-3);text-decoration:none;}
.eg-cards tbody tr:hover td.go a{color:var(--accent);}
.eg-cards td.go a:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px;}

/* 산란 묶음 머리 줄 — "해피 × 루나 · 10월 3일 산란 · 알 2개 · 예상 해칭 12월 3일"(표시만) */
.eg-cards tr.eg-cl td{height:auto;padding:var(--s4) var(--s2) var(--s2);background:transparent;cursor:default;white-space:normal;border-bottom:1px solid var(--line);}
.eg-cards tbody tr.eg-cl:hover td{background:transparent;}
.eg-cards tbody tr.eg-cl:first-child td,.eg-cards tbody tr.grp + tr.eg-cl td{padding-top:var(--s2);}
.eg-cl-pair{font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink);overflow-wrap:anywhere;}
.eg-cl-dot{color:var(--ink-3);}
.eg-cl-meta{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-3);}
.eg-cl-meta .nw{white-space:nowrap;}

/* 페어별로 묶어 보기 — 묶음 제목 줄 */
.eg-cards tr.grp td{height:auto;padding:var(--s5) var(--s2) var(--s2);background:transparent;cursor:default;white-space:normal;border-bottom:1px solid var(--line-2);}
.eg-cards tr.grp:first-child td{padding-top:var(--s2);}
.eg-cards tbody tr.grp:hover td{background:transparent;}
.grp-name{font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.015em;margin-right:var(--s3);overflow-wrap:anywhere;}
.grp-count{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-3);white-space:nowrap;}

/* ---- 칸으로 보기 — 데스크톱 3~5열(칸 최소 200px, 최대 5열), 머리는 줄 전체 ---- */
.eg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(200px,calc((100% - 4 * var(--s4)) / 5)),1fr));gap:var(--s4);}
.eg-grid[hidden]{display:none;}
.eg-box[hidden]{display:none;}
.eg-grid > .eg-cl,.eg-grid > .grp{grid-column:1/-1;}
.eg-grid > .eg-cl{display:block;margin-top:var(--s3);padding:0 2px;line-height:1.45;}
.eg-grid > .eg-cl:first-child,.eg-grid > .grp + .eg-cl{margin-top:0;}
.eg-grid > .grp{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);padding:0 2px var(--s2);border-bottom:1px solid var(--line-2);}
.eg-grid > .grp:first-child{margin-top:0;}

/* 안내 줄(불러오는 중 · 빈 목록 · 오류) */
.eg-cards tr.eg-msg td{height:auto;padding:0;border-bottom:0;white-space:normal;}
.eg-cards tbody tr.eg-msg:hover td{background:transparent;}
.eg-cards .empty-state .es-ic{background:var(--accent-soft);color:var(--accent);}
.eg-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:900px){
  .eg-cards thead{display:none;}
  .eg-cards td.eg-c-meta{display:none;}
  .eg-cards td.eg-c-hatch{display:none;}
  .eg-due-n{display:block;}
  .eg-due-n .eg-hint{font-size:var(--t-sm);}
  .eg-sort{min-width:0;flex:1 1 200px;}
  .eg-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
}

/* (2026-10-15 incubator §6) [여러 개 고르기] · 고르는 중 바 자리 */

.eg-cards.selecting td.go a{visibility:hidden;}
.page.eg{padding-bottom:120px;}