/* T545 2c: p2.css (was static/lg/app/p2.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 P2 (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: A14c.
   Screens: 소재 목록 (js/pages.js + account/library.js), brand home (js/home.js), 설정 lists, 요금제, 채널 연결 (js/pages.js), the
   소재 sheet (.det) and the 과정 sheet. The account and billing pages have their own files (account.css, billing.css) on the same tokens.
   Two layouts (owner T129): phones < 900 px get one column under a large title; from 900 px a desktop composition. Content stays
   opaque (cards, lists, chips in the content); glass only floats: the header groups, the selection bar. Every control is a 44 px
   target on a phone. Owner Q54: in-production pieces say 만드는 중; hooks are never cut. */

/* ======================================================================== frame */
.lg-p2 {
  --p2-gap: var(--s3);
  font-family: var(--font);
  color: var(--n9);
  letter-spacing: var(--track-tight);
  -webkit-font-smoothing: antialiased;}
.p2-page { display: grid; gap: var(--p2-gap); max-width: calc(var(--s7) * 24.58); padding-top: 0;}
.p2-page h2, .p2-page h3, .lg-p2 h1, .lg-p2 h2, .lg-p2 h3 { font-family: var(--font);}
.p2-wrap { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: keep-all; overflow-wrap: anywhere;}
/* phones: every control in P2 is a 44 px target (DESIGN-GUIDE, control audit); the capsule simply is 44 tall, like iOS 26 bar items */
@media (max-width: 899px) {
  .lg-p2, .member-home { --lg-h-chip: var(--s7);}   /* T135 sweep P2: the member home (#/, js/home.js compact) too — its 11 small capsules were 32 px */
  .lg-p2 .ds-btn.is-s, .member-home .ds-btn.is-s, .det .ds-btn.is-s, .p2-proc .ds-btn { --lg-btn-h: var(--s7);}
  .lg-p2 .ds-chip { padding: 0 var(--s4);}
}

/* the page title row: a large title, a subtitle, trailing actions (a glass group + the one prominent action) */
.p2-head { display: flex; align-items: flex-end; gap: var(--s3); padding: var(--s1) 0 var(--hair2); position: static; flex-wrap: wrap;}
.p2-head__title { flex: 1 1 calc(var(--s7) * 4.58); min-width: 0; display: grid; gap: var(--hair2);}
.p2-head .lg-largetitle { margin: 0; font-size: var(--fs-display); line-height: normal; outline: none; word-break: keep-all; overflow-wrap: anywhere;}
.p2-head__sub { margin: 0; color: var(--n5); font: var(--t-body); word-break: keep-all;}
.p2-head__sub b { color: var(--n9); font-weight: var(--fw-bold);}
.p2-head__acts { display: inline-flex; align-items: center; gap: var(--s2); flex: none; margin-left: auto;}
.p2-head__acts:empty { display: none;}
.p2-group-btns > .ds-btn.p2-pad { padding: 0 var(--s3);}
.p2-brandline { display: flex; align-items: center; gap: var(--s3); flex: 1 1 calc(var(--s7) * 5.42); min-width: 0;}
.p2-brandline .av { width: var(--s7); height: var(--s7); border-radius: var(--r2); font-size: var(--fs-title); flex: none;}
@media (min-width: 900px) {
  .p2-page { --p2-gap: var(--s4);}
  .p2-head { padding: var(--s4) 0 var(--s1); gap: var(--s4);}
  .p2-head .lg-largetitle { font-size: var(--fs-display); line-height: var(--s7);}
  .p2-head__sub { font-size: var(--fs-title); line-height: var(--s5);}
  .p2-brandline .av { width: calc(var(--s7) * 1.25); height: calc(var(--s7) * 1.25); border-radius: var(--r2); font-size: var(--fs-display);}
}
@media (max-width: 899px) {
  .p2-head__acts .ds-btn--primary > span { display: none;}   /* the + capsule alone, like an iOS bar button */
  .p2-head__acts .ds-btn--primary { width: var(--tap); padding: 0;}   /* 2c: the + capsule at the D2 tap size (was lg.css's --lg-btn-h) */
  .p2-head__acts .ds-btn--primary .ds-ico { width: var(--s5); height: var(--s5);}
}

/* sections */
.p2-sec { display: grid; gap: var(--s2); min-width: 0;}
.p2-sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: var(--s2) var(--hair2) 0;
  font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight);}
.p2-sec__h small { font: var(--t-body); color: var(--n5); letter-spacing: 0;}
.p2-sec__h .ds-btn--ghost { gap: var(--hair2);}
.p2-sec__h .ds-btn--ghost .ds-ico { width: var(--s3); height: var(--s3);}
.p2-count { margin: 0 var(--hair2); color: var(--n5); font: var(--t-body);}
.p2-note { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: var(--s3) var(--s3); border-radius: var(--r2); background: var(--n2); color: var(--n9);
  font: var(--t-body);}
.p2-note .ds-ico { width: var(--s4); height: var(--s4); flex: none; color: var(--accent);}
.p2-note[hidden] { display: none;}
.p2-loading { display: flex; align-items: center; gap: var(--s2); color: var(--n5);}
.p2-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0;}

