Base Styles

/*
  方針:
    できるだけブラウザの標準スタイルに従いながら、レイアウト崩れを防止し、最低限のアクセシビリティの確保する。
    文書構造を壊して読みづらくなるようなスタイルリセットはしない。
    @layer で優先度を下げる。

  参考:
    https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522
    https://keithjgrant.com/posts/2024/01/my-css-resets/
    https://www.joshwcomeau.com/css/custom-css-reset/
    https://piccalil.li/blog/a-modern-css-reset/
    https://codepen.io/argyleink/pen/KKvRORE
 */

@layer reset {
  *,
  ::before,
  ::after {
    /* box-sizing は 全要素に対して border-box で統一 */
    box-sizing: border-box;
  }

  /* margin は（dialog以外）全て 0 にリセットする (padding はリセットしない) */
  *:not(dialog) {
    margin: 0;
  }

  /* --------------------------------------------------
   Documents
  -------------------------------------------------- */
  html {
    /* iOSで横向きにした時のフォントサイズ自動調節をオフにする */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    /* 文章の折り返し指定 🔗:https://ics.media/entry/240411/ */
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /* 禁則処理を厳格に適用 */
    overflow-wrap: anywhere; /* 収まらない場合に折り返す */

    /* デフォルトの 8 はでかすぎる */
    tab-size: 4;

    /* 要素はみ出しによる横スクロールの発生を防止. (overflow は 継承プロパティではないので両方記述） */
    overflow-x: clip;

    /* モーダルが開いている時はコンテンツをスクロールさせない */
    &:has(:modal[open]) {
      overflow: clip; /* sticky 要素がくずれないように clip */
    }
  }

  body {
    /* htmlから継承する */
    overflow: inherit;

    /* bodyの高さを最低限確保する (子要素でheight:100%が効くわけではない) */
    min-height: 100dvh;
  }

  /* --------------------------------------------------
   Texts
  -------------------------------------------------- */
  abbr[title] {
    /* Safar で アンダーラインが出ないので明示的に指定して統一する */
    text-decoration: underline;
    text-decoration-style: dotted;
  }

  pre {
    /* 水平スクロールできるようにする */
    overflow-x: auto;
  }

  /* クラスを持つリストのみスタイルをリセットする。（ブラウザ標準スタイルを利用できる余地を残す） */
  menu,
  :is(ul, ol)[class] {
    list-style: none;
    padding: 0;
  }

  /* --------------------------------------------------
   Medias
  -------------------------------------------------- */
  svg,
  img,
  video,
  audio,
  iframe,
  object,
  canvas {
    /* 隙間ができるのを防ぐ。( display はいじらない。) */
    vertical-align: middle;

    /* 親要素をはみ出さないようにする */
    max-inline-size: 100%;
  }

  img,
  video {
    /* img,video の縦横比を維持。（svg,iframe や audioは 高さがつぶれるので指定しない */
    block-size: auto;
  }

  iframe {
    border: none;
  }

  /* --------------------------------------------------
   Form Fields
  -------------------------------------------------- */
  input,
  button,
  textarea,
  select,
  ::file-selector-button {
    /* 基本要素のフォントとカラーを本文から継承 */
    font: inherit;
    color: inherit;

    /* iOSで入力時の拡大を防ぐ. ( button には必要ないが、フォーム全体のフォントサイズを揃えるために一括で適用する ) */
    font-size: max(16px, 1em);
  }

  fieldset {
    /* デフォルトの min-content によってコンテンツ( colsの大きい textarea など )がはみ出すのを防ぐ */
    min-inline-size: 0;
  }

  textarea {
    /* リサイズ方向を制限する. */
    resize: block;
    max-inline-size: 100%;
  }

  /* --------------------------------------------------
   cursor 初期セット
  -------------------------------------------------- */
  label[for],
  select,
  summary,
  [type='radio'],
  [type='checkbox'] {
    cursor: pointer;
  }

  button,
  [role='tab'],
  [role='button'],
  [role='option'],
  [type='button'],
  [type='reset'],
  [type='submit'],
  ::file-selector-button {
    cursor: pointer;

    /* ダブルタップ時のズームアクションを無効化 */
    touch-action: manipulation;
  }

  :disabled {
    cursor: not-allowed;
  }

  /* --------------------------------------------------
   その他
  -------------------------------------------------- */
  [hidden='until-found'] {
    /* 意図せず他の要素の上にかぶってしまうのを防ぐ (until-found は stacking context を生成する) */
    z-index: -1;
  }
}

