/* CONTTO NEXT web. Tokens and components follow DESIGN-GUIDE.md (same names). */

/* ---------- 3. colour tokens ---------- */
:root {
  color-scheme: light;
  --bg: var(--n2);
  --surface: var(--n1);
  --line: color-mix(in srgb, var(--n9) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--n9) 28%, transparent);
  --on-accent: var(--n9);
  --alert-text: var(--accent);
  --stage: var(--n9);
  --stage-text: var(--n2);
  --stage-text-2: var(--n3);
  --stage-line: color-mix(in srgb, var(--n2) 14%, transparent);
  --glass-fill: color-mix(in srgb, var(--n2) 72%, transparent);
  --sheet-fill: color-mix(in srgb, var(--n2) 92%, transparent);
  --glass-solid: var(--n2);
  --glass-rim: color-mix(in srgb, var(--n0) 55%, transparent);
  --stage-glass-fill: color-mix(in srgb, var(--n9) 55%, transparent);
  --stage-glass-solid: var(--n7);
  --stage-surface: var(--n7);
  --stage-alert: var(--accent);
  --stage-ink: var(--n9);
  --stage-glass-rim: color-mix(in srgb, var(--n2) 16%, transparent);
  --shadow-float: var(--t-caption);

  /* 4. type */
  --fs-display-xl: clamp(var(--s6), 4.2vw + var(--s4), var(--s7));
  --fs-display-l: clamp(var(--s5), 1.6vw + var(--s5), var(--s6));
  --fs-display-m: clamp(var(--s5), .6vw + var(--s4), var(--s5));

  /* 5. space, radius, elevation */ --r-s: var(--s2); --r-m: var(--s3); --r-l: var(--s4); --r-xl: var(--s5);
  --top-h: calc(var(--s7) * 1.25);
  --bar-h: 0;

  /* 7. motion */
  --dur-press: 110ms; --dur-quick: 180ms; --dur-move: 320ms; --dur-show: 520ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(0, .017, .064, .131, .214, .304, .399, .493, .584, .67, .748, .818, .879, .931, .974, 1.009, 1.036, 1.056, 1.07, 1.079, 1.083, 1.083, 1.081, 1.076, 1.07, 1.063, 1.055, 1.047, 1.04, 1.032, 1.025, 1.019, 1.013, 1.008, 1.004, 1.001, 1);}
/* OWNER T335 (10-19): LIGHT ONLY — no dark theme; neither the OS setting nor a ?theme= switch changes the palette */
@media (min-width: 768px) { :root { --top-h: calc(var(--s7) * 1.42);} }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box;}
html { -webkit-text-size-adjust: 100%;}
body {
  margin: 0; background: var(--bg); color: var(--n9);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6;
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;}
h1, h2, h3, p { margin: 0;}
h1, h2, h3 { font-family: var(--font); font-weight: var(--fw-regular); text-wrap: balance; letter-spacing: var(--track-tight);}
img { display: block; max-width: 100%; height: auto;}
figure { margin: 0;}
button, input { font: inherit; color: inherit;}
button { cursor: pointer;}
:focus-visible { outline: var(--hair2) solid var(--n9); outline-offset: var(--hair2);}
.stage :focus-visible { outline-color: var(--stage-text);}
.sr { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.num { font-variant-numeric: tabular-nums;}
[hidden] { display: none !important;}

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  height: var(--top-h); padding: env(safe-area-inset-top, 0) var(--gutter) 0;
  display: flex; align-items: center; gap: var(--s4);
  background: var(--bg); border-bottom: var(--hair) solid var(--line);}
.mark {
  font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight); color: var(--n9); text-decoration: none;
  padding: var(--s2) 0; white-space: nowrap;}
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); flex: 1; max-width: calc(var(--s7) * 7.5); margin-left: auto;}
.steps li { flex: 1; height: var(--s1); border-radius: var(--pill); background: var(--n2); transition: background-color var(--dur-quick) var(--ease-out);}
.steps li.on { background: var(--n9);}
.steps li.now { background: var(--accent); box-shadow: 0 0 0 var(--hair) var(--n9) inset;}
.step-name { font-size: var(--fs-caption); color: var(--n5); white-space: nowrap; min-width: calc(var(--s7) * 1.41); text-align: right; margin-left: auto;}
@media (max-width: 479px) { .step-name { display: none;} }

.ds-btn.ds-btn--ghost.is-icon .count {
  position: absolute; top: var(--s1); right: var(--hair2); min-width: var(--s4); height: var(--s4); padding: 0 var(--s1); border-radius: var(--pill);
  background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); text-align: center;}
.back-btn {   /* owner D5: a visible, labelled 뒤로 on every choice screen (the browser back does the same) */
  display: inline-flex; align-items: center; gap: var(--hair2); height: var(--s7); flex: none; padding: 0 var(--s3) 0 var(--s1); margin-left: calc(var(--s2) * -1);
  border: 0; border-radius: var(--pill); background: transparent; color: var(--n9); font: var(--t-body-strong);
  transition: background-color var(--dur-quick) var(--ease-out);}
.back-btn svg { width: var(--s5); height: var(--s5);}
@media (hover: hover) { .back-btn:hover { background: var(--n2);} }

.ico { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;}

/* ---------- layout ---------- */
main { padding: var(--s5) var(--gutter) calc(var(--bar-h) + var(--s7)); max-width: calc(var(--s7) * 25.83); margin: 0 auto;}
.step { display: none;}
.step.on { display: block;}
.lead { color: var(--n5); font-size: var(--fs-body); margin-top: var(--s2);}
.meta { color: var(--n5); font-size: var(--fs-caption);}
.work { display: grid; gap: var(--s5);}
.work-head { display: grid; gap: var(--s2); align-content: start;}
.work-head h2 { font-size: var(--fs-title); line-height: 1.3; outline: none;}
@media (min-width: 960px) {
  .work { grid-template-columns: minmax(calc(var(--s7) * 5.83), calc(var(--s7) * 7.5)) minmax(0, 1fr); column-gap: var(--s7); row-gap: var(--s5); align-items: start;}
  .work-head { position: sticky; top: calc(var(--top-h) + var(--s5));}
  .work-persona { grid-template-areas: "head list" "evi list" "card list"; grid-template-rows: auto auto 1fr;}
  .work-persona .work-head { grid-area: head; position: static;}
  .work-persona .evi-slot { grid-area: evi;}
  .work-persona .choices { grid-area: list;}
  .work-persona .brandcard { grid-area: card; align-self: start; position: sticky; top: calc(var(--top-h) + var(--s5));}
}

/* ---------- 8. buttons ---------- */

/* ---------- link step ---------- */
.hero { display: grid; gap: var(--s6); padding-top: var(--s3);}
.hero h1 { font-size: var(--fs-display); line-height: 1.15; outline: none;}
.hero .lead { font-size: var(--fs-title); max-width: calc(var(--s7) * 9.38); margin-top: var(--s3);}
.linkform { display: grid; gap: var(--s2); margin-top: var(--s5); max-width: calc(var(--s7) * 11.67);}
.linkform label { font: var(--t-caption-strong); color: var(--n5);}
.url-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--s5);}
.url-head .ds-btn--ghost { min-height: var(--s6); padding-block: var(--s1); margin-block: calc(-1 * var(--s1));}   /* 44px with the row's own height */
.field { display: flex; gap: var(--s2);}
.field input {
  flex: 1; min-width: 0; height: var(--s7); padding: 0 var(--s4); border-radius: var(--r-m);
  border: var(--hair2) solid var(--line-strong); background: var(--surface); font-size: var(--fs-body);
  transition: border-color var(--dur-quick) var(--ease-out);}
.field input:focus-visible { outline: none; border-color: var(--n9); box-shadow: 0 0 0 var(--hair2) var(--accent);}
.field-note { font-size: var(--fs-caption); color: var(--n5);}
.auto-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s1);}
.auto-row .meta { flex: 1; min-width: calc(var(--s7) * 3.75);}
.choice .rec { justify-self: start; background: var(--n9); color: var(--bg); font-weight: var(--fw-bold);}
.choice.picked .rec { background: var(--on-accent); color: var(--accent);}
.bar-note { display: grid; gap: var(--s1);}
.auto-fill { display: block; height: var(--s1); border-radius: var(--pill); background: var(--line); overflow: hidden; position: relative;}
.auto-fill::after { content: ""; position: absolute; inset: 0; background: var(--n9); transform-origin: left; animation: auto-fill var(--ms) linear both;}
@keyframes auto-fill { from { transform: scaleX(0);} to { transform: scaleX(1);} }
.field-error { font: var(--t-caption-strong); color: var(--alert-text);}
.three { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s2) var(--s4); counter-reset: three;}
.three li { counter-increment: three; display: flex; align-items: baseline; gap: var(--s2); font-weight: var(--fw-bold);}
.three li::before { content: counter(three); font: var(--t-caption); color: var(--on-accent); background: var(--accent); border-radius: var(--pill); width: var(--s5); height: var(--s5); display: inline-grid; place-items: center; flex: none; transform: translateY(var(--s1));}
.three-caption { margin-top: var(--s2);}
.example { display: grid; gap: var(--s2); align-content: start;}
.example img { width: 100%; max-width: calc(var(--s7) * 8.75); aspect-ratio: 1; object-fit: cover; border-radius: var(--r-l);}
.example figcaption { font-size: var(--fs-caption); color: var(--n5);}
.slogan { margin-top: var(--s7); font-size: var(--fs-caption); color: var(--n5);}
.hero-side { display: grid; gap: var(--s6); align-content: start;}
/* T349 §2 home story (root 02:38Z): one real brand's before → after — the brand's own bullets, all the same size, then the same points as one ad */
.home-story { display: grid; gap: var(--s2); align-content: start;}
.home-story .hs-cap { margin: 0; font: var(--t-body); color: var(--n9); word-break: keep-all;}
.home-story .hs-card { display: grid; gap: var(--s2); padding: var(--s3) var(--s3); border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2); color: inherit; text-decoration: none;}
.home-story .hs-tag { margin: 0; font-size: var(--fs-caption); line-height: 1.35; color: var(--n5);}
.home-story .hs-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--hair2) var(--s3); font-size: var(--fs-body); line-height: 1.4; color: var(--n9);}
.home-story .hs-list li::before { content: "✔"; margin-right: var(--s1); color: var(--n5);}
.home-story .hs-list .hs-more { color: var(--n5);}
.home-story .hs-list .hs-more::before { content: none;}
.home-story .hs-open { float: right; color: var(--accent);}
.home-story .hs-after img { display: block; width: 100%; max-width: calc(var(--s7) * 7.92); height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin: 0 auto; border-radius: calc(var(--r3) - var(--r1));}
/* T398: the two-film player (9:16), the films stacked, the playing one on top; a small sound hint */
.home-story .hs-player { position: relative; width: 100%; max-width: calc(var(--s7) * 5); aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border-radius: calc(var(--r3) - var(--r1)); background: var(--n9); cursor: pointer;}
.home-story .hs-player:focus-visible { outline: var(--hair2) solid var(--accent); outline-offset: var(--hair2);}
.home-story .hs-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;}
.home-story .hs-v.on { opacity: 1;}
.home-story .hs-sound { position: absolute; right: var(--s2); bottom: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--pill); background: var(--scrim); color: var(--n0); font-size: var(--fs-caption); line-height: 1.4; pointer-events: none;}
.home-story .hs-player.sound .hs-sound { opacity: .7;}
.home-story .hs-films { margin: var(--s1) 0 0; padding: 0 0 0 var(--s4); display: grid; gap: var(--s1); font-size: var(--fs-caption); line-height: 1.35; color: var(--n5);}
.home-story .hs-films li.on { color: var(--n9); font-weight: var(--fw-bold);}
.home-story .hs-after:focus-visible { outline: var(--hair2) solid var(--accent); outline-offset: var(--hair2);}
.share-hello { margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--accent); color: var(--on-accent); font-size: var(--fs-body);}
.feed { display: grid; gap: var(--s2);}
.feed-h { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.feed-list { list-style: none; margin: 0; padding: 0; display: grid;}
.feed-row { display: grid; grid-template-columns: var(--s2) minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; border-top: var(--hair) solid var(--line);}
.feed-dot { width: var(--s2); height: var(--s2); border-radius: var(--pill); background: var(--ok); transform: translateY(calc(-1 * var(--hair)));}
/* owner T480 / T481: 브랜드 인사이트 (js/insight.js) in the #feed slot */
.insight .ins-sec { display: grid; gap: var(--s2); padding: var(--s3) 0; border-top: var(--hair) solid var(--line);}
.insight .ins-sec h3 { margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.insight .ins-cal, .insight .ins-ideas, .insight .ins-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2);}
.insight .ins-ev__h { margin: 0; display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap;}
.insight .ins-ev__h span { font-size: var(--fs-caption); color: var(--n5);}
.insight .ins-ideas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; font-size: var(--fs-caption);}
.insight .ins-list li { font-size: var(--fs-caption); overflow-wrap: anywhere;}
.insight .ins-list a { margin-left: var(--s1); font-size: var(--fs-caption); color: var(--n5);}
.insight .ins-date { color: var(--n5); font-variant-numeric: tabular-nums;}
.insight .ins-links { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0;}
.moment-chip { display: inline-flex; gap: var(--s2); align-items: center; margin: var(--s2) 0 0; padding: var(--s1) var(--s1) var(--s1) var(--s3); border-radius: var(--pill); background: var(--fill-2, var(--n1)); font-size: var(--fs-caption);}
.feed-row:first-child .feed-dot { animation: pulse 1.4s var(--ease-in-out) infinite alternate;}
.feed-who { font-weight: var(--fw-bold); display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap;}
.feed-day { font: var(--t-caption); color: var(--n5);}
.feed-nums { display: flex; flex-wrap: wrap; gap: var(--hair2) var(--s3); font-size: var(--fs-caption); color: var(--n5);}
.feed-ago { font-size: var(--fs-caption); color: var(--n5); white-space: nowrap;}
.shelf-group { display: grid; gap: var(--s2);}
.shelf-h { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); display: flex; gap: var(--s2); align-items: baseline;}
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(calc(var(--s7) * 6.67), .75fr); align-items: start; padding-top: var(--s6);}
  .example { padding-top: var(--s3);}
}

/* ---------- show stage ---------- */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--stage); color: var(--stage-text); border-radius: var(--r-l);
  min-height: calc(100dvh - var(--top-h) - var(--s5) - var(--s5));
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s3) var(--s4) 0;}
.hud {
  position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s1) var(--s3);
  padding: var(--s3) var(--s4) var(--s3); border-radius: var(--r-l);
  background: var(--stage-glass-solid); box-shadow: var(--e1);}
.hud-label { font: var(--t-caption-strong); color: var(--stage-text); min-height: var(--s5);}
.hud-time { font-size: var(--fs-caption); color: var(--stage-text-2); font-variant-numeric: tabular-nums; display: flex; gap: var(--s2);}
.hud-eta:empty { display: none;}
.pbar { grid-column: 1 / -1; height: var(--s1); border-radius: var(--pill); background: var(--stage-line); overflow: hidden; position: relative;}
.pbar i { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--accent); border-radius: inherit; transition: transform 600ms var(--ease-out);}
.pbar.running i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0 35%, color-mix(in srgb, var(--n0) 55%, transparent) 50%, transparent 65% 100%);
  background-size: 220% 100%; animation: shimmer 1.6s linear infinite;}
@keyframes shimmer { from { background-position: 120% 0;} to { background-position: -120% 0;} }

.stage-main { flex: 1; display: grid; align-content: center; gap: var(--s3); min-height: calc(var(--s7) * 4.17); padding: var(--s3) var(--s1);}
.kicker { font: var(--t-caption-strong); color: var(--stage-text-2);}
.big { font-family: var(--font); font-size: var(--fs-display); line-height: 1.22; text-wrap: balance; max-width: calc(var(--s7) * 5.62);}
.big.long { font-size: var(--fs-display);}
.big.xlong { font-size: var(--fs-title); line-height: 1.3;}
.big.status { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.big .stamp { vertical-align: var(--hair2); margin-left: var(--s2);}
.item-in { animation: item-in var(--dur-show) var(--ease-out) both;}
@keyframes item-in { from { opacity: 0; transform: translateY(var(--s3)); filter: blur(var(--s1));} to { opacity: 1; transform: none; filter: none;} }
.themes { display: grid; gap: var(--s3); margin-top: var(--s2); max-width: calc(var(--s7) * 10.62);}
.theme-row { display: grid; grid-template-columns: 1fr auto; gap: var(--hair2) var(--s3); align-items: baseline;}
.theme-row b { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.theme-row span { font-size: var(--fs-caption); color: var(--stage-text-2); font-variant-numeric: tabular-nums;}
.theme-row .meter { grid-column: 1 / -1; height: var(--s1); border-radius: var(--pill); background: var(--stage-line); overflow: hidden;}
.theme-row .meter i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--accent); border-radius: inherit;}

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); border-top: var(--hair) solid var(--stage-line); padding-top: var(--s3);}
.stat b { display: block; font-family: var(--font); font-size: var(--fs-display); line-height: 1.1; font-variant-numeric: tabular-nums;}
.stat span { font-size: var(--fs-caption); color: var(--stage-text-2);}

.found { display: grid; gap: 0;}
.found-title { font: var(--t-caption-strong); color: var(--stage-text-2); margin-bottom: var(--s1);}
.found-row { display: flex; gap: var(--s2); align-items: baseline; padding: var(--s2) 0; border-top: var(--hair) solid var(--stage-line); font-size: var(--fs-body);}
.found-row .tag { flex: none; font-size: var(--fs-caption); color: var(--stage-text-2); min-width: calc(var(--s7) * 1.31);}
.found-row:nth-last-child(n+4) { display: none;}
.stage[data-mode="make"] .found-row:nth-last-child(n+4) { display: flex;}   /* make: the recap of the choices (up to 4 rows) */

.deal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); perspective: calc(var(--s7) * 18.75);}
.card3 { position: relative; height: calc(var(--s7) * 2.33); transform-style: preserve-3d; transition: transform 700ms var(--ease-out);}
.card3.flip { transform: rotateY(180deg);}
.card3.ready { cursor: pointer;}
.card3.ready .back { animation: card-ready 900ms var(--ease-in-out) infinite alternate; box-shadow: inset 0 0 0 var(--hair2) var(--accent);}
@keyframes card-ready { from { transform: translateY(0);} to { transform: translateY(calc(-1 * var(--s1)));} }
.card3 > div { position: absolute; inset: 0; border-radius: var(--r-m); backface-visibility: hidden; padding: var(--s3); display: grid; align-content: end; gap: var(--hair2);}
.card3 .back {
  background-color: var(--stage-surface);
  background-image: repeating-linear-gradient(135deg, var(--accent) 0 var(--hair2), transparent var(--hair2) var(--s3));
  box-shadow: inset 0 0 0 var(--hair) var(--stage-line);}
.card3.waiting .back { animation: card-wait 1.4s var(--ease-in-out) infinite alternate;}
.card3:nth-child(2).waiting .back { animation-delay: .2s;}
.card3:nth-child(3).waiting .back { animation-delay: .4s;}
@keyframes card-wait { from { opacity: .55;} to { opacity: 1;} }
.card3 .face { transform: rotateY(180deg); background: var(--accent); color: var(--on-accent);}
.card3 .face b { font: var(--t-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.card3 .face small { font-size: var(--fs-caption); line-height: 1.35; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.refstrip { overflow: hidden; height: calc(var(--s7) * 1.58); margin-top: var(--s2); mask-image: linear-gradient(90deg, transparent, var(--n9) 6%, var(--n9) 94%, transparent);}
.refstrip-track { display: flex; gap: var(--s2); width: max-content; animation: reel 26s linear infinite;}
.refstrip img { height: calc(var(--s7) * 1.5); width: auto; border-radius: var(--r-s);}
.reel { margin: 0 calc(var(--s4) * -1); border-top: var(--hair) solid var(--stage-line); overflow: hidden; height: var(--s7); display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, var(--n9) 8%, var(--n9) 92%, transparent);}
.reel-track { display: flex; gap: var(--s6); white-space: nowrap; padding-left: var(--s4); animation: reel 40s linear infinite; font-size: var(--fs-caption); color: var(--stage-text-2);}
.reel-track span::before { content: "“";} .reel-track span::after { content: "”";}
@keyframes reel { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.stage-actions { display: flex; justify-content: flex-end; padding-bottom: var(--s3); min-height: 0;}
.stage-actions .problem { flex: 1;}
.stage-actions .ds-btn { height: var(--s7);}
.stage-actions:empty { display: none;}

/* make-mode collage behind the stage */
.collage { position: absolute; inset: 0; z-index: -1; pointer-events: none;}
.collage img { position: absolute; width: 46%; max-width: calc(var(--s7) * 5.42); aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-m); opacity: .26; animation: drift 18s var(--ease-in-out) infinite alternate;}
.collage img:nth-child(1) { right: -8%; top: 14%; rotate: 6deg;}
.collage img:nth-child(2) { left: -10%; bottom: 18%; rotate: -5deg; animation-delay: -6s;}
.collage img:nth-child(3) { right: 18%; bottom: -6%; rotate: 3deg; animation-delay: -12s;}
@keyframes drift { from { translate: 0 0;} to { translate: calc(-1 * var(--s3)) calc(-1 * var(--s5));} }
.choice-recap { display: grid; gap: 0;}
.choice-recap .found-row:nth-last-child(n+4) { display: flex;}
.oplog { font-size: var(--fs-caption); color: var(--stage-text-2); max-height: calc(var(--s7) * 3.33); overflow: auto; border-top: var(--hair) dashed var(--stage-line); padding: var(--s2) 0; font-family: var(--font-mono);}

@media (min-width: 960px) {
  .stage {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(calc(var(--s7) * 6.25), .65fr); grid-template-rows: auto 1fr auto auto auto auto;
    column-gap: var(--s7); padding: var(--s4) var(--s6) 0; min-height: min(calc(var(--s7) * 15.83), calc(100dvh - var(--top-h) - var(--s7)));}
  .hud { grid-column: 1 / -1; max-width: calc(var(--s7) * 11.67);}
  .stage-main { grid-column: 1; grid-row: 2;}
  .side { grid-column: 2; grid-row: 2 / 4; align-self: center; display: grid; gap: var(--s5);}
  .stats { grid-column: 1; grid-row: 3;}
  .deal { grid-column: 1 / -1; grid-row: 4;}
  .reel { grid-column: 1 / -1; grid-row: 6; margin: 0 calc(var(--s6) * -1);}
  .stage-actions { grid-column: 1 / -1; grid-row: 5;}
  .found-row:nth-last-child(n+4) { display: flex;}
  .card3 { height: calc(var(--s7) * 2.67);}
  .card3 .face b { font-size: var(--fs-title);}
  .card3 .face small { font-size: var(--fs-caption);}
  .collage img { opacity: .3; max-width: calc(var(--s7) * 6.25);}
}
@media (max-width: 959px) { .side { display: contents;} }

/* ---------- 8. choice rows ---------- */
.choices { display: grid; gap: var(--s3);}
.choice {
  position: relative; display: grid; gap: var(--s2); width: 100%; text-align: left;
  padding: var(--s4); border-radius: var(--r-m); border: var(--hair) solid var(--line); background: var(--surface); color: var(--n9);
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
@media (hover: hover) { .choice:hover { border-color: var(--line-strong);} }
.choice:active { transform: scale(.985);}
.choice:not(:active) { transition-timing-function: var(--ease-spring), var(--ease-out), var(--ease-out), var(--ease-out); transition-duration: 420ms, var(--dur-quick), var(--dur-quick), var(--dur-quick);}
.choice.picked { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 0 0 var(--hair2) var(--on-accent);}

.choice.picked .who, .choice.picked .say, .choice.picked .count-bar span { color: var(--on-accent);}
.choice.dim { opacity: .45;}
.choice .name { font-family: var(--font); font-size: var(--fs-title); line-height: 1.3; padding-right: var(--s6);}
.choice .who { color: var(--n5); font-size: var(--fs-caption);}
.choice .say { color: var(--n5); font-size: var(--fs-caption);}
.choice .say q { quotes: "“" "”";}
.chips { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2);}

.count-bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s3);}
.count-bar span { font-size: var(--fs-caption); color: var(--n5); font-variant-numeric: tabular-nums; white-space: nowrap;}
.count-bar i { height: var(--s1); border-radius: var(--pill); background: var(--n2); overflow: hidden;}
.count-bar i::before { content: ""; display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--n9); border-radius: inherit;}
.choice .stamp-slot { position: absolute; top: var(--s4); right: var(--s4);}
.plan .hook { font-family: var(--font); font-size: var(--fs-title); line-height: 1.3;}
.plan .hook::before { content: "“";} .plan .hook::after { content: "”";}
.plan .angle { justify-self: start;}
.plan .dl { display: grid; grid-template-columns: auto 1fr; gap: var(--hair2) var(--s3); font-size: var(--fs-caption);}
.plan .dt { color: var(--n5); white-space: nowrap;}
.plan .dd { color: var(--n5);}
.choice.picked .dt, .choice.picked .dd { color: var(--on-accent);}
.after-note { font-size: var(--fs-caption); color: var(--n5);}

