/* T545 2c: p1.css (was static/lg/app/p1.css; generated by web/tools/ds_screens.py from main's sheet — edit the source sheet on main, never this
   file by hand). Every value is a D2 token (ds2/tokens.css). */
/* Liquid Glass package P1 (see docs/LIQUID-GLASS-MIGRATION.md 0.6): screen styles for this package only.
   Loaded after styles.css, lg-tokens.css and lg.css. Owner lane: A14b (built by A2b, root 10-16 11:07).

   How P1 is built: the app's DOM, ids, data-testids and class names stay (MIGRATION §0.4: restyle, don't rename). The body
   carries `lg-app`; under it (1) styles.css's own tokens point at the LG tokens, so every existing component takes the LG
   palette, type and radii in light and dark at once, and (2) the shell and the P1 screens are restyled here: glass only on the
   controls layer (header capsules, the bottom action row, the sidebar, the floating tab bar, the HUD), content stays opaque
   (cards, lists, pictures). Two layouts (owner T129): phones < 768 px keep the T119 fixed screens; from 768 px each screen has
   its own PC composition (full-width direction rows, the wait deck beside the HUD column, the result's actions in the top
   toolbar). Brand yellow only as a tint (prominent action, selection, progress). */

/* ======================================================================== 1. token bridge */
body.lg-app {
  --bg: var(--n1);
  --surface: var(--n0);
  --line: color-mix(in srgb, var(--n3) 55%, transparent);
  --line-strong: var(--n3);
  --on-accent: var(--accent-ink);
  --alert-text: var(--danger);
  /* the dark show stage becomes content on the page (dark only in dark mode, MIGRATION S5 / S12) */
  --stage: transparent;
  --stage-text: var(--n9);
  --stage-text-2: var(--n5);
  --stage-line: var(--n3);
  --stage-surface: var(--n0);
  --stage-alert: var(--danger);
  --stage-ink: var(--accent-ink);
  --stage-glass-fill: var(--n0);
  --stage-glass-solid: var(--n0);
  --stage-glass-rim: transparent;
  --glass-fill: var(--n0);
  --sheet-fill: var(--n0);
  --glass-solid: var(--n1);
  --glass-rim: transparent;
  --shadow-float: var(--e3);
  --r-s: var(--r2); --r-m: var(--r2); --r-l: var(--r3); --r-xl: var(--r3);
  --fs-display-m: clamp(var(--s4), .6vw + var(--s4), var(--s5));
  background: var(--n1);
  color: var(--n9);
  letter-spacing: var(--track-tight);
  -webkit-tap-highlight-color: transparent;}
:root:has(> body.lg-app) { background: var(--n1);}   /* iOS tints its toolbar from the page colour */

/* ======================================================================== 2. type */
/* the display face was Black Han Sans (one heavy weight); LG titles are the system face in bold */
body.lg-app :is(h1, h2, h3) { font-weight: var(--fw-bold); letter-spacing: var(--track-tight);}
body.lg-app :is(.choice .name, .plan .hook, .choice.persona .t1, .ic-head, .offer-title, .brandcard .identity, .plan-stream .line,
  .copy .hook, .big, .stat b, .card3 .face b, .ch-first, .pp-preview, .three li, .ref .n, .av) { font-weight: var(--fw-bold); letter-spacing: var(--track-tight);}
/* a copy theme's preview shows the AD's type, not the app's */
body.lg-app .theme-card .th-hook { font-family: var(--font); font-weight: var(--fw-regular); letter-spacing: 0;}
body.lg-app .work-head h2, body.lg-app .result-head h2 { font-size: var(--fs-title); line-height: var(--s5);}
body.lg-app .lead { color: var(--n5);}
body.lg-app :focus-visible { outline: var(--hair2) solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: var(--hair2);}
body.lg-app [tabindex="-1"]:focus, body.lg-app [tabindex="-1"]:focus-visible { outline: none;}   /* a title focused by the step change, not by the keyboard */

/* ======================================================================== 3. shell: header */
/* iOS 26: no slab; the items sit in floating glass capsules; on scrolling pages the content fades under them */
body.lg-app .top { background: linear-gradient(to bottom, var(--n1) 30%, color-mix(in srgb, var(--n1) 0%, transparent)); border-bottom: 0; gap: var(--s2);}
body.lg-app.fx > header.top { background: transparent; padding-top: calc(env(safe-area-inset-top, 0) + var(--s1)); padding-bottom: var(--s1);}
body.lg-app :is(.back-btn, #accountBtn.login-btn, #accountBtn.ds-btn.ds-btn--ghost.is-icon, body.fx .steps) {
  position: relative; isolation: isolate;
  background: var(--n0);
  box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3);
  border-radius: var(--pill);}
body.lg-app .back-btn { height: var(--s7); margin-left: 0; padding: 0 var(--s4) 0 var(--s2); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n9);}
body.lg-app #accountBtn.login-btn { height: var(--s7); min-height: var(--s7); padding: 0 var(--s4); text-decoration: none; color: var(--n9); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
body.lg-app #accountBtn.ds-btn.ds-btn--ghost.is-icon { width: var(--s7); height: var(--s7);}
/* A7's plan badge in the header (남은 무료 N회 / plan + points): one more glass capsule, its words centred */
body.lg-app .top .bl-badge > button { align-items: center; justify-content: center; gap: var(--s1); border-radius: var(--pill); color: var(--n9); font-weight: var(--fw-bold);
  background: var(--n0);
  box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3);}
