/* T545 2c: p3.css (was static/lg/app/p3.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 P3 (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: A14d.
   X1 the one sheet · X2 toasts · X3 step morph · X4 sheet content chrome · X5 motion chooser + motion tile · X7 external-test row.
   The 올리기 page and its sheets carry their own files (web/publish/publish.css, web/publish/sheets.css) on the same tokens. */

/* ======================================================================== X1 the one sheet: dialog#sheet.lg-sheet.p3-sheet (js/ui.js) */
/* Phone: medium detent = glass (owner Q54 10-16 12:29: see-through at medium height YES), large = opaque to the edge; PC: a form sheet. */
#sheet.p3-sheet {
  /* the DESIGN-GUIDE tokens the sheet bodies use (P1 / P2 / P3 content), re-pointed at Liquid Glass inside the sheet */
  --surface: var(--n2);
  --line: var(--n3); --line-strong: var(--n5);
  color: var(--n9);
  font-family: var(--font);
  box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3), var(--e3);}
/* the UA gives a dialog height: fit-content; at the large detent the phone sheet reaches the bottom edge (top and bottom insets) */
@media (max-width: 767px) { #sheet.p3-sheet[data-detent="large"] { height: auto;} }
#sheet.p3-sheet[data-detent="large"] { --surface: var(--n0); --line: var(--n3);}
#sheet.p3-sheet.is-dragging { transition: none !important; animation: none;}
#sheet.p3-sheet::backdrop { background: transparent;}
#sheet.p3-sheet[data-detent="large"]::backdrop { background: var(--scrim);}
.p3-sheet .sheet-grip { flex: none; display: grid; place-items: center; height: var(--s5); cursor: grab; touch-action: none;}
.p3-sheet .sheet-grip::before { display: none;}
.p3-sheet .sheet-grip > span { width: var(--s6); height: var(--s1); border-radius: var(--r1); background: var(--n5);}
.p3-sheet .sheet-head { flex: none; display: grid; grid-template-columns: var(--s7) minmax(0, 1fr) var(--s7); align-items: center; gap: var(--s2); padding: var(--hair2) var(--s3) var(--s2);}
.p3-sheet .sheet-head h2 { margin: 0; text-align: center; font: var(--t-body);
  letter-spacing: var(--track-tight); color: var(--n9); word-break: keep-all; overflow-wrap: anywhere;}
.p3-sheet .sheet-head [data-close] { --lg-btn-h: var(--s7); width: var(--s7); height: var(--s7); color: var(--n9);}
.p3-sheet .sheet-head [data-close] svg { width: var(--s4); height: var(--s4); stroke-width: 2.2;}
.p3-sheet .sheet-end { width: var(--s7);}
.p3-sheet .sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--s4);
  padding: var(--s1) var(--s4) var(--s4); font-size: var(--fs-title); line-height: 1.45;}
#sheet.p3-sheet[data-detent="large"] .sheet-body { padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0));}
@media (min-width: 768px) {
  #sheet.p3-sheet { max-height: min(88dvh, calc(var(--s7) * 17.08));}
  .p3-sheet .sheet-grip { display: none;}
  .p3-sheet .sheet-head { padding: var(--s3) var(--s4) var(--s2);}
  .p3-sheet .sheet-body { padding: var(--s1) var(--s5) var(--s5);}
  #sheet.p3-sheet[data-detent="large"] .sheet-body { padding-bottom: var(--s5);}
  #sheet.p3-sheet::backdrop, #sheet.p3-sheet[data-detent="large"]::backdrop { background: var(--scrim);}
}
/* X4 sheet content chrome: the shared controls inside any sheet body take the on-glass look (markup stays its owner's) */

.p3-sheet .sheet-body .meta { color: var(--n5);}

.p3-sheet .sheet-body input:not([type=checkbox]):not([type=radio]), .p3-sheet .sheet-body textarea, .p3-sheet .sheet-body select {
  border-color: transparent; background-color: var(--n2); border-radius: var(--r2); color: var(--n9);}