/* stamp */
.stamp { display: inline-grid; place-items: center; width: var(--s5); height: var(--s5); border-radius: var(--pill); background: var(--ok); color: var(--n9); flex: none;}
.stage .stamp { color: var(--stage-ink);}
.stamp svg { width: var(--s4); height: var(--s4); stroke-width: 2.4;}
.stamp.pick { background: var(--on-accent); color: var(--accent);}
.stamp-in { animation: stamp-in 460ms var(--ease-spring) both;}
@keyframes stamp-in { from { transform: scale(.4) rotate(-12deg); opacity: 0;} to { transform: none; opacity: 1;} }

/* brand card (persona step) */
.brandcard { display: grid; gap: var(--s3); padding: var(--s4) 0 0; border-top: var(--hair) solid var(--line);}
.brandcard .identity { font-family: var(--font); font-size: var(--fs-title); line-height: 1.35;}
.brandcard .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);}
.brandcard .facts div b { display: block; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); font-variant-numeric: tabular-nums;}
.brandcard .facts div span { font-size: var(--fs-caption); color: var(--n5);}
.brandcard h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5); margin-top: var(--s2);}
.saying { display: grid; gap: var(--s1); padding: var(--s2) 0; border-top: var(--hair) solid var(--line);}
.saying .row { display: flex; justify-content: space-between; gap: var(--s3); font-weight: var(--fw-bold);}
.brandcard .facts-line { margin: var(--s2) 0 var(--s3); font-weight: var(--fw-bold);}   /* B5 P1 (6): '읽은 후기 N개' when the card carries no counts */
.saying .row span { font: var(--t-caption); color: var(--n5); white-space: nowrap; font-variant-numeric: tabular-nums;}
.saying q { quotes: "“" "”"; font-size: var(--fs-caption); color: var(--n5);}

/* evidence card (DESIGN-GUIDE §8): optional owner photo or screenshot, never a gate */
.evi-card {
  display: grid; grid-template-columns: var(--s7) minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: start;
  padding: var(--s3); border-radius: var(--r-m); border: var(--hair) solid var(--line); background: var(--surface);}
.evi-card.is-done { border-color: var(--line-strong);}
.evi-thumb { position: relative; width: var(--s7); height: var(--s7); border-radius: var(--r-s); background: var(--n2); display: grid; place-items: center; color: var(--n5);}
.evi-thumb svg { width: var(--s5); height: var(--s5);}
.evi-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit;}
.evi-thumb .stamp { position: absolute; right: calc(-1 * var(--s1)); bottom: calc(-1 * var(--s1)); width: var(--s5); height: var(--s5); box-shadow: 0 0 0 var(--hair2) var(--surface);}
.evi-thumb .stamp svg { width: var(--s3); height: var(--s3);}
.evi-text h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.evi-text p { font-size: var(--fs-caption); color: var(--n5);}
.evi-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);}
.evi-actions label { cursor: pointer;}
.evi-actions label:focus-within { outline: var(--hair2) solid var(--n9); outline-offset: var(--hair2);}
.evi-actions label.is-busy { opacity: .5; cursor: progress;}
.evi-collapsed .ds-btn--ghost { gap: var(--s2);}
.evi-collapsed svg { width: var(--s4); height: var(--s4);}
.side-col .evi-card { border-radius: var(--r-l); padding: var(--s4);}
.seg-wait { display: inline-block; width: var(--s4); height: var(--s1); margin-left: var(--s2); border-radius: var(--pill); background: var(--line-strong); position: relative; overflow: hidden; vertical-align: middle;}
.seg-wait::after { content: ""; position: absolute; inset: 0; width: 45%; background: var(--n9); border-radius: inherit; animation: slide 1.1s var(--ease-in-out) infinite alternate;}

.seg-stop { margin-left: var(--s2); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--alert-text);}
.seg-stop.judging { color: inherit; font-weight: var(--fw-bold); opacity: .72;}   /* C before its late judge: calm, readable on the picked tab */
.dl-main small { font: var(--t-caption-strong); opacity: .75; margin-left: var(--s1);}
.src b { flex: none; font-weight: var(--fw-bold); color: var(--n5);}
.shot.r45 img { aspect-ratio: 4 / 5;}
.shot.r916 img { aspect-ratio: 9 / 16;}
@media (max-width: 959px) { .shot.r916 { max-width: calc(var(--s7) * 7.92); margin-inline: auto;} }

/* skeleton */

.ds-skel.row { height: calc(var(--s7) * 3.08);}
@keyframes pulse { from { opacity: .55;} to { opacity: 1;} }
.wait-line { font-size: var(--fs-caption); color: var(--n5); display: flex; gap: var(--s2); align-items: center;}
.wait-line .dotbar { width: calc(var(--s7) * 1.33); height: var(--s1); border-radius: var(--pill); background: var(--n2); overflow: hidden; position: relative;}
.wait-line .dotbar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--n9); border-radius: inherit; animation: slide 1.1s var(--ease-in-out) infinite alternate;}
@keyframes slide { from { transform: translateX(-10%);} to { transform: translateX(160%);} }

/* ---------- refs (feel) ---------- */
.masonry { columns: 2; column-gap: var(--s2);}
@media (min-width: 640px) { .masonry { columns: 3;} }
@media (min-width: 1100px) { .masonry { columns: 4;} }
.ref {
  position: relative; display: block; width: 100%; margin: 0 0 var(--s2); padding: 0; border: 0; background: var(--n2);
  border-radius: var(--r-s); overflow: hidden; break-inside: avoid; min-height: calc(var(--s7) * 1.67);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.ref img { width: 100%; height: auto;}
.ref:active { transform: scale(.97);}
.ref:not(:active) { transition-timing-function: var(--ease-spring), var(--ease-out); transition-duration: 420ms, var(--dur-quick);}
.ref[aria-pressed="true"] { box-shadow: 0 0 0 var(--hair2) var(--n9);}
.ref .n { position: absolute; top: var(--s2); left: var(--s2); width: var(--s5); height: var(--s5); border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font: var(--t-body); text-align: center; box-shadow: 0 0 0 var(--hair2) var(--on-accent);}
.ref.broken { display: none;}
.picked-count { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;}

/* ---------- result ---------- */
.result { display: grid; gap: var(--s5);}
.result-head { display: grid; gap: var(--s1);}
.result-head h2 { font-size: var(--fs-title); outline: none;}
/* B1 #5: the channel's own MP4 (Shorts / a video form) in 매체별로 받기 */
.ch-video { display: grid; gap: var(--s2); justify-items: start; margin: var(--s2) 0;}
.ch-video video { width: min(100%, calc(var(--s7) * 5)); aspect-ratio: 9 / 16; border-radius: var(--r2); background: var(--n9); object-fit: cover;}
.ch-video-dl { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;}
.ch-video-wait { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s2) 0;}
.ch-video-wait .ss-pulse { width: var(--s2); height: var(--s2); flex: none;}
/* B2 P1: partial — '일부 완성 · A/B 그리는 중 (약 N분)' and one 그리는 중 row per piece still drawing */
.result-head h2 .h-sub { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5); letter-spacing: 0;}
.comp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1);}
.comp-rows[hidden] { display: none;}
.comp-rows li { display: flex; align-items: center; gap: var(--s2); min-height: var(--s6); padding: var(--s1) var(--s3); border-radius: var(--r-s, var(--r1)); background: var(--n2); font-size: var(--fs-caption);}
.comp-rows li .ss-pulse { width: var(--s2); height: var(--s2); flex: none;}
.comp-rows li .pid-mini { color: var(--n5); font-variant-numeric: tabular-nums;}
.comp-rows li .cr-when { margin-left: auto; color: var(--n5); white-space: nowrap;}

.shot { position: relative; margin: 0;}
.shot img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-l); background: var(--n2);}
.shot .done-stamp {
  position: absolute; top: var(--s3); right: var(--s3); display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s1); border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);
  box-shadow: 0 0 0 var(--hair2) var(--on-accent);}
/* finish moment (peak-end): the ad lands, a yellow ring goes out once, then the stamp */
.celebrate img { animation: land 620ms var(--ease-out) both;}
.celebrate .done-stamp { animation: stamp-in 460ms var(--ease-spring) 420ms both;}
.celebrate::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); box-shadow: 0 0 0 var(--s1) var(--accent); pointer-events: none; animation: ring 900ms var(--ease-out) 250ms both;}
@keyframes land { from { opacity: 0; transform: translateY(var(--s4)) scale(.97);} to { opacity: 1; transform: none;} }
@keyframes ring { from { opacity: 1; transform: scale(.985);} to { opacity: 0; transform: scale(1.045);} }
.shot .done-stamp .stamp { width: var(--s5); height: var(--s5); background: var(--on-accent); color: var(--accent);}
.tile { border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line); padding: var(--s4); display: grid; gap: var(--s3); align-content: start;}
.tile h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.ratios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);}
.ratio {
  display: grid; justify-items: center; gap: var(--s1); padding: var(--s3) var(--s1); border-radius: var(--r-m);
  background: var(--accent); color: var(--on-accent); text-decoration: none; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);}
.ratio:active { transform: scale(.96);}
.ratio:not(:active) { transition-timing-function: var(--ease-spring), var(--ease-out); transition-duration: 420ms, var(--dur-quick);}
@media (hover: hover) { .ratio:hover { box-shadow: inset 0 0 0 var(--hair2) var(--on-accent);} }
.ratio .shape { width: var(--s5); height: var(--s6); display: grid; place-items: end center;}
.ratio .shape i { display: block; border: var(--hair2) solid currentColor; border-radius: var(--r1); width: var(--s5);}
.ratio small { font: var(--t-caption); opacity: .8;}
.copy .hook { font-family: var(--font); font-size: var(--fs-title); line-height: 1.3;}
.copy ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); counter-reset: cap;}
.copy li { counter-increment: cap; display: grid; grid-template-columns: var(--s4) 1fr; gap: var(--s2);}
.copy li .line { display: block;}
.src { display: flex; gap: var(--s2); align-items: baseline; margin-top: var(--hair2); font-size: var(--fs-caption); line-height: 1.5; color: var(--n5);}
.src q { quotes: "“" "”";}
.src.no, .src.na { font-size: var(--fs-caption);}
.src-dot { flex: none; width: var(--s2); height: var(--s2); border-radius: var(--pill); background: var(--ok); transform: translateY(calc(-1 * var(--hair)));}
.c-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hair2) var(--s2); margin-top: var(--s2); font-size: var(--fs-caption); color: var(--n5);}
.c-status .c-now { font-weight: var(--fw-bold); color: var(--n9);}
.c-status .c-sec { color: var(--n5); font-size: var(--fs-caption);}
.c-status .c-slow { flex-basis: 100%; color: var(--n5);}
.c-status .c-mat { flex-basis: 100%; color: var(--n5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.copy li::before { content: counter(cap); font-size: var(--fs-caption); color: var(--n5); font-variant-numeric: tabular-nums; padding-top: var(--hair2);}
.copy .cta { display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-caption); color: var(--n5);}
.copy .cta b { color: var(--n9); background: var(--n2); border-radius: var(--r-s); padding: var(--hair2) var(--s2);}
.proofline { display: flex; gap: var(--s3); align-items: center;}
.copy .proofline { border-top: var(--hair) solid var(--line); padding-top: var(--s3);}
.copy-tabs { display: inline-flex; gap: var(--hair2); padding: var(--s1); border-radius: var(--pill); background: var(--n2); justify-self: start;}
.copy-tabs button { height: var(--s6); padding: 0 var(--s3); border: 0; border-radius: var(--pill); background: transparent; color: var(--n5); font: var(--t-caption-strong); white-space: nowrap;}
.copy-tabs button[aria-selected="true"] { background: var(--bg); color: var(--n9); box-shadow: 0 0 0 var(--hair) var(--line-strong);}
#copyBody { display: grid; gap: var(--s3);}
.copy .proof-more { margin-top: calc(var(--s2) * -1);}
.proofline p { font-size: var(--fs-caption); color: var(--n5);}
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s2);}
.photo-note { font-size: var(--fs-caption); color: var(--n5);}
.tile.held { border-color: var(--line-strong);}
.tile.held h3 { color: var(--alert-text);}
video.motion { display: block; height: min(62dvh, calc(var(--s7) * 11.67)); width: auto; max-width: 100%; margin: 0 auto; aspect-ratio: 9 / 16; object-fit: contain; border-radius: var(--r-m); background: var(--stage);}
video.motion.r45 { aspect-ratio: 4 / 5; height: min(52dvh, calc(var(--s7) * 10));} video.motion.r11 { aspect-ratio: 1; height: min(46dvh, calc(var(--s7) * 8.75));}
.mo-progress { display: grid; gap: var(--s2);}
.pbar.light { background: var(--n2);}
.mo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);}
.mo-slot { display: grid; justify-items: center; gap: var(--hair2); padding: var(--s2) var(--s1); border-radius: var(--r-m); border: var(--hair) solid var(--line); background: var(--surface); color: var(--n5); font-size: var(--fs-caption);}
.mo-slot b { color: var(--n5);}
.mo-slot small { font-size: var(--fs-caption);}
.mo-slot.ready { color: var(--n5); border-color: var(--line-strong); cursor: pointer;}
.mo-slot.ready b { color: var(--n9);}
.mo-slot.on { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 0 0 var(--hair2) var(--on-accent);}
.mo-slot.on b, .mo-slot.on small { color: var(--on-accent);}
.mo-shape { display: block; border: var(--hair2) solid currentColor; border-radius: var(--r1); width: var(--s4);}
.mo-shape.r916 { height: var(--s5); width: var(--s4);} .mo-shape.r45 { height: var(--s5); width: var(--s4);} .mo-shape.r11 { height: var(--s4); width: var(--s4);}
.plan-slots { display: grid; gap: var(--s3);}
.skel-card { gap: var(--s2); pointer-events: none;}
.skel-card .angle { justify-self: start;}
.skel-card .ds-skel { display: block; height: var(--s3);}
.skel-card .ds-skel.l1 { height: var(--s5); width: 86%;} .skel-card .ds-skel.l2 { width: 70%;} .skel-card .ds-skel.l3 { width: 54%;}
.plan-stream { padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--stage); color: var(--stage-text); min-height: calc(var(--s7) * 1.75);}
.plan-stream .kicker { color: var(--stage-text-2);}
.plan-stream .line { font-family: var(--font); font-size: var(--fs-title); line-height: 1.35; margin-top: var(--s1);}
.made-strip { display: grid; gap: var(--s2);}
.made-strip .thumbs { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: thin;}
.made-strip .thumbs button { flex: none; width: calc(var(--s7) * 1.58); height: calc(var(--s7) * 1.58); padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden; background: var(--n2);}
.made-strip .thumbs img { width: 100%; height: 100%; object-fit: cover;}
.made-strip .thumbs button[aria-current="true"] { box-shadow: 0 0 0 var(--hair2) var(--n9);}
@media (min-width: 960px) {
  .result { grid-template-columns: auto minmax(calc(var(--s7) * 7.92), 1fr); column-gap: var(--s6); align-items: start;}
  .result-head { grid-column: 1 / -1;}
  .result .shot-col { grid-column: 1; grid-row: 2 / span 3; position: sticky; top: calc(var(--top-h) + var(--s5)); display: grid; gap: var(--s3);}
  .result .side-col { grid-column: 2; grid-row: 2; display: grid; gap: var(--s4);}
  .result .shot { width: fit-content; max-width: 100%;}
  .result .shot img { width: auto; max-height: calc(100dvh - var(--top-h) - var(--bar-h) - calc(var(--s7) * 4.79)); min-height: calc(var(--s7) * 7.5);}
}
@media (max-width: 959px) { .result .shot-col, .result .side-col { display: contents;} }

/* ---------- error panel ---------- */
.problem { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-m); background: var(--surface); border: var(--hair) solid var(--line-strong);}
.problem b { color: var(--alert-text);}
.stage .problem { background: var(--stage-surface); border-color: var(--stage-line); color: var(--stage-text);}
.stage .problem b { color: var(--stage-alert);}

/* ---------- 6. glass: bottom bar, sheet, HUD ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0));
  background: var(--glass-solid); border-top: var(--hair) solid var(--line);}
.bar-inner { max-width: calc(var(--s7) * 15.83); margin: 0 auto; display: flex; gap: var(--s2);}
.bar-inner .ds-btn { flex: 1 1 0; min-width: 0;}
.bar-inner .ds-btn--primary { flex-grow: 1.6;}
.bar-inner .ds-btn .sm { display: none;}
@media (max-width: 479px) {   /* 390px phones: both bar buttons must fit on one line (B2 fix: PNG 받기 overflowed the screen edge) */
  .bar-inner .ds-btn { padding: 0 var(--s3);}
  .bar-inner .ds-btn .lg { display: none;} .bar-inner .ds-btn .sm { display: inline;}
}
.bar-note { max-width: calc(var(--s7) * 15.83); margin: 0 auto var(--s2); font-size: var(--fs-caption); color: var(--n5); text-align: center;}
@media (min-width: 960px) { .bar-inner { justify-content: flex-end; max-width: calc(var(--s7) * 24.5);} .bar-inner .ds-btn { flex: 0 0 auto; min-width: calc(var(--s7) * 4.17);} .bar-note { max-width: calc(var(--s7) * 24.5); text-align: right;} }

/* T14 offer chooser: lives in the bottom bar right before making (DESIGN-GUIDE §8 "Offer chooser") */
.bar-body { max-width: calc(var(--s7) * 15.83); margin: 0 auto var(--s3);}
@media (min-width: 960px) { .bar-body { max-width: calc(var(--s7) * 24.5);} }
.bar.has-offers .bar-note { text-align: left;}
@media (min-width: 960px) { .bar.has-offers .bar-note, .bar.has-offers .bar-body { max-width: calc(var(--s7) * 15.83); margin-left: auto; margin-right: 0;} }
.offer-title { font-family: var(--font); font-size: var(--fs-title); line-height: 1.3; color: var(--n9);}
.offer-sub { color: var(--n5);}
.offer-chips { display: flex; flex-wrap: wrap; gap: var(--s2);}
.offer-chip {
  display: inline-grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s2); align-items: center;
  min-height: var(--s7); max-width: 100%; padding: var(--s1) var(--s4) var(--s1) var(--s3); border-radius: var(--r-m); border: 0; text-align: left;
  background: var(--surface); color: var(--n9); box-shadow: inset 0 0 0 var(--hair2) var(--line-strong);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.offer-chip .ck { grid-row: 1 / 3; width: var(--s5); height: var(--s5); border-radius: var(--pill); box-shadow: inset 0 0 0 var(--hair2) var(--line-strong); display: grid; place-items: center;}
.offer-chip .ck svg { width: var(--s3); height: var(--s3); stroke-width: 2.6; opacity: 0;}
.offer-chip .ot { font: var(--t-body-strong); word-break: keep-all;}
.offer-chip small { grid-column: 2; font-size: var(--fs-caption); color: var(--n5); line-height: 1.3;}
.offer-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 var(--hair2) var(--on-accent);}
.offer-chip[aria-pressed="true"] small { color: var(--on-accent);}
.offer-chip[aria-pressed="true"] .ck { background: var(--on-accent); box-shadow: none;}
.offer-chip[aria-pressed="true"] .ck svg { opacity: 1; stroke: var(--accent); animation: stamp-pop 460ms var(--ease-spring) both;}
.offer-chip:active { transform: scale(.97);}
.offer-chip:not(:active) { transition-timing-function: var(--ease-spring), var(--ease-out), var(--ease-out); transition-duration: 420ms, var(--dur-quick), var(--dur-quick);}
@media (hover: hover) { .offer-chip:hover:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 var(--hair2) var(--n9);} }
.offer-chip:focus-visible { outline: var(--hair2) solid var(--n9); outline-offset: var(--hair2);}
@keyframes stamp-pop { from { transform: scale(.4);} to { transform: none;} }
.offer-used { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: var(--hair) solid var(--line);}
.offer-used .offer-k { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.offer-used .line { display: block; font-weight: var(--fw-bold);}
.mo-mat { font-size: var(--fs-caption); color: var(--n5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: calc(var(--s7) * 13.33); max-height: 86dvh;
  padding: 0; border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; color: var(--n9);
  background: var(--glass-solid); box-shadow: var(--e1); overflow: hidden;}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--dur-move) var(--ease-out);}
