/*
 * 東洋文化硏究會サイトの統一デザイン（案 1「和本」）
 * 白練の紙・墨の文字・楠の緑の差し色・金の細い線。見出しは Zen Old Mincho、本文は今の明朝のまま。
 * Arkhe の色の変数をそろえ、ヘッダー・メニュー・フッター・本文の見出しを整える。
 * 独自の HTML を持つテンプレートには効かないよう、Arkhe の枠（.l-wrapper）の中だけを対象にする。
 * 読み込みはプラグイン「東文研 独自機能」が行う（子テーマの assets/tbk-design.css）。
 */

/* ── 色 ─────────────────────────────── */
html body {
	--tbk-paper: #fafbf9;
	--tbk-paper-2: #f1f4f2;
	--tbk-ink: #1f2a26;
	--tbk-ink-2: #4d5a55;
	--tbk-ink-3: #6f7a76;
	--tbk-rule: #e1e6e3;
	--tbk-accent: #2f5d50;
	--tbk-accent-soft: #e4eee9;
	--tbk-gold: #b0862c;
	--tbk-night: #15221d;
	--tbk-display: "Zen Old Mincho", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;

	--ark-color--main: var(--tbk-ink);
	--ark-color--text: #2b3531;
	--ark-color--link: var(--tbk-accent);
	--ark-color--bg: var(--tbk-paper);
	--ark-color--gray: var(--tbk-paper-2);
	--ark-color--header_bg: var(--tbk-paper);
	--ark-color--header_txt: var(--tbk-ink);
	--ark-color--footer_bg: var(--tbk-night);
	--ark-color--footer_txt: #dde7e2;
}

.l-wrapper ::selection { background: var(--tbk-accent-soft); color: var(--tbk-ink); }
.l-wrapper :focus-visible { outline: 2px solid var(--tbk-accent); outline-offset: 2px; }

/* ── ヘッダー ─────────────────────────── */
/* 注意：ヘッダーに backdrop-filter・filter・transform を付けないこと。ヘッダーの中にある引き出しメニュー
   （position: fixed）が、画面いっぱいではなくヘッダーの枠の中に閉じ込められ、三本線を押してもメニューが見えなくなる
  （2026/11/2 に一度起きた） */
.l-wrapper .l-header {
	background: var(--tbk-paper);
	border-bottom: 1px solid var(--tbk-rule);
	box-shadow: none;
}
.l-wrapper .l-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tbk-gold) 70%, transparent) 25%, color-mix(in srgb, var(--tbk-gold) 70%, transparent) 75%, transparent);
	pointer-events: none;
}
.l-wrapper .c-headLogo,
.l-wrapper .c-headLogo__txt {
	font-family: var(--tbk-display);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--tbk-ink);
	white-space: nowrap;
}
/* サイト名の文字は、設定では 80px と大きく、幅 1024px 前後で 2 行に折り返してヘッダーが倍の高さになっていた。
   画面の幅に合わせて控えめにし、どの幅でも 1 行に収める */
@media (min-width: 1000px) {
	.l-wrapper .l-header__logo.has-text .c-headLogo {
		font-size: clamp(28px, 2.6vw, 40px);
		line-height: 1.25;
	}
}

/* ── メニュー（パソコンの横並び） ──────────── */
.l-wrapper .c-gnav > .menu-item > a,
.l-wrapper .c-gnav > li > a {
	font-family: var(--tbk-display);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--tbk-ink);
	transition: color 0.2s ease;
}
.l-wrapper .c-gnav > .menu-item > a:hover,
.l-wrapper .c-gnav > li > a:hover,
.l-wrapper .c-gnav > .current-menu-item > a,
.l-wrapper .c-gnav > .current-menu-ancestor > a { color: var(--tbk-accent); }

