@charset "utf-8";

:root {
	--layout-main-row-min: auto;
	--sidebar-min-width: 150px;
	--sidebar-max-width: 20%;
	--left-sidebar-min-width: var(--sidebar-min-width);
	--left-sidebar-max-width: var(--sidebar-max-width);
	--right-sidebar-min-width: var(--sidebar-min-width);
	--right-sidebar-max-width: var(--sidebar-max-width);
}

/* ============================== 布局 ============================== */
.inline { display: inline; }
.block { display: block; }
.block.inline { display: inline-block; }
.table { display: table; }
.table.inline { display: inline-table; }
.flex {
	display: flex;
	flex-wrap: wrap;/* css原生flex默认为单行，但多行可覆盖单行，且实际使用中更常见。 */
	align-items: flex-start;/* css原生flex默认在次轴上拉伸（stretch），但我们认为默认应当保持子元素原有尺寸。 */
}
.flex.inline { display: inline-flex; }
.grid { display: grid; }
.grid.inline { display: inline-grid; }

.items-single-line { flex-wrap: nowrap; }

.one-row	{ grid-column: 1 / -1; }
.one-column { grid-row: 1 / -1; }

.items-no-gap { gap: 0; }

/* ================== flex大组 ================== */
.flex {
	/* ------ 确保横排/竖排 ------ */
	&.items-go-x { flex-direction: row; }
	&.items-go-y { flex-direction: column; }
	/* ------ 确保子元素从上/下/左/右开始排布 ------ */
	&.items-from-left	{ flex-direction: row; }
	&.items-from-right	{ flex-direction: row-reverse; }
	&.items-from-top	{ flex-direction: column; }
	&.items-from-bottom { flex-direction: column-reverse; }
	/* ------ 确保子元素靠上/下/左/右/中 ------ */
	&.items-near-left	{ justify-content: flex-start; }
	&.items-near-right	{ justify-content: flex-end; }
	&.items-near-top	{ align-content: flex-start; align-items: flex-start; }
	&.items-near-bottom	{ align-content: flex-end;	 align-items: flex-end; }
	&.items-x-near-center	{ justify-content: center; }
	&.items-y-near-center	{ align-content: center; align-items: center; }
	&.items-near-center		{ place-content: center; place-items: center; }
	/* ------ 确保子元素组都靠向上/下 ------ */
	&.groups-near-top		{ align-content: flex-start; }
	&.groups-near-bottom 	{ align-content: flex-end; }
	/* ------ 确保在横向/竖向上子元素拉伸 ------ */
	&.items-x-stretch	{ justify-content: stretch; }
	&.items-y-stretch	{ align-content: stretch; align-items: stretch; }
	&.items-stretch		{ place-content: stretch; place-items: stretch; }
	/* 配套：flex容器在主轴方向不能拉伸，需要靠子元素自己拉伸 */
	&:not(.items-go-y, .items-from-top, .items-from-bottom).items-x-stretch > *,
	&:is(.items-go-y, .items-from-top, .items-from-bottom).items-y-stretch > *,
	&.items-stretch > * { flex: 1; }
	/* ------ 确保在横向/竖向上子元素离得远远的（空隙居中/元素互斥/元素社恐） ------ */
	&.items-x-space-between, &.items-x-mutex, &.items-x-social-phobia	{ justify-content: space-between; }
	&.items-y-space-between, &.items-y-mutex, &.items-y-social-phobia	{ align-content: space-between; }
	&.items-space-between, &.items-mutex, &.items-social-phobia			{ place-content: space-between; }
	/* ------ 确保在横向/竖向上子元素离得比较近（空隙均分/元素友好：元素外侧、元素之间均分空隙） ------ */
	&.items-x-space-evenly, &.items-x-friendly	{ justify-content: space-evenly; }
	&.items-y-space-evenly, &.items-y-friendly	{ align-content: space-evenly; }
	&.items-space-evenly, &.items-friendly		{ place-content: space-evenly; }
	/* ------ 确保在横向/竖向上子元素离得稍远（空隙环绕/元素不熟：均分空隙，元素两侧各带一份，所以元素之间占双份） ------ */
	&.items-x-space-around, &.items-x-unfamiliar	{ justify-content: space-around; }
	&.items-y-space-around, &.items-y-unfamiliar	{ align-content: space-around; }
	&.items-space-around, &.items-unfamiliar		{ place-content: space-around; }

	/* from-right 语义修复：row-reverse 下 justify-content 反向 */
	&.items-from-right {
		&.items-near-left	{ justify-content: flex-end; }
		&.items-near-right	{ justify-content: flex-start; }
	}

	/* ------------ 竖排：需覆盖一些规则 ------------ */
	&.items-go-y, &.items-from-top, &.items-from-bottom {
		/* ------ 确保子元素靠向上/下/左/右/中 ------ */
		/* flex-start的是为了避免困惑 */
		&.items-near-left	{ justify-content: flex-start; align-content: flex-start; align-items: flex-start; }
		&.items-near-right	{ justify-content: flex-start; align-content: flex-end; align-items: flex-end; }
		&.items-near-top	{ align-content: flex-start; align-items: flex-start; justify-content: flex-start; }
		&.items-near-bottom	{ align-content: flex-start; align-items: flex-start; justify-content: flex-end; }
		&.items-x-near-center	{ justify-content: flex-start; align-content: center; align-items: center; }
		&.items-y-near-center	{ align-content: flex-start; align-items: flex-start; justify-content: center; }
		&.items-near-center		{ place-content: center; place-items: center; }
		/* ------ 确保子元素组都靠向左/右 ------ */
		&.groups-near-left	{ align-content: flex-start; }
		&.groups-near-right	{ align-content: flex-end; }
		/* ------ 确保在横向/竖向上子元素拉伸 ------ */
		&.items-x-stretch	{ justify-content: flex-start; align-content: stretch; align-items: stretch; }
		&.items-y-stretch	{ align-content: flex-start; align-items: flex-start; justify-content: stretch; }
		&.items-stretch		{ place-content: stretch; place-items: stretch; }
		/* ------ 确保在横向/竖向上子元素离得远远的（空隙居中/元素互斥/元素社恐） ------ */
		&.items-x-space-between, &.items-x-mutex, &.items-x-social-phobia { justify-content: flex-start; align-content: space-between; }
		&.items-y-space-between, &.items-y-mutex, &.items-y-social-phobia { align-content: flex-start; align-items: flex-start; justify-content: space-between; }
		&.items-space-between, &.items-mutex, &.items-social-phobia { place-content: space-between; }
		/* ------ 确保在横向/竖向上子元素离得比较近（空隙均分/元素友好：元素外侧、元素之间均分空隙） ------ */
		&.items-x-space-evenly, &.items-x-friendly	{ justify-content: flex-start; align-content: space-evenly; }
		&.items-y-space-evenly, &.items-y-friendly	{ align-content: flex-start; align-items: flex-start; justify-content: space-evenly; }
		&.items-space-evenly, &.items-friendly		{ place-content: space-evenly; }
		/* ------ 确保在横向/竖向上子元素离得稍远（空隙环绕/元素不熟：均分空隙，元素两侧各带一份，所以元素之间占双份） ------ */
		&.items-x-space-around, &.items-x-unfamiliar	{ justify-content: flex-start; align-content: space-around; }
		&.items-y-space-around, &.items-y-unfamiliar	{ align-content: flex-start; align-items: flex-start; justify-content: space-around; }
		&.items-space-around, &.items-unfamiliar		{ place-content: space-around; }
	}
	&.items-from-bottom {
		&.items-near-left	{ justify-content: flex-start; align-content: flex-start; align-items: flex-start; }
		&.items-near-right	{ justify-content: flex-start; align-content: flex-end; align-items: flex-end; }
		&.items-near-top	{ align-content: flex-start; align-items: flex-start; justify-content: flex-end; }
		&.items-near-bottom	{ align-content: flex-start; align-items: flex-start; justify-content: flex-start; }
	}
	/* go-y + from-left/from-right：修正轴映射（from 方向覆盖了 go-y 的 column） */
	&.items-go-y.items-from-left {
		&.items-near-right	{ justify-content: flex-end; }
		&.items-near-bottom	{ align-content: flex-end; align-items: flex-end; }
	}
	&.items-go-y.items-from-right {
		&.items-near-left	{ justify-content: flex-end; }
		&.items-near-bottom	{ align-content: flex-end; align-items: flex-end; }
	}

	/* ------ 贪婪：要求占满一行 ------ */
	> .monopoly-x, &:is(.items-go-y, .items-from-top, .items-from-bottom) > .monopoly-y { flex-basis: 100%; }

	/* ------ 吝啬：不压缩 ------ */
	& .no-shrink { flex-shrink: 0; }

	& .flexible { flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 0; }
}