body.lg-app .top .bl-badge > button .bl-badge-sub { color: var(--n5);}
@media (hover: hover) { body.lg-app :is(.back-btn, #accountBtn):hover { background: var(--n0); box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3), var(--e3);} }
body.lg-app .back-btn:active, body.lg-app #accountBtn:active { scale: 1.04;}
/* the step capsule: "3/6 방향 고르기 ━━" (the name comes from #steps[data-name], app.js renderChrome) */
body.lg-app.fx .steps { flex: none; display: inline-flex; align-items: center; gap: var(--s2); height: var(--s7); max-width: none; margin: 0 auto; padding: 0 var(--s4);}
body.lg-app.fx .steps::before { content: attr(data-name); order: 1; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n9); white-space: nowrap;}
body.lg-app.fx .steps .step-count { order: 0; font-size: var(--fs-caption); color: var(--n9);}
body.lg-app.fx .steps .step-line { order: 2; flex: none; width: var(--s7); height: var(--s1); background: var(--n2);}
body.lg-app.fx .steps .step-line i { background: var(--n9);}
@media (max-width: 379px) { body.lg-app.fx .steps::before { display: none;} }
body.lg-app.fx > header.top .back-btn + .switcher-slot:empty + .mark[hidden] ~ .steps { margin-left: auto;}

/* ======================================================================== 4. shell: bottom action row, sidebar, tab bar */
body.lg-app .bar { background: transparent; border-top: 0; box-shadow: none;}   /* no slab: the capsules are the glass */
/* scrolling pages (result, home): the row floats over the content, which fades under it (scroll edge effect) */
body.lg-app:not(.fx) .bar { padding-top: var(--s5); background: linear-gradient(to top, var(--n1) 45%, color-mix(in srgb, var(--n1) 0%, transparent));}
body.lg-app .bar-inner .ds-btn { height: var(--tap);}
body.lg-app .bar-note { color: var(--n5);}

/* PC sidebar (rail): glass reaching the window edges (macOS / iPadOS 27) */
@media (min-width: 1024px) {
  body.lg-app.has-nav .rail:not([hidden]) {
    background: var(--n0);
    border-right: 0; box-shadow: var(--e1);
    padding: var(--s4) var(--s3);}
  body.lg-app .rail .dest { height: var(--s6); border-radius: var(--r2); color: var(--n9); font: var(--t-body);}
  body.lg-app .rail .dest svg { color: var(--n5); width: var(--s4); height: var(--s4);}
  body.lg-app .rail .dest[aria-current="page"] { background: var(--accent-soft); color: var(--n9); font-weight: var(--fw-bold);}
  body.lg-app .rail .dest[aria-current="page"] svg { color: var(--n9);}
  @media (hover: hover) { body.lg-app .rail .dest:hover { background: var(--n2); color: var(--n9);} }
  body.lg-app .rail .meter-mini { border: 0; background: var(--n2); border-radius: var(--r2); color: var(--n5);}
}
/* phone tab bar: a floating glass capsule (A9 made it solid on purpose; --lg-glass-fill-strong is one token away) */
body.lg-app .tabbar {
  left: var(--s4); right: var(--s4); bottom: calc(env(safe-area-inset-bottom, 0) + var(--s2));
  max-width: calc(var(--s7) * 9.17); margin: 0 auto; height: calc(var(--s7) * 1.29); padding: var(--s1);
  border: 0; border-radius: var(--pill);
  background: var(--n0);
  box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3), var(--e3);}
body.lg-app .tabbar .tab { border-radius: var(--pill); color: var(--n9); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
body.lg-app .tabbar .tab[aria-current="page"] { background: color-mix(in srgb, var(--n9) 8%, transparent);}
body.lg-app .tabbar .tab[aria-current="page"]::before { display: none;}
body.lg-app.has-nav:not(.task) main { padding-bottom: calc(calc(var(--s7) * 1.29) + var(--s2) + var(--s6));}
@media (min-width: 1024px) { body.lg-app.has-nav:not(.task) main { padding-bottom: var(--s7);} }

/* ======================================================================== 5. buttons, chips, segmented */

/* a button inside content (a card, a readiness note, a problem): a plain capsule, no second layer of glass */

/* 추천 = the ready badge (green dot), never an ink pill */
body.lg-app .choice .rec { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--s5); padding: 0 var(--s2); background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: color-mix(in srgb, var(--ok) 72%, var(--n9)); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
body.lg-app .choice .rec::before { content: ""; width: var(--s1); height: var(--s1); border-radius: 50%; background: var(--ok);}
/* segmented (A/B/C, 광고 · 게시물, 브랜드 글 · 정보성 글, copy tabs): a fill track and a raised pill */
body.lg-app :is(.copy-tabs) { background: var(--n2); border-radius: var(--pill);}
body.lg-app .copy-tabs button { color: var(--n9); border-radius: var(--pill); font-weight: var(--fw-bold);}
body.lg-app .copy-tabs button[aria-selected="true"] {
  background: var(--n0); color: var(--n9); box-shadow: var(--e1), var(--e2), inset 0 0 0 var(--hair) color-mix(in srgb, var(--n9) 4%, transparent);}

/* ======================================================================== 6. content cards */
body.lg-app :is(.choice, .tile, .problem, .plan-card, .chn-row, .theme-card) { border: 0; background: var(--n0); box-shadow: var(--e2);}
body.lg-app .choice { border-radius: var(--r3);}
body.lg-app .tile { border-radius: var(--r3); padding: var(--s4) var(--s4) var(--s4);}
body.lg-app .tile h3 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n9);}
body.lg-app .tile.held { box-shadow: 0 0 0 var(--hair2) color-mix(in srgb, var(--warn) 60%, transparent), var(--e2);}
body.lg-app .problem { border-radius: var(--r3);}
body.lg-app .theme-card { border-radius: var(--r2);}
body.lg-app .theme-card.on { box-shadow: 0 0 0 var(--hair2) var(--accent), var(--e2);}
@media (hover: hover) { body.lg-app .choice:hover { box-shadow: var(--e2), 0 0 0 var(--hair) var(--n3);} }
/* picked: a tint ring, the card keeps its colours (the stamp says it) */
body.lg-app .choice.picked { background: var(--n0); color: var(--n9); box-shadow: 0 0 0 var(--hair2) var(--accent), var(--e2);}
body.lg-app .choice.picked :is(.who, .say, .count-bar span, .dt, .dd) { color: var(--n5);}

