/* ai-compose · 생활 속의 AI (2026-09-11)
   Scoped slide styles. Everything lives under .compose-slide so the shared
   board shell is untouched. Sizes use cqi/cqh against the `slide` container
   (#slide-root) with rem floors so a narrow portrait canvas stays readable.
   Palette is lifted from the original PPTX: paper #F5EAD8, ink #201E1D,
   brown #8C491A / #C67139, olive #3D472B, moss #E1EECC. */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;700&display=swap');

.compose-slide {
  --paper: #F5EAD8;
  --paper-2: #EBDDC5;
  --paper-3: #FFF7EA;
  --ink: #201E1D;
  --ink-soft: #5C544D;
  --brown: #8C491A;
  --brown-2: #C67139;
  --brown-dark: #643312;
  --olive: #3D472B;
  --moss: #E1EECC;
  --line: rgba(32, 30, 29, 0.18);

  --font-display: 'Jua', 'Noto Sans KR', 'IBM Plex Sans KR', sans-serif;
  --font-body: 'Noto Sans KR', 'IBM Plex Sans KR', system-ui, sans-serif;

  --fs-hero: max(8cqi, 2.6rem);
  --fs-title: max(4.2cqi, 1.85rem);
  --fs-q: max(3.8cqi, 1.65rem);
  --fs-lead: max(2.05cqi, 1.15rem);
  --fs-body: max(1.75cqi, 1.05rem);
  --fs-step: max(2cqi, 1.1rem);
  --fs-kicker: max(1.3cqi, 0.85rem);
  --fs-caption: max(1.15cqi, 0.8rem);

  --gap: max(1.6cqi, 0.9rem);
  --gap-lg: max(2.6cqi, 1.3rem);
  --pad-y: max(2.4cqi, 1.2rem);
  --pad-x: max(5cqi, 1.1rem);

  box-sizing: border-box;
  flex: 1 0 auto;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap);
  padding: var(--pad-y) var(--pad-x);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.compose-slide *, .compose-slide *::before, .compose-slide *::after { box-sizing: border-box; }
.compose-slide > * { max-width: 88cqi; margin: 0; }
.compose-slide ul, .compose-slide ol { list-style: none; padding: 0; }

.compose-slide--center { align-items: center; text-align: center; }
.compose-slide--center > * { margin-left: auto; margin-right: auto; }
.compose-slide--task { justify-content: flex-start; --gap: max(1.3cqi, 0.8rem); }

/* ---- typography ---------------------------------------------------- */
.compose-kicker {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brown);
}
.compose-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.18;
  color: var(--ink);
}
.compose-title--hero { font-size: var(--fs-hero); line-height: 1.05; }
.compose-title--q { font-size: var(--fs-q); max-width: 80cqi; }
.compose-title em { font-style: normal; color: var(--brown); }
.compose-lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.4; color: var(--ink); }
.compose-lead--muted { font-weight: 400; color: var(--ink-soft); }
.compose-byline { font-size: var(--fs-caption); color: var(--ink-soft); letter-spacing: 0.02em; }
.compose-quote {
  font-family: var(--font-display);
  font-size: max(2.6cqi, 1.3rem);
  line-height: 1.35;
  color: var(--brown-dark);
  padding: var(--gap) var(--gap-lg);
  border-left: max(0.4cqi, 4px) solid var(--brown);
  text-align: left;
}
.compose-slide--center .compose-quote { text-align: center; border-left: 0; border-top: max(0.25cqi, 2px) solid var(--brown); }

/* ---- cover / profile ------------------------------------------------ */
.compose-cover { gap: var(--gap-lg); }
.compose-profile {
  width: max(14cqi, 6.5rem);
  height: max(14cqi, 6.5rem);
  border-radius: 50%;
  overflow: hidden;
  border: max(0.35cqi, 3px) solid var(--paper-2);
  box-shadow: 0 0 0 max(0.15cqi, 1px) var(--line);
}
.compose-profile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- split (text + figure) ----------------------------------------- */
.compose-slide--split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--gap-lg);
}
.compose-slide--split > * { max-width: none; }
.compose-slide--media-wide { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
.compose-slide--media-narrow { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr); }
.compose-split__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap); min-width: 0; }