/* ------ 确保子元素组居中。（flex/grid）通用 ------ */
.groups-near-center { align-content: center; }
/* ------ 确保子元素组拉伸。（flex/grid）通用 ------ */
.groups-stretch { align-content: stretch; }
/* ------ 确保子元素组互斥。（flex/grid）通用 ------ */
.groups-space-between, .groups-mutex, .groups-social-phobia { align-content: space-between; }
/* ------ 确保子元素组友好。（flex/grid）通用 ------ */
.groups-space-around, .groups-friendly { align-content: space-around; }
/* ------ 确保子元素组不熟。（flex/grid）通用 ------ */
.groups-space-evenly, .groups-unfamiliar { align-content: space-evenly; }

/* ================== 子元素自身定位 ================== */
.near-left { margin-left: 0; margin-right: auto; justify-self: start; left: 0; right: auto; }
.near-right { margin-left: auto; margin-right: 0; justify-self: end; left: auto; right: 0; }
.near-top { margin-top: 0; margin-bottom: auto; align-self: start; vertical-align: top; top: 0; bottom: auto; }
.near-bottom { margin-top: auto; margin-bottom: 0; align-self: end; vertical-align: bottom; top: auto; bottom: 0; }
.near-x-center { margin-left: auto; margin-right: auto; justify-self: center; left: 0;	 right: 0; }
.near-y-center { margin-top: auto; margin-bottom: auto; align-self: center; vertical-align: middle; top: 0; bottom: 0; }
.near-center { margin: auto; place-self: center; vertical-align: middle; inset: 0; }

