feat(M01-시트로직): 아래 시트 판 Panel 추가 - 시트 편집기 · 입력/출력 알약 · 받는 칸 잠금 · 틀 단추 · 한 줄 오류

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01D2nUMUMTsqm93PbQtipo6c
2026-10-01 13:05:55 +09:00
parent 6ec2142d6f
commit 50ecb5abed
2 changed files with 716 additions and 0 deletions
@@ -0,0 +1,172 @@
+.m01-slpanel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  font-size: var(--text-body);
+  color: var(--color-text-body);
+}
+
+.m01-slpanel-head,
+.m01-slpanel-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.m01-slpanel-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.m01-slpanel-cell {
+  padding: 2px var(--spacing-12);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-pills);
+  background: var(--color-surface-raised);
+}
+
+.m01-slpanel-note {
+  color: var(--color-text-muted);
+  font-size: var(--text-body-sm);
+}
+
+.m01-slpanel .ui-btn,
+.m01-slpanel .ui-input {
+  min-height: 44px;
+  font-size: var(--text-body);
+}
+
+.m01-slpanel-name {
+  flex: none;
+  width: 12em;
+}
+
+.m01-slpanel-msg {
+  margin: 0;
+  padding: var(--spacing-8) var(--spacing-12);
+  border-left: 4px solid var(--color-warning);
+  background: var(--color-surface-raised);
+  font-weight: var(--font-weight-medium);
+}
+
+.m01-slpanel-sheet {
+  position: relative;
+  min-height: 260px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  overflow: hidden;
+}
+
+.m01-slpanel-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+}
+
+.m01-slpanel-pill,
+.m01-slpanel-dir {
+  min-height: 44px;
+  padding: 0 var(--spacing-12);
+  border: 2px solid;
+  border-radius: var(--radius-pills);
+  background: var(--color-surface);
+  color: inherit;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+}
+
+.m01-slpanel-dir {
+  display: inline-flex;
+  align-items: center;
+  min-height: 0;
+  cursor: default;
+}
+
+.m01-slpanel-pill:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+}
+
+.m01-slpanel-pill.is-on {
+  background: var(--color-surface-raised);
+  font-weight: var(--font-weight-bold);
+}
+
+.is-in {
+  border-color: #3b82f6;
+}
+
+.is-out {
+  border-color: #f59e0b;
+}
+
+.m01-slpanel-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: var(--spacing-12);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface-raised);
+}
+
+.m01-slpanel-infoline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+}
+
+.m01-slpanel-infoline > .m01-slpanel-note {
+  min-width: 6em;
+}
+
+/* 칸 위 알약 표시 — 색 + 글자(입력 · 출력) 둘 다 */
+.m01-slpanel .aislo-cell[data-sl-pill="in"] {
+  box-shadow: inset 0 0 0 2px #3b82f6;
+}
+
+.m01-slpanel .aislo-cell[data-sl-pill="out"] {
+  box-shadow: inset 0 0 0 2px #f59e0b;
+}
+
+.m01-slpanel .aislo-cell[data-sl-pill]::after {
+  content: attr(data-sl-name);
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 4px;
+  border-radius: 0 0 0 6px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 10px;
+  line-height: 14px;
+  pointer-events: none;
+}
+
+.m01-slpanel .aislo-cell[data-sl-pill="in"]::after {
+  border: 1px solid #3b82f6;
+}
+
+.m01-slpanel .aislo-cell[data-sl-pill="out"]::after {
+  border: 1px solid #f59e0b;
+}
+
+.m01-slpanel .aislo-cell[data-sl-lock]::before {
+  content: "🔒 " attr(data-sl-lock);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 0 4px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 10px;
+  line-height: 14px;
+  pointer-events: none;
+}
+
+.m01-slpanel .aislo-cell[data-sl-err] {
+  outline: 2px dashed var(--color-danger);
+  outline-offset: -2px;
+}