feat(cupang): 달력 월 표기 확대, 출고 보기 ②를 상자 번호별 내용물 목록으로

- 달력 월 이름/연도 글자 크기 2배·굵게
- 출고 상세 ② 상자 요약 → ② 상자 목록: 전체 상자에 1번부터 번호를 붙이고
  상자마다 담긴 제품·수량을 표시. box_plan 스냅샷 우선, 없으면 계산 결과로 대체

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-01 19:49:42 +09:00
parent e49abc4b8c
commit 15947e73ed
8 changed files with 143 additions and 56 deletions
+40 -2
View File
@@ -1181,8 +1181,8 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
display: flex; align-items: baseline; gap: 6px;
padding: 0 2px 8px;
}
.cpg-mcal-mname { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.cpg-mcal-myear { font-size: 12px; color: var(--color-midtone-gray); font-family: var(--font-geist-mono); }
.cpg-mcal-mname { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.cpg-mcal-myear { font-size: 24px; font-weight: 800; color: var(--color-midtone-gray); font-family: var(--font-geist-mono); }
.cpg-mcal-total {
margin-left: auto;
font-size: 11px; padding: 2px 8px; border-radius: 999px;
@@ -1399,6 +1399,44 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
.cpg-calc-card .cpg-calc-table .cpg-calc-qty { width: 70px; max-width: 70px; margin-left: auto; }
/* 출고 보기(읽기 전용) — ③ 하단 메타 정보 */
/* ── 출고 보기 ② 상자 목록 — 상자마다 번호 + 내용물 ── */
.cpg-boxno-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cpg-boxno {
border: 1px solid var(--color-cloud-gray);
border-radius: 10px;
padding: 8px 10px;
background: #fff;
}
.cpg-boxno.is-mix { border-color: var(--color-deep-black); }
.cpg-boxno-head { display: flex; align-items: center; gap: 6px; }
.cpg-boxno-no {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; padding: 0 6px;
border-radius: 999px;
background: var(--color-deep-black); color: #fff;
font-size: 12px; font-weight: 700; font-family: var(--font-geist-mono);
}
.cpg-boxno-name { font-size: 13px; font-weight: 600; }
.cpg-boxno-tag {
font-size: 10px; padding: 1px 6px; border-radius: 999px;
background: var(--color-ghost-gray); color: var(--color-midtone-gray);
}
.cpg-boxno-qty {
margin-left: auto;
font-size: 12px; color: var(--color-midtone-gray);
font-family: var(--font-geist-mono);
}
.cpg-boxno-items { list-style: none; margin: 6px 0 0; padding: 0 0 0 30px; }
.cpg-boxno-items li {
display: flex; align-items: baseline; gap: 8px;
padding: 3px 0;
font-size: 12px;
border-bottom: 1px dashed var(--color-cloud-gray);
}
.cpg-boxno-items li:last-child { border-bottom: 0; }
.cpg-boxno-items li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpg-boxno-items li b { flex: 0 0 auto; font-family: var(--font-geist-mono); }
.cpg-view-meta {
margin: 12px 0 0; padding: 10px 12px;
border: 1px solid var(--color-subtle-ash); border-radius: 10px;