.compose-figure { display: flex; flex-direction: column; gap: max(0.6cqi, 0.35rem); min-width: 0; }
.compose-figure__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: max(28cqh, 9rem);
  max-height: 68cqh;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.compose-figure--photo .compose-figure__frame { background: var(--paper-2); }
.compose-figure--shot .compose-figure__frame { background: var(--paper-3); }
.compose-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 68cqh;
  height: auto;
  object-fit: contain;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  text-align: center;
  padding: 0;
}
.compose-figure figcaption { font-size: var(--fs-caption); color: var(--ink-soft); }

/* ---- O·X quiz ------------------------------------------------------- */
.compose-ox { gap: var(--gap-lg); }
.compose-ox__opts { display: flex; gap: max(6cqi, 2rem); justify-content: center; }
.compose-ox__o, .compose-ox__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(14cqi, 5.5rem);
  height: max(14cqi, 5.5rem);
  border-radius: 50%;
  border: max(0.45cqi, 4px) solid currentColor;
  font-family: var(--font-display);
  font-size: max(8cqi, 3rem);
  line-height: 1;
}
.compose-ox__o { color: var(--olive); }
.compose-ox__x { color: var(--brown); }

.compose-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: max(8.5cqi, 3.8rem);
  height: max(8.5cqi, 3.8rem);
  border-radius: 50%;
  border: max(0.35cqi, 3px) solid currentColor;
  line-height: 1;
  transform: rotate(-8deg);
}
.compose-stamp b { font-family: var(--font-display); font-weight: 400; font-size: max(4.2cqi, 1.8rem); }
.compose-stamp small { font-size: max(1cqi, 0.65rem); font-weight: 700; letter-spacing: 0.08em; }
.compose-stamp--o { color: var(--olive); }
.compose-stamp--x { color: var(--brown); }

/* ---- step chain ----------------------------------------------------- */
.compose-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: max(1cqi, 0.5rem) max(0.8cqi, 0.4rem);
}
.compose-step { display: inline-flex; align-items: center; gap: max(0.9cqi, 0.45rem); }
.compose-step + .compose-step::before {
  content: '→';
  color: var(--brown-2);
  font-size: var(--fs-step);
  margin-right: max(0.8cqi, 0.4rem);
}
.compose-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: max(3.6cqi, 1.9rem);
  height: max(3.6cqi, 1.9rem);
  border-radius: 50%;
  background: var(--brown);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: max(2cqi, 1.05rem);
  line-height: 1;
}
.compose-step__label { font-family: var(--font-display); font-size: var(--fs-step); line-height: 1.2; }
.compose-steps--small { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: max(0.8cqi, 0.4rem); }
.compose-steps--small .compose-step + .compose-step::before { content: none; }
.compose-steps--small .compose-step__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-lead); }

/* ---- tiles (check-in, vote) ---------------------------------------- */
.compose-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
}
.compose-tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 70cqi; }
.compose-tile {
  display: flex;
  flex-direction: column;
  gap: max(0.8cqi, 0.4rem);
  padding: var(--gap) var(--gap);
  background: var(--paper-2);
  border: 1px solid var(--line);
  min-height: max(14cqh, 5rem);
  text-align: left;
}
.compose-tiles--three .compose-tile { align-items: center; justify-content: center; text-align: center; }
.compose-tile__n { font-family: var(--font-display); font-size: max(3cqi, 1.5rem); color: var(--brown); line-height: 1; }
.compose-tile__t { font-size: var(--fs-lead); font-weight: 500; line-height: 1.35; }
.compose-tiles--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 76cqi; }
.compose-tiles--steps .compose-tile {
  flex-direction: row;
  align-items: center;
  gap: max(2cqi, 1rem);
  min-height: max(16cqh, 6rem);
  padding: max(2cqi, 1rem) max(2.6cqi, 1.2rem);
}
.compose-tiles--steps .compose-tile__n { flex-shrink: 0; font-size: max(5.2cqi, 2.6rem); }
.compose-tiles--steps .compose-tile__t { font-family: var(--font-display); font-weight: 400; font-size: max(2.7cqi, 1.4rem); }

