refactor(M01): 표 · 모달 · 띠 알림 · 배지 · 알약 · 보조 글 · 빈 상태를 부품으로 (PLAN 553-5)

- 표 둘 = 표 부품(m01-master__grid = 일반표 · m01-logic__grid = 데이터표) · 페이지 CSS 는 폭 · 머리 고정 · 칸 상태만
- 손 모달 다섯(조달 찾기 · 요소 고르기 · 표 바꾸기 · 복사 시트 · 표 고르기) = 모달 부품 openModal
- 알림 띠 · 막힘 까닭 = 띠 알림 · 태그 = 배지 · 알약 · × · 삭제 · 로직 키 = 단추 부품 · muted 세 벌 = 보조 글 · 빈 줄 = 빈 상태
- M02 가 빌린 M01 클래스(표 · muted · 고르기 창)도 같은 부품으로 · 죽은 CSS 걷음 · 지킴 시험 test_553_5_m01_m02

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

M01_MasterData/M01_MasterData_UI_Style.css

@@ -17,12 +17,6 @@
   color: var(--color-accent);
 }
 
-.m01-side__muted,
-.m01-master__muted {
-  color: var(--color-text-muted);
-  font-size: var(--text-caption);
-}
-
 /* ── 우측 ── */
 .m01-master__panel {
   display: flex;
@@ -58,17 +52,12 @@ html.is-bm-route .m01-master__headbox {
   font-weight: var(--font-weight-bold);
 }
 
+/* 겉 = 띠 알림 부품(ui-banner--danger) · 여기는 쌓기 · 높이만 */
 .m01-master__notice {
-  display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
-  padding: var(--spacing-8) var(--spacing-12);
   max-height: 30vh;
   overflow: auto;
-  border-left: 4px solid var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-canvas));
-  color: var(--color-danger);
-  font-size: var(--text-body-sm);
 }
 
 .m01-master__notice p {
@@ -95,25 +84,20 @@ html.is-bm-route .m01-master__headbox {
   min-width: 0;
 }
 
+/* 겉 = 표 부품(ui-table-wrap · ui-table) · 여기는 높이 · 폭 · 머리 고정 · 칸 상태만 */
 .m01-master__grid-wrap {
   max-height: calc(100dvh - 300px);
   overflow: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
 }
 
-.m01-master__grid {
-  border-collapse: collapse;
-  font-size: var(--text-body-sm);
+table.m01-master__grid {
+  width: auto;
 }
 
 .m01-master__grid th,
 .m01-master__grid td {
   max-width: 320px;
-  padding: var(--spacing-8) var(--spacing-12);
   overflow: hidden;
-  border-bottom: 1px solid var(--color-border);
-  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -122,9 +106,7 @@ html.is-bm-route .m01-master__headbox {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--color-surface);
-  color: var(--color-text-secondary);
-  font-weight: var(--font-weight-medium);
+  background: var(--color-surface-raised);
 }
 
 .m01-master__grid td.is-editable {
@@ -161,77 +143,29 @@ html.is-bm-route .m01-master__headbox {
   cursor: pointer;
 }
 
-.m01-master__table-row:hover {
-  background: var(--color-paper);
-}
-
 .m01-master__table-row.is-changed {
   background: color-mix(in srgb, var(--color-warning) 28%, var(--color-canvas));
 }
 
-.m01-master__empty {
-  color: var(--color-text-muted);
-}
-
-.m01-master__logic-key {
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-accent);
-  font: inherit;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-/* 조달 찾기 모달 */
-.m01-procure {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.45);
-}
-.m01-procure__box {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: min(640px, 92vw);
-  max-height: 80vh;
-  margin-top: 10vh; /* 위에서 고정 거리 — 찾기 칸이 안 움직임 */
-  padding: 16px;
-  border-radius: 8px;
-  background: var(--color-surface, #fff);
-}
+/* 조달 찾기 = 모달 부품(40rem) · 줄 = 목록 줄 부품 — 여기는 줄 안 세 줄 쌓기 · 목록 높이만 */
 .m01-procure__list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--spacing-4);
   overflow-y: auto;
   min-height: 120px;
 }
 .m01-procure__item {
-  display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 6px 8px;
-  border: 1px solid var(--color-border, #ccc);
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-}
-.m01-procure__foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+  gap: 0;
+  padding-block: var(--spacing-4);
 }
 
 .m01-procure__cond {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--spacing-8);
 }
 
 .m01-side__filter {