/* empty state (no zero-charts, one next step) */
.p2-empty { display: grid; justify-items: center; gap: var(--s1); padding: var(--s6) var(--s4) var(--s7); text-align: center; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
.p2-empty__ic { display: grid; place-items: center; width: var(--s7); height: var(--s7); border-radius: var(--r2); background: var(--n2); color: var(--n5); margin-bottom: var(--s1);}
.p2-empty__ic .ds-ico { width: var(--s5); height: var(--s5);}
.p2-empty__t { margin: 0; font: var(--t-body);}
.p2-empty__s { margin: 0; color: var(--n5); font: var(--t-body);}
.p2-empty p { margin: 0;}
.p2-empty .ds-btn { margin-top: var(--s2);}

/* ======================================================================== 소재 목록 */
.p2-lib { display: grid; gap: var(--p2-gap, var(--s3)); min-width: 0;}
.p2-filters { display: grid; gap: var(--s2);}
.p2-filters .fchips { gap: var(--s2);}
.p2-filters .fchip { min-height: 0; box-shadow: none;}
.p2-filters .fchip:focus-visible, .p2-menu select:focus-visible { outline: var(--hair2) solid color-mix(in srgb, var(--accent) 80%, transparent); outline-offset: var(--hair2);}
.p2-filters .fchip[aria-pressed="true"] { box-shadow: none;}
@media (hover: hover) and (pointer: fine) { .p2-filters .fchip:not([aria-pressed="true"]):hover { background: var(--n2); box-shadow: none;} }
/* the 포맷 · 매체 · 정렬 menus: pull-down capsules (an app field, never the browser's select) */
.p2-menus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);}
.p2-menu { display: block; min-width: 0; position: relative;}
.p2-menu .lbl { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.lg-p2 .p2-menu select {
  appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: var(--s7); margin: 0; padding: 0 var(--s6) 0 var(--s3);
  border: 0; border-radius: var(--pill); background-color: var(--n2); color: var(--n9);
  font: var(--t-body); letter-spacing: 0; cursor: pointer; text-overflow: ellipsis; box-shadow: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--s4)) 52%, calc(100% - var(--s3)) 52%; background-size: var(--s1) var(--s1); background-repeat: no-repeat;}
.lg-p2 .p2-menu select:hover { border: 0; background-color: var(--n2);}
.lg-p2 .p2-menu select option { background: var(--n0); color: var(--n9);}
@media (min-width: 900px) {
  .p2-filters { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--s4);}
  .p2-filters > .fchips { grid-column: 1;}
  .p2-filters > .p2-menus { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(3, calc(var(--s7) * 3.12));}
  .lg-p2 .p2-menu select { font-size: var(--fs-caption);}   /* 44 px on every size (shell_check holdcard: an app field, 44 px) */
  .p2-filters .fchip { height: var(--s6);}
  .p2-filters { align-items: center;}
}

/* the grid of pieces: 2 columns on a phone, 3 from 600, 4 from 900, 5 from 1200 */
.p2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); columns: auto;}
@media (min-width: 600px) { .p2-grid { grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media (min-width: 900px) { .p2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s4);} }
@media (min-width: 1200px) { .p2-grid { grid-template-columns: repeat(5, minmax(0, 1fr));} }
.p2-card { position: relative; display: grid; gap: var(--s2); margin: 0; break-inside: avoid; align-content: start; min-width: 0;}
.p2-card .lib-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; border-radius: var(--r2); overflow: visible; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;}
.p2-card .lib-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r2); overflow: hidden; background: var(--n2);
  box-shadow: var(--e2), inset 0 0 0 var(--hair) var(--n3); transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) linear;}
.p2-card .lib-thumb img, .p2-card .lib-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;}
.p2-card .lib-open:active .lib-thumb { transform: scale(.97);}
@media (hover: hover) and (pointer: fine) { .p2-card .lib-open:hover .lib-thumb { box-shadow: var(--e1), inset 0 0 0 var(--hair) var(--n3);} }
.p2-card .lib-open:focus-visible { outline: none;}
.p2-card .lib-open:focus-visible .lib-thumb { box-shadow: 0 0 0 var(--hair2) var(--accent), var(--e2);}
.p2-play { position: absolute; left: var(--s2); bottom: var(--s2); display: grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: 50%; color: var(--n0); font-size: var(--fs-caption);
  background: var(--scrim); box-shadow: inset 0 0 0 var(--hair) color-mix(in srgb, var(--n0) 45%, transparent);}
.p2-new { position: absolute; top: var(--s2); right: var(--s2); width: var(--s2); height: var(--s2); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 var(--hair2) var(--n0);}
.p2-card .lib-body { display: grid; gap: var(--s1); padding: 0 var(--hair2); min-width: 0;}
.p2-card .lib-top { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; margin: 0; font: var(--t-body); color: var(--n5);}
.p2-card .lib-status, .p2-card .lib-made { height: var(--s5); padding: 0 var(--s2); box-shadow: none; font: var(--t-body);}
.p2-card .lib-status:not([class*="lg-badge--"]), .p2-card .lib-made:not([class*="lg-badge--"]) { --lg-badge-c: var(--n5);}
.p2-card .lib-made[data-state="drawing"]::before { animation: lg-pulse 1.4s ease-in-out infinite; background: var(--n5); width: var(--s1); height: var(--s1);}
.p2-card .lib-hook { margin: 0; font: var(--t-body); letter-spacing: var(--track-tight); color: var(--n9);
  display: block; -webkit-line-clamp: unset; overflow: visible; word-break: keep-all; overflow-wrap: anywhere;}   /* owner Q54: hooks are never cut */
.p2-card .parts { display: flex; flex-wrap: wrap; gap: 0 var(--s1); margin: 0; font: var(--t-body); color: var(--n5);}
.p2-card .parts span + span::before { content: "·"; margin-right: var(--s1); color: var(--n5);}
.p2-card .parts span[hidden] { display: none;}
.p2-card .parts [data-testid="card-tag"] { font-family: var(--font-mono); font-weight: var(--fw-bold); letter-spacing: 0; color: var(--n9);}
.p2-card .lib-body p:has(> [data-cardremake]) { margin: var(--s1) 0 0;}
.p2-card.local .lib-thumb { box-shadow: inset 0 0 0 var(--hair) var(--n3);}
@media (min-width: 900px) { .p2-card .lib-hook { font-size: var(--fs-body);} }

