:root { font-family: system-ui, sans-serif; color: #203044; background: #f5f7fa; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1280px; margin: auto; padding: 32px; }
footer { max-width: 1280px; margin: auto; padding: 0 32px 24px; font-size: .85rem; }
h1 { font-size: 1.8rem; margin-bottom: 4px; }
h2 { font-size: 1.2rem; margin-top: 28px; }
section { margin-top: 24px; }
.notice { background: #fff4d7; border-left: 4px solid #af7600; padding: 12px 18px; }
.editor-layout { display: grid; grid-template-columns: minmax(360px, 1fr) 300px; gap: 24px; }
.editor { width: 100%; overflow: hidden; border: 1px solid #9caaba; }
#editor { display: block; width: 100%; height: auto; touch-action: none; cursor: move; }
.checker { background-color: white; background-image: conic-gradient(#e0e5ec 25%, transparent 0 50%, #e0e5ec 0 75%, transparent 0); background-size: 20px 20px; }
label { display: block; margin: 8px 0; }
input, select, button { font: inherit; }
input[type=number] { width: 135px; float: right; }
fieldset { padding: 12px; margin: 12px 0; }
button { border: 1px solid #355c9a; border-radius: 5px; background: white; color: #183e74; padding: 8px 14px; cursor: pointer; margin: 4px 0; }
button:disabled { opacity: .45; cursor: not-allowed; }
#export { background: #204d8b; color: white; }
:focus-visible { outline: 3px solid #b16b00; outline-offset: 3px; }
.previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.preview { background: white; border: 1px solid #c3cdd9; padding: 14px; min-width: 0; }
.preview h3 { font-size: 1rem; margin: 0 0 10px; }
.preview .checker { height: 280px; display: flex; align-items: center; justify-content: center; }
.preview canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview p { overflow-wrap: anywhere; font-size: .85rem; }
#range-error { color: #a32222; }
details { margin: 12px 0; border: 1px solid #c3cdd9; padding: 8px 12px; background: white; }
summary { cursor: pointer; }
[hidden] { display: none !important; }