.sheet::backdrop { background: var(--scrim);}
@keyframes sheet-in { from { transform: translateY(100%);} to { transform: none;} }
.sheet-grip { display: grid; place-items: center; height: var(--s5); cursor: grab; touch-action: none; flex: none;}
.sheet-grip::before { content: ""; width: var(--s6); height: var(--s1); border-radius: var(--pill); background: var(--line-strong);}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0 var(--s4) var(--s2) var(--s5); flex: none;}
.sheet-head h2 { font-size: var(--fs-title);}
.sheet-body { overflow: auto; padding: 0 var(--s5) calc(var(--s6) + env(safe-area-inset-bottom, 0)); display: grid; gap: var(--s4);}
@media (min-width: 768px) { .sheet { inset: auto 0 var(--s6) 0; border-radius: var(--r-xl);} }

.evi { display: grid; gap: var(--s1); padding: var(--s3) 0; border-top: var(--hair) solid var(--line);}
.evi .line { display: flex; gap: var(--s3); align-items: start; font-weight: var(--fw-bold);}
.evi .line .stamp { width: var(--s5); height: var(--s5);}
.evi .line .stamp svg { width: var(--s4); height: var(--s4);}
.evi .nostamp { width: var(--s5); height: var(--s5); flex: none; border-radius: var(--pill); box-shadow: inset 0 0 0 var(--hair2) var(--line-strong);}
.evi .src { margin-left: var(--s6); font-size: var(--fs-caption); color: var(--n5);}
.evi .src q { quotes: "“" "”";}
.evi .state { margin-left: var(--s6); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--accent);}
.evi .state.no { color: var(--n5);}
.shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);}
@media (min-width: 640px) { .shelf-grid { grid-template-columns: repeat(4, minmax(0, 1fr));} }
.ds-card.is-shelf { display: grid; gap: var(--s1); padding: 0; text-align: left;}
.ds-card.is-shelf img, .ds-card.is-shelf .ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); background: var(--n2);}
.ds-card.is-shelf span { font-size: var(--fs-caption); color: var(--n5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.empty { color: var(--n5); font-size: var(--fs-body); padding: var(--s5) 0;}

.ds-toast.out { animation: toast-out var(--dur-quick) var(--ease-out) both;}
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--s2));} to { opacity: 1; transform: none;} }
@keyframes toast-out { to { opacity: 0;} }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (prefers-reduced-transparency: no-preference) {
    .bar { background: var(--glass-fill); box-shadow: var(--e1); border-top-color: var(--glass-rim);}
    /* sheets are opaque from their first frame (A5: the screen behind showed through while one opened) */
    .hud { background: var(--stage-glass-fill);}
  }
}
@media (prefers-contrast: more) {
  .bar, .sheet, .hud { background: var(--glass-solid) !important;}
  .hud { background: var(--stage-glass-solid) !important;}
  .choice, .tile { border-color: var(--n9);}
}

/* ---------- step transitions (View Transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-move); animation-timing-function: var(--ease-out);}
::view-transition-old(root) { animation-name: vt-out;}
::view-transition-new(root) { animation-name: vt-in;}
html.back::view-transition-old(root) { animation-name: vt-out-back;}
html.back::view-transition-new(root) { animation-name: vt-in-back;}
@keyframes vt-out { to { opacity: 0; transform: translateX(calc(-1 * var(--s5)));} }
@keyframes vt-in { from { opacity: 0; transform: translateX(var(--s5));} }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(var(--s5));} }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(calc(-1 * var(--s5)));} }
.top { view-transition-name: top;}
.bar { view-transition-name: bar;}
/* the header swaps at once: no cross-fade of the old one (A7: 닫기 drawn over the brand switcher during the transition) */
::view-transition-old(top) { display: none;}
::view-transition-new(top) { animation: none;}
.step.enter { animation: step-in var(--dur-move) var(--ease-out) both;}
@keyframes step-in { from { opacity: 0;} to { opacity: 1;} }

/* ---------- shell (PLAN-B3): 만들기 · 보관함 · 브랜드, shown only when the platform lane is mounted ---------- */
.shell-tabs { display: flex; gap: var(--hair2); padding: var(--s1); border-radius: var(--pill); background: var(--n2);}
.shell-tabs a { display: inline-flex; align-items: center; height: var(--s6); padding: 0 var(--s3); border-radius: var(--pill); color: var(--n5); font: var(--t-caption-strong); text-decoration: none; white-space: nowrap;}
.shell-tabs a[aria-current="page"] { background: var(--bg); color: var(--n9); box-shadow: 0 0 0 var(--hair) var(--line-strong);}
@media (max-width: 479px) {   /* phones: the tabs replace the logo, the step bar and the quick 보관함 button (the 보관함 tab) */
  .top:has(.shell-tabs) .steps, .top:has(.shell-tabs) #shelfBtn { display: none;}   /* OWNER T261a: the logo stays */
  .top:has(.shell-tabs) .shell-tabs { margin-left: auto;}
  .shell-tabs a { padding: 0 var(--s2);}
}
.notify-slot:empty, .usage-slot:empty { display: none;}
.notify-slot { margin-top: var(--s4);}

.ch-upload { margin-top: var(--s2);}
.shelf-cell { display: grid; gap: var(--hair2); align-content: start;}
.shelf-up { min-height: var(--s6); font-size: var(--fs-caption);}

/* ---------- owner R1: purpose + channels screen, and 매체별로 받기 on the result ---------- */
.goal { max-width: calc(var(--s7) * 15.83);}
.purpose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5);}
.purpose-opt { text-align: left;}
.purpose-opt .say { font-size: var(--fs-caption); color: var(--n5);}
.purpose-opt.picked .say { color: var(--on-accent);}
.ch-pick { margin-top: var(--s6); display: grid; gap: var(--s3);}
.ch-pick h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); display: flex; gap: var(--s2); align-items: baseline;}
.ch-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2);}
.ch-chip { width: 100%; min-height: calc(var(--s7) * 1.33);}
.goal-from { margin-top: var(--s4);}
@media (max-width: 479px) { .purpose .who { font-size: var(--fs-caption);} }

.ch-tabs { margin-bottom: var(--s1);}
.ch-one { font-weight: var(--fw-bold);}
.ch-kpi { display: grid; gap: var(--hair2); font-size: var(--fs-caption); color: var(--n5);}
.ch-kpi span { color: var(--n5);}
.ch-motion { display: flex; flex-wrap: wrap; gap: var(--hair2) var(--s2); align-items: center; font-size: var(--fs-caption); color: var(--n5);}
.ch-motion svg { width: var(--s4); height: var(--s4);}
.ch-copy-box { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: var(--hair) solid var(--line);}
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);}
.ch-head h4 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.ch-copy { height: var(--s6); padding: 0 var(--s3); font-size: var(--fs-caption);}
.ch-first { font-family: var(--font); font-size: var(--fs-title); line-height: 1.35;}
.ch-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2);}
.ch-lines .line { display: block; white-space: pre-wrap;}
.ch-text { white-space: pre-wrap; line-height: 1.6;}
.ch-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2);}
.ch-tags li { display: grid; padding: var(--s1) var(--s3); border-radius: var(--r-s); background: var(--n2);}
.ch-tags b { font-weight: var(--fw-bold);}
.ch-tags small { font-size: var(--fs-caption); color: var(--n5);}
.ch-over { font: var(--t-caption-strong); color: var(--alert-text);}

/* root: all four channels above the fold at 390 px, so this screen keeps a tight rhythm */
.work.goal { gap: var(--s3);}
.work.goal .work-head .lead { margin-top: var(--s2);}
.work.goal .goal-from { margin-top: 0;}
@media (max-height: 780px) and (max-width: 767px) { .work.goal .work-head .lead { display: none;} }   /* short phones: the reading strip says the same */
.ch-post-wait { font-size: var(--fs-caption); color: var(--n5); padding: var(--s2) var(--s3); border-radius: var(--r-s); background: var(--n2);}
/* A9 S01 SetupChip */
.setup-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); justify-self: start; padding: var(--hair2) var(--s2) var(--hair2) var(--s4); border-radius: var(--pill); background: var(--n2); font-size: var(--fs-caption); color: var(--n5);}
.setup-chip .ds-btn--ghost { min-height: var(--s6);}
/* A9 SavePoint card (guests): after the download tile; the bar keeps the only primary (PNG 받기) */
.save-point { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 var(--hair2) var(--n9);}
.save-point h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n9);}
.save-point p { font-size: var(--fs-caption); color: var(--n5);}
.save-point .ds-btn { justify-self: start;}
.head-actions { display: flex; flex-wrap: wrap; gap: 0 var(--s4);}

/* ---------- S02 어디에 쓸까요 (A9 HANDOFF): mini reading strip, purpose segmented control, four channel rows ---------- */
.setup-strip { display: flex; align-items: center; gap: var(--s3); height: var(--s7); margin-top: 0; padding: 0 var(--s4); border-radius: var(--r-m);
  background: var(--stage); color: var(--stage-text); font-size: var(--fs-caption); overflow: hidden;}
.setup-strip #setupStripText { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.setup-strip .dotbar { flex: none; width: var(--s6); height: var(--s1); border-radius: var(--pill); background: var(--stage-line); overflow: hidden; position: relative;}
.setup-strip .dotbar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--accent); border-radius: inherit; animation: slide 1.1s var(--ease-in-out) infinite alternate;}
.purpose-seg { margin-top: 0;}
.purpose-seg button { height: var(--s6); padding: 0 var(--s5); font-size: var(--fs-body);}
.purpose-line { margin-top: calc(var(--s1) * -1); min-height: var(--s7); font-size: var(--fs-caption); color: var(--n5);}
.medium-rows { display: grid; gap: var(--s2); margin-top: 0;}
.medium-row {
  display: grid; grid-template-columns: var(--s5) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s3); align-items: center;
  width: 100%; min-height: calc(var(--s7) * 1.33); padding: var(--s2) var(--s4); border: 0; border-radius: var(--r-m); text-align: left;
  background: var(--surface); color: var(--n9); box-shadow: inset 0 0 0 var(--hair2) var(--line-strong);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.medium-row .mr-box { grid-row: 1 / 3; width: var(--s5); height: var(--s5); border-radius: var(--r-s); box-shadow: inset 0 0 0 var(--hair2) var(--line-strong); display: grid; place-items: center;}
.medium-row .mr-box svg { width: var(--s4); height: var(--s4); stroke-width: 2.6; opacity: 0;}
.medium-row .mr-title { font: var(--t-title);}
.medium-row .mr-line { grid-column: 2; font-size: var(--fs-caption); color: var(--n5); line-height: 1.35;}
.medium-row[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 var(--hair2) var(--on-accent);}
.medium-row[aria-pressed="true"] .mr-box { background: var(--on-accent); box-shadow: none;}
.medium-row[aria-pressed="true"] .mr-box svg { opacity: 1; stroke: var(--accent);}
.medium-row[aria-pressed="true"] .mr-line { color: var(--on-accent);}
.medium-row:active { transform: scale(.985);}
@media (hover: hover) { .medium-row:hover:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 var(--hair2) var(--n9);} }
@media (min-width: 768px) { .medium-rows { grid-template-columns: repeat(2, minmax(0, 1fr));} }

/* ---------- owner D2: fixed boxes. A quote, a fact, a photo or a button arriving never resizes a container, so
   nothing slides. Every size below is independent of the content (tested with tools/layout_check.py, also --tall). ---------- */
.hud { grid-template-columns: minmax(0, 1fr) auto;}
.hud-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hud-time { white-space: nowrap;}
.stage .slot-off { visibility: hidden;}
.stage-main { flex: none; height: var(--main-h); min-height: 0; overflow: hidden; align-content: start; padding-top: var(--s5);}
.stage[data-mode="read"] { --main-h: var(--t-display);}
.stage[data-mode="make"] { --main-h: var(--t-display);}
.stage[data-mode="read"] .found { height: calc(var(--s7) * 2.33); overflow: hidden; align-content: start;}
.stage[data-mode="read"] .found-row:nth-last-child(n+4) { display: flex;}
.stage[data-mode="read"] .found-row:nth-child(n+4) { display: none;}   /* newest two on top */
.stage[data-mode="make"] .found { height: calc(var(--s7) * 4.17); overflow: hidden; align-content: start;}
.stats { min-height: calc(var(--s7) * 1.38);}
.deal { min-height: calc(var(--s7) * 2.33);}
.stage-actions { position: absolute; z-index: 2; left: var(--s4); right: var(--s4); bottom: calc(var(--s7) + var(--s3)); padding: 0;}
.stage-actions:has(.ds-btn:only-child) { left: auto;}
@media (min-width: 960px) {
  .stage { height: min(calc(var(--s7) * 15.83), calc(100dvh - var(--top-h) - var(--s7))); min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;}
  .stage-main { height: auto;}
  .side { align-self: start; max-height: 100%; overflow: hidden; padding-top: var(--s5);}
  .stage[data-mode="read"] .found { height: auto; max-height: calc(var(--s7) * 7.08);}
  .stage[data-mode="read"] .found-row:nth-child(n+4) { display: flex;}
  .deal { min-height: calc(var(--s7) * 2.67);}
  .stage-actions { left: auto; right: var(--s6); bottom: calc(var(--s7) + var(--s4));}
}
/* plan step: the streamed line sits below the cards in a fixed box; the wait line keeps its height when the plans land */
.plan-stream { height: calc(var(--s7) * 2.17); min-height: 0; overflow: hidden;}
.plan-stream .line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.wait-line { min-height: var(--s5);}
/* result: the picture frame keeps one ratio per item (4:5 whenever a C piece is made or coming, A and B shown in their
   4:5 renders), the note under it has a fixed height, and on desktop the picture column has a fixed width */
.shot-note { height: calc(var(--s7) * 1.75); overflow: hidden; margin: 0;}
.shot-note .c-status { margin-top: 0;}
@media (min-width: 960px) {
  .result { grid-template-columns: minmax(0, calc(var(--s7) * 9.58)) minmax(calc(var(--s7) * 7.92), 1fr);}
  .result .shot { width: 100%;}
  .result .shot img { width: 100%; height: auto; max-height: none; min-height: 0;}
}
#planWaitLine { height: var(--s6); overflow: hidden; white-space: nowrap;}
#planWaitLine #planWait { min-width: 0; overflow: hidden; text-overflow: ellipsis;}
.mo-progress .wait-line { white-space: nowrap; overflow: hidden;}
.mo-progress .wait-line #moText { min-width: 0; overflow: hidden; text-overflow: ellipsis;}
.mo-progress .mo-mat { height: var(--s7);}
.copy-tabs button[aria-disabled="true"] { color: var(--n5); cursor: progress;}
/* motion: one fixed player box from the moment making starts; the video fills it, formats switch inside it */
/* owner T2129 (11-04, 「영상 재생이 1:1이라 잘려」): the box's grid row was auto, so the video's height: 100% was indefinite and it sized by
   width (max-width: 100%) — a 9:16 film stood 761 px tall in a 319 px box and overflow: hidden cut its top and bottom. A definite row
   (100%) makes height: 100% real again: the whole film, pillarboxed on the stage, never cropped. The box follows the playing ratio
   (js/motion.js puts r916 / r45 / r11 on it, as on the video): a portrait film gets the taller box of video.motion's own sizes. */
.mo-box { height: min(52dvh, calc(var(--s7) * 8.33)); display: grid; grid-template-rows: 100%; place-items: center; border-radius: var(--r-m); background: var(--stage); overflow: hidden;}
.mo-box.r916 { height: min(62dvh, calc(var(--s7) * 11.67));} .mo-box.r45 { height: min(52dvh, calc(var(--s7) * 10));} .mo-box.r11 { height: min(46dvh, calc(var(--s7) * 8.75));}
.mo-box video.motion { height: 100%; max-height: 100%; width: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 0;}
.mo-box .mo-wait { color: var(--stage-text-2); font-size: var(--fs-caption); padding: var(--s4); text-align: center;}
.mo-dl { min-height: var(--s7);}
.switcher-slot:empty { display: none;}
.switcher { display: inline-flex; align-items: center; gap: var(--s2); height: var(--s7); max-width: 60vw; padding: 0 var(--s2) 0 var(--hair2); border: 0; border-radius: var(--r-m); background: transparent; color: var(--n9);}
@media (hover: hover) { .switcher:hover { background: var(--n2);} }
.switcher .nm { display: grid; min-width: 0; text-align: left; line-height: 1.2;}
.switcher .nm b { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.switcher .nm small { font-size: var(--fs-caption); color: var(--n5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.switcher .chev { width: var(--s4); height: var(--s4); flex: none;}
.av { flex: none; display: grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: var(--r-s); background: var(--n9); color: var(--bg); font: var(--t-body);}
.av.y { background: var(--accent); color: var(--on-accent);}
.av.g { background: var(--ok); color: var(--on-accent);}
.av.ghost { background: var(--n2); color: var(--n9); font-family: var(--font); font-weight: var(--fw-bold);}
.av.lg { width: var(--s7); height: var(--s7); border-radius: var(--r-m); font-size: var(--fs-title);}
.login-btn.strong, .ds-btn--ghost.strong { color: var(--n9); text-decoration: none; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); padding: 0 var(--s2);}
#accountBtn { margin-left: auto; flex: none;}
#langBtn { flex: none;}   /* T1173: the KO/EN toggle, right of the account button */
.badge-slot { margin-left: auto; flex: none; display: inline-flex;}
.badge-slot[hidden], .badge-slot:empty { display: none;}
.badge-slot:not([hidden]):not(:empty) ~ #accountBtn { margin-left: 0;}
.top:has(.badge-slot:not([hidden]):not(:empty)) .step-name { display: none;}   /* the result's 완성 label gives way to the badge */
.top .steps:empty, .top .steps[hidden] { display: none;}
body.task #switcherSlot { display: none;}   /* 닫기/뒤로 follow the logo in the task (OWNER T261a: the logo stays on every screen) */   /* the task shows 뒤로 and the step dots, not the wordmark */
@media (max-width: 479px) { body.task .top .steps { max-width: calc(var(--s7) * 3.75);} }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(calc(var(--s7) * 1.33) + env(safe-area-inset-bottom, 0)); padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--bg); border-top: var(--hair) solid var(--line);}   /* solid, not glass (glass stays on three surfaces) */
.tabbar .tab { position: relative; display: grid; place-items: center; align-content: center; gap: var(--hair2); color: var(--n5); text-decoration: none; font: var(--t-caption-strong);}
.tabbar .tab svg { width: var(--s5); height: var(--s5);}
.tabbar .tab[aria-current="page"] { color: var(--n9);}
.tabbar .tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: var(--s1); border-radius: 0 0 var(--r1) var(--r1); background: var(--n9);}
.tabbar .tab .dot { position: absolute; top: var(--s2); left: calc(50% + var(--s2)); width: var(--s2); height: var(--s2); border-radius: var(--pill); background: var(--alert-text);}
body.has-nav:not(.task) main { padding-bottom: calc(calc(var(--s7) * 1.33) + var(--s6));}
.rail { display: none;}
@media (min-width: 1024px) {
  .tabbar { display: none;}
  body.has-nav:not(.task) main { padding-bottom: var(--s7);}
  body.has-nav .rail:not([hidden]) { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-w); z-index: 10; display: flex; flex-direction: column; gap: var(--s1);
    padding: var(--s4) var(--s3); background: var(--surface); border-right: var(--hair) solid var(--line);}
  body.has-nav .top, body.has-nav main { margin-left: var(--rail-w);}
  body.has-nav .bar { left: var(--rail-w);}
  body.has-nav .top .switcher-slot, body.has-nav:not(.fx) #home { display: none;}   /* OWNER T261a: the rail's logo stands in its place (the result too); an fx task screen has no rail — its bar keeps the logo */
  .rail .switcher { max-width: none; width: 100%; margin: 0 0 var(--s4); padding: var(--s2);}
  .rail .switcher .nm { flex: 1;}
  /* OWNER T261a: the rail's logo stands exactly where the top bar's does on a screen without the rail (x = gutter, centred in --top-h) */
  .rail .rail-mark { display: flex; align-items: center; height: var(--top-h); margin: calc(-1 * var(--s4)) 0 var(--s2); padding: 0 calc(var(--gutter) - var(--s3));}
  .rail .dest { display: flex; align-items: center; gap: var(--s3); height: var(--s7); padding: 0 var(--s3); border-radius: var(--r-m); color: var(--n5); font-weight: var(--fw-bold); text-decoration: none;}
  .rail .dest svg { width: var(--s5); height: var(--s5);}
  @media (hover: hover) { .rail .dest:hover { background: var(--n2); color: var(--n9);} }
  .rail .dest[aria-current="page"] { background: var(--accent); color: var(--on-accent);}
  .rail .grow { flex: 1;}
  .rail .meter-mini { padding: var(--s3); border-radius: var(--r-m); border: var(--hair) solid var(--line); background: none; color: var(--n5); font-size: var(--fs-caption); text-align: left;}
}
/* switcher sheet (S13) */
.sw-list { display: grid; gap: var(--hair2);}
.sw-group { display: grid; gap: var(--hair2);}
.sw-group h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5); padding: var(--s3) var(--s2) var(--s1);}
.sw-row { display: grid; grid-template-columns: var(--s6) minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: var(--s7); padding: var(--s2); border: 0; border-radius: var(--r-m); background: transparent; color: var(--n9); text-align: left;}
@media (hover: hover) { .sw-row:hover { background: var(--n2);} }
.sw-row .tx { display: grid; min-width: 0;} .sw-row .tx b { font-weight: var(--fw-bold);} .sw-row .tx small { font-size: var(--fs-caption); color: var(--n5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sw-row .ok { color: var(--accent);} .sw-row .ok svg { width: var(--s4); height: var(--s4);}
.sw-add { border-top: var(--hair) solid var(--line); border-radius: 0; margin-top: var(--s2);}
.sw-search input { width: 100%; height: var(--s7); padding: 0 var(--s4); border-radius: var(--r-m); border: var(--hair2) solid var(--line-strong); background: var(--surface); font-size: var(--fs-body);}
/* 브랜드 page (S11) and 보관함 page frame (S09) */
.brand-card { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line);}
.brand-card div { display: grid; min-width: 0; flex: 1;} .brand-card b { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);} .brand-card small { color: var(--n5); font-size: var(--fs-caption);}
.brand-cols { display: grid; gap: var(--s5);}
@media (min-width: 1024px) { .brand-cols { grid-template-columns: 1fr 1fr; align-items: start;} }
.brand-col { display: grid; gap: var(--s5);}
.lgroup { display: grid;}
.lgroup h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5); padding-bottom: var(--s2); border-bottom: var(--hair) solid var(--line);}
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: var(--s7); padding: var(--s2) 0; border: 0; border-bottom: var(--hair) solid var(--line); background: transparent; color: var(--n9); text-align: left; width: 100%;}
@media (hover: hover) { .lrow:hover { background: color-mix(in srgb, var(--n2) 50%, transparent);} }
a.lrow { text-decoration: none;}
.lrow .tx { display: grid; min-width: 0;} .lrow .tx b { font-weight: var(--fw-bold);} .lrow .tx small { color: var(--n5); font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.lrow .end { display: flex; align-items: center; gap: var(--s2); color: var(--n5);} .lrow .end svg { width: var(--s4); height: var(--s4);}
.page-lib .shelf-grid, .page-brand .tile { margin-top: var(--s2);}
.page { display: grid; gap: var(--s5); max-width: calc(var(--s7) * 23.33); padding-top: var(--s3);}
.page .work-head { position: static;}
.lgroup h3, .sw-group h3, .page .shelf-h { font-family: var(--font);}
.lrow .tx b { overflow-wrap: anywhere;}

/* ---------- 7. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important;}
  .item-in { animation: rm-fade 120ms linear both !important;}
  @keyframes rm-fade { from { opacity: 0;} to { opacity: 1;} }
  .reel-track, .refstrip-track, .seg-wait::after, .card3.ready .back, .feed-row:first-child .feed-dot, .collage img, .pbar.running i::after, .card3.waiting .back, .wait-line .dotbar::after { animation: none !important;}
  .card3 { transition: none;}
  .choice:active, .ref:active, .ratio:active, .offer-chip:active, .medium-row:active { transform: none;}
  .setup-strip .dotbar::after { animation: none !important;}
}

/* ---------- 기다리는 동안 (owner T27): one card under the live progress, never over it ---------- */
.wait-deck { display: grid; gap: var(--s2);}
.wait-deck .wd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--s6);}
.wait-deck .wd-title { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5); letter-spacing: 0;}
.wait-deck .wd-hide { min-height: var(--s6); font-size: var(--fs-caption);}
.wait-card {
  display: grid; gap: var(--s2); align-content: start; min-height: calc(var(--s7) * 3.5); padding: var(--s3) var(--s4) var(--s4);
  background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-m); color: var(--n9);}
