@charset "UTF-8";

/*
 * post-content.css — 記事本文スタイルの共通定義
 *
 * 管理画面のエディタ・CMS プレビュー・公開ページの 3 面で
 * 同一の見た目を保証するための唯一の定義元です。
 *
 * 【適用範囲】
 *   .post-content     … 公開ページ / CMS プレビューのラッパ（Blade 側で付与）
 *   .ql-editor        … 管理画面 本文エディタ（Quill が生成）
 *   .trumbowyg-editor … 管理画面 カスタムフィールドエディタ（Trumbowyg が生成）
 *
 * 【設計方針】
 *   1. 本文領域の中身を all: revert でいったんブラウザ標準に戻し、
 *      サイト側 CSS・管理画面テーマ双方の影響を遮断します。
 *   2. そのうえで、本ファイルだけが本文の見た目を定義します。
 *      パーツ（ボタン等）のデザインもここに置きます。
 *   3. サイト固有の値はすべて CSS 変数（--post-*）経由で受け取ります。
 *      サイトごとの調整は site-parts.css で変数を上書きして行ってください。
 *
 * 【重要】.post-content は「本文の直接の親」にだけ付けてください。
 *   セクション全体に付けると、ブレードに直接書かれた見出しやボタンまで
 *   リセットされて崩れます。
 *
 * publish 方法:
 *   php artisan vendor:publish --tag=artcms-assets
 */


/* ============================================================
   Layer 0: リセット
   ------------------------------------------------------------
   本文領域の中身をブラウザ標準（UA スタイル）に戻します。
   これにより、公開ページのサイト CSS と管理画面テーマのどちらの
   影響も受けない、共通の出発点を作ります。

   インラインスタイル（エディタが出力する文字色・サイズ等）は
   CSS ルールより優先されるため、このリセットでは消えません。
   ============================================================ */
.post-content *:not(font),
.ql-editor *:not(font),
.trumbowyg-editor *:not(font) {
    all: revert;
}

/* Quill はリストのマーカーを子要素 <span class="ql-ui"> で描画しますが、
   本ファイルでは li::before 方式に統一するため非表示にします。 */
.ql-editor li > .ql-ui {
    display: none;
}


/* ============================================================
   Layer 1: 基本タイポグラフィ
   ------------------------------------------------------------
   リセット後の基準値を設定します。
   値はサイト側（site-parts.css）の変数から受け取ります。
   ============================================================ */
:is(.post-content p, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) {
    font-family: var(--post-font-family, inherit);
    font-size: var(--post-font-size, inherit);
    line-height: var(--post-line-height, inherit);
    font-weight: var(--post-font-weight, inherit);
    color: var(--post-text-color, inherit);
    letter-spacing: var(--post-letter-spacing, normal);
    font-feature-settings: var(--post-font-feature-settings, normal);
    word-wrap: break-word;
}


/* ============================================================
   Layer 2: ブロック要素
   ============================================================ */

/* ---- 見出し ----
   リセット後はブラウザ標準（太字・em 単位）になるため、
   サイトの見出しサイズに揃え直します。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--post-heading-margin-top, 0);
    margin-bottom: var(--post-heading-margin-bottom, 0);
    font-weight: var(--post-heading-font-weight, inherit);
    line-height: inherit;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) h1 {
    font-size: var(--post-h1-size, 2em);
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) h2 {
    font-size: var(--post-h2-size, 1.5em);
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) h3 {
    font-size: var(--post-h3-size, 1.17em);
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) h4 {
    font-size: var(--post-h4-size, 1em);
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) h5 {
    font-size: var(--post-h5-size, 0.83em);
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) h6 {
    font-size: var(--post-h6-size, 0.67em);
}

/* ---- 段落 ----
   段落が続く場合のみ間隔を空けます。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) p {
    margin-top: 0;
    margin-bottom: 0;
}

/* :is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) p + p {
    margin-top: var(--post-paragraph-gap, 1em);
} */

