/* コンテナ・セクション・グリッド */
.lw-site {
	min-height: 100vh;
}

.lw-container {
	width: 100%;
	max-width: calc(var(--lw-container) + var(--lw-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--lw-gutter);
}

.lw-section {
	padding-block: var(--lw-section-md);
	background: var(--lw-ink);
}

.lw-section--sm {
	padding-block: var(--lw-section-sm);
}

.lw-section--lg {
	padding-block: var(--lw-section-lg);
}

/* 背景の交互パターン */
.lw-bg-ink-2 {
	background: var(--lw-ink-2);
}

.lw-bg-surface {
	background: var(--lw-surface);
}

.lw-bg-gradient {
	background: linear-gradient(180deg, var(--lw-ink-3), var(--lw-surface));
}

.lw-bg-paper {
	background: var(--lw-paper);
	color: var(--lw-paper-text);
}

/* 区切りのアクセント線（セクション上部） */
.lw-rule-top {
	position: relative;
	border-top: 1px solid var(--lw-line);
}

.lw-rule-top::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 18%;
	height: 2px;
	background: linear-gradient(90deg, var(--lw-accent), rgba(196, 103, 126, 0));
}

/*
 * 汎用グリッド。列数は Mobile / Tablet / Desktop で変数に持たせる。
 *   <div class="lw-grid" style="--cols-m:1;--cols-t:2;--cols-d:3">
 * 例: .lw-grid--1-2-3
 */
.lw-grid {
	display: grid;
	gap: var(--lw-gap, 16px);
	grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr));
}

@media (min-width: 768px) {
	.lw-grid {
		grid-template-columns: repeat(var(--cols-t, var(--cols-m, 1)), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.lw-grid {
		grid-template-columns: repeat(var(--cols-d, var(--cols-t, var(--cols-m, 1))), minmax(0, 1fr));
	}
}

.lw-grid--1-2-3 { --cols-m: 1; --cols-t: 2; --cols-d: 3; }
.lw-grid--2-3-4 { --cols-m: 2; --cols-t: 3; --cols-d: 4; }
.lw-grid--2-2-4 { --cols-m: 2; --cols-t: 2; --cols-d: 4; }
.lw-grid--1-1-2 { --cols-m: 1; --cols-t: 1; --cols-d: 2; }
.lw-grid--1-2-2 { --cols-m: 1; --cols-t: 2; --cols-d: 2; }
.lw-grid--1-3-3 { --cols-m: 1; --cols-t: 3; --cols-d: 3; }

/* 横スクロール（Mobileのみ使う場所用。Tablet以上は折り返し） */
.lw-hscroll {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.lw-hscroll > * {
	flex: none;
}

@media (min-width: 768px) {
	.lw-hscroll--mobile-only {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/* 画像枠（aspect-ratio は --lw-ratio で指定。例: 4 / 5） */
.lw-ratio {
	position: relative;
	aspect-ratio: var(--lw-ratio, 4 / 5);
	overflow: hidden;
}

.lw-main {
	display: block;
}