/*
 * 01 대시보드(데스크톱) — beta2. (2026-10-15 사용자 "보유현황이 제일 먼저 보이고 그 옆(아래)에 오늘 할 일, 알 현황" · team/contracts/ui-declutter.md §1~§4)
 * 본문 카드 3장: 왼쪽 ① 보유 현황(총·성별 + 모프별·태그별 묶음) · 오른쪽 ② 오늘 할 일(알림 줄 .row-link ›) ③ 알 현황(수·단계별 + 부화가 가까운 알 표).
 * 좁은 창(≤980)은 한 줄 ① → ② → ③. 급여 기록 버튼(#db-feed)은 숨김(hidden — 기능은 그대로).
 * 공통 부품(.page·.btn·.box·.tbl·.st·.row-link·.loading·.empty-state)은 css/ui.css — 여기서 다시 칠하지 않는다(배치만).
 * 큰 숫자 규칙(2026-10-14 긴급 — 성별 칸 숫자가 한 글자씩 쪼개짐): 한 줄(nowrap) + 자릿수(data-len, js)로 칸 폭(cqi)에 맞춰 줄임 · 천 단위 쉼표.
 * 하드코딩 색 없음 → html.dark-ok.
 */

.db .box-h h2{font-size:var(--t-xl);}
.db-box-n{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-3);white-space:nowrap;}
.box-h .btn.txt{margin-right:calc(-1 * var(--s3));}
.db-err{font-size:var(--t-md);color:var(--dang);}
.db-sr,.dash-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---- 배치: 왼쪽 보유 현황(5) · 오른쪽 오늘 할 일 + 알 현황(7) ---- */
.db-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start;}
.db-grid > .box,.db-side{min-width:0;}
.db-side{display:flex;flex-direction:column;gap:var(--s6);}
.db-side > .box{min-width:0;}

/* ---- ① 보유 현황 — 총 마릿수(큰 숫자) + 성별 셋, 아래 모프별·태그별(카드 안 묶음, 사이는 헤어라인) ---- */
.db-hold-b{display:flex;flex-direction:column;gap:var(--s5);}
.db-big{margin:0;font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink-3);line-height:1.1;}
.db-big b{font-size:52px;font-weight:var(--w-black);color:var(--ink);letter-spacing:-.03em;margin:0 4px;white-space:nowrap;}
.db-big:not(:has(b)){font-size:var(--t-md);font-weight:var(--w-reg);}
.db-tile-d{margin:var(--s2) 0 0;font-size:var(--t-md);color:var(--ink-3);}
.db-sex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
.db-sex > .loading,.db-sex > .db-err{grid-column:1/-1;padding:var(--s3) 0;justify-content:flex-start;}
.db-sx{border-radius:var(--r-lg);padding:var(--s3) var(--s4) var(--s4);background:var(--fill);min-width:0;container-type:inline-size;}
.db-sx-l{display:flex;align-items:center;gap:8px;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);white-space:nowrap;}
.db-sx-l::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--unknown);flex:0 0 auto;}
.db-sx.female .db-sx-l::before{background:var(--female);}
.db-sx.male .db-sx-l::before{background:var(--male);}
.db-sx.female{background:var(--female-soft);}
.db-sx.male{background:var(--male-soft);}
/* 숫자는 한 줄(쪼개지지 않게). 세 자리 이상(data-len, js)은 칸 폭(cqi)에 맞춰 줄인다 — --db-n = 기본 크기(좁은 칸 34) */
.db-sx .mval{--db-n:40px;display:block;margin-top:var(--s1);font-size:var(--db-n);font-weight:var(--w-black);color:var(--ink);letter-spacing:-.03em;line-height:1.15;white-space:nowrap;}
.db-sx .mval[data-len="3"]{font-size:min(var(--db-n),48cqi);}
.db-sx .mval[data-len="4"]{font-size:24px;font-size:min(var(--db-n),33cqi);}
.db-sx .mval[data-len="5"]{font-size:20px;font-size:min(var(--db-n),26cqi);}

