/*
 * 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;}
/* (v3.0 3차-D — domado-ui.md §1·§8) 한 줄 고정: [단계 칩(남는 폭 전부 — 모자라면 가로로 밀기 · 끝 흐림)] [보기 설정 ▾] [정렬 ▾] [목록 | 칸]
   (도구 셋은 오른쪽에 모음 — 02 개체 목록·휴대폰 알 관리와 같은 차례) · 펼친 보기 설정(.eg-viewpanel)만 다음 줄 전체.
   단계 칩 줄은 flex-basis 0 이라 줄을 넘기는 일이 없음(도구 셋만 늘 한 줄에 들어가면 됨) · 좁으면 보기 바꾸기 글자 = 짧은 이름(목록 · 칸) */
.eg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s5);container:egtools / inline-size;}
/* (v3.0 3차-F2) 도구 줄이 JS 로 채워지기 전(첫 그림) — 지난번 높이만큼 비워 둠(js/m-shell-paint.js html.pm-egtools · js/incubator.js 가 적음) */
html.pm-egtools #chips:empty{min-height:var(--pm-egtools-h,0px);}
.eg-tools > .eg-stage{flex:1 1 0;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  padding:4px;margin:-4px;}   /* 칩 가장자리 그림자가 잘리지 않게 4px 여유 */
.eg-tools > .eg-stage::-webkit-scrollbar{display:none;}
.eg-tools > .eg-stage > .chip{flex:0 0 auto;}
.eg-stage > .chip .n{margin-left:2px;}
.eg-tools > .eg-vs,.eg-tools > .eg-sortbtn,.eg-tools > .eg-view{flex:0 0 auto;margin-left:0;}
.eg-tools > .eg-viewpanel{flex:1 1 100%;}
/* (v3.0 3차-E — 계약 §8 3번 · 사용자 2026-11-03 "안 잘리게") 단계 칩 넷(개수가 정해진 줄)은 잘리거나 흐림 끝에 걸리지 않게(태블릿 세로 800~820 등 —
   전엔 "골프공"이 [보기 설정] 밑으로 잘림) — js/incubator.js(공용 wireFitSteps)가 #chips[data-fit] 단계를 고름:
   1 = 칸 사이·칩 안쪽 여백 줄이기 · 2 = 칸 맞춘 배치(단계 칩 넷 한 줄 / [보기 설정] [정렬] [목록|칸] 한 줄).
   숫자는 빼지 않음(단계별 알 수는 다른 줄에 없음 — 개수 줄은 전체 알 수). 가로 밀기 + 끝 흐림은 그래도 넘칠 때만. */
.eg-tools:is([data-fit="1"],[data-fit="2"]){gap:var(--s2);}
.eg-tools:is([data-fit="1"],[data-fit="2"]) > .eg-stage{gap:6px;}
.eg-tools:is([data-fit="1"],[data-fit="2"]) > .eg-stage > .chip{padding:0 var(--s3);}
.eg-tools[data-fit="2"] > .eg-stage{flex:1 1 100%;}
@container egtools (max-width:860px){
  .eg-view .sl[data-short]{font-size:0;letter-spacing:0;}
  .eg-view .sl[data-short]::before{content:attr(data-short);font-size:var(--fs-chip);}
  .eg-view > button{padding:0 var(--s4);}
}
.eg-vs-n{font-size:var(--t-xs);font-weight:var(--w-bold);color:var(--hl);}
.eg-vs svg{transition:transform var(--dur-1) var(--ease);}
.eg-vs[aria-expanded="true"] svg{transform:rotate(180deg);}
.eg-viewpanel{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);}
/* (3차-D §8) 표의 예상 해칭 칸 = 한 줄("10월 15일 · 19일 지남" — 칸 머리가 이미 "예상 해칭"이라 앞말은 숨김 · 넘치면 말줄임).
   908~1068 에서 줄마다 1줄·2줄로 들쭉날쭉 + "·" 앞뒤로 쪼개지던 것. 글자(textContent)는 그대로 */
.eg-c-hatch .eg-hint{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eg-c-hatch .eg-hint:has(> .nw:nth-child(3)) > .nw:first-child{display:none;}
.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(--link);}
.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;}

/* (v3.0 알림 센터 — js/egg-hatch-filter.js) 걸린 조건 칩 줄 #eg-conds — "5일 뒤 해칭 예정 [✕ 풀기]"(개체 목록 .gl-conds 와 같은 모양) */
.eg-conds{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;min-width:0;max-width:100%;margin:calc(-1 * var(--s2)) 0 var(--s4);}
.eg-conds[hidden]{display:none;}
.eg-conds .tfc{height:auto;min-height:var(--ctl);padding:4px 4px 4px var(--s4);cursor:default;max-width:100%;min-width:0;}
.eg-conds .tfc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.eg-conds .tfc-x{height:var(--ctl-sm);padding:0 var(--s4);border:0;border-radius:var(--r-btn);flex:0 0 auto;
  background:var(--panel);color:var(--ink);font:var(--w-bold) var(--t-sm)/1 var(--font);cursor:pointer;}
.eg-conds .tfc-x::before{content:"✕ ";}
.eg-conds .tfc-x:hover{background:var(--accent);color:var(--accent-ink);}
.eg-conds .tfc-x:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}