/* 수식 문서 화면(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 { 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__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__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; }