@charset "UTF-8";.control-panel{padding:20px;border:1px solid #ddd;border-radius:4px;margin-bottom:30px;background-color:#f9f9f9}.control-group{margin-bottom:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;font-size:14px}.control-group label{font-weight:700;width:150px}.control-group input[type=number],.control-group select{width:120px;padding:8px;border:1px solid #ccc;border-radius:4px}.control-group select{width:150px}.control-group input[type=checkbox]{width:20px;height:20px;cursor:pointer}.option-description{font-size:.9em;color:#666}.notion{font-size:.9em;width:100%;color:#666;margin-top:10px}.notion a{color:#235180}.responsive-options{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.responsive-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:5px;width:160px}.responsive-input label{font-weight:400;width:30px}.single-option{width:150px;padding:8px;border:1px solid #ccc;border-radius:4px}button{padding:8px 12px;border:none;border-radius:4px;background-color:#4caf50;color:#fff;cursor:pointer;-webkit-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease}button:hover{background-color:#45a049}.copy-btn{margin-top:10px;width:100%;height:40px;background-color:#235180}.copy-btn:hover{background-color:#007b9e}.swiper-preview{padding:20px;border-radius:4px;margin-bottom:30px}.swiper-container{width:100%;height:300px;overflow:hidden;position:relative}.generated-code{padding:20px;border:1px solid #ddd;border-radius:4px;background-color:#f9f9f9}.code-section{margin-bottom:20px}.code-section h3{margin-bottom:10px}.code-section pre{background-color:#272822;color:#f8f8f2;padding:15px;border-radius:4px;overflow-x:auto}@media (max-width:800px){.swiper-container{height:200px}}@media (max-width:500px){.swiper-container{height:150px}}.swiper-container{border-radius:8px}.swiper-container .swiper-slide{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.2em;background-color:#eee;border:1px solid #ddd;border-radius:4px;display:flex;justify-content:center;align-items:center}