/*
 * STUDIO ベーススタイル
 * 旧 .sd / .text / .button / .link / .fixed クラスの代替
 * @layer base に配置し、コンポーネントCSS(unlayered)が常に優先される
 */
@layer base {
  /* .sd 相当: 全構造要素のflexベース */
  .StudioCanvas :is(div, section, main, nav, button, label, form, ul, ol, li, footer, figure, address, dl, dd, img, svg, input, textarea, select, article, table, thead, tbody, tr, th, td, fieldset) {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    align-content: center;
    position: relative;
    max-width: 100%;
    pointer-events: all;
    z-index: 0;
    flex-wrap: nowrap;
  }

  /* .text 相当: インタラクティブ/インライン要素はrow flex（アイコン配置等に必要） */
  .StudioCanvas :is(span, a, i, th, td, legend) {
    display: flex;
    flex: none;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: relative;
    max-width: 100%;
    pointer-events: all;
    z-index: 0;
    flex-wrap: nowrap;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* テキスト要素: flexではなくブロック表示（自然なテキストフロー） */
  .StudioCanvas :is(p, h1, h2, h3, h4, dt, time, figcaption) {
    position: relative;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* input/textarea の例外処理 */
  .StudioCanvas :is(input, textarea) {
    align-content: normal;
  }

  /* ルートコンテナ */
  .StudioCanvas > div {
    min-height: 100dvh;
    overflow: clip;
  }

/* .button 相当 */
  .StudioCanvas button {
    transition: .4s var(--ease-default);
    cursor: pointer;
  }

  /* .link 相当 */
  .StudioCanvas a {
    cursor: pointer;
  }

  /* scrollbar非表示 */
  .StudioCanvas :is(div, section, main, nav, button, label, form, ul, ol, li, footer, figure, address, dl, dd, p, h1, h2, h3, h4, span, a, i, dt, time, figcaption)::-webkit-scrollbar {
    display: none;
  }

  /* transition-property（グラデーションアニメーション用） */
  .StudioCanvas :is(div, section, main, nav, button, label, form, ul, ol, li, footer, figure, address, dl, dd, p, h1, h2, h3, h4, span, a, i, dt, time, figcaption, input, textarea, select, img, svg) {
    transition-property: all;
  }
}