/* 회계매크로 공용 모션 — 상품 소개·사용설명서가 함께 읽는다. 모든 규칙은 .am-docs 아래로만.
   외부 글꼴·CDN 없음(시스템 글꼴 스택). 기본값이 「끝난 상태」라 스크립트가 없거나 움직임 줄이기에서도 최종 그림이 보인다.
   @keyframes 는 from 만 쓴다(도착 상태는 기본 스타일). */

.am-docs {
  --am-ink: #14203a;
  --am-ink-2: #1c2e55;
  --am-muted: #55627d;
  --am-line: #d6dded;
  --am-line-soft: #e6ebf5;
  --am-blue: #2e60c4;
  --am-blue-deep: #244aa6;
  --am-blue-wash: #e6edfb;
  --am-mist: #f3f6fd;
  --am-green: #1f7a4d;
  --am-green-wash: #dff1e7;
  --am-excel: #217346;
  --am-amber: #c98a1b;
  --am-amber-wash: #fdf1d6;
  --am-amber-ink: #7a5310;
  --am-red: #b3342e;
  --am-red-wash: #fbe3e1;
  --am-card: #ffffff;
  --am-sans: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --am-mono: ui-monospace, "Cascadia Mono", Consolas, "Malgun Gothic", monospace;
  --am-ease: cubic-bezier(.2, .75, .15, 1);
  color: var(--am-ink);
  font-family: var(--am-sans);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.am-docs *, .am-docs *::before, .am-docs *::after { box-sizing: border-box; }
.am-docs a:focus-visible, .am-docs button:focus-visible, .am-docs summary:focus-visible,
.am-docs input:focus-visible, .am-docs [tabindex]:focus-visible {
  outline: 3px solid var(--am-blue);
  outline-offset: 3px;
  border-radius: 6px;
}
.am-docs .am-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 모션 묶음 ── */
.am-docs .am-motion {
  position: relative; min-width: 0; padding: 14px;
  border: 1px solid var(--am-line); border-radius: 16px; background: var(--am-card);
}
.am-docs .am-stage { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; align-items: start; }
.am-docs .am-motion.has-pane .am-stage { grid-template-columns: minmax(0, 1fr); }
.am-docs .am-gridcol { min-width: 0; }

/* ── 격자(grid): 가짜 엑셀 표 ── */
.am-docs .am-sheet { margin: 0; min-width: 0; }
.am-docs .am-sheet 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-sheet-scroll {
  max-width: 100%; overflow-x: auto; border: 1px solid #c9d2e3; border-radius: 6px 6px 0 6px; background: #fff;
}
.am-docs .am-grid {
  width: 100%; min-width: 0; margin: 0; border-collapse: collapse; font-size: 13px; line-height: 1.45;
  table-layout: auto; background: #fff;
}
.am-docs .am-grid th, .am-docs .am-grid td {
  position: relative; padding: 5px 9px; border: 1px solid #dde3ef; text-align: left; vertical-align: middle;
  white-space: nowrap; font-weight: 400;
}
.am-docs .am-grid thead th { background: #f1f3f7; color: #56627a; font-size: 12px; font-weight: 600; text-align: center; }
.am-docs .am-grid .am-heads th { background: #f7f9fc; color: var(--am-ink); font-weight: 700; text-align: left; }
.am-docs .am-grid .am-rn { width: 34px; min-width: 34px; background: #f1f3f7; color: #56627a; font-size: 12px; font-weight: 600; text-align: center; }
.am-docs .am-grid .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.am-docs .am-fx { display: block; margin-top: 1px; color: var(--am-muted); font-family: var(--am-mono); font-size: 11px; }
.am-docs .am-mk {
  display: inline-block; margin-left: 6px; min-width: 1.1em; color: var(--mk-fg, var(--am-muted)); font-size: 12px; font-weight: 800; text-align: center;
  transition: opacity .35s var(--am-ease);
}
.am-docs .am-vb { display: none; color: var(--am-muted); text-decoration: line-through; text-decoration-color: rgba(85, 98, 125, .45); }

.am-docs .m-target { --mk-bg: var(--am-blue-wash); --mk-fg: var(--am-blue-deep); }
.am-docs .m-match { --mk-bg: var(--am-green-wash); --mk-fg: var(--am-green); }
.am-docs .m-group { --mk-bg: var(--am-blue-wash); --mk-fg: var(--am-blue-deep); }
.am-docs .m-only-left, .am-docs .m-only-right { --mk-bg: var(--am-amber-wash); --mk-fg: var(--am-amber-ink); }
.am-docs .m-changed { --mk-bg: var(--am-amber-wash); --mk-fg: var(--am-amber-ink); }
.am-docs .m-added { --mk-bg: var(--am-green-wash); --mk-fg: var(--am-green); }
.am-docs .m-removed { --mk-bg: var(--am-red-wash); --mk-fg: var(--am-red); }
.am-docs .m-warn { --mk-bg: var(--am-red-wash); --mk-fg: var(--am-red); }
.am-docs .m-excluded { --mk-bg: #eceef3; --mk-fg: #5d6678; }

.am-docs [data-phase="change"] td, .am-docs [data-phase="done"] td {
  background: var(--mk-bg, transparent); transition: background-color .5s var(--am-ease);
}
.am-docs .am-r-removed td .am-va { text-decoration: line-through; }
.am-docs .am-r-moved { transition: transform .6s var(--am-ease); }

/* 전후: 바뀌는 칸은 처음엔 이전 값, 변화 단계부터 새 값 */
.am-docs [data-phase="orig"] .has-before .am-vb, .am-docs [data-phase="hl"] .has-before .am-vb { display: inline; }
.am-docs [data-phase="orig"] .has-before .am-va, .am-docs [data-phase="hl"] .has-before .am-va { display: none; }
.am-docs [data-phase="orig"] .has-before .am-fx, .am-docs [data-phase="hl"] .has-before .am-fx { display: none; }
.am-docs [data-phase="orig"] .am-mk, .am-docs [data-phase="hl"] .am-mk { opacity: 0; }
.am-docs [data-phase="orig"] .am-r-added, .am-docs [data-phase="hl"] .am-r-added { opacity: 0; }
.am-docs [data-phase="orig"] .am-r-moved, .am-docs [data-phase="hl"] .am-r-moved { transform: translateY(calc(var(--am-shift, 0) * 1.9em)); }
.am-docs .am-r-added { transition: opacity .5s var(--am-ease); }
.am-docs [data-phase="hl"] .is-hl, .am-docs [data-phase="hl"] .has-before {
  background: var(--am-blue-wash); box-shadow: inset 0 0 0 2px var(--am-blue); transition: background-color .3s, box-shadow .3s;
}

/* 결과(result) 모드: 원본 표들 → 결과 표 */
.am-docs .am-result { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.am-docs .am-srcs { display: grid; gap: 10px; min-width: 0; }
.am-docs .am-arrow { justify-self: center; color: var(--am-blue); font-size: 22px; font-weight: 800; line-height: 1; transform: rotate(90deg); }
.am-docs .am-sheet--res .am-sheet-scroll { border-color: var(--am-excel); }
.am-docs .am-sheet--res, .am-docs .am-arrow { transition: opacity .6s var(--am-ease), transform .6s var(--am-ease); }
.am-docs [data-phase="orig"] .am-sheet--res, .am-docs [data-phase="hl"] .am-sheet--res { opacity: .12; transform: translateY(10px); }
.am-docs [data-phase="orig"] .am-arrow, .am-docs [data-phase="hl"] .am-arrow { opacity: 0; }
.am-docs .am-note { margin: 8px 0 0; color: var(--am-muted); font-size: 13px; line-height: 1.6; }
.am-docs .am-note em { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--am-amber-wash); color: var(--am-amber-ink); font-size: 11px; font-style: normal; font-weight: 700; }

/* ── 작업창(pane): 실제 캡처 레이어 ── */
.am-docs .am-pane { min-width: 0; transition: opacity .5s var(--am-ease), transform .5s var(--am-ease); }
.am-docs .am-pane[data-open="0"] { opacity: 0; transform: translateX(24px); }
.am-docs .am-pane-frame {
  position: relative; max-height: 440px; overflow: auto; border: 1px solid #b9c5de; border-radius: 12px;
  background: #fff; box-shadow: 0 10px 28px rgba(20, 32, 58, .14);
}
.am-docs .am-pane-frame.is-static { max-height: 520px; }
.am-docs .am-layer { position: relative; display: none; margin: 0; }
.am-docs .am-layer.is-on { display: block; }
.am-docs .am-layer img, .am-docs .am-pane-frame img { display: block; max-width: 100%; height: auto; }
.am-docs .am-layer img { width: 100%; }
.am-docs .am-focus {
  position: absolute; border: 3px solid var(--am-amber); border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(201, 138, 27, .25); animation: am-pop .4s var(--am-ease) both;
}
.am-docs .am-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)); animation: am-glide .5s var(--am-ease) both; }
.am-docs .am-pane-cap { margin: 8px 0 0; color: var(--am-ink); font-size: 14px; font-weight: 700; }
@keyframes am-pop { from { opacity: 0; transform: scale(1.08); } }
@keyframes am-glide { from { opacity: 0; transform: translate(-26px, -18px); } }

.am-docs .am-tag { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; background: var(--am-blue-wash); color: var(--am-blue-deep); font-size: 12px; font-weight: 700; }
.am-docs .am-tag--ex { margin-top: 8px; background: var(--am-amber-wash); color: var(--am-amber-ink); }
.am-docs .am-pane-frame.is-wide { max-height: none; }

/* ── 진행 띠(flow) ── */
.am-docs .am-flow { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.am-docs .am-flow li {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border: 1px solid var(--am-line); border-radius: 999px;
  background: #fff; color: var(--am-muted); font-size: 13px; font-weight: 700;
  transition: background-color .35s var(--am-ease), color .35s var(--am-ease), border-color .35s var(--am-ease);
}
.am-docs .am-flow li b {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--am-line-soft); color: var(--am-muted); font-size: 12px;
}
.am-docs .am-flow li.is-on { border-color: var(--am-blue); background: var(--am-blue-wash); color: var(--am-blue-deep); }
.am-docs .am-flow li.is-on b { background: var(--am-blue); color: #fff; }
.am-docs .am-flow li.is-done { border-color: #a9d3bd; background: var(--am-green-wash); color: var(--am-green); }
.am-docs .am-flow li.is-done b { background: var(--am-green); color: #fff; }
.am-docs .am-flow li + li::before { content: none; }

/* ── 재생 조작: 스크립트가 준비됐을 때만 보인다 ── */
.am-docs .am-ctl { display: none; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.am-docs .am-motion.is-ready .am-ctl { display: flex; }
.am-docs .am-ctl-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--am-line); border-radius: 999px;
  background: #fff; color: var(--am-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.am-docs .am-ctl-btn:hover { border-color: var(--am-blue); background: var(--am-mist); }
.am-docs .am-ctl-btn[aria-pressed="true"] { border-color: var(--am-blue); background: var(--am-blue-wash); color: var(--am-blue-deep); }
.am-docs .am-ctl-btn svg { width: 12px; height: 12px; fill: currentColor; }
.am-docs .am-i-pause, .am-docs .am-t-pause { display: none; }
.am-docs .am-ctl-btn[aria-pressed="true"] .am-i-pause, .am-docs .am-ctl-btn[aria-pressed="true"] .am-t-pause { display: inline; }
.am-docs .am-ctl-btn[aria-pressed="true"] .am-i-play, .am-docs .am-ctl-btn[aria-pressed="true"] .am-t-play { display: none; }

/* ── 첫 화면: 엑셀 창 틀 + 홈 탭 큰 단추 ── */
.am-docs .am-motion.is-hero { padding: 0; border: 0; background: transparent; }
.am-docs .am-motion.is-hero .am-flow, .am-docs .am-motion.is-hero .am-ctl { margin-left: 4px; }
.am-docs .am-xl { position: relative; overflow: hidden; border: 1px solid #b9c5de; border-radius: 14px; background: #fff; box-shadow: 0 24px 56px rgba(20, 32, 58, .2); }
.am-docs .am-xl-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--am-excel); color: #fff; font-size: 12px; font-weight: 700; }
.am-docs .am-xl-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.am-docs .am-xl-tabs { position: relative; display: flex; align-items: flex-end; gap: 2px; padding: 6px 10px 0; background: var(--am-excel); color: #fff; font-size: 12px; }
.am-docs .am-xl-tabs > span { flex: none; padding: 5px 12px; border-radius: 6px 6px 0 0; opacity: .85; white-space: nowrap; }
.am-docs .am-xl-tabs > span.is-on { background: #f3f3f3; color: var(--am-excel); opacity: 1; font-weight: 800; }
.am-docs .am-xl-tabs > .am-xl-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px auto; padding: 5px 12px; border-radius: 8px; opacity: 1;
  background: #fff; color: var(--am-excel); font-size: 13px; font-weight: 800; transition: box-shadow .3s var(--am-ease), transform .3s var(--am-ease);
}
.am-docs .am-xl-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.am-docs .am-xl-cursor { position: absolute; top: 50px; right: 22px; 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: transform .6s var(--am-ease), opacity .4s; }
.am-docs .am-xl[data-ribbon="idle"] .am-xl-cursor { transform: translate(-140px, 120px); }
.am-docs .am-xl[data-ribbon="press"] .am-xl-btn { transform: scale(.94); box-shadow: 0 0 0 4px rgba(255, 255, 255, .5); }
.am-docs .am-xl[data-ribbon="done"] .am-xl-btn { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.am-docs .am-xl .am-stage { padding: 14px; background: #eef1f6; }
.am-docs .am-xl .am-sheet-scroll { box-shadow: 0 1px 0 rgba(20, 32, 58, .05); }

.am-docs .am-motion.is-hero .am-pane-frame { max-height: 230px; }
.am-docs .am-motion.is-hero .am-xl .am-stage { padding: 10px; }
.am-docs .am-motion.is-hero .am-flow, .am-docs .am-motion.is-hero .am-ctl { margin-top: 8px; }
@media (min-width: 760px) {
  .am-docs .am-motion.is-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .am-docs .am-motion.is-hero .am-xl { grid-column: 1 / -1; }
}

/* ── 전이를 잠깐 끄기(되감기·결과 보기) ── */
.am-docs .am-notrans, .am-docs .am-notrans * { transition: none; animation: none; }

/* 크게 보기 */
.am-docs .am-zoom { display: none; margin: 6px 0 0 6px; padding: 1px 10px; border: 1px solid #b9c5de; border-radius: 999px; background: #fff; color: var(--am-blue-deep); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.am-docs.am-js .am-zoom { display: inline-block; }
.am-docs .am-layer img, .am-docs .am-scenefig img { cursor: zoom-in; }
.am-docs .am-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: rgba(12, 20, 38, .86); }
.am-docs .am-lightbox-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.am-docs .am-lightbox-bar .am-ctl-btn { text-decoration: none; }
.am-docs .am-lightbox-scroll { flex: 1; min-height: 0; overflow: auto; border-radius: 10px; background: #fff; text-align: center; }
.am-docs .am-lightbox-scroll img { display: inline-block; max-width: none; height: auto; cursor: default; }

@media (max-width: 460px) {
  .am-docs .am-xl-tabs > span:nth-child(n+3):not(.am-xl-btn) { display: none; }
}
@media (min-width: 760px) {
  .am-docs .am-motion.has-pane .am-stage { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); }
  .am-docs .am-motion:not(.has-pane) .am-result { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
  .am-docs .am-motion:not(.has-pane) .am-arrow { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .am-docs .am-motion .am-ctl, .am-docs .am-motion.is-ready .am-ctl { display: none; }
  .am-docs .am-motion *, .am-docs .am-motion *::before, .am-docs .am-motion *::after { transition: none; animation: none; }
  .am-docs .am-xl-cursor { display: none; }
}

/* 첫 화면은 접힘 안에 조작 단추까지 들어오게 설명 한 줄을 줄인다(같은 내용은 설명서에 있다). */
.am-docs .am-motion.is-hero .am-note { display: none; }
.am-docs .am-motion.is-hero .am-tag--ex { margin-top: 6px; }