/* generated by tools/build-dist.mjs — DO NOT EDIT. 編集は src/ のアトミック分割ソースへ */
/* ============================================================
   liquid-glass.css — material + components (phase 1: colorless core)
   requires: css/tokens.css (generated) before this file.
   色・数値の由来はすべて tokens/liquid-glass.tokens.json の $description。
   このファイルに rgba/hex の直値を書かない。
   ============================================================ */

/* virtual light source — inherits:true 必須（擬似要素へ継承させる） */
@property --lg-la { syntax: "<angle>"; inherits: true; initial-value: 215deg; }
@property --lg-li { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ------------------------------------------------------------
   surface adaptation API — data-lg-surface="light|dark|media|text"
   ガラス個体または祖先に宣言。既定は dark。
   ------------------------------------------------------------ */
:root,
[data-lg-surface="dark"] {
  --lg-ink:        var(--lg-adaptive-dark-ink);
  --lg-bcomp:      var(--lg-adaptive-dark-bcomp);
  --lg-rim:        var(--lg-adaptive-dark-rim);
  --lg-face-alpha: var(--lg-adaptive-dark-face-alpha);
  --lg-clear-dim:  var(--lg-adaptive-dark-clear-dim);
  --lg-opaque-bg:  var(--lg-adaptive-dark-opaque-bg);
  --lg-opaque-ink: var(--lg-adaptive-dark-opaque-ink);
  --lg-danger:     var(--lg-adaptive-dark-danger);
}
[data-lg-surface="light"] {
  --lg-ink:        var(--lg-adaptive-light-ink);
  --lg-bcomp:      var(--lg-adaptive-light-bcomp);
  --lg-rim:        var(--lg-adaptive-light-rim);
  --lg-face-alpha: var(--lg-adaptive-light-face-alpha);
  --lg-clear-dim:  var(--lg-adaptive-light-clear-dim);
  --lg-opaque-bg:  var(--lg-adaptive-light-opaque-bg);
  --lg-opaque-ink: var(--lg-adaptive-light-opaque-ink);
  --lg-danger:     var(--lg-adaptive-light-danger);
}
[data-lg-surface="media"] {
  --lg-ink:        var(--lg-adaptive-media-ink);
  --lg-bcomp:      var(--lg-adaptive-media-bcomp);
  --lg-rim:        var(--lg-adaptive-media-rim);
  --lg-face-alpha: var(--lg-adaptive-media-face-alpha);
  --lg-clear-dim:  var(--lg-adaptive-media-clear-dim);
  --lg-opaque-bg:  var(--lg-adaptive-media-opaque-bg);
  --lg-opaque-ink: var(--lg-adaptive-media-opaque-ink);
  --lg-danger:     var(--lg-adaptive-media-danger);
}
[data-lg-surface="text"] {
  --lg-ink:        var(--lg-adaptive-text-ink);
  --lg-bcomp:      var(--lg-adaptive-text-bcomp);
  --lg-rim:        var(--lg-adaptive-text-rim);
  --lg-face-alpha: var(--lg-adaptive-text-face-alpha);
  --lg-clear-dim:  var(--lg-adaptive-text-clear-dim);
  --lg-opaque-bg:  var(--lg-adaptive-text-opaque-bg);
  --lg-opaque-ink: var(--lg-adaptive-text-opaque-ink);
  --lg-danger:     var(--lg-adaptive-text-danger);
}

/* ------------------------------------------------------------
   material — .lg-glass（既定 Regular / data-lg-variant="clear"）
   baseline（blur+saturate+bcomp）は stylesheet で常時有効 = FOUC なし。
   lens モードでは JS が inline backdrop-filter で上書きする。
   ------------------------------------------------------------ */
.lg-glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-r, var(--lg-ref-radius-lg));
  color: var(--lg-ink);
  /* --lg-face-scale は素材の厚相/薄相（regular-thick / regular-thin）用の乗数。既定 1 */
  background: color-mix(in srgb,
    var(--lg-ref-color-white)
    calc(var(--lg-face-alpha) * var(--lg-face-scale, 1) * 100%), transparent);
  -webkit-backdrop-filter:
    blur(var(--lg-material-regular-blur))
    saturate(var(--lg-material-regular-saturate))
    brightness(var(--lg-bcomp));
  backdrop-filter:
    blur(var(--lg-material-regular-blur))
    saturate(var(--lg-material-regular-saturate))
    brightness(var(--lg-bcomp));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,
      var(--lg-rim) calc(var(--lg-ref-alpha-hairline-top) * 100%), transparent),
    inset 0 0 0 1px color-mix(in srgb,
      var(--lg-rim) calc(var(--lg-ref-alpha-hairline) * 100%), transparent),
    inset 1.5px 1.5px 1px -1px var(--lg-light-key),
    inset -1.5px -1.5px 1px -1px var(--lg-light-fill),
    var(--lg-material-regular-shadow);
  transition: color var(--lg-ref-duration-fade) ease;
}
.lg-glass[data-lg-variant="clear"] {
  --lg-face-alpha: var(--lg-material-clear-face-alpha);
  /* Clear は非適応: ラベルは反転せず常に明。明 surface は ::after の 35% dim が受ける */
  color: var(--lg-material-clear-ink);
  -webkit-backdrop-filter:
    blur(var(--lg-material-clear-blur))
    saturate(var(--lg-material-clear-saturate));
  backdrop-filter:
    blur(var(--lg-material-clear-blur))
    saturate(var(--lg-material-clear-saturate));
}

/* lit rim — 光源角 --lg-la に 1:1、強度 --lg-li のみ遷移（公理4） */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: var(--lg-light-rim-width);
  pointer-events: none;
  /* prism: ハイライトは分光する（寒色端 → 白ピーク → 暖色端）。
     quiet テーマでは spec-cool/warm が白に上書きされ単色リムに縮退 */
  background: conic-gradient(from calc(var(--lg-la) - 72deg),
    transparent 0deg,
    color-mix(in srgb, var(--lg-light-rim-spec-cool)
      calc(var(--lg-light-rim-mid) * var(--lg-li) * 100%), transparent) 46deg,
    color-mix(in srgb, var(--lg-rim)
      calc(var(--lg-light-rim-peak) * var(--lg-li) * 100%), transparent) 70deg,
    color-mix(in srgb, var(--lg-light-rim-spec-warm)
      calc(var(--lg-light-rim-side) * var(--lg-li) * 100%), transparent) 96deg,
    transparent 148deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* lint: structural */
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* lint: structural */
          mask-composite: exclude;
  transition: --lg-li var(--lg-light-fade) ease;
}

/* in-pane bloom + Clear 用 dim 層（明 surface では 35% dark を自動で敷く） */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(120% 90% at
      calc(50% + 44% * cos(var(--lg-la) - 90deg))
      calc(50% + 44% * sin(var(--lg-la) - 90deg)),
    color-mix(in srgb, var(--lg-rim)
      calc(var(--lg-light-bloom) * var(--lg-li) * 100%), transparent),
    transparent 55%);
  transition: --lg-li var(--lg-light-fade) ease;
}
.lg-glass[data-lg-variant="clear"]::after {
  background-color: var(--lg-clear-dim);
}

/* ---------- 状態の光学（Prism v2）----------
   状態は色通知（ステンドグラス・badge）への「重ね掛け」として光学にも現れる。
   rest では発現しない（公理4: 光は操作への応答）。
   - primary: 最重要のガラスは最もよく光を割る（点灯強度と分光を強調）
   - error/danger・warning・success: 単色収差 — 分光が状態色1色に収束する
     （虹 = 中立、単色 = 状態がある、という信号設計） */
.lg-button--primary {
  --lg-light-hover-intensity: var(--lg-light-press-intensity);
}
.lg-glass.is-error,
.lg-field.is-error,
.lg-button--danger {
  --lg-light-rim-spec-cool: var(--lg-danger);
  --lg-light-rim-spec-warm: var(--lg-danger);
  --lg-rim: var(--lg-danger);
}
.lg-glass.is-warning,
.lg-field.is-warning,
.lg-button--warning {
  --lg-light-rim-spec-cool: var(--lg-ref-color-warning);
  --lg-light-rim-spec-warm: var(--lg-ref-color-warning);
  --lg-rim: var(--lg-ref-color-warning);
}
.lg-glass.is-success,
.lg-field.is-success,
.lg-button--success {
  --lg-light-rim-spec-cool: var(--lg-ref-color-positive);
  --lg-light-rim-spec-warm: var(--lg-ref-color-positive);
  --lg-rim: var(--lg-ref-color-positive);
}
.lg-field.is-error:focus-within {
  --lg-li: var(--lg-light-press-intensity); /* エラー入力はフォーカスで明確に赤点灯 */
}

/* lighting: hover / focus / press のみ点灯。自律周回は存在しない。
   touch では :hover が次のタップまで貼り付くため、hover 点灯はホバー可能な
   入力に限定する — SP の点灯経路は :active（触れている間だけ）のみ */
@media (hover: hover) and (pointer: fine) {
  .lg-glass:hover {
    --lg-li: var(--lg-light-hover-intensity);
  }
}
.lg-glass:focus-visible,
.lg-glass:has(:focus-visible) {
  --lg-li: var(--lg-light-hover-intensity);
}
/* タッチの経路（R16補遺）: hover を持たない SP では押した瞬間に分光リムが点灯する */
.lg-glass:active {
  --lg-li: var(--lg-light-press-intensity);
}

