refactor(M02): 항목 카드 넷 공용 틀 CardShell (PLAN 31-7)

- 공용 틀 — 제목 줄(제목 · 저장 안 한 점 ● · 오른쪽 단추 자리) + 한 줄 부제(번호 · 이름 · 말줄임) · 상태(불러오는 중 · 실패 + 다시 불러오기 · 비었음) · [저장](늘 보임 · 고쳐야 켜짐 · 카드 안 Ctrl+S · 알림 글 한 벌) · ?(단축키 상자)
- 도면 정보 · 면적산출 · 재료산출(ItemCards) · 선택 입력(관리 화면 · 고르기 모달 값 카드)이 틀에 내용만 넣음
- 「〇〇 수정」 빈 단추 한 모양 · 엑셀 카드에도 ? · 불러오는 중 네 카드 · 실패는 카드 안 글(토스트 안 씀) · 물음 한 번(어느 카드든)
- 저장 길(saveTemplate · 도면 write · sheetEdit.save · 위 [저장] saveInputs) · 단축키는 그대로 · 고르기 모달은 보기만
- 시험 test_m02_card_shell 새로 · 옛 모양 시험 맞춤

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

M02_MasterTemplete/M02_MasterTemplete_Structure.css

@@ -64,30 +64,61 @@
   display: none;
 }
 
-.m02-struct__head,
-.m02-struct__subhead {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-12);
-  min-width: 0;
+/* 공용 카드 틀(PLAN 31-7 · CardShell) — 제목 줄 = 제목 · 점(●) · 오른쪽 단추 자리 · 부제 한 줄 = 번호 · 이름 */
+.m02-struct__card {
+  position: relative; /* ? 단축키 상자 자리 */
 }
 
-/* 머리 = 번호 · [수정] 한 줄, 이름은 그 아래 전체 폭 — 긴 이름도 잘리지 않게 줄바꿈 */
-.m02-struct__head {
-  flex-wrap: wrap;
+.m02-struct__card > .ui-collapsible__title {
+  gap: var(--spacing-8);
+}
+
+.m02-struct__dot {
+  color: var(--color-accent);
+  font-size: 0.75em;
+}
+
+.m02-struct__dot[hidden] {
+  display: none;
+}
+
+.m02-struct__card-tools {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin-left: auto;
+  font-weight: normal;
+}
+
+.m02-struct__card-tools .ui-btn {
+  white-space: nowrap;
+}
+
+.m02-struct__sub {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 넘치면 말줄임 — 번호는 그대로 · 이름 · 요약이 줄어듦 */
+.m02-struct__sub > * {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .m02-struct__title {
-  order: 1;
-  flex: 1 0 100%;
-  min-width: 0;
-  margin: 0;
+  flex: 1 1 auto;
   color: var(--color-text);
   font-size: var(--text-body);
-  overflow-wrap: anywhere; /* 이름이 길어도 잘리지 않게 줄바꿈 */
 }
 
 .m02-struct__no {
+  flex: none;
   padding: 0 var(--spacing-8);
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--color-accent) 14%, transparent);
@@ -96,15 +127,8 @@
   white-space: nowrap;
 }
 
-.m02-struct__head .ui-btn,
-.m02-struct__subhead .ui-btn {
-  margin-left: auto;
-  white-space: nowrap;
-}
-
 /* 미리보기 — 웹캐드는 높이를 부모에서 받음(`.m02-drawing` 이 flex: 1 1 0).
-   `.cad-host` 는 원래 상세 페이지 몫이라 min-height:420px 를 가짐 — 미리보기 카드 높이(24rem=384px)보다
-   커서 카드 밖으로 넘쳤음(넘침 숨김 + 강제로 0 으로 덮어씀). */
+   `.cad-host` 는 원래 상세 페이지 몫이라 min-height:420px 를 가짐 — 카드 밖으로 넘쳐 0 으로 덮어씀. */
 .m02-struct__preview {
   display: flex;
   overflow: hidden;
@@ -117,22 +141,10 @@
   min-height: 0;
 }
 
-/* 도면 카드 고치기(PLAN 31-4) — 머리 오른쪽 ? · [저장] · ? = 칸 오른쪽 위 단축키 도움말 */
-.m02-struct__tools {
-  display: inline-flex;
-  gap: var(--spacing-8);
-  margin-left: auto;
+/* ? 단축키 상자 — 카드 오른쪽 위(제목 줄 · 부제 아래 · 도면 · 엑셀 카드) */
+.m02-struct__card > .m02-struct__keys {
+  top: calc(var(--spacing-64) + var(--spacing-8));
 }
-
-.m02-struct__head .m02-struct__tools .ui-btn,
-.m02-struct__tools:not(:empty) + .ui-btn {
-  margin-left: 0;
-}
-
-.m02-struct__preview:has(.m02-struct__keys) {
-  position: relative;
-}
-
 .m02-struct__keys {
   position: absolute;
   top: var(--spacing-8);