/* 회계매크로 「다른 시트 값 가져오기」 시연 — motion.css 의 토큰 위에 얹는다. 모든 규칙은 .am-docs 아래로만.
   기본값이 「끝난 상태」(결과 칸이 모두 채워짐)라 스크립트가 없거나 움직임 줄이기에서도 완성 그림이 보인다.
   화살표·값 칩은 fetch.js 가 인라인 SVG 로 그린다(시간 계산으로 그리므로 CSS 애니메이션을 쓰지 않는다). */

.am-docs .am-motion--fx { container-type: inline-size; }
.am-docs .am-fx {
  position: relative; display: grid; gap: 14px; min-width: 0; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "srcs" "run" "dst";
}
.am-docs .am-fx-srcs { grid-area: srcs; display: grid; gap: 10px; min-width: 0; align-content: start; }
.am-docs .am-fx-run { grid-area: run; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.am-docs .am-fx-run i { color: var(--am-muted); font-size: 12px; font-style: normal; font-weight: 700; }
.am-docs .am-fx-pill {
  display: inline-block; padding: 3px 12px; border: 1px solid #b9c5de; border-radius: 999px; background: #fff;
  color: var(--am-blue-deep); font-size: 12px; font-weight: 800; line-height: 1.4;
}
.am-docs .am-fx[data-fx="run"] .am-fx-pill, .am-docs .am-fx[data-fx="done"] .am-fx-pill {
  border-color: var(--am-blue); background: var(--am-blue); color: #fff;
}
.am-docs .am-fx[data-fx="press"] .am-fx-pill { border-color: var(--am-blue); background: var(--am-blue); color: #fff; box-shadow: 0 0 0 5px rgba(46, 96, 196, .3); }
.am-docs .am-fx-sheet--dst { grid-area: dst; }
.am-docs .am-fx-sheet { margin: 0; min-width: 0; }
.am-docs .am-fx-sheet figcaption { margin-top: 4px; color: var(--am-muted); font-size: 12px; font-weight: 700; }

.am-docs .am-fx-grid { width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; font-size: 13px; line-height: 1.35; background: var(--am-card); }
.am-docs .am-fx-grid th, .am-docs .am-fx-grid td {
  padding: 4px 8px; border: 1px solid var(--am-line); text-align: left; vertical-align: middle; overflow-wrap: break-word; word-break: keep-all; font-weight: 400; color: var(--am-ink);
}
.am-docs .am-fx-grid thead th { background: var(--am-mist); font-weight: 700; }
.am-docs .am-fx-grid .am-rn { width: 26px; min-width: 26px; padding: 4px 2px; text-align: center; color: var(--am-muted); background: var(--am-mist); font-size: 11px; }
.am-docs .am-fx-grid .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 430px) {
  .am-docs .am-fx-grid { table-layout: fixed; }
  .am-docs .am-fx-grid th, .am-docs .am-fx-grid td { padding: 3px 4px; font-size: 12px; overflow-wrap: anywhere; word-break: normal; }
  .am-docs .am-fx-grid .am-rn { width: 22px; min-width: 22px; padding: 3px 1px; }
  .am-docs .am-fx-grid .is-num { white-space: normal; }
  .am-docs .am-fx-path { stroke-width: 1.8; opacity: .7; }
}
.am-docs .am-fx-sheet--src .am-fx-grid { border-color: #b9c5de; }
.am-docs .am-fx-sheet--dst .am-fx-grid { border-color: #a9cdb8; }
.am-docs .am-fx-sheet--dst thead th { background: var(--am-green-wash); }

/* 원본: 값을 건네주는 칸 */
.am-docs .am-fx-grid td.is-hit.is-lit { background: var(--am-blue-wash); box-shadow: inset 0 0 0 2px var(--am-blue); font-weight: 700; }
/* 결과: 아직 안 채워진 칸 / 채워진 칸 / 못 찾은 칸 */
.am-docs .am-fx-grid td.is-fill, .am-docs .am-fx-grid td.is-tfill { background: var(--am-green-wash); font-weight: 700; }
.am-docs .am-fx-grid td.is-wait { background: repeating-linear-gradient(45deg, #fff, #fff 5px, var(--am-mist) 5px, var(--am-mist) 10px); }
.am-docs .am-fx-grid td.is-wait .am-fx-v { visibility: hidden; }
.am-docs .am-fx-grid td.is-landed { box-shadow: inset 0 0 0 2px var(--am-excel); }
/* 이번 한 번 실행에 안 채워지는 칸(다른 열) / 별도 설명 칸(주소 방식의 값 열) */
.am-docs .am-fx-grid td.is-rest { background: var(--am-mist); }
.am-docs .am-fx-grid td.is-aux { color: var(--am-muted); font-style: italic; font-weight: 400; background: var(--am-card); }
.am-docs .am-fx-grid td.is-miss { background: var(--am-red-wash); color: var(--am-red); }
.am-docs .am-fx-grid td.is-miss .am-fx-v { font-size: 12px; font-weight: 700; }

.am-docs .am-fx-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* 층: 선(under) < 결과 표(불투명) < 값 칩(top). 선은 결과 표 안에서는 가려지고 값 칩만 표 위로 날아와 칸에 꽂힌다 */
.am-docs .am-fx-svg--under { z-index: 0; }
.am-docs .am-fx-sheet--dst { position: relative; z-index: 1; background: var(--am-card); }
.am-docs .am-fx-svg--top { z-index: 2; }
.am-docs .am-fx-path { fill: none; stroke: var(--am-blue); stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.am-docs .am-fx-chip rect { fill: var(--am-blue); }
.am-docs .am-fx-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-fx-cap { margin: 10px 0 0; color: var(--am-ink); font-size: 14px; font-weight: 700; }
.am-docs .am-motion--fx .am-note { margin-top: 4px; }

@container (min-width: 560px) {
  .am-docs .am-fx { grid-template-columns: minmax(0, .8fr) 72px minmax(0, 1.2fr); grid-template-areas: "srcs gap run" "srcs gap dst"; align-items: start; gap: 10px 0; }
  .am-docs .am-fx-run { justify-content: flex-start; }
  .am-docs .am-fx-sheet--dst { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .am-docs .am-fx *, .am-docs .am-fx *::before, .am-docs .am-fx *::after { transition: none; animation: none; }
}
/* 사용설명서에서만 그리는 조작 순서. 가져오기 그림의 재생 부품과 분리한다. */
.am-docs .am-fetch-order{margin:12px 0 18px}
.am-docs .am-fetch-order>p{margin:0 0 7px;font-weight:700;font-size:13px}
.am-docs .am-fetch-order ol{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0}
.am-docs .am-fetch-order li{position:relative;display:flex;flex-direction:column;gap:3px;padding:7px 10px;border:1px solid #d8e2ea;border-radius:7px;font-size:12px;max-width:100%;overflow-wrap:anywhere}
.am-docs .am-fetch-order li+li:before{content:'→';position:absolute;left:-15px;top:8px;color:#64748b}
.am-docs .am-fetch-order small{font-size:11px;color:#526175}