Aislo/A00_Common/formula_doc.css

/* 수식 문서 화면(802-3) — 왼쪽 기호 식 · 오른쪽 값 식 · 오른쪽 아래 기호 정의 · 색은 공통 값만 */
.fdoc {
  gap: var(--spacing-12);
}

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

.fdoc__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-12);
  align-items: flex-end;
}

.fdoc__options > * {
  width: auto;
  min-width: 8em;
}

.fdoc__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.fdoc__sumleft,
.fdoc__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}

.fdoc__headval {
  font-size: var(--text-subheading);
  font-variant-numeric: tabular-nums;
}

.fdoc__resultsym {
  width: 9em;
}

.fdoc__hint {
  margin: 0;
}

.fdoc__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-8);
  align-items: center;
}

.fdoc__marks:empty {
  display: none;
}

/* 격자 — 왼쪽 기호 식 · 오른쪽 값 식(줄마다 같은 높이) */
.fdoc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-4) var(--spacing-24);
  align-items: center;
}

.fdoc__colhead {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-4);
}

.fdoc__cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-4);
  min-width: 0;
  min-height: 32px;
}

.fdoc__sym,
.fdoc__valcell {
  cursor: text;
}

.fdoc__edit {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-4);
  min-width: 2em;
  min-height: 24px;
  border-radius: var(--radius-sm);
  padding: 0 2px;
}

.fdoc__edit:hover {
  background: var(--color-hover);
}

.fdoc__edit[data-editing] {
  outline: 1px solid var(--color-accent);
  background: var(--color-accent-soft);
}

.fdoc__edit[data-bad],
.fdoc__money[data-bad] .fdoc__name {
  text-decoration: underline wavy var(--color-danger);
}

.fdoc__raw {
  color: var(--color-danger);
}

.fdoc__atom.is-val {
  cursor: pointer;
}

.fdoc__atom.is-val:hover {
  outline: 1px solid var(--color-accent);
}

.fdoc__atom.is-missing {
  color: var(--color-danger);
}

.fdoc__lit {
  cursor: pointer;
}

.fdoc__lit[data-editing] {
  outline: 1px solid var(--color-accent);
}

.fdoc__dash {
  color: var(--color-text-muted);
}

/* 금액 줄 · 묶음 */
.fdoc__money {
  align-items: flex-start;
}

.fdoc__valcell.fdoc__money {
  flex-direction: column;
  align-items: flex-start;
}

.fdoc__mrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-4);
}

.fdoc__name {
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-sm);
}

.fdoc__name[data-editing] {
  outline: 1px solid var(--color-accent);
  padding: 0 var(--spacing-4);
}

.fdoc__cost,
.fdoc__tk {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.fdoc__tk {
  margin-left: var(--spacing-8);
}

.fdoc__amount {
  font-weight: var(--font-weight-medium, 500);
}

.fdoc__kind {
  width: 6.5em;
}

.fdoc__drop {
  opacity: 0;
}

.fdoc__money:hover .fdoc__drop,
.fdoc__drop:focus-visible {
  opacity: 1;
}

.fdoc__grouphead {
  grid-column: 1 / -1;
  padding-top: var(--spacing-8);
}

.fdoc__group {
  font-weight: var(--font-weight-medium, 500);
}

.fdoc__total {
  border-top: 1px solid var(--color-border);
}

.fdoc__total.is-end {
  border-top: 2px solid var(--color-border-strong);
}

.fdoc__add {
  color: var(--color-text-secondary);
}

/* 기호 정의 — 값 식 아래 한 줄씩(오른쪽 칸 자리) · 펼친 단가산출 블록만 격자 전체 폭 */
.fdoc__defs {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--spacing-12);
  min-width: 0;
}

.fdoc__defrow {
  border-radius: var(--radius-sm);
}

.fdoc__defrow.is-open {
  background: var(--color-surface-sunken);
  padding-bottom: var(--spacing-8);
}

.fdoc__def {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
  padding: 2px var(--spacing-4);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.fdoc__def:hover {
  background: var(--color-hover);
}

.fdoc__deflink {
  font-size: var(--text-body-sm);
}

.fdoc__defs > .fdoc__colhead,
.fdoc__def,
.fdoc__defedit,
.fdoc__unused > summary {
  margin-left: calc(50% + var(--spacing-24) / 2);
}

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

.fdoc__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  align-items: flex-end;
}

.fdoc__fields > * {
  width: auto;
}

.fdoc__fields .ui-find {
  width: 100%;
  max-height: 220px;
}

.fdoc__unused summary {
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  padding: var(--spacing-4);
}

.fdoc__sub {
  margin: var(--spacing-4) var(--spacing-8);
  padding: var(--spacing-8);
  border-left: 2px solid var(--color-accent);
}

@container (max-width: 720px) {
  .fdoc__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fdoc__defs > .fdoc__colhead,
  .fdoc__def,
  .fdoc__defedit,
  .fdoc__unused > summary {
    margin-left: 0;
  }
}

.fdoc__wrap,
.fdoc__val {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-4);
}

/* 수량 없음 = 1 — 고치는 자리만(줄에 마우스를 올릴 때 흐리게) */
.fdoc__money .is-ghost {
  opacity: 0;
}

.fdoc__money:hover .is-ghost {
  opacity: 0.45;
}