/* 下の段（ドロップダウン） */
.l-wrapper .c-gnav .sub-menu {
	background: #fff;
	border: 1px solid var(--tbk-rule);
	border-radius: 10px;
	box-shadow: 0 22px 44px -24px rgba(20, 32, 44, 0.38), 0 2px 6px rgba(20, 32, 44, 0.06);
	padding: 6px;
	min-width: 15em;
}
.l-wrapper .c-gnav .sub-menu a {
	border-radius: 6px;
	padding: 0.55em 0.9em;
	color: var(--tbk-ink);
	letter-spacing: 0.04em;
	line-height: 1.5;
}
.l-wrapper .c-gnav .sub-menu a:hover { background: var(--tbk-paper-2); color: var(--tbk-accent); }

/* 引き出しメニュー（三本線のボタンで開く）。背景を紙色にしたので、文字と「閉じる」ボタンも濃い色にそろえる */
.l-wrapper .p-drawer { background: var(--tbk-paper); color: var(--tbk-ink); }
.l-wrapper .p-drawer .c-drawerNav__a,
.l-wrapper .p-drawer .menu-item > a { letter-spacing: 0.06em; color: var(--tbk-ink); border-color: var(--tbk-rule); }
.l-wrapper .p-drawer .c-drawerNav > .menu-item > .c-drawerNav__a {
	font-family: var(--tbk-display);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.1em;
}
.l-wrapper .p-drawer .sub-menu { background: var(--tbk-paper-2); }
.l-wrapper .p-drawer .sub-menu .c-drawerNav__a { font-size: 0.95rem; color: var(--tbk-ink-2); }
.l-wrapper .p-drawer .c-drawerNav__a:hover { color: var(--tbk-accent); }
.l-wrapper .p-drawer__close {
	color: var(--tbk-ink);
	background: #fff;
	border: 1px solid var(--tbk-rule);
	border-radius: 999px;
	padding: 0.5em 1.6em;
	margin-top: 1.5em;
	opacity: 1;
}
.l-wrapper .p-drawer__close:hover { color: var(--tbk-accent); border-color: var(--tbk-accent); }
/* 開いているあいだ三本線のボタンは「×」になる。Arkhe は暗い背景の前提でこれを白にするので、紙色の背景にまぎれていた
  （2026/11/2 午後、中島さんの指摘）。墨の色にする */
[data-drawer-move="fade"][data-drawer="opened"] .l-wrapper .l-header__drawerBtn { color: var(--tbk-ink); }
[data-drawer-move="fade"][data-drawer="opened"] .l-wrapper .l-header__drawerBtn:hover { color: var(--tbk-accent); }

/* ── 本文（Arkhe の枠のページ） ──────────── */
.l-wrapper .c-pageTitle,
.l-wrapper .c-postTitle,
.l-wrapper .c-postContent h2,
.l-wrapper .c-postContent h3 {
	font-family: var(--tbk-display);
	font-weight: 700;
	text-wrap: balance;
	font-feature-settings: "palt" 1;
}
.l-wrapper .c-postContent h2 {
	letter-spacing: 0.06em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--tbk-rule);
}
.l-wrapper .c-postContent h3 { letter-spacing: 0.05em; }
.l-wrapper .c-postContent a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.l-wrapper .c-postContent table { border-color: var(--tbk-rule); }
.l-wrapper .c-postContent th { background: var(--tbk-paper-2); }
.l-wrapper .c-postContent blockquote { border-color: var(--tbk-gold); background: var(--tbk-paper-2); }

