Aislo/M01_MasterData/M01_MasterData_UI_LogicLab_Style.css

/* M01 로직 개선 시험 — 상세 화면 컨테이너 넷 · 호표 묶음 · 자료 모달 */
.m01lab__box {
  padding: var(--spacing-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* 컨테이너 넷 한 양식 — 바깥 간격 · 안쪽 칸 사이 간격 · 제목 크기(폭이 좁아도 같은 규칙) */
.m01lab__box + .m01lab__box {
  margin-top: var(--spacing-12);
}

.m01lab__box.m01-logic__section {
  gap: var(--spacing-8);
}

.m01lab__box > .m01-logic__section-head h3 {
  font-size: var(--text-body);
  font-weight: 600;
}

.m01lab__info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-8);
}

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

.m01lab__cell--wide {
  grid-column: 1 / -1;
}

.m01lab__group {
  margin: var(--spacing-8) 0 var(--spacing-4);
}

/* 칸 폭 고정(`table-layout: fixed`) — 인력·재료·경비 세 표가 저마다 딴 `<table>` 이라
   내용 기준으로 폭이 갈리던 것을 막고 셋이 같은 폭으로 맞춰짐(일감35 이어 — 수량 칸 알약화). */
.m01lab__ho {
  table-layout: fixed;
}

/* 열 = 이름 · 수량 · 단위 · 로직 · 단가 · 금액 */
.m01lab__ho th:nth-child(1) {
  width: 22%;
}

.m01lab__ho th:nth-child(2) {
  width: 9%;
}

.m01lab__ho th:nth-child(3) {
  width: 7%;
}

.m01lab__ho th:nth-child(4) {
  width: 36%;
}

.m01lab__ho th:nth-child(5),
.m01lab__ho th:nth-child(6) {
  width: 13%;
}

.m01lab__line {
  cursor: pointer;
}

.m01lab__line:hover,
.m01lab__line:focus {
  background: var(--color-paper);
}

.m01lab__line--extra {
  font-style: italic;
}

.m01lab__expr {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-body-sm);
  white-space: pre-wrap;
  word-break: break-all;
}

/* 수량 칸 — 알약 + 사칙연산 글자를 이어 붙이고, 칸 폭을 넘으면 그 칸 폭 기준으로 줄바꿈 */
.m01lab__qty-cell {
  overflow-wrap: anywhere;
}

.m01lab__qty-frags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  min-width: 0;
}

.m01lab__qty-text {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-body-sm);
  white-space: pre-wrap;
}

.m01lab__subtotal td {
  font-weight: 600;
  background: var(--color-paper);
}

.m01lab__total {
  margin: var(--spacing-8) 0 0;
  font-weight: 700;
  text-align: right;
}

.m01lab__modal {
  overflow: auto;
}

.m01lab__modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.m01lab__hit td {
  background: color-mix(in srgb, gold 45%, transparent);
  font-weight: 600;
}

.m01lab__calc > h3 {
  display: none;
}

.m01lab__text {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-body-sm);
  word-break: break-all;
  padding: var(--spacing-4) 0;
}

.m01lab__text--off {
  opacity: 0.55;
}

.m01lab__subtotal-text {
  margin: var(--spacing-4) 0;
  font-weight: 600;
  text-align: right;
}

/* 복사해서 만들기(3-4) — 별칭 꼴 식 시트 */
.ui-modal.m01copy__sheet {
  width: min(1040px, 94vw);
  --modal-max: 90vh;
}

.m01copy__head {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-8);
}

.m01lab__own > :first-child {
  display: none;
}

.m01lab__edit {
  margin-top: var(--spacing-12);
}

/* 시험 계산 — 재료 · 기계 고르기 표 모달 */
.ui-modal.m01-logic__pick--table {
  width: min(1040px, 94vw);
}

.m01lab__pickrow {
  cursor: pointer;
}

.m01lab__pickrow:hover,
.m01lab__pickrow.is-picked {
  background: var(--color-paper);
}

.m01lab__pickrow.is-picked {
  font-weight: 600;
}

/* 보기 고르기(710-2 · `_View.ts`) — 그릇 data-view 와 다른 이름표 덩이는 숨김(시험 계산은 숨어도 돎) */
.m01-logic__editor[data-view="ho"] [data-block]:not([data-block="ho"]),
.m01-logic__editor[data-view="est"] [data-block]:not([data-block="est"]),
.m01-logic__editor[data-view="calc"] [data-block]:not([data-block="calc"]),
.m01-logic__editor[data-view="formula"] [data-block]:not([data-block="formula"]) {
  display: none;
}

/* 기본정보 — 늘 맨 위 접힌 한 줄 */
.m01lab__infofold > summary {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  cursor: pointer;
}

.m01lab__infofold[open] > summary {
  margin-bottom: var(--spacing-8);
}

/* 상세 머리 「지금 입력」 한 줄 */
.m01lab__now {
  margin: 0;
}

/* 재료 모달(711-2) — 위 물가 넷 가로 · 시험 계산이 쓴 값만 굵게 · 후보 목록은 모달 안 스크롤 */
.m01lab__slots .ui-stat:not(.is-used) .ui-stat__value {
  font-weight: 400;
}

.m01lab__cands {
  max-height: 40vh;
  overflow: auto;
}

/* 714-2 「인력·재료·경비」 — 공용 계산서 줄을 세로로 */
.m01lab-est {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

/* 722-1 공용 단가산출 상세 — 하위 박스(카드) 안 · 옵션 줄 · 표 사이 간격 · 맨 아래 비목 소계 */
.m01lab__ho-box > .ui-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

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

/* 722-2 줄 모달 「그 자리 고침」 */
.m01lab-cover {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.m01lab-cover__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-8);
}

.m01lab-cover__actions {
  display: flex;
  gap: var(--spacing-8);
}

.m01lab__ho-box .ui-card__title {
  font-size: var(--text-body);
  font-weight: 600;
}