/* a piece without a picture: its state in words (그리는 중 / 문구로 남은 광고 / 멈췄어요), never a broken image or a failure word */
.p2-card .thumb-state, .lg-p2 .thumb-state { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: var(--s2); padding: var(--s3); text-align: center;
  background: linear-gradient(160deg, var(--n2), var(--n2)); border: 0; border-radius: inherit; color: var(--n5);}
.lg-p2 .thumb-state .ss-badge { display: inline-flex; align-items: center; gap: var(--s1); height: var(--s5); padding: 0 var(--s2); border-radius: var(--pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 72%, var(--n9)); font: var(--t-body);}
.lg-p2 .thumb-state[data-state="drawing"] .ss-badge::before { content: ""; width: var(--s1); height: var(--s1); border-radius: 50%; background: var(--accent); animation: lg-pulse 1.4s ease-in-out infinite;}
.lg-p2 .thumb-state[data-state="stopped"] .ss-badge { background: color-mix(in srgb, var(--danger) 14%, transparent); color: color-mix(in srgb, var(--danger) 70%, var(--n9));}
.lg-p2 .thumb-state[data-state="text"] .ss-badge { background: var(--n2); color: var(--n9);}
.lg-p2 .thumb-state .ts-text { font: var(--t-body); color: var(--n5); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}
.lg-p2 .thumb-state .ts-clock { font: var(--t-body); color: var(--n9);}

/* selection mode: a check on every card, the picked ones ringed; one glass bar with the actions that apply */
.lib-pick[hidden] { display: none !important;}
.p2-card .lib-pick { position: absolute; top: 0; left: 0; z-index: 2; display: grid; place-items: center; width: var(--s7); height: var(--s7); padding: 0; border: 0; background: none; cursor: pointer;}
.p2-check { display: grid; place-items: center; width: var(--s5); height: var(--s5); border-radius: 50%; color: transparent;
  background: color-mix(in srgb, var(--n0) 35%, transparent);
  box-shadow: inset 0 0 0 var(--hair2) color-mix(in srgb, var(--n0) 95%, transparent), var(--e1); transition: background-color var(--d-base) linear;}
.p2-check .ds-ico { width: var(--s4); height: var(--s4); stroke-width: 2.6;}
.lib-pick[aria-pressed="true"] .p2-check { background: var(--accent); color: var(--n0); box-shadow: inset 0 0 0 var(--hair2) var(--n0), var(--e1);}
.p2-grid.is-selecting .p2-card.is-picked .lib-thumb { box-shadow: 0 0 0 var(--hair2) var(--accent), var(--e2); transform: scale(.96);}
.p2-grid.is-selecting .lib-thumb::after { content: ""; position: absolute; inset: 0; background: transparent; transition: background-color var(--d-base) linear;}
.p2-grid.is-selecting .p2-card.is-picked .lib-thumb::after { background: color-mix(in srgb, var(--n0) 14%, transparent);}
.p2-selbar { position: fixed; z-index: 40; left: 50%; translate: -50% 0; bottom: calc(calc(var(--s7) * 1.33) + env(safe-area-inset-bottom, 0) + var(--s3));
  display: flex; justify-content: center; max-width: calc(100vw - var(--s5)); pointer-events: none;}
.p2-selbar > * { pointer-events: auto;}
.p2-selbar__g { height: var(--s7); padding: 0 var(--s1); gap: var(--hair2); box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3), var(--e3);}
.p2-selbar__g > .ds-btn { --lg-btn-h: var(--s7); padding: 0 var(--s3);}

.p2-selbar__n { padding: 0 var(--s2) 0 var(--s3); font: var(--t-body); white-space: nowrap; font-variant-numeric: tabular-nums;}
body.p2-selecting .lg-p2 .p2-lib { padding-bottom: calc(var(--s7) * 1.75);}
@media (min-width: 1024px) {
  body.has-nav .p2-selbar { bottom: var(--s5); left: calc(50% + var(--rail-w, calc(var(--s7) * 4.83)) / 2);}
}
@media (max-width: 1023px) { body:not(.has-nav) .p2-selbar, .lg-acct .p2-selbar { bottom: calc(env(safe-area-inset-bottom, 0) + var(--s4));} }