body.lg-app .count-bar i { background: var(--n2);}
body.lg-app .count-bar i::before { background: var(--accent);}

/* ======================================================================== 7. 방향 = direction card (owner T128, MIGRATION §0.3) */
/* phone: angle · title (+ 추천) on top, the hook leads (whole, owner Q54), 고민 under it (2 lines), 장면 behind 장면 보기 */
body.lg-app #s-plan .choice.plan { gap: var(--s2); padding: var(--s4);}
body.lg-app .dir-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); padding-right: var(--s6);}
body.lg-app .dir-top .ds-chip.angle { min-height: 0; padding: 0; line-height: normal;}
body.lg-app .dir-top .ds-chip.angle.info { padding: var(--hair2) var(--s2);}
body.lg-app .dir-top .plan-title { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
body.lg-app .dir-top .ds-chip.angle + .plan-title::before { content: "·"; margin-right: var(--s2);}
body.lg-app #s-plan .choice.plan .hook {
  font-size: var(--fs-title); line-height: 1.32; letter-spacing: var(--track-tight); word-break: keep-all; text-wrap: pretty;}   /* owner Q54 (10-16 12:29): the whole hook, wrapped, never cut — on the phone and the PC */
body.lg-app .plan .hook::before, body.lg-app .plan .hook::after { content: none;}
body.lg-app .dir-side { display: grid; gap: var(--s1); align-content: start;}
body.lg-app #s-plan .plan-pain { font-size: var(--fs-body); line-height: var(--s4); color: var(--n5); -webkit-line-clamp: 2;}
body.lg-app #s-plan .plan-pain b { color: var(--n9); font-weight: var(--fw-bold);}
body.lg-app #s-plan .plan-scene { font-size: var(--fs-body); line-height: var(--s4); color: var(--n9);}
body.lg-app #s-plan .plan-scene::before { content: "장면 · "; color: var(--n5);}
body.lg-app #s-plan .plan-more { color: var(--accent);}
body.lg-app #morePlans { min-height: var(--s7); padding: 0 var(--s4); border-radius: var(--pill); background: var(--n2); color: var(--n9); text-decoration: none; font-size: var(--fs-body);}
body.lg-app #s-plan #planSame { color: var(--n5);}
body.lg-app .plan-stream { background: var(--n0); color: var(--n9); border-radius: var(--r3); box-shadow: var(--e2);}
body.lg-app .plan-stream .kicker { color: var(--n5);}

/* ======================================================================== 8. 어디에 쓸까요 (goal), 손님, 느낌, 링크 */
body.lg-app .medium-row { background: var(--n0); box-shadow: var(--e2); border-radius: var(--r2);}
body.lg-app .medium-row .mr-box { border-radius: 50%; box-shadow: inset 0 0 0 var(--hair2) var(--n5);}
body.lg-app .medium-row[aria-pressed="true"] { background: var(--n0); color: var(--n9); box-shadow: 0 0 0 var(--hair2) var(--accent), var(--e2);}
body.lg-app .medium-row[aria-pressed="true"] .mr-box { background: var(--accent);}
body.lg-app .medium-row[aria-pressed="true"] .mr-box svg { stroke: var(--accent-ink);}
body.lg-app .medium-row[aria-pressed="true"] .mr-line { color: var(--n5);}
body.lg-app .form-chip { background: var(--n2); color: var(--n9);}
body.lg-app .form-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none;}
body.lg-app .kpi-chip, body.lg-app .kpi-goal .kpi-chip { background: var(--n2);}
body.lg-app .row-link { background: var(--n0); box-shadow: var(--e2); border-radius: var(--r2);}
/* 느낌: the picked order is a numbered tint badge, the picture gets a tint ring */
body.lg-app .ref { border-radius: var(--r2);}
body.lg-app .ref[aria-pressed="true"] { box-shadow: 0 0 0 var(--hair2) var(--accent), 0 0 0 var(--s1) var(--accent-ink);}
body.lg-app .ref .n { box-shadow: none; font-family: var(--font); font-size: var(--fs-body);}
/* 링크 (guest home): the link box is a capsule field */
body.lg-app .field input { border: 0; border-radius: var(--pill); background: var(--n0); box-shadow: var(--e2), inset 0 0 0 var(--hair) var(--n3); padding: 0 var(--s4);}
body.lg-app .field input:focus-visible { box-shadow: 0 0 0 var(--hair2) color-mix(in srgb, var(--accent) 80%, transparent), inset 0 0 0 var(--hair) var(--n3);}
body.lg-app .hero h1 { letter-spacing: var(--track-tight);}
/* 혜택 (offers in the bar): selectable capsules, picked = tint */
body.lg-app .offer-chip { background: var(--n0); box-shadow: var(--e2), inset 0 0 0 var(--hair) var(--n3); border-radius: var(--r2);}
body.lg-app .offer-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none;}
body.lg-app .offer-chip .ck { box-shadow: inset 0 0 0 var(--hair2) var(--n5);}
body.lg-app .offer-title { font-size: var(--fs-title);}

