.ckp-app{--ckp-ink:#24352d;--ckp-green:#2f6a4b;--ckp-blue:#175fa6;--ckp-border:#dbe4df;color:var(--ckp-ink);font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;max-width:1180px;margin:24px auto;padding:clamp(14px,2.5vw,28px);background:#fff;border:1px solid #e5ebe7;border-radius:20px;box-shadow:0 8px 30px rgba(18,48,32,.08)}
.ckp-app [hidden]{display:none!important}
.ckp-app *{box-sizing:border-box}.ckp-header{text-align:center;margin:0 0 22px}.ckp-header h2{font-size:clamp(1.45rem,3vw,2rem);line-height:1.15;margin:0 0 8px;color:#1e392a}.ckp-header p{margin:0;color:#53635a}.ckp-layout{display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,1fr);gap:clamp(20px,4vw,42px);align-items:start}.ckp-preview-column{position:sticky;top:16px}.ckp-stage{position:relative;width:100%;max-width:610px;margin:0 auto;aspect-ratio:1312/1199;background:#fff;overflow:hidden}.ckp-stage-base{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;pointer-events:none}.ckp-stage-face{position:absolute;left:25.0%;top:3.4%;width:50.0%;height:82.4%;overflow:hidden;touch-action:none;cursor:grab;border-radius:2px}.ckp-stage-face:active{cursor:grabbing}.ckp-stage-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}.ckp-preview-caption{text-align:center;font-size:.88rem;color:#627269;margin:6px 0 0}.ckp-controls{min-width:0}.ckp-section{padding:17px 0;border-top:1px solid var(--ckp-border)}.ckp-section:first-child{border-top:0;padding-top:0}.ckp-section h3{font-size:1.05rem;margin:0 0 12px;color:#263c2f}.ckp-category-list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.ckp-category{border:1px solid #cad8cf;background:#f8fbf9;color:#375344;border-radius:999px;padding:7px 12px;cursor:pointer;font:inherit;font-size:.88rem}.ckp-category.active{background:var(--ckp-green);border-color:var(--ckp-green);color:#fff}.ckp-design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:310px;overflow:auto;padding:2px}.ckp-design-card{min-width:0;text-align:center;border:2px solid #dfe8e2;border-radius:11px;background:#fff;padding:6px;cursor:pointer;color:var(--ckp-ink);font:inherit}.ckp-design-card:hover,.ckp-design-card.selected{border-color:var(--ckp-green);box-shadow:0 0 0 2px rgba(47,106,75,.12)}.ckp-design-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;margin-bottom:6px}.ckp-design-card span{display:block;font-size:.79rem;line-height:1.2;min-height:2em}.ckp-design-card[hidden]{display:none}.ckp-upload-button,.ckp-phone-button,.ckp-submit,.ckp-remove-photo,.ckp-close-qr{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:10px 14px;font:600 .93rem/1.2 system-ui,sans-serif;cursor:pointer}.ckp-upload-button{position:relative;background:#eff5f1;color:#244c35;border:1px solid #bfd0c5;overflow:hidden}.ckp-upload-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.ckp-phone-button{margin-left:6px;background:#eaf3fc;color:#145c9e;border:1px solid #b9d3ed}.ckp-qr-area{margin-top:12px;padding:14px;border:1px solid #c9dced;border-radius:12px;background:#f5faff;text-align:center}.ckp-qr-area p{margin:0 0 10px}.ckp-qr-image{display:block;width:180px;height:180px;object-fit:contain;margin:0 auto 8px;background:#fff}.ckp-phone-link{display:inline-block;margin:4px 10px;color:#145c9e}.ckp-close-qr{background:#e2e8ee;color:#23343f;padding:7px 10px}.ckp-photo-controls{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px;padding:12px;background:#f8faf9;border-radius:10px}.ckp-photo-controls label{display:grid;gap:4px;font-size:.88rem}.ckp-photo-controls input{width:100%;accent-color:var(--ckp-green)}.ckp-remove-photo{justify-self:start;background:#f3e6e6;color:#7b2c2c;padding:7px 10px}.ckp-field{display:grid;gap:5px;margin:10px 0;font-size:.9rem}.ckp-field input,.ckp-field textarea{width:100%;border:1px solid #bfcdc4;border-radius:8px;padding:10px 11px;background:#fff;color:#1f3027;font:inherit}.ckp-field textarea{resize:vertical;min-height:68px}.ckp-approval{display:flex;align-items:flex-start;gap:9px;margin:15px 0;font-size:.92rem}.ckp-approval input{margin-top:4px;accent-color:var(--ckp-green)}.ckp-submit{width:100%;min-height:48px;background:#1769aa;color:#fff;font-size:1rem;box-shadow:0 3px 8px rgba(23,105,170,.2)}.ckp-submit:hover{background:#0e568f}.ckp-submit:disabled{opacity:.65;cursor:wait}.ckp-message{min-height:1.5em;margin:10px 0 0;font-weight:600}.ckp-message.is-error{color:#a12222}.ckp-message.is-success{color:#1f6b3b}.ckp-print-note{font-size:.78rem;color:#68766e;margin:8px 0 0}.ckp-notice{padding:16px;border:1px solid #ead0a4;background:#fff9ed;border-radius:8px}
@media(max-width:820px){.ckp-layout{grid-template-columns:1fr}.ckp-preview-column{position:static;max-width:580px;margin:0 auto;width:100%}.ckp-controls{width:100%}.ckp-stage{max-width:510px}}
@media(max-width:520px){.ckp-app{margin:10px auto;padding:14px;border-radius:14px}.ckp-design-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:265px}.ckp-design-card{padding:4px}.ckp-design-card span{font-size:.72rem}.ckp-phone-button{margin:8px 0 0}.ckp-upload-button,.ckp-phone-button{min-height:44px}.ckp-category{padding:7px 10px;font-size:.82rem}}

.ckp-category-filter{display:grid;grid-template-columns:1fr;gap:6px;margin:0 0 12px;font-size:.9rem;font-weight:600;color:#263c2f}.ckp-category-select{width:100%;min-height:44px;padding:9px 38px 9px 12px;border:1px solid #bfcdc4;border-radius:8px;background:#fff;color:#1f3027;font:inherit;cursor:pointer}