* { 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: #e2fafa; border: 1px solid #0f5315; border-radius: 10px; padding: 18px; box-shadow: 0 2px 12px #34465312; } .section { margin-bottom: 22px; } .drop-area { border: 2px dashed #128f1c; border-radius: 8px; padding: 14px; text-align: center; background: #f7faf4; color: #0f0f11; cursor: pointer; margin-bottom: 8px; transition: .2s; } .drop-area:hover, .drop-area.dragover { background: #d1d7fa; 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: #ced2f5; color: #1a1f24; } input[type="color"] { width: 70%; height: 38px; cursor: pointer; border-radius: 5px; border: 1px solid #c5c346; background: #f0ecd5; } input[type="checkbox"] { margin-right: 6px; accent-color: #3f49a5; } input[type="text"] {max-width: 50%; height: 32px; font-size: 14px; } button { width: 100%; border-radius: 6px; padding: 11px; margin-top: 8px; font-size: 14px; cursor: pointer; background: #8cfc93; color: #0c0d0e; transition: background-color .2s, border-color .2s; } button:hover:not(:disabled) { background: #d1e9cc;} .primary { color: #FFFFFF; background: #353977; border-color: #8788b1; font-weight: bold; } .primary:hover:not(:disabled) { background: #12184d; border-color: #8788b1; } .reset { color: #faf2f3; background: #8b235d;  border-color: #262903; } .reset:hover:not(:disabled) { background: #a35087; color: #FFFFFF;} .preview-panel { min-width: 0; } .preview-info { font-size: 13px; color: #2a343b; 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: #1d09d4; line-height: 1.4; } #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: 6px; color: #380c6b; 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 #3e45aa; border-radius: 5px; background: #f3f3f5; color: #151618; } #bgMode{ background: #ebe48b; border-color: #8a580e;} #cornerFrameRadius{ width: 40%; cursor: pointer; background: #f5ddea; border-color: #640d3d;} #frameMode{ background: #edc9f8; color: #1d1a1a; border-color: #570a1b;} a { font-size: 14px;} @media (max-width: 760px) { body { padding: 10px; } .app { grid-template-columns: 1fr; } .canvas-wrap { min-height: 280px; } } #contentEditorSettings textarea { display: block; width: 100%; padding: 9px; resize: vertical; font: inherit; line-height: 1.5; } #contentEditorSettings select, #contentEditorSettings input[type="number"] { width: 100%; padding: 9px; } #contentEditorSettings input[type="checkbox"] { display: inline-block; } #contentEditorSettings label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 6px; } #contentEditorSettings { margin: 18px 0 22px; padding: 16px; border: 1px solid #b7bd86; border-radius: 10px; background: #d6fadb; } #contentEditorSettings textarea { display: block; width: 100%; padding: 9px; resize: vertical; font: inherit; line-height: 1.5; } #contentEditorSettings select, #contentEditorSettings input[type="number"] { width: 100%; padding: 8px; } #contentEditorSettings input[type="color"] { width: 100%; height: 34px; } #contentEditorSettings input[type="checkbox"] { display: inline-block; } #contentEditorSettings label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 6px; } #contentLineStyles { display: grid; gap: 8px; margin: 10px 0 16px; } .content-line-style { padding: 10px; border: 1px solid #5e5c05; border-radius: 7px; background: #eef0dd; } .content-line-heading { margin-bottom: 8px; font-size: 13px; font-weight: bold; overflow-wrap: anywhere; } .content-line-controls { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(70px, .8fr) minmax(60px, .6fr) auto auto; align-items: end; gap: 8px; } .content-line-controls label { min-width: 0; margin: 0; font-size: 12px; } .content-line-controls select, .content-line-controls input[type="number"] { display: block; min-width: 0; width: 100%; margin-top: 4px; padding: 6px !important; } .content-line-controls input[type="color"] { display: block; width: 100%; height: 32px; margin-top: 4px; } .content-line-controls .line-check-label { display: flex !important; align-items: center; gap: 4px !important; white-space: nowrap; padding-bottom: 7px; } .content-settings-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; align-items: end; } .content-setting { display: flex; flex-direction: column; min-width: 150px; } .content-setting label { margin-bottom: 4px; } .content-setting input, .content-setting select { width: 100%; box-sizing: border-box; } .content-setting input[type="color"] { height: 36px; padding: 2px; } .info-open-area { margin: 8px 0 14px; } #infoModalTitle { width: 100%; margin: 20px 0 20px; color: #cbff3d; text-align: center; box-sizing: border-box; } #openInfoModal { padding: 8px 18px; font-size: 14px; cursor: pointer; } .info-modal { display: none; position: fixed; inset: 0; z-index: 10000; padding: 20px; box-sizing: border-box; align-items: center; justify-content: center; } .info-modal.is-open { display: flex; } .info-modal-content { display: flex; flex-direction: column; width: min(700px, 100%); max-height: 85vh; color: #222222; border-radius: 12px; background: #28292875; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); overflow: hidden; } .info-modal-body { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .info-modal-body::-webkit-scrollbar { display: none; } .info-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #dddddd; } .info-modal-header h2 { margin: 0; font-size: 18px; } .info-modal-close { border: none; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; color: #555555; } .info-modal-body { padding: 12px 18px; overflow-y: auto; overscroll-behavior: contain; } .info-modal-body .info-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .info-modal-body .info-table td { padding: 7px 9px; border-bottom: 1px solid #eeeeee; overflow-wrap: anywhere; line-height: 1.5; } .info-modal-footer { display: flex; justify-content: center; padding: 10px 18px; } .info-modal-footer button { width: 30%; padding: 7px 20px; border-radius: 24px; border-color: #38020e; background: #ec5f66; cursor: pointer; } @media (max-width: 600px) { .info-modal { padding: 10px; } .info-modal-content { max-height: 90vh; } .info-modal-header, .info-modal-body { padding-left: 12px; padding-right: 12px; } .info-modal-header h2 { font-size: 16px; } } @media (max-width: 760px) { .content-line-controls { grid-template-columns: 1fr 1fr 1fr; } }