/* T545 2c: base.css (was static/lg/lg.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). */
@property --lg-lens-x { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
@property --lg-lens-w { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
:root { --lg-pad: var(--s3); --lg-r-out: var(--r3); --lg-spec-size: calc(var(--s7) * 2.92);}
/* CONTTO NEXT · Liquid Glass components (A14-lg R1, 2026-10-16)
 * Needs lg-tokens.css first. Optional: lg.js (pointer/scroll highlight, refraction in Chromium, adaptive tone,
 * tab bar minimise, segmented lens, sheet, toast, morph). Every class is prefixed lg- so it can live next to
 * web/styles.css during the migration (docs/LIQUID-GLASS-MIGRATION.md).
 *
 * Layer rule (Apple HIG): glass is for the CONTROLS layer that floats over content: bars, tab bar, buttons and
 * chips that float, sheets, HUDs, toasts. Content (cards, lists, pictures, text) stays opaque. Never put glass on
 * glass: inside a glass container use the --onglass / --plain variants, which are plain fills.
 */

/* ======================================================================== base */
.lg-page {
  margin: 0;
  min-height: 100dvh;
  background: var(--n1);
  color: var(--n9);
  font-family: var(--font);
  font-size: var(--fs-title);
  line-height: var(--s5);
  letter-spacing: var(--track-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;}
.lg-page *, .lg-page *::before, .lg-page *::after { box-sizing: border-box;}
/* iOS Safari tints its own toolbar from the html/body background: give it the page colour */
:root:has(> body.lg-page) { background: var(--n1);}

/* type roles (iOS text styles) */
.lg-t-large-title { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight);}
.lg-t-title1 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight);}
.lg-t-title2 { font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight);}
.lg-t-title3 { font: var(--t-body); letter-spacing: var(--track-tight);}
.lg-t-headline { font: var(--t-body);}
.lg-t-body { font: var(--t-body);}
.lg-t-callout { font: var(--t-body);}
.lg-t-subhead { font: var(--t-body);}
.lg-t-footnote { font: var(--t-body);}
.lg-t-caption1 { font: var(--t-body);}
.lg-t-caption2 { font: var(--t-body);}
.lg-t-2 { color: var(--n5);}
.lg-t-3 { color: var(--n5);}
.lg-t-num { font-variant-numeric: tabular-nums;}

/* ======================================================================== glass material */
/* One material for every floating control. :where() keeps it at zero specificity so modifiers win. */
:where(.lg-glass, .lg-accessory, .lg-hud, .lg-menu, .lg-stepcap) {
  position: relative;
  isolation: isolate;
  color: var(--n9);
  background: var(--n0);
  box-shadow: var(--e1), 0 0 0 var(--hair) var(--n3);}
/* bigger glass behaves like thicker glass (HIG): more diffusion and a more opaque body */

/* lensing: lg.js sets data-lg-rf (and the url) only after it has confirmed Chromium; WebKit would drop the whole
   filter chain for a url(), Firefox cannot draw it, so the attribute never reaches them */

/* rim: a 1px specular edge, brightest where it faces the light (--lg-light-angle, moved by lg.js) */
:where(.lg-glass, .lg-accessory, .lg-hud, .lg-menu, .lg-stepcap)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--hair);
  pointer-events: none;
  background: conic-gradient(from initial,
    transparent, transparent 18%, transparent 32%, transparent 50%,
    transparent 68%, transparent 82%, transparent);
  -webkit-mask: linear-gradient(var(--n9) 0 0) content-box, linear-gradient(var(--n9) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--n9) 0 0) content-box exclude, linear-gradient(var(--n9) 0 0);}
/* sheen: a soft highlight under the pointer / finger (lg.js sets --lg-px/--lg-py), else light from above */
:where(.lg-glass, .lg-accessory, .lg-hud, .lg-menu, .lg-stepcap)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(var(--lg-spec-size) circle at 30% -30%, transparent, transparent 72%);
  opacity: var(--lg-spec-o, .6);
  transition: opacity var(--d-base) linear;}