.wait-card.wd-in { animation: wd-in var(--dur-move) var(--ease-out);}
@keyframes wd-in { from { opacity: 0;} to { opacity: 1;} }
.wait-card .wd-kind { display: flex; align-items: center; gap: var(--s2); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.wait-card .wd-chip { font-variant-numeric: tabular-nums; padding: var(--hair2) var(--s2); border-radius: var(--pill); background: var(--n2); color: var(--n9);}
.wait-card .wd-q { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); text-wrap: balance;}
.wait-card .wd-meta { font: var(--t-caption); color: var(--n5); font-variant-numeric: tabular-nums;}
.wait-card .wd-line { font-size: var(--fs-caption); color: var(--n5);}
.wait-card .wd-tip { font: var(--t-body-strong); text-wrap: pretty;}
.wait-card .wd-src { font-size: var(--fs-caption); color: var(--n5);}
.wait-card .wd-src a { color: inherit;}
.wait-card .wd-reveal { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.wait-card .wd-row { display: flex; justify-content: flex-end; margin-top: calc(var(--s2) * -1);}
.wait-card .wd-row .ds-btn--ghost { min-height: var(--s6);}
.wait-card .wd-opts { display: flex; flex-wrap: wrap; gap: var(--s2);}
.wait-card .wd-opt {
  min-height: var(--s7); padding: 0 var(--s3); border: var(--hair) solid var(--line-strong, var(--line)); border-radius: var(--pill); background: transparent; color: var(--n9);
  font: var(--t-caption-strong); text-align: left; transition: background-color var(--dur-quick) var(--ease-out);}
.wait-card .wd-opt.right { background: var(--accent); color: var(--on-accent, var(--n9)); border-color: transparent;}
.wait-card .wd-opt.wrong { text-decoration: line-through; color: var(--n5);}
.wait-card .wd-opt[aria-disabled="true"]:not(.right) { opacity: .6;}
.wait-card .wd-pads { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);}
.wait-card .wd-pad { height: var(--s7); border: var(--hair) solid var(--line); border-radius: var(--r-s); background: var(--n2); transition: background-color var(--dur-press) var(--ease-out);}
.wait-card .wd-pad.lit { background: var(--accent); border-color: transparent;}
.wait-card .wd-pad.hit { background: var(--ok); border-color: transparent;}
.wd-off { margin: 0;}
.wd-off .ds-btn--ghost { min-height: var(--s6);}
/* on the dark show stage */
.wait-deck.on-stage .wd-title, .wait-deck.on-stage .wd-hide, .wait-deck.on-stage .wd-off .ds-btn--ghost { color: var(--stage-text-2);}
.wait-deck.on-stage .wait-card { background: var(--stage-surface); border-color: var(--stage-line); color: var(--stage-text);}
.wait-deck.on-stage .wd-kind, .wait-deck.on-stage .wd-src, .wait-deck.on-stage .wd-meta { color: var(--stage-text-2);}
.wait-deck.on-stage .wd-line, .wait-deck.on-stage .wd-row .ds-btn--ghost { color: var(--stage-text-2);}
.wait-deck.on-stage .wd-chip, .wait-deck.on-stage .wd-pad { background: color-mix(in srgb, var(--n2) 8%, transparent); color: var(--stage-text); border-color: var(--stage-line);}
.wait-deck.on-stage .wd-opt { color: var(--stage-text); border-color: var(--stage-line);}
.wait-deck.on-stage .wd-opt.right, .wait-deck.on-stage .wd-pad.lit { background: var(--accent); color: var(--stage-ink);}
.wait-deck.on-stage .wd-pad.hit { background: var(--ok);}
.stage > .wait-deck { margin: calc(var(--s1) * -1) 0 0;}
@media (min-width: 960px) {
  .stage:has(> .wait-deck) .hud { grid-column: 1;}
  .stage > .wait-deck { grid-column: 2; grid-row: 1 / 3; align-self: start; margin: 0;}
  .stage:has(> .wait-deck) .side { grid-row: 3 / 4;}
}
.wait-slot:empty { display: none;}
.wait-slot { margin-top: var(--s3);}
#s-plan .wait-deck { margin: var(--s2) 0 var(--s3);}
/* a wait's status line under the picture never sits behind the bottom bar: it rides just above the bar until scrolled to */
@media (max-width: 959px) {
  #shotNote:has([data-testid=wait-progress]) { position: sticky; bottom: var(--bar-h); z-index: 2; background: var(--bg); box-shadow: var(--e1); padding-top: var(--s2);}
}
.rail .dest .dot { width: var(--s2); height: var(--s2); margin-left: auto; border-radius: var(--pill); background: var(--alert-text); flex: none;}
/* owner T31: the purpose's goal and what the result is judged by (A5 score names in data-kpi) */
.kpi-goal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: var(--s2) 0 0; font-size: var(--fs-caption); color: var(--n5);}
.kpi-goal b { color: var(--n9); font-weight: var(--fw-bold); margin-right: var(--s1);}
.kpi-goal .kpi-what { font-size: var(--fs-caption); color: var(--n5);}
.kpi-goal .kpi-chip { padding: var(--hair2) var(--s2); border-radius: var(--pill); background: var(--n2); color: var(--n9); font: var(--t-caption-strong);}
#kpiGoal { margin-bottom: var(--s2);}
.wait-card .wd-xp { font-weight: var(--fw-bold);}
.ch-pending { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r-s); background: var(--n2); font: var(--t-caption-strong); color: var(--n9);}
/* A1b: the persona's own reference set, joined at the top of the picker */
.ref.pref { position: relative;}
.ref .pref-chip { position: absolute; left: var(--s2); bottom: var(--s2); padding: var(--hair2) var(--s2); border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
/* owner T73: the creative's 4-character id under the piece (tap = copy) */
.pid-tag { margin: var(--s1) 0 0; min-height: var(--s5);}
.pid-tag .pid { min-height: var(--s5); font-size: var(--fs-caption); color: var(--n5); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: 0;}
/* owner T74: three copy themes side by side (phone: a swipe row, desktop: three columns) */
.theme-tile .theme-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78%, 1fr); gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s1);}
@media (min-width: 600px) { .theme-tile .theme-cards { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible;} }
.theme-card { scroll-snap-align: start; display: grid; gap: var(--s2); align-content: start; text-align: left; min-height: calc(var(--s7) * 3.12); padding: var(--s3);
  border: var(--hair2) solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--n9); transition: border-color var(--dur-quick) var(--ease-out);}
.theme-card.on { border-color: var(--n9); box-shadow: inset 0 0 0 var(--hair) var(--n9);}
.theme-card.busy { opacity: .6;}
.theme-card .th-name { display: flex; align-items: center; gap: var(--s2); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.theme-card .th-hint { font-size: var(--fs-caption); color: var(--n5);}
.theme-card .th-hook { font-family: var(--font); font-size: var(--fs-title); line-height: 1.3; text-wrap: balance;}
.theme-card .th-cta { justify-self: start; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); padding: var(--s1) var(--s2); border-radius: var(--pill); background: var(--accent); color: var(--on-accent);}
.theme-card .th-cta.cta-underline { background: none; padding: 0; text-decoration: underline; color: var(--n9);}
.theme-card .th-cta.cta-ghost { background: none; box-shadow: inset 0 0 0 var(--hair2) var(--n9); color: var(--n9);}
.theme-card .th-cta.cta-bar, .theme-card .th-cta.cta-tab { border-radius: var(--r1); justify-self: stretch; text-align: center;}
.theme-card .th-cta.cta-sticker { transform: rotate(-3deg);}
.theme-card .th-cta.cta-badge_price { border-radius: var(--r-s);}
/* Codex audit (a): the session left mid-way, with 이어서 보기 (home and 보관함) */
.pending-slot:empty { display: none;}
.pending-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  border: var(--hair2) solid var(--n9); border-radius: var(--r-m); background: var(--surface);}
.pending-row > div { display: grid; gap: var(--hair2); min-width: 0; flex: 1 1 calc(var(--s7) * 4.17);}
.pending-row b { font-size: var(--fs-body);}
/* owner T81: why it takes long + the minute range (one line under the progress line; inside the sticky HUD on the show stage) and the
   알림톡 card; the page's own seconds estimate hides while the why line carries the time */
.wait-extras { display: grid; gap: var(--s2);}
.wait-extras:empty { display: none;}
.why-line { margin: 0; font-size: var(--fs-caption); color: var(--n5); display: flex; flex-wrap: wrap; gap: var(--hair2) var(--s2);}
.why-line .why-eta { color: var(--n9); font-weight: var(--fw-bold);}
.why-line .why-eta:empty { display: none;}
.hud .why-line { grid-column: 1 / -1; color: var(--stage-text-2); font-size: var(--fs-caption);}
.hud .why-line .why-eta { color: var(--stage-text);}
.hud:has(.why-line .why-eta:not(:empty)) .hud-eta, .wait-line:has(+ .wait-extras .why-eta:not(:empty)) #planEta { display: none;}
.stage > .wait-extras { margin-top: calc(var(--s1) * -1);}
#s-plan .wait-extras { margin-top: var(--s2);}
.kakao-card { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--surface); border: var(--hair) solid var(--line);}
.kakao-card .kk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);}
.kakao-card h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); margin: 0;}
.kakao-card .kk-off { min-height: var(--s6); font-size: var(--fs-caption);}
.kakao-card .kk-form { display: flex; gap: var(--s2);}
.kakao-card input { flex: 1; min-width: 0; height: var(--s7); padding: 0 var(--s3); border: var(--hair) solid var(--line-strong); border-radius: var(--r-s); background: var(--bg); color: var(--n9); font-size: var(--fs-body);}
.kakao-card .ds-btn { height: var(--s7); flex: none;}
.kakao-card .kk-consent { margin: 0; font-size: var(--fs-caption);}
.kakao-card .kk-done { margin: 0; font-weight: var(--fw-bold);}
.kakao-card.on-stage { background: var(--stage-surface); border-color: var(--stage-line); color: var(--stage-text);}
.kakao-card.on-stage .meta, .kakao-card.on-stage .kk-off { color: var(--stage-text-2);}
.kakao-card.on-stage input { background: color-mix(in srgb, var(--n2) 6%, transparent); border-color: var(--stage-line); color: var(--stage-text);}
@media (min-width: 960px) {
  .stage > .wait-extras { grid-column: 2; grid-row: 1; align-self: start; margin: 0;}
  .stage:has(> .wait-extras:not(:empty)) > .wait-deck { grid-row: 2;}
  .stage:has(> .wait-extras) > .hud { align-self: start;}
}
/* owner T95: the creative engine line (브랜드 > 운영 정보, result footer) */
.ops-line, .engine-line { margin: 0; font-size: var(--fs-caption); color: var(--n5); font-variant-numeric: tabular-nums;}
.result > .engine-line { grid-column: 1 / -1; padding-top: var(--s2);}
.ops-info .ops-line { padding: var(--s3) 0;}
/* owner T88: Threads is text only — a Threads-only result shows its post where the picture would be */
.shot.tp-shot { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); padding-top: calc(var(--s4) + var(--s6)); border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line); min-height: calc(var(--s7) * 6.67);}
.tp-post { display: grid; gap: var(--s1);}
.tp-post p { margin: 0; font-size: var(--fs-body); line-height: 1.55; overflow-wrap: anywhere;}
.tp-reply { margin-left: var(--s5); padding: var(--s3) 0 0 var(--s4); border-left: var(--hair2) solid var(--line);}
.tp-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; margin-bottom: var(--s1);}
.tp-head b { font-size: var(--fs-caption);}
.tp-sub { font-size: var(--fs-caption); color: var(--n5);}
.tp-ava { width: var(--s6); height: var(--s6); flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--n9); color: var(--bg); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.tp-reply .tp-ava { width: var(--s5); height: var(--s5); font-size: var(--fs-caption);}
.tp-post .tp-hook { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.tp-post .tp-cta { font-weight: var(--fw-bold); color: var(--n9);}
.tp-post .tp-cta::before { content: "→ ";}
.ch-text-only { margin: 0; display: grid; gap: var(--hair2); font-size: var(--fs-caption); color: var(--n5); padding: var(--s2) var(--s3); border-radius: var(--r-s); background: var(--n2);}
.ch-text-only b { color: var(--n9);}
.ch-text-dl { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0;}
.ch-text-dl svg { width: var(--s4); height: var(--s4);}
.ch-text-dl .ds-btn { height: var(--s7); min-height: var(--s7);}
/* owner T96: a brand with a saved link starts from its card (이대로 만들기 / 자료 새로 읽기 / 다른 링크로), not the link box */
#s-link.brand-mode #linkForm, #s-link.brand-mode .hero .lead { display: none;}
.brand-home { display: grid; gap: var(--s3); margin-top: var(--s5); max-width: calc(var(--s7) * 11.67); padding: var(--s4); border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line);}
.brand-home[hidden] { display: none;}
.bh-card { display: flex; gap: var(--s3); align-items: center; min-width: 0;}
.bh-id { display: grid; gap: var(--hair2); min-width: 0;}
.bh-id b { font-size: var(--fs-title);}
.bh-id small { color: var(--n5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bh-last { font-size: var(--fs-caption); color: var(--n5);}
.bh-actions { display: flex; flex-wrap: wrap; gap: var(--s2);}
.bh-actions .ds-btn { flex: 1 1 calc(var(--s7) * 3.33); height: var(--s7);}
.bh-note, .bh-other { margin: 0;}
/* owner T100: a persona card leads with tier 1 (성별·나이대), the name and tier 2 details beneath; fixing / adding asks tier 1 first */
.persona-item { display: grid; gap: var(--s1);}
.choice.persona .t1 { font-family: var(--font); font-size: var(--fs-title); line-height: 1.3; padding-right: var(--s6);}
.choice.persona .t1.ask { color: var(--n5); font-size: var(--fs-title);}
.choice.persona .name { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); padding-right: 0;}
.t2-line { display: flex; flex-wrap: wrap; gap: var(--hair2) var(--s2); font-size: var(--fs-caption); color: var(--n5);}
.t2-line span + span::before { content: "·"; margin-right: var(--s2); color: var(--n5);}
.t2-line.pending { color: var(--n5);}
/* review #4 F35: the writer's inferred profile facts are tagged 가정 (not research) */
.t2-assume { display: inline-block; flex: none; font: var(--t-caption-strong); padding: 0 var(--s1); border-radius: var(--r1);
  border: var(--hair) solid var(--line-strong); color: var(--n5); margin-right: var(--s1); vertical-align: var(--hair);}
.t2-line .t2-assume + span::before { content: none; margin: 0;}
.persona-edit { justify-self: start; min-height: var(--s6); font-size: var(--fs-caption);}
.persona-add { margin: var(--s2) 0 0;}
.ps-persona { display: grid; gap: var(--s3);}
.pp-step { margin: 0; font-weight: var(--fw-bold);}
.pp-name { margin: 0; font-weight: var(--fw-bold); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline;}
.pp-group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2);}
.pp-group legend { font-size: var(--fs-caption); color: var(--n5); padding: 0; margin-bottom: var(--s2);}
.pick-row { display: flex; flex-wrap: wrap; gap: var(--s2);}
.pick-chip { min-height: var(--s6); padding: 0 var(--s4); border-radius: var(--pill); border: var(--hair) solid var(--line-strong); background: var(--surface); color: var(--n9); font: inherit; cursor: pointer;}
.pick-chip[aria-checked="true"] { background: var(--n9); color: var(--bg); border-color: var(--n9); font-weight: var(--fw-bold);}
.pp-preview { margin: 0; font-family: var(--font); font-size: var(--fs-title);}
.pp-field { display: grid; gap: var(--s1); font-size: var(--fs-caption); color: var(--n5);}
.pp-field input { height: var(--s7); padding: 0 var(--s3); border: var(--hair) solid var(--line-strong); border-radius: var(--r-s); background: var(--bg); color: var(--n9); font-size: var(--fs-body);}
.pp-actions { display: flex; gap: var(--s2); justify-content: flex-end;}
.pp-actions .ds-btn { height: var(--s7);}
/* owner T101: tier 2 on the card — compact lines and one non-wrapping row of chips per list; every item editable in the sheet */
.t2 { display: grid; gap: var(--s1); min-width: 0;}
.t2-spend { font-size: var(--fs-caption); color: var(--n5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.t2-spend b, .t2-row b { color: var(--n9); font-weight: var(--fw-bold); margin-right: var(--s1);}
.t2-row { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s1); overflow: hidden; font-size: var(--fs-caption); min-width: 0;}
.t2-row b { flex: none;}
.t2-row .ds-chip { flex: none;}
.ds-chip.sm { min-height: var(--s5); padding: var(--hair) var(--s2);}
.pp-chips { display: flex; flex-wrap: wrap; gap: var(--s1);}
.pp-chips:empty { display: none;}
.chip-x { margin-left: var(--hair2); width: var(--s5); height: var(--s5); border: 0; background: none; color: var(--n5); font-size: var(--fs-body); line-height: 1; cursor: pointer; border-radius: 50%;}
.chip-x:hover { background: var(--line);}
.pp-add { display: flex; gap: var(--s2);}
.pp-add input { flex: 1; min-width: 0; height: var(--s6); padding: 0 var(--s3); border: var(--hair) solid var(--line-strong); border-radius: var(--r-s); background: var(--bg); color: var(--n9); font-size: var(--fs-body);}
.pp-add .ds-btn { height: var(--s6); flex: none;}
/* UX-1 / Codex audit: channel lock + publish state on 어디에 쓸까요; direction card title / pain; paste-ready link */
.mr-state { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--hair2) var(--s2); font-size: var(--fs-caption);}
.mr-state:empty { display: none;}
.mr-lock { color: var(--danger, var(--accent)); font-weight: var(--fw-bold);}
.mr-pub { color: var(--n5);}
.mr-pub.ok { color: var(--accent);}
.mr-goal { flex-basis: 100%; color: var(--n5);}
.goal-lock { margin: var(--s2) 0 0; font-size: var(--fs-caption); color: var(--n5);}
.goal-lock b { color: var(--n9);}
.plan-title { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.plan-pain { font-size: var(--fs-caption); color: var(--n5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.plan-pain b { color: var(--n9); margin-right: var(--s1);}
.plan-scene { font-size: var(--fs-caption); color: var(--n5);}
.plan-more { justify-self: start; min-height: var(--s6); font-size: var(--fs-caption);}
#linkForm.ready button[type=submit] { box-shadow: 0 0 0 var(--hair2) var(--accent);}
.mr-lock.soft { color: var(--n9); font-weight: var(--fw-bold);}
/* Codex audit #5: readiness above the final decision; #3: precise edits */
.ready-slot:empty { display: none;}
.ready { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r-m); font-size: var(--fs-caption);}
.ready.ok { background: var(--n2); color: var(--n5);}
.ready.ok b { color: var(--n9); margin-right: var(--s2);}
.ready.wait { background: var(--n2); color: var(--n5);}   /* owner T575 #13: the film still making — not 쓸 수 있어요 */
.ready.wait b { color: var(--n9); margin-right: var(--s2);}
.ready.hold { display: grid; gap: var(--s2); background: var(--surface); border: var(--hair2) solid var(--n9);}
.ready.hold p { margin: 0; color: var(--n5);}
/* A3g late C judge: 생성됨 · 검수 중 until `evidence_judge` lands */
.ready.judging { display: grid; gap: var(--s2); background: var(--n2); color: var(--n5);}
.ready.judging b { color: var(--n9);}
.ready.judging p { margin: 0;}
.ready-fix { display: flex; flex-wrap: wrap; gap: var(--s2);}
.ready-fix:empty { display: none;}
.shot .done-stamp.held { background: var(--surface); color: var(--n9); box-shadow: 0 0 0 var(--hair2) var(--n9);}
/* root P0 (owner 22:17, B #RTQ3): no picture at this size -> the state card in the frame (그리는 중 / 보류), sized like the picture */
.shot [hidden], .det-media [hidden] { display: none !important;}
.shot .done-stamp[data-state="drawing"] { background: var(--n2); color: var(--n9); box-shadow: 0 0 0 var(--hair2) var(--line-strong);}
.shot-state { width: 100%; aspect-ratio: 1; box-sizing: border-box; display: grid; place-items: center; padding: calc(var(--s5) + var(--s5)) var(--s5) var(--s5);
  border-radius: var(--r-l); background: var(--n2); border: var(--hair2) dashed var(--line-strong);}
.shot.r45 .shot-state { aspect-ratio: 4 / 5;}
.shot.r916 .shot-state { aspect-ratio: 9 / 16;}
.shot-state[data-state="held"], .shot-state[data-state="gone"] { background: var(--surface); border: var(--hair2) solid var(--n9);}
.shot-state .ss-body { display: grid; gap: var(--s2); justify-items: center; text-align: center; max-width: 34ch;}
.shot-state b { font-size: var(--fs-body); color: var(--n9);}
.shot-state p { margin: 0; color: var(--n5); font-size: var(--fs-caption);}
.shot-state .ss-clock { color: var(--n9); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;}
.shot-state .ds-btn { margin-top: var(--s2);}
.ss-badge { padding: var(--hair2) var(--s3); border-radius: var(--pill); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); background: var(--n9); color: var(--bg);}
.shot-state[data-state="drawing"] .ss-badge { background: var(--surface); color: var(--n9); box-shadow: inset 0 0 0 var(--hair2) var(--line-strong);}
.det-media .shot-state { padding-top: var(--s5); min-height: calc(var(--s7) * 5); aspect-ratio: auto;}
.ss-pulse { width: var(--s3); height: var(--s3); border-radius: 50%; background: var(--accent); animation: ss-pulse 1.4s var(--ease-out) infinite;}
@keyframes ss-pulse { from { box-shadow: var(--e1);} to { box-shadow: 0 0 0 var(--s3) transparent;} }
@media (prefers-reduced-motion: reduce) { .ss-pulse { animation: none;} }
@media (min-width: 960px) {
  .result .shot.no-pic { width: 100%; max-width: calc(var(--s7) * 10.83);}
  .result .shot.no-pic .shot-state { max-height: calc(100dvh - var(--top-h) - var(--bar-h) - calc(var(--s7) * 4.79)); min-height: calc(var(--s7) * 7.5);}
}
.ready.compact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2);}
.ratio.off { background: var(--n2); color: var(--n5); cursor: default; box-shadow: none;}
.ratio.off:active { transform: none;}
.ratio.off small { font-weight: var(--fw-bold); opacity: 1;}
.dl-row [aria-disabled="true"] { opacity: .6; cursor: default;}
.shot .done-stamp:is([data-state="drawing"], [data-state="held"], [data-state="judging"]) { padding-left: var(--s3);}
.shot .done-stamp:is([data-state="drawing"], [data-state="held"], [data-state="judging"]) .stamp { display: none;}   /* no check mark on a piece that is not done */
.dl-main[aria-disabled="true"] { background: var(--n2); color: var(--n5); box-shadow: inset 0 0 0 var(--hair2) var(--line-strong); cursor: default;}
.edit-actions { display: flex; flex-wrap: wrap; gap: var(--s2);}

