/* 影文字メーカー。カード・選択肢・タブは縁文字メーカー(outline-maker.css)と共通で、ここは影の向きの盤・なぞる操作だけ */
.sm-layers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sm-tabs { display: flex; }
.sm-tabs > .om-tab { flex: 1 1 0; min-width: 0; }
.sm-note { margin: 0; color: var(--sub); font-size: 12px; line-height: 1.6; }

/* 向きの盤: 3x3。まんなかは「まわり」(ずらさない影) */
.sm-pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 56px); gap: 8px; justify-content: center; }
.sm-pad-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; transition: transform .12s, border-color .12s; }
.sm-pad-btn .ms { font-size: 26px; }
.sm-pad-btn:active { transform: scale(.94); }
.sm-pad-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--surface2); color: var(--accent-hi); }
.sm-pad-btn:disabled { opacity: .35; cursor: not-allowed; }
.sm-pad-hole { border-radius: 14px; border: 2px dashed var(--line); opacity: .5; }
.sm-pad-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 見本をなぞって影を動かす。なぞっているあいだは、画面がスクロールしないようにする */
#lm .stage.sm-draggable { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#lm .stage.sm-draggable.is-dragging { cursor: grabbing; }
#lm .stage.sm-draggable .stage-label { display: inline-flex; align-items: center; gap: 4px; }
#lm .stage.sm-draggable .stage-label::before { content: 'swipe'; font-family: 'Material Symbols Rounded'; font-size: 14px; font-weight: 400; line-height: 1; }
#lm .stage.sm-draggable.is-dragging .stage-art canvas { transition: none; }

@media (max-width: 719px) {
  .sm-tabs .om-tab .tool-name { font-size: 9.5px; }
  .sm-pad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 48px); gap: 6px; }
  }
@media (prefers-reduced-motion: reduce) {
  .sm-pad-btn { transition: none; }
  .sm-pad-btn:active { transform: none; }
}
.sm-layers .om-card b { font-size: 11px; white-space: nowrap; letter-spacing: -.02em; }