/*
 * 대시보드 카드 공용(01 컴퓨터 · m01 휴대폰) — v2.11 대시보드 편집(team/plans/dashboard-widgets.md). 카드 목록 js/dash-cards.js · 놓기 js/dash-layout.js.
 * 여기 = 두 화면이 같이 쓰는 카드 속(분양 매출 .dsl-*) · 보이는 카드 0장 안내(#dash-empty) · [대시보드 편집] 줄(#dash-edit-row)
 *   · (v2.12 — team/plans/dashboard-dnd.md §3-1) 정사각 격자 .dg(작게 1칸 · 크게 2×2 · 빈칸 메우며 흐름) + 작게 모양 .dg-sm · 크게 모양 .dg-lg(js/dash-grid.js).
 * 카드 껍데기는 각 화면 것(컴퓨터 .box · 휴대폰 .m01-box) — 격자 안에서는 칸을 꽉 채움(여백만 여기서 줄임). 편집 상태는 css/dash-edit.css(js/dash-edit.js 가 불러옴).
 * 새 카드(분양중 개체·최근 해칭·이번 주 사육 기록 — js/dash-more.js)의 속 모양도 여기에 더한다(이름 머리 dc- 등 — 공용 클래스와 겹치지 않게).
 * 큰 숫자 규칙: 숫자+단위는 한 덩어리(nowrap) · 줄은 덩어리 사이에서만 · 고정 폭 숫자 칸 금지(min-width) · 천 단위 쉼표. 하드코딩 색 없음 → html.dark-ok.
 */

/* ---- 보이는 카드 0장(설계 §4-6) ---- */
.dash-empty{margin:var(--s2) 0 var(--s4);padding:var(--s5) var(--s4);border-radius:var(--r-xl);background:var(--fill);
  font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink-2);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;}
.dash-empty[hidden]{display:none;}

/* ---- [대시보드 편집] — 카드들 맨 아래(컴퓨터 = 오른쪽 끝 · 휴대폰 = 전체 폭 48px) ---- */
.dash-edit-row{display:flex;justify-content:flex-end;margin-top:var(--s6);}
.dash-edit-row[hidden]{display:none;}
.dash-edit-row .btn{flex:0 0 auto;}
.m01-edit-row{justify-content:stretch;margin:var(--s2) 0 var(--s6);}
.m01-edit-row .btn{flex:1 1 auto;width:100%;}

/* ---- 분양 매출(js/money-dash.js — 장부 첫 화면 이번 달과 같은 숫자) ---- */
.dsl .loading{padding:var(--s3) 0;justify-content:flex-start;}
.dsl-b{display:flex;flex-direction:column;gap:var(--s2);min-width:0;}
.dsl-b p{margin:0;}
.dsl .nw{white-space:nowrap;}
.dsl-when{font-size:var(--t-md);color:var(--ink-3);line-height:1.4;}
.dsl-when .dsl-dot{color:var(--ink-3);}
.dsl-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s3);line-height:1.15;}
.dsl-won{font-size:40px;font-weight:var(--w-black);color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.dsl-n{font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink-2);font-variant-numeric:tabular-nums;}
.dsl-none{font-size:var(--t-lg);font-weight:var(--w-semi);color:var(--ink-2);line-height:1.4;word-break:keep-all;}
.dsl-prev{font-size:var(--t-md);color:var(--ink-2);line-height:1.5;font-variant-numeric:tabular-nums;}
.dsl-prev .dsl-pw{font-weight:var(--w-bold);color:var(--ink);}
.dsl-prev .dsl-dot{font-weight:var(--w-reg);color:var(--ink-2);}
.dsl-err{font-size:var(--t-md);color:var(--dang);}
/* 휴대폰 — 큰 숫자 조금 작게(320 에서 "99억 9,999만 원"이 덩어리 둘로) */
.m01-box.dsl .dsl-won{font-size:34px;}
.m01-box.dsl .dsl-n{font-size:var(--t-md);}