.p3-sheet .sheet-body input:focus-visible, .p3-sheet .sheet-body textarea:focus-visible { outline: var(--hair2) solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: var(--hair);}
/* fields in a sheet (문구만 고치기 .copy-edit, persona forms): label over a filled field, the field's own problem under it */
.p3-sheet .copy-edit { display: grid; gap: var(--s3);}
.p3-sheet .field2 { display: grid; gap: var(--s1);}
.p3-sheet .field2 .lbl { margin: 0 var(--s1); font: var(--t-body); color: var(--n5);}
.p3-sheet .sheet-body textarea { display: block; width: 100%; min-height: var(--s7); padding: var(--s3) var(--s3); resize: vertical; font: var(--t-title); word-break: keep-all;}
.p3-sheet .field-error { margin: 0 var(--s1); color: var(--danger); font: var(--t-body);}
.p3-sheet .row-actions { display: flex; flex-wrap: wrap; gap: var(--s2);}
@media (max-width: 767px) { .p3-sheet .copy-edit .row-actions .ds-btn { flex: 1 1 auto; height: var(--s7);} }
/* a bottom sheet covers the app's own bottom row: the row steps back (it would show through the glass as a second button) */
@media (max-width: 767px) { body:has(> #sheet.p3-sheet[open]) > .bar { opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease);} }
.p3-sheet .sw-row { border-radius: var(--r2);}
@media (hover: hover) { .p3-sheet .sw-row:hover { background: var(--n2);} }
.p3-sheet .sw-search input { border: 0;}
.p3-sheet .evi { border-top-color: var(--n3);}

/* ======================================================================== X2 toasts: glass capsules at the top (Apple banner place) */
/* #toasts is the one stack (ui.js toast, account/library.js undo toast); ui.js lifts it into the top layer while a sheet is open */

#toasts[popover] { position: fixed; inset: calc(env(safe-area-inset-top, 0) + var(--s2)) 0 auto 0; width: auto; height: auto; margin: 0; border: 0; padding: 0 var(--s4);
  background: transparent; color: inherit; overflow: visible;}
#toasts[popover]:popover-open { display: grid; justify-items: center; gap: var(--s2);}

.ds-toasts > .ds-toast.out { animation: lg-dematerialize 240ms var(--ease) both;}

@media (prefers-reduced-motion: reduce) { .ds-toasts > .ds-toast.out { animation: none;} }

/* ======================================================================== X3 step transitions: the slide rides the morph spring */
:root.p3-step::view-transition-old(root), :root.p3-step::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease);}
:root.p3-step::view-transition-group(top), :root.p3-step::view-transition-group(bar) { animation-duration: var(--d-base); animation-timing-function: var(--ease);}

