*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a0a;--bg-secondary:#141414;--bg-card:#1a1a1a;--bg-code:#111111;--text-primary:#e8e8e8;--text-secondary:#999999;--text-muted:#555555;--accent:#BF0000;--accent-hover:#D41919;--accent-soft:rgba(191,0,0,0.15);--border:#2a2a2a;--border-light:#333333;--success:#00C853;--warning:#FFB300;--error:#FF1744;--radius:8px;--radius-lg:12px;}body{background:var(--bg-primary);color:var(--text-primary);font-family:'Noto Sans JP',sans-serif;line-height:1.7;}.container{max-width:960px;margin:0 auto;padding:32px 20px;}header{text-align:center;padding:40px 0 36px;}header h1{font-size:1.8rem;font-weight:700;letter-spacing:.02em;}.subtitle{color:var(--text-secondary);font-size:.95rem;margin-top:8px;}.input-section{margin-bottom:24px;}.input-group{display:flex;gap:12px;}.input-group input{flex:1;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:1rem;font-family:'Noto Sans JP',sans-serif;outline:none;transition:border-color .2s;}.input-group input:focus{border-color:var(--accent);}.input-group input::placeholder{color:var(--text-muted);}.btn-generate{padding:12px 32px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:1rem;font-weight:700;cursor:pointer;white-space:nowrap;font-family:'Noto Sans JP',sans-serif;transition:background .2s;}.btn-generate:hover{background:var(--accent-hover);}.btn-generate:disabled{opacity:.5;cursor:not-allowed;}.error-message{display:none;color:var(--error);background:rgba(255,23,68,0.1);padding:12px 16px;border-radius:var(--radius);border:1px solid rgba(255,23,68,0.3);margin-top:12px;font-size:.9rem;}.error-message.active{display:block;}.loading-section{display:none;padding:32px 0;}.loading-section.active{display:block;}.progress-bar{height:3px;background:var(--bg-secondary);overflow:hidden;border-radius:2px;}.progress-bar-inner{background:var(--accent);height:100%;width:40%;animation:indeterminate 1.5s infinite ease-in-out;}@keyframes indeterminate{0%{transform:translateX(-100%);width:40%}50%{width:60%}100%{transform:translateX(250%);width:40%}}.loading-status{text-align:center;color:var(--text-secondary);margin-top:16px;font-size:.9rem;}.btn-cancel{display:block;margin:16px auto 0;padding:8px 24px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;font-size:.85rem;font-family:'Noto Sans JP',sans-serif;transition:all .2s;}.btn-cancel:hover{border-color:var(--text-secondary);color:var(--text-primary);}.results-section{display:none;margin-top:8px;}.results-section.active{display:block;}.product-name{font-size:1.1rem;font-weight:500;color:var(--text-primary);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}.tabs{display:flex;border-bottom:1px solid var(--border);gap:0;overflow-x:auto;}.tab-btn{padding:12px 24px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:.9rem;font-family:'Noto Sans JP',sans-serif;cursor:pointer;transition:all .2s;white-space:nowrap;}.tab-btn:hover{color:var(--text-primary);}.tab-btn.active{color:var(--text-primary);border-bottom-color:var(--accent);}.tab-panel{display:none;padding:20px 0;}.tab-panel.active{display:block;animation:fadeIn .4s ease-in;}.panel-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}.toggle-group{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}.toggle-btn{padding:6px 16px;background:transparent;border:none;color:var(--text-secondary);font-size:.8rem;font-family:'Noto Sans JP',sans-serif;cursor:pointer;transition:all .2s;}.toggle-btn.active{background:var(--accent-soft);color:var(--text-primary);}.preview-iframe{width:100%;border:1px solid var(--border);border-radius:var(--radius);background:#fff;min-height:400px;}.sp-frame{max-width:375px;margin:0 auto;border:8px solid var(--border-light);border-radius:24px;overflow:hidden;}.sp-frame .sp-iframe{border:none;border-radius:0;width:100%;min-height:500px;}.sp-validation{margin-bottom:12px;font-size:.85rem;}.sp-validation.valid{color:var(--success);}.sp-validation.invalid{color:var(--warning);}.code-block{position:relative;background:var(--bg-code);border:1px solid var(--border);border-radius:var(--radius);max-height:500px;overflow-y:auto;}.code-block pre{padding:16px;margin:0;font-family:'Courier New',monospace;font-size:.85rem;color:var(--text-secondary);white-space:pre-wrap;word-break:break-all;line-height:1.5;}.btn-copy{position:absolute;top:8px;right:8px;padding:4px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);font-size:.8rem;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;z-index:1;}.btn-copy:hover{border-color:var(--text-secondary);}.btn-copy.copied{background:var(--success);border-color:var(--success);color:#fff;}.btn-copy-json{padding:6px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-size:.8rem;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;margin-left:auto;}.btn-copy-json:hover{border-color:var(--text-secondary);}.btn-copy-json.copied{background:var(--success);border-color:var(--success);color:#fff;}.accordion-container{display:flex;flex-direction:column;gap:0;}.accordion{margin-top:8px;}.accordion-header{padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:500;transition:background .2s;}.accordion-header:hover{background:var(--bg-card);}.accordion-arrow{font-size:.7rem;color:var(--text-muted);transition:transform .2s;}.accordion.open .accordion-arrow{transform:rotate(180deg);}.accordion.open .accordion-header{border-radius:var(--radius) var(--radius) 0 0;}.accordion-body{display:none;padding:16px;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);background:var(--bg-card);font-size:.85rem;color:var(--text-secondary);line-height:1.8;}.accordion.open .accordion-body{display:block;}.accordion-body table{width:100%;border-collapse:collapse;margin-top:8px;}.accordion-body table th,.accordion-body table td{padding:6px 12px;border:1px solid var(--border);text-align:left;font-size:.85rem;}.accordion-body table th{background:var(--bg-secondary);font-weight:500;color:var(--text-primary);}footer{text-align:center;padding:40px 0 16px;color:var(--text-muted);font-size:.75rem;}.footer-note{margin-top:4px;font-size:.7rem;}.fade-in{animation:fadeIn .4s ease-in;}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.input-group{flex-direction:column}.btn-generate{width:100%}header h1{font-size:1.4rem}.tab-btn{padding:10px 16px;font-size:.8rem}.container{padding:16px 12px}}