/* ── フッター ─────────────────────────── */
.l-wrapper .l-footer { border-top: 1px solid color-mix(in srgb, var(--tbk-gold) 55%, transparent); }
.l-wrapper .l-footer a { color: #e9d9b0; }
.l-wrapper .c-copyright { letter-spacing: 0.12em; font-size: 0.78rem; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
	.l-wrapper .c-gnav > .menu-item > a { transition: none; }
}

/* ── トップページ（固定ページ「トップページ」のテンプレート）との調和 ───── */
/* テンプレートはヘッダーの高さを 60px と決め打ちしているので、実際の高さに合わせる。
   2026/11/2 の実測：スマホ 44px、パソコン 98〜113px（ヘッダー 52〜67px ＋ メニューの帯 46px） */
body.home { --wp-header-h: 44px; }
@media (min-width: 1000px) {
	body.home { --wp-header-h: 105px; }
}
/* サイト全体は明るい表示なので、トップページだけが暗くならないよう、明るい色に固定する */
@media (prefers-color-scheme: dark) {
	body.home {
		--ink: #2f5d50;
		--ink2: #1d3d34;
		--sub: #6b7e79;
		--bg: #fafbf9;
		--bg2: #f1f4f2;
		--bg3: #e9eeeb;
		--border: rgba(0, 0, 0, .09);
		--shadow: rgba(0, 0, 0, .07);
	}
}
body.home { --bg: #fafbf9; --bg2: #f1f4f2; }
/* テンプレートは html と body に overflow-x: hidden を付けている。これだと body がスクロールの箱になり、
   上に貼り付くヘッダーが貼り付かず、ログイン中は管理バーの分だけ下にずれてメニューの帯を隠していた。
   横のはみ出しは隠したまま、スクロールの箱にならない clip にする */
html:has(> body.home),
body.home { overflow-x: clip; }

/* ── メニューの六十四卦（2026/11/2 午後） ─────────────── */
/* メニューの「易 → 六十四卦一覧」（項目に CSS のクラス tbk-hx-menu を付けた）の下に、64 卦の項目を 1〜64 の順に置いた。
   引き出しメニュー（三本線）では、六十四卦一覧の「∨」で開き、8 列 × 8 行のます目に並べる（スマホでも 1 画面に収まる。中島さんの指示）。
   ます目は上に番号、下に名前。幅 600px 未満は正式な名前（水雷屯）が入らないので、項目のタイトル属性に入れた短い名前（屯）を出す。
   番号は並び順で数えるので、項目の順を崩さないこと。
   パソコンの横並びのメニューは 2 段までにする（64 卦は出さない。六十四卦一覧のページに表がある） */
.l-wrapper .c-gnav .tbk-hx-menu > .sub-menu,
.l-wrapper .c-gnav .tbk-hx-menu .c-submenuToggleBtn { display: none; }

.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu { counter-reset: tbk-hx; }
.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu > li { counter-increment: tbk-hx; border: 0; }
/* 閉じているあいだは Arkhe の決まり（高さ 0・見えない）のまま。開いたときだけます目にする */
.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu.is-opened {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 3px;
	padding: 8px 6px 12px;
}
/* ます目は指で押しやすい高さ（44px）。幅は 320px の画面でも 1 升 31px ほどあり、短い名前（最長 2 字）が入る。
   600px 以上では 1 升 60px ほどあり、正式な名前（最長 4 字）が入る */
.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu .c-drawerNav__a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	padding: 4px 1px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--tbk-ink);
	font-size: 12.5px;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}
.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu .c-drawerNav__a::before {
	content: counter(tbk-hx);
	font-size: 10px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--tbk-ink-3);
}
.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu .c-drawerNav__a:hover { background: #fff; color: var(--tbk-accent); }
.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu > .current-menu-item > .c-drawerNav__a {
	background: var(--tbk-accent);
	color: #fff;
	font-weight: 600;
}
.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu > .current-menu-item > .c-drawerNav__a::before { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 599px) {
	/* 正式な名前は見えなくし（読み上げには残す）、短い名前を出す（読み上げでは重ねて読まない） */
	.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu .__mainText {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu .c-drawerNav__a::after {
		content: attr(title);
		content: attr(title) / "";
		font-size: 14px;
		line-height: 1.2;
	}
}
@media (max-width: 359px) {
	.l-wrapper .p-drawer .tbk-hx-menu > .sub-menu .c-drawerNav__a::after { font-size: 13px; }
}