/* 모프별 · 태그별 — 보유 현황 카드 안 묶음(작은 제목 h3) */
.db-stat{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);}
.db-stat-h{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2);}
.db-stat-h h3{margin:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
.db-morphs .mrow{display:flex;align-items:center;gap:var(--s3);min-height:40px;}
.db-morphs .mlabel{width:120px;flex:0 0 auto;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-morphs .mbar,.db-tagbox .mbar{flex:1;min-width:40px;height:12px;border-radius:var(--r-full);background:var(--fill-2);overflow:hidden;}
.db-morphs .mfill,.db-tagbox .mfill{height:100%;border-radius:var(--r-full);background:var(--accent);}
/* 막대 줄 숫자 — 고정 폭 대신 최소 폭(--mv = 그 목록에서 가장 긴 숫자 길이, js), 한 줄 */
.db-morphs .mval,.db-tagbox .mval{min-width:40px;min-width:max(40px,var(--mv,0px));flex:0 0 auto;white-space:nowrap;text-align:right;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
.db-morphs .mrow.muted .mlabel,.db-morphs .mrow.muted .mval{color:var(--ink-3);}
.db-morphs .mrow.muted .mfill{background:var(--line-3);}
/* 묶음 안 빈 상태 — 큰 그림 없이 한 덩어리(카드 안 카드 금지) */
.db-stat .empty-state{padding:var(--s3) 0 var(--s1);align-items:flex-start;text-align:left;}
.db-stat .empty-state .es-ic{display:none;}
.db-stat .empty-state .btn{margin-left:calc(-1 * var(--s3));}
.db-note{margin:var(--s3) 0 0;font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;}
/* 태그 줄 = 행 전체가 링크(48↑) — 막대 + 숫자 + › */
.db-tagbox .trow{display:flex;align-items:center;gap:var(--s3);min-height:48px;margin:0 calc(-1 * var(--s2));padding:0 var(--s2);
  border-radius:var(--r-btn);text-decoration:none;color:inherit;}
.db-tagbox .trow:hover{background:var(--fill);}
.db-tagbox .trow:active{background:var(--fill-2);}
.db-tagbox .trow:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px;}
.db-tagbox .tlabel{width:120px;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-width:0;
  font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);}
.db-tagbox .tlabel svg{flex:0 0 auto;color:var(--accent);}
.db-tagbox .tlabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-tagbox .tgo{flex:0 0 auto;color:var(--ink-3);display:inline-flex;}
.db-tagbox .db-more{margin-top:var(--s2);margin-left:calc(-1 * var(--s3));height:auto;min-height:var(--ctl);white-space:normal;text-align:left;}

/* ---- ② 오늘 할 일 — 알림 줄(.row-list.bleed > .row-link.dash-todo), 왼쪽 동그라미 = 급한 정도 ---- */
.db-grid .box-h{min-height:var(--ctl);}   /* 머리 높이를 맞춰 좌우 카드 제목 줄이 같은 높이 */
.db-today-h{margin-bottom:var(--s2);}
.db-today-h h2 .db-box-n{margin-left:var(--s1);}
.db-todo-list > .loading{padding:var(--s3) var(--s4);justify-content:flex-start;}
.dash-todo{align-items:flex-start;}
.dash-todo::after{align-self:center;}
.dash-todo-ic{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:var(--info-soft);color:var(--info);}
.dash-todo[data-level="warn"] .dash-todo-ic{background:var(--warn-soft);color:var(--warn);}
.dash-todo[data-level="caution"] .dash-todo-ic{background:var(--fill);color:var(--star);}
.dash-todo .rl-b{gap:4px;padding-top:6px;}
.dash-todo .rl-t{font-size:var(--t-md);font-weight:var(--w-bold);line-height:1.35;word-break:keep-all;}
.dash-todo .rl-s{font-size:var(--t-sm);color:var(--ink-2);line-height:1.4;word-break:keep-all;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.dash-none{margin:0;padding:var(--s3) var(--s4) var(--s2);font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink-2);}
.db-all{margin:var(--s2) 0 calc(-1 * var(--s2)) calc(-1 * var(--s3));}

/* ---- ③ 알 현황 — 진행 중인 알 수(큰 숫자) + 단계별 수(글자), 아래 부화가 가까운 알 표 ---- */
.db-eggs{position:relative;}   /* 숨은 읽기 글자(.db-sr)가 문서를 넓히지 않게 */
.db-egg-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:calc(-1 * var(--s2)) 0 var(--s4);}
.db-egg-big{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--s2);}
.db-egg-l{font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink-2);white-space:nowrap;}
.db-egg-n{font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink-3);white-space:nowrap;}
.db-egg-n b{font-size:40px;font-weight:var(--w-black);color:var(--ink);letter-spacing:-.03em;margin-right:3px;}
.db-egg-st{margin:0;display:flex;flex-wrap:wrap;gap:4px var(--s4);font-size:var(--t-md);color:var(--ink-2);}
.dash-stg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.dash-stg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex:0 0 auto;}
.dash-stg[data-stage="눈꽃"]::before{background:var(--info);}
.dash-stg[data-stage="골프공"]::before{background:var(--warn);}
.dash-stg b{font-weight:var(--w-bold);color:var(--ink);}
.db-sub-t{margin:0 0 var(--s1);font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}