.edit-body:empty { display: none;}
.ed-form { display: grid; gap: var(--s3);}
.ed-field { display: grid; gap: var(--s1); font-size: var(--fs-caption); color: var(--n5);}
.ed-field textarea { width: 100%; padding: var(--s2) var(--s3); border: var(--hair) solid var(--line-strong); border-radius: var(--r-s); background: var(--bg); color: var(--n9); font: inherit; resize: vertical;}
.ed-problem { color: var(--danger, var(--accent)); font: var(--t-caption-strong);}
.ed-row { display: flex; gap: var(--s3); align-items: center;}
.ed-hooks { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s3);}
.ed-hooks li { display: grid; gap: var(--s1);}
.ed-hooks .ds-btn { justify-self: start;}
.ed-hook { font-weight: var(--fw-bold);}
.ed-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);}
.ed-pic { padding: 0; border: var(--hair) solid var(--line); border-radius: var(--r-s); background: var(--n2); overflow: hidden; display: grid; cursor: pointer;}
.ed-pic img { width: 100%; aspect-ratio: 1; object-fit: cover;}
.ed-pic small { padding: var(--hair2) var(--s2); font-size: var(--fs-caption); color: var(--n5);}
.ed-pic[aria-busy="true"] { opacity: .5;}
/* UX-2 #2: a picture-less post shows its words in the picture's place; a never-rendered B says so */
.shot .tp-inline { padding: var(--s4); padding-top: calc(var(--s4) + var(--s6)); border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line); min-height: calc(var(--s7) * 6.67); display: grid; gap: var(--s2); align-content: start;}
.ready.lost { background: var(--n2); color: var(--n5); margin-top: var(--s2);}
.ready.lost b { color: var(--n9);}
/* UX-1 #8 (Codex marketer P2: 목적 40 px, 바꾸기 36 px, 숨기기 32 px): on phones every control is a 44 px tap target */
@media (max-width: 479px) {
  .purpose-seg button, .copy-tabs button, .ch-copy, .pick-chip, .pp-add input, .pp-add .ds-btn { height: var(--s7); min-height: var(--s7);}
  .setup-chip .ds-btn--ghost, .wait-deck .wd-head, .wait-deck .wd-hide, .wait-card .wd-row .ds-btn--ghost, .wd-off .ds-btn--ghost, .kakao-card .kk-off,
  .plan-more, .persona-edit, .shelf-up, .pid-tag .pid { min-height: var(--s7);}
     /* DEV #3 control audit: 삭제 / 빼기 were 23 px wide */
  .top .mark, a.mark { display: inline-flex; align-items: center; min-height: var(--s7);}
}
/* owner T99 (root 18:4x): per piece how its picture was made ('전체 생성 · v7.0.7' vs '조립'); a make held on AI capacity in the HUD */
.pid-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3);}
.pid-row .pid-tag { margin: 0;}
.piece-engine { margin: 0; font-size: var(--fs-caption); color: var(--n5); letter-spacing: 0;}
.piece-engine[data-mode="generated"] { color: var(--n5); font-weight: var(--fw-bold);}
.hud .ready.capacity { display: grid; gap: var(--s1); margin-top: var(--s2); padding: var(--s3); border-radius: var(--r-m); background: var(--stage-surface); color: var(--stage-text); border: var(--hair) solid var(--stage-line); font-size: var(--fs-caption);}
.hud .ready.capacity p { margin: 0; opacity: .86;}
.hud .ready.capacity .cap-clock { opacity: 1; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;}
.hud .ready.capacity[data-state="failed"] b { color: var(--stage-alert);}
/* window 20 P0: a make waiting for a drawing slot — its place and minutes (never 멈췄어요) */
.hud .ready.queue { display: grid; gap: var(--s1); margin-top: var(--s2); padding: var(--s3); border-radius: var(--r-m); background: var(--stage-surface); color: var(--stage-text); border: var(--hair) solid var(--stage-line); font-size: var(--fs-caption);}
.hud .ready.queue p { margin: 0; opacity: .86;}
.hud .ready.queue [data-testid=queue-line] { opacity: 1; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;}
.hud:has([data-testid=make-queue]) .why-line .why-text { display: none;}   /* the card says the queue line; the why line keeps the total range */
/* root 19:0x: a theme on a poster piece that cannot be redrawn yet — shown, never pressed into a composite */
.theme-card[data-soon] { opacity: .6; cursor: not-allowed;}
.ds-chip.soon { margin-left: var(--s1);}

/* owner T102 (1) 요금제 page: the plan table, the current plan marked; (2) 채널 연결 page: one row per channel, its state, connect, test */
.rail .dest.sub { height: var(--s6); font: var(--t-caption-strong);}
.rail .meter-mini { text-decoration: none;}
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s7) * 4.58), 1fr)); gap: var(--s3);}
.plan-card { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line);}
.plan-card.on { border: var(--hair2) solid var(--n9); box-shadow: 0 0 0 var(--hair2) var(--accent);}
.plan-card p { margin: 0;}
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);}
.plan-name { font-size: var(--fs-body);}
.plan-now { padding: var(--hair2) var(--s3); border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.plan-price b { font-size: var(--fs-display); font-variant-numeric: tabular-nums;}
.plan-price small, .plan-price s { color: var(--n5); margin-left: var(--s1);}
.plan-points { font-weight: var(--fw-bold);}
.plan-adds, .plan-facts { color: var(--n5); font-size: var(--fs-caption);}
.plan-facts { margin: 0; padding-left: var(--s4); display: grid; gap: var(--hair2);}
.plan-card .ds-btn { margin-top: var(--s2); justify-self: start;}
.plan-locks ul, .plan-costs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2);}
.plan-locks li, .plan-costs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); font-size: var(--fs-caption);}
.page-plans .tile, .page-channels .tile { margin-top: var(--s4);}
.chn-rows { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(calc(var(--s7) * 5.83), 1fr));}
.chn-row { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line);}
.chn-row p { margin: 0;}
.chn-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);}
.chn-head b { white-space: nowrap;}
.chn-chip { flex: none; white-space: nowrap;}
.chn-chip { padding: var(--hair2) var(--s3); border-radius: var(--pill); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); background: var(--n2); color: var(--n5);}
.chn-chip.ok { background: var(--accent); color: var(--on-accent);}
.chn-chip.warn { background: var(--n9); color: var(--bg);}
.chn-test { padding: var(--s3); border-radius: var(--r-m); background: var(--n2); font-size: var(--fs-caption); display: grid; gap: var(--s1);}
.chn-test[hidden] { display: none;}
.chn-test p { margin: 0;}
.chn-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--hair2);}
.chn-checks li[data-ok="false"] { font-weight: var(--fw-bold); color: var(--n9);}
.chn-back { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-m); background: var(--n2); font-weight: var(--fw-bold);}
.chn-back[hidden] { display: none;}
/* owner T102 (3) 모션그래픽 고르기: mode cards with the proof strip as preview, scene moods, sizes; compact on 어디에 쓸까요 (릴스·쇼츠) */
.mc { display: grid; gap: var(--s2);}
.mc-h { margin: var(--s2) 0 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.mc-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2);}
@media (min-width: 960px) { .mc:not(.compact) .mc-modes { grid-template-columns: repeat(4, minmax(0, 1fr));} }
.mc-mode, .mc-dir { display: grid; gap: var(--s1); align-content: start; text-align: left; padding: var(--s2); min-height: var(--s7); border-radius: var(--r-m); border: var(--hair2) solid var(--line-strong);
  background: var(--surface); color: var(--n9); font: inherit; cursor: pointer;}
.mc-mode[aria-checked="true"], .mc-dir[aria-checked="true"] { border-color: var(--n9); box-shadow: 0 0 0 var(--hair2) var(--accent);}
.mc-mode b, .mc-dir b { font-size: var(--fs-caption);}
.mc-mode small, .mc-dir small { color: var(--n5); font-size: var(--fs-caption); line-height: 1.4;}
.mc-pv { display: grid; place-items: center; height: var(--s7); border-radius: var(--r-s); background: var(--n2); overflow: hidden;}
.mc.compact .mc-pv { height: var(--s6);}
.mc-strip { width: 100%; height: 100%; object-fit: cover; display: block;}
.mc-dir .mc-strip { height: var(--s6); border-radius: var(--r-s);}
.mc-ph { color: var(--n5); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.mc-dirs { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s7) * 2.92), 1fr)); gap: var(--s2);}
.mc-ratios { display: flex; flex-wrap: wrap; gap: var(--s2);}
.mc-ratio { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--s7); padding: 0 var(--s3); border-radius: var(--pill); border: var(--hair2) solid var(--line-strong); background: var(--surface); color: var(--n9); font: inherit; font-weight: var(--fw-bold); cursor: pointer;}
.mc-ratio[aria-pressed="true"] { background: var(--n9); color: var(--bg); border-color: var(--n9);}
@media (hover: hover) { .mc-mode:hover, .mc-dir:hover, .mc-ratio:hover { border-color: var(--n9);} }
.goal-motion { display: grid; gap: var(--s2); margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line);}
.goal-motion[hidden] { display: none;}
.gm-h { margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: 0; color: var(--n9);}   /* not the display face at this size */
/* owner T114 + T105: the wait screen's information carousel is the main element — 알게 된 사실 / 마케팅 팁, one big card, ~8 s, dots + a
   time bar, ‹ › / swipe / arrow keys, 멈춤; the show stage steps aside (its big line, side list, reel, collage) while it is up */
.info-carousel { display: grid; gap: var(--s3); margin-top: var(--s4); overflow-x: clip;}
.info-carousel .ic-card { display: grid; align-content: center; gap: var(--s3); padding: var(--s6) var(--s5); border-radius: var(--r-l); background: var(--surface);
  border: var(--hair) solid var(--line); color: var(--n9); touch-action: pan-y; user-select: none; -webkit-user-select: none;}
.info-carousel.main .ic-card { min-height: min(58vh, calc(var(--s7) * 9.58));}
.info-carousel.compact .ic-card { min-height: calc(var(--s7) * 4.17); padding: var(--s4);}
@media (min-width: 960px) { .info-carousel.main .ic-card { min-height: min(56vh, calc(var(--s7) * 10.83)); padding: var(--s7) var(--s7);} }
.ic-kind { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.ic-tag { padding: var(--s1) var(--s3); border-radius: var(--pill); background: var(--accent); color: var(--on-accent);}
.ic-card[data-kind="tip"] .ic-tag { background: var(--n9); color: var(--bg);}
.ic-head { margin: 0; font: var(--t-display); text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere;}
@media (min-width: 960px) { .info-carousel.main .ic-head { font-size: var(--fs-display);} }
.info-carousel.compact .ic-head { font-size: var(--fs-title);}
.ic-sub { margin: 0; font-size: var(--fs-body); color: var(--n5); line-height: 1.6; word-break: keep-all;}
.ic-foot { display: flex; align-items: center; gap: var(--s2);}
.ic-btn { min-width: var(--s7); min-height: var(--s7); border-radius: var(--pill); border: var(--hair2) solid var(--line-strong); background: var(--surface); color: var(--n9);
  font: inherit; font-weight: var(--fw-bold); display: inline-grid; place-items: center; cursor: pointer;}
.ic-btn span { font-size: var(--fs-display); line-height: 1; margin-top: calc(-1 * var(--hair2));}
.ic-pause { padding: 0 var(--s3); font-size: var(--fs-caption);}
.ic-pause[aria-pressed="true"] { background: var(--n9); color: var(--bg); border-color: var(--n9);}
@media (hover: hover) { .ic-btn:hover { border-color: var(--n9);} }
.ic-dots { flex: 1; display: flex; justify-content: center; align-items: center; gap: var(--s1);}
.ic-dots i { width: var(--s2); height: var(--s2); border-radius: var(--r1); background: var(--line-strong); transition: width var(--dur-quick) var(--ease-out);}
.ic-dots i.on { width: var(--s5); background: var(--n9);}
.ic-time { height: var(--s1); border-radius: var(--r1); background: var(--line); overflow: hidden;}
.ic-time i { display: block; height: 100%; width: 0; background: var(--accent);}
@keyframes ic-time { from { width: 0;} to { width: 100%;} }
.ic-card.in-r { animation: ic-in-r var(--dur-move) var(--ease-out);}
.ic-card.in-l { animation: ic-in-l var(--dur-move) var(--ease-out);}
@keyframes ic-in-r { from { opacity: 0; transform: translateX(var(--s5));} to { opacity: 1; transform: none;} }
@keyframes ic-in-l { from { opacity: 0; transform: translateX(calc(-1 * var(--s5)));} to { opacity: 1; transform: none;} }
@media (prefers-reduced-motion: reduce) { .ic-card.in-r, .ic-card.in-l { animation: none;} .ic-time i { animation: none !important; width: 0;} }
.info-carousel.on-stage .ic-card { background: var(--stage-surface); border-color: var(--stage-line); color: var(--stage-text);}
.info-carousel.on-stage .ic-sub, .info-carousel.on-stage .ic-kind { color: var(--stage-text-2);}
.info-carousel.on-stage .ic-card[data-kind="tip"] .ic-tag { background: var(--stage-text); color: var(--stage);}
.info-carousel.on-stage .ic-btn { background: var(--stage-surface); border-color: var(--stage-line); color: var(--stage-text);}
.info-carousel.on-stage .ic-pause[aria-pressed="true"] { background: var(--stage-text); color: var(--stage);}
.info-carousel.on-stage .ic-dots i { background: var(--stage-line);}
.info-carousel.on-stage .ic-dots i.on { background: var(--stage-text);}
.info-carousel.on-stage .ic-time { background: var(--stage-line);}
.stage.deck-main .stage-main, .stage.deck-main .side, .stage.deck-main .reel, .stage.deck-main .collage, .stage.deck-main .stats { display: none !important;}
@media (min-width: 960px) {   /* desktop: the progress line on top, the carousel across the stage under it */
  .stage.deck-main > .wait-extras { grid-column: 1 / -1; grid-row: 2; align-self: start;}
  .info-carousel.main .ic-card > * { max-width: calc(var(--s7) * 15.83);}
}
.stage.deck-main { overflow-y: auto;}

.bar .ds-btn[aria-disabled="true"] { opacity: .55; cursor: default;}   /* 올리기 with no drawn picture */
/* owner T107: the brand strength a 망설임 / 구매 계기 comes from, inside its chip */
.t2-strength { margin-left: var(--s1); padding-left: var(--s1); border-left: var(--hair) solid var(--line-strong); font: var(--t-caption-strong); color: var(--n5); white-space: nowrap;}
/* owner T113: 어떤 글로 올릴까요 (브랜드 글 · 정보성 글 + topics) and a 정보성 post's sources */
.goal-organic { display: grid; gap: var(--s2); margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-l); background: var(--surface); border: var(--hair) solid var(--line);}
.goal-organic[hidden] { display: none;}
.goal-organic p { margin: 0;}
.topic-list { display: grid; gap: var(--s2);}
.topic { display: grid; gap: var(--hair2); text-align: left; padding: var(--s2) var(--s3); min-height: var(--s7); border-radius: var(--r-m); border: var(--hair2) solid var(--line-strong); background: var(--surface); color: var(--n9); font: inherit; cursor: pointer;}
.topic[aria-checked="true"] { border-color: var(--n9); box-shadow: 0 0 0 var(--hair2) var(--accent);}
.topic b { font-size: var(--fs-caption);} .topic small { color: var(--n5); font-size: var(--fs-caption);}
.topic-free { display: grid; gap: var(--s1);}
.topic-free .in { height: var(--s7); padding: 0 var(--s3); border-radius: var(--r-s); border: var(--hair2) solid var(--line-strong); background: var(--surface); color: var(--n9); font: inherit;}
.info-src { display: grid; gap: var(--s1); margin: var(--s2) 0; padding: var(--s3); border-radius: var(--r-m); background: var(--n2); font-size: var(--fs-caption);}
.info-src p { margin: 0;} .info-src ol { margin: 0; padding-left: var(--s4); display: grid; gap: var(--hair2);}
.info-src a { color: var(--n9);}
.info-chip b { padding: var(--hair2) var(--s2); border-radius: var(--pill); background: var(--n9); color: var(--bg); font-size: var(--fs-caption);}
.info-topic, .info-fb { margin: 0;} .info-topic .lbl { margin-right: var(--s1);}
.info-fb { color: var(--n5);}
.info-more summary { min-height: var(--s7); display: flex; align-items: center; cursor: pointer; font-weight: var(--fw-bold); color: var(--n9);}
.info-more ol { margin: 0 0 var(--s1); padding-left: var(--s4); display: grid; gap: var(--s2);}
.info-more li p { margin: 0;} .info-more li .meta { word-break: keep-all; overflow-wrap: anywhere;}
.info-stale { color: var(--n5); font-size: var(--fs-caption);}
.info-basis { display: grid; gap: var(--hair2); padding-top: var(--s2); border-top: var(--hair) solid var(--line);}
.info-basis p { margin: 0;} .info-basis .meta { word-break: keep-all; overflow-wrap: anywhere;}
/* owner T118: no failure words — what is still coming says 다듬는 중; a soft clearer redraw sits under a held (shown) piece */
   /* T118: every piece has a tab — never overlapping, a sideways scroll at worst */

.ds-seg .seg-note { display: block; font: var(--t-caption-strong); opacity: .8;}
.ds-seg button:has(.seg-note) .seg-wait { display: none;}
.soft-fix { margin: 0;}
.soft-fix .ds-btn--ghost { min-height: var(--s7);}

.post-refining { display: grid; gap: var(--s2); justify-items: center; text-align: center; padding: var(--s6) var(--s4);}
.post-refining p { margin: 0;}
/* owner T117: 다른 사이즈 추가 생산 under the size tiles — chips of the sizes not made yet, a state card per size being drawn */
.add-sizes { display: grid; gap: var(--s2); margin-top: var(--s2);}
.add-sizes .as-open { justify-self: start; min-height: var(--s7);}
.as-pick { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r-m); background: var(--n2);}
.as-pick[hidden] { display: none;}
.as-pick .meta { margin: 0;}
.as-chips { display: flex; flex-wrap: wrap; gap: var(--s2);}
.as-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--s7); padding: 0 var(--s4); border-radius: var(--pill); border: var(--hair2) solid var(--line-strong);
  background: var(--surface); color: var(--n9); font: inherit; cursor: pointer;}