/* in-production rows (owner T119 + Q54: 만드는 중 / 대기 중, honest minutes, never a failure word) */
.p2-lives .p2-live { align-items: flex-start; padding-top: var(--s3); padding-bottom: var(--s3); --lg-row-indent: calc(var(--s7) * 1.67);}
.p2-live__thumb { position: relative; width: calc(var(--s7) * 1.33); height: calc(var(--s7) * 1.33); display: grid; place-items: center; border-radius: var(--r2); overflow: hidden; background: var(--n2); flex: none;}
.p2-live__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55;}
.p2-live__thumb .lg-ring { --lg-ring-size: var(--s7); --lg-ring-w: var(--s1); position: absolute;}
.p2-live__pct { position: relative; font: var(--t-body); font-variant-numeric: tabular-nums;}
.p2-live__clock { width: var(--s5); height: var(--s5); color: var(--n5);}
.p2-live__top { display: flex; align-items: center; gap: var(--s2); min-width: 0; margin-bottom: var(--s1);}
.p2-live__top .ds-badge { flex: none;}
.p2-badge--queued { --lg-badge-c: var(--n5);}
.p2-badge--queued::before { animation: none;}
.p2-live__line { min-width: 0; font: var(--t-body); color: var(--n5);}
.p2-live .ds-row__title { white-space: normal; word-break: keep-all;}
.p2-live .lg-row__progress { margin: var(--s2) 0 var(--s1);}
.p2-progress--idle { opacity: .6;}
.p2-live .ds-row__sub { white-space: normal;}
.p2-live .ds-row__chev { align-self: center;}
.p2-live__cancel { align-self: center;}
.p2-sec__h--live { margin-top: var(--hair2);}
@media (min-width: 900px) {
  .p2-lives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--hair);}
  .p2-lives .p2-live + .p2-live::before { display: none;}
  .p2-lives .p2-live:nth-child(2n) { box-shadow: var(--e1);}
  .p2-lives .p2-live:nth-child(n+3) { box-shadow: var(--e1);}
  .p2-lives .p2-live:nth-child(2n):nth-child(n+3) { box-shadow: var(--e1);}
}
.p2-more { margin: 0; display: flex; justify-content: center;}
.lib-foot { margin: 0; display: flex; justify-content: center;}
.lib-foot .ds-btn--ghost { gap: var(--s1);}
.lib-foot .ds-btn--ghost .ds-ico { width: var(--s4); height: var(--s4);}

/* ======================================================================== the 소재 sheet (.det) and the 과정 sheet: content on a sheet */
.det { display: grid; gap: var(--s4); font-family: var(--font); color: var(--n9);}
.det .det-media { border-radius: var(--r3); overflow: hidden; background: var(--n2); max-height: 52dvh; display: grid; place-items: center; box-shadow: inset 0 0 0 var(--hair) var(--n3);}
.det .det-top { display: grid; gap: var(--s1);}
.det .det-top .ds-btn { --lg-btn-h: var(--s7);}
.det .det-top .meta { text-align: center; color: var(--n5); font-size: var(--fs-caption);}
.det .lbl { font: var(--t-body); color: var(--n5); margin: 0 0 var(--s1) var(--s1);}
.det .dl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--s7) * 2.75), 1fr)); gap: var(--s2);}
.det .dl-row .ds-btn { --lg-btn-h: var(--s7); width: 100%; padding: 0 var(--s2);}
.det .dl-row .ds-btn .ico, .det .ds-btn .ds-ico, .det .ds-btn .ico { width: var(--s4); height: var(--s4); fill: none; stroke: currentColor;}
.det .det-hook { margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight); word-break: keep-all;}
.det .facts { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; padding: 0 var(--s3); border-radius: var(--r2); background: var(--n2); font: var(--t-body);}
.det .facts dt, .det .facts dd { padding: var(--s3) 0; border-top: var(--hair) solid var(--n3);}
.det .facts dt:first-of-type, .det .facts dt:first-of-type + dd { border-top: 0;}
.det .facts dt { color: var(--n5); padding-right: var(--s4);}
.det .facts dd { margin: 0; color: var(--n9); font-weight: var(--fw-regular); text-align: right; word-break: keep-all;}
.det .field2 { display: grid; gap: var(--s1);}
.det select { appearance: none; -webkit-appearance: none; height: var(--s7); padding: 0 var(--s6) 0 var(--s3); border: 0; border-radius: var(--r2); background-color: var(--n2); color: var(--n9);
  font: var(--t-body);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--s4)) 52%, calc(100% - var(--s3)) 52%; background-size: var(--s1) var(--s1); background-repeat: no-repeat;}
.det .det-acts { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;}
.det .det-acts .ds-btn--ghost { margin-left: auto;}
.det .ready { margin: 0; padding: var(--s3) var(--s3); border-radius: var(--r2); background: color-mix(in srgb, var(--ok) 12%, transparent); font: var(--t-body);}
.det .ready b { font-weight: var(--fw-bold);}
.det .ready.judging { background: var(--n2);}
.det .soft-fix { margin: calc(-1 * var(--s2)) 0 0;}
.det .piece-engine { margin: 0; color: var(--n5); font: var(--t-body);}
.det .pub { display: grid; gap: var(--s1); font: var(--t-body);}
.det .remake-line { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--n2); color: var(--n9);}
.det .remake-line .meta { color: var(--n5);}
.det .remake-line .bar4 { display: block; height: var(--s1); border-radius: var(--r1); background: var(--n2); overflow: hidden;}
.det .remake-line .bar4 i { position: static; display: block; height: 100%; width: var(--pct, 8%); background: var(--accent); border-radius: inherit;}
.det .meta { color: var(--n5); font: var(--t-body);}
/* a picture that is not there yet: the state card on the sheet (그리는 중 / 멈췄어요 + 다시 만들기) */
.det .shot-state { width: 100%; min-height: calc(var(--s7) * 5); display: grid; place-items: center; padding: var(--s4); text-align: center;}
.det .shot-state .ss-body { display: grid; justify-items: center; gap: var(--s2); max-width: calc(var(--s7) * 9.38);}
.det .shot-state .ss-badge { display: inline-flex; align-items: center; height: var(--s5); padding: 0 var(--s2); border-radius: var(--pill); background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 72%, var(--n9)); font: var(--t-body);}
.det .shot-state[data-state="stopped"] .ss-badge { background: color-mix(in srgb, var(--danger) 14%, transparent); color: color-mix(in srgb, var(--danger) 70%, var(--n9));}
.det .shot-state b { font: var(--t-body);}
.det .shot-state p { margin: 0; color: var(--n5); font: var(--t-body);}