/* clear: media-rich backgrounds only, bold bright content on it; pair with a .lg-dim layer on the media */
.lg-clear, .lg-bar--clear .ds-group, .lg-tabbar--clear {
  --lg-glass-fill: transparent;
  --lg-label: var(--n0);
  --lg-label-2: color-mix(in srgb, var(--n0) 78%, transparent);
  color: var(--n9);
  text-shadow: var(--e1);}
/* tinted (prominent): the tint coloured into the glass; brand colour lives here only */
.lg-tinted {
  --lg-glass-fill: color-mix(in srgb, var(--accent) 90%, transparent);
  --lg-label: var(--accent-ink);
  --lg-spec: color-mix(in srgb, var(--n0) 50%, transparent);
  color: var(--accent-ink);}

/* interactive: grows a little and lights up from the touch point (Apple: glass "responds to touch").
   The scale runs through the registered --lg-s, not a transform transition: WebKit drops backdrop blur on an
   element whose transform/opacity is animating (WebKit 219729) but not when a custom property animates */
@property --lg-s { syntax: "<number>"; inherits: false; initial-value: 1;}
.lg-interactive, .lg-accessory {
  scale: var(--lg-s);
  transition: --lg-s var(--d-base) var(--ease), background-color var(--d-base) linear,
              color var(--d-base) linear, box-shadow var(--d-base) linear, opacity var(--d-base) linear;}
.lg-interactive:active, .lg-interactive.is-pressed, .lg-accessory:active {
  --lg-s: 1.04;
  --lg-spec: transparent;
  --lg-spec-o: 1;
  --lg-spec-size: calc(var(--s7) * 4.58);}
@media (hover: hover) and (pointer: fine) {
  .lg-interactive:hover, .lg-accessory:hover { --lg-spec-o: .95;}
}
:where(.lg-toggle input):focus-visible {
  outline: var(--hair2) solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: var(--hair2);}

/* plain + on-glass: for things INSIDE a glass container (no second layer of glass) */
.lg-plain{
  box-shadow: none;}
.lg-plain::before{ display: none;}
.lg-plain::after{ display: none;}

/* media dimming for clear glass (the content gets darker, not the glass) */
.lg-dim { position: relative;}
.lg-dim::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to bottom, var(--scrim), transparent 28%, transparent 62%, var(--scrim));}

/* ======================================================================== buttons */

/* explicit size: a % height on an svg inside an auto-height button falls back to the 150 px svg default */

/* primary = Apple's glassProminent, tinted with the brand yellow, ink label */

/* secondary = regular glass (the default look of .lg-btn) */

/* destructive: red label on glass; with --primary it becomes a red prominent capsule */

/* plain: inside a glass group (bars, sheets): no own glass, a fill shows on press */

/* on-glass: a visible but flat capsule inside a glass container (sheet close / secondary) */

/* text: a link-style action in content (no capsule) */

/* activity indicator */
.lg-spinner {
  --lg-sp-size: var(--s4);
  display: inline-block;
  width: var(--lg-sp-size);
  height: var(--lg-sp-size);
  flex: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, currentColor 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--s1)), var(--n9) calc(100% - var(--hair2)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--s1)), var(--n9) calc(100% - var(--hair2)));
  animation: lg-spin .8s linear infinite;
  opacity: .8;}
@keyframes lg-spin { to { transform: rotate(1turn);} }

/* ======================================================================== chips + badges */

/* a chip on content (filters above a list): a plain fill, glass only when it floats in a bar */

/* status badge: the 7 status names (docs/GLOSSARY-UX-20260924.md); content layer, never glass */

          /* 만드는 중 · 생산 중 */

          /* 골라 주세요 */
         /* 확인해 주세요 */
          /* 올릴 준비 완료 */
         /* 올리는 중 */

          /* 올림 */
           /* 멈춤 (이유 보기) */
@keyframes lg-pulse { 50% { opacity: .35; transform: scale(.8);} }

/* ======================================================================== segmented control */

/* the lens: one pill that slides to the selected item (lg.js); while dragged it turns into clear glass */

[data-lg-theme="dark"] .ds-seg__lens { background: color-mix(in srgb, var(--n0) 20%, transparent);}

/* no JS: the selected item paints its own pill */

