/*
 * 要素の既定（最小のリセットと和文組版のベースライン）。クラスのスタイルは書かない。
 * 和文組版は site-ja wabun.md の基準: line-break: strict・palt・負の字間なし・break-all なし。
 */
@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		margin: 0;
		background: var(--c-bg);
		color: var(--c-text);
		font-family: var(--font-sans);
		font-size: var(--fs-body);
		font-weight: 400;
		line-height: var(--lh-body);
		letter-spacing: var(--ls-base);
		font-feature-settings: "palt" 1, "kern" 1;
		line-break: strict;
		overflow-wrap: break-word;
		word-break: normal;
		-webkit-font-smoothing: antialiased;
	}

	/*
	 * 字間 .05em（XD）を文字の大きさごとに効かせる。em の字間は宣言した要素の文字サイズで px に確定してから継承されるため、
	 * body だけに書くと全部が 16px × .05 = 0.8px になる。文字を持つ要素ごとに宣言し直す。
	 * :where は詳細度 0 なので部品の指定（--ls-none / --ls-wide）が勝つ。親に letter-spacing を書いても子のこの宣言に負けるので、字間を変える部品は文字を持つ要素に直接書く。
	 * ページ単位で字間を変えるとき（下層は 0）は親に --ls-text を置く。カスタムプロパティは em を px にしないまま継承されるので、要素ごとの文字サイズで効く
	 */
	:where(h1, h2, h3, h4, h5, h6, p, li, a, span, time, dt, dd, th, td, figcaption, small, button, input, textarea, label) {
		letter-spacing: var(--ls-text, var(--ls-base));
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		font-size: inherit;
		font-weight: inherit;
		line-height: var(--lh-heading);
		text-wrap: balance;
		word-break: auto-phrase;
	}

	p,
	ul,
	ol,
	dl,
	dd,
	figure,
	blockquote {
		margin: 0;
	}

	p {
		text-wrap: pretty;
	}

	ul,
	ol {
		padding: 0;
		list-style: none;
	}

	img,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	button {
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		cursor: pointer;
	}

	small {
		font-size: inherit;
	}

	/* 太字は 700 に固定する（本文の地が 300 の所では bolder だと 400 止まり。記事本文・10の約束・お問い合わせの確認画面が同じ値を使う） */
	strong,
	b {
		font-weight: 700;
	}

	time {
		font-variant-numeric: tabular-nums;
	}

	/* リングは要素の外側に出るので、文字色ではなく外側の地に対して見える色（--c-focus）で描く。緑の面の上では白に上書きする */
	:focus-visible {
		outline: var(--bw-icon) solid var(--c-focus);
		outline-offset: var(--bw-icon);
	}
}