.p2-proc { display: grid; gap: var(--s3); font-family: var(--font); color: var(--n9);}
.p2-proc__head { display: flex; align-items: center; gap: var(--s2); margin: 0; flex-wrap: wrap;}
.p2-proc__head b { font: var(--t-body); word-break: keep-all;}
.p2-proc p { margin: 0;}
.p2-proc__bar { display: grid; gap: var(--s2);}
.p2-proc__steps { padding: 0;}
.p2-proc__steps .ds-row { align-items: flex-start; --lg-row-indent: var(--s7);}
.p2-step-dot { display: grid; place-items: center; width: var(--s5); height: var(--s5); flex: none; margin-top: var(--hair); border-radius: 50%; box-shadow: inset 0 0 0 var(--hair2) var(--n5);}
.p2-step-dot .ds-ico { width: var(--s3); height: var(--s3); stroke-width: 2.6;}
[data-step="done"] > .p2-step-dot { background: var(--accent); box-shadow: none; color: var(--accent-ink);}
[data-step="now"] > .p2-step-dot { box-shadow: inset 0 0 0 var(--hair2) var(--accent);}
[data-step="now"] > .p2-step-dot::after { content: ""; width: var(--s2); height: var(--s2); border-radius: 50%; background: var(--accent); animation: lg-pulse 1.4s ease-in-out infinite;}

.p2-proc__pieces { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none;}
.p2-proc__pieces li { display: inline-flex; align-items: center; gap: var(--s1);}
.p2-pid { font: var(--t-body); letter-spacing: 0; color: var(--n5);}
.p2-proc__foot { display: flex; gap: var(--s2);}
.p2-proc__foot .ds-btn { flex: 1;}

/* the undo toast (the app's toast stack, with an action) */
.ds-toast.p2-toast { display: flex; align-items: center; gap: var(--s3); padding-right: var(--s2);}
.ds-toast.p2-toast .ds-btn--ghost { --lg-btn-h: var(--s6);}

/* ======================================================================== brand home (T119) */
.p2-home { display: grid; gap: var(--p2-gap, var(--s3)); min-width: 0;}
.p2-home[hidden] { display: none;}
.p2-home[aria-busy="true"] { min-height: calc(var(--s7) * 2.5);}
.p2-home__cols { display: grid; gap: var(--p2-gap, var(--s3)); min-width: 0;}
.p2-home__main, .p2-home__side { display: grid; gap: var(--p2-gap, var(--s3)); align-content: start; min-width: 0;}
@media (min-width: 900px) {
  .p2-home__cols { grid-template-columns: minmax(0, 1fr) minmax(calc(var(--s7) * 6.25), calc(var(--s7) * 7.5)); gap: var(--s5); align-items: start;}
  .p2-home__side { position: sticky; top: calc(var(--top-h, calc(var(--s7) * 1.42)) + var(--s4));}
}
/* A: one alert, worst first */
.p2-alert { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s3); border-radius: var(--r3);
  background: color-mix(in srgb, var(--warn) 14%, var(--n0)); box-shadow: var(--e2);}
.p2-alert__ic { display: grid; place-items: center; width: var(--s6); height: var(--s6); flex: none; border-radius: var(--r1); background: var(--warn); color: var(--n0);}
.p2-alert__ic .ds-ico { width: var(--s4); height: var(--s4);}
.p2-alert__text { flex: 1; min-width: 0; font: var(--t-body); word-break: keep-all;}
.p2-alert__x { color: var(--n5);}
.p2-alert__x .ds-ico { width: var(--s4); height: var(--s4);}
/* C: the next best action (one), more behind a disclosure */
.p2-nexts .p2-next { align-items: flex-start; padding-top: var(--s3); padding-bottom: var(--s3);}
.p2-nexts .ds-row__icon { margin-top: var(--hair2);}

.p2-next__act { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); flex-wrap: wrap;}