/* ======================================================================== bars (top / bottom) */
/* iOS 26: the bar itself has no slab; its items sit in floating glass groups over a scroll-edge effect */
.lg-bar {
  position: sticky;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: calc(var(--s7) + var(--s3));
  padding: var(--s1) var(--s4);
  pointer-events: none;}
.lg-bar > * { pointer-events: auto;}
.lg-bar--top { top: 0; padding-top: calc(env(safe-area-inset-top, 0) + var(--s1));}
.lg-bar--bottom { bottom: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0) + var(--s2));}
.lg-bar--fixed { position: fixed; left: 0; right: 0;}
.lg-bar--fixed.lg-bar--top { top: 0;}
.lg-bar--fixed.lg-bar--bottom { bottom: 0;}
.lg-bar__title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font: var(--t-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;}
.lg-bar__title small { display: block; font: var(--t-body); color: var(--n5);}
.lg-bar__spacer { flex: 1;}
/* a group: several items share one capsule of glass */

.lg-bar__group--icon { width: var(--s7); justify-content: center; padding: 0;}
.lg-bar__sep { width: var(--hair); align-self: stretch; margin: var(--s2) var(--hair2); background: var(--n3);}
/* a bottom action bar: the one primary action of a fixed screen (T119 shell), full width capsule(s) */
.lg-bar--actions { gap: var(--s2);}
.lg-bar--actions > .ds-btn { flex: 1;}
.lg-bar--actions > .ds-btn.is-icon { flex: none;}
/* slab: one full-width glass bar (desktop web navigation, like apple.com's nav) */
.lg-bar--slab {
  pointer-events: auto;
  background: var(--n0);
  box-shadow: var(--e1);}
/* the large title that lives in the content under a top bar */
.lg-largetitle { margin: var(--s1) 0 var(--s2); font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight);}

/* ======================================================================== scroll edge effect */
/* soft: content fades and blurs progressively under a bar (layers of blur, each masked); hard: a crisp edge */
.lg-edge {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;
  height: calc(var(--s7) * 1.5);
  pointer-events: none;}
.lg-edge--top { top: 0; height: calc(calc(var(--s7) * 1.5) + env(safe-area-inset-top, 0)); background: linear-gradient(to bottom, color-mix(in srgb, var(--n1) 82%, transparent), transparent);}
.lg-edge--bottom { bottom: 0; height: calc(calc(var(--s7) * 1.5) + var(--s5) + env(safe-area-inset-bottom, 0)); background: linear-gradient(to top, color-mix(in srgb, var(--n1) 82%, transparent), transparent);}
.lg-edge--sticky { position: sticky;}
.lg-edge > i { position: absolute; inset: 0;}
.lg-edge--top > i:nth-child(1) { -webkit-mask: linear-gradient(to bottom, var(--n9) 30%, transparent); mask: linear-gradient(to bottom, var(--n9) 30%, transparent);}
.lg-edge--top > i:nth-child(2) { -webkit-mask: linear-gradient(to bottom, var(--n9) 20%, transparent 66%); mask: linear-gradient(to bottom, var(--n9) 20%, transparent 66%);}
.lg-edge--top > i:nth-child(3) { -webkit-mask: linear-gradient(to bottom, var(--n9) 10%, transparent 40%); mask: linear-gradient(to bottom, var(--n9) 10%, transparent 40%);}
.lg-edge--bottom > i:nth-child(1) { -webkit-mask: linear-gradient(to top, var(--n9) 30%, transparent); mask: linear-gradient(to top, var(--n9) 30%, transparent);}
.lg-edge--bottom > i:nth-child(2) { -webkit-mask: linear-gradient(to top, var(--n9) 20%, transparent 66%); mask: linear-gradient(to top, var(--n9) 20%, transparent 66%);}
.lg-edge--bottom > i:nth-child(3) { -webkit-mask: linear-gradient(to top, var(--n9) 10%, transparent 40%); mask: linear-gradient(to top, var(--n9) 10%, transparent 40%);}
/* iOS 27: when content scrolls under the floating top bar a uniform toolbar band appears (lg.js adds is-scrolled) */
.lg-edge--top.lg-edge--auto { opacity: 0; transition: opacity var(--d-base) linear;}
.lg-edge--top.lg-edge--auto.is-scrolled { opacity: 1;}
.lg-edge--uniform.is-scrolled { background: var(--n0); box-shadow: var(--e1); height: calc(var(--s7) + var(--s3) + env(safe-area-inset-top, 0));}
.lg-edge--uniform.is-scrolled > i { display: none;}
.lg-edge--hard { background: var(--n0);}
.lg-edge--hard.lg-edge--top { box-shadow: var(--e1); height: calc(var(--s7) + var(--s3) + env(safe-area-inset-top, 0));}
.lg-edge--hard.lg-edge--bottom { box-shadow: var(--e1);}
.lg-edge--hard > i { display: none;}
/* the cheap alternative inside a scroll box: the content itself fades under the edges */
.lg-fade-edges { -webkit-mask: linear-gradient(to bottom, transparent, var(--n9) var(--s5), var(--n9) calc(100% - var(--s5)), transparent); mask: linear-gradient(to bottom, transparent, var(--n9) var(--s5), var(--n9) calc(100% - var(--s5)), transparent);}