/* ---- word chips ----------------------------------------------------- */
.compose-words { display: flex; flex-wrap: wrap; justify-content: center; gap: max(1cqi, 0.5rem) max(2.4cqi, 1rem); }
.compose-slide--task .compose-words, .compose-split__text .compose-words { justify-content: flex-start; }
.compose-words li {
  font-size: var(--fs-lead);
  font-weight: 500;
  padding: 0 max(0.4cqi, 0.2rem) max(0.3cqi, 0.15rem);
  border-bottom: max(0.25cqi, 2px) solid var(--brown-2);
}
.compose-words--big li { font-family: var(--font-display); font-weight: 400; font-size: max(3.6cqi, 1.6rem); }

/* ---- talk (demo transcript) ---------------------------------------- */
.compose-talk { display: flex; flex-direction: column; gap: max(1cqi, 0.5rem); width: 100%; }
.compose-say {
  position: relative;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.4;
  padding: max(0.6cqi, 0.3rem) 0 max(0.6cqi, 0.3rem) max(2.2cqi, 1rem);
  border-left: max(0.4cqi, 4px) solid var(--brown);
  color: var(--ink);
}
.compose-reply {
  display: flex;
  flex-direction: column;
  gap: max(0.3cqi, 0.15rem);
  padding: max(1cqi, 0.5rem) max(1.4cqi, 0.7rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.compose-reply span { font-size: var(--fs-caption); font-weight: 700; color: var(--brown); letter-spacing: 0.05em; }

/* ---- roles / cards -------------------------------------------------- */
.compose-roles, .compose-two, .compose-three { display: grid; gap: var(--gap); width: 100%; }
.compose-roles, .compose-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compose-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compose-role, .compose-card {
  display: flex;
  flex-direction: column;
  gap: max(0.8cqi, 0.4rem);
  padding: var(--gap) var(--gap);
  background: var(--paper-2);
  border: 1px solid var(--line);
  text-align: left;
  min-width: 0;
}
.compose-role h3, .compose-card h3 {
  display: flex;
  align-items: center;
  gap: max(0.8cqi, 0.4rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(2.4cqi, 1.2rem);
  color: var(--brown);
  line-height: 1.2;
}
.compose-card h3 b { font-weight: 400; }
.compose-role li, .compose-card li, .compose-tips li {
  position: relative;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  padding-left: max(1.8cqi, 0.9rem);
}
.compose-role li::before, .compose-card li::before, .compose-tips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: max(0.7cqi, 0.35rem);
  height: max(0.7cqi, 0.35rem);
  background: var(--brown-2);
}
.compose-card p { font-size: var(--fs-lead); font-weight: 500; }
.compose-card .compose-say { margin-top: max(0.6cqi, 0.3rem); }
.compose-card--ok { border-color: var(--olive); }
.compose-card--ok h3 { color: var(--olive); }
.compose-card--redo { border-color: var(--brown-2); }
.compose-tips { display: flex; flex-direction: column; gap: max(0.6cqi, 0.3rem); }
.compose-three--compact .compose-card { padding: max(1.1cqi, 0.7rem) max(1.3cqi, 0.8rem); gap: max(0.5cqi, 0.3rem); }
.compose-three--compact .compose-card li, .compose-three--compact .compose-card p { font-size: var(--fs-body); line-height: 1.3; }
.compose-three--compact .compose-card h3 { font-size: max(2.1cqi, 1.1rem); }
.compose-slide--media-narrow .compose-role { padding: max(1.1cqi, 0.7rem) max(1.3cqi, 0.8rem); gap: max(0.5cqi, 0.3rem); }
.compose-slide--media-narrow .compose-role li { font-size: var(--fs-body); line-height: 1.3; }

/* ---- numbered lines (prompt sentences) ----------------------------- */
.compose-lines { display: flex; flex-direction: column; gap: max(0.8cqi, 0.4rem); counter-reset: line; width: 100%; }
.compose-lines li {
  display: flex;
  align-items: center;
  gap: max(1cqi, 0.5rem);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
}
.compose-lines li::before {
  counter-increment: line;
  content: counter(line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: max(3cqi, 1.6rem);
  height: max(3cqi, 1.6rem);
  border-radius: 50%;
  background: var(--brown);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: max(1.7cqi, 0.95rem);
}
.compose-lines--pick li { font-family: var(--font-display); font-weight: 400; font-size: max(3cqi, 1.35rem); }

/* ---- prompt paper --------------------------------------------------- */
.compose-prompt {
  width: 100%;
  max-width: 78cqi;
  padding: var(--gap-lg) var(--gap-lg);
  background: var(--paper-3);
  border: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.6em - 1px), var(--line) calc(1.6em - 1px), var(--line) 1.6em);
  background-origin: content-box;
  text-align: left;
}
.compose-prompt p { font-size: max(2.7cqi, 1.25rem); font-weight: 500; line-height: 1.6; }
.compose-blank {
  display: inline-block;
  min-width: max(9cqi, 4rem);
  padding: 0 max(1cqi, 0.4rem);
  border-bottom: max(0.3cqi, 2px) solid var(--brown);
  color: var(--brown);
  font-weight: 700;
  text-align: center;
}

/* ---- A / B ---------------------------------------------------------- */
.compose-ab { display: flex; gap: max(4cqi, 1.5rem); }
.compose-ab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(15cqi, 5.5rem);
  height: max(15cqi, 5.5rem);
  border: max(0.4cqi, 3px) solid var(--brown);
  background: var(--paper-3);
  font-family: var(--font-display);
  font-size: max(8cqi, 3rem);
  color: var(--brown);
  line-height: 1;
}