/* ======================================================================== X7 the external-test strip (server/contto/ops/external.py) */
/* injected right after <body>: on the fixed wizard grid (body.fx) it gets its own row above the header, so nothing scrolls or hides */
body.fx:has(> #externalTest) { grid-template-rows: auto auto minmax(0, 1fr) auto;}
body.fx > #externalTest { grid-row: 1; position: relative;}
body.fx:has(> #externalTest) > header.top { grid-row: 2;}
body.fx:has(> #externalTest) > main { grid-row: 3;}
body.fx:has(> #externalTest) > .bar { grid-row: 4;}

/* ======================================================================== X5 motion chooser (js/mochoice.js .p3-mc) */
.p3-mc { --mc-r: var(--r2); gap: var(--s2); font-family: var(--font);}
.p3-mc .mc-h { margin: var(--s1) var(--s1) 0; font: var(--t-body); color: var(--n5);}
.p3-mc .mc-modes { gap: var(--s2);}
.p3-mc .mc-mode, .p3-mc .mc-dir, .p3-mc .mc-ratio {
  position: relative; display: grid; gap: var(--s1); align-content: start; min-height: var(--s7); padding: var(--s2) var(--s2) var(--s3); text-align: left;
  border: 0; border-radius: var(--mc-r); background: var(--n0); color: var(--n9); font: inherit; cursor: pointer;
  /* literal shadows: --lg-shadow-card is `none` in dark, and a list holding it would drop the whole box-shadow */
  box-shadow: 0 0 0 var(--hair) var(--n3), var(--e1), var(--e2);
  scale: var(--lg-s); transition: --lg-s var(--d-base) var(--ease), box-shadow var(--d-base) linear;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.p3-mc .mc-mode:active, .p3-mc .mc-dir:active, .p3-mc .mc-ratio:active { --lg-s: .97;}
.p3-mc .mc-mode b, .p3-mc .mc-dir b, .p3-mc .mc-ratio b { padding: 0 var(--s1); font: var(--t-body);}
.p3-mc .mc-mode small, .p3-mc .mc-dir small, .p3-mc .mc-ratio small { padding: 0 var(--s1); font: var(--t-body); color: var(--n5);}
/* picked: a tint ring + a tinted check (brand yellow only as a tint, never as text) */
.p3-mc [aria-checked="true"], .p3-mc .mc-ratio[aria-pressed="true"] { outline: var(--hair2) solid var(--accent); outline-offset: 0;}
.p3-mc .mc-on { position: absolute; top: var(--s3); right: var(--s3); z-index: 2; display: none; place-items: center; width: var(--s5); height: var(--s5); border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--e1);}
.p3-mc .mc-on svg { width: var(--s4); height: var(--s4); fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;}
.p3-mc [aria-checked="true"] > .mc-on, .p3-mc .mc-ratio[aria-pressed="true"] > .mc-on { display: grid;}
@media (hover: hover) and (pointer: fine) { .p3-mc .mc-mode:hover, .p3-mc .mc-dir:hover, .p3-mc .mc-ratio:hover { border: 0; box-shadow: 0 0 0 var(--hair2) var(--n5), var(--e2);} }
.p3-mc .mc-mode:focus-visible, .p3-mc .mc-dir:focus-visible, .p3-mc .mc-ratio:focus-visible { outline: var(--hair2) solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: var(--hair2);}
/* previews: the proof strip of a finished motion of that kind, concentric with the card */
.p3-mc .mc-pv, .p3-mc .mc-dir .mc-strip, .p3-mc .mc-dirph { height: calc(var(--s7) * 1.5); border-radius: calc(var(--mc-r) - var(--r1)); background: var(--n2); overflow: hidden;}
.p3-mc .mc-dir .mc-strip { width: 100%; object-fit: cover; display: block;}
.p3-mc .mc-dirph { display: block; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--n2)), var(--n2) 70%);}
.p3-mc .mc-dirph.is-auto { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, var(--n2)), color-mix(in srgb, var(--ok) 18%, var(--n2)));}
.p3-mc .mc-ph { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); color: var(--n5);}
/* moods: a sideways row on the phone, a grid on the PC */
.p3-mc .mc-dirs { display: grid; grid-auto-flow: column; grid-auto-columns: calc(var(--s7) * 3.08); grid-template-columns: none; gap: var(--s2); overflow-x: auto; scroll-snap-type: x proximity;
  padding: var(--s1) var(--s4) var(--s2); margin: calc(-1 * var(--s1)) calc(-1 * var(--s4)) 0; scroll-padding-inline: var(--s4); scrollbar-width: none; overscroll-behavior-x: contain;}
.p3-mc .mc-dirs::-webkit-scrollbar { display: none;}
.p3-mc .mc-dir { scroll-snap-align: start;}
/* sizes: each one previews the picked kind inside a frame of that size */
.p3-mc .mc-ratios { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--s7) * 2), 1fr)); gap: var(--s2);}
.p3-mc .mc-ratio { justify-items: center; text-align: center; padding: var(--s3) var(--s2);}
.p3-mc .mc-frame { position: relative; display: block; height: calc(var(--s7) * 1.58); border-radius: var(--r1); overflow: hidden; background: linear-gradient(160deg, var(--n2), var(--n2));
  box-shadow: inset 0 0 0 var(--hair2) var(--n5);}
