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

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

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

.tips-back {
    margin: 20px 0;
    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-staff-link {
    margin: 30px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

/* 解析の計算メモ(スタッフ用。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);
}