* { box-sizing: border-box; }

/* ----------------------
	 Design Tokens (Light Theme)
	 ---------------------- */
:root {
	--color-brand:#c40000;
	--color-brand-hover:#a60000;
	--color-brand-soft:#ffe5e5;
	--color-bg-page:#f5f6f8;
	--color-bg-panel:#ffffff;
	--color-bg-soft:#f0f2f5;
	--color-border:#dfe3e8;
	--color-border-strong:#c2c8d0;
	--color-text:#222;
	--color-text-sec:#555;
	--color-text-faint:#777;
	--color-text-inverse:#ffffff;
	--color-success:#0d7a3c;
	--color-warn:#c37c00;
	--color-danger:#c40000;
	--shadow-panel:0 1px 2px rgba(0,0,0,.06),0 3px 8px rgba(0,0,0,.08);
	--radius-panel:4px;
	--space-2:4px;
	--space-3:8px;
	--space-4:12px;
	--space-5:16px;
	--space-6:20px;
	--font-stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

body { margin:0; font-family: var(--font-stack); color:var(--color-text); background:var(--color-bg-page); line-height:1.5; }
/* 視覚的に非表示だがアクセシビリティ上存在させる */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
header.app-header, footer.app-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 24px; background:#1c1d1f; border-bottom:4px solid var(--color-brand); }
footer.app-footer { border-top:1px solid #2c313a; border-bottom:none; font-size:12px; gap:16px; }
h1 { font-size:20px; margin:0; font-weight:600; color:var(--color-text-inverse); letter-spacing:.5px; }
.brand { display:flex; align-items:center; gap:16px; }
.brand-logo { height:40px; width:auto; display:block; }
.toolbar { display:flex; gap:12px; font-size:13px; align-items:center; color:var(--color-text-inverse); }
h1 small { font-weight:400; font-size:12px; color:#bbb; margin-left:4px; }
select, input[type=number], button { background:#fff; color:var(--color-text); border:1px solid var(--color-border-strong); border-radius:4px; padding:6px 8px; font-size:13px; transition:background .15s,border-color .15s,box-shadow .15s; }
select:focus, input[type=number]:focus, button:focus { outline:none; border-color:var(--color-brand); box-shadow:0 0 0 2px rgba(196,0,0,.25); }
input[disabled], select[disabled] { opacity:.55; cursor:not-allowed; }
input.field-error, select.field-error { border-color:var(--color-danger); background:#ffecec; }
button { cursor:pointer; }
button:hover { background:#f3f4f6; }
button.ghost { background:#f2f3f5; }
main.layout { display:grid; grid-template-columns: 380px 1fr; grid-auto-rows:minmax(100px,auto); gap:24px; padding:24px 40px 56px; max-width:1320px; margin:0 auto; }
.panel { background:var(--color-bg-panel); border:1px solid var(--color-border); padding:18px 20px 22px; border-radius:var(--radius-panel); display:flex; flex-direction:column; min-height:200px; position:relative; box-shadow:var(--shadow-panel); }
.panel h2 { margin:0 0 14px; font-size:16px; color:#111; font-weight:600; letter-spacing:0; display:flex; align-items:center; gap:8px; padding-bottom:6px; border-bottom:1px solid var(--color-border); position:relative; }
.panel h2:after { content:""; position:absolute; left:0; bottom:-1px; width:56px; height:2px; background:var(--color-brand); }
.panel-sub { font-size:11px; font-weight:400; color:var(--color-text-sec); letter-spacing:0.5px; text-transform:uppercase; }
.field { display:flex; flex-direction:column; margin-bottom:10px; gap:4px; }
.field label { font-size:12px; font-weight:600; letter-spacing:.3px; }
.field input, .field select { margin-top:4px; }
.req { color:var(--color-brand); font-weight:700; }
.hint { font-size:11px; color:var(--color-text-faint); min-height:14px; margin-top:2px; }
.actions { display:flex; gap:10px; margin:12px 0 4px; }
button.primary { background:var(--color-brand); border-color:var(--color-brand); font-weight:600; color:var(--color-text-inverse); }
button.primary:hover { background:var(--color-brand-hover); }
button.ghost { background:#f2f3f5; border-color:var(--color-border-strong); }
button.ghost:hover { background:#e7eaef; }
button.export-pdf-inline { background:var(--color-brand); border-color:var(--color-brand); font-weight:700; letter-spacing:.5px; color:#fff; position:relative; padding:8px 18px; }
button.export-pdf-inline:hover { background:var(--color-brand-hover); }
button.export-pdf-inline:before { display:none; }
.head-selector { margin-bottom:14px; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:10px; padding:12px 12px 10px; position:relative; }
.head-selector-track { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 6px; scrollbar-width:thin; }
.head-selector-track::-webkit-scrollbar { height:8px; }
.head-selector-track::-webkit-scrollbar-track { background:var(--color-bg-panel); }
.head-selector-track::-webkit-scrollbar-thumb { background:var(--color-border-strong); border-radius:4px; }
.head-card { flex:0 0 140px; background:#fff; border:2px solid transparent; border-radius:8px; padding:8px 8px 10px; display:flex; flex-direction:column; gap:6px; position:relative; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.06); transition:box-shadow .15s,border-color .15s,transform .15s; }
.head-card img { width:100%; height:88px; object-fit:contain; background:#fafbfc; border:1px solid var(--color-border); border-radius:6px; }
.head-card .head-img-fallback { width:100%; height:88px; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 10px,#e5e7eb 10px,#e5e7eb 20px); border:1px solid var(--color-border-strong); border-radius:6px; font-size:18px; font-weight:700; color:#555; letter-spacing:1px; }
.head-card .meta { display:flex; flex-direction:column; gap:2px; font-size:11px; line-height:1.25; }
.head-card .h-name { font-weight:700; font-size:12px; letter-spacing:.5px; }
.head-card .h-feature { color:var(--color-text-sec); font-size:11px; }
.head-card .h-range { color:var(--color-text-faint); font-size:10px; }
.head-card:hover { box-shadow:0 2px 4px rgba(0,0,0,.12),0 5px 14px rgba(0,0,0,.10); }
.head-card:focus-visible { outline:none; border-color:var(--color-brand); }
.head-card.current { border-color:var(--color-brand); box-shadow:0 0 0 2px rgba(196,0,0,.25); }
.head-card.provisional { border-color:#ffa726; box-shadow:0 0 0 2px rgba(255,167,38,.35); }
.head-selector-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.head-selector-actions button.small { padding:4px 10px; font-size:12px; }
.head-selector-actions button[disabled] { opacity:.5; cursor:not-allowed; }
.status-line { margin-top:6px; font-size:11px; color:#8a929c; letter-spacing:.5px; text-transform:uppercase; }
/* --- Standard item emphasis --- */
#stdResult { font-size:13px; font-weight:600; letter-spacing:.5px; padding:6px 10px; border-radius:6px; display:inline-block; background:#f2f4f7; color:#222; border:1px solid var(--color-border-strong); box-shadow:none; }
#stdResult[data-status=STD] { background:#e8f7ef; color:var(--color-success); border-color:var(--color-success); }
#stdResult[data-status=CUST] { background:#fbecec; color:var(--color-danger); border-color:var(--color-danger); }
#stdCatalogLinkBox { margin-top:10px; padding:14px 16px 16px; border:1px solid #425167; border-radius:14px; background:linear-gradient(150deg,#202a33,#1c242c 40%,#182027); box-shadow:0 4px 10px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset; position:relative; overflow:hidden; }
#stdCatalogLinkBox:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%,rgba(96,165,250,0.25),transparent 60%); pointer-events:none; }
#stdCatalogLinkBox #stdCatalogLabel { font-size:13px; font-weight:800; color:#cbd5e1; letter-spacing:1.2px; text-transform:uppercase; display:block; margin-bottom:6px; }
#stdCatalogLink { font-size:16px; font-weight:700; color:#3b82f6; text-decoration:none; line-height:1.35; display:inline-block; padding:4px 10px 5px; border-radius:8px; background:rgba(59,130,246,0.10); box-shadow:0 0 0 1px rgba(59,130,246,0.35) inset; position:relative; }
#stdCatalogLink:hover { background:rgba(59,130,246,0.18); color:#60a5fa; box-shadow:0 0 0 1px rgba(96,165,250,0.55) inset, 0 0 0 3px rgba(59,130,246,0.25); }
#stdCatalogLink:active { background:rgba(59,130,246,0.30); color:#93c5fd; }
#stdCatalogLink:focus-visible { outline:2px solid #60a5fa; outline-offset:3px; }
.canvas-wrapper { background:#fff; border:1px solid #999; border-radius:4px; width:100%; position:relative; }
.canvas-wrapper.a4-portrait { aspect-ratio: 210 / 297; }
.drawing-sheet { width:100%; height:100%; }
.head-visual { position:relative; width:100%; height:100%; }
#preview-img { pointer-events:none; position:absolute; z-index:1; }
#preview-svg { position:absolute; inset:0; z-index:2; }
#coordOverlay { position:absolute; top:4px; left:4px; background:rgba(17,17,17,.75); color:#f0f3f7; font-size:11px; padding:4px 6px; border-radius:4px; font-family:monospace; line-height:1.2; pointer-events:none; box-shadow:0 0 0 1px rgba(255,255,255,0.05), 0 2px 4px rgba(0,0,0,0.4); opacity:0; transition:opacity .12s; z-index: 10; }
.coord-overlay.show { opacity:1; }
#preview-svg text { user-select:none; }
.ranges { margin-top:8px; font-size:11px; line-height:1.4; white-space:pre; font-family:monospace; }
.verdict #verdictStatus { font-size:18px; font-weight:600; margin-bottom:6px; }
ul.reasons { list-style:none; padding:0; margin:4px 0 0; font-size:11px; max-height:170px; overflow:auto; }
ul.reasons li { padding:4px 6px; border-left:3px solid #3d444d; margin:0 0 4px; background:#242b33; border-radius:3px; line-height:1.3; }
ul.reasons li.level-NG { border-color:#ef4444; background:#3a2020; }
ul.reasons li.level-WARN { border-color:#e0a93b; background:#3a311d; }
ul.reasons li.level-INFO { border-color:#3b82f6; background:#1e2f47; }
.debug-output { font-size:10.5px; background:#121417; padding:8px 10px; border:1px solid #2c313a; border-radius:6px; max-height:240px; overflow:auto; }
.verdict-badge { display:inline-block; padding:6px 10px; font-size:13px; font-weight:600; border-radius:24px; letter-spacing:.5px; background:#f2f4f7; color:#555; margin-bottom:8px; min-width:72px; text-align:center; border:1px solid var(--color-border-strong); }
.verdict-badge[data-status=OK] { background:#e8f7ef; color:var(--color-success); border-color:var(--color-success); }
.verdict-badge[data-status=NG] { background:#fbecec; color:var(--color-danger); border-color:var(--color-danger); }
.verdict-badge[data-status=WARN] { background:#fff4e0; color:var(--color-warn); border-color:var(--color-warn); }
.verdict-badge[data-status=IDLE] { background:#f2f4f7; }

/* --- Global error banner --- */
.global-error { margin-top:14px; padding:14px 16px 16px; border:1px solid #5f1f28; border-radius:12px; background:linear-gradient(145deg,#3f1f22,#2b1517); color:#fca5a5; box-shadow:0 4px 10px rgba(0,0,0,0.45), 0 0 0 1px rgba(239,68,68,0.35) inset; position:relative; overflow:hidden; }
.global-error:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 18% 25%, rgba(239,68,68,0.25), transparent 65%); pointer-events:none; }
.global-error-title { font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#fecaca; margin:0 0 6px; }
.global-error-message { font-size:12.5px; line-height:1.5; white-space:pre-wrap; }
.global-error a { color:#fb7185; font-weight:600; text-decoration:underline; }
.global-error a:hover { color:#fda4af; }

/* focus-visible for keyboard */
*:focus-visible { outline:2px solid var(--color-brand); outline-offset:2px; }

/* scrollbar tweak */
ul.reasons::-webkit-scrollbar, .debug-output::-webkit-scrollbar { width:8px; }
ul.reasons::-webkit-scrollbar-track, .debug-output::-webkit-scrollbar-track { background:#1c2025; }
ul.reasons::-webkit-scrollbar-thumb, .debug-output::-webkit-scrollbar-thumb { background:#3a414d; border-radius:4px; }

/* responsive fallback */
@media (max-width:1200px){
	main.layout { grid-template-columns: 1fr; padding:20px 16px 40px; }
	.panel { order:0; }
	#panelPreview { order:1; }
	#panelVerdict { order:2; }
	#panelDebug { order:3; }
}
/* responsive fallback */
@media (max-width:1200px){
	main.layout { grid-template-columns: minmax(0,1fr); padding:20px 16px 40px; max-width:100%; }
	.panel { order:0; min-width:0; }
	#panelPreview { order:1; }
	#panelVerdict { order:2; }
	#panelDebug { order:3; }
}
.canvas-wrapper { background:#fff; border:1px solid #999; border-radius:4px; width:100%; position:relative; }
.canvas-wrapper { background:#fff; border:1px solid #999; border-radius:4px; width:100%; max-width:100%; position:relative; }

/* Mobile header and layout: keep everything within viewport width (no horizontal scroll) */
@media (max-width: 600px){
	html, body { max-width: 100%; overflow-x: hidden; }
	header.app-header{
		width: 100%;
		max-width: 100%;
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
		border-radius: 0;
	}
		.brand, .toolbar { flex-wrap: wrap; }
		.toolbar { gap: 8px; row-gap: 6px; }
		.toolbar .rule-version { display:none; }
		.toolbar label { white-space: normal; }
		.toolbar select { max-width: 45vw; }
	.brand-logo { height: 32px; max-width: 40vw; }
	h1 { font-size: 18px; }
		main.layout { padding-left: 12px; padding-right: 12px; }
		.panel { padding: 14px 12px 16px; }

		/* Inputs: fit to viewport width */
		#panelInputs, #panelInputs form { width: 100%; max-width: 100%; }
		.panel { width: 100%; max-width: 100%; }
		.field { min-width: 0; }
		.field label { white-space: normal; }
		.hint, .status-line { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
		.field input, .field select { width: 100%; max-width: 100%; min-width: 0; }
			/* Constrain all descendants within panelInputs to avoid wide children */
			#panelInputs * { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; }
			/* Tame select and number spinners in narrow view */
			select { -webkit-appearance: none; appearance: none; background-position: right 8px center; background-repeat: no-repeat; }
				input[type=number] { appearance: textfield; -moz-appearance: textfield; }
			input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
		.actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
		.actions button { width: 100%; max-width: 100%; font-size: 14px; padding: 10px 12px; letter-spacing: 0; }

		/* Long text/link wrapping to avoid overflow */
		#stdCatalogLinkBox { max-width: 100%; }
		#stdCatalogLink { display: block; max-width: 100%; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }

		/* Drawing: allow scroll inside the panel */
		.canvas-wrapper { overflow: auto; }
	.canvas-wrapper.a4-portrait { aspect-ratio: auto; height: 75vh; }
		.head-visual { width: 960px; height: calc(960px * 297 / 210); }

		/* Ensure inputs panel doesn't produce visible horizontal scrollbars */
		#panelInputs { overflow-x: hidden; }
}

	/* Desktop: keep drawing scroll available if needed (large content) */
	.canvas-wrapper { overflow: auto; }

	/* Panel spacing adjustments when head selector is separated */
	#panelHeadSelector { margin-bottom: 0; }
	#panelInputs { margin-top: 0; }

/* Light theme fine-tuning for elements still using dark gradients (TODO: refactor later) */
#stdCatalogLinkBox { background:#ffffff; border:1px solid var(--color-border); box-shadow:var(--shadow-panel); }
#stdCatalogLinkBox #stdCatalogLabel { color:var(--color-text-sec); }
#stdCatalogLink { background:var(--color-brand-soft); color:var(--color-brand); box-shadow:none; border:1px solid var(--color-brand); }
#stdCatalogLink:hover { background:#ffd6d6; color:var(--color-brand-hover); }