.p2-nexts .p2-more { display: none;}
.p2-nexts.is-open .p2-more { display: flex;}
.p2-moretoggle { justify-self: start; color: var(--accent); gap: var(--hair2);}
.p2-moretoggle .ds-ico { width: var(--s3); height: var(--s3); transition: rotate var(--d-base) linear;}
.p2-moretoggle[aria-expanded="true"] .ds-ico { rotate: 90deg;}
/* E: recent pieces: a horizontal scroller on a phone, a 3-up grid on the PC */
.p2-hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: var(--s3); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--gutter, var(--s4)) * -1); padding: var(--hair2) var(--gutter, var(--s4)) var(--s1); scroll-padding-inline: var(--gutter, var(--s4));}
.p2-hscroll::-webkit-scrollbar { display: none;}
@media (min-width: 900px) { .p2-hscroll { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: var(--s4);} }
@media (min-width: 1200px) { .p2-hscroll { grid-template-columns: repeat(3, minmax(0, 1fr));} }
.p2-piece { display: grid; gap: var(--s1); align-content: start; color: inherit; text-decoration: none; scroll-snap-align: start; min-width: 0;}
.p2-piece__img { display: block; aspect-ratio: 1 / 1; border-radius: var(--r2); overflow: hidden; background: var(--n2); box-shadow: var(--e2), inset 0 0 0 var(--hair) var(--n3); transition: transform var(--d-base) var(--ease);}
.p2-piece__img img { width: 100%; height: 100%; object-fit: cover; display: block;}
.p2-piece:active .p2-piece__img { transform: scale(.97);}
.p2-piece__hook { font: var(--t-body); word-break: keep-all; overflow-wrap: anywhere;}   /* never cut (owner Q54) */
.p2-piece__meta { display: flex; gap: var(--s1); align-items: center; font: var(--t-body); color: var(--n5);}
/* F: what CONTTO read */
.p2-read { display: grid; gap: var(--s1);}
.p2-read__k { margin: var(--s1) 0 var(--hair2); font: var(--t-body); color: var(--n5);}
.p2-read__k:first-child { margin-top: 0;}
.p2-strengths { display: grid; gap: 0; margin: 0; padding: 0; list-style: none;}
.p2-strengths li { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; gap: var(--hair2) var(--s2); align-items: baseline; padding: var(--s2) 0; border-top: var(--hair) solid var(--n3);}
.p2-strengths li:first-child { border-top: 0; padding-top: var(--hair2);}
.p2-strengths b { font: var(--t-body); white-space: normal; word-break: keep-all; overflow-wrap: anywhere;}   /* UX-B4 블레브 (A9g w49): a sentence-long strength title wraps — nowrap made the 390 page 531 px wide */
.p2-strengths span { font: var(--t-body); color: var(--n5); word-break: keep-all; min-width: 0;}
.p2-strengths small { font: var(--t-body); color: var(--n5); white-space: nowrap; font-variant-numeric: tabular-nums;}
@media (max-width: 599px) { .p2-strengths li { grid-template-columns: minmax(0, 1fr) auto;} .p2-strengths span { grid-column: 1 / -1; grid-row: 2;} }
.p2-personas { gap: var(--s1);}
.p2-chip-static { cursor: default; height: var(--s6) !important; padding: 0 var(--s3) !important; font-weight: var(--fw-regular);}
.p2-facts { display: grid; gap: 0; margin: var(--s1) 0 0;}
.p2-facts > div { display: grid; grid-template-columns: var(--s7) 1fr; gap: var(--s2); padding: var(--s2) 0; border-top: var(--hair) solid var(--n3);}
.p2-facts dt { color: var(--n5); font: var(--t-body);}
.p2-facts dd { margin: 0; font: var(--t-body); word-break: keep-all;}
/* I: points */
.p2-points { display: grid; gap: var(--s1);}
.p2-points__row { display: flex; align-items: center; gap: var(--s3);}
.p2-points .lg-ring { --lg-ring-size: var(--s7); --lg-ring-w: var(--s1);}
.p2-points b { display: block; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight);}
.p2-points small { display: block; margin-top: var(--s1); font: var(--t-body); color: var(--n5);}
.p2-points .lg-card__foot .ds-btn { flex: 1;}
.p2-home .ds-list .ds-row .ds-btn.is-s { flex: none;}

/* ======================================================================== 브랜드 / 설정 lists (inset grouped) */
.p2-brandcard { display: flex; align-items: center; gap: var(--s3); border: 0;}
.p2-brandcard b { font: var(--t-body);}
.p2-brandcard small { color: var(--n5); font-size: var(--fs-caption);}
.p2-save { display: grid; gap: var(--s2);}
.p2-save h3 { margin: 0; font: var(--t-body);}
.p2-save p { margin: 0; color: var(--n5); font: var(--t-body);}
.p2-save .ds-btn { justify-self: start;}
.p2-usage { padding: 0; border: 0; background: none; box-shadow: none;}
.p2-settings__h { margin-top: var(--s4);}
.p2-settings { display: grid; gap: 0; min-width: 0;}
.p2-settings .brand-col { display: grid; gap: 0; align-content: start; min-width: 0;}
@media (min-width: 900px) { .p2-settings.brand-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5);} }
.p2-group { display: block; min-width: 0;}
.p2-group > .ds-list__head { margin: var(--s4) var(--s4) var(--s2); padding: 0;}
.p2-settings .brand-col > .p2-group:first-child > .ds-list__head { margin-top: var(--s1);}

.lg-p2 .lrow.ds-row { display: flex; grid-template-columns: none; min-height: var(--s7); padding: var(--s2) var(--s4);}

.lg-p2 .lrow .tx { display: block;}
.lg-p2 .lrow .tx b { font-weight: var(--fw-regular);}
.lg-p2 .lrow .tx small { font-size: var(--fs-caption); color: var(--n5);}
.lg-p2 .lrow .end { display: inline-flex; align-items: center; gap: var(--s2); color: var(--n5);}

.lg-p2 #putRows { display: contents;}
#putRows > .ds-row + .ds-row::before, .ds-list > #putRows + .ds-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--lg-row-indent); height: var(--hair); background: var(--n3);}
.lg-p2 .ds-row__icon .ds-ico { width: var(--s4); height: var(--s4);}

.lg-p2 .ops-line { font-size: var(--fs-body); white-space: normal; text-align: right;}

/* ======================================================================== 요금제 */
.p2-plans { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr);}
@media (min-width: 600px) { .p2-plans { grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (min-width: 900px) { .p2-plans { grid-template-columns: repeat(auto-fit, minmax(calc(var(--s7) * 4.38), 1fr)); gap: var(--s4);} }
.lg-p2 .p2-plan { display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: var(--s1); padding: var(--s4); border: 0; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
.lg-p2 .p2-plan.on { box-shadow: 0 0 0 var(--hair2) var(--accent), var(--e2);}
.p2-plan p { margin: 0;}
.p2-plan .plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);}
.p2-plan .plan-name { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font);}
.p2-plan .plan-price { margin-top: var(--s1); display: flex; align-items: baseline; gap: var(--s1); flex-wrap: wrap;}
.p2-plan .plan-price b { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight);}
.p2-plan .plan-price small { color: var(--n5); font-size: var(--fs-body);}
.p2-plan .plan-price s { color: var(--n5); font-size: var(--fs-body); font-variant-numeric: tabular-nums;}
.p2-plan .plan-deal { margin-top: var(--s1);}