/* ======================================================================== 9. 읽는 중 / 만드는 중: HUD + deck (MIGRATION S5 / S12) */
body.lg-app .stage { background: transparent; border-radius: 0; padding: 0; overflow: visible; min-height: 0; gap: var(--s3);}
/* the HUD is the floating control: glass, sticky at the top of the scroller on phones */
body.lg-app .stage > .hud {
  position: sticky; top: 0; z-index: 3;
  padding: var(--s3) var(--s4); border-radius: var(--r3);
  background: var(--n0);
  box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3);}
body.lg-app .hud-label { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n9);}
body.lg-app .hud-time { color: var(--n5); font-size: var(--fs-caption);}
body.lg-app .pbar { height: var(--s1); background: var(--n2);}
body.lg-app .pbar i { background: var(--accent);}
body.lg-app .why-line, body.lg-app .why-line.on-stage { color: var(--n5);}
/* the deck card and the 알림톡 card are content: opaque */
body.lg-app .info-carousel .ic-card { background: var(--n0); border: 0; border-radius: var(--r3); box-shadow: var(--e2);}
body.lg-app .info-carousel .ic-card .ic-tag { background: var(--n2); color: var(--n9); font-weight: var(--fw-bold);}
body.lg-app .info-carousel .ic-card[data-kind="tip"] .ic-tag { background: var(--accent); color: var(--accent-ink);}
body.lg-app .kakao-card, body.lg-app .kakao-card.on-stage { background: var(--n0); border: 0; border-radius: var(--r3); box-shadow: var(--e2); color: var(--n9);}
body.lg-app .kakao-card.on-stage input { background: var(--n2); border-color: transparent; color: var(--n9);}
body.lg-app .wait-deck.on-stage :is(.wd-chip, .wd-pad) { background: var(--n2); color: var(--n9); border-color: transparent;}
body.lg-app :is(.ic-btn, .ic-foot button) { background: var(--n0); color: var(--n9);}
body.lg-app .stage .found-row { border-top-color: var(--n3);}
body.lg-app .stage [data-testid="make-queue"], body.lg-app .stage [data-testid="capacity-hold"] { grid-column: 1 / -1; width: auto; max-width: none; background: var(--n2); border: 0; border-radius: var(--r2); color: var(--n9);}
/* UX-B3 (P1, 390: 알림 받기 sat under the deck, below the fold): on phones the 알림톡 card comes right under the HUD, the deck after it */
@media (max-width: 767px) {
  body.lg-app .stage > .wait-extras { display: flex; flex-direction: column; gap: var(--s3);}
  body.lg-app .stage > .wait-extras > .kakao-card { order: -1; margin: 0;}
}
/* PC: the deck is the hero on the left, the HUD, the queue and 알림톡 stack in a 360-px column on the right */
@media (min-width: 768px) {
  body.lg-app .stage.deck-main { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--s7) * 7.5); grid-template-rows: repeat(7, auto) 1fr; column-gap: var(--s5); row-gap: var(--s3); align-items: start;}
  body.lg-app .stage.deck-main > *, body.lg-app .stage.deck-main > .wait-extras > * { grid-column: 2; min-width: 0;}
  body.lg-app .stage.deck-main > .wait-extras { display: contents;}
  body.lg-app .stage.deck-main > .wait-extras > .wait-deck { grid-column: 1; grid-row: 1 / -1; margin: 0;}
  body.lg-app .stage.deck-main > .hud { position: static;}
  body.lg-app .stage.deck-main > .slot-off { display: none;}
  body.lg-app .stage.deck-main .info-carousel.main { margin-top: 0;}
  body.lg-app .stage.deck-main .kakao-card { margin: 0;}
}

/* ======================================================================== 10. 완성 (result, MIGRATION S14) */
body.lg-app .shot img { border-radius: var(--r3); background: var(--n2);}
/* the done stamp floats over the picture: clear glass on a dimmed corner */
body.lg-app .shot .done-stamp { background: var(--scrim); color: var(--n0);
  box-shadow: var(--e1), var(--e2); border: 0;}