.p3-mc .mc-frame.r916 { aspect-ratio: 9 / 16;} .p3-mc .mc-frame.r45 { aspect-ratio: 4 / 5;} .p3-mc .mc-frame.r11 { aspect-ratio: 1;}
.p3-mc .mc-rimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.p3-mc .mc-ratio[aria-pressed="false"] .mc-frame { opacity: .55;}
.p3-mc .mc-rtx { display: grid; gap: 0;}
.p3-mc .mc-ratio .mc-on { top: var(--s2); right: var(--s2);}
/* compact (어디에 쓸까요 → 영상 방식 sheet): cards on glass, small previews */
.p3-mc.compact .mc-mode, .p3-mc.compact .mc-dir { background: var(--n2); box-shadow: none; padding: var(--s1) var(--s1) var(--s2);}
.p3-mc.compact [aria-checked="true"] { outline: var(--hair2) solid var(--accent); outline-offset: 0;}
.p3-mc.compact .mc-pv { height: var(--s7);}
.p3-mc.compact .mc-dirs { grid-auto-columns: calc(var(--s7) * 2.75);}
@media (min-width: 768px) {
  .p3-mc:not(.compact) .mc-modes { grid-template-columns: repeat(4, minmax(0, 1fr));}
  .p3-mc:not(.compact) .mc-pv { height: calc(var(--s7) * 1.83);}
  .p3-mc .mc-dirs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s7) * 3.5), 1fr)); overflow: visible; padding: var(--s1) 0 0; margin: 0;}
  .p3-mc .mc-ratios { grid-template-columns: repeat(auto-fill, calc(var(--s7) * 2.75));}
  .p3-mc .mc-frame { height: calc(var(--s7) * 2);}
}

/* ======================================================================== X5 the motion tile (js/motion.js inside #motionTile) */
.motion-tile #motionBody, .motion-tile .mo-player, .motion-tile .mo-top { display: grid; gap: var(--s3);}
.motion-tile .mo-top:empty, .motion-tile .mo-player:empty, .motion-tile .mo-foot:empty { display: none;}
.motion-tile .mo-dl { align-items: center;}
.motion-tile .mo-version { color: var(--n5); font: var(--t-body);}
.motion-tile .mo-box { position: relative; isolation: isolate; border-radius: var(--r3); background: var(--n9);}
.motion-tile .mo-box.lg-dim::after { z-index: 1; opacity: 0; transition: opacity var(--d-base) linear;}
.motion-tile .mo-box:not(.is-playing)::after, .motion-tile .mo-box:hover::after { opacity: 1;}
.motion-tile .mo-box video.motion { cursor: pointer;}
.motion-tile .mo-play { --lg-btn-h: calc(var(--s7) * 1.33); position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%;}
.motion-tile .mo-play svg { width: var(--s5); height: var(--s5);}
.motion-tile .mo-box.is-playing .mo-play { --lg-btn-h: var(--s7); left: var(--s3); top: auto; bottom: var(--s4); translate: none;}
.motion-tile .mo-box.is-playing .mo-play svg { width: var(--s4); height: var(--s4);}
.motion-tile .mo-sound { --lg-btn-h: var(--s7); position: absolute; z-index: 2; right: var(--s3); bottom: var(--s4);}
.motion-tile .mo-sound svg { width: var(--s4); height: var(--s4); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;}
.motion-tile .mo-play svg.fill path { fill: currentColor; stroke: none;}
.motion-tile .mo-pos { position: absolute; z-index: 2; left: var(--s3); right: var(--s3); bottom: var(--s1); height: var(--s1); border-radius: var(--r1); background: color-mix(in srgb, var(--n0) 28%, transparent); overflow: hidden; pointer-events: none;}
.motion-tile .mo-pos i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--n0); border-radius: inherit;}
.motion-tile .mo-wait { color: color-mix(in srgb, var(--n2) 70%, transparent); font: var(--t-body);}
/* the made sizes: a small segmented row of shapes (picked = tint) */
.motion-tile .mo-slots { gap: var(--s2);}
.motion-tile .mo-slot { border: 0; border-radius: var(--r2); background: var(--n2); color: var(--n5); min-height: calc(var(--s7) * 1.33); font-family: var(--font);}
.motion-tile .mo-slot.ready { background: var(--n0); color: var(--n5); box-shadow: 0 0 0 var(--hair) var(--n3), var(--e1);}
.motion-tile .mo-slot.on { background: color-mix(in srgb, var(--accent) 92%, transparent); color: var(--accent-ink); box-shadow: none;}
.motion-tile .mo-slot.on b, .motion-tile .mo-slot.on small { color: var(--accent-ink);}
/* making: the progress line as the LG progress (tint fill, soft track) */
.motion-tile .mo-progress .pbar { height: var(--s1); border-radius: var(--r1); background: var(--n2);}
.motion-tile .mo-progress .pbar i { background: var(--accent);}

@media (prefers-reduced-motion: reduce) { .p3-mc .mc-mode, .p3-mc .mc-dir, .p3-mc .mc-ratio { transition: none;} }