/*
 * 알(egg) 공용 표시 — 데스크톱(beta2). 04 알 표 · 05 상세 · 06 배경 목록 · matings.
 * 색 = A 토큰만(하드코딩 없음 → 다크 지원), 글자 14px 이상.
 * (2026-10-14 UI 정돈 B4a) 예전 맨 이름 표 규칙(table/th/td 전체)은 뺐다 — 표는 공통 .tbl(css/ui.css)을 쓴다.
 *  - 부화 진행 .eg-hatch/.eg-bar · 단계 순서 .eg-track — js/egg-ui.js 가 렌더.
 * (2026-10-15 egg-temp) 예상 해칭일 기준: 막대의 옅은 초록 구간 = 예상일 7일 전부터(--z, js 가 알마다) · 05 근거 한 줄(.eg-basis) ·
 *   "칸으로 보기" 카드(.eg-tile) — js/egg-ui.js(hatchDetailHtml · eggTileHtml).
 */

/* ---- 경과일(큰 숫자) — 숫자는 Pretendard tabular-nums(mono 아님) ---- */
.elv{font-family:var(--font);font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);letter-spacing:-.02em;white-space:nowrap;}
.elu{font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink-3);margin-left:3px;}
.elv.eg-nodays{color:var(--ink-3);font-weight:var(--w-bold);}   /* 끝난 알(끝난 날 모름) — 늘어나는 일수 대신 "–" (2026-10-15) */

/* 단계 태그 .st[data-stage] 는 공통 css/ui.css */

/* ---- 부화 진행(안내 문구 + 막대). 막대의 옅은 초록 구간(--z 부터) = 예상일 7일 전부터 "부화 시기" ---- */
.eg-hatch{display:flex;flex-direction:column;gap:8px;min-width:0;}
.eg-hint{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);line-height:1.35;}
.eg-hint .nw,.eg-cl-meta .nw{white-space:nowrap;}
.eg-hint[data-tone="soon"]{color:var(--ok);}
.eg-hint[data-tone="over"]{color:var(--warn);}
.eg-hint[data-tone="ok"]{color:var(--ok);}
.eg-hint[data-tone="muted"]{color:var(--ink-3);font-weight:var(--w-med);}
.eg-bar{position:relative;display:block;height:10px;border-radius:var(--r-full);background:var(--fill-2);overflow:hidden;}
.eg-bar::before{content:"";position:absolute;top:0;bottom:0;left:var(--z,90%);right:0;background:var(--ok-soft);}
.eg-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:inherit;background:var(--accent);}
.eg-bar[data-tone="soon"] i{background:var(--ok);}
.eg-bar[data-tone="over"] i{background:var(--warn);}

/* ---- 단계 순서(05) — 도자기 › 눈꽃 › 골프공, 지금 단계 = 굵은 글자 + 옅은 accent 바탕(표시 전용 — 버튼처럼 보이는 검정 채움 없앰) ---- */
.eg-track{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none;flex-wrap:wrap;}
.eg-track li{display:inline-flex;align-items:center;height:32px;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-3);white-space:nowrap;}
.eg-track li.eg-sep{width:20px;height:2px;border-radius:2px;background:var(--line-3);}
.eg-track li.done{color:var(--ink-2);}
.eg-track li.on{padding:0 var(--s3);border-radius:var(--r-tag);background:var(--accent-soft);color:var(--accent);font-weight:var(--w-black);}

/* ---- 05 부화 묶음 — 단계 안내 · 근거 한 줄(회색) + 온도 고치기 / 해칭일 + 고치기 ---- */
.eg-advice{font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink-2);line-height:1.4;}
.eg-advice[data-tone="soon"]{color:var(--ok);}
.eg-advice[data-tone="over"]{color:var(--warn);}
.eg-hd-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);min-width:0;}
.eg-hd-row > .eg-hint,.eg-hd-row > .eg-basis{flex:1 1 240px;min-width:0;}
.eg-hd-row > .btn{flex:0 0 auto;}
.eg-basis{margin:0;font-size:var(--t-sm);color:var(--ink-3);line-height:1.5;}
.eg-basis .eg-opt[hidden]{display:none;}

/* ---- "칸으로 보기" 카드(04) — 카드 전체가 링크, 알 번호 · 단계 · 페어 · 예상 해칭 · 막대 ---- */
.eg-tile{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:var(--s4);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--sh-1);color:inherit;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);}
.eg-tile:hover{box-shadow:var(--sh-2,var(--sh-1));background:var(--fill);color:inherit;}
.eg-tile:active{background:var(--fill-2);}
.eg-tile:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
.eg-tile.muted{opacity:.6;}
.egt-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px var(--s2);min-width:0;}
.egt-no{font-size:var(--t-lg);font-weight:var(--w-black);color:var(--ink);letter-spacing:-.015em;white-space:nowrap;}
.egt-h .st{flex:0 0 auto;}
.egt-pair{font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink-2);line-height:1.35;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.eg-tile .eg-hint{font-size:var(--t-sm);}
.eg-tile .eg-bar{height:8px;margin-top:2px;}
.egt-due{display:flex;flex-direction:column;gap:0;}
.egt-due .egt-d{display:block;}
.egt-due .egt-left{display:block;font-weight:var(--w-bold);}

/* (2026-10-15 incubator §6) 칸 카드 인큐베이터 한 줄 · 여러 개 고르기(고른 것 = accent 테두리 + 체크) */
.egt-inc{font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.eg-ck{display:none;}
.selecting .eg-ck{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;flex:0 0 auto;vertical-align:-6px;border-radius:7px;
  border:2px solid var(--line-3);background:var(--panel);color:var(--panel);font-size:16px;font-weight:var(--w-black);line-height:1;}
.selecting .sel .eg-ck{border-color:var(--accent);background:var(--accent);}
.selecting .sel .eg-ck::before{content:"✓";}
.selecting .eg-tile.sel{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft);}
.selecting tr.sel td{background:var(--accent-soft);}