/* gel — CSS フォールバック（JS 有効時は html.lg-js で無効化し Spring が駆動） */
html:not(.lg-js) [data-lg-gel] {
  transition: transform var(--lg-motion-gel-release-duration) var(--lg-motion-gel-release-easing);
}
html:not(.lg-js) [data-lg-gel]:active {
  transform: scale(var(--lg-motion-gel-press-scale));
  transition: transform var(--lg-motion-gel-press-duration) var(--lg-motion-gel-press-easing);
}
[data-lg-gel] {
  will-change: transform;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* focus-visible — 全操作系必須。リングは ink = surface に自動追従 */
.lg-glass:focus-visible,
.lg-button:focus-visible,
.lg-tab:focus-visible,
.lg-card[tabindex]:focus-visible,
.lg-field:has(.lg-field-input:focus-visible) {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}
.lg-field-input:focus-visible {
  outline: none; /* リングは wrapper 側に出す */
}

/* ------------------------------------------------------------
   components（comp 層）
   ------------------------------------------------------------ */

/* button */
a.lg-button { text-decoration: none; } /* アンカー利用時（LP の CTA 等） */
.lg-button {
  --lg-r: var(--lg-button-radius);
  border-radius: var(--lg-button-radius); /* 非ガラス variant（--quiet/--solid）でも角丸を保証 */
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--lg-button-height);
  padding: 0 var(--lg-button-padding-x);
  font-family: inherit;
  font-size: var(--lg-button-font-size);
  font-weight: var(--lg-button-font-weight);
  letter-spacing: 0.01em; /* lint: structural */
  line-height: 1;
  color: var(--lg-ink);
}
/* ============================================================
   variant matrix — 2軸で整理（docs/04）
   tone（意味色）: --accent(=--primary) / --danger / --warning / --success
     → --lg-btn-tone 系の変数を設定するだけ
   emphasis（様式）: 既定 = tinted（ガラス+ステンドグラス）/
     --solid / --outline / --quiet → トーン変数を消費して描画
   ============================================================ */

/* ---- tone 軸: 変数の設定 + 既定様式（tinted）の描画 ---- */
.lg-button--accent,
.lg-button--primary, /* alias: 1画面1箇所ルールの担い手 */
.lg-button--danger,
.lg-button--warning,
.lg-button--success {
  background: linear-gradient(
    color-mix(in srgb, var(--lg-btn-tone)
      calc(var(--lg-ref-alpha-accent-hi) * 100%), transparent),
    color-mix(in srgb, var(--lg-btn-tone-deep)
      calc(var(--lg-ref-alpha-accent-lo) * 100%), transparent));
  color: var(--lg-button-on-accent);
}
.lg-button--accent,
.lg-button--primary {
  --lg-btn-tone: var(--lg-button-accent);
  --lg-btn-tone-deep: var(--lg-button-accent-deep);
  --lg-btn-tone-solid: var(--lg-button-accent-solid);
}
.lg-button--danger {
  --lg-btn-tone: var(--lg-danger);
  --lg-btn-tone-deep: var(--lg-danger);
  --lg-btn-tone-solid: var(--lg-danger);
}
.lg-button--warning {
  --lg-btn-tone: var(--lg-ref-color-warning);
  --lg-btn-tone-deep: var(--lg-ref-color-warning);
  --lg-btn-tone-solid: var(--lg-ref-color-warning);
}
.lg-button--success {
  --lg-btn-tone: var(--lg-ref-color-positive);
  --lg-btn-tone-deep: var(--lg-ref-color-positive);
  --lg-btn-tone-solid: var(--lg-ref-color-positive);
}

/* ---- emphasis 軸: トーン変数を消費（tone 未指定時は ink に縮退） ---- */
/* solid — 不透明。ガラス上に置く非ガラスの強ボタン */
.lg-button--solid {
  background: var(--lg-btn-tone-solid,
    color-mix(in srgb, var(--lg-ink) 85%, transparent));
  color: var(--lg-btn-on, var(--lg-button-on-accent));
}
.lg-button--solid:not([class*="--accent"]):not([class*="--primary"]):not([class*="--danger"]):not([class*="--warning"]):not([class*="--success"]) {
  color: var(--lg-opaque-bg); /* neutral solid = ink 面 + 反転文字 */
}
/* outline — fill なし。線と文字にトーン */
.lg-button--outline {
  background: transparent;
  color: var(--lg-btn-tone, var(--lg-ink));
  box-shadow: inset 0 0 0 var(--lg-ref-size-hairline)
    color-mix(in srgb, var(--lg-btn-tone, var(--lg-ink)) 45%, transparent);
}
.lg-button--outline:hover {
  background: color-mix(in srgb, var(--lg-btn-tone, var(--lg-ink)) 10%, transparent);
}
/* quiet — 最弱。塗りは ink の気配だけ、文字にトーン */
.lg-button--quiet {
  background: color-mix(in srgb, var(--lg-ink) 10%, transparent);
  color: var(--lg-btn-tone, var(--lg-ink));
}
html:not(.lg-js) .lg-button--solid,
html:not(.lg-js) .lg-button--quiet {
  transition: transform var(--lg-motion-gel-release-duration) var(--lg-motion-gel-release-easing);
}

a.lg-card { text-decoration: none; color: var(--lg-ink); display: block; } /* リンクカード */
/* card — concentricity: 内側 radius = 外側 radius − gap を calc で強制 */
.lg-card {
  --lg-r: var(--lg-card-radius);
  padding: var(--lg-card-gap);
}
.lg-card .lg-concentric {
  border-radius: calc(var(--lg-card-radius) - var(--lg-card-gap));
}
.lg-card-body {
  padding: var(--lg-card-gap) calc(var(--lg-card-gap) / 2) calc(var(--lg-card-gap) / 2);
}

/* nav (tab bar) — アクティブピルは JS Spring で gel 移動 */
.lg-nav {
  --lg-r: var(--lg-nav-radius);
  display: inline-flex;
  position: relative;
  padding: var(--lg-nav-gap);
}
.lg-nav-pill {
  position: absolute;
  top: var(--lg-nav-gap);
  bottom: var(--lg-nav-gap);
  left: 0;
  width: 0;
  border-radius: calc(var(--lg-nav-radius) - var(--lg-nav-gap)); /* concentricity */
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-ref-alpha-pill) * 100%), transparent);
  will-change: transform, width;
  pointer-events: none;
  z-index: 0;
}
.lg-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 1;
  font-family: inherit;
  font-size: var(--lg-nav-tab-font-size);
  font-weight: var(--lg-button-font-weight);
  color: var(--lg-ink);
  opacity: var(--lg-ref-alpha-tab-idle);
  height: calc(var(--lg-nav-height) - var(--lg-nav-gap) * 2);
  padding: 0 var(--lg-ref-space-xl);
  border-radius: calc(var(--lg-nav-radius) - var(--lg-nav-gap));
  transition: opacity var(--lg-ref-duration-fade) ease;
  will-change: transform;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.lg-tab[aria-selected="true"] {
  opacity: 1;
}

/* modal — backdrop scrim + gel 開閉（JS が transform を駆動） */
.lg-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--lg-ref-z-backdrop);
  display: grid;
  place-items: center;
  padding: var(--lg-modal-padding);
  background: var(--lg-modal-scrim);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--lg-ref-duration-fade) ease,
    visibility 0s linear var(--lg-ref-duration-fade);
}
.lg-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--lg-ref-duration-fade) ease;
}
.lg-modal {
  --lg-r: var(--lg-modal-radius);
  width: 100%;
  max-width: var(--lg-modal-width);
  padding: var(--lg-modal-padding);
  transform: scale(var(--lg-modal-enter-scale));
  will-change: transform;
}
.lg-backdrop.is-open .lg-modal {
  transform: none;
}
html.lg-js .lg-backdrop.is-open .lg-modal {
  transform: scale(var(--lg-modal-enter-scale)); /* JS Spring が上書きして 1.0 へ */
}

/* text field — transient ガラス化: 静止時は不透明寄り、focus で相転移 */
.lg-field {
  --lg-r: var(--lg-field-radius);
  display: flex;
  align-items: center;
  height: var(--lg-field-height);
  transition:
    background var(--lg-ref-duration-fade) ease,
    color var(--lg-ref-duration-fade) ease;
}
.lg-field:not(:focus-within) {
  background: color-mix(in srgb, var(--lg-opaque-bg)
    calc(var(--lg-field-rest-opacity) * 100%), transparent);
}
.lg-field:focus-within {
  --lg-li: var(--lg-light-hover-intensity);
}
.lg-field-input {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  padding: 0 var(--lg-field-padding-x);
  font-family: inherit;
  font-size: var(--lg-field-font-size);
  color: var(--lg-ink);
  border-radius: inherit;
}
.lg-field-input::placeholder {
  color: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-ref-alpha-tab-idle) * 70%), transparent);
}

/* ------------------------------------------------------------
   degradation — opaque（物質の固化）。surface 連動を保つ
   ------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
  .lg-glass {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--lg-opaque-bg) !important;
    color: var(--lg-opaque-ink) !important;
  }
  .lg-glass::before,
  .lg-glass::after {
    display: none;
  }
  .lg-button--primary {
    background: var(--lg-button-accent-solid) !important;
    color: var(--lg-button-on-accent) !important;
  }
  .lg-field-input {
    color: var(--lg-opaque-ink);
  }
}
/* JS 検出による opaque（backdrop-filter 自体が使えない環境） */
html.lg-mode-opaque .lg-glass {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--lg-opaque-bg) !important;
  color: var(--lg-opaque-ink) !important;
}
html.lg-mode-opaque .lg-glass::before,
html.lg-mode-opaque .lg-glass::after {
  display: none;
}
html.lg-mode-opaque .lg-button--primary {
  background: var(--lg-button-accent-solid) !important;
  color: var(--lg-button-on-accent) !important;
}

/* IntersectionObserver が画面外の要素に付与 → 全アニメ休止 */
.lg-offscreen,
.lg-offscreen *,
.lg-offscreen::before,
.lg-offscreen::after {
  animation-play-state: paused !important;
}

/* ============================================================
   phase 3 — SaaS components
   ガラス（機能レイヤー）: shell / sidebar / topbar / menu / select /
   command / toast / tooltip / 一時ガラス操作子（switch 等）
   不透明（コンテンツ層）: panel / table / stat / form-row
   ============================================================ */