body.lg-app .shot .done-stamp .stamp { background: var(--accent); color: var(--accent-ink);}
body.lg-app .copy .cta b { background: var(--n2);}
/* 매체별로 받기 sizes: content tiles (one prominent action per view is PNG 받기), the ready ones carry a tint edge */
body.lg-app .ratio { background: var(--n1); color: var(--n9); box-shadow: inset 0 0 0 var(--hair2) color-mix(in srgb, var(--accent) 85%, transparent); border-radius: var(--r2);}
@media (hover: hover) { body.lg-app .ratio:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 var(--hair2) var(--accent);} }
body.lg-app .ratio.off { background: var(--n2); color: var(--n5); box-shadow: none;}
body.lg-app .copy .proofline { border-top-color: var(--n3);}
/* PC: the actions live in the top toolbar (trailing: 다른 방향으로 한 편 더, PNG 받기 prominent); the page title is centred */
@media (min-width: 768px) {
  body.lg-app[data-step="done"] .bar { position: fixed; top: calc(env(safe-area-inset-top, 0) + var(--s2)); bottom: auto; left: auto; right: var(--s4); z-index: calc(10 + 1);
    width: auto; padding: 0; background: none; border: 0; box-shadow: none;}
  body.lg-app.has-nav[data-step="done"] .bar { left: auto;}
  body.lg-app[data-step="done"] .bar-inner { max-width: none; margin: 0; gap: var(--s2); justify-content: flex-end;}
  body.lg-app[data-step="done"] .bar-inner .ds-btn { flex: none; min-width: 0; height: var(--s7); padding: 0 var(--s4);}
  body.lg-app[data-step="done"] .bar-note { max-width: calc(var(--s7) * 10.83); margin: 0 0 var(--s1) auto; text-align: right;}
  body.lg-app[data-step="done"] .top .step-name { position: absolute; left: 50%; translate: -50% 0; margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n9); text-align: center;}
  /* A7's plan badge stays in the header (left, beside 닫기); the account stays at the far right, the toolbar just before it */
  body.lg-app[data-step="done"] .top > * { order: 2;}
  body.lg-app[data-step="done"] .top > .back-btn { order: 0;}
  body.lg-app[data-step="done"] .top > #planBadge { order: 1; margin: 0;}
  body.lg-app[data-step="done"] .top > #accountBtn { order: 3; margin-left: auto;}
  body.lg-app[data-step="done"] .bar { right: calc(var(--s4) + calc(var(--s7) * 2));}
  body.lg-app[data-step="done"] main { padding-bottom: var(--s7);}
}

/* ======================================================================== 11. PC compositions of the fixed task screens (owner T128 / T129) */
/* From 768 px the wizard is laid out for the PC, never the phone column stretched or squeezed: title + intro above, the choices
   across the content width (up to 1180 px), a 방향 row = the whole hook (24 px) | 고민 · 장면 column (32 %, hairline), 손님 cards
   full width, references 4 (6 from 1100 px) across, the read / make deck beside the HUD column. Phones keep theirs. */
@media (min-width: 768px) {
  body.lg-app.fx > main { max-width: calc(calc(var(--s7) * 24.58) + 2 * var(--gutter)); margin: 0 auto;}
  body.lg-app.fx .work:not(.fx-goal) { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: var(--s4);}
  body.lg-app.fx .work:not(.fx-goal) > * { grid-column: 1;}
  body.lg-app.fx .work-persona { grid-template-areas: none; grid-template-rows: none;}   /* DOM order: title, cards, 직접 추가, what was read */
  body.lg-app.fx .work-persona > * { grid-area: auto;}
  body.lg-app.fx .work-persona .brandcard { position: static;}
  body.lg-app.fx .work-head { position: static;}
  body.lg-app.fx .work-head h2 { font-size: var(--fs-display); line-height: var(--s6);}
  body.lg-app.fx .work-head .lead { font-size: var(--fs-title); line-height: var(--s5); max-width: 64ch; -webkit-line-clamp: 3;}
  body.lg-app #s-plan .choice.plan { grid-template-columns: minmax(0, 1fr) minmax(calc(var(--s7) * 4.58), 32%); grid-template-areas: "top side" "hook side";
    column-gap: var(--s5); row-gap: var(--s2); align-items: start; padding: var(--s4) var(--s7) var(--s4) var(--s5);}
  body.lg-app #s-plan .choice.plan > .dir-top { grid-area: top;}
  body.lg-app #s-plan .choice.plan > .hook { grid-area: hook; font-size: var(--fs-display); line-height: 1.34;}
  body.lg-app #s-plan .choice.plan > .dir-side { grid-area: side; align-self: stretch; padding-left: var(--s4); border-left: var(--hair) solid var(--n3);}
  body.lg-app #s-plan .plan-pain { -webkit-line-clamp: 3;}
  body.lg-app #s-plan .plan-slots { gap: var(--s3);}
  body.lg-app #s-plan .plan-more { min-height: var(--s5);}   /* a pointer, not a thumb: the 44-px target is the phone's */
  body.lg-app.fx #s-feel .masonry { columns: 4; max-width: calc(var(--s7) * 22.08);}
  body.lg-app.fx .work.fx-goal { max-width: calc(var(--s7) * 15.83);}   /* the form column: wide enough to read as the PC's (≥ 60 % of the content), still one column */
}
@media (min-width: 1100px) { body.lg-app.fx #s-feel .masonry { columns: 6;} }

/* ======================================================================== 12. P1 pass 2 */
/* A13 (root 18:08, creative v7.0.40, docs/CTA-ANALYSIS-20261016.md §6 R1–R8): a copy theme's preview draws the action the way the
   engine now draws it — compact or inline, never a band. Forms (copy_design.CTA_STYLES): pill · label (ink chip) · underline (link
   with an accent rule) · ghost (outline chip) · badge_price (price badge + chip) · coupon (ticket) · sticker (round, tilted) ·
   save_tag (organic save cue); legacy bar → pill, tab → label (stored pieces). */
body.lg-app .theme-card .th-cta { justify-self: start; display: inline-flex; align-items: center; gap: var(--s1); max-width: 100%; padding: var(--s1) var(--s2); border-radius: var(--pill);
  font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); background: var(--accent); color: var(--accent-ink); box-shadow: none; text-decoration: none;}
