* { box-sizing: border-box; } html, body {width: 100%;height: 100%; margin: 0; } body {font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background: url("img/XPD_21.PNG") repeat;} h1 { font-size: 24px; text-align: center; color: #130224; text-shadow: 0px 0px 2px #fff8f8;} h2 { font-size: 17px; margin: 0 0 12px; color: #072703; font-weight: bold;} .app { max-width: 1100px; margin: auto; display: grid; grid-template-columns: 340px 1fr; gap: 20px; } .panel, .preview-panel { background: #f8f8e2; border: 1px solid #7f8533; border-radius: 10px; padding: 18px; box-shadow: 0 2px 12px #34465312; } .section { margin-bottom: 22px; } .drop-area { border: 2px dashed #14ad21; border-radius: 8px; padding: 14px; text-align: center; background: #e4fad2; color: #0f0f11; cursor: pointer; margin-bottom: 8px; transition: .2s; } .drop-area:hover, .drop-area.dragover { background: #D5E0E6; border-color: #617D8E; } .drop-area img { display: block; max-width: 100%; max-height: 90px; object-fit: contain; margin: 8px auto 0; } .corner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .corner-grid .drop-area { font-size: 13px; padding: 10px 5px; } label { display: block; font-size: 14px; margin: 10px 0 5px; color: #0e0744; font-weight: bold;} input[type="number"] { width: 100%; padding: 9px; border: 1px solid #C7D0D6; border-radius: 5px; background: #FFFFFF; color: #343C43; } input[type="color"] { width: 100%; height: 38px; cursor: pointer; border: 1px solid #C7D0D6; border-radius: 5px; background: #FFFFFF; } input[type="checkbox"] { margin-right: 6px; accent-color: #536A7B; } button { width: 100%; border: 1px solid #C7D0D6; border-radius: 6px; padding: 11px; margin-top: 8px; font-size: 14px; cursor: pointer; background: #b8bef0; color: #060c11; transition: background-color .2s, border-color .2s; } button:hover:not(:disabled) { background: #8e87e9; border-color: #AAB9C4; } .primary { color: #FFFFFF; background: #353977; border-color: #8788b1; font-weight: bold; } .primary:hover:not(:disabled) { background: #12184d; border-color: #8788b1; } .reset { color: #faf2f3; background: #525a05;  border-color: #262903; } .reset:hover:not(:disabled) { background: #a35087; color: #FFFFFF;} .preview-panel { min-width: 0; } .preview-info { font-size: 13px; color: #697781; margin-bottom: 12px; } .canvas-wrap { min-height: 400px; display: flex; justify-content: center; align-items: center; padding: 15px; overflow: auto; border: 1px solid #D5DADF; border-radius: 8px; background-color: #FFFFFF; background-image: linear-gradient(45deg, #E5E9EC 25%, transparent 25%), linear-gradient(-45deg, #E5E9EC 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #E5E9EC 75%), linear-gradient(-45deg, transparent 75%, #E5E9EC 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; } canvas { display: block; max-width: 100%; height: auto; object-fit: contain; } .note { font-size: 12px; color: #1302ad; line-height: 1.6; } #bgMode { width: 100%; padding: 10px; border: 1px solid #C7D0D6; border-radius: 5px; background: #FFFFFF; color: #343C43; font-size: 14px; } #imageMessage { margin-top: 8px; padding: 8px; font-size: 13px; color: #425563; background: #E8EDF0; border: 1px solid #D5DADF; border-radius: 5px; white-space: pre-wrap; } button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(1); } #frameMode, #normalFrameStyle { width: 100%; padding: 10px; border: 1px solid #C7D0D6; border-radius: 5px; background: #FFFFFF; color: #343C43; font-size: 14px; } #normalFrameThickness { width: 100%; cursor: pointer; accent-color: #617D8E; } #normalFrameSettings { padding: 12px; border: 1px solid #D5DADF; border-radius: 8px; background: #F1F0EA; } select, textarea, input[type="text"], input[type="url"] { border: 1px solid #C7D0D6; border-radius: 5px; background: #FFFFFF; color: #343C43; } #bgMode{ background: #ece364; border-color: #8a580e;} #cornerFrameRadius{ width: 40%; cursor: pointer; background: #f1c9df; border-color: #640d3d;} #frameMode{ background: #e3f0f9; border-color: #1a5b8c;} a { font-size: 14px;} @media (max-width: 760px) { body { padding: 10px; } .app { grid-template-columns: 1fr; } .canvas-wrap { min-height: 280px; } }