/* ---------- material phases（厚相/薄相。屈折レシピは regular と共有） ---------- */
.lg-glass[data-lg-phase="thick"] {
  --lg-face-scale: var(--lg-material-regular-thick-face-scale);
  -webkit-backdrop-filter:
    blur(var(--lg-material-regular-thick-blur))
    saturate(var(--lg-material-regular-saturate))
    brightness(var(--lg-bcomp));
  backdrop-filter:
    blur(var(--lg-material-regular-thick-blur))
    saturate(var(--lg-material-regular-saturate))
    brightness(var(--lg-bcomp));
}
.lg-glass[data-lg-phase="thin"] {
  --lg-face-scale: var(--lg-material-regular-thin-face-scale);
  -webkit-backdrop-filter:
    blur(var(--lg-material-regular-thin-blur))
    saturate(var(--lg-material-regular-saturate))
    brightness(var(--lg-bcomp));
  backdrop-filter:
    blur(var(--lg-material-regular-thin-blur))
    saturate(var(--lg-material-regular-saturate))
    brightness(var(--lg-bcomp));
}

/* ---------- shell（sidebar + topbar = 恒常クローム1枚） ---------- */
.lg-shell {
  display: grid;
  grid-template-columns: var(--lg-shell-sidebar-width) 1fr;
  grid-template-rows: var(--lg-shell-topbar-height) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar content";
  gap: var(--lg-shell-gap);
  padding: var(--lg-shell-gap);
  min-height: 100vh;
  box-sizing: border-box;
}
.lg-shell-content {
  grid-area: content;
  min-width: 0;
  padding: calc(var(--lg-shell-pad) - var(--lg-shell-gap)) 0 0;
}

/* sidebar — regular-thick。ナビは塗りピル（glass on glass 禁止） */
.lg-sidebar {
  grid-area: sidebar;
  /* 恒常クローム: コンテンツが長くてもサイドバーは画面に留まる */
  position: sticky;
  top: var(--lg-shell-gap);
  align-self: start;
  height: calc(100vh - var(--lg-shell-gap) * 2);
  --lg-r: var(--lg-sidebar-radius);
  padding: var(--lg-sidebar-pad);
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-xs);
}
.lg-nav--vertical {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  gap: var(--lg-ref-space-2xs);
}
.lg-nav--vertical .lg-nav-pill {
  top: 0; left: 0; right: 0; bottom: auto;
  width: auto; height: 0;
  border-radius: calc(var(--lg-sidebar-radius) - var(--lg-sidebar-pad)); /* concentricity */
}
.lg-nav--vertical .lg-tab {
  justify-content: flex-start;
  height: var(--lg-sidebar-item-height);
  font-size: var(--lg-sidebar-item-font-size);
  border-radius: calc(var(--lg-sidebar-radius) - var(--lg-sidebar-pad));
  display: inline-flex;
  align-items: center;
  gap: var(--lg-ref-space-sm);
  text-align: left;
  width: 100%;
}

/* topbar — regular-thin。アプリ型クロームの黒ナビ = コンテンツ列の最上部に固定 */
.lg-topbar {
  grid-area: topbar;
  position: sticky;
  top: var(--lg-shell-gap);
  z-index: 10; /* スクロールしてくるコンテンツより上（一時面 z-backdrop 未満） */
  min-width: 0; /* grid item の min-width:auto だと縮まない内容幅に列が引きずられる（SP） */
  --lg-r: var(--lg-sidebar-radius);
  display: flex;
  align-items: center;
  gap: var(--lg-ref-space-md);
  padding: 0 var(--lg-topbar-pad-x);
}

/* ---------- mobile shell（breakpoint md = 900px。tokens.ref.breakpoint.md と同値） ---------- */
.lg-shell-menu-btn { display: none; }
@media (max-width: 900px) {
  .lg-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--lg-shell-topbar-height) 1fr;
    grid-template-areas: "topbar" "content";
  }
  .lg-shell-menu-btn {
    display: grid;
    flex: none; /* topbar の flex で潰れて楕円になるのを防ぐ */
    place-items: center;
    appearance: none;
    border: 0;
    cursor: pointer;
    width: var(--lg-ref-size-icon-button); height: var(--lg-ref-size-icon-button);
    border-radius: 50%;
    background: color-mix(in srgb, var(--lg-ink) 10%, transparent);
    color: var(--lg-ink);
    font-size: var(--lg-ref-size-icon);
  }
  .lg-shell-menu-btn:focus-visible {
    outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
    outline-offset: var(--lg-ref-size-focus-offset);
  }
  .lg-shell .lg-sidebar {
    position: fixed;
    z-index: var(--lg-ref-z-backdrop);
    top: var(--lg-drawer-margin);
    bottom: var(--lg-drawer-margin);
    left: var(--lg-drawer-margin);
    width: var(--lg-shell-sidebar-width);
    transform: translateX(calc(-100% - var(--lg-drawer-margin) * 2));
    transition: transform var(--lg-ref-duration-release) var(--lg-ref-easing-gel-release);
  }
  .lg-shell.is-nav-open .lg-sidebar { transform: none; }
  .lg-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--lg-ref-z-backdrop) - 1);
    background: var(--lg-modal-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lg-ref-duration-fade) ease;
  }
  .lg-shell.is-nav-open::after { opacity: 1; pointer-events: auto; }
}

/* mobile: サイドバー右上の閉じるボタン（mobile-shell.js が注入） */
.lg-shell-close { display: none; }
@media (max-width: 900px) {
  .lg-shell-close {
    display: grid; place-items: center;
    position: absolute; top: var(--lg-sidebar-pad); right: var(--lg-sidebar-pad);
    appearance: none; border: 0; cursor: pointer;
    width: var(--lg-ref-size-icon-button); height: var(--lg-ref-size-icon-button);
    border-radius: 50%;
    background: color-mix(in srgb, var(--lg-ink) 10%, transparent);
    color: var(--lg-ink);
  }
  .lg-shell-close:focus-visible {
    outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
    outline-offset: var(--lg-ref-size-focus-offset);
  }
}

/* ---------- menu（バネ入場・フェード退場のドロップダウン） ---------- */
.lg-menu-anchor { position: relative; display: inline-block; }
.lg-menu {
  --lg-r: var(--lg-menu-radius);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--lg-ref-z-menu);
  min-width: var(--lg-menu-min-width);
  padding: var(--lg-menu-pad);
  transform-origin: top left;
  transform: scale(var(--lg-menu-enter-scale));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--lg-menu-exit-duration) ease,
    visibility 0s linear var(--lg-menu-exit-duration);
}
.lg-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--lg-menu-exit-duration) ease;
}
.lg-menu[data-lg-align="right"] {
  left: auto; right: 0;
  transform-origin: top right;
}
.lg-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg-ref-space-sm);
  width: 100%;
  height: var(--lg-menu-item-height);
  padding: 0 var(--lg-menu-item-pad-x);
  font-family: inherit;
  font-size: var(--lg-menu-item-font-size);
  color: var(--lg-ink);
  border-radius: calc(var(--lg-menu-radius) - var(--lg-menu-pad)); /* concentricity */
  opacity: var(--lg-ref-alpha-tab-idle);
}
.lg-menu-item:hover,
.lg-menu-item.is-active {
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-ref-alpha-pill) * 100%), transparent);
  opacity: 1;
}
.lg-menu-item.is-danger { color: var(--lg-danger); }
.lg-menu-sep {
  height: var(--lg-ref-size-hairline);
  margin: var(--lg-ref-space-xs) var(--lg-menu-pad);
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-table-border-alpha) * 100%), transparent);
}

/* ---------- select（menu を土台にした単一選択。トリガーは塗り = コンテンツ層） ---------- */
.lg-select { position: relative; display: inline-block; min-width: var(--lg-select-min-width); }
.lg-select-trigger {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg-ref-space-sm);
  width: 100%;
  height: var(--lg-field-height);
  padding: 0 var(--lg-field-padding-x);
  border-radius: var(--lg-field-radius);
  font-family: inherit;
  font-size: var(--lg-field-font-size);
  color: var(--lg-ink);
  background: color-mix(in srgb, var(--lg-ink) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lg-ink) /* lint: structural */
    calc(var(--lg-ref-alpha-hairline) * 100%), transparent);
}
.lg-select-trigger .caret { opacity: .55; font-size: var(--lg-ref-type-micro-size); }
.lg-select-trigger:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}
.lg-select .lg-menu { width: 100%; min-width: 0; }
.lg-menu-item[aria-selected="true"] { opacity: 1; font-weight: 500; }

/* ---------- command（⌘K パレット） ---------- */
.lg-backdrop--command {
  place-items: start center;
  padding-top: 12vh;
}
.lg-command {
  --lg-r: var(--lg-command-radius);
  width: 100%;
  max-width: var(--lg-command-width);
  padding: var(--lg-command-pad);
  will-change: transform;
}
.lg-command-input {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  height: var(--lg-command-input-height);
  padding: 0 var(--lg-menu-item-pad-x);
  font-family: inherit;
  font-size: var(--lg-ref-type-heading-size);
  color: var(--lg-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--lg-ink) /* lint: structural */
    calc(var(--lg-ref-alpha-hairline) * 100%), transparent);
  border-radius: calc(var(--lg-command-radius) - var(--lg-command-pad))
                 calc(var(--lg-command-radius) - var(--lg-command-pad)) 0 0;
}
.lg-command-input::placeholder {
  color: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-ref-alpha-tab-idle) * 70%), transparent);
}
.lg-command-input:focus-visible { outline: none; } /* パレット全体が focus 文脈 */
.lg-command-list {
  max-height: var(--lg-command-list-max-height);
  overflow-y: auto;
  margin-top: var(--lg-command-pad);
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-2xs);
}
.lg-command-item {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg-ref-space-sm);
  width: 100%;
  min-height: var(--lg-command-item-height);
  padding: 0 var(--lg-menu-item-pad-x);
  font-family: inherit;
  font-size: var(--lg-menu-item-font-size);
  color: var(--lg-ink);
  border-radius: calc(var(--lg-command-radius) - var(--lg-command-pad)); /* concentricity */
  opacity: var(--lg-ref-alpha-tab-idle);
}
.lg-command-item:hover,
.lg-command-item.is-active {
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-ref-alpha-pill) * 100%), transparent);
  opacity: 1;
}
.lg-command-item .hint {
  font-size: var(--lg-form-row-help-size);
  opacity: .55;
  letter-spacing: .08em; /* lint: structural */
}
.lg-command-empty {
  padding: var(--lg-menu-item-pad-x);
  font-size: var(--lg-menu-item-font-size);
  color: color-mix(in srgb, var(--lg-ink) 55%, transparent);
}