/* ---- progress ------------------------------------------------------- */
.compose-progress { font-family: var(--font-display); font-size: var(--fs-lead); color: var(--brown-2); line-height: 1; }
.compose-progress b { font-weight: 400; font-size: max(3.6cqi, 1.6rem); color: var(--brown); }

/* ---- inline checklist (renderer hooks) ----------------------------- */
.compose-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); width: 100%; }
.compose-check {
  display: flex;
  align-items: center;
  gap: max(1.2cqi, 0.6rem);
  width: 100%;
  max-width: 70cqi;
  padding: max(1.2cqi, 0.6rem) max(1.6cqi, 0.8rem);
  background: var(--paper-3);
  border: max(0.2cqi, 2px) solid var(--line);
  border-radius: max(0.6cqi, 6px);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.compose-checks .compose-check { max-width: none; }
.compose-slide--center .compose-check { margin-left: auto; margin-right: auto; }
/* slide.js rewrites the box/label className; pin size and colour back. */
.compose-check [data-check-box] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: max(2.8cqi, 1.6rem) !important;
  height: max(2.8cqi, 1.6rem) !important;
  border: max(0.22cqi, 2px) solid var(--brown) !important;
  border-radius: max(0.4cqi, 4px) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.compose-check [data-check-label] {
  font-family: var(--font-body) !important;
  font-size: var(--fs-lead) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}
/* Done state: slide.js swaps border-white/10 → border-amber-400/70. */
.compose-check.border-amber-400\/70 { background: var(--moss); border-color: var(--olive); }
.compose-check.border-amber-400\/70 [data-check-box] { background: var(--olive) !important; border-color: var(--olive) !important; }
.compose-check.border-amber-400\/70 [data-check-box] svg { color: #fff !important; width: 72% !important; height: 72% !important; }
.compose-check.border-amber-400\/70 [data-check-label] { color: var(--olive) !important; font-weight: 700 !important; }

/* ---- field input ---------------------------------------------------- */
.compose-field { display: flex; flex-direction: column; gap: max(0.4cqi, 0.2rem); width: 100%; max-width: 70cqi; text-align: left; }
.compose-card .compose-field { max-width: none; margin-top: max(0.6cqi, 0.3rem); }
.compose-field__label { font-size: var(--fs-caption); font-weight: 700; color: var(--brown); letter-spacing: 0.03em; }
.compose-field input {
  width: 100%;
  padding: max(0.9cqi, 0.5rem) max(1.2cqi, 0.6rem);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-bottom: max(0.25cqi, 2px) solid var(--brown);
  border-radius: 0;
  outline: none;
}
.compose-field input::placeholder { color: var(--ink-soft); opacity: 0.7; font-weight: 400; }
.compose-field input:focus { box-shadow: inset 0 max(-0.3cqi, -3px) 0 0 var(--brown-2); }

/* ---- participant-view reference (text only, never a drawn UI) ------ */
.compose-phone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: max(1cqi, 0.5rem);
  width: 100%;
  max-width: 70cqi;
  padding: max(1cqi, 0.5rem) max(1.4cqi, 0.7rem);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-left: max(0.5cqi, 5px) solid var(--brown-2);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}
.compose-phone span {
  flex-shrink: 0;
  padding: max(0.3cqi, 0.15rem) max(0.8cqi, 0.4rem);
  background: var(--brown-2);
  color: var(--paper);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.compose-phone b { color: var(--brown-dark); font-weight: 700; }
.compose-slide--center .compose-phone { margin-left: auto; margin-right: auto; }
.compose-talk--wide { max-width: 72cqi; text-align: left; }

/* ---- video ---------------------------------------------------------- */
.compose-video {
  position: relative;
  width: min(100%, 78cqi);
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--line);
}
.compose-video video { width: 100%; height: 100%; display: block; }

.compose-pause { gap: var(--gap-lg); }

/* ---- figure caption source line, before/after pair ----------------- */
.compose-figure figcaption { display: flex; flex-direction: column; gap: max(0.2cqi, 0.1rem); }
.compose-figure figcaption small, .compose-pair figcaption small { font-size: var(--fs-caption); color: var(--ink-soft); opacity: 0.85; }
.compose-figure figcaption { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.compose-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(1.2cqi, 0.6rem) max(2cqi, 1rem); min-width: 0; margin: 0; }
.compose-pair figcaption { grid-column: 1 / -1; }
.compose-pair__item { display: flex; flex-direction: column; gap: max(0.5cqi, 0.3rem); min-width: 0; position: relative; }
.compose-pair__item .compose-figure__frame { min-height: 0; max-height: 56cqh; }
.compose-pair__item img { max-height: 50cqh; width: 100%; object-fit: contain; }
.compose-pair__item p { font-family: var(--font-display); font-size: var(--fs-step); color: var(--brown-dark); line-height: 1.2; }
.compose-pair--arrow .compose-pair__item + .compose-pair__item::before {
  content: '→';
  position: absolute;
  left: max(-1.6cqi, -0.9rem);
  top: 40%;
  transform: translateX(-50%);
  color: var(--brown-2);
  font-size: max(2.4cqi, 1.2rem);
  line-height: 1;
}

/* ---- call-to-action button (wired by the shell via data-compose-open) */
.compose-cta {
  appearance: none;
  border: max(0.3cqi, 3px) solid var(--brown);
  background: var(--brown);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: max(3cqi, 1.4rem);
  line-height: 1;
  padding: max(1.6cqi, 0.8rem) max(4cqi, 1.6rem);
  border-radius: max(0.8cqi, 8px);
  cursor: pointer;
}
.compose-cta:hover, .compose-cta:focus-visible { background: var(--brown-dark); border-color: var(--brown-dark); }
.compose-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: max(1.2cqi, 0.6rem); }
a.compose-cta { text-decoration: none; display: inline-flex; align-items: center; }
.compose-cta--secondary { background: var(--paper-3); color: var(--brown-dark); }
.compose-cta--secondary:hover, .compose-cta--secondary:focus-visible { background: var(--paper-2); color: var(--brown-dark); border-color: var(--brown-dark); }
.compose-cta[hidden] { display: none !important; }
.compose-link { color: var(--brown); text-decoration: underline; text-underline-offset: 0.15em; font-weight: 700; }
.compose-card .compose-words { justify-content: flex-start; gap: max(0.6cqi, 0.3rem) max(1.4cqi, 0.7rem); }
.compose-card .compose-words li { font-size: var(--fs-body); }