body.lg-app .theme-card .th-cta:is(.cta-pill, .cta-bar) { border-radius: var(--pill); justify-self: start; text-align: left;}
body.lg-app .theme-card .th-cta:is(.cta-label, .cta-tab) { border-radius: var(--r1); background: var(--mark-ink); color: var(--n0); justify-self: start; text-align: left;}
body.lg-app .theme-card .th-cta.cta-underline { padding: 0; border-radius: 0; background: none; color: var(--n9); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: var(--s1); text-underline-offset: var(--s1);}
body.lg-app .theme-card .th-cta.cta-ghost { background: none; color: var(--n9); box-shadow: inset 0 0 0 var(--hair2) currentColor;}
body.lg-app .theme-card .th-cta.cta-badge_price { border-radius: var(--r1);}
body.lg-app .theme-card .th-cta.cta-badge_price::before { content: "%"; display: inline-grid; place-items: center; width: var(--s4); height: var(--s4); margin-left: calc(-1 * var(--s1)); border-radius: 50%;
  background: var(--mark-ink); color: var(--accent); font-size: var(--fs-caption);}
body.lg-app .theme-card .th-cta.cta-coupon { border-radius: var(--r1); background: var(--accent-soft); color: var(--n9); box-shadow: inset 0 0 0 var(--hair2) var(--n9); outline: var(--hair2) dashed var(--n9); outline-offset: var(--hair); padding: var(--s1) var(--s3);}
body.lg-app .theme-card .th-cta.cta-sticker { border-radius: var(--pill); padding: var(--s1) var(--s3); rotate: -6deg; box-shadow: var(--e1);}
body.lg-app .theme-card .th-cta.cta-save_tag { padding: 0; background: none; color: var(--n5); font-weight: var(--fw-bold);}
body.lg-app .theme-card .th-cta.cta-save_tag::before { content: ""; width: var(--s2); height: var(--s3); background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);}
/* 브랜드 카드 (T96) and 이어서 볼 광고 (pending row): content cards, the one primary action tinted */
body.lg-app .brand-home, body.lg-app .pending-row { border: 0; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}

body.lg-app .pending-row .ds-badge { margin-right: var(--s1); vertical-align: var(--hair);}
/* 이 혜택을 넣을까요? (the bar's offer takeover, MIGRATION S10): the row grows into a glass panel — upward on the phone, bottom right on
   the PC; inside it plain fills (never glass on glass) */
body.lg-app .bar.has-offers {
  margin: 0 var(--s2) calc(env(safe-area-inset-bottom, 0) + var(--s2)); padding: var(--s4); border-radius: var(--r3);
  background: var(--n0);
  box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3), var(--e3);}

body.lg-app .bar.has-offers .offer-chip { background: var(--n2); box-shadow: none;}
body.lg-app .bar.has-offers .offer-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink);}
@media (min-width: 768px) {
  body.lg-app.fx > .bar.has-offers { justify-self: end; width: min(calc(var(--s7) * 15.83), calc(100% - var(--s6))); margin: 0 var(--s4) var(--s4);}
  body.lg-app .bar.has-offers .bar-note, body.lg-app .bar.has-offers .bar-body, body.lg-app .bar.has-offers .bar-inner { max-width: none; margin-left: 0; margin-right: 0;}
}
/* 링크 (MIGRATION S1): the link box is a glass capsule — the field and 읽기 시작 inside it, like Safari's address bar. On phones the
   guest / new-brand link step is a fixed screen (T119); OWNER T335 (live home on a phone: the sample + headline pushed the form under the
   fold with an empty band): the title (2 lines), ONE sub-line, then the form at once (브랜드 주소 · 읽기 시작 · 다 맡기기), the sample
   under the form in whatever height is left (none when there is too little); nothing scrolls at 390×740 / 390×664 / 360×640. */
body.lg-app #s-link .field { align-items: center; gap: var(--s1); padding: var(--s1); border-radius: var(--pill);
  background: var(--n0);
  box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3);}
