/*
 * 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));}
/* (v2.36 ux-fix U-06) 실패 상자 [다시 해 보기] = 테두리 있는 단추 — 글자 단추용 왼쪽 당김을 빼서 제목·설명과 왼쪽 끝을 맞춤(알 현황 상자와 같은 줄) */
.db-stat .empty-state.ui-fail .btn{margin-left:0;}
.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;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}   /* (3차-D §8) 제목 한 줄 + 말줄임 */
/* (3차-D §8) 보조 줄 = 늘 한 줄 + 말줄임(줄마다 1줄·2줄 들쭉날쭉 · "·" 앞뒤 쪼개짐 없음) */
.dash-todo .rl-s{font-size:var(--t-sm);color:var(--ink-2);line-height:1.4;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.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;}
/* (3차-D §8) 줄 수 고정 — 페어 = 이름 한 줄(말줄임 · 전체 = title · 알 상세) + 알 번호 한 줄 · 예상 해칭 = 날짜 / 남은 날 두 줄(늘).
   "초롱 × 해바라기" 한 글자만 다음 줄 · 줄마다 1줄·2줄 들쭉날쭉하던 것. 페어 칸이 남는 폭을 갖고(width 100% · max-width 0) 다른 칸은 제 폭 */
.db-egg-tbl td.db-pair{width:100%;max-width:0;}
.db-egg-tbl .db-pair .db-pn{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.db-egg-tbl td.db-due .nw{display:block;}
.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;}
}

/* ==================== (v3.0 도마도 3차-D) 위젯 = 휴대폰 홈(MAIN — css/m01-home.css)과 같은 상자 말투 · 내용은 그대로 ====================
   상자 = 모서리 --r-box · 흰 바탕 + 산호 테두리(--bw) · 작게 상자는 읽는 차례로 번갈아 옅은 산호 바탕(js/dashboard.js paintTones — data-tone w|c ·
   그림 1 첫 줄 [흰 | 옅은 산호]) — 그 위 큰 글자(제목·숫자·단위)·그림·점선 흰색, 작은 글자 #0c0c0c(계약 §3) · 크게 상자는 늘 흰 바탕(표·알림 줄의 뜻 있는 색이 산호 위에 앉지 않게).
   크게 = 제목 써라운드 --fs-box-t 산호(22px↑ — 흰 상자 큰 제목) + 아래 선 1.4 · 작게 = 위 가운데 제목(써라운드) → 설명 한 줄 → [그림 · 점선 · 큰 숫자(써라운드 --num-big) + 단위]. */
.dg:not(.dg-phone) > .box[data-card]{--tone-bg:var(--panel);background:var(--tone-bg);border-radius:var(--r-box);box-shadow:inset 0 0 0 var(--bw) var(--accent);}
.dg:not(.dg-phone) > .box[data-card][data-size="s"][data-tone="c"]{--tone-bg:var(--accent-2);box-shadow:none;}
/* 크게 — 제목 줄(써라운드 산호 + 아래 선) · 개수 글자는 Pretendard 보조 */
.dg:not(.dg-phone) > .box[data-card] > .dg-lg > :is(.box-h,.ft-h):first-child,
.dg:not(.dg-phone) > .db-statcard > .dg-lg > .db-stat:first-child > .db-stat-h{padding-bottom:9px;margin-bottom:var(--s3);border-bottom:1.4px solid var(--accent);}
.dg:not(.dg-phone) > .box[data-card] > .dg-lg > :is(.box-h,.ft-h):first-child h2,
.dg:not(.dg-phone) > .db-statcard .db-stat-h h2,.dg:not(.dg-phone) > .db-statcard .db-stat-h h3{font-family:var(--font-display);font-weight:400;font-size:var(--fs-box-t);line-height:1.25;color:var(--accent);letter-spacing:-.01em;}
.dg:not(.dg-phone) > .box[data-card] .box-h h2 .db-box-n,.dg:not(.dg-phone) > .db-statcard .db-stat-h .db-box-n,
.dg:not(.dg-phone) > .db-statcard .db-stat-h .mgroup-n{font-family:var(--font);font-size:var(--fs-chip);font-weight:500;color:var(--ink-sub);}
.dg:not(.dg-phone) .db-big b,.dg:not(.dg-phone) .db-egg-n b{font-family:var(--font-display);font-weight:400;color:var(--num-big);letter-spacing:-.01em;}
/* 작게 — 휴대폰 홈과 같은 세 줄 격자(제목 | 설명 한 줄 자리 | 값 가운데) — 옆 상자와 값 줄 높이가 맞음 */
.dg:not(.dg-phone) .dg-sm{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(calc(var(--fs-chip) * 1.3 + 4px),auto) minmax(0,1fr);
  align-items:stretch;gap:0;padding:8% 9% 7%;container:dgsm / inline-size;}
