/*
 * 01 대시보드(데스크톱) — beta2. (2026-10-15 사용자 "보유현황이 제일 먼저 보이고 그 옆(아래)에 오늘 할 일, 알 현황" · team/contracts/ui-declutter.md §1~§4)
 * (v2.12 — team/plans/dashboard-dnd.md §3-1) 카드 배치 = 정사각 격자(css/dash-cards.css .dg — 작게 1칸 · 크게 2×2). 여기는 카드 속 모양만.
 *   카드 공용(격자·작게 모양·분양 매출·0장 안내·[대시보드 편집] 줄)은 css/dash-cards.css.
 * 공통 부품(.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;}

/* ---- 배치: (v2.12) 정사각 격자 #dash-cards.dg — css/dash-cards.css(작게 1칸 · 크게 2×2 · 폭에 맞춰 열 수). v2.11 왼쪽·오른쪽 두 칸은 없어짐 ---- */

/* ---- ① 보유 현황 — 총 마릿수(큰 숫자) + 성별 셋 ---- */
.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);}

/* 모프·태그별 보유 — (v2.11) 따로 카드(.db-statcard). 안에 모프별 · 태그별 두 묶음(사이 헤어라인) — 글자 크기·간격은 v2.10 보유 현황 안 묶음 그대로 */
.db-stat{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);}
.db-statcard .db-stat:first-child{margin-top:0;padding-top:0;border-top:0;}
.db-statcard .db-stat:first-child > .db-stat-h{min-height:var(--ctl);align-content:center;margin-bottom:var(--s3);}   /* 첫 제목 줄 = 다른 카드 머리(.box-h)와 같은 높이 */
.db-stat-h{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2);}
.db-stat-h h2,.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);flex-wrap:wrap;row-gap:var(--s2);}   /* (2026-10-21) [QR로 기록하기]·[급여 기록] 두 버튼 — 좁으면 아래 줄로 */
.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: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;}
}