/*
 * 06 산란 등록 창(데스크톱) — beta2(계약 team/contracts/beta2-ui.md §9, 소유 U4).
 * 배경 목록 = 04 와 같은 마크업·CSS(css/04-incubator.css 를 같이 링크, 렌더 js/incubator.js).
 * (2026-10-15 incubator §4) 창 본문 = 항목 목록(#egg-reg, js/egg-register.js) — 아래 옛 단계형 규칙 중 .en-* · .fseg · .step · .pick 은 쓰지 않음.
 * (옛) 창 = 두 칸 단계형: 왼쪽 ① 알 종류 ② 부·모, 오른쪽 ③ 날짜·개수·상태 ④ 부화기(인큐 온도 · 이름) → 아래 "등록하기"(56).
 * 1440×900 에서 스크롤 없이 한눈에(창 높이 ≤ 700). 입력 48 · 라벨 16 · 글자 14 이상 · 색 토큰만(html.dark-ok).
 * (2026-10-15 egg-temp) ④ 인큐 온도 칸(큰 숫자 + [− 0.5][+ 0.5] + °C · 미리 보기 한 줄)은 js/egg-temp.js 가 그리고 스타일도 주입한다.
 * 페어 피커 겉모습은 js/pair-picker.js(주입 CSS) — 여기선 창 안 배치만 덮는다.
 * (2026-10-14 UI 정돈 B4a) ① 알 종류 = 공통 옵션(.opt-list > .opt) · 알 상태 = 공통 이어 붙인 3칸(.opt-row) — 여기선 배치만(다시 칠하지 않음).
 */

/* ---- 창 ---- */
.ovl{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--s6);background:var(--scrim);}
.modal{width:min(960px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-pop);}
.m-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4) var(--s1) var(--s6);flex:0 0 auto;}
.m-t{margin:0;font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);letter-spacing:-.015em;}
.m-sub{font-size:var(--t-md);color:var(--ink-3);}
.m-sub b{color:var(--ink);font-weight:var(--w-bold);}
.m-h .spacer{flex:1;}
.m-x{flex:0 0 auto;}
.m-b{display:block;padding:var(--s2) var(--s6) var(--s5);overflow-y:auto;min-height:0;background:var(--bg);}
/* (2026-10-15 incubator §4) 항목 목록(js/egg-register.js 가 모양 주입) — 창 본문은 회색 바탕 위 흰 항목 카드 */
.m-h{box-shadow:inset 0 -1px 0 var(--line);padding-bottom:var(--s3);}
.m-f .js-submit .js-n{font-variant-numeric:tabular-nums;}
.en-col{display:flex;flex-direction:column;gap:var(--s3);min-width:0;}
.en-col > .en-step + .en-step{margin-top:var(--s2);}
.en-col:first-child{padding-right:var(--s6);}
.en-col + .en-col{padding-left:var(--s6);box-shadow:inset 1px 0 0 var(--line);}
.en-step{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.en-t{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.01em;}
.en-n{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:inline-grid;place-items:center;
  background:var(--ink);color:var(--panel);font-size:var(--t-xs);font-weight:var(--w-black);}
.m-f{display:flex;justify-content:flex-end;align-items:center;gap:var(--s3);padding:var(--s3) var(--s6);flex:0 0 auto;
  box-shadow:inset 0 1px 0 var(--line);}
.m-f .js-submit{min-width:240px;white-space:nowrap;}
/* 등록 비활성(viewer) — js/egg-new.js 가 .dis + aria-disabled */
.m-f .js-submit.dis{pointer-events:none;}

/* ---- ① 알 종류: 공통 옵션 2개를 나란히 ---- */
.fseg.opt-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);}

/* ---- ③ 날짜 · 개수 · 상태 · 부화기 ---- */
.en-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:end;}
.en-step .f-field{gap:6px;}
.f-label{display:flex;align-items:baseline;gap:var(--s2);}
.f-label .f-hint{font-weight:var(--w-reg);}
#f-laid-hint:empty{display:none;}
/* 낳은 날: 보이는 칸은 글자 입력(2026-08-30), 누르면 겹쳐 둔 달력(date)이 열린다 */
/* 낳은 날 — 공용 날짜 칸(js/date-field.js 가 .dwrap → .df-row 로 바꿔 짠다: 글자 칸 + "달력" 버튼) */
.dwrap,.df-row{position:relative;display:flex;}
.dwrap #f-laid,.df-row #f-laid{font-weight:var(--w-semi);}
.dwrap #f-laid-picker{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0;}
/* 알 개수 − [n] + */
.step{display:flex;align-items:center;gap:6px;}
.step .btn{width:var(--ctl);padding:0;flex:0 0 auto;}
.step .btn:disabled{opacity:.4;}
.step #f-count{width:64px;padding:0 4px;text-align:center;font-size:var(--t-lg);font-weight:var(--w-bold);-moz-appearance:textfield;}
.step #f-count::-webkit-inner-spin-button,.step #f-count::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
/* 지금 알 상태(도자기·눈꽃·골프공) — 공통 .opt-row 3칸 */

/* ---- ② 부·모 — pair-picker(variant sheet) 창 안 배치 ---- */
#pair-picker{min-width:0;}
/* 메이팅 미리보기(부 ○○ · 모 ○○)는 한 줄 — 긴 이름이 두 줄로 늘어 창이 520px 를 넘지 않게(전체 이름은 title·위 선택 칸에 있음) */
#pair-picker .pp-prev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---- viewer 안내 ---- */
.ro{grid-column:1/-1;margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--warn-soft);
  font-size:var(--t-md);color:var(--ink-2);line-height:1.55;}
.ro b{color:var(--ink);}

/* (2026-10-13) 좁은 창 — 두 칸을 한 칸으로(①②③ 위에서 아래로), 바깥 여백을 줄여 버튼(− 개수 +)이 잘리지 않게. */
@media (max-width:760px){
  .ovl{padding:var(--s2);}
  .modal{max-height:calc(100vh - 16px);}
  .m-h{flex-wrap:wrap;padding:var(--s3) var(--s3) var(--s1) var(--s4);row-gap:0;}
  .m-sub{order:5;flex:1 0 100%;}
  .m-b{grid-template-columns:minmax(0,1fr);padding:var(--s2) var(--s4) var(--s4);row-gap:var(--s5);}
  .en-col:first-child{padding-right:0;}
  .en-col + .en-col{padding-left:0;box-shadow:none;padding-top:var(--s4);border-top:1px solid var(--line);}
  .m-f{padding:var(--s3) var(--s4);}
  .m-f .js-submit{min-width:0;flex:1 1 auto;}
  #pair-picker .pp-top{flex-wrap:wrap;row-gap:var(--s1);}
}
@media (max-width:430px){
  .en-row{grid-template-columns:minmax(0,1fr);}
  .fseg.opt-list{grid-template-columns:minmax(0,1fr);}
}