/* ---------- toast（右下スタック・一時面） ---------- */
.lg-toast-stack {
  position: fixed;
  right: var(--lg-ref-space-lg);
  bottom: var(--lg-ref-space-lg);
  z-index: var(--lg-ref-z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--lg-toast-gap);
}
.lg-toast {
  --lg-r: var(--lg-toast-radius);
  width: var(--lg-toast-width);
  max-width: calc(100vw - 36px);
  padding: var(--lg-toast-pad-y) var(--lg-toast-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg-ref-space-md);
  font-size: var(--lg-ref-type-body-size);
  will-change: transform;
}
.lg-toast.is-leaving {
  opacity: 0;
  transition: opacity var(--lg-ref-duration-fade) ease;
}
.lg-toast-action {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex: none;
  height: var(--lg-toast-action-height);
  padding: 0 var(--lg-ref-space-sm);
  border-radius: var(--lg-ref-radius-pill);
  font-family: inherit;
  font-size: var(--lg-chip-font-size);
  font-weight: var(--lg-button-font-weight);
  color: var(--lg-ink);
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-ref-alpha-pill) * 100%), transparent);
}
.lg-toast-action:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}
.lg-toast.is-positive { color: var(--lg-ref-color-positive); }

/* ---------- tooltip（薄相 baseline のみ。位置固定・ポインタ非追従） ---------- */
.lg-tooltip {
  position: fixed;
  z-index: var(--lg-ref-z-tooltip);
  pointer-events: none;
  max-width: var(--lg-tooltip-max-width);
  padding: var(--lg-tooltip-pad-y) var(--lg-tooltip-pad-x);
  border-radius: var(--lg-tooltip-radius);
  font-size: var(--lg-tooltip-font-size);
  line-height: 1.45;
  color: var(--lg-ink);
  background: color-mix(in srgb, var(--lg-ref-color-white)
    calc(var(--lg-face-alpha) * var(--lg-material-regular-thick-face-scale) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--lg-material-regular-thin-blur))
    saturate(var(--lg-material-regular-saturate));
  backdrop-filter: blur(var(--lg-material-regular-thin-blur))
    saturate(var(--lg-material-regular-saturate));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lg-rim)
      calc(var(--lg-ref-alpha-hairline) * 100%), transparent),
    var(--lg-material-regular-shadow);
  opacity: 0;
  transform: translateY(4px); /* lint: structural */
  transition:
    opacity var(--lg-menu-exit-duration) ease,
    transform var(--lg-menu-exit-duration) ease;
}
.lg-tooltip.is-open { opacity: 1; transform: none; }

/* ---------- switch（操作中のみノブがガラス化。移動は gel バネ） ---------- */
.lg-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--lg-ref-space-sm);
  cursor: pointer;
  color: var(--lg-ink);
  font-size: var(--lg-menu-item-font-size);
  -webkit-user-select: none;
  user-select: none;
}
.lg-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.lg-switch-track {
  flex: none;
  width: var(--lg-switch-width);
  height: var(--lg-switch-height);
  border-radius: var(--lg-ref-radius-pill);
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-ref-alpha-pill) * 100%), transparent);
  position: relative;
  transition: background var(--lg-ref-duration-fade) ease;
}
.lg-switch input:checked + .lg-switch-track {
  background: color-mix(in srgb, var(--lg-ink) 85%, transparent);
}
.lg-switch-knob {
  position: absolute;
  top: var(--lg-switch-gap);
  left: var(--lg-switch-gap);
  width: calc(var(--lg-switch-height) - var(--lg-switch-gap) * 2);  /* concentricity */
  height: calc(var(--lg-switch-height) - var(--lg-switch-gap) * 2);
  border-radius: 50%;
  background: var(--lg-ink);
  will-change: transform;
  transition: background var(--lg-ref-duration-fade) ease;
}
.lg-switch input:checked + .lg-switch-track .lg-switch-knob {
  background: var(--lg-opaque-bg);
}
html:not(.lg-js) .lg-switch input:checked + .lg-switch-track .lg-switch-knob {
  transform: translateX(calc(var(--lg-switch-width) - var(--lg-switch-height)));
}
/* 操作中 = transient ガラス化（公式例外） */
.lg-switch input:active + .lg-switch-track .lg-switch-knob {
  background: color-mix(in srgb, var(--lg-ref-color-white) 34%, transparent);
  -webkit-backdrop-filter: blur(var(--lg-material-regular-thin-blur));
  backdrop-filter: blur(var(--lg-material-regular-thin-blur));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lg-rim)
      calc(var(--lg-ref-alpha-rim-mid) * 100%), transparent),
    0 0 12px color-mix(in srgb, var(--lg-rim)
      calc(var(--lg-ref-alpha-rim-mid) * 100%), transparent);
}
.lg-switch:has(input:focus-visible) .lg-switch-track {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}

/* ---------- checkbox / radio（押下中のみ発光） ---------- */
.lg-checkbox,
.lg-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--lg-ref-space-sm);
  cursor: pointer;
  color: var(--lg-ink);
  font-size: var(--lg-menu-item-font-size);
  -webkit-user-select: none;
  user-select: none;
}
.lg-checkbox input,
.lg-radio input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.lg-check-box {
  flex: none;
  width: var(--lg-checkbox-size);
  height: var(--lg-checkbox-size);
  border-radius: var(--lg-checkbox-radius);
  border: 1px solid color-mix(in srgb, var(--lg-ink) 35%, transparent); /* lint: structural */
  background: color-mix(in srgb, var(--lg-ink) 6%, transparent);
  display: grid;
  place-items: center;
  transition:
    background var(--lg-ref-duration-fade) ease,
    border-color var(--lg-ref-duration-fade) ease;
}
.lg-radio .lg-check-box { border-radius: 50%; }
.lg-check-box::after {
  content: "";
  width: 9px; /* lint: structural */
  height: 5px; /* lint: structural */
  border-left: 2px solid var(--lg-opaque-bg); /* lint: structural */
  border-bottom: 2px solid var(--lg-opaque-bg); /* lint: structural */
  transform: rotate(-45deg) translate(1px, -1px); /* lint: structural */
  opacity: 0;
}
.lg-radio .lg-check-box::after {
  width: 8px; /* lint: structural */
  height: 8px; /* lint: structural */
  border: 0;
  border-radius: 50%;
  background: var(--lg-opaque-bg);
  transform: none;
}
.lg-checkbox input:checked + .lg-check-box,
.lg-radio input:checked + .lg-check-box {
  background: color-mix(in srgb, var(--lg-ink) 85%, transparent);
  border-color: transparent;
}
.lg-checkbox input:checked + .lg-check-box::after,
.lg-radio input:checked + .lg-check-box::after { opacity: 1; }
.lg-checkbox input:active + .lg-check-box,
.lg-radio input:active + .lg-check-box {
  box-shadow: 0 0 10px color-mix(in srgb, var(--lg-rim) /* lint: structural */
    calc(var(--lg-ref-alpha-rim-mid) * 100%), transparent);
}
.lg-checkbox:has(input:focus-visible) .lg-check-box,
.lg-radio:has(input:focus-visible) .lg-check-box {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}

/* ---------- slider（ドラッグ中のみノブがガラス化。値は 1:1） ---------- */
input[type="range"].lg-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--lg-slider-knob-size);
  background: transparent;
  cursor: pointer;
  --lg-slider-val: 50%;
}
.lg-slider::-webkit-slider-runnable-track {
  height: var(--lg-slider-track-height);
  border-radius: var(--lg-ref-radius-pill);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--lg-ink) 80%, transparent) var(--lg-slider-val),
    color-mix(in srgb, var(--lg-ink) 18%, transparent) var(--lg-slider-val));
}
.lg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--lg-slider-knob-size);
  height: var(--lg-slider-knob-size);
  margin-top: calc((var(--lg-slider-track-height) - var(--lg-slider-knob-size)) / 2);
  border-radius: 50%;
  background: var(--lg-ink);
  transition: box-shadow var(--lg-ref-duration-fade) ease;
}
.lg-slider:active::-webkit-slider-thumb {
  background: color-mix(in srgb, var(--lg-ref-color-white) 40%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lg-rim)
      calc(var(--lg-ref-alpha-rim-mid) * 100%), transparent),
    0 0 14px color-mix(in srgb, var(--lg-rim)
      calc(var(--lg-ref-alpha-rim-side) * 100%), transparent);
}
.lg-slider::-moz-range-track {
  height: var(--lg-slider-track-height);
  border-radius: var(--lg-ref-radius-pill);
  background: color-mix(in srgb, var(--lg-ink) 18%, transparent);
}
.lg-slider::-moz-range-progress {
  height: var(--lg-slider-track-height);
  border-radius: var(--lg-ref-radius-pill);
  background: color-mix(in srgb, var(--lg-ink) 80%, transparent);
}
.lg-slider::-moz-range-thumb {
  width: var(--lg-slider-knob-size);
  height: var(--lg-slider-knob-size);
  border: 0;
  border-radius: 50%;
  background: var(--lg-ink);
}
.lg-slider:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}