.plan-price .vh { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.p2-plan .plan-points { font: var(--t-body); color: var(--n9);}
.p2-plan .plan-adds { font: var(--t-body); color: var(--n5); word-break: keep-all;}
.p2-plan .plan-facts { margin: var(--s1) 0 var(--s3); padding: 0; list-style: none; display: grid; gap: var(--s1); font: var(--t-body); color: var(--n5);}
.p2-plan .plan-facts li { display: flex; gap: var(--s2); align-items: baseline;}
.p2-plan .plan-facts li::before { content: ""; width: var(--s1); height: var(--s2); flex: none; translate: 0 calc(-1 * var(--hair2)); rotate: 45deg; border: solid var(--ok); border-width: 0 var(--hair2) var(--hair2) 0;}
.p2-plan .ds-btn.is-block { align-self: end;}
.p2-plans__more { display: grid; gap: 0 var(--s5);}
@media (min-width: 900px) { .p2-plans__more { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;} }
.p2-plans__more .tile { padding: 0; border: 0; background: none; box-shadow: none;}
.p2-plans__more .ds-row .ds-btn { flex: none;}
.p2-plans__more .p2-actions { padding: var(--s2) var(--s4) 0;}
.p2-plans__more .p2-actions .meta { color: var(--n5); font-size: var(--fs-caption);}

.p2-skel { display: grid; gap: var(--s3);}
.p2-skel i { display: block; height: calc(var(--s7) * 4.58); border-radius: var(--r3); background: linear-gradient(90deg, var(--n2), var(--n2), var(--n2)); background-size: 300% 100%; animation: p2-shimmer 1.4s linear infinite;}
@media (min-width: 900px) { .p2-skel--plans { grid-template-columns: repeat(3, 1fr);} }
@keyframes p2-shimmer { to { background-position: -300% 0;} }

/* ======================================================================== 채널 연결 */
.p2-chns { display: grid; gap: 0; border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2); overflow: hidden;}
.lg-p2 .p2-chn { position: relative; display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); gap: var(--s1) var(--s3); padding: var(--s4); border: 0; border-radius: 0; background: transparent;}
.lg-p2 .p2-chn + .p2-chn::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--s7) * 1.46); height: var(--hair); background: var(--n3);}
.p2-chn__ic { grid-row: 1 / span 2; display: grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: var(--r2); background: var(--ch); color: var(--n0); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight);}
.p2-chn__text { display: grid; gap: var(--s1); min-width: 0;}
.p2-chn .chn-head { display: flex; align-items: center; gap: var(--s2); margin: 0;}
.p2-chn .chn-head b { font: var(--t-body);}
.p2-chn .chn-chip { box-shadow: none;}
.p2-chn .meta { margin: 0; color: var(--n5); font: var(--t-body);}
.p2-chn .meta.p2-warn { color: color-mix(in srgb, var(--warn) 80%, var(--n9)); font-weight: var(--fw-bold);}
.p2-chn__acts { grid-column: 2; display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s2) 0 0;}
.p2-chn__out { grid-column: 2; margin-top: var(--s2); padding: var(--s3) var(--s3); border-radius: var(--r2); background: var(--n2); font: var(--t-body);}
.p2-chn__out[hidden] { display: none;}
.p2-chn__out p { margin: 0 0 var(--s1);}
.p2-chn__out .chn-checks { margin: var(--s1) 0; padding: 0; list-style: none; display: grid; gap: var(--s1);}
.p2-chn__out [data-ok="true"] { color: color-mix(in srgb, var(--ok) 70%, var(--n9));}
.p2-chn__out [data-ok="false"] { color: color-mix(in srgb, var(--warn) 80%, var(--n9));}
@media (min-width: 900px) {
  .lg-p2 .p2-chn { grid-template-columns: var(--s7) minmax(0, 1fr) auto; align-items: center; padding: var(--s4) var(--s4);}
  .p2-chn__ic { width: var(--s7); height: var(--s7); border-radius: var(--r2);}
  .p2-chn__acts { grid-column: 3; grid-row: 1 / span 2; margin: 0; flex-wrap: nowrap;}
  .p2-chn__acts .ds-btn { min-width: calc(var(--s7) * 2);}
  .p2-chn__out { grid-column: 2 / -1;}
  .lg-p2 .p2-chn + .p2-chn::before { left: calc(var(--s7) * 1.75);}
}
.p2-note--info { background: color-mix(in srgb, var(--accent) 10%, transparent);}

/* reduced motion: no pulses, no shimmer, no press scaling */
@media (prefers-reduced-motion: reduce) {
  .p2-skel i, [data-step="now"] > .p2-step-dot::after, .lg-p2 .thumb-state[data-state="drawing"] .ss-badge::before, .p2-card .lib-made[data-state="drawing"]::before { animation: none;}
  .p2-card .lib-thumb, .p2-piece__img { transition: none;}
}

/* ======================================================================== R1 fixes (first render pass) */
.p2-pc-only { display: none !important;}
@media (min-width: 900px) { .p2-pc-only { display: inline-flex !important;} }
/* the brand head on a phone: avatar + name on one line, the + capsule trailing */
@media (max-width: 899px) {
  .page-brand .p2-head { flex-wrap: nowrap; align-items: center;}
  .page-brand .p2-brandline { flex: 1 1 0;}
  .page-brand .p2-brandline .av { width: var(--s7); height: var(--s7); border-radius: var(--r2); font-size: var(--fs-title);}
  .page-brand .p2-head .lg-largetitle { font-size: var(--fs-display); line-height: normal;}
}
/* production rows: the state line wraps under the badge when narrow; landed pieces as small tokens */
.p2-live__top { flex-wrap: wrap; row-gap: var(--hair2);}
.p2-live__line { flex: 1 1 calc(var(--s7) * 3.12);}
.p2-live__sub { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);}
.p2-pms { display: inline-flex; flex-wrap: wrap; gap: var(--s1);}
.p2-pm { display: inline-flex; align-items: center; gap: var(--hair2); height: var(--s4); padding: 0 var(--s2); border-radius: var(--r1); background: var(--n2); color: var(--n5);
  font: var(--t-body);}
