/*
 * post 18424 /shooting-rules/ 専用 CSS
 *
 * 2026-08-14 にブロックエディタ互換化（Phase 1 の記事版）で本文の <style> から逐語移設した。
 * 撮影機材の比較表 .camera-table が使う。本番 DB 全体でこの投稿にしか存在しないことを
 * 確認済み（2026-08-14）。この投稿でだけ読み込む。
 */

.camera-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.camera-table th,
.camera-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.camera-table th {
    background-color: #e8e8e8;
    font-weight: bold;
    text-align: center;
}

.category-header {
    background-color: #e8e8e8;
    font-weight: bold;
    text-align: center;
    width: 120px;
}

.subcategory {
    background-color: #f8f8f8;
    font-weight: bold;
    width: 100px;
}

.camera-table ul {
    margin: 0;
    padding-left: 20px;
}

.camera-table li {
    margin: 2px 0;
}

/*
 * 移設で増やした唯一の宣言（2026-08-14）。
 *
 * 本文から <style> タグを消したことで .camera-table が .smb-box__body の最初の子に
 * 繰り上がり、WordPress のレイアウト規則（:where(.is-layout-constrained, .is-layout-flow…) 系が
 * 最初の子の上マージンを 0 にする）に当たって上の 20px が落ちた。実測で表が 20px せり上がり、
 * ボックスの高さが 701.62px → 681.62px になることを確認している。
 *
 * 上の `.camera-table { margin: 20px 0 }` は移設元のままだが、詳細度で負けるので効かない。
 * 「見た目を 1px も変えない」ため、ここで元の 20px を戻す。
 *
 * 🔑 一般則: 本文から <style> を除去すると、その要素が占めていた兄弟の位置がずれる。
 *    :first-child / :last-child / :nth-child に当たる箇所は、無効化テスト（disabled=true）
 *    では検知できない（要素は DOM に残るため）。移設後は必ず実物で計算値を突き合わせること。
 */
.postid-18424 .smb-box__body > .camera-table {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .camera-table {
        font-size: 12px;
    }
    
    .camera-table th,
    .camera-table td {
        padding: 8px;
    }
}