/* --------------------------------------------------
  body
-------------------------------------------------- */
body {
  --hl: var(--hl--base);
  font-size: var(--fz--base);
  font-family: var(--ff--base);
  letter-spacing: var(--lts--base);
  background-color: var(--base);
  color: var(--text);
  text-underline-offset: var(--under-offset, 0.125em);
}

/* --------------------------------------------------
  line-height
-------------------------------------------------- */
* {
  line-height: calc(1em + var(--hl) * 2);
}

/* --------------------------------------------------
  Heading
-------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--headings-ff, inherit);
  font-weight: var(--headings-fw, var(--fw--bold));
}
h1 {
  font-size: var(--fz--3xl);
}
h2 {
  font-size: var(--fz--2xl);
}
h3 {
  font-size: var(--fz--xl);
}
h4 {
  font-size: var(--fz--l);
}
h5,
h6 {
  font-size: var(--fz--m);
}

/* --------------------------------------------------
  texts
-------------------------------------------------- */
a {
  color: var(--link-c, var(--link));
  text-decoration: var(--link-td, underline);
  text-decoration-thickness: var(--link-td-thickness, auto);
  text-decoration-color: var(--link-td-color, currentColor);
}

small {
  --hl: var(--hl--s);
  font-size: var(--fz--xs);
}

b,
strong {
  font-weight: var(--fw--bold);
}

sup,
sub {
  --hl: var(--hl--xs);
  font-size: 80%;
}

code,
kbd,
var,
samp {
  font-family: var(--ff--mono);
}

blockquote {
  background-color: var(--base-2);
  padding: var(--s30);
}

legend,
caption,
figcaption {
  font-size: var(--fz--s);
}

hr {
  border: none;
  block-size: 0;
  border-block-start: 1px solid var(--divider);
}

/* --------------------------------------------------
  list
-------------------------------------------------- */
// classを持たないリスト要素はブラウザ標準のスタイルを復活させる。
// Property Class だけの ul/ol など、明示的に戻したい場合は `.set--revert` を付与する（base/set/_revert.scss）。
:is(ul, ol):where(:not([class])) {
  list-style: revert;
  padding-inline-start: var(--list-px-s, 1.75em);
}

dt {
  font-weight: var(--fw--bold);
}
dd + dt {
  margin-block-start: var(--s20);
}

/* --------------------------------------------------
  table
-------------------------------------------------- */
table {
  --td-c: inherit;
  --td-bgc: transparent;
  --td-p: var(--s10);
  --td-min-sz: initial;
}
td {
  color: var(--td-c);
  background-color: var(--td-bgc);
  padding: var(--td-p);
  min-inline-size: var(--td-min-sz);
}
th {
  // デフォルト: tdと同じスタイル
  color: var(--th-c, var(--td-c));
  background-color: var(--th-bgc, var(--td-bgc));
  padding: var(--th-p, var(--td-p));
  min-inline-size: var(--th-min-sz, var(--td-min-sz));
}

/* --------------------------------------------------
  Form fields
-------------------------------------------------- */
input,
button,
textarea,
select,
::file-selector-button {
  // フォーム系コントロールの最低限の見た目（テーマ差し替えは --controls-*）
  background-color: var(--controls-bgc, var(--base-2));
  border: solid 1px var(--controls-bdc, var(--divider));
  padding: var(--controls-p, var(--s5) var(--s10));
  border-radius: var(--controls-bdrs, var(--bdrs--10));
}

:disabled {
  opacity: var(--o--pp);
}

/* --------------------------------------------------
  フォーカス要素
-------------------------------------------------- */
:focus-visible {
  outline-offset: var(--focus-offset, 0px);
}