feat(m01-sl): 시트 로직 표 상자 손잡이 Table 초안 — 품셈 표 가져오기 · 내 표 · 찾기 수식 짜기

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019ACSGaHdLgnkEkoA4LDtMU
2026-10-01 13:08:02 +09:00
parent 62fa53e927
commit 7bd6e8d7d1
4 changed files with 1371 additions and 0 deletions
@@ -0,0 +1,138 @@
+.m01-sltbl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  min-width: 0;
+  color: var(--color-text);
+}
+.m01-sltbl__muted {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-body-sm);
+}
+.m01-sltbl__box {
+  padding: var(--spacing-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface);
+}
+.m01-sltbl__box > summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+.m01-sltbl__box[open] > summary {
+  margin-bottom: var(--spacing-8);
+}
+.m01-sltbl__box > :not(summary) {
+  margin-top: var(--spacing-8);
+}
+.m01-sltbl__info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+.m01-sltbl__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  max-height: 22vh;
+  overflow: auto;
+}
+.m01-sltbl__row,
+.m01-sltbl__role {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--spacing-8) var(--spacing-12);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.m01-sltbl__row:hover,
+.m01-sltbl__row:focus-visible,
+.m01-sltbl__role:hover,
+.m01-sltbl__role:focus-visible {
+  border-color: var(--color-accent);
+}
+.m01-sltbl__roles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+}
+.m01-sltbl__roles > p {
+  flex: 1 0 100%;
+}
+.m01-sltbl__role span {
+  font-size: var(--text-caption);
+  color: var(--color-text-secondary);
+}
+.m01-sltbl__role.is-cond {
+  border-color: var(--color-accent);
+}
+.m01-sltbl__role.is-out {
+  border-style: dashed;
+  border-color: var(--color-accent);
+}
+.m01-sltbl__role.is-off {
+  opacity: 0.6;
+}
+.m01-sltbl__status {
+  margin: 0;
+  padding: var(--spacing-4) var(--spacing-8);
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+}
+.m01-sltbl__status.is-ok {
+  border-left: 4px solid var(--color-accent);
+}
+.m01-sltbl__status.is-bad {
+  border-left: 4px solid var(--color-danger);
+  color: var(--color-danger);
+}
+.m01-sltbl__scroll {
+  max-height: 24vh;
+  overflow: auto;
+}
+.m01-sltbl__view table {
+  border-collapse: collapse;
+  font-size: var(--text-body-sm);
+}
+.m01-sltbl__view th,
+.m01-sltbl__view td {
+  padding: 2px 8px;
+  border: 1px solid var(--color-border);
+  white-space: nowrap;
+  text-align: center;
+}
+.m01-sltbl__view tr.is-hit td {
+  background: rgba(240, 190, 40, 0.35);
+  font-weight: 700;
+}
+.m01-sltbl__formula {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.m01-sltbl__formula code {
+  overflow-wrap: anywhere;
+  font-size: var(--text-caption);
+}
+.m01-sltbl__warn {
+  margin: 0;
+  color: var(--color-danger);
+  font-size: var(--text-body-sm);
+}
+.m01-sltbl__paste {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+}
+.m01-sltbl h5 {
+  margin: var(--spacing-4) 0 0;
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-sm);
+}