Aislo/M01_MasterData/LogicBuilder/M01_LB_Entry.css

/* 로직 만들기 판 — 큰 창 · 시작 화면 · 위 띠 · 세 칸 */

/* 공용 모달(위 고정)을 화면 대부분으로 — 높이 고정 · 칸마다 따로 굴림 */
.ui-modal.m01-lb {
  --modal-max: 92vh;
  width: min(1680px, 98vw);
  height: var(--modal-max);
  font-size: var(--text-body);
}

.m01-lb .ui-modal__body {
  flex: 1;
  min-height: 0;
  gap: var(--spacing-12);
}

.m01-lb__muted {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.m01-lb__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  white-space: pre-line;
}

.m01-lb__note:empty {
  display: none;
}

.m01-lb__big {
  min-height: 56px;
  padding: 0 var(--spacing-24);
  font-size: var(--text-body);
}

.m01-lb .is-pending {
  opacity: 0.45;
}

/* 시작 화면 */
.m01-lb__start {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--spacing-24);
  min-height: 0;
  overflow: auto;
}

.m01-lb__start-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
}

.m01-lb__start-col h4 {
  margin: var(--spacing-8) 0 0;
}

.m01-lb__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.m01-lb__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.m01-lb__item:hover {
  border-color: var(--color-accent);
}

.m01-lb__item-name {
  flex: 1;
  min-width: 0;
}

.m01-lb__item-unit {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  white-space: nowrap;
}

/* 위 띠 */
.m01-lb__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-12);
  padding-bottom: var(--spacing-12);
  border-bottom: 1px solid var(--color-border);
}

.m01-lb__name {
  flex: 1 1 280px;
}

.m01-lb__applied {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  white-space: nowrap;
}

.m01-lb__actions {
  display: flex;
  gap: var(--spacing-8);
  margin-left: auto;
}

/* 세 칸 — 원문 · 산출근거 · 결과 */
.m01-lb__cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--spacing-12);
}

.m01-lb__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.m01-lb__col-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12);
  border-bottom: 1px solid var(--color-border);
}

.m01-lb__col-head h4 {
  flex: 1;
  margin: 0;
}

.m01-lb__col-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-12);
}

.m01-lb__col-body h5 {
  margin: var(--spacing-8) 0 0;
}

.m01-lb__total {
  font-size: var(--text-subheading);
  font-weight: 700;
}

.m01-lb__examples {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.m01-lb__example-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.m01-lb__example {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  font-size: var(--text-body-sm);
}

/* 좁은 화면 — 세 칸을 위아래로 */
@media (max-width: 1100px) {
  .m01-lb__cols {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }
}

/* 결과 칸 — 빈틈 검사 · 기대값 시험표 */
.m01-lb__check {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border);
}

.m01-lb__check-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.m01-lb__check-out ul {
  margin: 0;
  padding-left: var(--spacing-16);
  font-size: var(--text-body-sm);
}

.m01-lb__expect-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto auto;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
}

.m01-lb__expect-row .is-ok {
  color: var(--color-success, var(--color-text));
  font-weight: 600;
}

.m01-lb__expect-row .is-bad {
  color: var(--color-danger);
  font-weight: 600;
}