/* ======================================================================== tab bar (+ bottom accessory) */

/* the selected-tab lens: tinted pill, slides between tabs with the glass spring (lg.js) */

/* bottom accessory (Apple: tabViewBottomAccessory): a capsule above the tab bar; it joins the bar's row when minimised */
.lg-accessory {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(calc(var(--tap) + var(--s5)) + var(--s2));
  height: var(--s7);
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s2) 0 var(--s3);
  border-radius: var(--pill);
  font: var(--t-body);
  text-decoration: none;
  cursor: pointer;
  transition: left var(--d-base) var(--ease), bottom var(--d-base) var(--ease),
              height var(--d-base) var(--ease), --lg-s var(--d-base) var(--ease);}
.lg-accessory__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.lg-accessory__text small { display: block; font: var(--t-body); color: var(--n5);}
/* minimised on scroll down (lg.js sets data-collapsed): only the current tab stays, as a circle */

.ds-tabdock[data-collapsed] .lg-accessory { left: calc(var(--s7) + var(--s2)); bottom: 0; height: var(--s7);}

/* embedded (previews, a phone frame inside a page): the dock sits in its positioned container */

/* desktop: the tab bar floats at the top centre (iPadOS 26) */

/* ======================================================================== cards (content) */

.lg-card__media { display: block; width: calc(100% + var(--lg-pad) * 2); margin: calc(var(--lg-pad) * -1) calc(var(--lg-pad) * -1) var(--lg-pad); border-radius: var(--lg-r-out) var(--lg-r-out) 0 0; object-fit: cover;}
.lg-card__media--inset { width: 100%; margin: 0 0 var(--s3); border-radius: max(var(--r1), calc(var(--lg-r-out) - var(--lg-pad)));}

.lg-card__foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3);}
/* card-on-glass: a card INSIDE a sheet / HUD: a plain fill, radius concentric with its container */

/* concentric helper for any child of a padded rounded container */
.lg-concentric { border-radius: max(var(--r1), calc(var(--lg-r-out) - var(--lg-pad)));}

/* ======================================================================== lists (inset grouped) */

.lg-row__progress { display: block; margin-top: var(--s1);}

/* ======================================================================== inputs */

textarea.ds-input { padding: var(--s3) var(--s4); min-height: calc(var(--s7) * 2); resize: vertical; line-height: var(--s5);}

/* glass input: a capsule that floats in a bar (search, the link box at the bottom like Safari's address bar) */

/* ======================================================================== toggle */
/* <label class="lg-toggle"><input type="checkbox" role="switch"><span class="lg-toggle__ui" aria-hidden="true"></span> 이름</label> */
.lg-toggle { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: var(--s7);}
.lg-toggle > input { position: absolute; opacity: 0; width: var(--hair); height: var(--hair); margin: 0; pointer-events: none;}
.lg-toggle__ui {
  position: relative;
  flex: none;
  width: calc(var(--s7) * 1.33);
  height: var(--s5);
  border-radius: var(--pill);
  background: var(--n2);
  transition: background-color var(--d-base) var(--ease);}
