:root { color-scheme: light; font-family: 'M PLUS Rounded 1c', 'Zen Maru Gothic'; color: #303333; background: #f3f3f0; accent-color: #42776c; }
* { box-sizing: border-box; }
body { margin: 0; }
header { max-width: 1440px; margin: auto; padding: 30px 32px 22px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.eyebrow { color: #42776c; font-size: 12px; letter-spacing: .18em; }
h1 { font-size: clamp(20px, 3vw, 28px); margin: 5px 0 0; }
header p, .hint, .print-note, footer { color: #737a77; font-size: 12px; }
main { max-width: 1440px; margin: auto; padding: 0 32px; display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; align-items: start; }
.panel { background: #fff; border: 1px solid #dfE3df; border-radius: 14px; padding: 22px; }
label { display: block; font-size: 12px; margin: 17px 0 7px; }
label:first-child { margin-top: 0; }
label span { font-size: 12px; color: #7d837f; margin-left: 5px; }
textarea, select, button, input { font: inherit; font-size: 16px; }
button, select, input { min-height: 44px; }
textarea, select { width: 100%; padding: 10px; color: #303333; background: #fafbf9; border: 1px solid #d7dcd6; border-radius: 7px; font-size: 16px; }
textarea { resize: vertical; min-height: 90px; }
button, select, input[type=color], input[type=range] { cursor: pointer; }
:focus-visible { outline: 3px solid #73a99b; outline-offset: 3px; }
.hint { line-height: 1.8; margin: 8px 0 0; font-size: 12px; }
.color-fields { display: flex; gap: 16px; margin-top: 17px; }
.color-fields label { flex: 1; margin: 0; }
input[type=color] { display: block; width: 100%; height: 44px; padding: 3px; border: 1px solid #d7dcd6; border-radius: 6px; background: #fff; margin-top: 7px; }
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 8px; margin-top: 12px; }
.swatch { min-width: 44px; height: 44px; border: 1px solid #0002; border-radius: 5px; }
.swatch:hover { transform: translateY(-2px); }
.background-fields { display: flex; gap: 8px; }
.background-fields input { width: 45px; height: 44px; flex-shrink: 0; margin: 0; }
input[type=range] { width: 100%; }
output { float: right; color: #42776c; }
.preview-panel { min-width: 0; position: sticky; top: 20px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0 14px; }
h2 { font-size: 14px; margin: 0; }
#dimensions { font-size: 12px; color: #737a77; }
.preview-stage { min-height: 340px; height: min(73vh, 850px); border: 1px solid #e0e3de; border-radius: 14px; padding: 25px; display: flex; align-items: center; justify-content: center; background: #e7e9e4; overflow: hidden; }
canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 6px 26px #30333324; background-color: white; background-image: conic-gradient(#e3e5e3 25%, transparent 0 50%, #e3e5e3 0 75%, transparent 0); background-size: 16px 16px; }
.save-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
#status { font-size: 12px; color: #68736d; }
#save { flex-shrink: 0; color: white; background: #42776c; border: 0; border-radius: 8px; padding: 13px 24px; font-size: 13px; }
#save:hover { background: #315f55; }
#save:disabled { opacity: .5; cursor: wait; }
.print-note { line-height: 1.8; }
footer { text-align: center; padding: 28px 16px; font-size: 12px; }
.guide { grid-column: 1 / -1; line-height: 1.9; font-size: 14px; }
.guide section + section { margin-top: 24px; }
.guide h2 { font-size: 18px; }
.guide p { margin: 10px 0; }
.guide ol { padding-left: 24px; }
.guide li + li { margin-top: 8px; }
a { color: #315f55; text-underline-offset: 3px; }
.order-link { border-top: 1px solid #dfe3df; padding-top: 16px; }
.order-link a, .download-link { display: inline-flex; align-items: center; min-height: 44px; }
footer p { margin: 6px auto; max-width: 900px; line-height: 1.8; }
dialog { width: min(680px, calc(100% - 32px)); max-height: 90vh; max-height: 90dvh; overflow-y: auto; padding: 20px; border: 1px solid #dfe3df; border-radius: 14px; color: #303333; background: #fff; }
dialog::backdrop { background: #30333399; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog-heading button { padding: 8px 16px; border: 1px solid #d7dcd6; border-radius: 7px; color: #303333; background: #fafbf9; }
#save-hint { font-size: 16px; }
#save-image { display: block; width: 100%; height: auto; margin-top: 12px; background: #f3f3f0; }
@media (max-width: 760px) { header { padding: 22px 16px; } header p { display: none; } main { padding: 0 16px; grid-template-columns: 1fr; gap: 20px; } .preview-panel { position: static; grid-row: 1; } .preview-stage { height: 48vh; min-height: 260px; padding: 16px; } .panel { padding: 20px; } .save-row { gap: 8px; } #save { padding: 12px 18px; } }