*{box-sizing:border-box;margin:0;padding:0}body{font-family:Georgia,Times New Roman,serif;color:#3a3020;background:linear-gradient(180deg,#faf6f0,#ede4d4);min-height:100vh}.header{background:linear-gradient(135deg,#1e1a14,#3a3020);padding:16px 20px;color:#faf6f0;text-align:center;border-bottom:3px solid #6B5E4C}.header h1{font-size:20px;font-weight:700;letter-spacing:3px;text-transform:uppercase}.header p{margin-top:4px;font-size:11px;color:#a89880;letter-spacing:1.5px}.container{max-width:1280px;margin:0 auto;padding:16px 12px}.layout{display:flex;gap:16px;align-items:flex-start}.canvas-col{flex:1;min-width:0;position:sticky;top:12px}.controls-col{width:320px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#D4C9B5 transparent}.card{background:#fffdf8;border:1px solid #D4C9B5;border-radius:8px}.card-body{padding:0 14px 14px}.sec-title{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#8b7355;border-bottom:1px solid #E8DFD0;padding:12px 14px 8px;display:flex;justify-content:space-between;align-items:center}.sec-title.block{display:flex}.acc-toggle{cursor:pointer;-webkit-user-select:none;user-select:none}.acc-arrow{font-size:10px;color:#a89880;transition:transform .2s;display:none}.card.collapsed .acc-arrow{transform:rotate(-90deg)}.card.collapsed .card-body{display:none!important}.sign-type-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#8b7355;font-weight:700;padding:4px 2px 0}.sign-type-row{display:flex;gap:10px}.sign-type-card{flex:1;background:#fffdf8;border:2px solid #D4C9B5;border-radius:10px;padding:14px 10px 12px;text-align:center;cursor:pointer;transition:all .25s ease;position:relative;-webkit-user-select:none;user-select:none}.sign-type-card:hover{border-color:#5a4f3e;box-shadow:0 2px 12px #6b5e4c26}.sign-type-card.active{border-color:#6b5e4c;background:linear-gradient(180deg,#fffdf8,#f5f0e8);box-shadow:0 2px 16px #6b5e4c33}.sign-type-badge{display:none;position:absolute;top:-9px;left:50%;transform:translate(-50%);background:#6b5e4c;color:#faf6f0;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:2px 10px;border-radius:10px;white-space:nowrap}.sign-type-card:first-child .sign-type-badge{display:block}.sign-type-icon{margin:4px auto 6px;opacity:.55;transition:opacity .25s}.sign-type-card.active .sign-type-icon{opacity:1}.sign-type-name{font-size:13px;font-weight:700;color:#3a3020;margin-bottom:2px}.sign-type-desc{font-size:10px;color:#999;font-style:italic;margin-bottom:8px;line-height:1.3}.sign-type-toggle-wrap{display:flex;justify-content:center}.toggle-switch{width:40px;height:22px;background:#d4c9b5;border-radius:11px;position:relative;cursor:pointer;transition:background .25s ease}.toggle-switch.active{background:#6b5e4c}.toggle-knob{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .25s ease;box-shadow:0 1px 3px #0003}.toggle-switch.active .toggle-knob{left:20px}.sign-detail-card{border-left:3px solid #6B5E4C}.letter-presets{display:flex;gap:5px;margin-bottom:8px}.letter-presets .std-btn{min-width:44px}.hint{font-size:10px;color:#999;margin-bottom:8px;font-style:italic}.std-btns{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}.std-btn{flex:1 1 auto;min-width:68px;padding:7px 4px;border:1px solid #D4C9B5;border-radius:5px;background:#fff;color:#3a3020;font-family:Georgia,serif;font-size:11px;cursor:pointer}.std-btn.active{border:2px solid #6B5E4C;background:#f5f0e8;font-weight:700}.custom-section{border-top:1px solid #E8DFD0;padding-top:8px}.custom-label{font-size:11px;font-weight:700;margin-bottom:6px;color:#8b7355}.num-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.num-label{font-size:12px;font-weight:700;min-width:52px}.num-btn{width:28px;height:28px;border:1px solid #D4C9B5;border-radius:4px;background:#fff;cursor:pointer;font-family:Georgia,serif;font-size:14px;color:#3a3020;display:flex;align-items:center;justify-content:center}.num-input{width:56px;text-align:center;padding:4px;border:1px solid #D4C9B5;border-radius:4px;font-family:Georgia,serif;font-size:13px;color:#3a3020}.num-unit{font-size:11px;color:#8b7355}.name-input{width:100%;padding:8px 10px;border:1px solid #D4C9B5;border-radius:5px;font-family:Georgia,serif;font-size:14px;color:#3a3020;background:#fff;text-align:center;letter-spacing:1px}.name-input::placeholder{color:#c4b89a;font-style:italic;letter-spacing:0}.name-input:focus{outline:none;border-color:#6b5e4c;box-shadow:0 0 0 2px #6b5e4c33}.slider{width:100%;accent-color:#6B5E4C;margin-top:4px}.slider-wood{accent-color:#8B6F47}.slider-range{display:flex;justify-content:space-between;font-size:10px;color:#aaa}.canvas-wrap{background:#fffdf8;border:1px solid #D4C9B5;border-radius:8px;padding:12px;text-align:center}#mainCanvas{width:100%;border-radius:4px}.zoom-hint{display:none;text-align:center;font-size:10px;color:#a89880;margin-top:4px;font-style:italic}.summary{margin-top:10px;background:linear-gradient(135deg,#1e1a14,#3a3020);border-radius:8px;padding:10px 14px;color:#faf6f0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px}.sum-label{font-size:9px;color:#a89880;text-transform:uppercase;letter-spacing:1px}.sum-val{font-weight:700}.action-bar{margin-top:8px;display:flex;gap:10px;align-items:center;justify-content:center}.download-btn{padding:10px 24px;background:#6b5e4c;color:#faf6f0;border:none;border-radius:6px;font-family:Georgia,serif;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.5px}.download-btn:hover{background:#5a4f3e}.share-link-btn{padding:8px 16px;background:transparent;color:#8b7355;border:1px solid #D4C9B5;border-radius:6px;font-family:Georgia,serif;font-size:12px;cursor:pointer}.share-link-btn:hover{background:#f5f0e8;color:#3a3020}.footer{text-align:center;font-size:10px;color:#b8a88a;margin-top:10px;padding-bottom:20px}.green{color:#6fcf97}.red{color:#ff6b6b}@media(max-width:860px){.header{padding:10px 16px}.header h1{font-size:16px;letter-spacing:2px}.header p{font-size:9px;margin-top:2px}.container{padding:0}.layout{flex-direction:column;gap:0}.canvas-col{position:static;width:100%}.canvas-wrap{border:none;border-radius:0;padding:4px 0;background:#fffdf8;overflow:hidden;touch-action:none}#mainCanvas{border-radius:0;display:block;transform-origin:0 0}.zoom-hint{display:block}.summary{border-radius:0;margin-top:0;padding:8px 12px;gap:8px;font-size:11px}.action-bar{margin-top:0;padding:8px 12px;background:#f5f0e8}.controls-col{width:100%;max-height:none;overflow-y:visible;padding:8px 10px;gap:8px}.acc-arrow{display:inline-block}.card.collapsed .sec-title{border-bottom:none;padding-bottom:12px}.sign-type-row{gap:8px}.sign-type-card{padding:12px 8px 10px}.sign-type-icon svg{width:50px;height:42px}.sign-type-name{font-size:12px}.sign-type-desc{font-size:9px}.num-btn{width:36px;height:36px;font-size:18px;border-radius:6px}.num-input{width:60px;padding:6px;font-size:15px}.num-label{font-size:13px}.std-btn{padding:10px 6px;font-size:12px}.footer{padding:12px 10px 20px;margin-top:4px}}