/* 豆知識(オープニングの一覧・詳細ページ) */

.tips-list {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 16px;
}

.tips-heading {
    text-align: center;
}

/* 一覧のカード・ラベル・詳細の名前の下の並び(.detail-meta)は common/css/cards.css */

/* 一覧の上の「難易度 × 作戦」の図(parts/grid.html)。base.css の table(外枠・角丸・見出しの背景)をそのまま使い、
   幅・2列を同じ幅にすること・列と行の線・名前の並びだけ足す。見出しのラベルは cards.css の .badge */
.opening-grid {
    width: 100%;
    max-width: 700px;
    table-layout: fixed;
}

.opening-grid th:first-child {
    width: 4.5em;
}

.opening-grid th:not(:last-child),
.opening-grid td:not(:last-child) {
    border-right: 1px solid var(--color-beige-dark);
}

.opening-grid tbody tr:not(:last-child)>* {
    border-bottom: 1px solid var(--color-beige-dark);
}

.opening-grid td {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.opening-grid-names {
    margin: 0;
    padding: 0;
    list-style: none;
}

.opening-grid-names li {
    margin: 2px 0;
    overflow-wrap: anywhere;
}

/* 名前のリンクは .blue-link(色・下線なし)。base.css の .blue-link は折り返さない(nowrap)ので、
   表の枠の中では長い名前を折り返す */
.opening-grid-names .blue-link {
    white-space: normal;
}

.opening-grid-names .card-draft {
    margin-bottom: 0;
}

/* 詳細 */
.opening-summary {
    max-width: 700px;
    margin: 0 auto 20px;
    padding: 0 16px;
    text-align: left;
}

.opening-comment-title {
    margin: 30px auto 0;
    text-align: center;
    font-family: var(--font-rounded);
    font-size: 1.1rem;
    color: var(--color-orange);
}

/* 今の手の解説(盤の下。短い解説でも高さを取り、盤の下の並びが手ごとに動かないようにする) */
.opening-comment {
    min-height: 3.2em;
    margin: 0 0 20px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--color-beige-medium);
    font-weight: bold;
    text-align: left;
}

.opening-sections {
    max-width: 700px;
    margin: 30px auto 0;
    padding: 0 16px;
    text-align: left;
}

.opening-section h3 {
    margin: 20px 0 8px;
    color: var(--color-blue-dark);
}

.opening-section p {
    margin: 0;
}

/* 非公開の帯(スタッフのプレビュー。lesson.css と同じ見た目) */
.draft-label {
    margin: 0 auto 30px;
    padding: 10px;
    border: 3px solid var(--color-red-dark);
    color: var(--color-red-dark);
    text-align: center;
}

.draft-label .draft-label-title {
    margin: 0;
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 0.3em;
}

.draft-label .draft-label-note {
    margin: 5px 0 0;
    font-size: 14px;
}


/* 解析の計算メモ(スタッフ用。tips/notes/analysis.html) */
.tips-notes {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 16px;
    text-align: left;
}

.tips-notes p,
.tips-notes li {
    font-size: 0.85rem;
}

.tips-notes-lead {
    margin: 0 0 16px;
}

.tips-notes section {
    margin: 0 0 50px;
}


.tips-notes section ul {
    margin: 0 0 8px;
    padding-left: 1.5em;
}

.tips-notes section li {
    margin: 4px 0;
}

.tips-notes .expression {
    text-align: center;
    font-size: 1rem;
}

/* 表は base.css の table(外枠・角丸・見出しの背景)をそのまま使い、足りない分だけ足す。
   スマホで横に長くなったときは、表を包む div だけを横にスクロールする(表を display: block にすると、
   表の外枠とセルの線がずれて二重に見えるため) */
.tips-notes-table-wrap {
    overflow-x: auto;
    margin: 8px 0 12px;
}

.tips-notes-table {
    width: 100%;
    margin: 0;
    text-align: left;
    font-size: 0.85rem;
}

.tips-notes-table th,
.tips-notes-table td {
    padding: 6px 10px;
    vertical-align: top;
}

.tips-notes-table th {
    white-space: nowrap;
}

/* 列の間・行の間の線(base.css は1列目の右だけ) */
.tips-notes-table th:not(:last-child),
.tips-notes-table td:not(:last-child) {
    border-right: 1px solid var(--color-beige-dark);
}

.tips-notes-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--color-beige-dark);
}

/* 解説の最後の(補足)のリンク */
.opening-note-link {
    font-weight: normal;
    text-decoration: none;
    color: var(--color-blue-dark);
    white-space: nowrap;
}

/* 解説の補足のページ(tips/openings/notes.html)の一覧へのリンクと、オープニングの一覧の補足へのリンク */
.notes-back,
.tips-notes-link {
    margin-top: 30px;
    text-align: center;
}

/* 補足のページの「オープニングの一覧へ」と、一番下の 前・一覧・次 のアイコンの間の余白(記事の本文の hr と同じ) */
.notes-divider {
    margin: 30px 0;
    border: none;
}

/* 豆知識の記事(本文は Markdown から作った HTML。tips/data/articles/) */
.article {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: left;
}