/* ---- app screenshots (portrait) and join QR --------------------------- */
.compose-figure--shot { align-items: center; }
.compose-figure--shot .compose-figure__frame { width: auto; max-width: 100%; min-height: 0; border-radius: max(1.2cqi, 10px); }
.compose-figure--shot img { width: auto; max-height: 68cqh; }
.compose-figure--shot figcaption { text-align: center; }
.compose-qr { display: flex; flex-direction: column; align-items: center; gap: max(0.8cqi, 0.4rem); margin: 0; min-width: 0; }
.compose-qr img { width: min(26cqi, 100%); max-width: 16rem; aspect-ratio: 1 / 1; background: #fff; padding: max(1cqi, 0.5rem); border: 1px solid var(--line); }
.compose-qr figcaption { display: flex; flex-direction: column; align-items: center; gap: max(0.2cqi, 0.1rem); font-size: var(--fs-lead); font-weight: 500; text-align: center; }
.compose-qr figcaption small { font-size: var(--fs-caption); color: var(--ink-soft); }
.compose-card h3 b { font-family: var(--font-display); color: var(--paper); background: var(--brown); border-radius: 50%; width: max(3cqi, 1.6rem); height: max(3cqi, 1.6rem); display: inline-flex; align-items: center; justify-content: center; font-size: max(1.8cqi, 1rem); flex-shrink: 0; }
.compose-card--ok h3 b, .compose-card--redo h3 b { background: none; color: inherit; width: auto; height: auto; font-size: inherit; }

/* ---- narrow / portrait canvas -------------------------------------- */
@container slide (max-width: 720px) or (max-aspect-ratio: 1/1) {
  .compose-slide { --pad-x: max(4cqi, 1rem); justify-content: flex-start; }
  .compose-slide > * { max-width: 100%; }
  .compose-slide--split { grid-template-columns: minmax(0, 1fr); }
  .compose-figure__frame, .compose-figure img { max-height: 50cqh; }
  .compose-steps { flex-direction: column; align-items: flex-start; }
  .compose-slide--center .compose-steps { align-items: center; }
  .compose-step + .compose-step::before { content: '↓'; margin-right: 0; }
  .compose-slide--center .compose-step + .compose-step::before { display: none; }
  .compose-tiles, .compose-tiles--three, .compose-tiles--steps, .compose-roles, .compose-two, .compose-three, .compose-checks { grid-template-columns: minmax(0, 1fr); }
  .compose-tiles--three, .compose-tiles--steps { max-width: 100%; }
  .compose-tiles--steps .compose-tile { min-height: 6rem; }
  .compose-tile { min-height: 0; }
  .compose-ox__opts { gap: 2rem; }
  .compose-prompt { max-width: 100%; }
  .compose-check, .compose-field, .compose-phone, .compose-talk--wide { max-width: 100%; }
  .compose-title--q { max-width: 100%; }
  .compose-video { width: 100%; }
  .compose-pair { grid-template-columns: minmax(0, 1fr); }
  .compose-figure--shot img { max-height: 60cqh; }
  .compose-qr img { width: min(60cqi, 14rem); }
  .compose-pair--arrow .compose-pair__item + .compose-pair__item::before { content: none; }
  .compose-pair__item .compose-figure__frame, .compose-pair__item img { max-height: 36cqh; }
}

/* v1 source evidence: original purchase image plus author's own clarification. */
.compose-v1-proof{display:flex;flex-direction:column;gap:1.2cqh;min-width:0}
.compose-v1-proof .compose-figure{margin:0}
.compose-v1-proof .compose-figure__frame{max-height:27cqh}
.compose-v1-proof .compose-figure__frame img{max-height:27cqh;object-fit:contain;width:100%}
@media(max-width:700px){.compose-v1-proof{gap:20px}.compose-v1-proof .compose-figure__frame,.compose-v1-proof .compose-figure__frame img{max-height:none}}