/* 회계매크로 「보고서 작업」 PPT 왕복 시연 — motion.css 의 토큰 위에 얹는다. 모든 규칙은 .am-docs 아래로만.
   기본값이 「끝난 상태」(두 칸이 고쳐진 슬라이드)라 스크립트가 없거나 움직임 줄이기에서도 완성 그림이 보인다.
   @keyframes 는 from 만 쓴다. 단계 표시는 data-rt(slide | import | edit | apply | done) — motion.css 의 data-phase 와 섞이지 않게 따로 쓴다. */

.am-docs .am-motion--rt { container-type: inline-size; }
.am-docs .am-rt {
  --rt-ppt: #b7472a;
  --rt-ppt-wash: #fbe9e3;
  display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0;
  grid-template-areas: "slide" "mid" "sheet";
}
.am-docs .am-rt-slide { grid-area: slide; margin: 0; min-width: 0; }
.am-docs .am-rt-sheet { grid-area: sheet; min-width: 0; }
.am-docs .am-rt-mid { grid-area: mid; }

/* ── PPT 슬라이드(16:9 카드) ── */
.am-docs .am-rt-card {
  container-type: inline-size; max-width: 460px; aspect-ratio: 16 / 9; padding: clamp(12px, 3cqw, 22px); overflow: hidden;
  border: 1px solid #c9d2e3; border-top: 5px solid var(--rt-ppt); border-radius: 8px; background: #fff;
  box-shadow: 0 6px 18px rgba(20, 32, 58, .12);
}
.am-docs .am-rt-title { margin: 0; font-size: max(15px, 6cqw); font-weight: 800; line-height: 1.3; color: var(--am-ink); }
.am-docs .am-rt-body { margin: 2cqw 0 4cqw; font-size: max(12px, 4cqw); line-height: 1.4; color: var(--am-muted); }
.am-docs .am-rt-title span, .am-docs .am-rt-body span { display: inline-block; padding: 0 1.5cqw; margin: 0 -1.5cqw; border-radius: 4px; }
.am-docs .am-rt-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; font-size: clamp(10px, 3.8cqw, 16px); line-height: 1.4; }
.am-docs .am-rt-table th, .am-docs .am-rt-table td {
  padding: 1.1cqw 2cqw; border: 1px solid #c9d2e3; text-align: left; vertical-align: middle; font-size: inherit; font-weight: 400; word-break: keep-all; overflow-wrap: normal; background: transparent;
}
.am-docs .am-rt-table th { background: var(--rt-ppt-wash); color: var(--am-ink); font-weight: 700; }
.am-docs .am-rt-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.am-docs .am-rt-slide figcaption {
  display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 6px;
  background: var(--rt-ppt-wash); color: var(--rt-ppt); font-size: 12px; font-weight: 700;
}