.article-title {
    line-height: 1.5;
}

.article-updated {
    margin: 0 0 20px;
    text-align: center;
    color: var(--color-beige-dark);
}

.article-body {
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* もくじ(.toc)の見た目はブログと同じ(common/css/common.css)。本文の左右の余白の中に収める */
.article-body .toc {
    width: auto;
    margin: 30px 0;
}

.article-body .toc ol {
    margin: 10px 0;
    padding-left: 2.4em;
}

/* 本文のリンクは .blue-link(tips.articles.render_article が付ける)。長い題名のリンクは折り返す */
.article-body .blue-link {
    white-space: normal;
}

.article-body h2 {
    margin: 40px 0 12px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-beige-medium);
    color: var(--color-blue-dark);
    font-size: 1.3rem;
    /* もくじから飛んだとき、見出しが上の端にくっつかないように */
    scroll-margin-top: 80px;
}

.article-body h3 {
    margin: 28px 0 8px;
    color: var(--color-orange);
    font-size: 1.1rem;
    scroll-margin-top: 80px;
}

.article-body ul,
.article-body ol {
    padding-left: 1.4em;
}

.article-body li {
    margin: 4px 0;
}

.article-body hr {
    margin: 30px 0;
    border: none;
}

/* 表は狭い画面では横にスクロールさせ、ページ全体がはみ出さないようにする */
.article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 16px auto;
    width: fit-content;
}

.article-body th,
.article-body td {
    padding: 6px 12px;
    text-align: left;
}

/* 狭い画面で、点数(「3点と5点」「点数なし」)や駒の名前が1・2字ずつ折り返されないようにする。
   本文の overflow-wrap: anywhere は表の中では外し、2列目からは語の途中で折り返さない(読み筋のように空白があれば、そこで折り返す)。
   駒の画像の付いた名前は1行に収める。それでも入らなければ、表だけ横にスクロールする */
.article-body table {
    overflow-wrap: normal;
}

.article-body td:not(:first-child) {
    word-break: keep-all;
}

.article-body td:has(> img.article-piece) {
    white-space: nowrap;
}

/* スマホでは本文の幅が狭い(280px ほど)ので、表のセルの左右の余白を詰める */
@media (max-width: 480px) {

    .article-body th,
    .article-body td {
        padding: 6px 8px;
    }
}

.article-body tbody tr:not(:last-child)>* {
    border-bottom: 1px solid var(--color-beige-medium);
}

/* 3列以上の表(候補の手・評価値・読み筋)は、2列目と3列目の間にも縦の線を引く
   (1列目の右の線は base.css の th:first-child。読み筋の列と数字の列を分ける) */
.article-body table:not(.article-io) :is(th, td):nth-child(2):not(:last-child) {
    border-right: 1px solid var(--color-beige-dark);
}

/* 入力・出力の表(左の列は rowspan でまとめた見出し)。2つの表の幅をそろえる(中の文は折り返す) */
.article-body .article-io {
    display: table;
    width: 100%;
    /* 見出し(thead)の無い表なので、base.css で消している上の線を引く */
    border-top: 1px solid var(--color-beige-dark);
}

.article-body .article-io th {
    padding: 6px 16px;
    vertical-align: middle;
    white-space: nowrap;
    background-color: var(--color-beige-light);
    color: var(--color-beige-deep);
}

/* 見出しは3行にまたがるので下の線は引かない。2・3行目の td は行の最初のセル(:first-child)になり、
   base.css の右の線が付いて外枠と二重になるので消す */
.article-body .article-io tbody tr>th {
    border-bottom: none;
}

.article-body .article-io tbody tr>td {
    border-right: none;
}

/* FEN などの1行の文字。長いので、狭い画面では途中で折り返す */
.article-body pre {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: var(--color-beige-bright);
    font-size: 0.9rem;
    line-height: 1.5;
}

.article-body code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 16px auto 0;
    padding-bottom: 10px;
}

/* 画面のスクリーンショット(Markdown では ![…](static:…){.article-screenshot})。背景が白いので枠で区切る */
.article-body img.article-screenshot {
    border: 1px solid var(--color-beige-deep);
}

/* 縦に長い図(盤のスクリーンショットなど)。横幅いっぱいに広げると画面からはみ出すので、幅を抑える */
.article-body img.article-narrow {
    max-width: min(100%, 420px);
}

/* 表の中の駒の画像(Markdown では ![](static:game/pieces/bQ.png){.article-piece}。白の駒は表の白い背景に溶けるので黒の駒)。文字の横に並べる */
.article-body img.article-piece {
    display: inline-block;
    width: 24px;
    height: 24px;
    /* 本文の画像の max-width: 100% のままだと、表の列の幅を決めるときに画像の幅が数えられず、名前がはみ出す */
    max-width: none;
    margin: 0 4px 0 0;
    padding: 0;
    vertical-align: middle;
}

/* 図の下の説明(Markdown では画像の直後の行に *…* で書く。間の <br> は render_article が外す) */
.article-body img+em {
    display: block;
    font-style: normal;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-beige-dark);
}