/* 日本語の折り返し。既定の禁則処理だけだと行末で機械的に折られ、最終行に「ん。」のような
   1〜2文字だけが残る。対応ブラウザでは文節単位で折り、最終行が極端に短くなるのも避ける。 */
.md-typeset {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* サイドバーは .md-typeset の外なので上の指定が効かず、「ドキュメ／ント」のように
   語の途中で折り返される。keep-all で日本語のまとまりを保つ。 */
.md-nav__title,
.md-nav__link {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* デスクトップではヘッダーに同じサイト名が出ているので、サイドバー上部の見出しは重複。
   モバイルではドロワーの見出しとして必要なので、広い画面でだけ隠す。 */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }
}

/* サイドバーは「ホーム・利用規約」と「製品」が同じ見た目で並ぶため、どこからが製品か
   分からない。折りたたみ項目（製品）の先頭に区切りと見出しを入れて、群を分ける。
   最初の製品は「非折りたたみ項目の直後にある折りたたみ項目」で特定できる。 */
.md-nav--primary
  > .md-nav__list
  > .md-nav__item:not(.md-nav__item--nested)
  + .md-nav__item--nested::before {
  content: "製品";
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
}

/* 識別子やパスは文節では割れないので、コードは既定の折り返しに戻す。 */
.md-typeset code,
.md-typeset pre {
  word-break: normal;
}

/* 既定のテーマは見出しの主張が弱く、節の切れ目が本文に埋もれる。
   マニュアルは拾い読みされるので、h1〜h3 をはっきり分ける。 */

.md-typeset h1 {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 700;
  font-size: 1.45rem;
  margin-top: 2.4em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--md-primary-fg-color);
}

/* スクリーンショットは Unity の暗い画面なのでページ背景に溶ける。枠を付けて本文と分ける。 */
.md-typeset img {
  max-width: 100%;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 4px;
}

.md-typeset h3 {
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 1.8em;
  padding-left: 0.5em;
  border-left: 4px solid var(--md-default-fg-color--lighter);
}

/* ブランドロゴはマーク＋M.G.R の縦組み。既定の 1.2rem では潰れるので、
   ヘッダーを広げてロゴ全体が読める高さを確保する。 */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  width: auto;
  height: 3.2rem;
}

.md-header__button.md-logo {
  padding: 0.4rem 0.6rem;
}

/* よくある質問。質問と回答が同じ字面だと対が読み取れないので、質問は大きく、
   回答は一段下げて色を落とす。Q. / A. の目印は本文に書かずここで付ける。 */
.md-typeset dl dt {
  margin-top: 2em;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset dl dt::before,
.md-typeset dl dd::before {
  display: inline-block;
  width: 1.5em;
  margin-left: -1.5em;
  font-weight: 700;
  color: var(--md-accent-fg-color);
}

.md-typeset dl dt::before {
  content: "Q.";
}

.md-typeset dl dd::before {
  content: "A.";
}

.md-typeset dl dt,
.md-typeset dl dd {
  padding-left: 1.5em;
}

.md-typeset dl dd {
  margin: 0.5em 0 0;
  color: var(--md-default-fg-color--light);
}

/* 暗色・明色の2表は別々に列幅が決まるため、そのままだと見本の位置がずれる。列幅を固定して揃える。
   1列目は最長のテーマ名（コントロールルーム（既定））が折り返さない幅にしないと、
   そこだけ列が広がって表どうしがずれる。 */
.md-typeset .theme-table table {
  width: 100%;
  table-layout: fixed;
}

.md-typeset .theme-table th:first-child,
.md-typeset .theme-table td:first-child {
  width: 15em;
}

.md-typeset .theme-table th:nth-child(2),
.md-typeset .theme-table td:nth-child(2) {
  width: 8em;
}

/* テーマの配色見本。明色テーマの白がページ背景に溶けるので、帯の外周に枠を付ける。 */
.md-typeset .sw {
  display: inline-flex;
  vertical-align: -0.35em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 3px;
  overflow: hidden;
}

.md-typeset .sw i {
  display: block;
  width: 20px;
  height: 20px;
}

/* 対応プラットフォームのバッジ。VRChat 向けかどうかを一目で分かるようにする。 */
.md-typeset .badge {
  display: inline-block;
  padding: 0.05em 0.6em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 1em;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  vertical-align: 0.12em;
  color: var(--md-default-fg-color--light);
}

/* VRChat で使えるものは塗って目立たせる。使えないものは枠線のみ。 */
.md-typeset .badge--vrc {
  border-color: transparent;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

/* 製品一覧の1件ぶん。左にサムネイル、右に説明とリンクを積む。
   flex だと画像を含む段落が縮んでサムネイルの幅が製品ごとに揃わないため、グリッドで固定する。 */
.md-typeset .product-hero {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.4em 1.2em;
  align-items: start;
}

.md-typeset .product-hero > p {
  margin: 0;
}

/* 右側は「バッジ／説明／リンク」の3行。サムネイルはその全体に対して縦に通す。 */
.md-typeset .product-hero > p:first-child {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.md-typeset .product-hero > p:not(:first-child) {
  grid-column: 2;
}

/* 画面が狭いときは縦積みにする（横並びだと説明文が潰れる）。 */
@media screen and (max-width: 600px) {
  .md-typeset .product-hero {
    grid-template-columns: 1fr;
  }

  .md-typeset .product-hero > p:first-child {
    grid-row: auto;
    max-width: 130px;
  }
}

/* トップの製品一覧。サムネイルを主役にして、文字は製品名とバッジだけに絞る。
   説明を各製品ページへ寄せることで、6件を1画面に収める。 */
.md-typeset .product-grid {
  display: grid;
  /* rem はテーマ側で 1rem = 20px になっているため、列幅は px で指定する。
     本文カラム幅では3列、スマートフォンでは2列に落ちる。 */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.7rem;
  margin: 1em 0;
}

.md-typeset .product-card > * {
  margin: 0;
}

.md-typeset .product-card > p:first-child {
  line-height: 0;
}

/* サムネイルは製品ごとに縦横比がぶれることがあるので、正方形に切り揃える。 */
.md-typeset .product-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: none;
  border-radius: 4px;
}

/* 見出しの縦線は節の切れ目を示すためのもの。カード内では邪魔になるので外す。 */
.md-typeset .product-card h3 {
  margin-top: 0.4em;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  padding-left: 0;
  border-left: none;
}

.md-typeset .product-card .badge {
  margin-top: 0.25em;
}