/* 수식 문서 화면(802-3 · 803-2a) — 세 영역 가로(기호 식 수식 영역 | 값 식 | 기호 정의) · 맨 아래 합계 상자 · 색은 공통 값만 */
.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__resultsym {
  width: 9em;
}

/* 세 영역 — 기호 식 · 값 식(격자 두 칸 · 줄마다 같은 높이) | 기호 정의 */
.fdoc__areas {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--spacing-24);
  align-items: start;
}

.fdoc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--spacing-24);
  align-items: stretch;
}

.fdoc__side {
  min-width: 0;
}

/* 기호 식 = 하나의 수식 영역 · 값 식 = 같은 높이 줄 — 줄 칸이 이어진 한 상자씩 */
.fdoc__area,
.fdoc__val {
  min-height: 32px;
  padding: 2px var(--spacing-8);
  border-inline: 1px solid var(--color-border);
}

.fdoc__area {
  background: var(--color-surface-sunken);
}

.fdoc__area.is-top,
.fdoc__val.is-top {
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding-top: var(--spacing-8);
}

.fdoc__area.is-bottom,
.fdoc__val.is-bottom {
  border-bottom: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding-bottom: var(--spacing-8);
}

.fdoc__area.is-top.is-bottom,
.fdoc__val.is-top.is-bottom {
  border-radius: var(--radius-sm);
}

.fdoc__blank {
  cursor: text;
}

.fdoc__blank.is-alone,
.fdoc__blank.is-alone + .fdoc__val {
  min-height: 120px;
}

.fdoc__symhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 32px;
}

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

.fdoc__colhead {
  align-self: end;
  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__grouphead {
  padding-top: var(--spacing-8);
}

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

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

/* 기호 정의 — 오른쪽 영역 한 줄씩(머리 아래 한 상자) */
.fdoc__defs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fdoc__defs > .fdoc__colhead {
  min-height: 32px;
  display: flex;
  align-items: flex-end;
}

.fdoc__defs > .fdoc__colhead + * {
  margin-top: var(--spacing-4);
}

.fdoc__side {
  min-height: 120px;
}

.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__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: 900px) {
  .fdoc__areas {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

/* 수식 영역 편집기(803-2a · `formula_doc_math.ts`) — 치는 대로 조판 · 커서 · 숨은 글 칸 */
.fdoc-math {
  position: relative;
  cursor: text;
}

/* 편집 중 줄 = 그 줄 너비 전부(빈 줄도 입력 칸이 보임 · 줄은 넘칠 때만 꺾임) */
.fdoc__edit.fdoc-math,
.fdoc__edit.fdoc-math > .fdoc-math__view,
.fdoc__edit.fdoc-math > .fdoc-math__view > .fdoc-math__row {
  flex: 1 1 auto;
}

.fdoc-math__view,
.fdoc-math__row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
}

.fdoc-math__view > .fdoc-math__row {
  flex-wrap: wrap;
}

.fdoc-math .ui-eq__op {
  padding: 0 var(--spacing-4);
}

.fdoc-math__latin {
  font-style: italic;
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
}

.fdoc-math__row.is-empty {
  min-width: 0.8em;
  min-height: 1.1em;
  outline: 1px dashed var(--color-border-strong);
}

.fdoc-math__caret {
  display: inline-block;
  width: 0;
  height: 1.2em;
  margin-right: -1.5px;
  border-left: 1.5px solid var(--color-text-body);
  animation: fdoc-math-blink 1s steps(1) infinite;
}

@keyframes fdoc-math-blink {
  50% {
    opacity: 0;
  }
}

.fdoc-math__ime {
  text-decoration: underline;
}

.fdoc-math.is-all .fdoc-math__view {
  background: var(--color-accent-soft);
}

.fdoc-math__sink {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1em;
  padding: 0;
  border: 0;
  opacity: 0;
  resize: none;
  overflow: hidden;
  pointer-events: none;
}