.as-chip small { font-weight: var(--fw-regular); color: var(--n5);}
.as-chip[aria-pressed="true"] { background: var(--n9); color: var(--bg); border-color: var(--n9);}
.as-chip[aria-pressed="true"] small { color: inherit; opacity: .8;}
@media (hover: hover) { .as-chip:hover { border-color: var(--n9);} }
.as-pick [data-asgo] { justify-self: start; min-height: var(--s7);}
.as-msg { margin: 0; font-size: var(--fs-caption); color: var(--n5);}
.as-msg:empty { display: none;}
.sz-shape { display: inline-block; border: var(--hair2) solid currentColor; border-radius: var(--r1); width: var(--s3); height: var(--s3); flex: none;}
.sz-shape.r4x5 { height: var(--s4);} .sz-shape.r9x16 { width: var(--s3); height: var(--s4);}
.size-state { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border-radius: var(--r-m); border: var(--hair2) dashed var(--line-strong); background: var(--surface);}
.size-state p { margin: 0;} .size-state .meta { margin-top: var(--hair2);}
.size-state .ss-badge { display: inline-block; padding: var(--hair) var(--s2); border-radius: var(--pill); background: var(--n2); color: var(--n9); box-shadow: inset 0 0 0 var(--hair) var(--line-strong); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); opacity: 1;}
.size-state .sz-clock { font-size: var(--fs-caption); color: var(--n5); font-variant-numeric: tabular-nums;}
/* A10b #19 (owner T113): a 정보성 인스타그램 carousel on the result frame and the 보관함 sheet — one card at a time, the controls in a row
   under it (the card's own words stay uncovered) */
.has-slides img { touch-action: pan-y; user-select: none; -webkit-user-drag: none;}
.det-media.has-slides { max-height: none; overflow: visible; background: none; display: block; place-items: normal;}   /* (place-items: center would shrink the controls row) */
.det-media.has-slides img { width: auto; height: auto; max-width: 100%; max-height: 52dvh; aspect-ratio: 4 / 5; object-fit: cover; margin: 0 auto; border-radius: var(--r-l); background: var(--n2);}
.det-media.has-slides .sl-miss { max-height: 52dvh;}
.sl-nav { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2);}
.sl-btn { min-width: var(--s7); min-height: var(--s7); border-radius: var(--pill); border: var(--hair2) solid var(--line-strong); background: var(--surface); color: var(--n9);
  font: inherit; font-weight: var(--fw-bold); display: inline-grid; place-items: center; cursor: pointer;}
.sl-btn span { font-size: var(--fs-display); line-height: 1; margin-top: calc(-1 * var(--hair2));}
.sl-btn[aria-disabled] { opacity: .4; cursor: default;}
@media (hover: hover) { .sl-btn:not([aria-disabled]):hover { border-color: var(--n9);} }
.sl-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s2); min-width: 0;}
.sl-dots { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; justify-content: center;}
.sl-dots i { width: var(--s2); height: var(--s2); border-radius: var(--r1); background: var(--line-strong); transition: width var(--dur-quick) var(--ease-out);}
.sl-dots i.on { width: var(--s4); background: var(--n9);}
.sl-count { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); font-variant-numeric: tabular-nums; color: var(--n9); white-space: nowrap;}
.sl-miss { width: 100%; aspect-ratio: 4 / 5; box-sizing: border-box; display: grid; place-items: center; padding: var(--s5); text-align: center; border-radius: var(--r-l);
  background: var(--surface); border: var(--hair2) solid var(--line-strong); color: var(--n5); font-size: var(--fs-caption);}
.has-slides img.sl-in-r { animation: ic-in-r var(--dur-move) var(--ease-out);}
.has-slides img.sl-in-l { animation: ic-in-l var(--dur-move) var(--ease-out);}
@media (prefers-reduced-motion: reduce) { .has-slides img.sl-in-r, .has-slides img.sl-in-l { animation: none;} }
.sl-dl { display: grid; gap: var(--s1); margin-top: var(--s2);}
.sl-dl .lbl { margin: 0;}
.sl-dl-row { display: flex; flex-wrap: wrap; gap: var(--s2);}
.sl-dl-row .sl-card { min-height: var(--s7);}
.ic-btn[aria-disabled="true"] { opacity: .4; cursor: default;}
/* DEV #21 (b): a poster's printed words in the copy tile; the pre-poster draft behind a disclosure */
.printed { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2);}
.printed li { display: grid; gap: var(--hair2);}
.printed .pr-role { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.printed li[data-role="headline"] .line, .printed li[data-role="hook"] .line { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.draft summary { min-height: var(--s7); display: flex; align-items: center; cursor: pointer; font-size: var(--fs-caption); color: var(--n5);}
.draft .draft-body { opacity: .75;}

/* ===================================================================================================================================
   owner T119 + A12 UX-T119-SPEC §1.4 — FIXED wizard screens (body.fx): the screen is a grid of header · main · bar (100svh, 100vh
   fallback); main scrolls only as a safety valve (the shell_check `fixed` gate fails when it does); the bar is a row in the flow (iOS 26
   drifts position:fixed while the toolbar animates); no tab bar / rail in the task; header 52 px with 뒤로 / 홈으로, the n/6 counter
   over a 3-px line, and the account / pill on the right. Gates: 390×664, 360×640 (and composed at 390×844, 1280×800).
   =================================================================================================================================== */
body.fx { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100svh; overflow: hidden;}
body.fx > header.top { grid-row: 1; position: static; height: var(--s7);}
body.fx > main { grid-row: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain; width: 100%; box-sizing: border-box;
  padding: var(--s4) var(--gutter) var(--s4);}
body.fx > .bar { grid-row: 3; position: static; padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0));}
body.fx > .tabbar, body.fx > .rail { display: none !important;}
body.fx .steps { max-width: calc(var(--s7) * 4.58); gap: var(--s2); align-items: center;}
body.fx .steps .step-count { flex: none; height: auto; background: none; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5); font-variant-numeric: tabular-nums;}
body.fx .steps .step-line { flex: 1; height: var(--s1); border-radius: var(--pill); background: var(--n2); overflow: hidden;}
body.fx .steps .step-line i { display: block; height: 100%; background: var(--n9); border-radius: inherit;}
body.fx .step-name { display: none;}
body.fx .work-head h2 { font-size: var(--fs-title); line-height: normal; word-break: keep-all; text-wrap: balance;}
body.fx .work-head .lead { font-size: var(--fs-body); line-height: normal; margin-top: var(--s2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
@media (max-height: 700px) {   /* §1.4.9 short-height mode: the lead hides, gaps tighten, the hero shrinks first */
  body.fx main { padding-top: var(--s3);}
  body.fx .work-head .lead { display: none;}
}
@media (min-width: 960px) { body.fx > main { max-width: calc(var(--s7) * 15.83); margin: 0 auto;} }

/* T119 §1.6 + T120 / T121: 어디에, 어떤 형태로 쓸까요? on one fixed screen */
.fx-goal { gap: var(--s3);}
.setup-line { display: flex; align-items: center; gap: var(--s2); margin: 0; min-height: var(--s4); font-size: var(--fs-caption); color: var(--n5);}
.setup-line #setupStripText { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pulse-dot { flex: none; width: var(--s2); height: var(--s2); border-radius: 50%; background: var(--n9); animation: pulse-dot 1.4s var(--ease-in-out) infinite;}
@keyframes pulse-dot { 50% { opacity: .25;} }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none;} }
.ds-seg.wide { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; justify-self: stretch; box-sizing: border-box;}
.ds-seg.wide button { height: var(--s7);}
.fx-goal .kpi-goal { margin: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap;}
.fx-goal .kpi-goal .kpi-chip { padding: var(--hair2) var(--s2);}
.ch-forms { gap: var(--s2);}
@media (min-width: 768px) { .ch-forms { grid-template-columns: 1fr;} }
.ch-pick { display: grid; gap: var(--s1);}
.ch-pick .medium-row { min-height: var(--s7); padding: var(--s1) var(--s3); grid-template-columns: var(--s5) auto minmax(0, 1fr); grid-template-rows: auto;}
.ch-pick .medium-row .mr-box { grid-row: 1; width: var(--s5); height: var(--s5);}
.ch-pick .medium-row .mr-title { font-size: var(--fs-body); white-space: nowrap;}
.ch-pick .medium-row .mr-line { grid-column: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-caption);}
.ch-pick .mr-state:empty { display: none;}
.ch-pick .mr-state { font-size: var(--fs-caption); padding-left: var(--s2);}
.form-chips { display: flex; gap: var(--s2); flex-wrap: wrap;}
.form-chip { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--s7); padding: 0 var(--s4); border-radius: var(--pill); border: 0;
  background: var(--n2); color: var(--n9); font: inherit; cursor: pointer;}
.form-chip svg { width: var(--s4); height: var(--s4); stroke-width: 2.6;}
.form-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 var(--hair2) var(--on-accent);}
.row-link { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--s7); padding: 0 var(--s3); border: 0; border-radius: var(--r-m);
  background: var(--surface); box-shadow: inset 0 0 0 var(--hair) var(--line); color: var(--n9); font: inherit; text-align: left; cursor: pointer;}
.row-link .lbl { margin: 0; flex: none;}
.row-link b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--t-body-strong);}
.row-link small { flex: none; color: var(--n5); font-size: var(--fs-caption);}
.row-link .chev { flex: none; font-size: var(--fs-title); color: var(--n5);}
.goal-organic { display: grid; gap: var(--s2);}
.fx-goal .goal-lock { margin: 0; font-size: var(--fs-caption); color: var(--n5);}
.fx-goal .goal-lock .ds-btn--ghost { min-height: var(--s7);}
@media (max-height: 700px) { .fx-goal { gap: var(--s2);} .fx-goal .kpi-goal, .fx-goal .setup-line { display: none;} }
.fx-goal .goal-organic, .fx-goal .goal-motion { margin: 0; padding: 0; border: 0; background: none; border-radius: 0;}
.fx-goal .medium-rows { margin: 0;}
.fx-goal .mr-lock { font-weight: var(--fw-bold);}
@media (max-height: 700px) { .fx-goal #kpiGoal { display: none;} }
.ch-forms > .ch-pick { margin: 0;}
/* the fixed goal is one column at every width (spec §1.4.12: centred, ≤ 640 at 1280) */
.work.fx-goal { grid-template-columns: minmax(0, 1fr) !important; max-width: calc(var(--s7) * 13.33); margin: 0 auto; width: 100%;}
.work.fx-goal > * { grid-column: 1;}
body.fx .work-head { position: static;}   /* inside the fixed screen the title never sticks over the choices */
@media (max-height: 700px) { .fx-goal #goalLock { display: none !important;} .ch-pick .mr-state { font-size: var(--fs-caption);} }
/* B1 #4: a stopped stage — the reason and its actions right under the progress line, nothing behind it moves */
.stage.failed .stage-main, .stage.failed .side, .stage.failed .reel, .stage.failed .collage, .stage.failed .stats, .stage.failed .deal,
.stage.failed .info-carousel, .stage.failed .kakao-card, .stage.failed .why-line { display: none !important;}
.stage.failed .stage-actions { justify-content: stretch; padding: var(--s3) 0;}
.stage.failed .stage-actions .problem { width: 100%;}
/* owner T128 / T129 PC wizard layout: moved to static/lg/app/p1.css (Liquid Glass P1, two layouts per screen) */
/* B2 #5 / #16: the 쇼츠 path while YouTube publishing is not open — MP4 받기, 제목·설명 복사, YouTube Studio */
.yt-path { display: grid; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: var(--hair) solid var(--line);}
.yt-steps { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s2);}
.yt-steps li { padding-left: var(--hair2);}
.yt-steps .ds-btn { min-height: var(--s7);}

/* owner T135 ('로그인 상태에도 첫 화면에서 잠깐 비로그인 화면이 뜨고'): until the shell knows who is here and the first screen is chosen
   (app.js booted()), the page shows a quiet skeleton — never the guest's link screen to a member. A CSS-only reveal after 10 s keeps a
   broken boot from leaving a blank page. */
.boot-splash { display: none;}
body.booting .boot-splash { display: grid; gap: var(--s3); width: min(100%, calc(var(--s7) * 11.67)); margin: var(--s6) auto 0; animation: boot-hide 0s 10s forwards;}
.boot-splash .bs-title { height: var(--s6); width: 72%;}
.boot-splash .bs-line { height: var(--s4); width: 54%;}
.boot-splash .bs-card { height: calc(var(--s7) * 3.5);}
body.booting :is(#main > :not(.boot-splash), #bar, #tabbar, #rail, #accountBtn, #langBtn, #planBadge, #shelfBtn, #switcherSlot, #steps, #stepName) { visibility: hidden; animation: boot-reveal 0s 10s forwards;}
@keyframes boot-reveal { to { visibility: visible;} }
@keyframes boot-hide { to { visibility: hidden; height: 0; margin: 0;} }
/* T135: another link is a small action in the brand card's corner, and the link box's way back to the brand sits in its label row */
.bh-card .bh-other { margin-left: auto; align-self: flex-start; flex: none; min-height: var(--s7); padding: 0 var(--hair2); font-size: var(--fs-caption); color: var(--n5);}
.url-head .bh-back { min-height: var(--s7); font-size: var(--fs-caption);}
/* T135 (a first-time marketer on their own brand's home): the guest's how-it-works line and the 피른 example ad are not their brand —
   the card is the way in; the brand home (memberHome) follows; the column takes the page when no live feed sits beside it */
#s-link.brand-mode :is(.three, .three-caption, .hero-side .example, .hero-side .home-story) { display: none;}
#s-link.brand-mode .hero:not(:has(#feed:not([hidden]))) { grid-template-columns: minmax(0, 1fr);}
#s-link.brand-mode .hero:not(:has(#feed:not([hidden]))) .hero-side { display: none;}
#s-link.brand-mode .brand-home { max-width: calc(var(--s7) * 13.33);}
/* T135: the red button of a destructive confirm (confirmAct); the in-place question under a control inside a sheet */

.confirm-text { margin: 0 0 var(--s4); color: var(--n5);}
.confirm-acts .ds-btn { min-height: var(--s7); flex: 1 1 calc(var(--s7) * 2.5);}
.confirm-inline { display: grid; gap: var(--s2); margin: var(--s2) 0; padding: var(--s3); border-radius: var(--r-m); background: var(--n2);}
.confirm-inline p { margin: 0;}
[data-photos] > .confirm-inline, .ratios > .confirm-inline { grid-column: 1 / -1;}
/* A1e w37 (매쓰홀릭-r2 #32): who shares the text a 문구만 고치기 changes — before saving (a callout when shared), and what changed after */
.copy-scope { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-s); background: var(--n2); font-size: var(--fs-caption);}
.copy-scope.shared { background: var(--accent-soft); color: var(--n9); font-weight: var(--fw-bold);}
.copy-changed { margin: var(--s2) 0 var(--s4); padding-left: var(--s4); display: grid; gap: var(--s1);}
.ready.provisional { color: var(--n9);} .ready.provisional b { color: var(--warn);}
.bar .ds-btn[aria-disabled="true"] { opacity: .55; cursor: default;}   /* r2 #27: 올리기 while nothing is drawn yet */
.bl-more { margin: 0;} .bl-more a { min-height: var(--s7); display: inline-flex; align-items: center;}   /* UX-B4 블레브: 요금제 자세히 보기 was a 96 x 16 link to another page */
/* UX-B4 블레브 (A9g, 390: 홈 / 브랜드 / 설정 laid out at 531 px and zoomed out): whatever spills sideways is clipped — the page never
   widens past the phone (clip, not hidden: no scroll container, sticky headers keep working) */
html, body { overflow-x: clip;}
#blQty.bl-bump { animation: bl-bump .35s var(--ease-out, ease-out); display: inline-block;}
@keyframes bl-bump { 40% { transform: scale(1.18);} }
.bl-qnote { margin: var(--s1) 0 0;}
/* owner T145: the reference pane (js/refpane.js) — one pick; 콘토 추천 first; videos play muted while on screen */
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); align-items: start;}
@media (min-width: 760px) { .rp-grid { grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media (min-width: 1100px) { .rp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s3);} }
.rp-h { grid-column: 1 / -1; margin: var(--s3) 0 0;}
.rp-tile { position: relative; min-width: 0;}
.rp-pick { display: grid; gap: var(--s1); width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit;}
.rp-frame { position: relative; display: block; aspect-ratio: var(--rp-ar, 16 / 9); overflow: hidden; border-radius: var(--r-m); background: var(--n2);}
.rp-media, .rp-frame > img { position: absolute; inset: 0;}
.rp-frame img, .rp-frame video, .rp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none;}
.rp-pick[aria-checked="true"] .rp-frame { box-shadow: 0 0 0 var(--hair2) var(--accent);}
.rp-pick[aria-checked="true"] .rp-frame::after { content: "선택"; position: absolute; left: var(--s2); top: var(--s2); z-index: 2; padding: var(--s1) var(--s2); border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.rp-cap { font-size: var(--fs-caption); line-height: 1.35; color: var(--n5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.rp-big { position: absolute; top: var(--s1); right: var(--s1); z-index: 3; min-height: var(--s7); min-width: var(--s7); padding: 0 var(--s2); border: 0; border-radius: var(--pill); background: var(--scrim); color: var(--n0); font: var(--t-caption-strong); cursor: pointer;}
.rp-auto .rp-frame { aspect-ratio: 4 / 5; display: grid; place-content: center; gap: var(--s1); padding: var(--s3); text-align: center; background: var(--accent-soft);}
.rp-auto .rp-frame b { font-size: var(--fs-title);}
.rp-auto .rp-frame small { color: var(--n5);}
.rp-none { margin-top: var(--s3);}
.rp-bigview { width: 100%; aspect-ratio: var(--rp-ar, 16 / 9); max-height: 62vh; margin: 0 auto var(--s3); background: var(--n9); border-radius: var(--r-m); overflow: hidden;}
.rp-bigview video, .rp-bigview iframe, .rp-bigview img { width: 100%; height: 100%; border: 0; object-fit: contain;}
.hud-ref { margin: var(--s1) 0 0;}
/* the 콘토 추천 choice is one compact row above the grid (the videos start in the first screen) */
.rp-auto-tile { grid-column: 1 / -1;}
.rp-auto .rp-frame { aspect-ratio: auto; min-height: calc(var(--s7) * 1.33); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s1) var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); text-align: left;}
.rp-auto .rp-cap { display: none;}
.rp-auto[aria-checked="true"] .rp-frame::after { left: auto; right: var(--s3); top: 50%; transform: translateY(-50%);}
.rp-cap { padding: 0 var(--hair2);}
.rp-auto .rp-frame { padding-right: calc(var(--s7) * 1.58);} .rp-big { background: var(--scrim); font-size: var(--fs-caption);}
/* owner T148: 어떤 방향으로 찌를까요 = three pick groups from the stored read (strength / product → its strength / offer) */
.dir-group { border: 0; margin: 0 0 var(--s5); padding: 0; min-width: 0;}
.dir-group legend { padding: 0; margin-bottom: var(--s2); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.dir-opts { display: grid; gap: var(--s2);}
.dir-chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--s7) * 3.12)), 1fr));}
@media (min-width: 900px) { .dir-opts:not(.dir-chips) { grid-template-columns: repeat(2, minmax(0, 1fr));} }
.dir-opt { display: grid; gap: var(--hair2); align-content: start; min-height: var(--s7); padding: var(--s3) var(--s3); border: var(--hair) solid var(--line); border-radius: var(--r-m); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0;}
.dir-opt b { font-size: var(--fs-body); word-break: keep-all; overflow-wrap: anywhere;}
.dir-opt span { font-size: var(--fs-caption); color: var(--n5); word-break: keep-all; overflow-wrap: anywhere;}
.dir-opt.sold-out { opacity: .55;}   /* owner T365: a sold-out product stays listed, greyed, with its price and 품절 */
.dir-opt.sold-out.picked { opacity: .8;}
.dir-opt img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r1); margin-bottom: var(--s1);}
.dir-opt.picked { border-color: transparent; box-shadow: 0 0 0 var(--hair2) var(--accent); background: var(--accent-soft);}
.dir-sub { margin: var(--s3) 0 var(--s2); font: var(--t-caption-strong); color: var(--n5);}
.field.flash { animation: field-flash 1.2s ease-out;}
@keyframes field-flash { 0%, 40% { box-shadow: 0 0 0 var(--s1) var(--accent);} 100% { box-shadow: none;} }
.mc-now { display: inline-block; margin-left: var(--s1); padding: var(--hair) var(--s2); border-radius: var(--pill); background: var(--accent-soft); font: var(--t-caption-strong); vertical-align: middle;}
.mc-flash { animation: mc-flash .5s ease-out;} @keyframes mc-flash { 30% { transform: scale(.97);} }
.mo-why { margin: 0 0 var(--s3);}
/* A9g w52 (P2): a long explanation never makes a 200-px option on a phone — 2 lines. UX-14 F11 (에듀윌 390): the direction itself
   (b, chips aside) always reads whole; the picked option and 설명 펼쳐 읽기 (.dir-open) show the whole explanation, in a darker ink than --text-2
   (Liquid Glass label-2 is 60 % grey: 3.6:1 at 13 px); on a phone the bar's summary is one line, so the bar takes less of the list */