/* ---------- segmented（lg-nav の小型版。ピル機構共有・塗り容器） ---------- */
.lg-segmented {
  --lg-nav-radius: var(--lg-segmented-radius);
  --lg-nav-gap: var(--lg-segmented-gap);
  --lg-nav-height: var(--lg-segmented-height);
  --lg-nav-tab-font-size: var(--lg-segmented-font-size);
  display: inline-flex;
  position: relative;
  padding: var(--lg-segmented-gap);
  border-radius: var(--lg-segmented-radius);
  background: color-mix(in srgb, var(--lg-ink) 7%, transparent);
}
.lg-segmented .lg-tab { padding: 0 var(--lg-ref-space-md); }

/* ---------- chip（塗り部品・選択で ink 反転） ---------- */
.lg-chip {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--lg-ref-space-xs);
  height: var(--lg-chip-height);
  padding: 0 var(--lg-chip-pad-x);
  border-radius: var(--lg-chip-radius);
  border: 1px solid color-mix(in srgb, var(--lg-ink) 25%, transparent); /* lint: structural */
  background: transparent;
  color: var(--lg-ink);
  font-family: inherit;
  font-size: var(--lg-chip-font-size);
  transition:
    background var(--lg-ref-duration-fade) ease,
    color var(--lg-ref-duration-fade) ease;
}
.lg-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--lg-ink) 85%, transparent);
  border-color: transparent;
  color: var(--lg-opaque-bg);
}
.lg-chip:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}

/* ---------- spec-tag（観測機器の意匠: 素材が自分の物性を申告する読み出し） ---------- */
.lg-spec-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--lg-ref-space-sm);
  font-family: var(--lg-ref-type-family-mono);
  font-size: var(--lg-ref-type-micro-size);
  letter-spacing: var(--lg-ref-type-tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lg-ink) 62%, transparent);
  border: var(--lg-ref-size-hairline) solid
    color-mix(in srgb, var(--lg-ink) 22%, transparent);
  border-radius: var(--lg-ref-radius-xs);
  padding: var(--lg-ref-space-2xs) var(--lg-ref-space-sm);
}
.lg-spec-tag .sep { opacity: 0.4; }

/* ---------- panel（コンテンツ層・不透明。ガラスの相方） ---------- */
.lg-panel {
  border-radius: var(--lg-panel-radius);
  padding: var(--lg-panel-pad);
  background: color-mix(in srgb, var(--lg-opaque-bg)
    calc(100% - var(--lg-panel-lift) * 100%), var(--lg-ref-color-white));
  border: 1px solid color-mix(in srgb, var(--lg-ink) /* lint: structural */
    calc(var(--lg-panel-border-alpha) * 100%), transparent);
  color: var(--lg-ink);
}
.lg-panel .lg-concentric {
  border-radius: calc(var(--lg-panel-radius) - var(--lg-panel-pad));
}

/* ---------- table（コンテンツ層・不透明・装飾最小限） ---------- */
.lg-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--lg-ink);
  font-size: var(--lg-menu-item-font-size);
}
.lg-table th {
  height: var(--lg-table-row-height);
  padding: 0 var(--lg-table-pad-x);
  text-align: left;
  font-size: var(--lg-table-header-font-size);
  font-weight: var(--lg-button-font-weight);
  letter-spacing: var(--lg-ref-type-tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lg-ink) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--lg-ink) /* lint: structural */
    calc(var(--lg-table-border-alpha) * 100%), transparent);
}
.lg-table td {
  height: var(--lg-table-row-height);
  padding: 0 var(--lg-table-pad-x);
  border-bottom: 1px solid color-mix(in srgb, var(--lg-ink) /* lint: structural */
    calc(var(--lg-table-border-alpha) * 100%), transparent);
}
.lg-table tbody tr {
  transition: background var(--lg-ref-duration-fade) ease;
}
.lg-table tbody tr:hover {
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-table-hover-alpha) * 100%), transparent);
}
.lg-table--compact th,
.lg-table--compact td { height: var(--lg-table-row-height-compact); }
.lg-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- responsive table: sm 以下で行がカード化 ---------- */
@media (max-width: 640px) {
  .lg-table--responsive,
  .lg-table--responsive tbody { display: block; width: 100%; }
  .lg-table--responsive thead { display: none; }
  .lg-table--responsive tbody tr {
    display: block;
    padding: var(--lg-ref-space-md) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--lg-ink) /* lint: structural */
      calc(var(--lg-table-border-alpha) * 100%), transparent);
  }
  .lg-table--responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lg-ref-space-md);
    height: auto;
    min-height: var(--lg-ref-space-3xl);
    padding: var(--lg-ref-space-2xs) 0;
    border-bottom: 0;
  }
  .lg-table--responsive td.num { text-align: right; }
  .lg-table--responsive td[data-th]::before {
    content: attr(data-th);
    font-size: var(--lg-ref-type-micro-size);
    letter-spacing: var(--lg-ref-type-tracking-wide);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--lg-ink) 50%, transparent);
    flex: none;
  }
  .lg-table--responsive td:empty { display: none; }
}

/* SP: 幅が収まらない表は自身の中で横スクロールする（docs/02 の原則。
   ページ全体を横に溢れさせない — grid 親の min-width:auto 連鎖を断つ） */
@media (max-width: 640px) {
  .lg-table { display: block; overflow-x: auto; }
}

/* ---------- stat（KPI タイル。lg-panel と併用） ---------- */
.lg-stat { padding: var(--lg-stat-pad); }
.lg-stat-label {
  font-size: var(--lg-stat-label-size);
  letter-spacing: var(--lg-ref-type-tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lg-ink) 55%, transparent);
}
.lg-stat-value {
  font-family: var(--lg-ref-type-family-display);
  font-size: var(--lg-stat-value-size);
  font-weight: 600;
  margin-top: var(--lg-ref-space-xs);
  font-variant-numeric: tabular-nums;
}
.lg-stat-delta { font-size: var(--lg-stat-delta-size); margin-top: var(--lg-ref-space-xs); }
.lg-stat-delta.up { color: var(--lg-ref-color-positive); }
.lg-stat-delta.down { color: var(--lg-danger); }

/* ---------- form-row ---------- */
.lg-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--lg-form-row-gap);
}
.lg-form-label {
  font-size: var(--lg-form-row-label-size);
  color: color-mix(in srgb, var(--lg-ink) 80%, transparent);
}
.lg-help {
  font-size: var(--lg-form-row-help-size);
  color: color-mix(in srgb, var(--lg-ink) 55%, transparent);
}
.lg-form-row.is-error .lg-help,
.lg-help--error { color: var(--lg-danger); }

/* ---------- field 状態（error / disabled） ---------- */
.lg-form-row.is-error .lg-field,
.lg-field.is-error {
  box-shadow:
    inset 0 0 0 1px var(--lg-danger),
    var(--lg-material-regular-shadow);
}
.lg-field:has(.lg-field-input:disabled) {
  opacity: var(--lg-field-disabled-opacity);
  pointer-events: none;
}

/* ---------- 声（R15）: 同梱フォント。パスは dist(css/) からの相対 ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------
   phase 4 — foundation utilities + 高頻度部品
   （typography / progress / skeleton / badge / avatar / banner /
     textarea / input-group / button states）
   ------------------------------------------------------------ */

/* ---------- typography scale（.lg-type-*。margin は持たない） ---------- */
.lg-type-display {
  font-family: var(--lg-ref-type-family-display);
  font-size: var(--lg-ref-type-display-size);
  font-weight: var(--lg-ref-type-weight-semibold);
  line-height: var(--lg-ref-type-leading-tight);
}
.lg-type-title {
  font-family: var(--lg-ref-type-family-display);
  font-size: var(--lg-ref-type-title-size);
  font-weight: var(--lg-ref-type-weight-semibold);
  line-height: var(--lg-ref-type-leading-tight);
}
.lg-type-heading {
  font-family: var(--lg-ref-type-family-display);
  font-size: var(--lg-ref-type-heading-size);
  font-weight: var(--lg-ref-type-weight-semibold);
  line-height: var(--lg-ref-type-leading-tight);
}
.lg-type-body {
  font-size: var(--lg-ref-type-body-size);
  font-weight: var(--lg-ref-type-weight-regular);
  line-height: var(--lg-ref-type-leading-body);
}
.lg-type-caption {
  font-size: var(--lg-ref-type-caption-size);
  line-height: var(--lg-ref-type-leading-body);
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.lg-type-label {
  font-family: var(--lg-ref-type-family-mono);
  font-size: var(--lg-ref-type-micro-size);
  font-weight: var(--lg-ref-type-weight-medium);
  letter-spacing: var(--lg-ref-type-tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 60%, transparent);
}

/* ---------- button states ---------- */
.lg-button:disabled,
.lg-button.is-disabled {
  pointer-events: none;
  opacity: var(--lg-field-disabled-opacity);
}
/* loading: スピナーのみ表示。ラベルは透明化し、ボタン寸法は保つ */
.lg-button.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent; /* ラベル・アイコン（currentColor）を不可視化 */
}
.lg-button.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--lg-progress-spinner-size) - 4px);
  height: calc(var(--lg-progress-spinner-size) - 4px);
  border-radius: 50%;
  border: var(--lg-progress-spinner-width) solid
    color-mix(in srgb, var(--lg-ink) 25%, transparent);
  border-top-color: var(--lg-ink);
  animation: lg-spin var(--lg-progress-duration) linear infinite;
}
/* 塗り様式（tinted/solid）× tone ではスピナーを on-accent に。
   outline/quiet はトーン色のスピナー */
.lg-button--accent.is-loading::before,
.lg-button--primary.is-loading::before,
.lg-button--solid.is-loading::before,
.lg-button--danger.is-loading::before,
.lg-button--success.is-loading::before,
.lg-button--warning.is-loading::before {
  border-color: color-mix(in srgb, var(--lg-button-on-accent) 30%, transparent);
  border-top-color: var(--lg-button-on-accent);
}
.lg-button--outline.is-loading::before,
.lg-button--quiet.is-loading::before {
  border-color: color-mix(in srgb, var(--lg-btn-tone, var(--lg-ink)) 30%, transparent);
  border-top-color: var(--lg-btn-tone, var(--lg-ink));
}