.lg-toggle__ui::before {
  content: "";
  position: absolute;
  top: var(--hair2);
  left: var(--hair2);
  width: calc(calc(var(--s7) * 1.33) * .58);
  height: calc(var(--s5) - var(--s1));
  border-radius: var(--pill);
  background: var(--n0);
  box-shadow: var(--e1), 0 0 0 var(--hair) color-mix(in srgb, var(--n9) 4%, transparent);
  transition: translate var(--d-base) var(--ease), scale var(--d-base) var(--ease),
              background-color var(--d-base) linear, box-shadow var(--d-base) linear;}
.lg-toggle > input:checked + .lg-toggle__ui { background: var(--ok);}
.lg-toggle > input:checked + .lg-toggle__ui::before { translate: calc(calc(var(--s7) * 1.33) * .42 - var(--s1)) 0;}
/* pressed: the knob lifts into a clear glass lens (iOS 26) */
.lg-toggle:active .lg-toggle__ui::before, .lg-toggle.is-pressed .lg-toggle__ui::before {
  scale: 1.32 1.45;
  background: color-mix(in srgb, var(--n0) 22%, transparent);
  box-shadow: inset 0 0 0 var(--hair) color-mix(in srgb, var(--n0) 85%, transparent), var(--e1), var(--e2);}
.lg-toggle > input:focus-visible + .lg-toggle__ui { outline: var(--hair2) solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: var(--hair2);}
.lg-toggle > input:disabled + .lg-toggle__ui { opacity: .45;}

/* ======================================================================== sheet */
/* <dialog class="lg-sheet" data-detent="medium|large"> … </dialog>; lg.js opens it with LG.sheet.open(el) */

/* motion through registered properties (see --lg-s): the sheet keeps its blur while it slides in */
@property --lg-sy { syntax: "<length-percentage>"; inherits: false; initial-value: 0;}
@property --lg-so { syntax: "<number>"; inherits: false; initial-value: 1;}

@keyframes lg-sheet-in { from { --lg-sy: calc(100% + var(--s5));} }
@keyframes lg-sheet-out { to { --lg-sy: calc(100% + var(--s5));} }

/* desktop: a centred form sheet */
@media (min-width: 768px) {

  @keyframes lg-sheet-in { from { --lg-sy: var(--s5); --lg-so: 0;} }
  @keyframes lg-sheet-out { to { --lg-sy: var(--s4); --lg-so: 0;} }

}

/* menu (a button morphs into it; lg.js LG.morph) */
.lg-menu { display: grid; min-width: calc(var(--s7) * 4.58); padding: var(--s1); border-radius: var(--r3); background: var(--n0);}
.lg-menu > button, .lg-menu > a { display: flex; align-items: center; gap: var(--s2); min-height: var(--s7); padding: 0 var(--s3); border: 0; border-radius: var(--r2); background: none; color: inherit; text-align: left; font: var(--t-body); cursor: pointer; text-decoration: none;}
.lg-menu > button:active, .lg-menu > a:active { background: var(--n2);}
.lg-menu > hr { border: 0; height: var(--hair); margin: var(--s1) var(--s3); background: var(--n3);}

/* ======================================================================== progress + HUD */
.lg-progress { --lg-p: 0; position: relative; display: block; height: var(--s1); border-radius: var(--r1); background: var(--n2); overflow: hidden;}
.lg-progress > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--lg-p) * 1%); border-radius: inherit; background: var(--accent); transition: width var(--d-base) var(--ease);}
.lg-progress > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--n0) 55%, transparent), transparent); translate: -100% 0; animation: lg-sheen 1.8s ease-in-out infinite;}
.lg-progress--indeterminate > i { width: 38%; animation: lg-indet 1.4s ease-in-out infinite;}
@keyframes lg-sheen { to { translate: 100% 0;} }
@keyframes lg-indet { from { translate: -100% 0;} to { translate: 270% 0;} }
.lg-ring { --lg-p: 0; --lg-ring-size: var(--s6); --lg-ring-w: var(--s1); position: relative; flex: none; width: var(--lg-ring-size); height: var(--lg-ring-size); border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--lg-p) * 1%), var(--n2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--lg-ring-w)), var(--n9) calc(100% - var(--lg-ring-w) + var(--hair)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--lg-ring-w)), var(--n9) calc(100% - var(--lg-ring-w) + var(--hair)));
  transition: --lg-p var(--d-base) var(--ease);}
