feat(M01): 로직 개선 시험 「식으로 새로 만들기」 화면 — 식 적기 · 분석 · 변수 정하기 · 막힌 자리 짚기 · 시험 계산 · 저장 (PLAN 3-3)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PAdA5ThqmtVSsbzjusk1cJ
2026-09-21 20:13:05 +09:00
parent b639726e11
commit e9447ae72f
8 changed files with 944 additions and 5 deletions
@@ -0,0 +1,105 @@
+/* M01 로직 개선 시험 — 식으로 새 로직 만들기 (좁은 화면에서도 한 칸으로 쌓임) */
+.m01lab-new {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  min-width: 0;
+}
+
+.m01lab-new__step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+.m01lab-new__text {
+  width: 100%;
+  min-height: 140px;
+  padding: var(--spacing-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: var(--text-body);
+  resize: vertical;
+}
+
+.m01lab-new__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.m01lab-new__vars {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.m01lab-new__var {
+  padding: var(--spacing-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.m01lab-new__var-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-8);
+}
+
+.m01lab-new__var-body {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-8);
+}
+
+.m01lab-new__wide {
+  flex: 1 1 220px;
+}
+
+.m01lab-new__picked {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+.m01lab-new__src {
+  display: flex;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4) var(--spacing-8);
+  border-radius: var(--radius-lg);
+  background: var(--color-paper);
+  overflow-x: auto;
+}
+
+.m01lab-new__no {
+  flex: 0 0 auto;
+  color: var(--color-text-secondary);
+}
+
+.m01lab-new__src mark {
+  background: var(--color-danger);
+  color: var(--color-bg);
+  border-radius: 2px;
+}
+
+.m01lab-new__bad {
+  color: var(--color-danger);
+}
+
+.m01lab-new__soft {
+  color: var(--color-text-secondary);
+}
+
+.m01lab-new__calc {
+  min-width: 0;
+}