.dg:not(.dg-phone) .dg-sm:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);}
.dg:not(.dg-phone) .dg-sm:active{background:color-mix(in srgb,var(--ink) 8%,transparent);}
.dg:not(.dg-phone) .dg-sm-t{grid-row:1;justify-content:center;text-align:center;font-family:var(--font-display);font-weight:400;font-size:var(--fs-box-t);line-height:1.25;color:var(--ink);}
/* 상자가 좁은 창(4열 · 860~980)에서는 제목을 상자 폭에 맞춰 조금 줄여 한 줄로("이번 주 사육 기록"만 두 줄이 되던 것 — 같은 줄 상자 제목은 같은 크기) */
.dg:not(.dg-phone) .dg-sm-t{font-size:clamp(18px,12.6cqi,var(--fs-box-t));}
.dg:not(.dg-phone) .dg-sm-tt{flex:0 1 auto;text-wrap:balance;}
.dg:not(.dg-phone) .dg-sm-go{display:none;}
.dg:not(.dg-phone) .dg-sm-l{grid-row:2;margin-top:4px;text-align:center;font-size:var(--fs-chip);font-weight:500;color:var(--ink-sub);line-height:1.3;}
.dg:not(.dg-phone) .dg-sm-l[hidden] + .dg-sm-v,.dg:not(.dg-phone) .dg-sm-v{grid-row:3;align-self:center;margin:0;padding:0;}
.dg:not(.dg-phone) .dg-sm-v{flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0 min(8px,3.5cqi);}
.dg:not(.dg-phone) .dg-sm-v::before{content:"";order:-3;flex:0 0 auto;width:min(36px,18cqi);height:min(36px,18cqi);background:var(--accent);
  -webkit-mask:url("../img/icons/gecko.svg") center/contain no-repeat;mask:url("../img/icons/gecko.svg") center/contain no-repeat;}
.dg:not(.dg-phone) .dg-sm-v::after{content:"";order:-2;flex:1 1 8px;min-width:0;height:0;border-top:1.4px dashed var(--accent);}
.dg:not(.dg-phone) .dg-sm-v:has(> .dg-sm-x)::after,.dg:not(.dg-phone) .dg-sm-v:has(> .dg-sm-wait)::after,.dg:not(.dg-phone) .dg-sm-v:has(> .dg-sm-wait)::before{display:none;}
.dg:not(.dg-phone) .dg-sm-n{font-family:var(--font-display);font-weight:400;color:var(--num-big);font-size:clamp(28.1px,17cqi,44px);letter-spacing:-.01em;line-height:1.1;white-space:nowrap;}
.dg:not(.dg-phone) .dg-sm-n:is([data-len="4"],[data-len="5"]){font-size:clamp(24px,15cqi,40px);}
.dg:not(.dg-phone) .dg-sm-u{font-family:var(--font-display);font-weight:400;font-size:var(--fs-unit);color:#302f2f;white-space:nowrap;}
.dg:not(.dg-phone) .dg-sm-x{flex:1 1 auto;text-align:right;font-family:var(--font-display);font-weight:400;font-size:min(var(--fs-box-t),16cqi);color:var(--num-big);}
.dg:not(.dg-phone) .dg-sm-wait{flex:1 1 auto;text-align:center;}
.dg:not(.dg-phone) .dg-sm-v:has(> .dg-sm-n:is([data-len="4"],[data-len="5"]))::after{display:none;}
.dg:not(.dg-phone) [data-card="hatched"] .dg-sm-v::before,.dg:not(.dg-phone) [data-card="eggs"] .dg-sm-v::before{-webkit-mask-image:url("../img/icons/egg-fill.svg");mask-image:url("../img/icons/egg-fill.svg");}
.dg:not(.dg-phone) [data-card="today"] .dg-sm-v::before{-webkit-mask-image:url("../img/icons/check.svg");mask-image:url("../img/icons/check.svg");}
.dg:not(.dg-phone) :is([data-card="care_week"],[data-card="feed_today"]) .dg-sm-v::before{-webkit-mask-image:url("../img/icons/feed.svg");mask-image:url("../img/icons/feed.svg");}
.dg:not(.dg-phone) [data-card="stats"] .dg-sm-v::before{-webkit-mask-image:url("../img/icons/tag.svg");mask-image:url("../img/icons/tag.svg");}
.dg:not(.dg-phone) [data-card="care_watch"] .dg-sm-v::before{-webkit-mask-image:url("../img/icons/info.svg");mask-image:url("../img/icons/info.svg");}
.dg:not(.dg-phone) [data-card="sales"] .dg-sm-v::before{-webkit-mask-image:url("../img/icons/box.svg");mask-image:url("../img/icons/box.svg");}
/* 옅은 산호 바탕 작게 — 큰 글자·그림·점선 흰색 · 작은 설명 글 = 연한 검정(2026-11-10 디자이너 A0108 "더 연하게" — 검정 58% · #ffac9e 위 약 4 : 1 · 휴대폰 홈 css/m01-home.css 와 같은 값) */
.dg:not(.dg-phone) > .box[data-card][data-tone="c"] .dg-sm{--ink:#ffffff;--num-big:#ffffff;--accent:#ffffff;--accent-text:#ffffff;}
.dg:not(.dg-phone) > .box[data-card][data-tone="c"] .dg-sm .dg-sm-u{color:#ffffff;}
.dg:not(.dg-phone) > .box[data-card][data-tone="c"] .dg-sm .dg-sm-l{color:rgba(12,12,12,.58);}
/* 오늘 할 일 제목 줄 — [제목 ······ QR로 기록하기 · 급여 기록] 한 줄 · 칸이 좁으면 제목 한 줄 + 두 단추 같은 폭 한 줄(§8 의도된 배치) · 더 좁으면 한 줄에 하나 */
.db-today-h{flex-wrap:nowrap;}
.db-today-h > .btn{flex:0 0 auto;}
@container dglg (max-width:620px){
  .db-today-h{flex-wrap:wrap;row-gap:var(--s3);}
  .db-today-h > h2{flex:1 1 100%;}
  .db-today-h > .sp{display:none;}
  .db-today-h > .btn{flex:1 1 0;min-width:0;height:var(--ctl);padding:0 var(--s3);font-size:var(--t-md);}
}
@container dglg (max-width:340px){
  .db-today-h > .btn{flex:1 1 100%;}
}