@property --lg-p { syntax: "<number>"; inherits: true; initial-value: 0;}
.lg-hud {
  --lg-r-out: var(--r3);
  --lg-pad: var(--s4);
  display: grid;
  gap: var(--s2);
  padding: var(--lg-pad);
  border-radius: var(--r3);}
.lg-hud__row { display: flex; align-items: center; gap: var(--s3);}
.lg-hud__title { flex: 1; min-width: 0; font: var(--t-body);}
.lg-hud__title small { display: block; font: var(--t-body); color: var(--n5);}
.lg-hud__eta { flex: none; font: var(--t-body); color: var(--n5); font-variant-numeric: tabular-nums;}
.lg-hud__steps { display: flex; gap: var(--s1); margin: 0; padding: 0; list-style: none;}
.lg-hud__steps > li { flex: 1; height: var(--s1); border-radius: var(--r1); background: var(--n2);}
.lg-hud__steps > li.is-done { background: var(--accent);}
.lg-hud__steps > li.is-now { background: linear-gradient(90deg, var(--accent) 50%, var(--n2) 50%); background-size: 200% 100%; animation: lg-step 1.6s ease-in-out infinite alternate;}
@keyframes lg-step { from { background-position: 100% 0;} to { background-position: 30% 0;} }
/* compact: a capsule like a Live Activity (one line, ring + label + time) */
.lg-hud--capsule { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s4) var(--s1) var(--s2); border-radius: var(--pill);}
.lg-hud--capsule .lg-ring { --lg-ring-size: var(--s6); --lg-ring-w: var(--s1);}

/* ======================================================================== toast */

/* ======================================================================== motion utilities */
.lg-spring-smooth { transition-duration: var(--d-base); transition-timing-function: var(--ease);}
.lg-spring-snappy { transition-duration: var(--d-base); transition-timing-function: var(--ease);}
.lg-spring-bouncy { transition-duration: var(--d-base); transition-timing-function: var(--ease);}
.lg-spring-glass { transition-duration: var(--d-base); transition-timing-function: var(--ease);}
/* materialize: glass appears by bending light in (blur + scale), not by a plain fade */
.lg-materialize { animation: lg-materialize var(--d-base) var(--ease) both;}
.lg-dematerialize { animation: lg-dematerialize 240ms var(--ease) both;}
@property --lg-m { syntax: "<number>"; inherits: false; initial-value: 1;}
.lg-materialize, .lg-dematerialize{ opacity: var(--lg-m); scale: calc(.86 + .14 * var(--lg-m));}
@keyframes lg-materialize { from { --lg-m: 0;} }
@keyframes lg-dematerialize { to { --lg-m: 0;} }
/* morph (View Transitions): lg.js names the two states and lets the browser interpolate size + position */
:root.lg-morphing::view-transition-group(*) { animation-duration: var(--d-base); animation-timing-function: var(--ease);}
:root.lg-morphing::view-transition-old(*), :root.lg-morphing::view-transition-new(*) { animation-duration: 260ms; animation-timing-function: linear; height: 100%; object-fit: cover;}
:root.lg-morphing::view-transition-old(root), :root.lg-morphing::view-transition-new(root) { animation: none;}

/* ======================================================================== layouts: two per screen (owner T129) */
/* Never one stretched layout. Mobile (< 768 px) = the T119 fixed screen: a header row, ONE scroller, the action row in
 * the flow (never position:fixed: shell_check gates it). PC (>= 768 px) = a desktop composition: floating glass sidebar
 * or toolbar, wide content up to --lg-pc-max, a side column, reading-distance type (titles larger, body 17 px with a
 * measure). Same DOM for both; the grid areas change. */
:root { --lg-measure: 64ch; --lg-hook-lines: 3;}
.lg-pc-only { display: none !important;}
@media (min-width: 768px) { .lg-pc-only { display: revert !important;} .lg-mobile-only { display: none !important;} }

