body {
  --board-renderer-border: 1px solid var(--md-sys-color-outline-variant);
  --board-renderer-max-width: 120px;
  --board-renderer-name-background-color: var(--secondary-text-color);
  --board-renderer-name-font: normal 13px var(--theme-font);
  --board-renderer-icon-size: 24px;
  --board-renderer-icon-border-radius: 10px;
  --board-renderer-font: bold 16px/25px var(--md-icon-font, 'Material Symbols Outlined');

  /* list page style*/
  --board-list-star-color: var(--md-sys-color-outline);
  --board-list-star-active-color: var(--status-warning-color);

  --card-list-rows-height: 180px;
  --card-list-color: var(--md-sys-color-on-surface);
  --card-list-background-color: var(--md-sys-color-surface-container-lowest);
  /* Material 3 shape token — data-grist 카드와 동일 톤 (corner-medium 외곽 +
   * corner-small 동심 안쪽). nested rounded containers 의 자연 계층. */
  --card-list-border-radius: var(--md-sys-shape-corner-medium);
  --card-list-thumbnail-radius: var(--md-sys-shape-corner-small);
  --card-list-flip-transform: rotateX(180deg);
  --card-list-create-border: 1px dashed var(--md-sys-color-primary);
  --card-list-create-border-radius: var(--border-radius);
  --card-list-create-icon-color: var(--md-sys-color-primary);
  --card-list-create-color: var(--md-sys-color-secondary);
  --card-list-create-form-padding: 15px;
  --card-list-create-label-font: normal 14px var(--theme-font);
  --card-list-create-label-color: var(--md-sys-color-secondary);
  --card-list-create-input-font: normal 14px var(--theme-font);
  --card-list-create-input-color: var();
  --card-list-create-input-border: 1px solid var(--md-sys-color-outline-variant);
  --card-list-create-input-border-radius: var(--border-radius);
  --card-list-create-input-padding: 2px 9px;
  --card-list-create-margin: 0 0 7px 0;

  /*
   * Modeller chrome - toolbar, palette rail, property panel - sits on the neutral surface scale.
   * It used to wear the accent roles (secondary, secondary-container): fine as a warm grey in
   * light, but in dark those roles are the *light* colours of the palette, so the toolbar became
   * a tan bar and the panel a brown block on a black page (2026-09-24). The accent belongs to the
   * selection and the pressed tool, not to the furniture.
   */
  --edit-toolbar-background-color: var(--md-sys-color-surface-container-high);
  --edit-toolbar-bigger-icon-size: 45px;
  --edit-toolbar-bigger-icon-line: 1px solid var(--md-sys-color-outline-variant);
  --component-toolbar-background-color: var(--md-sys-color-surface-container-low);
  /* Wide enough for a glyph with a caption under it. */
  --component-toolbar-icon-size: 64px;
  --component-toolbar-border: 1px solid var(--md-sys-color-outline-variant);
  --component-toolbar-icon-color: var(--md-sys-color-on-surface-variant);
  --component-toolbar-active-background: var(--md-sys-color-secondary-container);
  --component-toolbar-hover-background: var(--md-sys-color-surface-container-high);
  --component-menu-title-background: var(--md-sys-color-surface-container-highest);
  --component-menu-title-color: var(--md-sys-color-on-surface);
  --component-menu-background-color: var(--md-sys-color-surface-container-high);
  --component-detail-background-color: var(--md-sys-color-surface-container-high);
  --component-menu-border-color: var(--md-sys-color-outline-variant);
  --component-menu-title: bold 11px/16px var(--theme-font);
  --component-menu-item-color: var(--md-sys-color-on-surface-variant);
  --component-menu-item-hover-color: var(--md-sys-color-on-surface);
  --component-menu-item-icon-size: 20px;
  --property-sidebar-background-color: var(--md-sys-color-surface-container);
  --property-sidebar-tab-icon-color: var(--md-sys-color-on-surface-variant);
  --property-sidebar-fieldset-border: 1px solid var(--md-sys-color-outline-variant);
  --property-sidebar-fieldset-label: normal 0.78rem/1.3 var(--theme-font);
  --property-sidebar-fieldset-legend-color: var(--md-sys-color-on-surface);
  --property-sidebar-fieldset-legend: 600 0.74rem/1.4 var(--theme-font);
  /*
   * 씬 아웃라인은 목록/트리라서 본문 성격이다. 강조 역할(secondary·primary)을 글자색과 칩 배경에
   * 쓰고 있어서 패널 전체가 브랜드색으로 물들고, 다크에서는 그 역할들이 밝아져 더 튀었다.
   * 글자는 표면 위 본문 역할로, 선택 표시만 브랜드 강조색으로 남긴다.
   */
  --scene-inspector-color: var(--md-sys-color-on-surface);
  --scene-inspector-selected-background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
  --scene-inspector-selected-border: 1px solid var(--md-sys-color-primary);
  /* 개수 칩 — primary 는 큰 면이 아니어도 글자와 짝이 맞아야 한다 */
  --scene-inspector-name-background-color: var(--md-sys-color-surface-container-highest);
  --scene-inspector-eye-icon-color: var(--md-sys-color-on-surface-variant);
}

@media (min-width: 461px) and (max-width: 1024px) {
  body {
    --card-list-create-form-padding: 7px;
  }
}