.p2-pm.is-ready { background: color-mix(in srgb, var(--ok) 16%, transparent); color: color-mix(in srgb, var(--ok) 72%, var(--n9));}
.p2-pm__ic { width: var(--s3); height: var(--s3); stroke-width: 3;}
.p2-live__thumb img { opacity: .35;}
.p2-home .p2-lives { display: block;}
.p2-home .p2-lives .p2-live + .p2-live::before { display: block;}
.p2-home .p2-lives .p2-live { box-shadow: none !important;}
/* card meta: one line (the id first, never wrapped onto a lone dot) */
.p2-card .parts { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.p2-card .parts span { display: inline;}
.p2-grid.is-selecting .p2-new { display: none;}
/* the 소재 sheet: the whole picture, never cropped */
.det .det-media img, .det .det-media video { display: block; max-width: 100%; max-height: 52dvh; width: auto; height: auto;}
/* 채널 연결 badges: Liquid Glass status colours (the app's .chn-chip fills off) */
.lg-p2 .p2-chn .chn-chip.ds-badge { height: var(--s5); padding: 0 var(--s2);}
.lg-p2 .p2-chn .chn-chip.ds-badge::before { display: block;}

/* page head: the title and the trailing actions share the first line; the subtitle runs full width under them */
.p2-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3);}
.p2-head > .p2-head__title { display: contents;}
.p2-head > .p2-head__title > .lg-largetitle, .p2-head > .p2-brandline { grid-column: 1; grid-row: 1;}
.p2-head > .p2-head__title > .p2-head__sub, .p2-head > .p2-head__title > .lead { grid-column: 1 / -1; grid-row: 2; margin-top: var(--hair2);}
.p2-head > .p2-head__acts { grid-column: 2; grid-row: 1; align-self: center;}
@media (min-width: 900px) { .p2-head > .p2-head__acts { align-self: end; margin-bottom: var(--s1);} }
.p2-head__sub .p2-inline { --lg-btn-h: var(--s6); display: inline-flex; padding: 0 var(--hair2); vertical-align: baseline; font-size: inherit;}
@media (max-width: 899px) { .p2-head__sub .p2-inline { --lg-btn-h: var(--s7);} }
/* 채널 연결: one grouped list on phones and tablets (the app's .chn-rows grid of columns off); from 1024 px a 2 × 2 grid of cards (T129, below) */
.lg-p2 .chn-rows.p2-chns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;}
.lg-p2 .p2-chn { min-width: 0; margin: 0;}
/* a 게시물 carousel in the sheet (js/slides.js): the box opens up so the ‹ n / N › row is never clipped (styles.css has-slides) */
.det .det-media.has-slides { max-height: none; overflow: visible; background: none; box-shadow: none; display: block; place-items: normal;}
.det .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(--r3); background: var(--n2);}
.det .sl-nav { min-height: var(--s7);}
/* the form chips on the 만드는 중 rows (owner T119: 이미지 · 캐러셀 · 영상 · 글; A1d facets + form_facets) */
.p2-formchips { gap: var(--s2); margin: var(--hair2) 0 var(--hair2);}
.p2-live-none { margin: 0;}

/* T129 PC pass (root 22:27): from 1024 px the 만드는 중 rows are cards side by side (two across from ~1000 px of content) and the
   channels a 2 × 2 grid of cards — each its icon, name with its state, lines, and the actions under them — never one phone row
   stretched across 1144 px with the state chip and the buttons parked at the far end */
@media (min-width: 1024px) {
  .p2-lives { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--s7) * 9.17)), 1fr)); gap: var(--s3); background: none; border-radius: 0; overflow: visible;}
  .p2-lives > .p2-live { border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
  .p2-lives > .ds-row + .ds-row::before { content: none;}
  .lg-p2 .chn-rows.p2-chns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); background: none; border-radius: 0; box-shadow: none; overflow: visible;}
  .lg-p2 .p2-chn { grid-template-columns: var(--s7) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; align-items: start; padding: var(--s4);
    border-radius: var(--r3); background: var(--n0); box-shadow: var(--e2);}
  .lg-p2 .p2-chn + .p2-chn::before { content: none;}
  .p2-chn__ic { grid-row: 1;}
  .p2-chn .chn-head { justify-content: flex-start;}
  .p2-chn__acts { grid-column: 2; grid-row: 2; margin: var(--s3) 0 0;}
  .p2-chn__out { grid-column: 2; grid-row: 3;}
}

/* UX-B4 블레브 (A9g w49): a strength is title · line · count — on a phone the line goes under the title (a sentence-long title wraps) */
.p2-strengths b { min-width: 0;}
@media (max-width: 599px) { .p2-strengths li { grid-template-columns: minmax(0, 1fr) auto;} .p2-strengths span { grid-column: 1 / -1;} }
/* owner T798 row 21: a stopped pick / a not-started row is still — no indeterminate run, no sheen */
.p2-progress--still > i { width: 0; animation: none;}
.p2-progress--still > i::after { animation: none; display: none;}