/* task screens (wizard steps, make, offers): fixed on both sizes */
.lg-fixed { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100svh; overflow: hidden;}
.lg-fixed > .lg-bar { position: static;}
.lg-fixed > .lg-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s1) var(--s4) var(--s3);}
.lg-fixed > .lg-bar--bottom { padding-top: var(--s2);}
/* the bottom row stays in the flow; the content fades under it instead of a fixed overlay */
.lg-fixed > .lg-main.lg-fade-bottom { -webkit-mask: linear-gradient(to bottom, var(--n9) calc(100% - var(--s5)), transparent); mask: linear-gradient(to bottom, var(--n9) calc(100% - var(--s5)), transparent);}
.lg-head { display: grid; gap: var(--s1); margin: var(--s1) 0 var(--s3);}
.lg-head > h1, .lg-head > h2 { margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight);}
.lg-head > p { margin: 0; color: var(--n5); font: var(--t-body);}
/* step capsule in the top bar: "3/6 방향 고르기" with a progress line */
.lg-stepcap { display: inline-flex; align-items: center; gap: var(--s2); height: var(--s7); padding: 0 var(--s3); border-radius: var(--pill); font: var(--t-body);}
.lg-stepcap b { font-variant-numeric: tabular-nums;}
.lg-stepcap i { position: relative; width: var(--s7); height: var(--s1); border-radius: var(--r1); background: var(--n2); overflow: hidden;}
.lg-stepcap i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--n9); border-radius: inherit;}

@media (min-width: 768px) {
  .lg-fixed > .lg-main { padding: var(--s2) var(--s4) var(--s4);}
  .lg-fixed > .lg-main > .lg-wrap, .lg-wrap { width: 100%; max-width: calc(var(--s7) * 24.58); margin: 0 auto;}
  .lg-head { margin: var(--s2) 0 var(--s5); gap: var(--s1);}
  .lg-head > h1, .lg-head > h2 { font-size: var(--fs-display); line-height: var(--s6);}
  .lg-head > p { font-size: var(--fs-title); line-height: var(--s5); max-width: 64ch;}
  /* PC action row: right-aligned capsules, the primary last (macOS / iPadOS order) */
  .lg-fixed > .lg-bar--actions { justify-content: flex-end; padding-bottom: var(--s4);}
  .lg-fixed > .lg-bar--actions > .ds-btn { flex: none; min-width: calc(var(--s7) * 3.33);}
}

/* page screens (소재 목록, 브랜드 홈, 설정, 요금제): the window scrolls; mobile has the floating tab bar,
 * PC a floating glass sidebar (macOS 26 / iPadOS 26) */
.lg-shell { min-height: 100dvh;}
.lg-shell > .lg-content { padding: 0 var(--s4) calc(calc(var(--tap) + var(--s5)) + calc(var(--s7) * 2) + env(safe-area-inset-bottom, 0));}

@media (min-width: 768px) {
  .lg-shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);}
  .lg-shell > .lg-content { padding: 0 var(--s4) var(--s7); min-width: 0;}
  .lg-shell > .lg-content > * { max-width: calc(var(--s7) * 24.58); margin-left: auto; margin-right: auto;}
  .lg-shell .ds-tabdock { display: none;}
  /* macOS / iPadOS 27: the sidebar reaches the window edges and still refracts what is under it;
     .lg-sidebar--float keeps the 26 look (a panel inset 10 px from the edges) */

}

.ds-rail__brand .lg-av { width: var(--s6); height: var(--s6); border-radius: var(--r1); object-fit: cover; flex: none;}

/* the page title row: large title + trailing glass groups; on PC the bar sits in the content column */
.lg-pagehead { display: flex; align-items: flex-end; gap: var(--s3); padding: calc(env(safe-area-inset-top, 0) + var(--s2)) 0 var(--s3);}
.lg-pagehead > .lg-largetitle { flex: 1; margin: 0;}
@media (min-width: 768px) { .lg-pagehead { padding-top: var(--s5); padding-bottom: var(--s4);} }