/* ---- (v2.12) 정사각 격자 — 칸 한 변 = (격자 폭 − 사이 × (열−1)) ÷ 열. 작게 = 1칸 · 크게 = 2×2칸. 순서대로 맨 앞 빈자리부터(dense) ----
 *   휴대폰 2열(.dg-phone) · 컴퓨터는 격자 폭에 맞춰 2·3·4·6열 — (v2.12 손보기) 760~1599 = 4열(처음 모습이 빈칸 없이) · 1600 이상만 6열.
 *   열 수 숫자는 js/dash-layout.js GRID_STEPS 와 같음 — 한쪽을 바꾸면 같이.
 *   컴퓨터 격자 사이 16 · 휴대폰 12. 카드 높이가 정해져 있어 넘치는 내용은 잘림(긴 목록은 js/dash-grid.js 가 들어가는 줄만 남김). */
.dg-wrap{container-type:inline-size;min-width:0;}
/* 크게 칸 안쪽 폭(이름 붙인 container — 칸 수 규칙 @container 와 안 섞이게). 좁으면(컴퓨터 1024 4열 격자의 크게 = 약 416px) 컴퓨터 알 표를 휴대폰처럼 줄임:
   "단계" 칸 뺌(단계별 수는 위에 있음) · 표 머리 뺌(값에 단위가 붙어 있음 — 40일째 · 10월 13일 · 1번 알) */
.dg > [data-card] > .dg-lg{container:dglg / inline-size;}
@container dglg (max-width:479px){
  .db-egg-tbl thead{display:none;}
  .db-egg-tbl th:nth-child(4),.db-egg-tbl td:nth-child(4){display:none;}
}
/* (v2.12 손보기) 격자 안 알 표 — 칸 높이가 정해져 있어 줄을 낮게: 페어 이름 한 줄 말줄임(전체 = 알 상세 · title) ·
   예상 해칭 덩어리("8월 25일" · "예상일 59일 지남")는 덩어리 안에서 안 쪼개짐(덩어리 사이에서만 — 좁으면 두 줄. 1024 에서 "8월/25일/예상/일/59일/지남" 여섯 줄로 쪼개지던 것) */
.dg .db-egg-tbl .db-pair .db-pn{-webkit-line-clamp:1;}
.dg .db-egg-tbl .db-due .nw{white-space:nowrap;}
.dg{--dg-n:2;--dg-gap:var(--s4);display:grid;grid-template-columns:repeat(var(--dg-n),minmax(0,1fr));
  grid-auto-rows:calc((100cqi - (var(--dg-n) - 1) * var(--dg-gap)) / var(--dg-n));grid-auto-flow:row dense;gap:var(--dg-gap);}
.dg.dg-phone{--dg-gap:var(--s3);}
@container (min-width:560px){.dg:not(.dg-phone){--dg-n:3;}}
@container (min-width:760px){.dg:not(.dg-phone){--dg-n:4;}}
@container (min-width:1600px){.dg:not(.dg-phone){--dg-n:6;}}
.dg[hidden],.dg > [hidden]{display:none !important;}
.dg > [data-card]{position:relative;min-width:0;min-height:0;margin:0 !important;overflow:hidden;display:flex;flex-direction:column;}
.dg > [data-card][data-size="l"]{grid-column:span 2;grid-row:span 2;}
.dg > .box[data-card]{padding:var(--s5);}
.dg > .m01-box[data-card]{padding:var(--s4);}
.dg > [data-card][data-size="s"]{padding:0;}
.dg > [data-size="s"] > .dg-lg,.dg > [data-size="l"] > .dg-sm{display:none !important;}
/* 크게 — 지금 카드 내용(블록 흐름 그대로) · 칸 높이까지 */
.dg-lg{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;}
/* (v2.12 손보기) 옆 여유 — 카드 안 행 전체 누름 줄(휴대폰 .eggs·.m01-todo-list·.trow 음수 8 · 컴퓨터 .row-list.bleed 음수 16)과 글자 버튼(.btn.txt 음수 12)이
   크게 칸(overflow:hidden) 옆으로 나가 글자·구분선·누름 배경·초점 테두리가 잘리던 것: .dg-lg 를 카드 안쪽 여백 쪽으로 넓히고(음수 margin) 같은 만큼 안쪽 여백 —
   글 자리는 그대로이고 잘리는 선만 카드 가장자리 가까이로(휴대폰 12 = 카드 여백 16 안 · 컴퓨터 16 = 카드 여백 20 안). 칸 안쪽 폭(container dglg)도 그대로. */