/* 부화가 가까운 알 표 — 행 전체가 누르는 곳(맨 끝 › = 그 알 상세 링크) */
.db-egg-tbl tbody tr{cursor:pointer;}
.db-egg-tbl tbody tr:active td{background:var(--fill-2);}
.db-egg-tbl td:first-child,.db-egg-tbl th:first-child{padding-left:var(--s2);}
.db-egg-tbl td,.db-egg-tbl th{padding-left:var(--s2);padding-right:var(--s2);}
.db-elv{font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);letter-spacing:-.02em;}
.db-elu{margin-left:3px;font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink-3);}
/* 예상 해칭 칸 — "12월 3일" + "9일 남음"(덩어리마다 줄바꿈 안 함, 칸이 좁으면 두 덩어리가 두 줄로) */
.db-egg-tbl td.db-due{white-space:normal;color:var(--ink-2);font-weight:var(--w-semi);line-height:1.35;padding-top:var(--s2);padding-bottom:var(--s2);}
.db-due .nw{white-space:nowrap;}
.db-left{color:var(--ink-3);}
.db-left[data-tone="soon"]{color:var(--ok);font-weight:var(--w-bold);}
.db-left[data-tone="over"]{color:var(--warn);font-weight:var(--w-bold);}
/* 페어 칸 — 긴 이름(띄어쓰기 없는 40자 × 2)도 칸 안에서 줄바꿈(2026-10-14: .tbl td 의 nowrap 이 이겨 표가 칸보다 넓어지던 것).
   글자 사이에서 줄을 바꿔 이름 속 숫자(S0664)는 안 쪼개진다. 둘째 줄 = 알 번호(.db-no) */
.db-egg-tbl td.db-pair{font-weight:var(--w-bold);color:var(--ink);white-space:normal;word-break:normal;
  padding-top:var(--s2);padding-bottom:var(--s2);line-height:1.35;}
.db-pair .db-pn{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}   /* 아주 긴 이름은 3줄까지(전체 = 알 상세) */
.db-pair .db-no{display:block;margin-top:2px;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink-3);white-space:nowrap;}
.db-go-h{width:1%;}
.db-egg-tbl td.go{width:1%;padding:0 var(--s1) 0 0;text-align:right;}
.db-egg-tbl 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;}
.db-egg-tbl tbody tr:hover td.go a{color:var(--link);}
.db-egg-tbl td.go a:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px;}
/* 알이 없을 때 — 표 머리 숨기고 빈 상태 한 줄 */
.db-egg-tbl.is-empty thead{display:none;}
.db-egg-tbl tr.db-norow td{height:auto;padding:0;border-bottom:0;white-space:normal;}
.db-egg-tbl tbody tr.db-norow{cursor:default;}
.db-egg-tbl tbody tr.db-norow:hover td,.db-egg-tbl tbody tr.db-norow:active td{background:transparent;}
.db-egg-tbl .empty-state{padding:var(--s6) var(--s4);}
.db-egg-tbl .empty-state .es-ic{background:var(--accent-soft);color:var(--accent);}
.db-eggs:has(.db-egg-tbl.is-empty) .db-sub-t{display:none;}

/* 좁은 데스크톱 창 — 큰 숫자 조금 작게 */
@media (max-width:1180px){
  .db-big b{font-size:44px;}
  .db-sx .mval{--db-n:34px;}
  .db-sx{padding:var(--s3) var(--s3) var(--s4);}
  .db-morphs .mlabel,.db-tagbox .tlabel{width:96px;}
}
/* 더 좁으면 한 줄로 — 보유 현황 → 오늘 할 일 → 알 현황 */
@media (max-width:980px){
  .db-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:700px){
  .page-head .btn{flex:1 1 auto;}
}
@media (max-width:360px){
  .db-sex{gap:var(--s2);}
  .db-sx{padding:var(--s3) var(--s2);}
  .db-sx-l{gap:5px;}
}