.dir-chips .dir-opt b, .dir-opt:not(.picked) span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.dir-group.dir-open .dir-opt span { display: block; overflow: visible;}
.dir-opt span { color: color-mix(in srgb, var(--n9) 80%, transparent);}
.dir-group legend:has(.dir-expand) { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%;}
.dir-expand { min-height: var(--s7); margin-block: calc(-1 * var(--s2)); color: var(--n9); font: var(--t-caption-strong);}
@media (max-width: 599px) { #bar [data-testid=dir-summary] { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} }
/* UX-12 r2 #8 + 정보성 card (P1): a phone persona card = tier 1 · name · the pain · reviews · one profile line; the rest on 자세히 보기 */
.persona-more { display: none;}
@media (max-width: 599px) {
  .persona-item .persona-more { display: inline-flex; min-height: var(--s7);}
  .persona-item:not(.open) .t2 :is(.t2-spend, .t2-row) { display: none;}
}
/* r2 #36: 소재 목록's filters fold into one row on a phone */
.p2-ffold__sum { min-height: var(--s7); display: flex; align-items: center; gap: var(--s1); cursor: pointer; font-size: var(--fs-caption); color: var(--n5);}
@media (min-width: 600px) { .p2-ffold__sum { display: none;} }

/* A9g w56 (P2): 정보성 on 인스타그램 = 캐러셀 only — 이미지 / 영상 locked, the reason under the chips (flashes on a tap) */
.form-chip[aria-disabled="true"] { opacity: .42;}
.form-note { margin: var(--s1) 0 0; padding: var(--s1) var(--s2); font-size: var(--fs-caption); line-height: 1.45; color: var(--n5); border-radius: var(--r1);}
.form-note.flash { animation: form-note-flash 1.1s ease-out;}
@keyframes form-note-flash { 0%, 35% { background: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--n9);} 100% { background: transparent;} }
@media (min-width: 1024px) { body.lg-app .fx-goal .ch-pick > .form-note { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 0 var(--s3) var(--s3) var(--s7);} }
/* owner T152: a 스레드 order's 말투 references = text tiles (name + one example line); one column on phones, two from 760 px */
.rp--tone .rp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s2);}
@media (min-width: 760px) { .rp--tone .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr));} }
.rp-tone { aspect-ratio: auto; min-height: calc(var(--s7) * 1.92); display: grid; align-content: start; gap: var(--s1); padding: var(--s3) calc(var(--s7) * 1.58) var(--s3) var(--s4); background: var(--surface, var(--n0)); border: var(--hair) solid var(--line, color-mix(in srgb, var(--n9) 8%, transparent));}
.rp-tone b { font-size: var(--fs-body); line-height: 1.35;}
.rp-tone small { color: var(--n5); font-size: var(--fs-caption); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.rp-pick[aria-checked="true"] .rp-tone { border-color: transparent;}
.rp-pick[aria-checked="true"] .rp-tone::after { left: auto; right: var(--s3); top: auto; bottom: var(--s3);}
.rp-tone-tile .rp-big { top: var(--s1); right: var(--s1); background: var(--n2); color: var(--n9);}
.rp-tonebig p { margin: 0 0 var(--s3); line-height: 1.55;}
.rp-tone-ex { margin: 0 0 var(--s3); padding: var(--s3) var(--s3); border-left: var(--hair2) solid var(--accent); background: var(--n2); border-radius: 0 var(--r-m) var(--r-m) 0; line-height: 1.6; white-space: normal;}
.rp-tone-d { font-size: var(--fs-caption); line-height: 1.4; color: var(--n9); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
/* root 19:20 (T152 mixed order): the 스레드 글 말투 row under the picture pane — chips, the picked voice's line under them */
.tone-row { margin-top: var(--s6);}
.tone-row .dir-opt b { font-size: var(--fs-caption);}
.tone-ex { margin: var(--s2) 0 0; overflow-wrap: anywhere;}

/* owner T162: a read that found no brand strength — the owner's own lines on 손님 (app.js strengthsHoldHTML) */
.strengths-hold { display: grid; gap: var(--s2); margin: var(--s3) 0 0; padding: var(--s3) var(--s4); border: var(--hair2) solid var(--n9); border-radius: var(--r-m); background: var(--surface);}
.strengths-hold h3 { margin: 0; font-size: var(--fs-body); line-height: 1.45;}
.strengths-hold textarea { width: 100%; min-height: calc(var(--s7) * 2.03); padding: var(--s2) var(--s3); border: var(--hair) solid var(--line-strong); border-radius: var(--r-s); background: var(--bg); color: var(--n9); font: inherit; resize: vertical;}
.strengths-hold .ds-btn { justify-self: start; min-height: var(--s7);}
.strengths-hold #ownStrengthsNote:empty { display: none;}
.choice.persona[aria-disabled="true"] { opacity: .55;}

/* OWNER T178 (owner Q71 GO): the member home without the link box — js/memberhome.js draws it into #brandHome (mock: web/ux/t178);
   the 브랜드 tab's '링크와 자료' group (.t178-brand). Liquid Glass tokens; content stays opaque (LG rule 1). */
.brand-home.mh-on, body.lg-app .brand-home.mh-on { padding: 0; border: 0; background: none; box-shadow: none; max-width: calc(var(--s7) * 13.33);}
.t178 { display: grid; gap: var(--s5); margin-top: var(--s5); max-width: calc(var(--s7) * 13.33);}
.t178-sec { display: grid; gap: var(--s2);}
.t178-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);}
.t178-head h2 { margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n9);}
.t178-sub, .t178-note { margin: 0; font: var(--t-body); color: var(--n5);}
.t178-more { font: var(--t-body); color: var(--accent); text-decoration: none;}

.t178-make { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2);}
.ds-card.is-tile { display: grid; justify-items: start; gap: var(--s1); min-height: calc(var(--s7) * 2.33); padding: var(--s3); text-align: left; cursor: pointer;}
.ds-card.is-tile b { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); margin-top: var(--s1);}
.ds-card.is-tile span:last-child { font: var(--t-body); color: var(--n5);}
.t178-ic { display: grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: var(--r2); background: var(--accent-soft);}
.t178-ic svg, .t178-thumb-wait svg { width: var(--s5); height: var(--s5); fill: none; stroke: var(--n9); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}

.t178-recent { list-style: none; margin: 0; padding: 0; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
.t178-recent li { display: grid; grid-template-columns: var(--s7) minmax(0, 1fr); gap: var(--s1) var(--s3); align-items: center; padding: var(--s3) var(--s3);}
.t178-recent li + li { border-top: var(--hair) solid var(--n3);}
.t178-recent img, .t178-thumb-wait { width: var(--s7); height: var(--s7); border-radius: var(--r1); object-fit: cover; background: var(--n2); display: grid; place-items: center;}
.t178-body { display: grid; gap: var(--s1); min-width: 0;}
.t178-body b { font: var(--t-body); color: var(--n9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.t178-tag { font: var(--t-body); color: var(--n5);}
.t178-tag i { font-style: normal; font-family: var(--font-mono);}
.t178 .t178-state { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: var(--t-body);}
.t178-state.is-ready { color: var(--ok);}
.t178-state.is-done { color: var(--n5);}
.t178-state.is-failed { color: var(--danger);}   /* owner T575 #1: a piece that ended with nothing to take says why */
.t178-state.is-making { color: var(--accent);}
.t178-bar { display: block; height: var(--s1); border-radius: var(--r1); background: var(--n2); overflow: hidden;}
.t178-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--accent);}
.t178-acts { grid-column: 2; display: flex; gap: var(--s2); margin-top: var(--s1);}
.ds-btn.is-s.is-act { min-height: var(--s6); padding: 0 var(--s3); cursor: pointer;}

.ds-btn.is-s.is-act.wide { justify-self: start; margin-top: var(--s1);}

.t178-info { display: grid; gap: var(--s1); padding: var(--s4); border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
.t178-info b { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n9);}
.t178-info p { margin: 0; font: var(--t-body); color: var(--n5);}
.t178-chip { justify-self: start; padding: var(--s1) var(--s2); border-radius: var(--pill); background: var(--accent-soft); font: var(--t-body); color: var(--n9);}
.t178-refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2);}
.t178-refs figure { display: grid; gap: var(--s2); margin: 0; padding: var(--s2); border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2); align-content: start;}
.t178-refs img { width: 100%; aspect-ratio: 9 / 12; object-fit: cover; border-radius: var(--r2); background: var(--n2);}
.t178-refs figcaption { display: grid; gap: var(--hair2);}
.t178-refs figcaption b { font: var(--t-body); color: var(--n9);}
.t178-refs figcaption span { font: var(--t-body); color: var(--n5);}
.t178-refs .ds-btn.is-s.is-act { min-height: var(--s6); padding: 0 var(--s2);}
.t178-moved { margin: 0; font: var(--t-body); color: var(--n5);}
.t178-moved a { color: var(--accent); text-decoration: none; font-weight: var(--fw-bold);}

@media (min-width: 900px) {
  .t178-make { grid-template-columns: repeat(4, minmax(0, 1fr));}
  .ds-card.is-tile { min-height: calc(var(--s7) * 2.75);}
  .t178-recent li { grid-template-columns: calc(var(--s7) * 1.33) minmax(0, 1fr) auto;}
  .t178-recent img, .t178-thumb-wait { width: calc(var(--s7) * 1.33); height: calc(var(--s7) * 1.33);}
  .t178-acts { grid-column: 3; margin-top: 0;}
}

/* the 브랜드 tab's new group (mock): the link actions that left home */
.t178-brand { display: grid; gap: var(--s2); margin: var(--s4) 0 var(--s2); max-width: calc(var(--s7) * 13.33);}
.t178-brand h3 { margin: 0 var(--s1); font: var(--t-body); color: var(--n5);}
.t178-brand ul { list-style: none; margin: 0; padding: 0; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
.t178-brand li { display: grid; gap: var(--hair2);}
.t178-brand li > a, .t178-brand li > button { display: grid; gap: var(--hair2); width: 100%; min-height: var(--s7); padding: var(--s3) var(--s4); border: 0; background: none; text-align: left;
  font: inherit; color: inherit; text-decoration: none; cursor: pointer; border-radius: var(--r3);}
.t178-brand li + li { border-top: var(--hair) solid var(--n3);}
.t178-brand li b { font: var(--t-body); color: var(--n9);}
.t178-brand li span { font: var(--t-body); color: var(--n5);}

/* OWNER T189 (2): the 고객 유형 step — 콘토 추천 first (picked, one tap 이대로 in the bar), the others under 세부 고객 유형 고르기 */
.persona-rec { display: grid; gap: var(--s2); margin-top: var(--s2);}
.persona-rec .rec-line { margin: 0; display: flex; align-items: center; gap: var(--s2); color: var(--n5); font-size: var(--fs-body);}
.persona-others { margin-top: var(--s4);}
.persona-others > summary { cursor: pointer; min-height: var(--s7); display: flex; align-items: center; font-weight: var(--fw-bold); color: var(--accent); list-style: none;}
.persona-others > summary::-webkit-details-marker { display: none;}
.persona-others > summary::after { content: '›'; margin-left: var(--s1); transition: transform .2s;}
.persona-others[open] > summary::after { transform: rotate(90deg);}
.persona-others > .choices { margin-top: var(--s2);}

/* OWNER T191 (owner Q74 GO) — home visual renewal (guest + member, 390 / 1280). A layer over the real home (T178 content kept):
   ONE primary action per screen (member: 바로 만들기 · guest: the link box), a 4-step type scale used everywhere, an 8-px spacing system,
   the right column demoted to quiet secondary cards, the feed's grey note gone, consistent weights. Kept as one block: web/ux/t191/home.css is its source. */
:root {
  --t191-title: var(--t-display);      /* 1 · page title */
  --t191-section: var(--t-title);    /* 2 · section heading, card title */       /* 3 · body */       /* 4 · meta, hints */}
@media (min-width: 900px) { :root { --t191-title: var(--t-display); --t191-section: var(--t-title);} }

/* 1 · type: one family of four sizes, two weights (700 title, 600 headings), no other bold sizes */
body.lg-app #s-link h1#h-link { font: var(--t-display); letter-spacing: var(--track-tight); margin: 0 0 var(--s5);}
body.lg-app #s-link .t178-head h2, body.lg-app #s-link .p2-sec__h, body.lg-app #s-link .feed-h { font: var(--t-title); margin: 0;}
body.lg-app #s-link .ds-card.is-tile b, body.lg-app #s-link .t178-body b, body.lg-app #s-link .t178-info b, body.lg-app #s-link .ds-row__title,
body.lg-app #s-link .feed-who, body.lg-app #memberHome .ds-row__title { font: var(--t-body-strong);}
body.lg-app #s-link .t178-sub, body.lg-app #s-link .ds-card.is-tile span:last-child, body.lg-app #s-link .t178-tag, body.lg-app #s-link .t178-state,
body.lg-app #s-link .t178-info p, body.lg-app #s-link .t178-note, body.lg-app #s-link .t178-moved, body.lg-app #s-link .ds-row__sub,
body.lg-app #s-link .feed-nums, body.lg-app #s-link .feed-ago, body.lg-app #s-link .feed-day, body.lg-app #memberHome .ds-row__sub { font: var(--t-caption);}

/* 2 · spacing: 8-px steps, real room between sections and cards */
body.lg-app #s-link .t178 { gap: var(--s7); margin-top: var(--s2);}
body.lg-app #s-link .t178-sec { gap: var(--s4);}
body.lg-app #s-link .t178-make, body.lg-app #s-link .t178-refs { gap: var(--s4);}
body.lg-app #s-link .ds-card.is-tile { padding: var(--s5) var(--s4); min-height: calc(var(--s7) * 2.67); gap: var(--s2);}
body.lg-app #s-link .t178-recent li { padding: var(--s4); gap: var(--s2) var(--s4);}
body.lg-app #s-link .t178-info { padding: var(--s5); gap: var(--s2);}
body.lg-app #memberHome .p2-sec { margin-top: var(--s7);}
body.lg-app #memberHome .ds-row { padding: var(--s3) var(--s4); gap: var(--s4); min-height: var(--s7);}
body.lg-app #memberHome .ds-row__text { display: grid; gap: var(--hair2);}   /* 메타 광고 / 바로 올릴 수 있어요 never touch */

/* 3 · one primary action — member: 바로 만들기 (the tiles carry the tint); every other yellow button turns quiet */

body.lg-app #s-link .t178-ic { background: var(--n0);}

/* guest: the link box is the one primary; 다 맡기기 and the example link stay quiet */
body.lg-app #s-link:not(.brand-mode) #autoGo { background: var(--n2); color: var(--n9); box-shadow: none;}

/* 4 · the right column demoted: quiet flat cards, smaller headings, no grey note under the feed */
@media (min-width: 900px) {
  body.lg-app #feed, body.lg-app #memberHome .p2-home__side { opacity: 1;}
  body.lg-app #feed .feed-h, body.lg-app #memberHome .p2-home__side .p2-sec__h { font: var(--t-body-strong); color: var(--n5);}
}
body.lg-app #feed > p.meta { display: none;}                         /* the circled grey line */
body.lg-app #feed .feed-row { padding: var(--s3) 0; gap: var(--s2);}
body.lg-app #memberHome .p2-points, body.lg-app #memberHome [data-testid=home-channels] {
  box-shadow: none; background: transparent; border: var(--hair) solid var(--n3); border-radius: var(--r2);}
body.lg-app #memberHome .p2-points { padding: var(--s4); margin-top: var(--s5);}

/* 오늘의 추천's Shorts references: secondary — at 1280 a compact row (thumbnail + words), never a poster-size card */
@media (min-width: 900px) {
  body.lg-app #s-link .t178-refs figure { grid-template-columns: calc(var(--s7) * 1.83) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; column-gap: var(--s4); padding: var(--s4);}
  body.lg-app #s-link .t178-refs img { grid-row: 1 / span 2; width: calc(var(--s7) * 1.83); aspect-ratio: 9 / 14;}
  body.lg-app #s-link .t178-refs .ds-btn.is-s.is-act { justify-self: start;}
}
body.lg-app #s-link .t178-refs img { max-height: calc(var(--s7) * 5);}

/* T135: every home control is a 44 px target on a phone */
body.lg-app #s-link .ds-btn.is-s.is-act { min-height: var(--s7);}
body.lg-app #s-link .t178-more { display: inline-flex; align-items: center; min-height: var(--s7); padding: 0 var(--s1);}

/* OWNER T193: the quick 고객 유형 form (while the real ones are made) — 여성 / 남성 with an age, the server's pick first */
.pq-deep { margin: 0 0 var(--s2); display: inline-flex; align-items: center; gap: var(--s2); font: var(--t-caption); color: var(--n5);}
.pq-dot { width: var(--s2); height: var(--s2); border-radius: 50%; background: var(--ok); animation: pq-pulse 1.6s ease-in-out infinite;}
@keyframes pq-pulse { 50% { opacity: .35;} }
@media (prefers-reduced-motion: reduce) { .pq-dot { animation: none;} }
.pq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s2); max-width: calc(var(--s7) * 13.33);}
.pq-cards .choice.quick { display: grid; gap: var(--s3); padding: var(--s4); text-align: left; cursor: pointer; border: var(--hair2) solid transparent;}
.pq-cards .choice.quick.picked { border-color: var(--accent);}
.pq-cards .choice.quick input { position: absolute; opacity: 0; pointer-events: none;}
.pq-top { display: flex; align-items: center; gap: var(--s2);} .pq-top .name { font: var(--t-title);}
.pq-age { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-caption); color: var(--n5);}
.pq-age select { min-height: var(--s7); padding: 0 var(--s2); border-radius: var(--r1); border: var(--hair) solid var(--n3); font: var(--t-body-strong); background: var(--n1);}
/* OWNER T194 / Q76: the fast read's chips on the quick 고객 유형 screen (read-only) */
.pq-fast { display: grid; gap: var(--s2); margin: var(--s2) 0 0; padding: var(--s4); border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2); max-width: calc(var(--s7) * 13.33);}
.pq-fast h3 { margin: 0 0 var(--s1); font: var(--t-body-strong); color: var(--n5);}
.pq-row { display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); gap: var(--s2); align-items: start;}
.pq-k { font: var(--t-caption-strong); color: var(--n5);}
.pq-chips { display: flex; flex-wrap: wrap; gap: var(--s2);}
.pq-chip { display: inline-flex; align-items: center; min-height: var(--s6); padding: 0 var(--s3); border-radius: var(--pill); background: var(--accent-soft); font: var(--t-body-strong); color: var(--n9);}
/* OWNER T198: the 형식 picker — three example cards (1:1 FIIRN examples, T199), the picked one outlined; on phones each card is a row */
.fmt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s2); max-width: calc(var(--s7) * 20);}
.fmt-card { position: relative; display: grid; gap: var(--s2); align-content: start; padding: var(--s3); border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2); border: var(--hair2) solid transparent; cursor: pointer;}
.fmt-card.on { border-color: var(--accent);}
.fmt-card:focus-within { outline: var(--hair2) solid var(--accent); outline-offset: var(--hair2);}
.fmt-card input { position: absolute; opacity: 0; pointer-events: none;}
.fmt-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r2); background: var(--n2);}
.fmt-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);}
.fmt-top b { font: var(--t-title); color: var(--n9);}
.fmt-line { font: var(--t-body); color: var(--n5);}
.fmt-ex { margin-top: var(--s4); max-width: calc(var(--s7) * 20);}
@media (max-width: 720px) {
  .fmt-cards { grid-template-columns: 1fr; gap: var(--s3);}
  .fmt-card { grid-template-columns: calc(var(--s7) * 2.17) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s3); row-gap: var(--s1);}
  .fmt-card img { grid-row: 1 / span 2;}
}
.pid-fmt { font: var(--t-caption-strong); color: var(--n5);}
/* OWNER T190: the quiz card under a wait (읽는 중, 고객 유형을 만드는 동안, 만드는 중) — quiet, below the progress, 44 px answers */
.quiz-host { margin-top: var(--s5); max-width: calc(var(--s7) * 13.33);}
.quiz-card { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
.quiz-kicker { margin: 0; font: var(--t-caption-strong); color: var(--n5);}
.quiz-q { margin: 0; font: var(--t-title); color: var(--n9); word-break: keep-all; overflow-wrap: anywhere;}
.quiz-opts { display: grid; gap: var(--s2);}
.quiz-opt { display: flex; align-items: center; gap: var(--s2); min-height: var(--s7); padding: var(--s2) var(--s3); border: var(--hair) solid var(--n3); border-radius: var(--r2); background: none;
  font: var(--t-body); color: var(--n9); text-align: left; cursor: pointer;}
.quiz-opt:disabled { cursor: default; opacity: 1;}
.quiz-opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent);}
.quiz-opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);}
.quiz-n { flex: none; display: inline-grid; place-items: center; width: var(--s5); height: var(--s5); border-radius: 50%; background: var(--n2); font: var(--t-caption-strong);}
.quiz-after { display: grid; gap: var(--s1);}
.quiz-after:empty { display: none;}
.quiz-verdict { margin: 0; font: var(--t-body-strong); color: var(--n9);}
.quiz-why { margin: 0; font: var(--t-body); color: var(--n9);}
.quiz-src { margin: 0; font: var(--t-caption); color: var(--n5);}
.quiz-next { justify-self: start; min-height: var(--s7);}
/* root 05:51Z (390-t190-quiz.png: the floating status card covered the 마케팅 팁 chip and 1/18 once the page scrolled to the quiz): on a
   phone the HUD scrolls with the deck when the deck is the main (as on PC) — nothing floats over the tip card */
@media (max-width: 767px) { body.lg-app .stage.deck-main > .hud { position: static;} }
/* OWNER T208: 다른 스타일로 — a quiet checkbox under the 방향 picks (44 px row) */
.vary-row { display: flex; align-items: center; gap: var(--s2); min-height: var(--s7); margin-top: var(--s4); font: var(--t-body); color: var(--n9); cursor: pointer;}
.vary-row input { width: var(--s4); height: var(--s4); margin: 0; accent-color: var(--accent); flex: none;}
/* OWNER T194 w60: tap-to-fix chips on 빠르게 읽은 내용 — on = tinted, off = outlined, + 직접 적기 dashed; 44 px targets */
.pq-fast-lead { margin: calc(-1 * var(--s1)) 0 var(--s1);}
.pq-chip.t, .pq-chip.add { min-height: var(--s7); border: var(--hair) solid transparent; cursor: pointer;}
.pq-chip.t[aria-pressed="false"] { background: none; border-color: var(--n3); color: var(--n5); text-decoration: line-through;}
.pq-chip.add { background: none; border: var(--hair) dashed var(--n3); color: var(--accent);}
.pq-in { display: block;}
.pq-in input { width: 100%; min-height: var(--s7); padding: 0 var(--s3); border: var(--hair) solid var(--n3); border-radius: var(--r2); background: var(--n1); font: var(--t-body); color: var(--n9);}
/* A9g T188 #3 (Q88 ①): 느낌 names the 방향 taken as it is, with 바꾸기 — one quiet line on top */
.feel-dir { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s1) var(--s2); margin: 0 0 var(--s2); padding: var(--s1) var(--s1) var(--s1) var(--s3); border-radius: var(--r2); background: var(--n2);
  font: var(--t-caption); color: var(--n5);}
.feel-dir__k { font-weight: var(--fw-bold); color: var(--n9);}
.feel-dir__v { min-width: 0; color: var(--n9);}
.feel-dir__btn { min-height: var(--s7); padding: 0 var(--s2); font: var(--t-caption-strong); color: var(--accent);}
/* A9g T188 #1 (Q88 ①): each channel says its 목적; one note line under the four cards */
.mr-purpose { display: inline-flex; align-items: center; margin-left: var(--s1); padding: var(--hair) var(--s2); border-radius: var(--pill); background: var(--n2); font: var(--t-caption-strong); color: var(--n5); vertical-align: var(--hair2);}
.mr-purpose[data-p="ad"] { background: var(--accent-soft); color: var(--n9);}
.goal-purpose-note { margin: 0; font: var(--t-caption); color: var(--n5);}
.goal-purpose-note.flash { animation: note-flash .9s ease-out 1;}
@keyframes note-flash { 0% { color: var(--n9);} 100% { color: var(--n5);} }
.fx-goal:has(.goal-purpose-note) { gap: var(--s2);}   /* T188 #1: four cards + the note on one fixed screen */
@media (min-width: 900px) and (max-height: 860px) { .fx-goal:has(.goal-purpose-note) { gap: var(--s1);} .fx-goal .ch-forms > .ch-pick { gap: var(--hair2);}
  .fx-goal:has(.goal-purpose-note) .work-head .lead { display: none;} }   /* the reading strip under it says the same */   /* T188 #1: four cards with their state lines fit 800 px */
