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_Logic_Style.css

@@ -54,18 +54,6 @@
   background: var(--color-surface);
 }
 
-.m01-logic__filters {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-}
-
-.m01-logic__check {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-}
-
 .m01-logic__bar {
   display: flex;
   align-items: center;
@@ -79,10 +67,6 @@
   color: var(--color-text);
 }
 
-.m01-logic__empty {
-  color: var(--color-text-muted);
-}
-
 .m01-logic__head {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@@ -156,23 +140,9 @@ input.m01-logic__input {
   color: var(--color-text);
 }
 
-.m01-logic__grid {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.m01-logic__grid th,
+/* 겉 = 표 부품 데이터표(ui-table--data · 줄 28) · 여기는 위 맞춤만 */
 .m01-logic__grid td {
-  padding: 2px 4px;
-  border-bottom: 1px solid var(--color-border);
   vertical-align: top;
-  text-align: left;
-}
-
-.m01-logic__grid th {
-  color: var(--color-text-secondary);
-  font-size: var(--text-caption);
-  font-weight: 600;
 }
 
 .m01-logic__grid th,
@@ -245,15 +215,6 @@ input.m01-logic__input {
   width: 64px;
 }
 
-.m01-logic__tag {
-  flex: none;
-  padding: 0 6px;
-  border-radius: var(--radius-pills);
-  background: var(--color-mist-violet);
-  color: var(--color-accent);
-  font-size: var(--text-caption);
-}
-
 .m01-logic__money {
   display: block;
   text-align: right;
@@ -261,11 +222,6 @@ input.m01-logic__input {
   white-space: nowrap;
 }
 
-.m01-logic__muted {
-  color: var(--color-text-muted);
-  font-size: var(--text-caption);
-}
-
 /* 목록 「별칭」 칸(208-1) — 칸 안 글 상자 · 테두리는 올렸을 때만 */
 .m01-logic__alias {
   width: 160px;
@@ -283,29 +239,10 @@ input.m01-logic__input {
   background: var(--color-canvas);
 }
 
-.m01-logic__bad {
-  color: var(--color-danger);
-  font-size: var(--text-caption);
-}
-
-.m01-logic__drop {
-  border: 0;
-  background: none;
-  color: var(--color-text-muted);
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.m01-logic__drop:hover {
-  color: var(--color-danger);
-}
-
+/* 겉 = 띠 알림 부품(ui-banner--danger) · 여기는 제목 · 까닭 줄 쌓기만 */
 .m01-logic__reasons {
-  padding: var(--spacing-8);
-  border-left: 3px solid var(--color-danger);
-  border-radius: var(--radius-sm);
-  background: var(--color-canvas);
-  color: var(--color-danger);
+  flex-direction: column;
+  gap: 2px;
 }
 
 .m01-logic__sums {
@@ -330,31 +267,7 @@ input.m01-logic__input {
   gap: var(--spacing-8);
 }
 
-.m01-logic__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  background-color: rgba(38, 17, 74, 0.35); /* 공용 창 틀과 같이 뒤를 가림 */
-}
-
-.m01-logic__pick {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  width: min(720px, 92vw);
-  /* 위에서 고정 거리 — 공용 .ui-modal 과 같은 규칙(찾기 칸이 안 움직임) */
-  max-height: var(--modal-max, 80vh);
-  margin-top: calc((100dvh - var(--modal-max, 80vh)) / 2);
-  padding: var(--spacing-16);
-  border-radius: var(--radius-xl);
-  border: 1px solid var(--color-border);
-  background: var(--color-surface-raised);
-  box-shadow: var(--shadow-lg);
-  font-size: var(--text-body-sm);
-}
+/* 고르기 창 = 모달 부품(ui-modal · 720 · 위 고정) — 여기는 덧붙임 없음 · 표 · 복사 창만 폭 곁값 */
 
 .m01-logic__pick-bar {
   display: grid;
@@ -367,6 +280,7 @@ input.m01-logic__input {
   overflow: auto;
 }
 
+/* 고르는 줄 = 목록 줄 부품(button) · 열 고르기 줄(div)만 아래 선 */
 .m01-logic__pick-row {
   display: flex;
   align-items: center;
@@ -374,20 +288,9 @@ input.m01-logic__input {
   gap: var(--spacing-8);
   width: 100%;
   padding: var(--spacing-4) var(--spacing-8);
-  border: 0;
+}
+div.m01-logic__pick-row {
   border-bottom: 1px solid var(--color-border);
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-}
-
-.m01-logic__pick-row--button {
-  cursor: pointer;
-}
-
-.m01-logic__pick-row--button:hover {
-  background: var(--color-paper);
 }
 
 .m01-logic__chips {