@charset "UTF-8";

/*
==============================================================================
TUTTI 段組み共通CSS : tutti-column.css
==============================================================================

【目的】
PDF由来の記事を、HTMLでは意味のある文章構造のまま保持しながら、
画面上では2段組みで表示するための共通CSS。

【適用範囲】
・当面は2段組みのみを対象とする。
・段組みを使用する号だけ、このCSSを読み込む。
・本文・見出し・執筆者の文字装飾は tutti-content.css 等の標準CSSに任せる。
・このCSSは段組みの配置と境界制御だけを担当する。
・号固有の見た目は各号の local CSS に記述する。

【読み込み】
<link rel="stylesheet" href="../common/tutti-column.css">

各号の local CSS より前に読み込むこと。

【基本HTML】
<article class="pdf-two-column" aria-labelledby="issue-article-01">
	<h2 class="article-heading column-pause" id="issue-article-01">
		<span class="title">記事タイトル</span>
		<span class="byline">執筆者名</span>
	</h2>
	<section>
		<p>本文の段落。</p>
		<p>次の段落。</p>
	</section>
</article>

【見出し・執筆者】
.article-heading / .title / .byline / .sub-title の文字装飾は標準CSSを使用する。
段組み内では見出し全体を2段分の幅に広げる配置指定だけを行う。

【列境界】
連続した文章の途中で列を切り替える場合は、段落を分割せず、
同一の p 内に次のマーカーを挿入する。

<p>
	左段側の文章
	<span class="column-next" aria-hidden="true"></span>
	右段側の文章
</p>

.column-next は表示されない制御用マーカー。
PCでは次の段へ送り、スマートフォンでは無効にする。

【段組み途中のページ境界】
PDFのページ境界では、同一の p の中に次を挿入する。

<p>
	ページ末尾までの文章
	<span class="column-page-marker" aria-label="PDF page 1 of 3"><span>1/3</span></span>
	次ページの文章
</p>

.column-page-marker は段組みを横断して全幅で表示する。
ページ番号と左右の区切り線を表示し、その後の文章は再び2段組みに流れる。
標準CSSの .page-marker とは別クラスであり、標準CSSには依存しない。

【段組みを使わないページ区切り】
段組みの外側では従来どおり .page-marker / .page-end を使用する。
段組みの途中だけ .column-page-marker を使用する。

【スマートフォン】
600px以下では1段組みにする。
列境界 .column-next は非表示にする。
ページ境界 .column-page-marker は全幅の区切りとして表示する。

【column- クラスの使用範囲】
段組み制御用の column- クラスは、原則として .pdf-two-column の内側だけで使用する。
通常の1段組み記事には付けない。

【クラス一覧】
.pdf-two-column      : 2段組みの範囲
.column-next          : 段組み途中の列送り
.column-page-marker   : 段組み途中のページ境界（全幅）

【注意】
・文章の意味上の段落を、PDFの列やページの都合で分割しない。
・列・ページ境界の位置はPDFを確認して指定する。
・複数の列境界を追加する場合も同じクラスを使う。
・多段組み（3段以上）は現時点では対象外。
・column-fill の挙動はブラウザにより差があるため、公開前にPCとスマートフォンで確認する。
==============================================================================
*/


/* --------------------------------------------------------------------------
   1. 基本2段組み
   -------------------------------------------------------------------------- */

@media screen and (min-width: 601px) {
	.pdf-two-column {
		column-count: 2;
		column-gap: 2.4em;
		column-fill: balance;
	}

	/*
	 * section は意味上のまとまりとしてHTMLに残し、
	 * レイアウト上は段組みコンテナの直接の流れに参加させる。
	 * これにより section 内の全幅マーカーも段組み全体を横断できる。
	 */
	.pdf-two-column > section {
		display: contents;
	}

	/* 節の小見出し：段幅で表示し、直後の本文から離れにくくする */
	.pdf-two-column .sub-title {
		display: block;
		break-after: avoid;
		-webkit-column-break-after: avoid;
	}

	/* 全幅表示して段組みの流れに戻す汎用クラス（見出し・画像など） */
	.pdf-two-column .column-pause {
		column-span: all;
		-webkit-column-span: all;
		break-inside: avoid;
	}

	/* 見出し・執筆者は標準CSSの装飾を使い、配置だけ全幅にする */
	.pdf-two-column > .article-heading {
		column-span: all;
		-webkit-column-span: all;
		break-after: avoid;
	}

	/*
	 * 段組み記事内の p はレイアウト上の箱を生成しない。
	 * 本文テキストと制御マーカーを段組みの流れに参加させる。
	 * HTMLの p 要素自体は残るため、文章の意味構造は維持される。
	 */
	.pdf-two-column p {
		display: contents;
	}

	.pdf-two-column .column-next {
		display: block;
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		line-height: 0;
		break-before: column;
		-webkit-column-break-before: always;
	}

	/* 段組み途中のページ境界：2段を解除して全幅表示 */
	.pdf-two-column .column-page-marker {
		display: flex;
		align-items: center;
		gap: .55rem;
		width: 100%;
		margin: 1.2rem 0;
		padding: .28rem 0;
		color: #8d887e;
		font: 400 .68rem/1.2 Arial, sans-serif;
		letter-spacing: .025em;
		text-indent: 0;
		column-span: all;
		-webkit-column-span: all;
		break-inside: avoid;
	}

	.pdf-two-column .column-page-marker::before,
	.pdf-two-column .column-page-marker::after {
		content: "";
		flex: 1;
		height: 1px;
		background: #e8e6e1;
	}

	.pdf-two-column .column-page-marker > span {
		display: inline-block;
		text-indent: 0;
		padding: .12rem .28rem;
		border: 1px solid #efede8;
		background: #fff;
		white-space: nowrap;
	}
}


/* --------------------------------------------------------------------------
   2. スマートフォン：1段組み
   -------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
	.pdf-two-column {
		column-count: 1;
	}

	.pdf-two-column .column-next {
		display: none;
	}

	.pdf-two-column .column-page-marker {
		display: flex;
		align-items: center;
		gap: .55rem;
		width: 100%;
		margin: 1.2rem 0;
		padding: .28rem 0;
		color: #8d887e;
		font: 400 .68rem/1.2 Arial, sans-serif;
	}

	.pdf-two-column .column-page-marker::before,
	.pdf-two-column .column-page-marker::after {
		content: "";
		flex: 1;
		height: 1px;
		background: #e8e6e1;
	}

	.pdf-two-column .column-page-marker > span {
		display: inline-block;
		text-indent: 0;
		padding: .12rem .28rem;
		border: 1px solid #efede8;
		background: #fff;
		white-space: nowrap;
	}
}