*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default}input,select,textarea{cursor:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:root{--primary-color:#4a90e2;--secondary-color:#f6a966;--success-color:#4caf50;--danger-color:#f44336;--text-color:#333;--text-light:#666;--bg-color:#f5f5f5;--card-bg:#fff;--border-color:#e0e0e0;--shadow-sm:0 2px 4px rgba(0,0,0,.1);--shadow-md:0 4px 8px rgba(0,0,0,.15);--shadow-lg:0 8px 16px rgba(0,0,0,.2);--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}html{height:100%}body,html{overflow:hidden}body{background-color:var(--bg-color);color:var(--text-color);display:flex;flex-direction:column;font-family:Hiragino Mincho ProN,MS PMincho,Noto Sans JP,sans-serif;height:100vh;line-height:1.6}.header{background:linear-gradient(120deg,#667eea,#764ba2);box-shadow:var(--shadow-md);color:#fff;padding:1rem;z-index:100}.header-content{margin:0 auto;max-width:1400px}.header-title{font-size:1.5rem;font-weight:600;margin-left:0}.header-actions{display:flex;gap:.5rem}button{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:inherit;font-weight:500;gap:.5rem;transition:var(--transition)}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:var(--shadow-sm);color:#fff;padding:.75rem 1.5rem}.btn-primary:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#fff;border:1px solid var(--border-color);box-shadow:var(--shadow-sm);color:var(--text-color);padding:.75rem 1.5rem}.btn-secondary:hover{background:#f9f9f9}.btn-sample{background:#fff;border:1px solid var(--border-color);color:var(--text-color);font-size:.85rem;padding:.5rem 1rem}.btn-sample:hover{background:#f0f0f0;border-color:var(--primary-color)}.btn-icon{background:transparent;border-radius:50%;color:var(--text-color);cursor:pointer;padding:.5rem}.btn-icon:hover{background:rgba(0,0,0,.05)}.main-content{display:grid;flex:1;gap:1.5rem;grid-template-columns:1fr 1fr;margin:0 auto;max-width:1400px;min-height:0;overflow:hidden;padding:1.5rem;width:100%}.editor-section,.preview-section{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:1.5rem}.section-header{align-items:center;border-bottom:2px solid var(--bg-color);display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem}.section-header h2{color:var(--text-color);font-size:1.3rem;font-weight:600}.help-text{color:var(--text-light);font-size:.85rem;margin-top:.5rem}.help-text code{background:#f0f0f0;border-radius:var(--radius-sm);color:var(--primary-color);cursor:text;font-family:Courier New,monospace;padding:.2rem .4rem;-webkit-user-select:text;user-select:text}.preview-controls{display:flex;gap:.5rem}.meta-inputs{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.input-row{display:grid;gap:1rem;grid-template-columns:2fr 1fr}.input-group{display:flex;flex-direction:column;gap:.4rem}.input-group label{color:var(--text-color);font-size:.9rem;font-weight:600}.input-group input,.input-group select{border:1px solid var(--border-color);border-radius:var(--radius-md);font-family:inherit;font-size:1rem;padding:.75rem;transition:var(--transition)}.input-group input:focus,.input-group select:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(70,144,226,.1);outline:none}.tags-section{background:#f9f9f9;border-radius:var(--radius-md);margin-bottom:1.5rem;padding:.75rem}.tags-section h3{color:var(--text-color);font-size:1rem;margin-bottom:.75rem}.selected-tags-area{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:.75rem;padding:.6rem}.selected-tags-label{color:var(--text-light);font-size:.8rem;font-weight:600;margin-bottom:.4rem}.selected-tags{display:flex;flex-wrap:wrap;gap:.4rem;min-height:1.5rem}.no-tags{color:var(--text-light);font-size:.9rem;font-style:italic}.selected-tag{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;color:#fff;cursor:pointer;display:inline-flex;font-size:.8rem;font-weight:500;gap:.3rem;padding:.3rem .6rem;transition:var(--transition)}.selected-tag:hover{box-shadow:var(--shadow-sm);transform:scale(1.05)}.selected-tag .remove-tag{cursor:pointer;font-weight:700;opacity:.8}.selected-tag .remove-tag:hover{opacity:1}.tag-categories{display:flex;flex-direction:column;gap:.5rem}.tag-category{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.tag-category-header{align-items:center;background:#f5f5f5;cursor:pointer;display:flex;gap:.5rem;padding:.5rem .75rem;transition:var(--transition)}.tag-category-header:hover{background:#ececec}.toggle-icon{display:inline-block;font-size:.8rem;transition:transform .3s ease;width:1rem}.category-label{font-size:.9rem;font-weight:600}.tag-category-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.tag-category-content.active{max-height:300px;padding:.75rem}.tag-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.tag-btn{background:#fff;border:1.5px solid var(--border-color);border-radius:20px;color:var(--text-color);cursor:pointer;font-size:.8rem;font-weight:500;padding:.4rem .8rem;transition:var(--transition)}.tag-btn:hover{background:#f0f7ff;border-color:var(--primary-color)}.tag-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff}.custom-tag-input{display:flex;gap:.5rem}.custom-tag-input input{border:1px solid var(--border-color);border-radius:var(--radius-md);flex:1;font-size:.9rem;padding:.5rem .75rem}.custom-tag-input input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(70,144,226,.1);outline:none}.btn-add-tag{background:var(--primary-color);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-weight:600;padding:.5rem 1rem;transition:var(--transition)}.btn-add-tag:hover{background:#3a7bc8}.textarea-container{display:flex;flex-direction:column;margin-bottom:1rem}.textarea-container label{color:var(--text-color);font-size:.9rem;font-weight:600;margin-bottom:.5rem}.questions-textarea{border:1px solid var(--border-color);border-radius:var(--radius-md);font-family:inherit;font-size:1rem;line-height:1.8;min-height:300px;padding:1rem;resize:vertical;transition:var(--transition)}.questions-textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(70,144,226,.1);outline:none}.char-count{color:var(--text-light);font-size:.85rem;margin-top:.5rem;text-align:right}.char-count span{color:var(--primary-color);font-weight:600}.action-buttons{display:flex;gap:.5rem;margin-bottom:.75rem}.action-buttons-help{background:#f8f9fa;border-left:3px solid var(--primary-color);border-radius:var(--radius-sm);font-size:.85rem;line-height:1.6;margin-bottom:1.5rem;padding:.75rem 1rem}.action-buttons-help .help-item{margin-bottom:.4rem}.action-buttons-help .help-item:last-child{margin-bottom:0}.action-buttons-help strong{color:var(--primary-color);font-weight:600}.btn-new{align-items:center;background:var(--primary-color);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);color:#fff;cursor:pointer;display:inline-flex;font-size:.95rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;transition:var(--transition)}.btn-new:hover{background:#3a7bc8;box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-new:active{transform:translateY(0)}.btn-new svg{flex-shrink:0}.sample-section{margin-bottom:1.5rem}.sample-caption{color:var(--text-light);font-size:.85rem;font-weight:500;margin-bottom:.75rem}.sample-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.meta-section{background:#f9f9f9;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-top:1.5rem;padding:.75rem}.meta-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.meta-section h3{color:var(--text-light);font-size:.85rem;font-weight:600;margin:0}.btn-fork{align-items:center;background:#fff;border:1px solid var(--primary-color);border-radius:var(--radius-sm);color:var(--primary-color);cursor:pointer;display:flex;font-size:.7rem;gap:.3rem;padding:.3rem .6rem;transition:var(--transition);white-space:nowrap}.action-buttons .btn-fork{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);font-size:.95rem;font-weight:600;padding:.75rem 1.5rem}.action-buttons .btn-fork:hover{background:var(--primary-color);box-shadow:var(--shadow-md);color:#fff;transform:translateY(-2px)}.action-buttons .btn-fork:active{transform:translateY(0)}.btn-fork:hover{background:var(--primary-color);color:#fff}.btn-fork svg{flex-shrink:0}.meta-display{display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr);margin-bottom:.5rem}.meta-item{font-size:.75rem;white-space:nowrap}.meta-item,.meta-item-revision{align-items:center;display:flex}.meta-item-revision{gap:.8rem;grid-column:1/-1}.revision-info{align-items:center;display:flex;flex:0 0 auto}.meta-label{color:var(--text-light);flex-shrink:0;font-weight:600;margin-right:.4rem}.meta-value{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-color);flex:1;font-family:Courier New,monospace;min-width:0;overflow:hidden;padding:.2rem .4rem;text-overflow:ellipsis;white-space:nowrap}.btn-increment-revision{align-items:center;background:#fff;border:1px solid #16a34a;border-radius:var(--radius-sm);color:#16a34a;cursor:pointer;display:flex;font-size:.7rem;font-weight:600;gap:.3rem;padding:.3rem .6rem;transition:var(--transition);white-space:nowrap}.btn-increment-revision:hover{background:#16a34a;color:#fff}.btn-increment-revision svg{flex-shrink:0}.meta-notice{background:#fffbeb;border-left:3px solid #f59e0b;border-radius:var(--radius-sm);color:#92400e;font-size:.75rem;line-height:1.5;margin-top:.5rem;padding:.6rem .8rem}.meta-notice strong{display:block;font-weight:700;margin-bottom:.3rem}.meta-notice p{line-height:1.6;margin:0}.share-section{background:#f0f7ff;border:2px solid var(--primary-color);border-radius:var(--radius-md);margin-top:1.5rem;padding:1rem}.share-section h3{color:var(--text-color);font-size:1rem}.share-section h3,.url-size-container{margin-bottom:1rem}.size-indicator{border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;margin-bottom:.5rem;padding:.5rem;text-align:center}.size-indicator.success{background:#e8f5e9;color:#2e7d32}.size-indicator.warning{background:#fff3e0;color:#e65100}.size-indicator.danger{background:#ffebee;color:#c62828}.progress-bar-container{background:#e0e0e0;border-radius:4px;height:8px;overflow:hidden;width:100%}.progress-bar{border-radius:4px;height:100%;transition:width .3s ease,background-color .3s ease}.progress-bar.success{background:linear-gradient(90deg,#4caf50,#66bb6a)}.progress-bar.warning{background:linear-gradient(90deg,#ff9800,#ffa726)}.progress-bar.danger{background:linear-gradient(90deg,#f44336,#ef5350)}.url-error-message{background:#ffebee;border:2px solid #ef5350;border-radius:var(--radius-md);color:#c62828;margin-bottom:1rem;padding:1rem}.url-error-message strong{display:block;font-size:1.1rem;margin-bottom:.5rem}.url-error-message p{font-size:.9rem;margin:.5rem 0}.url-error-message ul{font-size:.9rem;margin:.5rem 0 0 1.5rem;text-align:left}.url-error-message li{margin:.25rem 0}.url-display{display:flex;gap:.5rem;margin-bottom:1rem}.url-display input{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);flex:1;font-family:monospace;font-size:.85rem;padding:.75rem}.url-display input:disabled{background:#f5f5f5;color:#999;cursor:not-allowed}.url-display input:focus{border-color:var(--primary-color);outline:none}#generate-qr-btn{justify-content:center;width:100%}#generate-qr-btn:disabled{cursor:not-allowed;opacity:.5}.modal{backdrop-filter:blur(4px);background-color:rgba(0,0,0,.5);display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal-content{animation:modalSlideIn .3s ease-out;background-color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin:5% auto;max-width:500px;padding:0}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.modal-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:1.5rem}.modal-header h2{font-size:1.3rem;margin:0}.modal-close{align-items:center;background:none;border:none;border-radius:50%;color:var(--text-light);cursor:pointer;display:flex;font-size:2rem;height:32px;justify-content:center;line-height:1;padding:0;transition:var(--transition);width:32px}.modal-close:hover{background:var(--bg-color);color:var(--text-color)}.modal-body{padding:2rem;text-align:center}.qr-container{background:#fff;border-radius:var(--radius-md);display:inline-block;margin-bottom:1rem;padding:1rem}.qr-description{color:var(--text-light);font-size:.9rem;margin-bottom:1rem}#download-qr-btn{width:100%}.preview-container{background:var(--bg-color);border-radius:var(--radius-md);flex:1;min-height:0;overflow-y:auto;padding:1rem}.preview-card{animation:fadeIn .3s ease-out;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:1rem;overflow-x:auto;padding:1.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.question-number{color:var(--text-light);font-size:.9rem;margin-bottom:1.5rem}.question-body{flex-wrap:nowrap;font-size:1.2rem;gap:.2rem;row-gap:2rem}.question-body,.text{align-items:center;display:inline-flex;line-height:1}.text{height:2rem}.kanji-preview{align-items:center;display:inline-flex;height:2rem;position:relative}.reading-preview{color:var(--text-light);font-size:.65rem;left:50%;position:absolute;text-align:center;top:-1.1rem;transform:translateX(-50%);white-space:nowrap}.kanji-box-preview{background:#f0f7ff;border:2px solid var(--primary-color);border-radius:var(--radius-sm);color:var(--primary-color);font-size:1.2rem;font-weight:500;justify-content:center;min-width:2rem;padding:0 .5rem;white-space:nowrap}.kanji-box-preview,.ruby-preview{align-items:center;display:inline-flex;height:2rem}.ruby-preview{position:relative}.ruby-text-preview{color:var(--text-color);font-size:1.2rem;white-space:nowrap}.output-section{background:#fff;border-top:1px solid var(--border-color);box-shadow:0 -2px 8px rgba(0,0,0,.05);padding:1rem 1.5rem}.output-container{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1400px}.output-buttons{display:flex;gap:.75rem}.success-message{animation:fadeIn .3s ease-out;color:var(--success-color);font-weight:600}.mobile-tabs{display:none}@media screen and (max-width:1024px){.main-content{grid-template-columns:1fr;grid-template-rows:auto 1fr}.preview-section{min-height:400px}}@media screen and (max-width:768px) and (max-aspect-ratio:4/3){.mobile-tabs{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;gap:0;margin-bottom:1rem;padding:.25rem}.mobile-tab{align-items:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-light);cursor:pointer;display:flex;flex:1;font-size:.9rem;font-weight:500;gap:.5rem;justify-content:center;padding:.75rem 1rem;transition:all .2s ease}.mobile-tab svg{height:18px;stroke-width:2.5;width:18px}.mobile-tab.active{background:var(--primary-color);box-shadow:0 2px 4px rgba(0,0,0,.1);color:#fff}.mobile-tab.active svg{stroke:#fff}.mobile-tab:not(.active):hover{background:rgba(0,0,0,.03);color:var(--text-dark)}.main-content{gap:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:1rem}.editor-section{display:flex}.main-content.show-preview .editor-section,.preview-section{display:none}.main-content.show-preview .preview-section{display:flex}.editor-section,.preview-section{min-height:calc(100vh - 180px);overflow-x:hidden;overflow-y:auto;padding:1rem;-webkit-overflow-scrolling:touch}.preview-container{max-height:none;overflow-y:visible}.questions-textarea{max-height:40vh}.meta-display{grid-template-columns:1fr}.btn-increment-revision{font-size:.75rem;padding:.3rem .5rem}.meta-item{font-size:.7rem}.meta-label{min-width:50px}}@media screen and (max-width:768px){.header-title{font-size:1.2rem}.btn-secondary{font-size:.9rem;padding:.5rem 1rem}.main-content{gap:1rem;padding:1rem}.editor-section,.preview-section{padding:1rem}.input-row{grid-template-columns:1fr}.output-buttons{flex-direction:column;width:100%}.output-buttons button{justify-content:center;width:100%}.output-container{flex-direction:column;gap:1rem}}.preview-container::-webkit-scrollbar{width:8px}.preview-container::-webkit-scrollbar-track{background:transparent}.preview-container::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.preview-container::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}.hamburger-btn{margin-right:.5rem}.side-menu{background:#fff;box-shadow:2px 0 10px rgba(0,0,0,.1);display:flex;flex-direction:column;height:100vh;left:-300px;position:fixed;top:0;transition:left .3s cubic-bezier(.4,0,.2,1);width:300px;z-index:1000}.side-menu.active{left:0}.side-menu-header{align-items:center;background:var(--primary-color);border-bottom:1px solid var(--border-color);color:#fff;display:flex;justify-content:space-between;padding:1rem 1.5rem}.side-menu-title{font-size:1.25rem;font-weight:700;margin:0}.close-menu-btn{background:transparent;color:#fff}.close-menu-btn:hover{background:hsla(0,0%,100%,.1)}.side-menu-nav{flex:1;overflow-y:auto;padding:1rem 0}.side-menu-item{align-items:center;border-left:4px solid transparent;color:var(--text-color);display:flex;gap:1rem;padding:1rem 1.5rem;text-decoration:none;transition:background .2s ease}.side-menu-item:hover{background:var(--bg-color)}.side-menu-item.active{background:rgba(74,144,226,.1);border-left-color:var(--primary-color);color:var(--primary-color);font-weight:700}.side-menu-item svg{flex-shrink:0}.side-menu-item span{font-size:1rem}.menu-overlay{background:rgba(0,0,0,.5);height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden;width:100%;z-index:999}.menu-overlay.active{opacity:1;visibility:visible}.header-content{align-items:center;display:flex}