.items-go-y, .items-from-top, .items-from-bottom {
	> .near-left	{ justify-self: flex-start; align-self: start; }
	> .near-right	{ justify-self: flex-start; align-self: end; }
	> .near-top		{ align-self: flex-start; justify-self: start; }
	> .near-bottom	{ align-self: flex-start; justify-self: end; }
	> .near-x-center	{ justify-self: flex-start; align-self: center; }
	> .near-y-center	{ align-self: flex-start; justify-self: center; }
}

/* ======================== Grid 修饰 ======================== */
.grid {
	&.items-go-x { grid-auto-flow: row; }
	&.items-go-y, &.items-from-top { grid-auto-flow: column; }

	&.items-near-left	{ justify-content: flex-start; justify-items: start; }
	&.items-near-right	{ justify-content: flex-end;	 justify-items: end; }
	&.items-near-top	{ align-content: flex-start; align-items: flex-start; }
	&.items-near-bottom	{ align-content: flex-end;	 align-items: flex-end; }

	&.items-x-stretch { justify-content: stretch; justify-items: stretch; }
	&.items-y-stretch { align-content: stretch; align-items: stretch; }
	&.items-stretch	 { place-content: stretch; place-items: stretch; }

	&.items-x-near-center { justify-content: center; justify-items: center; }
	&.items-y-near-center { align-content: center; align-items: center; }
	&.items-near-center	 { place-content: center; place-items: center; }

	&.items-x-space-between, &.items-x-mutex, &.items-x-social-phobia { justify-content: space-between; }
	&.items-y-space-between, &.items-y-mutex, &.items-y-social-phobia { align-content: space-between; }
	&.items-space-between, &.items-mutex, &.items-social-phobia { place-content: space-between; }
	&.items-x-space-evenly, &.items-x-friendly { justify-content: space-evenly; }
	&.items-y-space-evenly, &.items-y-friendly { align-content: space-evenly; }
	&.items-space-evenly, &.items-friendly { place-content: space-evenly; }
	&.items-x-space-around, &.items-x-unfamiliar { justify-content: space-around; }
	&.items-y-space-around, &.items-y-unfamiliar { align-content: space-around; }
	&.items-space-around, &.items-unfamiliar { place-content: space-around; }

	/* 反向流（默认 Z 模式） */
	&.items-go-y.items-from-bottom {
		writing-mode: vertical-lr; direction: rtl;
		> * { writing-mode: horizontal-tb; direction: ltr; }

		&.items-near-left	{ justify-content: flex-end; justify-items: end; }
		&.items-near-right { justify-content: flex-start; justify-items: start; }
		&.items-near-top	 { align-content: flex-start; align-items: flex-start; }
		&.items-near-bottom{ align-content: flex-end; align-items: flex-end; }
		&.items-x-stretch	{ justify-content: stretch; justify-items: stretch; }
		&.items-y-stretch	{ align-content: stretch; align-items: stretch; }
		&.items-stretch		{ place-content: stretch; place-items: stretch; }
		&.items-x-near-center { justify-content: center; justify-items: center; }
		&.items-y-near-center { align-content: center; align-items: center; }
		&.items-near-center	 { place-content: center; place-items: center; }
		&.items-x-space-between, &.items-x-mutex, &.items-x-social-phobia { justify-content: space-between; }
		&.items-y-space-between, &.items-y-mutex, &.items-y-social-phobia { align-content: space-between; }
		&.items-space-between, &.items-mutex, &.items-social-phobia { place-content: space-between; }
		&.items-x-space-evenly, &.items-x-friendly { justify-content: space-evenly; }
		&.items-y-space-evenly, &.items-y-friendly { align-content: space-evenly; }
		&.items-space-evenly, &.items-friendly { place-content: space-evenly; }
		&.items-x-space-around, &.items-x-unfamiliar { justify-content: space-around; }
		&.items-y-space-around, &.items-y-unfamiliar { align-content: space-around; }
		&.items-space-around, &.items-unfamiliar { place-content: space-around; }

		> .near-left			{ justify-self: flex-start; align-self: end; }
		> .near-right		 { justify-self: flex-start; align-self: start; }
		> .near-top			 { align-self: flex-start;	 justify-self: start; }
		> .near-bottom		{ align-self: flex-start;	 justify-self: end; }
		> .near-x-center	{ justify-self: flex-start; align-self: center; }
		> .near-y-center	{ align-self: flex-start;	 justify-self: center; }
	}

	&.items-go-x.items-from-right {
		direction: rtl;
		> * { direction: ltr; }

		&.items-near-left	{ justify-content: flex-end; justify-items: end; }
		&.items-near-right { justify-content: flex-start; justify-items: start; }
	}
}

