/* 회계매크로 「엑셀에서 이렇게 바뀝니다」 — motion.css 의 토큰 위에 얹는다. 모든 규칙은 .am-docs .am-fl 아래로만(전역 강제 지정 없음).
   기본값이 「끝난 상태」(결과 칸이 모두 채워짐)라 스크립트가 없거나 움직임 줄이기에서도 완성된 그림과 등록 범위 목록이 읽힌다.
   화살표·값 칩·등록 범위 테두리는 flows.js 가 시간 계산으로 그린다(CSS 애니메이션은 칸이 나타나는 짧은 효과뿐). */

.am-docs .am-fl {
  position: relative; min-width: 0; padding: 14px; container-type: inline-size;
  border: 1px solid var(--am-line); border-radius: 16px; background: var(--am-card);
  --fl-new: var(--am-green-wash); --fl-new-line: #a9cdb8;
}
.am-docs .am-fl-title { margin: 0 0 8px; color: var(--am-ink); font-size: 16px; font-weight: 800; line-height: 1.4; }
.am-docs .am-fl-steps { margin-top: 0; }
.am-docs .am-fl-summary { margin: 10px 0 12px; color: var(--am-ink); font-size: 14px; font-weight: 700; line-height: 1.6; }

/* ── 본문 배치: 표(들) + 실행(단추·작업창 그림) ── */
.am-docs .am-fl-main { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; align-items: start; }
.am-docs .am-fl-body { position: relative; min-width: 0; padding: 30px 34px 6px 26px; clip-path: inset(-120px 0 -120px -120px); }
.am-docs .am-fl-views { display: grid; gap: 14px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.am-docs .am-fl-col { display: grid; gap: 14px; min-width: 0; align-content: start; grid-template-columns: minmax(0, 1fr); }
.am-docs .am-fl-view { position: relative; z-index: 1; margin: 0; min-width: 0; background: var(--am-card); transition: opacity .45s var(--am-ease); }
.am-docs .am-fl-view.is-late { opacity: .42; }
.am-docs .am-fl-view figcaption { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 0 0 6px 6px; background: #e8f1ec; color: var(--am-excel); font-size: 12px; font-weight: 700; }
.am-docs .am-fl-view--input figcaption { background: var(--am-blue-wash); color: var(--am-blue-deep); }

.am-docs .am-fl-filebar { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; margin-bottom: 4px; }
.am-docs .am-fl-file { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border: 1px solid var(--am-line); border-radius: 999px; background: #fff; color: var(--am-muted); font-size: 12px; font-weight: 700; }
.am-docs .am-fl-file b { color: var(--am-ink); font-weight: 800; }
.am-docs .am-fl-file em { padding: 0 7px; border-radius: 999px; background: var(--am-excel); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.am-docs .am-fl-file.is-new { border-color: var(--fl-new-line); background: var(--fl-new); color: var(--am-excel); transition: opacity .4s var(--am-ease), transform .4s var(--am-ease); }

.am-docs .am-fl-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.am-docs .am-fl-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid #c9d2e3; border-bottom: 0; border-radius: 6px 6px 0 0;
  background: var(--am-mist); color: var(--am-muted); font-size: 12px; font-weight: 700; line-height: 1.5;
  transition: opacity .4s var(--am-ease), transform .4s var(--am-ease);
}
.am-docs .am-fl-tab.is-on { background: #fff; color: var(--am-excel); border-top: 2px solid var(--am-excel); font-weight: 800; }
.am-docs .am-fl-tab.is-new { border-color: var(--fl-new-line); }
.am-docs .am-fl-tab em { padding: 0 7px; border-radius: 999px; background: var(--am-excel); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.am-docs .am-fl-tab.is-late, .am-docs .am-fl-file.is-late { opacity: 0; transform: translateY(6px) scale(.85); }

.am-docs .am-fl-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #c9d2e3; border-radius: 0 6px 0 6px; background: #fff; }
.am-docs .am-fl-view--result .am-fl-scroll { border-color: var(--am-excel); }
.am-docs .am-fl-grid { width: 100%; min-width: 0; margin: 0; border-collapse: collapse; background: #fff; font-size: 13px; line-height: 1.35; }
.am-docs .am-fl-grid th, .am-docs .am-fl-grid td { padding: 4px 8px; border: 1px solid #dde3ef; white-space: normal; max-width: 9em; word-break: keep-all; overflow-wrap: normal; vertical-align: middle; font-weight: 400; color: var(--am-ink); }
.am-docs .am-fl-grid thead th { background: #f1f3f7; color: #56627a; font-size: 12px; font-weight: 600; text-align: center; }
.am-docs .am-fl-grid .am-fl-rn { width: 30px; min-width: 30px; padding: 4px 3px; background: #f1f3f7; color: #56627a; font-size: 12px; font-weight: 600; text-align: center; }
.am-docs .am-fl-grid .am-fl-c { position: relative; text-align: left; }
.am-docs .am-fl-grid .am-fl-c.is-head { background: #f7f9fc; font-weight: 700; }
.am-docs .am-fl-grid .am-fl-c.is-num, .am-docs .am-fl-grid .am-fl-c.is-formula { text-align: right; font-variant-numeric: tabular-nums; }
.am-docs .am-fl-grid .am-fl-v { display: block; min-height: 1.35em; }
.am-docs .am-fl-grid .am-fl-fx { display: block; margin-top: 1px; color: var(--am-muted); font-family: var(--am-mono); font-size: 11px; font-weight: 400; }

/* 결과 칸: 새로 생김(초록) · 바뀜(호박) — 색만이 아니라 아래 범례 글자와 접근성 글자를 같이 쓴다 */
.am-docs .am-fl-grid .am-fl-c.is-new { background: var(--fl-new); border-color: var(--fl-new-line); font-weight: 700; }
.am-docs .am-fl-grid .am-fl-c.is-changed { background: var(--am-amber-wash); border-color: #e3c78a; font-weight: 700; }
.am-docs .am-fl-grid .am-fl-b { display: block; color: var(--am-muted); font-size: 11px; font-weight: 400; text-decoration: line-through; text-decoration-color: rgba(85, 98, 125, .55); }
/* 실행 전: 새 칸은 점선 「결과 자리」, 바뀔 칸은 이전 글자만 */
.am-docs .am-fl-grid .am-fl-c.is-slot {
  background: repeating-linear-gradient(45deg, #fff, #fff 5px, var(--am-mist) 5px, var(--am-mist) 10px);
  outline: 1.5px dashed #8fb5a1; outline-offset: -2px;
}
.am-docs .am-fl-grid .am-fl-c.is-slot .am-fl-v { visibility: hidden; }
.am-docs .am-fl-grid .am-fl-c.is-pre { background: #fff; font-weight: 400; }
.am-docs .am-fl-grid .am-fl-c.is-pre .am-fl-v, .am-docs .am-fl-grid .am-fl-c.is-pre .am-fl-fx { visibility: hidden; }
.am-docs .am-fl-grid .am-fl-c.is-pre .am-fl-b { position: absolute; left: 8px; right: 8px; top: 4px; color: var(--am-ink); font-size: 13px; text-decoration: none; }
.am-docs .am-fl-grid .am-fl-c.is-num.is-pre .am-fl-b { text-align: right; }
.am-docs .am-fl-grid .am-fl-c.is-crossing .am-fl-v { animation: am-fl-in .5s var(--am-ease) both; }
.am-docs .am-fl-grid .am-fl-c.is-fresh { box-shadow: inset 0 0 0 2px var(--am-excel); }
@keyframes am-fl-in { from { opacity: 0; transform: translateY(3px); } }

/* 원본 칸 */
.am-docs .am-fl-grid .am-fl-c.is-src { box-shadow: inset 0 0 0 1.5px #9db6e6; }
.am-docs .am-fl-grid .am-fl-c.is-lit { background: var(--am-blue-wash); box-shadow: inset 0 0 0 2px var(--am-blue); font-weight: 700; }
.am-docs .am-fl-grid .am-fl-c.is-landed { box-shadow: inset 0 0 0 2px var(--am-excel); }
/* 원래 모델 칸: 시나리오를 다 돈 뒤 「원래 값 그대로」 */
.am-docs .am-fl[data-fl-keep="1"] .am-fl-grid .am-fl-c.is-keep { outline: 1.5px dashed var(--am-green); outline-offset: -2px; }
.am-docs .am-fl[data-fl-keep="1"] .am-fl-grid .am-fl-c.is-keep-tag { padding-bottom: 15px; }
.am-docs .am-fl[data-fl-keep="1"] .am-fl-grid .am-fl-c.is-keep-tag::after {
  content: "원래 값 그대로"; position: absolute; bottom: 1px; left: 3px; z-index: 2; padding: 0 5px; border: 1px solid var(--fl-new-line); border-radius: 999px;
  background: #fff; color: var(--am-green); font-size: 10px; font-weight: 800; line-height: 1.4; white-space: nowrap; pointer-events: none;
}
.am-docs .am-fl-more { margin: 4px 0 0; color: var(--am-muted); font-size: 12px; }

/* ── 시나리오: 계산용 사본 카드(움직이는 동안만) / 끝 상태 요약 줄 ── */
.am-docs .am-fl-copies { display: none; position: relative; z-index: 1; margin-top: 42px; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.am-docs .am-fl[data-fl-mode="live"] .am-fl-copies { display: grid; }
.am-docs .am-fl-final { margin: 14px 0 0; color: var(--am-ink); font-size: 14px; font-weight: 700; line-height: 1.6; }
.am-docs .am-fl[data-fl-mode="live"] .am-fl-final { display: none; }
.am-docs .am-fl-copy { padding: 8px 10px 10px; border: 1.5px dashed #b9c5de; border-radius: 10px; background: #fff; transition: opacity .35s var(--am-ease), border-color .35s, box-shadow .35s; }
.am-docs .am-fl-copy.is-idle { opacity: .4; }
.am-docs .am-fl-copy.is-on { border: 1.5px solid var(--am-excel); box-shadow: 0 0 0 3px rgba(33, 115, 70, .16); }
.am-docs .am-fl-copy.is-done { opacity: .7; }
.am-docs .am-fl-copy-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 4px; }
.am-docs .am-fl-copy-h span { color: var(--am-muted); font-size: 12px; font-weight: 700; }
.am-docs .am-fl-copy-h b { color: var(--am-ink); font-size: 14px; font-weight: 800; }
.am-docs .am-fl-copy ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.am-docs .am-fl-copy li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.5; }
.am-docs .am-fl-copy li small { color: var(--am-muted); font-size: 11px; }
.am-docs .am-fl-copy li b { font-variant-numeric: tabular-nums; visibility: hidden; white-space: nowrap; }
.am-docs .am-fl-copy li.is-shown b { visibility: visible; }
.am-docs .am-fl-copy li.is-out { margin-top: 2px; padding-top: 3px; border-top: 1px solid var(--am-line-soft); color: var(--am-green); font-weight: 700; }

/* ── 등록 범위: 테두리·역할 이름표·커서(스크립트가 있을 때만) ── */
.am-docs .am-fl-regs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.am-docs .am-fl-reg { display: none; position: absolute; border: 2px solid var(--reg); border-radius: 4px; background: rgba(255, 255, 255, 0); transition: opacity .35s var(--am-ease), background-color .35s; }
.am-docs .am-fl.is-js .am-fl-reg.is-on { display: block; }
.am-docs .am-fl-reg b {
  position: absolute; left: -11px; top: -11px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--reg); color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
}
.am-docs .am-fl-reg span {
  display: none; position: absolute; left: 12px; bottom: calc(100% + 4px); padding: 1px 9px; border-radius: 999px;
  background: var(--reg); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.6; white-space: nowrap;
}
.am-docs .am-fl-reg.is-active { background: color-mix(in srgb, var(--reg) 12%, transparent); }
.am-docs .am-fl-reg.is-active span { display: block; }
.am-docs .am-fl-reg.is-past { opacity: .45; }
.am-docs .am-fl-r0 { --reg: #2e60c4; } .am-docs .am-fl-r1 { --reg: #b07510; } .am-docs .am-fl-r2 { --reg: #7a4fb8; } .am-docs .am-fl-r3 { --reg: #0f7d8a; }
.am-docs .am-fl-cursor { position: absolute; width: 18px; height: 22px; fill: #fff; stroke: #14203a; stroke-width: 1.2; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transition: left .5s var(--am-ease), top .5s var(--am-ease); }

.am-docs .am-fl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.am-docs .am-fl-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.5; }
.am-docs .am-fl-legend code { padding: 0 6px; border-radius: 4px; background: var(--am-mist); font-family: var(--am-mono); font-size: 12px; }
.am-docs .am-fl-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--reg); color: #fff; font-size: 12px; font-weight: 800; }

/* ── 화살표·값 칩 ── */
.am-docs .am-fl-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.am-docs .am-fl-svg--under { z-index: 0; }
.am-docs .am-fl-svg--top { z-index: 2; }
.am-docs .am-fl-path { fill: none; stroke: var(--am-excel); stroke-width: 2.2; stroke-linecap: round; opacity: .9; }
.am-docs .am-fl-path.is-strong { stroke-width: 2.8; opacity: 1; }
.am-docs .am-fl-path.is-faint { opacity: .4; }
.am-docs .am-fl-head { fill: var(--am-excel); }
.am-docs .am-fl-head.is-faint { opacity: .55; }
.am-docs .am-fl-chip rect { fill: var(--am-excel); }
.am-docs .am-fl-chip text { fill: #fff; font-size: 12px; font-weight: 800; font-family: var(--am-sans); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }

/* ── 실행: 격자 아래 한 줄 전체 폭 — 번호 단추 칩을 「→」로 잇고, 줄 끝에 작은 「작업창 그림」 단추(그림은 누를 때 불러온다) ── */
.am-docs .am-fl-exec { min-width: 0; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--am-line); }
.am-docs .am-fl-exec-h { margin: 0 0 6px; color: var(--am-muted); font-size: 12px; font-weight: 700; }
.am-docs .am-fl-exec-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; min-width: 0; }
.am-docs .am-fl-btns { display: flex; flex-wrap: wrap; flex: 1 1 auto; gap: 8px 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.am-docs .am-fl-btns li { display: inline-flex; align-items: flex-start; max-width: 100%; }
.am-docs .am-fl-chipbtn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; max-width: 15em; padding: 5px 12px 5px 6px; border: 1px solid #a9d3bd; border-radius: 14px;
  background: var(--am-green-wash); color: var(--am-green); transition: background-color .3s, border-color .3s, opacity .3s, box-shadow .3s;
}
.am-docs .am-fl-sep { align-self: flex-start; padding: 4px 6px 0 8px; color: var(--am-muted); font-size: 14px; font-weight: 800; line-height: 20px; }
.am-docs .am-fl-btns i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--am-green); color: #fff; font-size: 12px; font-style: normal; font-weight: 800; }
.am-docs .am-fl-btn { color: var(--am-blue-deep); font-size: 13px; font-weight: 800; }
.am-docs .am-fl-btns li.is-done .am-fl-btn { color: var(--am-green); }
.am-docs .am-fl-note { flex-basis: 100%; padding-left: 28px; color: var(--am-muted); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.am-docs .am-fl-btns li.is-wait .am-fl-chipbtn { border-color: var(--am-line); background: #fff; color: var(--am-muted); opacity: .6; }
.am-docs .am-fl-btns li.is-wait i { background: var(--am-line); color: var(--am-muted); }
.am-docs .am-fl-btns li.is-wait .am-fl-note { display: none; }
.am-docs .am-fl-btns li.is-on .am-fl-chipbtn { border-color: var(--am-blue); background: var(--am-blue-wash); box-shadow: 0 0 0 4px rgba(46, 96, 196, .22); }
.am-docs .am-fl-btns li.is-on i { background: var(--am-blue); }
.am-docs .am-fl-panebox { margin: 0; max-width: none; flex: 0 0 auto; margin-left: auto; }
.am-docs .am-fl-panebox img { display: none; }
.am-docs .am-fl-panebox .am-fl-panebtn { margin: 0; white-space: nowrap; }

.am-docs .am-fl-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; color: var(--am-muted); font-size: 12px; font-weight: 700; }
.am-docs .am-fl-key span { display: inline-flex; align-items: center; gap: 6px; }
.am-docs .am-fl-key i { display: inline-block; width: 16px; height: 12px; border: 1px solid var(--fl-new-line); border-radius: 3px; background: var(--fl-new); }
.am-docs .am-fl-key i.is-changed { border-color: #e3c78a; background: var(--am-amber-wash); }
.am-docs .am-fl-key i.is-arrow { position: relative; width: 22px; height: 0; border: 0; border-top: 2px solid var(--am-excel); border-radius: 0; background: none; }
.am-docs .am-fl-key i.is-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 4px solid transparent; border-left: 6px solid var(--am-excel); }
.am-docs .am-fl[data-fl-mode="done"] .am-fl-cap { display: none; }
.am-docs .am-fl-cap { margin: 8px 0 0; color: var(--am-ink); font-size: 14px; font-weight: 700; line-height: 1.6; }
.am-docs .am-fl-notes { margin: 6px 0 0; padding-left: 18px; color: var(--am-muted); font-size: 13px; line-height: 1.6; }

/* ── 재생 조작: 스크립트가 준비됐을 때만(기존 motion 과 같은 모양) ── */
.am-docs .am-fl .am-ctl { display: none; margin-top: 12px; }
.am-docs .am-fl.is-ready .am-ctl { display: flex; }

/* ── 넓은 화면: 입력 왼쪽·결과 오른쪽, 작업창 그림은 옆 ── */
@container (min-width: 640px) {
  .am-docs .am-fl-body { padding-left: 4px; }
  .am-docs .am-fl-views.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
}
@container (max-width: 430px) {
  .am-docs .am-fl { padding: 10px; }
  .am-docs .am-fl-body { padding-left: 24px; }
  .am-docs .am-fl-grid { font-size: 12px; }
  .am-docs .am-fl-grid th, .am-docs .am-fl-grid td { padding: 3px 6px; }
  .am-docs .am-fl-copies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-docs .am-fl-path { stroke-width: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  .am-docs .am-fl .am-ctl, .am-docs .am-fl.is-ready .am-ctl { display: none; }
  .am-docs .am-fl *, .am-docs .am-fl *::before, .am-docs .am-fl *::after { transition: none; animation: none; }
  .am-docs .am-fl-cursor { display: none; }
}

/* 시나리오 끝 상태: 시나리오 열 머리와 결과표의 그 시나리오 머리를 같은 옅은 색으로 짝짓는다(이름 글자도 같이 있다) */
.am-docs .am-fl-grid .am-fl-c.am-fl-pair0 { background: #dbe6fb; }
.am-docs .am-fl-grid .am-fl-c.am-fl-pair1 { background: #fbe9c4; }
.am-docs .am-fl-grid .am-fl-c.am-fl-pair2 { background: #e7dcf6; }
.am-docs .am-fl-grid .am-fl-c.am-fl-pair3 { background: #cfecef; }
/* 파일·시트를 고르는 기능: 칸 테두리 대신 시트 머리에 「고른 시트」 이름표 */
.am-docs .am-fl-pick { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border: 1px solid #b9c5de; border-radius: 999px; background: var(--am-blue-wash); color: var(--am-blue-deep); font-size: 12px; font-weight: 800; transition: opacity .3s var(--am-ease); }
.am-docs .am-fl-pick em, .am-docs .am-fl-legend-pick em { padding: 0 7px; border-radius: 999px; background: var(--am-blue); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.am-docs .am-fl-pick.is-off { opacity: 0; }
.am-docs .am-fl-legend-pick { gap: 8px; }

/* ── 결과 표현 v1.1: 설정 전→후 · 새 파일 목록 · 도형 · 서식 ── */
.am-docs .am-fl-props { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); min-width: 0; }
.am-docs .am-fl-prop { table-layout: fixed; min-width: 0; width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; line-height: 1.4; border: 1px solid var(--am-excel); }
.am-docs .am-fl-prop caption { caption-side: top; padding: 3px 10px; background: #e8f1ec; color: var(--am-excel); font-size: 12px; font-weight: 800; text-align: left; border: 1px solid var(--am-excel); border-bottom: 0; }
.am-docs .am-fl-prop th, .am-docs .am-fl-prop td { padding: 4px 8px; border: 1px solid #dde3ef; text-align: left; white-space: normal; overflow-wrap: normal; word-break: keep-all; font-weight: 400; color: var(--am-ink); }
.am-docs .am-fl-prop thead th { background: #f1f3f7; color: #56627a; font-size: 12px; font-weight: 700; }
.am-docs .am-fl-prop tbody th { background: #f7f9fc; font-weight: 700; }
.am-docs .am-fl-prop tr.is-chg td:last-child { background: var(--am-amber-wash); }
.am-docs .am-fl-prop tr.is-chg td:nth-child(2) { color: var(--am-muted); text-decoration: line-through; }
.am-docs .am-fl-prop em { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--am-amber); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.am-docs .am-fl-prop.is-same { border-color: var(--am-line); }
.am-docs .am-fl-prop.is-same caption { background: var(--am-mist); color: var(--am-muted); border-color: var(--am-line); }
.am-docs .am-fl-prop .am-fl-prop-note { color: var(--am-muted); background: #f7f8fa; white-space: normal; }
.am-docs .am-fl-prop tr { transition: opacity .35s var(--am-ease); }
.am-docs .am-fl-prop tr.is-wait { opacity: .18; }
.am-docs .am-fl-files { position: relative; z-index: 1; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.am-docs .am-fl-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.am-docs .am-fl-files small { color: var(--am-muted); font-size: 12px; font-weight: 700; }
/* 도형: 기존 설명서 흐름도(am-dir)와 같은 모양 */
.am-docs .am-fl-shapefig { margin-top: 14px; padding: 12px; border: 1px solid var(--am-line); border-radius: 14px; background: var(--am-mist); }
.am-docs .am-fl-shapes { display: flex; margin: 0; padding: 0; list-style: none; }
.am-docs .am-fl-shapes--down { flex-direction: column; align-items: center; gap: 0; }
.am-docs .am-fl-shapes--right { flex-direction: row; align-items: center; overflow-x: auto; padding-bottom: 6px; }
.am-docs .am-fl-node { display: flex; flex-direction: column; align-items: center; transition: opacity .35s var(--am-ease); }
.am-docs .am-fl-shapes--right .am-fl-node { flex-direction: row; flex: none; }
.am-docs .am-fl-node.is-wait { opacity: .15; }
.am-docs .am-fl-edge { display: flex; flex-direction: column; align-items: center; min-height: 22px; color: var(--am-blue); font-size: 14px; font-weight: 800; line-height: 1.2; }
.am-docs .am-fl-shapes--right .am-fl-edge { flex-direction: row; min-height: 0; padding: 0 6px; }
.am-docs .am-fl-edge i { color: var(--am-muted); font-size: 11px; font-style: normal; font-weight: 700; }
.am-docs .am-fl-shape { display: grid; place-items: center; min-width: 128px; max-width: 100%; padding: 6px 12px; border: 1px solid #b9c5de; border-radius: 10px; background: #fff; color: var(--am-ink); font-size: 13px; font-weight: 700; line-height: 1.35; text-align: center; }
.am-docs .am-fl-node--start .am-fl-shape, .am-docs .am-fl-node--end .am-fl-shape { border-radius: 999px; background: var(--am-blue-wash); }
.am-docs .am-fl-node--decision .am-fl-shape { min-width: 150px; padding: 14px 26px; border-color: var(--am-amber); background: var(--am-amber-wash); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* 서식이 결과인 칸(색은 #RRGGBB 만 받아 변수로 넣는다) */
.am-docs .am-fl-grid .am-fl-c.is-styled { background: var(--fl-fill, transparent); color: var(--fl-font, var(--am-ink)); font-weight: var(--fl-w, 400); }
.am-docs .am-fl-grid .am-fl-c.is-styled.is-pre { background: var(--fl-bfill, #fff); color: var(--fl-bfont, var(--am-ink)); font-weight: var(--fl-bw, 400); }
.am-docs .am-fl-grid .am-fl-c.is-fmt { outline: 1.5px dashed #c98a1b; outline-offset: -2px; }
.am-docs .am-fl-grid .am-fl-c.is-fmt.is-pre .am-fl-v, .am-docs .am-fl-grid .am-fl-c.is-fmt.is-pre .am-fl-fx { visibility: visible; }

.am-docs .am-fl-prop tbody th, .am-docs .am-fl-prop thead th:first-child { width: 34%; }
.am-docs .am-fl-prop em { display: inline-block; }
@container (max-width: 430px) {
  .am-docs .am-fl-prop { font-size: 12px; }
  .am-docs .am-fl-prop th, .am-docs .am-fl-prop td { padding: 3px 4px; }
  .am-docs .am-fl-prop em { display: block; margin: 2px 0 0; width: fit-content; }
}
/* 결과 칸이 처음 화면 밖이면 격자 위 한 줄 안내 */
.am-docs .am-fl-swipe { display: none; margin: 0 0 4px; color: var(--am-blue-deep); font-size: 12px; font-weight: 800; }
.am-docs .am-fl-swipe.is-on { display: block; }

/* 숫자·수식 칸은 줄바꿈 없이, 열이 10개를 넘는 격자는 촘촘하게(한 단계 작은 글자·좁은 칸 여백) */
.am-docs .am-fl-grid .am-fl-c.is-num, .am-docs .am-fl-grid .am-fl-c.is-formula, .am-docs .am-fl-grid .am-fl-rn, .am-docs .am-fl-grid thead th { white-space: nowrap; max-width: none; }
.am-docs .am-fl-grid.is-dense { font-size: 12px; }
.am-docs .am-fl-grid.is-dense th, .am-docs .am-fl-grid.is-dense td { padding: 3px 5px; }
.am-docs .am-fl-grid.is-dense .am-fl-fx { font-size: 10px; }

/* ── 슬라이드 View(kind:"slide", 계약 v1.2): 16:9 카드·PPT 표(열 문자·행 번호 없음)·글상자. 카드에 am-fl-grid 클래스를 함께 달아 칸 상태(바뀜·새로 생김·번쩍임)는 위 엑셀 칸 규칙을 그대로 쓴다 ── */
.am-docs .am-fl-file--ppt { border-color: #efc4b7; background: #fbe9e3; color: #b7472a; }
.am-docs .am-fl-file--ppt b { color: #8e3017; }
.am-docs .am-fl-view--ppt figcaption { border-radius: 6px; background: #fbe9e3; color: #b7472a; }
.am-docs .am-fl-slide {
  position: relative; container-type: inline-size; aspect-ratio: 16 / 9; max-width: 100%; padding: max(30px, 9cqw) 5cqw 5cqw;
  border: 1px solid #c9d2e3; border-top: 5px solid #b7472a; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(20, 32, 58, .12);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2.4cqw;
}
.am-docs .am-fl-sl-tag { position: absolute; left: 10px; top: 6px; padding: 0 8px; border-radius: 999px; background: #fbe9e3; color: #b7472a; font-size: 11px; font-weight: 800; line-height: 18px; }
.am-docs .am-fl-sl-title { margin: 0; font-size: max(14px, 5cqw); font-weight: 800; line-height: 1.3; color: var(--am-ink); }
.am-docs .am-fl-ptbl { width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; font-size: max(12px, 3.6cqw); line-height: 1.4; background: transparent; }
.am-docs .am-fl-ptbl th, .am-docs .am-fl-ptbl td { max-width: none; padding: 1.6cqw 2.2cqw; border: 1px solid #c9d2e3; text-align: left; vertical-align: middle; font-weight: 400; color: var(--am-ink); overflow-wrap: normal; word-break: keep-all; white-space: nowrap; background: transparent; }
.am-docs .am-fl-ptbl th, .am-docs .am-fl-ptbl .am-fl-c.is-head { background: #fbe9e3; font-weight: 700; }
.am-docs .am-fl-ptbl .am-fl-c.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.am-docs .am-fl-slide .am-fl-c.am-fl-xbox, .am-docs .am-fl-slide p.am-fl-c { margin: 0; padding: .6cqw 1.2cqw; width: fit-content; max-width: 100%; white-space: nowrap; border-radius: 3px; font-size: max(12px, 3.2cqw); color: var(--am-muted); }
.am-docs .am-fl-slide .am-fl-c .am-fl-v { display: inline; }
.am-docs .am-fl-slide .am-fl-c .am-fl-b { display: block; }
.am-docs .am-fl-ptbl .am-fl-c.is-changed, .am-docs .am-fl-ptbl .am-fl-c.is-new { background: var(--am-amber-wash); }
.am-docs .am-fl-ptbl .am-fl-c.is-new { background: var(--fl-new); }
.am-docs .am-fl-ptbl .am-fl-c.is-pre .am-fl-b { left: 2cqw; right: 2cqw; top: 1.2cqw; font-size: inherit; }

/* 입력·결과 격자가 한 열 폭보다 넓으면 위아래 배치(스크립트가 is-stacked 를 켠다). 입력들 위, 결과 아래 전체 폭 */
.am-docs .am-fl-views.is-split.is-stacked { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
.am-docs .am-fl-views.is-stacked .am-fl-grid th, .am-docs .am-fl-views.is-stacked .am-fl-grid td { max-width: 22em; }