body.lg-app #s-link .field:focus-within { box-shadow: var(--e1), 0 0 0 var(--hair2) color-mix(in srgb, var(--accent) 75%, transparent);}
body.lg-app #s-link .field input { height: var(--s7); padding: 0 var(--s3); border: 0; border-radius: var(--pill); background: transparent; box-shadow: none;}
body.lg-app #s-link .field input:focus-visible { box-shadow: none; outline: none;}
body.lg-app #s-link .field .ds-btn { height: var(--s7); padding: 0 var(--s4);}
@media (max-width: 767px) {
  body.lg-app.lg-link-fixed { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100svh; overflow: hidden;}
  body.lg-app.lg-link-fixed > header.top { grid-row: 1; position: static;}
  body.lg-app.lg-link-fixed > main { grid-row: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain; width: 100%; padding-top: var(--s1); padding-bottom: var(--s3);}
  body.lg-app.lg-link-fixed > .bar { grid-row: 3; position: static;}
  body.lg-app.lg-link-fixed #s-link.on { display: flex; flex-direction: column; height: 100%;}
  body.lg-app.lg-link-fixed #s-link .hero { flex: 1; display: flex; flex-direction: column; gap: var(--s3); padding-top: 0; min-height: 0;}
  body.lg-app.lg-link-fixed #s-link .hero > div:first-child { display: contents;}
  body.lg-app.lg-link-fixed #s-link .hero-side { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; container-type: size;}
  body.lg-app.lg-link-fixed #s-link .example { margin: 0; flex: 1 1 0; min-height: 0; display: flex; justify-content: center;}
  body.lg-app.lg-link-fixed #s-link .example img { width: auto; height: 100%; max-height: 32svh; max-width: 100%; margin: 0 auto; border-radius: var(--r3);}
  body.lg-app.lg-link-fixed #s-link :is(.three, .three-caption, .feed, figcaption, .auto-row .meta, .slogan) { display: none;}
  body.lg-app.lg-link-fixed #s-link h1 { font-size: var(--fs-display); line-height: 1.22;}
  body.lg-app.lg-link-fixed #s-link h1#h-link { margin-bottom: 0; text-wrap: balance; word-break: keep-all;}
  body.lg-app.lg-link-fixed #s-link .lead { margin-top: 0; font-size: var(--fs-body); line-height: var(--s4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  body.lg-app.lg-link-fixed #s-link .lead .lead-more { display: none;}
  body.lg-app.lg-link-fixed #s-link .linkform { margin-top: var(--s1); gap: var(--s1);}
  body.lg-app.lg-link-fixed #s-link .linkform > p:last-child { margin: 0;}
  body.lg-app.lg-link-fixed #s-link .auto-row { margin: 0;}
}
@media (max-width: 767px) {   /* T349: the story fills what the fixed link screen leaves — before card whole, the after picture sized to the rest */
  body.lg-app.lg-link-fixed #s-link .home-story { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: var(--s2);}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-card { padding: var(--s2) var(--s3); gap: var(--s1);}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-after { flex: 1 1 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr);}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-after img { width: auto; height: 100%; max-width: 100%; min-height: 0;}
  /* T398: stacked phones — the 9:16 player as tall as the card allows, its label beside it */
  body.lg-app.lg-link-fixed #s-link .home-story .hs-after { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: end;}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-player { height: 100%; width: auto; max-width: none; margin: 0;}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-after .hs-side { align-self: start; padding-top: var(--s1);}
}
@container (max-height: 96px) { body.lg-app.lg-link-fixed #s-link .example { display: none;} }   /* T335: too little left — no sliver of a sample */
@media (max-width: 380px) { body.lg-app.lg-link-fixed #s-link h1#h-link { font-size: var(--fs-display); letter-spacing: var(--track-tight);} }
@container (max-height: 360px) {   /* T349 on a short phone: before | after side by side, so the ad keeps a readable size (never a thumbnail sliver, T335) */
  body.lg-app.lg-link-fixed #s-link .home-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--s2);}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-cap { grid-column: 1 / -1;}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-card { min-height: 0; align-content: start;}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-list { flex-direction: column; flex-wrap: nowrap; gap: var(--hair2); font-size: var(--fs-caption);}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-tag { font-size: var(--fs-caption);}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-open { display: none;}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-after img { width: 100%; height: auto; max-height: 100%; aspect-ratio: 4 / 5; object-fit: contain;}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-after { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-player { height: 100%; width: auto; max-width: 100%; margin: 0 auto;}
  body.lg-app.lg-link-fixed #s-link .home-story .hs-films { display: none;}   /* short phones: the player keeps the room */
}   /* T349 essence line: two lines on a 360 phone too (T335) */
@media (max-width: 767px) and (max-height: 700px) {
  body.lg-app.lg-link-fixed #s-link .field-note { display: none;}
  body.lg-app.lg-link-fixed #s-link h1 { font-size: var(--fs-display);}
}
/* root 19:11: while a make / read waits for an account (capacity hold) the HUD shows no countdown — the wait card says when */
body.lg-app .stage.on-hold :is(.hud-eta, .why-eta) { display: none;}
/* B3 §6 #2: 브랜드 이름·설명으로 만들기 — the brief form in the sheet */
.brief-form { display: grid; gap: var(--s1);}
.brief-form .lbl { margin-top: var(--s1); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
.brief-form textarea.ds-input { min-height: calc(var(--s7) * 2.5);}
.brief-form .row-actions { margin-top: var(--s2);}
.url-brief { margin: var(--hair2) 0 0;}
/* the stage's actions (a stopped read / make: the reason + 다시 시도 · 링크 바꾸기 …) sit in the flow right under the HUD — the old absolute
   placement measured from a tall dark stage put them under the header once the stage became content on the page; a stopped stage is
   one column on the PC too (its deck is gone) */
body.lg-app .stage-actions { position: static; left: auto; right: auto; bottom: auto;}
body.lg-app .stage.failed .stage-actions .row-actions { flex-wrap: wrap;}
@media (min-width: 768px) { body.lg-app .stage.failed.deck-main { display: flex; flex-direction: column; max-width: calc(var(--s7) * 15.83);} }
/* B3 §6 #15: what 전부 받기 holds and what is still coming */
body.lg-app .kit-inv { margin: var(--s1) 0 0; color: var(--n5); font-size: var(--fs-caption);}
body.lg-app .kit-inv .kit-out { color: var(--n5);}
/* B3 §6 #21: a 영상 방식 the brand's material cannot make — shown with its reason and the alternative, never picked */
body.lg-app .mc-mode.is-off { opacity: .55; cursor: not-allowed;}
body.lg-app .mc-mode.is-off .mc-why { display: block; color: var(--n5); font-size: var(--fs-caption); line-height: 1.35;}
body.lg-app .mode-fix { display: grid; gap: var(--s3);}

/* ======================================================================== 13. T129 PC pass (root 22:27, 1280 / 1440) */
/* 어디에 쓸까요 takes the wizard's content column (its 이대로 시작 then ends where the column ends, never off at the window's edge);
   each channel is one card row — check · name · line, its form chips trailing on the same row, the lock / state under it; the purpose
   control is a segmented control, not a 1180-px bar. 손님 cards keep the full width with two columns inside: who (나이 · 이름 · 한 줄 ·
   고민 · 리뷰 수) | what the reviews say about them (tier 2), a hairline between. The result's toolbar sits against the window edge
   when there is no account button. */
@media (min-width: 1024px) {
  body.lg-app.fx .work.fx-goal { max-width: none;}
  body.lg-app .fx-goal .purpose-seg.wide { width: min(100%, calc(var(--s7) * 10)); justify-self: start;}
  body.lg-app .fx-goal .ch-pick { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); row-gap: 0; padding-right: var(--s3);
    border-radius: var(--r2); background: var(--n0); box-shadow: var(--e2);}
  body.lg-app .fx-goal .ch-pick:has(> .medium-row[aria-pressed="true"]) { box-shadow: 0 0 0 var(--hair2) var(--accent), var(--e2);}
  body.lg-app .fx-goal .ch-pick > .medium-row { grid-column: 1; grid-row: 1; min-height: var(--s7); background: transparent; box-shadow: none;}
  body.lg-app .fx-goal .ch-pick > .form-chips { grid-column: 2; grid-row: 1; flex-wrap: nowrap;}
  body.lg-app .fx-goal .ch-pick > .mr-state { grid-column: 1 / -1; grid-row: 2; padding: 0 var(--s3) var(--s3) var(--s7);}
  body.lg-app #s-persona .choice.persona:has(> :is(.t2, .t2-line)) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: repeat(4, auto) 1fr;
    column-gap: var(--s6); align-items: start;}
  body.lg-app #s-persona .choice.persona:has(> :is(.t2, .t2-line)) > :not(.stamp-slot, .t2, .t2-line) { grid-column: 1;}
  body.lg-app #s-persona .choice.persona > :is(.t2, .t2-line) { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; align-content: start;
    padding-left: var(--s5); border-left: var(--hair) solid var(--n3);}
  body.lg-app #s-persona .choice.persona .t2-row { flex-wrap: wrap; row-gap: var(--s1);}
}
@media (min-width: 768px) {
  body.lg-app[data-step="done"]:not(:has(#accountBtn:not([hidden]))) .bar { right: var(--s4);}
}
/* owner T162: the strengths hold card as a content card */
body.lg-app .strengths-hold { border: 0; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}

/* ---- owner T622 F3: the 변형 row under a channel's chips (a 혜택 배너 / 기능 콜아웃 / 모션 포스터 order) ---- */
.static-axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); margin-top: var(--s3);}
.static-axes > .form-note { grid-column: 1 / -1; margin: 0;}
.sa-pick { display: grid; gap: var(--s1); min-width: 0; font: var(--t-caption); color: var(--n5);}
.sa-pick select { min-height: var(--tap); width: 100%; padding: 0 var(--s3); border: var(--hair) solid var(--n3); border-radius: var(--r1);
  background: var(--n0); color: var(--n9); font: var(--t-body);}