/* ---- 引用 ---- */
/* 余白は要素自身のマージンではなく、後述の「兄弟要素間の間隔」で与えます。
   ブラウザ標準のマージン（1em 40px）が残ると両画面でずれるため打ち消します。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) blockquote {
    margin: 0;
    padding-left: var(--post-blockquote-padding-left, 16px);
    border-left: var(--post-blockquote-border, 4px solid #ccc);
}

/* ---- 区切り線 ----
   ブラウザ標準の hr は立体的な溝線になり、余白も環境で揃わないため
   1 本の実線として定義し直します。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) hr {
    margin: 0;
    border: 0;
    border-top: var(--post-hr-border, 1px solid #C9C9C9);
}

/* ---- ブロック要素どうしの間隔 ----
   段落が続く場合と同じ間隔を、引用・リスト・テーブルの前後にも与えます。
   要素ごとのマージンに頼らず隣接関係だけで決めるため、
   エディタと公開ページで必ず同じ結果になります。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor)
:is(p, h1, h2, h3, h4, h5, h6, ul, ol, table, blockquote, hr) + :is(blockquote, ul, ol, table, hr) {
    margin-top: var(--post-block-gap, 1em);
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor)
:is(blockquote, ul, ol, table, hr) + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-top: var(--post-block-gap, 1em);
}


/* ============================================================
   Layer 3: リスト
   ------------------------------------------------------------
   Quill 2 は箇条書き・番号付きの双方を <ol> で出力し、
   種別を li[data-list] 属性で区別します。
   Trumbowyg（カスタムフィールド）は標準的な <ul> / <ol> を出力します。
   ============================================================ */

/* ---- Quill 形式（li[data-list]） ---- */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) ol:has(> li[data-list]) {
    margin: 0;
    padding-left: 1.5em;
    counter-reset: list-0 list-1 list-2 list-3;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list] {
    list-style-type: none;
    padding-left: 0;
    counter-increment: list-0;
    counter-reset: list-1 list-2 list-3;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list="ordered"]::before {
    content: counter(list-0, decimal) ". ";
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list="bullet"]::before {
    content: "\2022";
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list].ql-indent-1 {
    counter-increment: list-1;
    counter-reset: list-2 list-3;
    padding-left: 3em;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list="ordered"].ql-indent-1::before {
    content: counter(list-1, lower-alpha) ". ";
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list="bullet"].ql-indent-1::before {
    content: "\25CB";
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list].ql-indent-2 {
    counter-increment: list-2;
    counter-reset: list-3;
    padding-left: 4.5em;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list="ordered"].ql-indent-2::before {
    content: counter(list-2, lower-roman) ". ";
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list="bullet"].ql-indent-2::before {
    content: "\25A0";
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list].ql-indent-3 {
    counter-increment: list-3;
    padding-left: 6em;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list="ordered"].ql-indent-3::before {
    content: counter(list-3, decimal) ". ";
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) li[data-list="bullet"].ql-indent-3::before {
    content: "\2022";
}

/* ---- 標準リスト（Trumbowyg 等・data-list なし） ----
   マーカーの種類は li 側に指定します。ul 側に指定して継承させると、
   本文の ul に style="list-style: none" が付いていた場合にマーカーが消えます。
   Quill は「マーカーなしの ul」を表現できず（読み込み時に
   li[data-list="bullet"] へ変換し ::before でマーカーを描画する）、
   公開ページだけマーカーが消えて表示差になるため、
   ここでは常にマーカーを出す側に揃えています。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) ul {
    margin: 0;
    padding-left: 1.5em;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) ul > li {
    list-style-type: disc;
    padding-left: 0.5em;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) ol:not(:has(> li[data-list])) {
    margin: 0;
    padding-left: 1.5em;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) ol:not(:has(> li[data-list])) > li {
    list-style-type: decimal;
    padding-left: 0.5em;
}


/* ============================================================
   Layer 4: Quill 書式クラス
   ------------------------------------------------------------
   Quill は文字サイズ・配置・インデントをクラスで出力します。
   ツールバー（customize/js/quill.js）に項目を追加した場合は
   本セクションへの追記が必要です。
   ============================================================ */