/* status のトーン定義は button.css の variant matrix（tone 変数方式）に統合済み */

/* ---------- progress / spinner（コンテンツ層。読む要素はガラスにしない） ---------- */
.lg-progress {
  --lg-progress-val: 0%;
  width: 100%;
  height: var(--lg-progress-height);
  border-radius: var(--lg-progress-radius);
  background: color-mix(in srgb, var(--lg-ink) 14%, transparent);
  overflow: hidden;
}
.lg-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--lg-progress-val);
  border-radius: inherit;
  background: color-mix(in srgb, var(--lg-ink) 80%, transparent);
  transition: width var(--lg-ref-duration-fade) ease;
}
.lg-progress.is-indeterminate::before {
  width: 34%;
  animation: lg-indeterminate calc(var(--lg-progress-duration) * 1.6) ease-in-out infinite;
}
@keyframes lg-indeterminate {
  from { transform: translateX(-110%); }
  to   { transform: translateX(400%); }
}

/* ---------- spinner ---------- */
.lg-spinner {
  width: var(--lg-progress-spinner-size);
  height: var(--lg-progress-spinner-size);
  border-radius: 50%;
  border: var(--lg-progress-spinner-width) solid
    color-mix(in srgb, var(--lg-ink) 20%, transparent);
  border-top-color: var(--lg-ink);
  animation: lg-spin var(--lg-progress-duration) linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ---------- skeleton ---------- */
.lg-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--lg-skeleton-radius);
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-skeleton-alpha) * 100%), transparent);
  min-height: var(--lg-ref-space-md);
  color: transparent;
  user-select: none;
}
.lg-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--lg-ink)
      calc(var(--lg-skeleton-shine-alpha) * 100%), transparent), transparent);
  animation: lg-shimmer var(--lg-skeleton-duration) ease-in-out infinite;
}
@keyframes lg-shimmer { to { transform: translateX(100%); } }
.lg-skeleton--text { height: 0.85em; margin: 0.2em 0; } /* lint: structural */
.lg-skeleton--circle { border-radius: 50%; }

/* ---------- badge / status dot（塗り。色は状態通知のみ） ---------- */
.lg-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lg-ref-space-xs) + 1px);
  height: var(--lg-badge-height);
  padding: 0 var(--lg-badge-pad-x);
  border-radius: var(--lg-ref-radius-pill);
  font-size: var(--lg-badge-font-size);
  font-weight: var(--lg-ref-type-weight-medium);
  letter-spacing: var(--lg-ref-type-tracking-wide);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--lg-ink) 10%, transparent);
  color: color-mix(in srgb, var(--lg-ink) 80%, transparent);
}
.lg-badge.is-positive {
  color: var(--lg-ref-color-positive);
  background: color-mix(in srgb, var(--lg-ref-color-positive) 14%, transparent);
}
.lg-badge.is-danger {
  color: var(--lg-danger);
  background: color-mix(in srgb, var(--lg-danger) 14%, transparent);
}
.lg-dot {
  flex: none;
  width: var(--lg-badge-dot-size);
  height: var(--lg-badge-dot-size);
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ---------- avatar（コンテンツ層。イニシャルフォールバック内蔵） ---------- */
.lg-avatar {
  flex: none;
  width: var(--lg-avatar-size);
  height: var(--lg-avatar-size);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  font-size: var(--lg-avatar-font-size);
  font-weight: var(--lg-ref-type-weight-medium);
  letter-spacing: 0.04em; /* lint: structural */
  background: color-mix(in srgb, var(--lg-ink) 14%, transparent);
  color: var(--lg-ink);
}
.lg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lg-avatar--sm { width: var(--lg-avatar-size-sm); height: var(--lg-avatar-size-sm); font-size: calc(var(--lg-avatar-font-size) - 2px); }
.lg-avatar--lg { width: var(--lg-avatar-size-lg); height: var(--lg-avatar-size-lg); font-size: calc(var(--lg-avatar-font-size) + 3px); }
.lg-avatar-group { display: inline-flex; }
.lg-avatar-group .lg-avatar {
  margin-left: var(--lg-avatar-group-overlap);
  box-shadow: 0 0 0 2px var(--lg-opaque-bg); /* lint: structural */
}
.lg-avatar-group .lg-avatar:first-child { margin-left: 0; }

/* ---------- inline banner / alert（コンテンツ層・不透明。toast と違い「留まる」） ---------- */
.lg-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--lg-ref-space-md);
  padding: var(--lg-banner-pad-y) var(--lg-banner-pad-x);
  padding-left: calc(var(--lg-banner-pad-x) + var(--lg-banner-accent-width));
  border-radius: var(--lg-banner-radius);
  background: color-mix(in srgb, var(--lg-ink) 6%, transparent);
  color: var(--lg-ink);
  font-size: var(--lg-ref-type-body-size);
  line-height: var(--lg-ref-type-leading-body);
  overflow: hidden;
}
.lg-banner::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--lg-banner-accent-width);
  background: currentColor;
  opacity: 0.75;
}
.lg-banner.is-positive::before { background: var(--lg-ref-color-positive); opacity: 1; }
.lg-banner.is-danger::before { background: var(--lg-danger); opacity: 1; }
.lg-banner.is-leaving { opacity: 0; transition: opacity var(--lg-ref-duration-fade) ease; }
.lg-banner-close {
  appearance: none; border: 0; cursor: pointer;
  margin-left: auto; flex: none;
  background: transparent; color: inherit;
  font-family: inherit; font-size: var(--lg-ref-type-body-size); line-height: 1;
  opacity: 0.55; padding: var(--lg-ref-space-2xs) var(--lg-ref-space-xs); border-radius: var(--lg-ref-radius-xs);
}
.lg-banner-close:hover { opacity: 1; }
.lg-banner-close:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}

/* ---------- field 拡張: textarea / affix（prefix・suffix）/ 塗りフィールド ---------- */
.lg-field--multi {
  height: auto;
  min-height: var(--lg-field-multi-min-height);
  align-items: stretch;
}
.lg-field--multi textarea.lg-field-input {
  resize: none;
  height: auto;
  min-height: calc(var(--lg-field-multi-min-height) - var(--lg-ref-space-xl));
  padding-top: var(--lg-ref-space-md);
  padding-bottom: var(--lg-ref-space-md);
  line-height: var(--lg-ref-type-leading-body);
}
.lg-field-affix {
  flex: none;
  display: grid;
  place-items: center;
  font-size: var(--lg-field-icon-size);
  opacity: 0.55;
}
.lg-field-affix:first-child { margin-left: var(--lg-field-padding-x); }
.lg-field-affix:first-child + .lg-field-input { padding-left: var(--lg-ref-space-sm); }
.lg-field-input + .lg-field-affix { margin-right: var(--lg-field-padding-x); }
.lg-field-input:has(+ .lg-field-affix) { padding-right: var(--lg-ref-space-sm); }
/* ガラスの上に置く検索・入力は塗り相（glass on glass 回避）。.lg-glass を併用しない */
.lg-field--fill {
  --lg-r: var(--lg-ref-radius-pill);
  border-radius: var(--lg-ref-radius-pill);
  height: calc(var(--lg-ref-size-control-height) - var(--lg-ref-space-lg));
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-field-fill-alpha) * 100%), transparent) !important;
  box-shadow: none;
}
.lg-field--fill:not(:focus-within) { background: color-mix(in srgb, var(--lg-ink)
  calc(var(--lg-field-fill-alpha) * 100%), transparent) !important; }

/* ------------------------------------------------------------
   phase 5 — 残余部品の全実装
   drawer / popover / context menu / breadcrumbs / pagination /
   accordion / stepper / empty / number / datepicker / dropzone /
   mobile shell
   ------------------------------------------------------------ */

/* ---------- drawer / sheet（右からの一時面） ---------- */
.lg-backdrop--drawer { place-items: stretch end; padding: var(--lg-drawer-margin); }
.lg-drawer {
  --lg-r: var(--lg-drawer-radius);
  width: min(var(--lg-drawer-width), calc(100vw - var(--lg-drawer-margin) * 2));
  height: 100%;
  padding: var(--lg-drawer-pad);
  overflow-y: auto;
  will-change: transform;
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-lg);
}
.lg-drawer-head {
  display: flex;
  align-items: center;
  gap: var(--lg-ref-space-md);
}
.lg-drawer-head .lg-type-heading { margin-right: auto; }

/* ---------- popover（menu 機構 + フォーム内容。選択で閉じない） ---------- */
.lg-menu--popover {
  min-width: var(--lg-popover-min-width);
  padding: var(--lg-popover-pad);
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-md);
}

/* ---------- context menu（カーソル位置に開く。JS が座標を与える） ---------- */
.lg-menu--context {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--lg-ref-z-menu);
  transform-origin: top left;
}

/* ---------- breadcrumbs（塗り） ---------- */
.lg-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--lg-ref-space-sm);
  font-size: var(--lg-breadcrumbs-font-size);
  color: var(--lg-ink);
}
.lg-breadcrumbs a {
  color: color-mix(in srgb, var(--lg-ink) 65%, transparent);
  text-decoration: none;
  border-radius: var(--lg-ref-radius-xs);
}
.lg-breadcrumbs a:hover { color: var(--lg-ink); }
.lg-breadcrumbs a:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}
.lg-breadcrumbs .sep {
  color: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-breadcrumbs-sep-alpha) * 100%), transparent);
  user-select: none;
}
.lg-breadcrumbs [aria-current="page"] { color: var(--lg-ink); }