/* ======================== Table 修饰 ======================== */
.table {
	&.items-near-left	{ & td, & th { text-align: left; } }
	&.items-near-right { & td, & th { text-align: right; } }
	&.items-near-top	 { & td, & th { vertical-align: top; } }
	&.items-near-bottom{ & td, & th { vertical-align: bottom; } }

	&.items-from-right {
		direction: rtl;
		& td, & th { direction: ltr; }
	}
}

/* ======================== 书写模式 ======================== */
.content-Z { writing-mode: horizontal-tb; direction: ltr; }
.content-S { writing-mode: horizontal-tb; direction: rtl; }
.content-N { writing-mode: vertical-rl;	 direction: ltr; }
.content-И { writing-mode: vertical-lr;	 direction: ltr; }

/* RTL（S 模式 / 系统 RTL） */
:dir(rtl), .content-S {
	&.flex {
		&.items-from-left	{ flex-direction: row-reverse; }
		&.items-from-right { flex-direction: row; }
		&.items-near-left	{ justify-content: flex-end; }
		&.items-near-right { justify-content: flex-start; }
		> .near-left	{ justify-self: end; }
		> .near-right { justify-self: start; }
		&.items-go-y, &.items-from-top, &.items-from-bottom {
			&.items-near-left	{ align-content: flex-end; align-items: flex-end; }
			&.items-near-right { align-content: flex-start; align-items: flex-start; }
			> .near-left	{ align-self: end; }
			> .near-right { align-self: start; }
		}
	}

	&.grid {
		&.items-near-left	{ justify-content: flex-end; justify-items: end; }
		&.items-near-right { justify-content: flex-start; justify-items: start; }
		> .near-left	{ justify-self: end; }
		> .near-right { justify-self: start; }

		&.items-go-y.items-from-bottom > * {
			writing-mode: horizontal-tb; direction: rtl;
		}
		&.items-go-x.items-from-right > * {
			direction: rtl;
		}
	}

	&.table {
		&.items-near-left	{ & td, & th { text-align: right; } }
		&.items-near-right { & td, & th { text-align: left; } }
		&.items-from-right {
			& td, & th { direction: rtl; }
		}
	}
}