.dg > [data-card] > .dg-lg{--dg-bleed:var(--s4);margin-inline:calc(-1 * var(--dg-bleed));padding-inline:var(--dg-bleed);}
.dg.dg-phone > [data-card] > .dg-lg{--dg-bleed:var(--s3);}
.dg [data-fit-hid]{display:none !important;}
.dg [data-fit-more]:not([data-fit-show]){display:none !important;}
.dg .dg-more{margin:var(--s1) 0 0 calc(-1 * var(--s3));}

/* 작게 — 제목 + 핵심 숫자 하나. 칸 전체가 누르는 곳(a·button — 12px 둥근 네모 안쪽) · 숫자는 칸 폭에 맞춰 줄임(cqi · 쉼표 · 한 줄) */
.dg-sm{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0;min-height:0;margin:0;padding:var(--s4);border:0;border-radius:inherit;
  background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;overflow:hidden;container-type:inline-size;
  -webkit-tap-highlight-color:transparent;transition:background-color var(--dur-1,.14s) var(--ease,ease);}
.dg-sm:hover{background:var(--fill);}
.dg-sm:active{background:var(--fill-2);}
.dg-sm:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px;}
.dg-sm-t{display:flex;align-items:flex-start;gap:4px;min-width:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);line-height:1.3;}
.dg-sm-tt{flex:1 1 auto;min-width:0;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.dg-sm-go{flex:0 0 auto;margin-top:2px;color:var(--ink-3);}
.dg-sm-l{margin-top:auto;min-width:0;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-3);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dg-sm-l[hidden]{display:none;}
.dg-sm-l[hidden] + .dg-sm-v{margin-top:auto;}
.dg-sm-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;min-width:0;line-height:1.1;}
.dg-sm-n{font-size:44px;font-size:min(44px,30cqi);font-weight:var(--w-black);color:var(--ink);letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.dg-sm-n[data-len="4"]{font-size:34px;font-size:min(44px,24cqi);}
.dg-sm-n[data-len="5"]{font-size:28px;font-size:min(44px,19cqi);}
.dg-sm-x{flex:1 1 100%;min-width:0;font-size:24px;font-size:min(26px,16cqi);font-weight:var(--w-black);color:var(--ink);letter-spacing:-.02em;line-height:1.2;
  word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.dg-sm-x.dg-won{font-variant-numeric:tabular-nums;}
.dg-sm-u{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-3);white-space:nowrap;}
.dg-sm-wait{font-size:var(--t-md);font-weight:var(--w-reg);color:var(--ink-3);}

/* 크게 — 칸 안에 맞춘 여백(지금 카드 모양 그대로, 사이만 조금 좁게) */
.dg .box-h{margin-bottom:var(--s3);}
.dg .db-stat{margin-top:var(--s4);padding-top:var(--s3);}
.dg .db-statcard .db-stat:first-child > .db-stat-h{margin-bottom:var(--s2);}
.dg .m01-stat + .m01-stat{margin-top:var(--s3);padding-top:var(--s3);}
.dg .m01-box-t{margin-bottom:var(--s2);}
.dg .m01-tiles{margin-bottom:var(--s3);}
.dg .m01-acts{margin-bottom:var(--s3);}
.dg .m01-egg-sum{margin-bottom:var(--s3);}
@media (prefers-reduced-motion:reduce){.dg-sm{transition:none;}}
/* 크게 칸 안 빈 상태 — 큰 그림 없이 왼쪽 맞춤 한 덩어리(칸 높이가 정해져 있어 버튼이 잘리지 않게) */
.dg .empty-state{padding:var(--s2) 0;align-items:flex-start;text-align:left;gap:var(--s1);}
.dg .empty-state .es-ic{display:none;}
.dg .empty-state .btn{margin-top:var(--s1);}
.dg .db-egg-tbl .empty-state{padding:var(--s2) 0;}
/* 휴대폰 알 빈 상태 — 알 줄 목록(.eggs 음수 8) 안이라 같은 만큼 안쪽 여백(글이 제목과 같은 왼쪽 줄) */
.dg .m01-es{padding:var(--s2) var(--s2);}