feat(m02-cf): 단가산출 다이어그램 단추 · 시험판 페이지 · 시작 화면 · 고치는 화면 틀(1걸음)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016PSXsvyDxjNmufteN5bqmt
2026-10-01 16:01:49 +09:00
parent 5701d671d8
commit b0d908c68b
3 changed files with 419 additions and 0 deletions
@@ -0,0 +1,155 @@
+/* 단가산출 다이어그램 — 화면 전체를 덮는 시험판 페이지 · 페이지 하나만 세로로 밀림(안쪽 스크롤 없음) */
+
+.m02-cf {
+  position: fixed;
+  inset: 0;
+  z-index: 1000; /* 공용 모달과 같은 층 — 뒤에 여는 물음 · 고르기 창은 그 위(--z-confirm 1050) */
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: var(--color-canvas);
+  color: var(--color-text);
+  font-size: var(--text-body);
+}
+
+.m02-cf:focus {
+  outline: none;
+}
+
+.m02-cf__muted {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-body-sm);
+}
+
+/* 위 띠 — 밀어도 위에 붙어 있음 */
+.m02-cf__head {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--spacing-12);
+  padding: var(--spacing-12) var(--spacing-24);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface-raised);
+}
+
+.m02-cf__title {
+  margin: 0;
+  font-size: var(--text-subheading);
+}
+
+.m02-cf__trial {
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-sm);
+}
+
+.m02-cf__strip {
+  display: flex;
+  flex: 1 1 480px;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--spacing-12);
+}
+
+.m02-cf__name {
+  flex: 1 1 260px;
+}
+
+.m02-cf__actions {
+  display: flex;
+  gap: var(--spacing-8);
+  margin-left: auto;
+}
+
+.m02-cf__body {
+  padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
+}
+
+.m02-cf__big {
+  min-height: 56px;
+  padding: 0 var(--spacing-24);
+  font-size: var(--text-body);
+}
+
+/* 시작 화면 */
+.m02-cf__start {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--spacing-24);
+}
+
+.m02-cf__start-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.m02-cf__start-col h3 {
+  margin: var(--spacing-8) 0 0;
+}
+
+/* 고치는 화면 — 위 다이어그램(크게) · 아래 고른 상자 판(크게) + 원가 */
+.m02-cf__layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+
+.m02-cf__part {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+}
+
+.m02-cf__part h3 {
+  margin: 0;
+  padding: var(--spacing-8) var(--spacing-12);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.m02-cf__part-body {
+  padding: var(--spacing-12);
+}
+
+.m02-cf__diagram .m02-cf__part-body {
+  min-height: 60vh;
+}
+
+.m02-cf__lower {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
+  gap: var(--spacing-16);
+  align-items: start;
+}
+
+.m02-cf__box .m02-cf__part-body {
+  min-height: 50vh;
+}
+
+.m02-cf__box-slots {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--spacing-12);
+}
+
+.m02-cf__slot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.m02-cf__slot h4 {
+  margin: 0;
+}
+
+@media (max-width: 1100px) {
+  .m02-cf__lower,
+  .m02-cf__start,
+  .m02-cf__box-slots {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}