@media (min-width: 900px) { .static-axes { grid-template-columns: repeat(4, minmax(0, 1fr));} }
/* owner T641: the ad image's style references (1–2) — thumbnails, 사진 올리기, 추천에서 고르기 */
.style-refs { display: grid; gap: var(--s2); margin-top: var(--s3);}
.style-refs > .form-note { margin: 0;}
.sr-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;}
.sr-thumb { position: relative; width: calc(var(--tap) * 1.6); height: calc(var(--tap) * 1.6); border-radius: var(--r1); overflow: hidden;
  border: var(--hair) solid var(--n3); background: var(--n1);}
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;}
.sr-x { position: absolute; top: 0; right: 0; min-width: var(--tap); min-height: var(--tap); display: grid; place-items: center;
  border: 0; background: transparent; color: var(--n0);}
.sr-x svg { filter: drop-shadow(0 0 var(--hair2) var(--n9));}
.sr-add { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s3); border: var(--hair) solid var(--n3);
  border-radius: var(--r1); background: var(--n0); color: var(--n9); font: var(--t-body); cursor: pointer;}
.sr-add.is-off, .sr-add:disabled { color: var(--n5); cursor: default;}
.sr-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--tap) * 1.6), 1fr)); gap: var(--s2);}
.sr-pick { padding: 0; border: var(--hair) solid var(--n3); border-radius: var(--r1); overflow: hidden; background: var(--n1); aspect-ratio: 1;}
.sr-pick img { width: 100%; height: 100%; object-fit: cover; display: block;}
.sr-err { color: var(--danger);}
/* owner T645: 고객 영상 모션's clips (1–3) — one row per clip, 영상 올리기 */
.ugc-clips { display: grid; gap: var(--s2); margin-top: var(--s3);}
.ugc-clips > .form-note { margin: 0;}
.uc-list { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none;}
.uc-row { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 0 0 var(--s3); border: var(--hair) solid var(--n3);
  border-radius: var(--r1); background: var(--n0); font: var(--t-body); color: var(--n9);}
.uc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.uc-meta { font: var(--t-caption); color: var(--n5);}
.uc-row .sr-x { position: static; color: var(--n7);}
.uc-row .sr-x svg { filter: none;}