/* ===================================================================
   canvas.css — Canva 互換のキャンバスシステム
   ベース幅 913px、子要素は絶対配置。viewport が 913px 未満のときは
   transform: scale() で全体を縮小する(JS から制御)。
   =================================================================== */

:root {
	--canvas-base-width: 913;
	--canvas-scale: 1;
	--brand-teal: #2b545e;
	--brand-teal-soft: rgba(43, 84, 94, .47);
	--text-body: #000;
	--text-muted: #575b53;
}

.canvas {
	display: block;
	width: 100%;
	background: #fff;
}

/* Each section sits inside a wrap whose height is set in JS so the
   document flow respects the scaled child. */
.canvas__wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.canvas__section {
	position: relative;
	margin: 0 auto;
	transform-origin: top left;
	overflow: hidden;
	background: #fff;
}

/* Any element whose inline style sets left+top is treated as absolutely
   positioned. This works for both direct children and nested elements
   (e.g. items inside .welcome__grid or .reserve). */
.canvas__section [style*="left:"][style*="top:"] {
	position: absolute;
}

/* Wrapper containers (without inline left/top) should not constrain layout */
.canvas__section .welcome__grid,
.canvas__section .welcome__cells,
.canvas__section .reserve {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.canvas__section .welcome__grid > *,
.canvas__section .welcome__cells > *,
.canvas__section .reserve > * {
	pointer-events: auto;
}

/* Scaling on small viewports is handled by /assets/js/scale.js,
   which sets both `transform` on the section AND `height` on the wrap
   so the document flow stays consistent. The CSS-only fallback below
   is only for the (very rare) no-JS case and intentionally keeps the
   canvas at its 913 native width with horizontal scroll. */
.no-js .canvas__wrap {
	overflow-x: auto;
}

/* Print: keep canvas at native size */
@media print {
	.canvas__section {
		transform: none !important;
	}
}

/* Grid と Cells の子要素に position:absolute を強制 */
.canvas__section .welcome__grid,
.canvas__section .welcome__cells,
.canvas__section .reserve {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.canvas__section .welcome__grid > *,
.canvas__section .welcome__cells > *,
.canvas__section .reserve > * {
	position: absolute;
	pointer-events: auto;
}