/* N 模式（竖排 vertical-rl） */
.content-N {
	&.flex {
		&.items-go-x {
			&.items-from-left	{ flex-direction: column-reverse; }
			&.items-from-right { flex-direction: column; }
		}
		&.items-go-y {
			&.items-from-top		{ flex-direction: row; }
			&.items-from-bottom { flex-direction: row-reverse; }
		}
	}

	&.grid {
		&.items-near-top		{ justify-content: flex-start; justify-items: start; }
		&.items-near-bottom { justify-content: flex-end;	 justify-items: end; }
		&.items-near-left	 { align-content: flex-end;	 align-items: flex-end; }
		&.items-near-right	{ align-content: flex-start; align-items: flex-start; }

		&.items-y-stretch	 { justify-content: stretch; justify-items: stretch; }
		&.items-y-near-center { justify-content: center; }
		&.items-y-space-between, &.items-y-mutex, &.items-y-social-phobia { justify-content: space-between; }
		&.items-y-space-around, &.items-y-unfamiliar { justify-content: space-around; }
		&.items-y-space-evenly, &.items-y-friendly { justify-content: space-evenly; }

		&.items-x-stretch	 { align-content: stretch; align-items: stretch; }
		&.items-x-near-center { align-content: center; }
		&.items-x-space-between, &.items-x-mutex, &.items-x-social-phobia { align-content: space-between; }
		&.items-x-space-around, &.items-x-unfamiliar { align-content: space-around; }
		&.items-x-space-evenly, &.items-x-friendly { align-content: space-evenly; }

		&.items-go-y.items-from-bottom {
			writing-mode: vertical-lr; direction: rtl;
			> * { writing-mode: vertical-rl; direction: ltr; }
		}
		&.items-go-x.items-from-right > * {
			writing-mode: vertical-rl; direction: ltr;
		}
	}

	.near-left			{ justify-self: flex-start; align-self: end; }
	.near-right		 { justify-self: flex-start; align-self: start; }
	.near-top			 { align-self: flex-start;	 justify-self: start; }
	.near-bottom		{ align-self: flex-start;	 justify-self: end; }
	.near-x-center	{ justify-self: flex-start; align-self: center; }
	.near-y-center	{ align-self: flex-start;	 justify-self: center; }

	.table.items-from-right {
		& td, & th { writing-mode: vertical-rl; direction: ltr; }
	}
}