/* responsive grids */
.lg-cols { display: grid; gap: var(--s4);}
@media (min-width: 768px) {
  .lg-cols--side { grid-template-columns: minmax(0, 1fr) calc(var(--s7) * 7.5); gap: var(--s5); align-items: start;}
  .lg-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4);}
  .lg-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4);}
}
.lg-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (min-width: 768px) { .lg-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--s7) * 4.17), 1fr)); gap: var(--s4);} }

/* direction card (방향 고르기, owner T128): the hook leads, capped at --lg-hook-lines; PC = full content width,
 * one direction per row with the pain + scene beside the hook; mobile = stacked, compact */
.lg-dir {
  --lg-r-out: var(--r3); --lg-pad: var(--s4);
  display: grid; gap: var(--s2); width: 100%; padding: var(--lg-pad);
  border: 0; border-radius: var(--lg-r-out); background: var(--n0); color: var(--n9);
  box-shadow: var(--e2); text-align: left; font: inherit; cursor: pointer;
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) linear;}
.lg-dir:active { transform: scale(.985);}
.lg-dir[aria-pressed="true"], .lg-dir.is-picked { box-shadow: 0 0 0 var(--hair2) var(--accent), var(--e2);}
.lg-dir__top { display: flex; align-items: center; gap: var(--s2);}
.lg-dir__angle { font: var(--t-body); color: var(--n5);}
.lg-dir__hook {
  margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--track-tight);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lg-hook-lines); line-clamp: var(--lg-hook-lines); overflow: hidden;
  text-wrap: pretty; word-break: keep-all;}
.lg-dir__pain { margin: 0; font: var(--t-body); color: var(--n5);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: keep-all;}
.lg-dir__pain b { color: var(--n9); font-weight: var(--fw-bold);}
.lg-dir__more { justify-self: start;}
.lg-dir__media { display: none;}
@media (min-width: 768px) {
  .lg-dir { --lg-pad: var(--s4); --lg-hook-lines: 2; grid-template-columns: minmax(0, 1fr) minmax(calc(var(--s7) * 4.58), 32%); column-gap: var(--s5); align-items: start;}
  .lg-dir__top, .lg-dir__hook { grid-column: 1;}
  .lg-dir__hook { font-size: var(--fs-display); line-height: 1.34;}
  .lg-dir__side { grid-column: 2; grid-row: 1 / span 3; display: grid; gap: var(--s2); align-content: start; padding-left: var(--s4); border-left: var(--hair) solid var(--n3);}
  .lg-dir__pain { -webkit-line-clamp: 3;}
}
@media (min-width: 1200px) { .lg-dir { --lg-hook-lines: 2;} }

/* ======================================================================== accessibility + fallbacks */
@media (prefers-reduced-motion: reduce) {
  .lg-spinner { animation-duration: 1.6s;}
  .lg-progress > i::after, .lg-hud__steps > li.is-now { animation: none;}
  .lg-materialize{ animation-name: lg-fade-in;}
  :root.lg-morphing::view-transition-group(*) { animation-duration: 0s;}
}
[data-lg-a11y~="motion"] .lg-progress > i::after, [data-lg-a11y~="motion"] .ds-badge--accent::before { animation: none;}
@keyframes lg-fade-in { from { opacity: 0;} }
/* Reduce Transparency (Chromium only; Safari has no such media query: Increase Contrast covers it there):
   frostier glass, no lensing */

/* Increase Contrast: borders replace the rim and the sheen */
@media (prefers-contrast: more) {
  :where(.lg-glass, .lg-accessory, .lg-hud, .lg-menu, .lg-stepcap)::after { display: none;}
  .lg-t-2 { color: var(--n9);}
}
[data-lg-a11y~="contrast"] :where(.lg-glass, .lg-accessory, .lg-hud, .lg-menu, .lg-stepcap)::after { display: none;}
/* Windows High Contrast / forced colours */
@media (forced-colors: active) {
  :where(.lg-glass, .lg-accessory, .lg-hud, .lg-menu, .lg-stepcap) {
    border: var(--hair) solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none;}
  
}
@media print {
  :where(.lg-glass, .lg-accessory, .lg-hud, .lg-menu, .lg-stepcap) { background: var(--n0); box-shadow: 0 0 0 var(--hair) var(--n5);}
  .lg-edge{ display: none;}
}