/* ---------- pagination（塗り。現在ページは ink 反転） ---------- */
.lg-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--lg-pagination-gap);
}
.lg-pagination-item {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-width: var(--lg-pagination-size);
  height: var(--lg-pagination-size);
  padding: 0 var(--lg-ref-space-sm);
  border-radius: var(--lg-ref-radius-pill);
  background: transparent;
  color: color-mix(in srgb, var(--lg-ink) 72%, transparent);
  font-family: inherit;
  font-size: var(--lg-ref-type-caption-size);
  font-variant-numeric: tabular-nums;
}
.lg-pagination-item:hover { background: color-mix(in srgb, var(--lg-ink) 10%, transparent); }
.lg-pagination-item[aria-current="page"] {
  background: color-mix(in srgb, var(--lg-ink) 85%, transparent);
  color: var(--lg-opaque-bg);
}
.lg-pagination-item:disabled { opacity: 0.35; pointer-events: none; }
.lg-pagination-item:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}

/* ---------- accordion（native details。コンテンツ層） ---------- */
.lg-accordion {
  border-bottom: 1px solid color-mix(in srgb, var(--lg-ink) /* lint: structural */
    calc(var(--lg-table-border-alpha) * 100%), transparent);
  color: var(--lg-ink);
}
.lg-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--lg-ref-space-md);
  padding: var(--lg-accordion-pad-y) var(--lg-accordion-pad-x);
  font-size: var(--lg-ref-type-body-size);
  font-weight: var(--lg-ref-type-weight-medium);
  border-radius: var(--lg-ref-radius-xs);
}
.lg-accordion summary::-webkit-details-marker { display: none; }
.lg-accordion summary::after {
  content: "";
  margin-left: auto;
  width: 7px; height: 7px; /* lint: structural */
  border-right: 1.5px solid currentColor; /* lint: structural */
  border-bottom: 1.5px solid currentColor; /* lint: structural */
  transform: rotate(45deg);
  opacity: 0.5;
  transition: transform var(--lg-ref-duration-fade) ease;
}
.lg-accordion[open] summary::after { transform: rotate(-135deg); }
.lg-accordion summary:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}
.lg-accordion-body {
  padding: 0 var(--lg-accordion-pad-x) var(--lg-accordion-pad-y);
  font-size: var(--lg-ref-type-body-size);
  line-height: var(--lg-ref-type-leading-body);
  color: color-mix(in srgb, var(--lg-ink) 80%, transparent);
}

/* ---------- stepper（ウィザード進行。塗り） ---------- */
.lg-stepper {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0; padding: 0;
  color: var(--lg-ink);
}
.lg-stepper li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lg-ref-space-sm);
  position: relative;
  font-size: var(--lg-ref-type-caption-size);
  color: color-mix(in srgb, var(--lg-ink) 55%, transparent);
}
.lg-stepper .dot {
  width: var(--lg-stepper-dot-size);
  height: var(--lg-stepper-dot-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--lg-ref-type-micro-size);
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--lg-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--lg-ink) 25%, transparent); /* lint: structural */
}
.lg-stepper li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--lg-stepper-dot-size) / 2);
  right: calc(50% + var(--lg-stepper-dot-size) / 2 + var(--lg-ref-space-xs));
  left: calc(-50% + var(--lg-stepper-dot-size) / 2 + var(--lg-ref-space-xs));
  height: var(--lg-ref-size-hairline);
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-stepper-line-alpha) * 100%), transparent);
}
.lg-stepper li.is-done { color: color-mix(in srgb, var(--lg-ink) 75%, transparent); }
.lg-stepper li.is-done .dot {
  background: color-mix(in srgb, var(--lg-ink) 85%, transparent);
  border-color: transparent;
  color: var(--lg-opaque-bg);
}
.lg-stepper li.is-current { color: var(--lg-ink); font-weight: var(--lg-ref-type-weight-medium); }
.lg-stepper li.is-current .dot {
  border-color: var(--lg-ink);
  background: color-mix(in srgb, var(--lg-ink) 16%, transparent);
}

/* ---------- empty state（コンテンツ層） ---------- */
.lg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--lg-ref-space-md);
  padding: var(--lg-empty-pad-y) var(--lg-ref-space-2xl);
  color: var(--lg-ink);
}
.lg-empty .glyph {
  font-size: var(--lg-empty-icon-size);
  line-height: 1;
  opacity: 0.4;
}
.lg-empty p {
  margin: 0;
  max-width: var(--lg-empty-max-width);
  font-size: var(--lg-ref-type-body-size);
  line-height: var(--lg-ref-type-leading-body);
  color: color-mix(in srgb, var(--lg-ink) 65%, transparent);
}

/* ---------- number input（field 拡張 + ステッパー） ---------- */
.lg-field--number { padding: 0 var(--lg-ref-space-sm); }
.lg-field--number .lg-field-input {
  text-align: center;
  padding: 0 var(--lg-ref-space-sm);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.lg-field--number .lg-field-input::-webkit-outer-spin-button,
.lg-field--number .lg-field-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lg-step {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex: none;
  width: var(--lg-field-step-size);
  height: var(--lg-field-step-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--lg-ink) 10%, transparent);
  color: var(--lg-ink);
  font-family: inherit;
  font-size: var(--lg-ref-type-body-size);
  line-height: 1;
}
.lg-step:hover { background: color-mix(in srgb, var(--lg-ink) 16%, transparent); }
.lg-step:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}

/* ---------- datepicker（popover 内カレンダー。JS が生成） ---------- */
.lg-datepicker {
  padding: var(--lg-datepicker-pad);
  color: var(--lg-ink);
  user-select: none;
}
.lg-datepicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg-ref-space-sm);
  padding: 0 var(--lg-ref-space-xs) var(--lg-ref-space-sm);
  font-size: var(--lg-ref-type-body-size);
  font-weight: var(--lg-ref-type-weight-medium);
}
.lg-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--lg-datepicker-cell-size));
}
.lg-datepicker-grid .dow {
  display: grid;
  place-items: center;
  height: calc(var(--lg-datepicker-cell-size) - 6px);
  font-size: var(--lg-ref-type-micro-size);
  letter-spacing: 0.06em; /* lint: structural */
  color: color-mix(in srgb, var(--lg-ink) 45%, transparent);
}
.lg-datepicker-grid .day {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: var(--lg-datepicker-cell-size);
  height: var(--lg-datepicker-cell-size);
  border-radius: 50%;
  background: transparent;
  color: var(--lg-ink);
  font-family: inherit;
  font-size: var(--lg-ref-type-caption-size);
  font-variant-numeric: tabular-nums;
}
.lg-datepicker-grid .day:hover { background: color-mix(in srgb, var(--lg-ink) 12%, transparent); }
.lg-datepicker-grid .day.is-out { opacity: 0.3; }
.lg-datepicker-grid .day.is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lg-ink) 40%, transparent); } /* lint: structural */
.lg-datepicker-grid .day[aria-selected="true"] {
  background: color-mix(in srgb, var(--lg-ink) 85%, transparent);
  color: var(--lg-opaque-bg);
}
.lg-datepicker-grid .day:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: -2px; /* lint: structural */
}

/* ---------- dropzone（drag over の間だけガラス化 = transient の応用） ---------- */
.lg-dropzone {
  min-height: var(--lg-dropzone-min-height);
  border-radius: var(--lg-dropzone-radius);
  border: 1.5px dashed color-mix(in srgb, var(--lg-ink) /* lint: structural */
    calc(var(--lg-dropzone-border-alpha) * 100%), transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lg-ref-space-sm);
  padding: var(--lg-ref-space-xl);
  color: color-mix(in srgb, var(--lg-ink) 65%, transparent);
  font-size: var(--lg-ref-type-body-size);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--lg-ref-duration-fade) ease,
    background var(--lg-ref-duration-fade) ease,
    box-shadow var(--lg-ref-duration-fade) ease;
}
.lg-dropzone.is-over {
  border-style: solid;
  border-color: color-mix(in srgb, var(--lg-rim)
    calc(var(--lg-ref-alpha-rim-mid) * 100%), transparent);
  background: color-mix(in srgb, var(--lg-ref-color-white) 6%, transparent);
  -webkit-backdrop-filter: blur(var(--lg-material-regular-thin-blur))
    saturate(var(--lg-material-regular-saturate));
  backdrop-filter: blur(var(--lg-material-regular-thin-blur))
    saturate(var(--lg-material-regular-saturate));
  box-shadow: 0 0 18px color-mix(in srgb, var(--lg-rim) /* lint: structural */
    calc(var(--lg-ref-alpha-rim-mid) * 60%), transparent);
  color: var(--lg-ink);
}
.lg-dropzone:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}
.lg-dropzone input[type="file"] { display: none; }
.lg-dropzone .files { font-size: var(--lg-ref-type-caption-size); opacity: 0.8; }

/* ------------------------------------------------------------
   phase 6 — 画面レイアウト型（.lg-page / .lg-layout-*）
   Web サービスの画面類型を全て SP 対応で。breakpoint は
   md 900 / sm 640（tokens.ref.breakpoint と同値リテラル）
   ------------------------------------------------------------ */

/* ---------- page: 全画面共通のコンテンツ容器 ---------- */
.lg-page {
  width: 100%;
  max-width: var(--lg-layout-page-max);
  margin-inline: auto;
  padding-inline: var(--lg-layout-page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--lg-layout-section-gap);
  padding-bottom: var(--lg-ref-space-4xl);
  color: var(--lg-ink);
}
@media (max-width: 640px) {
  .lg-page { padding-inline: var(--lg-layout-page-pad-sp); gap: var(--lg-ref-space-xl); }
}

/* ---------- page header: 径路 + 見出し + アクション ---------- */
.lg-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-sm);
}
.lg-page-header .row {
  display: flex;
  align-items: center;
  gap: var(--lg-ref-space-md);
  flex-wrap: wrap;
}
.lg-page-header .row .actions {
  margin-left: auto;
  display: flex;
  gap: var(--lg-ref-space-sm);
  align-items: center;
}
@media (max-width: 640px) {
  .lg-page-header .row .actions { margin-left: 0; width: 100%; }
  .lg-page-header .row .actions .lg-button { flex: 1; }
}