/* И 模式（竖排 vertical-lr） */
.content-И {
	&.flex {
		&.items-go-x {
			&.items-from-left	{ flex-direction: column; }
			&.items-from-right { flex-direction: column-reverse; }
		}
		&.items-go-y {
			&.items-from-top		{ flex-direction: row; }
			&.items-from-bottom { flex-direction: row-reverse; }
		}
	}

	&.grid {
		&.items-near-top		{ justify-content: flex-start; justify-items: start; }
		&.items-near-bottom { justify-content: flex-end;	 justify-items: end; }
		&.items-near-left	 { align-content: flex-start; align-items: flex-start; }
		&.items-near-right	{ align-content: flex-end;	 align-items: flex-end; }

		&.items-y-stretch	 { justify-content: stretch; justify-items: stretch; }
		&.items-y-near-center { justify-content: center; }
		&.items-y-space-between, &.items-y-mutex, &.items-y-social-phobia { justify-content: space-between; }
		&.items-y-space-around, &.items-y-unfamiliar { justify-content: space-around; }
		&.items-y-space-evenly, &.items-y-friendly { justify-content: space-evenly; }

		&.items-x-stretch	 { align-content: stretch; align-items: stretch; }
		&.items-x-near-center { align-content: center; }
		&.items-x-space-between, &.items-x-mutex, &.items-x-social-phobia { align-content: space-between; }
		&.items-x-space-around, &.items-x-unfamiliar { align-content: space-around; }
		&.items-x-space-evenly, &.items-x-friendly { align-content: space-evenly; }

		&.items-go-y.items-from-bottom {
			writing-mode: vertical-lr; direction: rtl;
			> * { writing-mode: vertical-lr; direction: ltr; }
		}
		&.items-go-x.items-from-right {
			writing-mode: vertical-rl; direction: ltr;
			> * { writing-mode: vertical-lr; direction: ltr; }
		}
	}

	.near-left			{ justify-self: flex-start; align-self: start; }
	.near-right		 { justify-self: flex-start; align-self: end; }
	.near-top			 { align-self: flex-start;	 justify-self: start; }
	.near-bottom		{ align-self: flex-start;	 justify-self: end; }
	.near-x-center	{ justify-self: flex-start; align-self: center; }
	.near-y-center	{ align-self: flex-start;	 justify-self: center; }

	.table.items-from-right {
		writing-mode: vertical-lr; direction: ltr;
		& td, & th { writing-mode: vertical-lr; direction: ltr; }
	}
}

/* ============================== Grid/Flex 预设布局 ============================== */
/* 为防没有使用.grid/.flex之类，所以不显式结合.grid/.flex，直接设置。若非display:grid/flex也没事，会被浏览器忽略。下同 */
/* ------ "工字形"布局，上部导航栏，底部页脚，中间左右两栏均分。 ------ */
.工字形 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'header header'
		'left right'
		'footer footer';

	> header, > .header, > .near-top {
		grid-area: header;
		grid-column: 1 / -1;
	}

	> footer, > .footer, > .near-bottom {
		grid-area: footer;
		grid-column: 1 / -1;
	}

	> .sidebar.near-left {
		grid-area: left;
		margin: 0;
		justify-self: auto;
	}

	> .sidebar.near-right {
		grid-area: right;
		margin: 0;
		justify-self: auto;
	}
}

/* ------ "朋字形"布局，无顶部底部，只有左右两栏均分。 ------ */
.朋字形 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 'left right';
	> .near-left { grid-area: left; margin: 0; justify-self: auto; }
	> .near-right { grid-area: right; margin: 0; justify-self: auto; }
}

/* ------ "亚字形"布局，上部导航栏，底部页脚，中间有左右侧栏，中部是主要内容 ------ */
.亚字形 {
	display: grid;
	grid-template-rows:
		auto /* Header 高度自适应内容 */
		minmax(var(--layout-main-row-min), 1fr) /* 主内容区：有最小高度，再填充剩余 */
		auto; /* Footer 高度自适应 */
	grid-template-columns:
		minmax(var(--left-sidebar-min-width), var(--left-sidebar-max-width)) /* 左侧 */
		1fr /* 中间：自适应剩余空间 */
		minmax(var(--right-sidebar-min-width), var(--right-sidebar-max-width)); /* 右侧 */
	grid-template-areas:
		'header header header'
		'left-sidebar main right-sidebar'
		'footer footer footer';
	> header, > .header, > .near-top {
		grid-area: header;
		grid-column: 1 / -1;
	}
	> footer, > .footer, > .near-bottom {
		grid-area: footer;
		grid-column: 1 / -1;
	}
	> main, > .main, > .body { grid-area: main; }
	> .sidebar.near-left { grid-area: left-sidebar; margin: 0; justify-self: auto; }
	> .sidebar.near-right { grid-area: right-sidebar; margin: 0; justify-self: auto; }
}