/* ---- フォントサイズ ---- */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) .ql-size-small {
    font-size: var(--post-size-small, 0.75em);
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) .ql-size-large {
    font-size: var(--post-size-large, 1.5em);
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) .ql-size-huge {
    font-size: var(--post-size-huge, 2.5em);
}

/* ---- 配置 ---- */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) .ql-align-center {
    text-align: center;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) .ql-align-right {
    text-align: right;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) .ql-align-justify {
    text-align: justify;
}

/* ---- 段落・見出しのインデント ---- */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(p, h1, h2, h3, h4, h5, h6).ql-indent-1 {
    padding-left: 3em;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(p, h1, h2, h3, h4, h5, h6).ql-indent-2 {
    padding-left: 6em;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(p, h1, h2, h3, h4, h5, h6).ql-indent-3 {
    padding-left: 9em;
}


/* ---- ルビ ----
   管理画面では customize/css/quill.css がルビの見た目を定義していますが、
   このファイルは公開ページで読み込まれないため、同じ指定をここにも置きます。
   値は quill.css と揃えてあり、変更する場合は両方を合わせてください。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) ruby {
    display: ruby;
    ruby-position: over;
    ruby-align: center;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) ruby rt {
    display: ruby-text;
    font-size: var(--post-ruby-font-size, 0.5em);
    line-height: normal;
    color: inherit;
    text-align: center;
}


/* ============================================================
   Layer 5: メディア
   ============================================================ */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(iframe, video, .ql-video) {
    display: block;
    width: 100%;
    max-width: var(--post-embed-max-width, 800px);
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 1em 0;
    border: 0;
}


/* ============================================================
   Layer 6: テーブル
   ------------------------------------------------------------
   エディタの「2カラム」「3カラム」「テーブル」パーツは
   いずれも同じ table 要素として出力されるため、HTML 上で区別できません。
   本サイトではレイアウト用途を優先し、狭い画面で縦に積む
   レスポンシブ表示を既定としています。
   ============================================================ */

/* 表として素直に表示します。
   flex レイアウトは列の間に隙間ができ、セルの罫線もつながらないため使用しません。
   幅はエディタが出力する width 属性・インラインスタイルより優先させる必要があるため
   !important を指定しています（両画面でレイアウトを一致させるための意図的な指定です）。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) table {
    display: table;
    width: 100% !important;
    max-width: 100% !important;
    /* table-layout: fixed; */
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    /* エディタは white-space: pre-wrap で動作するため、タグの間の改行や
       インデントが空白として残り、匿名の行として隙間になります。
       テーブル構造の中だけ通常の空白処理に戻します。
       セル内の文字列は下の指定で pre-wrap に戻しています。 */
    white-space: normal;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(td, th) {
    white-space: inherit;
}

:is(.ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(td, th) {
    white-space: pre-wrap;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) thead {
    display: table-header-group;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) tbody {
    display: table-row-group;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) tfoot {
    display: table-footer-group;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) tr {
    display: table-row;
    margin: 0;
}

/* 列定義はエディタ側のテーブル機能が独自に挿入します。
   列幅を均等にそろえるため無効化します。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(colgroup, col) {
    display: none;
}

/* テーブル構造に属さない要素を除外します。
   エディタは編集中に段落や空要素をテーブル直下へ差し込むことがあり、
   その要素が CSS のテーブル整形規則によって匿名の行として扱われ、
   行と行の間に 1 行分の隙間が生まれます。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) table > :not(caption, colgroup, thead, tbody, tfoot, tr) {
    display: none;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(thead, tbody, tfoot) > :not(tr) {
    display: none;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) tr > :not(td, th) {
    display: none;
}

/* セル幅はエディタ側で width 属性やインラインスタイルが付くことがありますが、
   table-layout: fixed と組み合わせて均等配分にするため打ち消します。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(td, th) {
    display: table-cell;
    width: auto !important;
    max-width: none !important;
    min-width: 100px;
    margin: 0;
    padding: var(--post-table-cell-padding, 12px 16px);
    border: var(--post-table-cell-border, 1px solid #C9C9C9);
    vertical-align: var(--post-table-cell-vertical-align, top);
    word-break: break-word;
}

/* 見出しセルはエディタ側のテーブル機能が独自の背景色を付けるため、
   両画面で揃うように明示します。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) th {
    background-color: var(--post-table-th-background, #E8F2F5);
    color: inherit;
    font-weight: var(--post-table-th-font-weight, inherit);
    text-align: var(--post-table-th-text-align, center);
}

/* セル内の画像は列幅に収めます。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(td, th) img {
    max-width: 100%;
    height: auto;
}

/* 狭い画面では列を縦に積みます。
   エディタと公開ページの双方に同じ条件で適用されます。 */
@media (max-width: 767.98px) {
    /* :is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) :is(table, thead, tbody, tfoot, tr, td, th) {
        display: block;
        width: 100% !important;
    } */

    :is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) tr + tr {
        margin-top: var(--post-table-stack-gap, 1em);
    }
}


/* ============================================================
   Layer 7: リンクとパーツ
   ============================================================ */

/* ---- 通常のリンク ---- */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) a {
    color: var(--post-link-color, #06c);
    text-decoration: var(--post-link-decoration, underline);
}

/* Quill のバブルテーマは本文中のリンクすべてに吹き出し（ツールチップの三角形）を
   ::before / ::after で仕込みます。公開ページには存在しない装飾のため無効化します。
   アイコン表示が必要なボタンは、後段で ::after を上書きして復活させます。 */
:is(.ql-bubble .ql-editor, .ql-editor) a::before,
:is(.ql-bubble .ql-editor, .ql-editor) a::after {
    content: none;
}

/* ---- ボタンパーツ（リンクパーツ / モーダルパーツ） ----
   エディタの「パーツ」メニューから挿入されるボタンです。
   サイトのボタンデザインに合わせて変数を上書きしてください。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) a:is(.ql-link-button, .ql-modal-button) {
    display: inline-flex;
    align-items: center;
    justify-content: var(--post-button-justify-content, center);
    gap: 4px;
    position: relative;
    max-width: var(--post-button-max-width, 430px);
    width: var(--post-button-width, 100%);
    padding: var(--post-button-padding, 12px 48px 12px 24px);
    border: var(--post-button-border, 2px solid transparent);
    border-radius: var(--post-button-radius, 100vh);
    background-color: var(--post-button-bg, #0d6efd);
    color: var(--post-button-color, #fff);
    font-size: var(--post-button-font-size, 1.125rem);
    font-weight: var(--post-button-font-weight, 500);
    line-height: 1.2;
    text-align: var(--post-button-text-align, center);
    text-decoration: none;
    box-shadow: var(--post-button-shadow, 0 6px 6px rgba(0, 0, 0, 0.16));
    cursor: pointer;
}

/* 外部リンク・PDF へのボタンにはアイコンを表示します。
   Quill のバブルテーマは本文中のリンクすべてに吹き出し用の ::after を定義しており
   （visibility: hidden / left: 0 / margin-left: 50% / 三角形の border）、
   打ち消さないとアイコンが表示されません。関係する指定をすべて上書きします。 */
:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) a.ql-link-button:is([target="_blank"], [href$=".pdf"])::after {
    content: "";
    visibility: visible;
    position: absolute;
    top: 50%;
    left: auto;
    right: 24px;
    bottom: auto;
    margin: 0;
    width: 24px;
    height: 24px;
    border: 0;
    transform: translateY(-50%);
    background-image: var(--post-button-icon-external, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

:is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) a.ql-link-button[href$=".pdf"]::after {
    background-image: var(--post-button-icon-pdf, none);
}

@media (max-width: 767.98px) {
    :is(.post-content, .ql-editor, .ql-bubble .ql-editor, .trumbowyg-editor) a.ql-link-button::after {
        right: 12px;
        width: 20px;
        height: 20px;
    }
}