/* ---------- toolbar: フィルタ・検索・一括操作の行 ---------- */
.lg-toolbar {
  display: flex;
  align-items: center;
  gap: var(--lg-ref-space-sm);
  flex-wrap: wrap;
}
.lg-toolbar .spacer { margin-left: auto; }
.lg-page > .lg-toolbar {
  margin-bottom: calc((var(--lg-layout-section-gap) - var(--lg-ref-space-lg)) * -1);
} /* header ‖ (toolbar+コンテンツ) のグルーピング */
@media (max-width: 640px) {
  .lg-toolbar .spacer { margin-left: 0; width: 100%; height: 0; }
  .lg-toolbar .lg-field--fill,
  .lg-toolbar .lg-select { width: 100%; }
}

/* ---------- stats grid ---------- */
.lg-grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lg-layout-stats-min), 1fr));
  gap: var(--lg-ref-space-lg);
}
@media (max-width: 640px) {
  .lg-grid-stats { grid-template-columns: repeat(2, 1fr); gap: var(--lg-ref-space-md); }
}

/* ---------- split: 本文 + メタサイド（Detail 型の骨格） ---------- */
.lg-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lg-layout-split-aside);
  gap: var(--lg-ref-space-lg);
  align-items: start;
}
@media (max-width: 900px) {
  .lg-split { grid-template-columns: minmax(0, 1fr); } /* 1fr だと min-width:auto が復活し表で溢れる */
  .lg-split--aside-first > :last-child { order: -1; } /* メタ先頭（Detail 等の opt-in） */
}

/* ---------- form layout（編集/新規の1カラム） ---------- */
.lg-layout-form {
  width: 100%;
  max-width: var(--lg-layout-form-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-xl);
}

.lg-page .lg-layout-form { margin-inline: 0; } /* シェル内は左軸。中央寄せは focus のみ */

/* ---------- action bar: 保存/キャンセルの操作クラスタ（ガラス1枚） ---------- */
.lg-actionbar {
  --lg-r: var(--lg-ref-radius-pill);
  position: sticky;
  bottom: var(--lg-ref-space-lg);
  z-index: var(--lg-ref-z-menu);
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: var(--lg-layout-actionbar-gap);
  padding: var(--lg-ref-space-sm);
}
.lg-actionbar .hint {
  font-size: var(--lg-ref-type-caption-size);
  color: color-mix(in srgb, var(--lg-ink) 60%, transparent);
  padding-inline: var(--lg-ref-space-md);
}
@media (max-width: 640px) {
  .lg-actionbar {
    align-self: stretch;
    bottom: var(--lg-ref-space-sm);
    justify-content: stretch;
  }
  .lg-actionbar .lg-button { flex: 1; }
  .lg-actionbar .hint { display: none; }
}

/* ---------- focus layout（新規作成/ウィザード。ナビを消し集中させる） ---------- */
.lg-layout-focus {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-2xl);
  padding: var(--lg-ref-space-lg);
  box-sizing: border-box;
}
.lg-focus-bar {
  --lg-r: var(--lg-ref-radius-xl);
  display: flex;
  align-items: center;
  gap: var(--lg-ref-space-md);
  height: var(--lg-shell-topbar-height);
  padding-inline: var(--lg-ref-space-lg);
}
.lg-focus-bar .lg-type-heading { margin-right: auto; }
.lg-layout-focus .lg-layout-form { flex: 1; }
.lg-layout-focus .lg-stepper { max-width: var(--lg-layout-form-max); margin-inline: auto; width: 100%; }

/* ---------- auth layout（中央1カラム + ガラスカード） ---------- */
.lg-layout-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--lg-ref-space-lg);
  box-sizing: border-box;
}
.lg-auth-card {
  --lg-r: var(--lg-ref-radius-xl);
  margin: auto; /* 親が grid でも flex でも中央（参照実装の崩れ対策） */
  width: min(var(--lg-layout-auth-card-width), 100%);
  padding: var(--lg-ref-space-3xl) var(--lg-ref-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-lg);
}

/* ---------- settings layout（サブナビ + セクション群） ---------- */
.lg-layout-settings {
  display: grid;
  grid-template-columns: var(--lg-layout-subnav-width) minmax(0, 1fr);
  gap: var(--lg-ref-space-2xl);
  align-items: start;
}
.lg-subnav {
  display: flex;
  flex-direction: column;
  gap: var(--lg-ref-space-2xs);
  position: sticky;
  top: var(--lg-ref-space-lg);
}
.lg-subnav a,
.lg-subnav button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: var(--lg-ref-type-body-size);
  color: color-mix(in srgb, var(--lg-ink) 65%, transparent);
  padding: var(--lg-ref-space-sm) var(--lg-ref-space-md);
  border-radius: var(--lg-ref-radius-sm);
}
.lg-subnav a:hover, .lg-subnav button:hover { color: var(--lg-ink); }
.lg-subnav [aria-current="true"],
.lg-subnav [aria-current="page"] {
  color: var(--lg-ink);
  background: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-ref-alpha-pill) * 100%), transparent);
}
.lg-subnav a:focus-visible, .lg-subnav button:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}
@media (max-width: 900px) {
  .lg-layout-settings { grid-template-columns: 1fr; gap: var(--lg-ref-space-lg); }
  .lg-subnav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--lg-ref-space-xs);
    -webkit-overflow-scrolling: touch;
  }
  .lg-subnav a, .lg-subnav button { white-space: nowrap; }
}

/* ------------------------------------------------------------
   phase 7 — 昇格部品: icon-button / kv（description list）/ prose
   （ショーケースの ad hoc 実装を正式部品化。利用ルールは docs/08）
   ------------------------------------------------------------ */

/* ---------- icon button（円形・塗り。ガラス上/コンテンツ層 両用の汎用操作子） ---------- */
.lg-icon-button {
  flex: none; /* flex 行で潰れて楕円にならない */
  appearance: none;
  border: 0;
  cursor: pointer;
  flex: none;
  width: var(--lg-icon-button-size);
  height: var(--lg-icon-button-size);
  border-radius: var(--lg-ref-radius-pill);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--lg-ink) 10%, transparent);
  color: var(--lg-ink);
  font-family: inherit;
  font-size: var(--lg-icon-button-font-size);
  line-height: 1;
}
.lg-icon-button:hover { background: color-mix(in srgb, var(--lg-ink) 16%, transparent); }
.lg-icon-button:focus-visible {
  outline: var(--lg-ref-size-focus-width) solid var(--lg-ink);
  outline-offset: var(--lg-ref-size-focus-offset);
}

/* ---------- kv（description list。dl/dt/dd。コンテンツ層） ---------- */
.lg-kv {
  display: flex;
  flex-direction: column;
  gap: var(--lg-kv-gap);
  margin: 0;
  font-size: var(--lg-ref-type-body-size);
  color: var(--lg-ink);
}
.lg-kv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--lg-ref-space-md);
}
.lg-kv dt {
  color: color-mix(in srgb, var(--lg-ink)
    calc(var(--lg-kv-key-alpha) * 100%), transparent);
}
.lg-kv dd { margin: 0; text-align: right; }
.lg-kv dd.strong { font-weight: var(--lg-ref-type-weight-semibold); }

/* ---------- prose（コンテンツ層の読みものコンテナ） ---------- */
.lg-prose {
  font-size: var(--lg-ref-type-body-size);
  line-height: var(--lg-ref-type-leading-body);
  color: var(--lg-ink);
}
.lg-prose p { margin: 0 0 1em; } /* lint: structural */
.lg-prose p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   phase 8 — icon system（Lucide / ISC。sprite は js/lg-icons.js が注入）
   マークアップ: <i data-lg-icon="search"></i> → svg.lg-icon に置換
   ------------------------------------------------------------ */
.lg-icon {
  flex: none;
  width: var(--lg-ref-size-icon);
  height: var(--lg-ref-size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--lg-ref-size-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.lg-icon--lg {
  width: var(--lg-ref-size-icon-lg);
  height: var(--lg-ref-size-icon-lg);
}
.lg-empty .lg-icon {
  width: var(--lg-empty-icon-size);
  height: var(--lg-empty-icon-size);
  opacity: 0.4;
}
.lg-stepper .dot .lg-icon,
.lg-select-trigger .caret .lg-icon {
  width: var(--lg-ref-type-micro-size);
  height: var(--lg-ref-type-micro-size);
}

/* ------------------------------------------------------------
   a11y 縮退（prefers-reduced-* / opaque モード）— 全部品の縮退を一元管理
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .lg-glass,
  .lg-glass::before,
  .lg-glass::after,
  .lg-button,
  .lg-tab,
  .lg-nav-pill,
  .lg-field,
  .lg-backdrop,
  .lg-modal {
    transition: none !important;
    animation: none !important;
  }
}
/* ---------- phase 3 preferences ---------- */
@media (prefers-reduced-transparency: reduce) {
  .lg-tooltip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--lg-opaque-bg) !important;
    color: var(--lg-opaque-ink) !important;
  }
  .lg-switch input:active + .lg-switch-track .lg-switch-knob,
  .lg-slider:active::-webkit-slider-thumb {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
html.lg-mode-opaque .lg-tooltip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--lg-opaque-bg) !important;
  color: var(--lg-opaque-ink) !important;
}
@media (prefers-reduced-motion: reduce) {
  .lg-menu,
  .lg-menu-item,
  .lg-toast,
  .lg-tooltip,
  .lg-switch-track,
  .lg-switch-knob,
  .lg-check-box,
  .lg-chip,
  .lg-table tbody tr {
    transition: none !important;
    animation: none !important;
  }
}
/* ---------- phase 4 preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .lg-spinner,
  .lg-button.is-loading::before { animation-duration: calc(var(--lg-progress-duration) * 3); }
  .lg-skeleton::after,
  .lg-progress.is-indeterminate::before { animation: none !important; }
  .lg-banner { transition: none !important; }
}
/* ---------- phase 5 preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .lg-shell .lg-sidebar,
  .lg-shell::after,
  .lg-dropzone,
  .lg-accordion summary::after { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .lg-dropzone.is-over {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--lg-opaque-bg) !important;
  }
}