/* ------ "叵字形"布局，上部导航栏，底部页脚，中间左侧栏宽度固定，右侧主要内容自适应 ------ */
.叵字形 {
	display: grid;
	grid-template-rows:
		auto /* Header 高度自适应内容 */
		minmax(var(--layout-main-row-min), 1fr) /* 主内容区：有最小高度，再填充剩余 */
		auto; /* Footer 高度自适应 */
	grid-template-columns: minmax(var(--left-sidebar-min-width), var(--left-sidebar-max-width)) 1fr;
	grid-template-areas:
		'header header'
		'left-sidebar main'
		'footer footer';
	> header, > .header, > .near-top {
		grid-area: header;
		grid-column: 1 / -1;
	}
	> footer, > .footer, > .near-bottom {
		grid-area: footer;
		grid-column: 1 / -1;
	}
	> main, > .main, > .body { grid-area: main; }
	> .sidebar.near-left { grid-area: left-sidebar; margin: 0; justify-self: auto; }
}

/*------ "反叵字形"布局，上部导航栏，底部页脚，中间右侧栏宽度固定，左侧主要内容自适应 ------ */
.反叵字形 {
	display: grid;
	grid-template-rows:
		auto /* Header 高度自适应内容 */
		minmax(var(--layout-main-row-min), 1fr) /* 主内容区：有最小高度，再填充剩余 */
		auto; /* Footer 高度自适应 */
	grid-template-columns: 1fr minmax(var(--right-sidebar-min-width), var(--right-sidebar-max-width));
	grid-template-areas:
		'header header'
		'main right-sidebar'
		'footer footer';
	> header, > .header, > .near-top {
		grid-area: header;
		grid-column: 1 / -1;
	}
	> footer, > .footer, > .near-bottom {
		grid-area: footer;
		grid-column: 1 / -1;
	}
	> main, > .main, > .body { grid-area: main; }
	> .sidebar.near-right { grid-area: right-sidebar; margin: 0; justify-self: auto; }
}

/* ------ "目字形/三字形"布局，上部导航栏，底部页脚 ------ */
.目字形, .三字形 {
	display: grid;
	grid-template-rows:
		auto /* Header 高度自适应内容 */
		minmax(var(--layout-main-row-min), 1fr) /* 主内容区：有最小高度，再填充剩余 */
		auto; /* Footer 高度自适应 */
	grid-template-columns: 1fr;
	grid-template-areas:
		'header'
		'main'
		'footer';
	> header, > .header, > .near-top {
		grid-area: header;
	}
	> footer, > .footer, > .near-bottom {
		grid-area: footer;
	}
}

/* ------ "九宫格"布局，三行三列 ------ */
.九宫格 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas:
		'top-left top top-right'
		'left center right'
		'bottom-left bottom bottom-right';

	> header, > .header, > .near-top { grid-area: top; }
	> .tail, .near-bottom { grid-area: bottom; }
	> .sidebar.near-left { grid-area: left; margin: 0; justify-self: auto; }
	> .sidebar.near-right { grid-area: right; margin: 0; justify-self: auto; }

	&.大中宫 {
		grid-template-columns:
			minmax(var(--left-sidebar-min-width), var(--left-sidebar-max-width))
			1fr
			minmax(var(--right-sidebar-min-width), var(--right-sidebar-max-width));
		grid-template-rows: auto 1fr auto;
	}
}