/*
 * インフォ（お知らせ）本文の共通スタイル。
 *
 * 公開記事（column.tpl の #column .info-body）と
 * 管理WYSIWYGエディタ（.ql-editor）の双方に同じ見た目を適用し、
 * 「編集中の表示 = 公開時の表示」を一致させる（真のWYSIWYG）。
 *
 * フォントは公開サイト（base.scss body: IBM Plex Sans JP）に合わせる。
 * コンテンツスコープ自身に絶対 px の font-size を与えて基準を固定し、見出し等は
 * em で指定する。これにより html ルートのフォントサイズ差（公開 16px / 管理 16px、
 * モバイルでは公開 14px 等）に左右されず、両環境で同一の実寸になる。
 *
 * 注意:
 *  - エディタ側ではこのファイルを Quill の snow CSS より「後に」読み込むこと
 *    （同一詳細度のため、ソース順で Quill の既定スタイルに勝たせる）。
 *  - 公開側では column.min.css より「後に」読み込むこと。.info-body スコープは
 *    クラス指定（詳細度 0,1,1）なので column.scss の article 要素セレクタ（0,0,2）に勝つ。
 */

/* --- 本文の基準：公開／エディタ共通 --- */
#column .info-body,
.ql-editor {
	font-family: 'IBM Plex Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: #333;
}

/* 見出し（h1〜h6）。サイズは em 基準で両環境一致。 */
#column .info-body h1, .ql-editor h1 { font-size: 2em;    font-weight: 600; line-height: 1.3; margin: 1em 0 .4em; }
#column .info-body h2, .ql-editor h2 { font-size: 1.7em;  font-weight: 600; line-height: 1.3; margin: 1em 0 .4em; }
#column .info-body h3, .ql-editor h3 { font-size: 1.4em;  font-weight: 600; line-height: 1.4; margin: .9em 0 .3em; }
#column .info-body h4, .ql-editor h4 { font-size: 1.2em;  font-weight: 600; line-height: 1.4; margin: .8em 0 .3em; }
#column .info-body h5, .ql-editor h5 { font-size: 1.05em; font-weight: 600; line-height: 1.4; margin: .8em 0 .3em; }
#column .info-body h6, .ql-editor h6 { font-size: 1em;    font-weight: 600; line-height: 1.4; margin: .8em 0 .3em; }

/* 段落・本文要素 */
#column .info-body p, .ql-editor p { margin: .8em 0; line-height: 1.9; }
#column .info-body ul, .ql-editor ul,
#column .info-body ol, .ql-editor ol { margin: .6em 0 .6em 1.6em; padding: 0; }
#column .info-body li, .ql-editor li { margin: .2em 0; }
#column .info-body blockquote, .ql-editor blockquote {
	margin: 1em 0;
	padding: .6em 1em;
	border-left: 4px solid #c8d3e0;
	background: #f6f8fa;
	color: #555;
}
#column .info-body pre, .ql-editor pre {
	margin: 1em 0;
	padding: 1em;
	background: #f3f3f3;
	border-radius: 6px;
	overflow-x: auto;
	font-family: 'M PLUS 1p', monospace;
	white-space: pre-wrap;
	word-break: break-word;
}
#column .info-body hr, .ql-editor hr { border: 0; border-top: 1px solid #ddd; margin: 1.2em 0; }

/* インライン装飾 */
#column .info-body strong, .ql-editor strong,
#column .info-body b, .ql-editor b { font-weight: 700; }
#column .info-body em, .ql-editor em,
#column .info-body i, .ql-editor i { font-style: italic; }
#column .info-body u, .ql-editor u { text-decoration: underline; }
#column .info-body s, .ql-editor s { text-decoration: line-through; }

/* リンク・画像 */
#column .info-body a, .ql-editor a { color: #0d6efd; text-decoration: underline; }
#column .info-body img, .ql-editor img { max-width: 100%; height: auto; display: block; margin: .6em auto; }

/* 整列（Quill の ql-align-* クラス。style="text-align" 形式は属性が直接効くため指定不要） */
#column .info-body .ql-align-center, .ql-editor .ql-align-center { text-align: center; }
#column .info-body .ql-align-right,  .ql-editor .ql-align-right  { text-align: right; }
#column .info-body .ql-align-justify, .ql-editor .ql-align-justify { text-align: justify; }

/* 動画（Quill の iframe.ql-video）。16:9 のレスポンシブ表示 */
#column .info-body iframe.ql-video, .ql-editor iframe.ql-video {
	display: block;
	width: 100%;
	max-width: 680px;
	aspect-ratio: 16 / 9;
	height: auto;
	min-height: 220px;
	margin: 1em auto;
	border: 0;
}