/* 엑셀 쪽 */
.am-docs .am-rt-tabs { display: flex; gap: 4px; margin-bottom: 4px; font-size: 12px; font-weight: 700; }
.am-docs .am-rt-tabs span { padding: 2px 10px; border-radius: 6px 6px 0 0; background: #eceef3; color: #5d6678; }
.am-docs .am-rt-tabs .am-rt-newtab { background: #e8f1ec; color: var(--am-excel); box-shadow: inset 0 -3px 0 var(--am-excel); transition: opacity .4s var(--am-ease); }
.am-docs .am-rt .am-grid th, .am-docs .am-rt .am-grid td { padding: 3px 6px; font-size: 12px; }
.am-docs .am-rt .am-grid .am-heads th { white-space: normal; }
.am-docs .am-rt .am-grid td, .am-docs .am-rt .am-grid th { overflow-wrap: normal; }
.am-docs .am-rt-sheet { transition: opacity .5s var(--am-ease); }
.am-docs .am-rt-row { transition: opacity .25s var(--am-ease); }
.am-docs .am-rt-row.is-wait { opacity: 0; }
.am-docs .am-rt-row.is-new td { background: var(--am-blue-wash); }

/* 값 바꾸기: 슬라이드는 반영 뒤에야 새 값, 시트는 고친 뒤부터 이전 값에 줄을 긋고 새 값을 보인다 */
.am-docs .am-rt .am-rt-new { display: none; }
.am-docs .am-rt[data-rt="apply"] .am-rt-slide .am-rt-old, .am-docs .am-rt[data-rt="done"] .am-rt-slide .am-rt-old { display: none; }
.am-docs .am-rt[data-rt="apply"] .am-rt-slide .am-rt-new, .am-docs .am-rt[data-rt="done"] .am-rt-slide .am-rt-new { display: inline; animation: am-pop .45s var(--am-ease) both; }
.am-docs .am-rt[data-rt="edit"] .am-rt-sheet .am-rt-new, .am-docs .am-rt[data-rt="apply"] .am-rt-sheet .am-rt-new, .am-docs .am-rt[data-rt="done"] .am-rt-sheet .am-rt-new { display: inline; font-weight: 800; color: var(--am-amber-ink); }
.am-docs .am-rt[data-rt="edit"] .am-rt-sheet .am-rt-new { animation: am-pop .45s var(--am-ease) both; }
.am-docs .am-rt[data-rt="edit"] .am-rt-sheet .am-rt-old, .am-docs .am-rt[data-rt="apply"] .am-rt-sheet .am-rt-old, .am-docs .am-rt[data-rt="done"] .am-rt-sheet .am-rt-old {
  margin-right: 6px; color: var(--am-muted); font-size: 11px; text-decoration: line-through;
}
.am-docs .am-rt[data-rt="edit"] .am-rt-sheet td.is-chg, .am-docs .am-rt[data-rt="apply"] .am-rt-sheet td.is-chg, .am-docs .am-rt[data-rt="done"] .am-rt-sheet td.is-chg {
  background: var(--am-amber-wash); box-shadow: inset 0 0 0 2px var(--am-amber);
}
.am-docs .am-rt[data-rt="apply"] .am-rt-slide .is-chg, .am-docs .am-rt[data-rt="done"] .am-rt-slide .is-chg {
  background: var(--am-amber-wash); box-shadow: inset 0 0 0 2px var(--am-amber);
}

/* 가져오는 동안 슬라이드에서 지금 옮기는 칸·이미 옮긴 칸 */
.am-docs .am-rt-slide .is-src { background: var(--am-blue-wash); box-shadow: inset 0 0 0 2px var(--am-blue); }
.am-docs .am-rt-slide .is-linked { box-shadow: inset 0 0 0 1px var(--am-blue); }

/* 슬라이드를 먼저 보여 줄 때는 아직 시트가 없다 */
.am-docs .am-rt[data-rt="slide"] .am-rt-sheet { opacity: .3; }
.am-docs .am-rt[data-rt="slide"] .am-rt-newtab { opacity: 0; }

/* 가운데: 누르는 단추와 방향 */
.am-docs .am-rt-mid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.am-docs .am-rt-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; opacity: .45; transition: opacity .3s var(--am-ease); }
.am-docs .am-rt-leg--in { justify-content: flex-end; }
.am-docs .am-rt-pill {
  display: inline-block; padding: 3px 10px; border: 1px solid #b9c5de; border-radius: 999px; background: #fff;
  color: var(--am-blue-deep); font-size: 12px; font-weight: 800; line-height: 1.4; text-align: center;
}
.am-docs .am-rt-arrow { color: var(--am-blue); font-size: 20px; font-style: normal; font-weight: 800; line-height: 1; }
.am-docs .am-rt-leg--in .am-rt-arrow::before { content: "↓"; }
.am-docs .am-rt-leg--out .am-rt-arrow::before { content: "↑"; }
.am-docs .am-rt[data-rt="import"] .am-rt-leg--in, .am-docs .am-rt[data-rt="apply"] .am-rt-leg--out, .am-docs .am-rt[data-rt="done"] .am-rt-leg--out { opacity: 1; }
.am-docs .am-rt[data-rt="import"] .am-rt-leg--in .am-rt-pill, .am-docs .am-rt[data-rt="apply"] .am-rt-leg--out .am-rt-pill, .am-docs .am-rt[data-rt="done"] .am-rt-leg--out .am-rt-pill {
  border-color: var(--am-blue); background: var(--am-blue); color: #fff;
}
.am-docs .am-rt[data-rt="import"] .am-rt-leg--in .am-rt-pill, .am-docs .am-rt[data-rt="apply"] .am-rt-leg--out .am-rt-pill { animation: am-rt-press .5s var(--am-ease) both; }
@keyframes am-rt-press { from { transform: scale(.88); box-shadow: 0 0 0 5px rgba(46, 96, 196, .3); } }

.am-docs .am-rt-cap { margin: 10px 0 0; color: var(--am-ink); font-size: 14px; font-weight: 700; }
.am-docs .am-motion--rt .am-note { margin-top: 4px; }
.am-docs .am-motion--rt .am-note em { white-space: nowrap; }

@container (max-width: 430px) {
  .am-docs .am-rt-card { aspect-ratio: auto; padding-bottom: 5cqw; }
  .am-docs .am-rt .am-grid th, .am-docs .am-rt .am-grid td { padding: 2px 4px; font-size: 11px; }
  .am-docs .am-rt .am-grid .am-rn { width: 24px; min-width: 24px; }
  .am-docs .am-rt .am-grid .am-rt-val { min-width: 4.5em; }
}
@container (max-width: 260px) {      /* 상품 페이지 360 폭 — 시트 칸이 잘리지 않게 여백·행 번호 열을 더 줄인다 */
  .am-docs .am-rt .am-grid th, .am-docs .am-rt .am-grid td { padding: 2px 3px; font-size: 10.5px; }
  .am-docs .am-rt .am-grid .am-rn { width: 18px; min-width: 18px; padding: 2px 1px; }
  .am-docs .am-rt .am-grid .am-corner { width: 18px; min-width: 18px; }
}
@container (min-width: 540px) {
  .am-docs .am-rt { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "slide sheet" "mid mid"; align-items: start; }
  .am-docs .am-rt-leg--in .am-rt-arrow::before { content: "→"; }
  .am-docs .am-rt-leg--out .am-rt-arrow::before { content: "←"; }
}

@media (prefers-reduced-motion: reduce) {
  .am-docs .am-rt *, .am-docs .am-rt *::before, .am-docs .am-rt *::after { transition: none; animation: none; }
}

/* 「PPT 내용」 시트: 구분 줄·제목 줄·글상자·표 모양 */
.am-docs .am-rt .am-grid .am-rt-band { background: #233466; color: #fff; font-weight: 800; }
.am-docs .am-rt .am-grid .am-rt-label { background: #e7e6e6; color: var(--am-ink); font-weight: 700; font-size: 11px; }
.am-docs .am-rt .am-grid .am-rt-box { white-space: normal; }
.am-docs .am-rt .am-grid .am-rt-hd { background: var(--rt-ppt-wash); font-weight: 700; }
.am-docs .am-rt .am-grid td { white-space: nowrap; }
.am-docs .am-rt-sum {
  margin: 6px 0 0; padding: 2px 10px; border-radius: 6px; background: var(--am-amber-wash); color: var(--am-amber-ink); font-size: 12px; font-weight: 700;
}
.am-docs .am-rt[data-rt="slide"] .am-rt-sum, .am-docs .am-rt[data-rt="import"] .am-rt-sum, .am-docs .am-rt[data-rt="edit"] .am-rt-sum { visibility: hidden; }

/* 두 슬라이드와 실제 시트의 빈 줄·안내문·요약 줄 */
.am-docs .am-rt-card:not(:first-child) { margin-top: 12px; }
.am-docs .am-rt-table th:first-child, .am-docs .am-rt-table td:first-child { width: 36%; }
.am-docs .am-rt .am-grid .am-rt-note { white-space: normal; max-width: 26em; font-size: 11px; }
.am-docs .am-rt .am-grid .am-rt-box { color: #17477c; }
.am-docs .am-rt-row--blank td { height: 20px; }
.am-docs .am-rt-summary { margin: 6px 0 0; font-size: 12px; color: var(--am-blue-deep); }
.am-docs .am-rt-summary--loaded { display: none; }
.am-docs .am-rt[data-rt="slide"] .am-rt-summary--loaded, .am-docs .am-rt[data-rt="import"] .am-rt-summary--loaded { display: block; }
.am-docs .am-rt[data-rt="slide"] .am-rt-summary--imported, .am-docs .am-rt[data-rt="import"] .am-rt-summary--imported { display: none; }