/* OWNER T258: the quiz as a card of the wait deck (the deck draws the card; the quiz keeps its answers' look) */
.ic-card .quiz-card.in-deck { padding: 0; background: none; box-shadow: none; gap: var(--s2);}
.info-carousel.compact .ic-card .quiz-q { font-size: var(--fs-body); line-height: normal;}

/* OWNER T263: 바로 만들기 = 메타 광고 · 인스타 게시물 · 스레드 (three tiles in a row) and the picks under them — 메타 광고: 이미지 / 캐러셀 /
   영상 (one tap makes); 인스타 게시물: 정보성 | 브랜드 × 이미지 | 캐러셀 | 영상 on one panel + 이대로 만들기. Liquid Glass tokens, 44 px targets. */
.t178-make.t263-make { grid-template-columns: repeat(3, minmax(0, 1fr));}

.t263-pick { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
.t263-pick[hidden] { display: none;}
.t263-q { margin: 0; font: var(--t-body); color: var(--n9);}
.t263-forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);}
.t263-form { display: grid; gap: var(--hair2); justify-items: start; min-height: var(--s7); padding: var(--s2) var(--s3); border: 0; border-radius: var(--r2); text-align: left; cursor: pointer;
  background: var(--n2); color: var(--n9); font: inherit;}
.t263-form b { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.t263-form span { font: var(--t-body); color: var(--n5);}
.t263-seg.ds-seg.wide button { height: var(--s7); min-height: var(--s7);}
.t263-line { margin: 0; font: var(--t-body); color: var(--n5);}
.t263-pick .ds-btn.is-s.is-act.wide { min-height: var(--s7);}
@media (max-width: 430px) {
  .t178-make.t263-make { gap: var(--s2);}
  .t263-make .ds-card.is-tile { min-height: calc(var(--s7) * 2.17); padding: var(--s3) var(--s2);}
  .t263-make .ds-card.is-tile b { font-size: var(--fs-body);}
  .t263-forms { grid-template-columns: 1fr;}
  .t263-form { grid-template-columns: auto 1fr; align-items: baseline; align-content: center; gap: var(--s2); min-height: var(--s7);}
}

/* OWNER T260: a 최근 만든 소재 tap answers in the first frame — the pressed button (spinner) and the result's skeleton over the page while
   the piece loads (app.js openSkel); reduced motion keeps the shapes still */
.ds-btn.is-s.is-act.is-busy { position: relative; pointer-events: none;}
.ds-btn.is-s.is-act.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--s4); height: var(--s4); border-radius: 50%;
  border: var(--hair2) solid var(--n5); border-top-color: var(--n9); animation: spin .7s linear infinite;}
.ds-btn.is-s.is-act.primary.is-busy::after { border-color: color-mix(in srgb, var(--n0) 45%, transparent); border-top-color: var(--accent-ink);}
.open-skel { position: fixed; z-index: calc(10 - 1); inset: var(--top-h) 0 0 0; display: grid; align-content: start; gap: var(--s3);
  padding: var(--s5) var(--gutter); background: var(--bg);}
.open-skel[hidden] { display: none;}
body.has-nav .open-skel { bottom: calc(var(--s7) * 1.33);}
@media (min-width: 1024px) { body.has-nav .open-skel { left: var(--rail-w); bottom: 0;} }
.open-skel__t { margin: 0; font: var(--t-body); color: var(--n5);}
.open-skel__img { display: block; width: min(100%, calc(var(--s7) * 10.83)); aspect-ratio: 1; border-radius: var(--r3);}
.open-skel__line { display: block; width: min(80%, calc(var(--s7) * 8.75)); height: var(--s4); border-radius: var(--r1);}
.open-skel__line.short { width: min(50%, calc(var(--s7) * 5.42));}
@media (prefers-reduced-motion: reduce) { .ds-btn.is-s.is-act.is-busy::after { animation: none;} }
@keyframes spin { to { transform: rotate(360deg);} }

/* OWNER T261a (root 11:24Z): the CONTTO wordmark on every screen, first in the top bar, same size everywhere (tap → home). Phones: the
   brand switcher keeps its avatar + chevron (the name stays for screen readers) and the plan badge may shorten, so the bar never wraps. */
.top .mark#home { flex: none; font-size: var(--fs-title);}
@media (max-width: 479px) {
  .top { gap: var(--s2);}
  .top .switcher .nm { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
  .top .badge-slot { min-width: 0; flex: 0 1 auto; overflow: hidden;}
  .top .badge-slot > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
}

/* OWNER T259: the persona card folded = 성별·나이대 · name · 2–3 trait chips (+ the review count); the worry chip, the job / family /
   income line and the long 'who' text open with 자세히 보기 (UX-14: no paragraphs before it) */
.persona-item.t259:not(.open) .choice.persona :is(.t2, .who, .chips:not(.traits)) { display: none;}
.choice.persona .chips.traits { display: flex; flex-wrap: wrap; gap: var(--s1);}
.choice.persona .chips.traits .ds-chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%;}
.persona-item.t259, .persona-item.t259 > .choice.persona { min-width: 0; max-width: 100%;}
.persona-item.t259 .persona-more { display: inline-flex; min-height: var(--s7);}   /* T259: the PC folds the same way (one card height per persona) */
/* UX-14 P1: the persona's three directions lead; the other strengths fold under 다른 강점 N개 */
.dir-more > summary { min-height: var(--s7); display: flex; align-items: center; cursor: pointer; font-size: var(--fs-caption); color: var(--n5);}
.dir-more[open] > summary { margin-bottom: var(--s2);}
/* OWNER T261a: the plan badge's short words on a phone (the logo leads the bar) */
.bl-badge .bl-short { display: none;}
@media (max-width: 479px) { .top .bl-badge .bl-long { display: none;} .top .bl-badge .bl-short { display: inline;} }

/* OWNER T266 (+ UX-14 P1): the 영상 참고 filters — 업종 (the brand's own first) and 길이 chips over the tiles, 44 px targets; the
   industry-fit tiles say 업종 맞춤 */
.rp-filters { grid-column: 1 / -1; display: grid; gap: var(--s2); margin: var(--hair2) 0 var(--s1);}
.rp-frow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1);}
.rp-fk { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5); margin-right: var(--hair2); min-width: var(--s6);}
.rp-f { min-height: var(--s7); padding: 0 var(--s3); border: var(--hair) solid var(--line-strong); border-radius: var(--pill); background: var(--bg); color: var(--n9); font: var(--t-caption-strong); cursor: pointer;}
.rp-f[aria-pressed="true"] { background: var(--n9); color: var(--bg); border-color: var(--n9);}
.rp-f .meta { color: inherit; opacity: .7; font-weight: var(--fw-regular);}
.rp-tile[hidden] { display: none;}
.rp-frame { position: relative;}
.rp-fit { position: absolute; left: var(--s2); top: var(--s2); padding: var(--hair2) var(--s2); border-radius: var(--pill); background: color-mix(in srgb, var(--n9) 62%, transparent); color: var(--n0); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
/* OWNER T261a follow-up: with the logo first, a phone's task bar (CONTTO · 뒤로 · n/N · 로그인) must still fit — the step's name and the
   뒤로 / 닫기 word give way (the n/N count, the progress line and the button's own label stay) */
@media (max-width: 479px) {
  body.lg-app.fx .steps::before { display: none;}
  body.lg-app .top .back-btn > span { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
}
@media (min-width: 1024px) { body.has-nav.fx > header.top { margin-left: 0;} }   /* OWNER T261a: an fx task screen hides the rail — its bar starts at the edge, the logo where the rail's stands */

/* A9g w60 preview P1 (390: the quick 고객 유형 form was 428 px wide): the fast-read card stays in the column — its 혜택 / 강점 fields are
   border-box (width 100% + padding overflowed), a long chip wraps inside it, nothing in its grid keeps a min-content width */
.pq-fast { min-width: 0; max-width: min(calc(var(--s7) * 13.33), 100%); box-sizing: border-box;}
.pq-row > *, .pq-chips { min-width: 0;}
.pq-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; box-sizing: border-box;}
.pq-in input { box-sizing: border-box; max-width: 100%;}
/* review #3 F31: the 정보성 topic's source under it on the home */
.t178-src { margin: 0; font: var(--t-body); color: var(--n5);}
/* review #3 F13 / F09: a discount's 이용 조건 under its chip; the read card's counts say 정리 중 while counting */
.offer-chip .oc-cond { display: block; margin-top: var(--hair2); font: var(--t-caption); color: var(--n5); white-space: normal;}
.brandcard .facts b.counting { font-size: var(--fs-caption); color: var(--n5);}

/* owner T288: the video style step (plain chips; DS tokens under body.t277) — a gated chip reads its reason, the picked one shows its strip */
.vs-chips { grid-template-columns: repeat(auto-fill, minmax(calc(var(--s7) * 2.5), 1fr));}
.vs-chip.is-off { opacity: 1; color: var(--n5); background: transparent; border-style: dashed; cursor: default;}
.vs-chip.is-off b { color: var(--n5);}
.vs-detail { margin-top: var(--s4); padding: var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-m); background: var(--surface);}
.vs-detail p { margin: var(--s1) 0 0; color: var(--n5); font-size: var(--fs-caption);}
.vs-detail img { display: block; width: 100%; height: auto; margin-top: var(--s3); border-radius: var(--r1);}
body.t277 .vs-detail { border: 0; border-radius: var(--r1); background: var(--n2); box-shadow: var(--e1);}
/* OWNER T337: 콘토 추천으로 만들기 | 수동으로 설정하기 above the formats (the T263 segment look, 44 px, two equal halves) */
.t337 { display: grid; gap: var(--s1);}
.t337-mode.ds-seg.wide { display: grid; grid-template-columns: 1fr 1fr; width: 100%;}
.t337-mode.ds-seg.wide button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--s2);}
/* OWNER T338: a video's wait shows its own scene pictures as they land — a keyframe strip (9:16 thumbs, the empty slots of a known total) */
.mo-shots { display: grid; gap: var(--s1); margin: var(--s2) 0 var(--s1);}
.mo-shots-h { margin: 0; font: var(--t-body); color: var(--n9);}
.mo-shots-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s1);}
.mo-shots-row li { aspect-ratio: 9 / 16; border-radius: var(--r1); overflow: hidden; background: var(--n2);}
.mo-shots-row li img { width: 100%; height: 100%; object-fit: cover; display: block;}
.mo-shots-row li.todo { background: var(--n2);}
/* OWNER T341: a video-only order's done page is its 9:16 film — the picture frame stays out (the motion tile takes its place) */
#s-done .shot[data-vonly] { display: none;}
#s-done .shot-col > #motionTile { margin-bottom: var(--s3);}

/* OWNER T526 / T527: under 콘토 추천 the 소재 목록 shows at once; the order runs underneath, hidden (its bar, step counter and back too) */
body.bg-order .step.on:not(#s-library) { display: none;}
body.bg-order #s-library { display: block;}
body.bg-order #bar, body.bg-order #steps, body.bg-order #backBtn, body.bg-order #stepName { display: none !important;}
/* OWNER T528: 홈으로 가기 on the 수동 choice steps */
.home-ok { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s2) var(--s4) 0; padding: var(--s2) var(--s3); border-radius: var(--r2); background: var(--n2);}
.home-ok[hidden] { display: none;}
.home-ok__line { margin: 0; font-size: var(--fs-caption); color: var(--n5);}
body.bg-order .home-ok { display: none;}
/* OWNER T529: the compact persona list — name + one line; the details stay behind 자세히 보기 */
.work-persona.p-compact .persona-rec .rec-line { margin: 0 0 var(--s1); font-size: var(--fs-caption);}
.work-persona.p-compact .choices { gap: var(--s1);}
.work-persona.p-compact .choice.persona { padding: var(--s2) var(--s3); min-height: 0;}
.work-persona.p-compact .choice.persona .chips, .work-persona.p-compact .choice.persona .t2-line, .work-persona.p-compact .choice.persona .t2,
.work-persona.p-compact .choice.persona .who, .work-persona.p-compact .choice.persona .count-bar, .work-persona.p-compact .choice.persona .say { display: none;}
.work-persona.p-compact .persona-item.open .choice.persona .chips, .work-persona.p-compact .persona-item.open .choice.persona .who,
.work-persona.p-compact .persona-item.open .choice.persona .t2-line, .work-persona.p-compact .persona-item.open .choice.persona .t2 { display: flex;}
.work-persona.p-compact .choice.persona .name { font-size: var(--fs-body);}
.work-persona.p-compact .choice.persona .p-line { display: block; font-size: var(--fs-caption); color: var(--n5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.work-persona.p-compact .choice.persona .t1 { font-size: var(--fs-caption);}
.work-persona.p-compact .persona-list { margin-top: var(--s1);}
.work-persona.p-compact .brandcard { margin-top: var(--s4);}
/* OWNER T529 (fit): one screen at 390 x 844 with the bottom bar — rows ~52 px, the buttons on the row, the age beside the name */
.work-persona.p-compact .work-head .lead { font-size: var(--fs-caption); margin: var(--s1) 0 0;}
.work-persona.p-compact .work-head h2 { margin-bottom: 0;}
.work-persona.p-compact .persona-rec .rec-line { display: none;}
.work-persona.p-compact .persona-item { position: relative;}
.work-persona.p-compact .choice.persona { padding: var(--s2) calc(var(--s7) * 2) var(--s2) var(--s3); border-radius: var(--r2);}
/* T545 2b: '성별·나이대 알려 주기' at the D2 caption (13 px) is wider than the 96 px the card keeps for its links */
.work-persona.p-compact .persona-item:has(> .persona-edit.is-long) > .choice.persona { padding-right: calc(var(--s7) * 2.75);}
.work-persona.p-compact .choice.persona .t1 { display: inline; margin-right: var(--s1);}
.work-persona.p-compact .choice.persona .name { display: inline;}
.work-persona.p-compact .persona-item > .ds-btn--ghost { position: absolute; right: var(--s2); padding: var(--hair2) var(--s1); margin: 0;}
.work-persona.p-compact .persona-item > .persona-more { top: var(--s1);}
.work-persona.p-compact .persona-item > .persona-edit { bottom: var(--s1);}
.work-persona.p-compact .persona-item.open .choice.persona { padding-bottom: var(--s3);}
body:has(.work-persona.p-compact) .home-ok { padding: var(--s1) var(--s2); margin-top: var(--s1);}
body:has(.work-persona.p-compact) .home-ok__line { font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.work-persona.p-compact p:has(#restAuto) { margin: var(--s1) 0 0;}
.work-persona.p-compact .choice.persona { display: block; text-align: left;}
.work-persona.p-compact .choice.persona .p-line { margin-top: var(--hair2);}
.work-persona.p-compact .work-head .lead { display: none;}
.work-persona.p-compact .work-head { margin-bottom: var(--s2);}
.work-persona.p-compact .persona-rec { margin-top: 0; padding-top: 0;}
.work-persona.p-compact .choice.persona { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s1); row-gap: var(--hair2); min-height: calc(var(--s7) * 1.21);}
.work-persona.p-compact .choice.persona .stamp-slot { display: none;}
.work-persona.p-compact .choice.persona .name { order: 1; flex-basis: 100%; display: block; font-weight: var(--fw-bold);}
.work-persona.p-compact .choice.persona .t1 { order: 2; display: inline; margin: 0; color: var(--n5);}
.work-persona.p-compact .choice.persona .t1::after { content: ' ·';}
.work-persona.p-compact .choice.persona .p-line { order: 3; display: inline; margin: 0; flex: 1; min-width: 0;}
.work-persona.p-compact .choice.persona .p-rec-chip { font-size: var(--fs-caption); padding: var(--hair) var(--s1); vertical-align: var(--hair);}
.work-persona.p-compact .persona-item > .persona-more { top: var(--s2);}
.work-persona.p-compact .persona-item > .persona-edit { top: var(--s6); bottom: auto;}
.work-persona.p-compact .persona-item > .ds-btn--ghost { min-height: 0; height: var(--s5); line-height: normal;}
.work-persona.p-compact .persona-item > .persona-more { top: var(--s1);}
.work-persona.p-compact .persona-item > .persona-edit { top: var(--s6);}
.work-persona.p-compact .choice.persona { min-height: calc(var(--s7) * 1.25);}
/* OWNER T546: 영상은 나레이션 없이 */
.t546-nonarr { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 0; font-size: var(--fs-caption); color: var(--n5);}
.t546-nonarr small { color: var(--n5);}


/* T1137 (root 12:21Z): the home's footer link row — in the HTML always; VISIBLE on the home step when the viewport is tall enough to keep
   T335 (the no-scroll first screen): height >= 760 px (desktop included); below that it keeps the .sr (screen-reader-only) styling */
@media (min-height: 760px) {
  body.at-home .site-links.sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); text-align: center; font: var(--t-caption); color: var(--n5); }
  body.at-home .site-links.sr a { color: inherit; }
}

/* ===================================================================================================================================
   c45 F3 (owner T1625: the home inside Threads' in-app browser — the header crowded at 360 px, the app's bottom bar over the before /
   after card, small tap targets). Phones only; the PC is unchanged.
   1. header at <= 479 px: 무료 1편 · 로그인 · EN as 44 px capsules (were 48 in a 60 px bar) with the EN toggle a full 44 × 44 target.
   2. tap targets >= 44 px on phones: the small buttons (.ds-btn.is-s), the segmented control (로그인 방법) and the header toggle.
   3. html.inapp (js/i18n.js: Threads / Instagram / Facebook / KakaoTalk / NAVER / LINE browsers draw their own ~72 px bar over the
      page bottom): the fixed screens end above it, the scrolling pages / sheets get that much room at the bottom, the tab bars float over it.
   =================================================================================================================================== */
:root { --inapp-bar: 0px;}
html.inapp { --inapp-bar: max(calc(var(--s7) * 1.5), env(safe-area-inset-bottom, 0px));}   /* 72 px, the bar in the owner's Threads screen */
@media (max-width: 479px) {
  html body.lg-app .top { gap: var(--s2);}
  html body.lg-app .top #accountBtn.login-btn { height: var(--tap); min-height: var(--tap); padding: 0 var(--s3);}
  html body.lg-app .top .bl-badge > button { min-height: var(--tap); padding: 0 var(--s3);}
  html body .top #langBtn { min-width: var(--tap); min-height: var(--tap); padding: 0; justify-content: center;}
  /* a member's bar (CONTTO · brand · 무료 1편 4P · account · EN) clipped the badge at 360 px: tighter gaps, a 44 px account button */
  html body.lg-app .top:has(#switcherSlot:not(:empty)) { gap: var(--s1);}
  html body.lg-app .top:has(#switcherSlot:not(:empty)) .bl-badge > button { padding: 0 var(--s2);}
  html body.lg-app .top #accountBtn.ds-btn.ds-btn--ghost.is-icon { width: var(--tap); height: var(--tap);}
}
@media (max-width: 767px) {
  html body .ds-btn.is-s, html body .ds-seg > button:not(#_) { min-height: var(--tap);}   /* :not(#_) — over the account page's 32 px .acct .ds-seg button */
  html body .top #langBtn { min-width: var(--tap); min-height: var(--tap);}
}
html.inapp body.fx, html.inapp body.lg-app.lg-link-fixed { min-height: 0; height: calc(100vh - var(--inapp-bar)); height: calc(100svh - var(--inapp-bar));}
html.inapp body:not(.fx):not(.lg-link-fixed) { padding-bottom: var(--inapp-bar);}
html.inapp body.lg-app .tabbar, html.inapp .tabbar { bottom: calc(var(--inapp-bar) + var(--s2));}
html.inapp .ds-tabbar { bottom: calc(var(--inapp-bar) + var(--s2));}
html.inapp :is(.sheet-body, .ds-sheet__body), html.inapp #sheet[open] .sheet-body { padding-bottom: calc(var(--s5) + var(--inapp-bar));}   /* #sheet: over p3's large-detent padding */
html.inapp .ds-sheet__foot { padding-bottom: calc(var(--s4) + var(--inapp-bar));}
@media (max-width: 767px) { html.inapp body:not(.fx):not(.lg-link-fixed) > .bar { bottom: var(--inapp-bar);} }   /* the result's 한 편 더 · PNG 받기 (a fixed bar there) */
/* 4. the fixed home on a phone (T335 / T349) — the before card never spills (owner T1625 'SNS에 자랑하고싶은' cut under the bar): 다 맡기기 and
   피른 링크로 해 보기 share one row (48 px more for the story); in the short side-by-side story the before card is the wider column and its list
   shows whole lines only (a bullet that does not fit moves out of the card with 외 N개, never half a line); the bullets read at body size */
@media (max-width: 767px) {
  html body.lg-app.lg-link-fixed #s-link .linkform { grid-template-columns: auto minmax(0, 1fr); grid-auto-flow: row dense; column-gap: var(--s2);}
  html body.lg-app.lg-link-fixed #s-link .linkform > * { grid-column: 1 / -1;}
  html body.lg-app.lg-link-fixed #s-link .linkform > .auto-row { grid-column: 1;}
  html body.lg-app.lg-link-fixed #s-link .linkform > p:last-child { grid-column: 2; justify-self: start; align-self: center;}
}
@container (max-height: 360px) {
  html body.lg-app.lg-link-fixed #s-link .home-story { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);}
  html body.lg-app.lg-link-fixed #s-link .home-story .hs-before { grid-template-rows: auto minmax(0, 1fr); overflow: hidden;}
  html body.lg-app.lg-link-fixed #s-link .home-story .hs-before .hs-list { height: 100%; min-height: 0; flex-direction: column; flex-wrap: wrap; align-content: flex-start;
    column-gap: var(--s5); overflow: hidden; font-size: var(--fs-body); line-height: 1.35;}
  html body.lg-app.lg-link-fixed #s-link .home-story .hs-before .hs-list li { width: 100%; flex: none;}
}
@container (max-height: 200px) { html body.lg-app.lg-link-fixed #s-link .home-story .hs-cap { display: none;} }
.home-story .hs-sound { white-space: nowrap;}   /* c45 F3: 소리 켜기 stays one line on a narrow player (it broke into 소리 / 켜기) */