/**
 * 記事内の共通パーツ（囲みボックス・テーブル）のスタイル。
 *
 * 記事本文のHTMLはDBに保存されるためTailwindのスキャン対象にできない。
 * そのためこのファイルだけプレーンCSSで定義する
 * （色はテーマトークンと揃える: line=#e5e5e5, th背景=#f7f7f7）。
 * enqueue_block_assets でフロントとエディタ(iframe内)の両方に読み込まれる。
 * tabitoshigotoテーマの css/article-blocks.css から移植。
 *
 * 注意: クラシックテーマ(theme.jsonなし)ではグループブロックの中身が
 * .wp-block-group__inner-container で包まれる（フロント・エディタ共通）。
 * flexなど子要素のレイアウトはこの内側コンテナに当てる。
 */

/* 囲み: border:solid 1px #e5e5e5(line) */
.mujin-box {
    border: 1px solid #e5e5e5;
    padding: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 639px) {
    .mujin-box {
        padding: 1rem;
    }
}

/* ボックスの端では要素のマージンを消し、paddingだけで余白を作る。
   要素同士の間隔（本文のリズム）はそのまま残す */
.mujin-box .wp-block-group__inner-container > :first-child {
    margin-top: 0;
}

.mujin-box .wp-block-group__inner-container > :last-child {
    margin-bottom: 0;
}

/* 絵文字囲み: 左に絵文字、右にテキストの2カラム */
.mujin-box-emoji > .wp-block-group__inner-container {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mujin-box-emoji-icon {
    font-size: 1.5rem;
    line-height: 1.4;
    flex: 0 0 auto;
    margin: 0;
}

/* テキスト側（入れ子グループ）。Enterで段落を増やしても縦に並ぶ */
.mujin-box-emoji-body {
    flex: 1 1 0;
    min-width: 0;
}

/* 記事内のテーブル（テーブルブロック限定。手書きHTMLテーブルには影響しない）。
   セレクタを .wp-block-table table 起点にして、WP標準のブロックCSS
   (.wp-block-table td { border:1px solid } 等)より確実に優先させる。
   エディタiframeにはTailwindのpreflightが無いため border-collapse も明示する。 */
.wp-block-table table {
    font-size: 0.85rem;
    border-collapse: collapse;
}

.wp-block-table table th,
.wp-block-table table td {
    border: 1px solid #e5e5e5; /* line */
    padding: .5em 1em;
}

/* WP標準の thead/tfoot の太い区切り線(3px solid currentColor)を消し、
   セルの#e5e5e5線に統一する */
.wp-block-table table thead {
    border-bottom: none;
}

.wp-block-table table tfoot {
    border-top: none;
}

.wp-block-table table th {
    font-weight: 700;
    background: #f7f7f7;
}

/* 「左列見出し」スタイル（ブロックスタイル is-style-row-header）:
   1列目をthと同じ見た目にする。td/th どちらでも効くよう :first-child で指定 */
.wp-block-table.is-style-row-header table tr > :first-child {
    font-weight: 700;
    background: #f7f7f7;
}