:root{--primary:#2563eb;--primary-dark:#1d4ed8;--primary-light:#dbeafe;--success:#22a06b;--success-light:#dcfce7;--caution:#f59e0b;--caution-light:#fef3c7;--warning-c:#f97316;--warning-light:#fff7ed;--danger:#ef4444;--danger-light:#fee2e2;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--radius:12px;--radius-sm:8px;--shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);--shadow-lg:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);--transition:0.3s cubic-bezier(0.4,0,0.2,1)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{background:var(--gray-50);color:var(--gray-800);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;font-size:15px;line-height:1.6}.container{margin:0 auto;max-width:760px;padding:24px 16px 64px}.security-banner{align-items:flex-start;background:#fef9c3;border:1px solid #fde047;border-radius:var(--radius-sm);color:#713f12;display:flex;font-size:13px;gap:8px;line-height:1.5;margin-bottom:20px;padding:10px 14px}.security-banner strong{font-weight:600}.app-header{gap:14px;margin-bottom:28px}.app-header,.app-header-icon{align-items:center;display:flex}.app-header-icon{background:var(--primary-light);border-radius:var(--radius);flex-shrink:0;height:48px;justify-content:center;width:48px}.app-title{color:var(--gray-900);font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}.app-subtitle{color:var(--gray-500);font-size:.875rem;margin-top:4px}.progress-wrap{margin-bottom:24px}.progress-label{color:var(--gray-500);display:flex;font-size:12px;justify-content:space-between;margin-bottom:5px}.progress-track{background:var(--gray-200);border-radius:999px;height:6px;overflow:hidden}.progress-bar{background:var(--primary);border-radius:999px;height:100%;transition:width var(--transition);width:0}.step-card{background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;transition:border-color var(--transition)}.step-card.active{border-color:var(--primary);box-shadow:var(--shadow-md)}.step-card.done{border-color:var(--gray-200)}.step-card.done .step-header{cursor:pointer}.step-card.done .step-header:hover{background:var(--gray-50)}.step-header{gap:12px;padding:18px 20px;user-select:none}.step-header,.step-number{align-items:center;display:flex}.step-number{background:var(--gray-200);border-radius:50%;color:var(--gray-600);flex-shrink:0;font-size:13px;font-weight:700;height:32px;justify-content:center;transition:background var(--transition),color var(--transition);width:32px}.step-card.active .step-number{background:var(--primary);color:#fff}.step-card.done .step-number{background:var(--success);color:#fff}.step-title-wrap{flex:1}.step-title{color:var(--gray-900);font-size:1rem;font-weight:600}.step-subtitle{color:var(--gray-500);font-size:12px;margin-top:2px}.step-selection-badge{align-items:center;background:var(--primary-light);border-radius:999px;color:var(--primary-dark);display:none;font-size:12px;font-weight:600;gap:4px;max-width:180px;overflow:hidden;padding:4px 10px;text-overflow:ellipsis;white-space:nowrap}.step-card.done .step-selection-badge{display:flex}.step-edit-btn{align-items:center;background:none;border:1px solid var(--gray-300);border-radius:var(--radius-sm);color:var(--gray-600);cursor:pointer;display:none;flex-shrink:0;font-size:12px;gap:4px;padding:4px 10px;transition:border-color var(--transition),color var(--transition)}.step-card.done .step-edit-btn{display:inline-flex}.step-edit-btn:hover{border-color:var(--primary);color:var(--primary)}.step-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}.step-body.open{max-height:1200px}.step-body-inner{padding:0 20px 24px}.step-desc{color:var(--gray-500);font-size:13px;margin-bottom:14px}.option-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.option-btn{align-items:center;background:var(--gray-50);border:2px solid var(--gray-200);border-radius:var(--radius);color:var(--gray-700);cursor:pointer;display:flex;flex-direction:column;font-size:.875rem;font-weight:500;gap:6px;line-height:1.4;padding:14px 12px;text-align:center;transition:border-color var(--transition),background var(--transition),transform var(--transition),box-shadow var(--transition)}.option-btn .btn-icon,.option-btn .icon{flex-shrink:0;font-size:1.6rem;line-height:1}.option-btn-label{font-size:.875rem;font-weight:600}.option-btn-hint{color:var(--gray-400);font-size:11px;line-height:1.3;text-align:center}.option-grid--3{grid-template-columns:repeat(3,1fr)}.option-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.option-btn.selected,.option-btn:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)}.option-btn.selected{font-weight:600}.file-drop-area{align-items:center;border:2px dashed var(--gray-300);border-radius:var(--radius);color:var(--gray-400);cursor:pointer;display:flex;flex-direction:column;font-size:13px;gap:4px;margin-bottom:12px;padding:16px 20px;text-align:center;transition:border-color var(--transition),background var(--transition)}.file-drop-area.drag-over,.file-drop-area:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}.textarea-wrap{margin-bottom:4px}.input-textarea{background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius-sm);color:var(--gray-800);font-family:Consolas,Courier New,monospace;font-size:13px;line-height:1.6;min-height:200px;padding:12px 14px;resize:vertical;transition:border-color var(--transition);width:100%}.input-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);outline:none}.char-count{color:var(--gray-400);font-size:12px;margin-bottom:14px;margin-top:4px;text-align:right}.options-panel{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);margin-bottom:16px;padding:14px 16px}.options-title{align-items:center;color:var(--gray-500);display:flex;font-size:12px;font-weight:600;gap:5px;letter-spacing:.05em;margin-bottom:10px;text-transform:uppercase}.options-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.option-check{align-items:center;color:var(--gray-700);cursor:pointer;display:flex;font-size:13px;gap:8px}.option-check input[type=checkbox]{accent-color:var(--primary);cursor:pointer;height:16px;width:16px}.option-check input:disabled+span{color:var(--gray-300)}.processing-bar{align-items:center;color:var(--gray-500);display:none;font-size:13px;gap:10px;margin-top:12px}.spinner{animation:spin .7s linear infinite;border:2px solid var(--gray-200);border-radius:50%;border-top-color:var(--primary);flex-shrink:0;height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.cta-wrap{align-items:center;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:0}.btn-primary{align-items:center;background:var(--primary);border:none;border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(37,99,235,.25);color:#fff;cursor:pointer;display:inline-flex;font-size:.95rem;font-weight:600;gap:6px;padding:12px 24px;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(37,99,235,.3)}.btn-primary:active{transform:translateY(1px)}.btn-primary:disabled{background:var(--gray-300);box-shadow:none;cursor:not-allowed}.btn-secondary{align-items:center;background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius-sm);color:var(--gray-600);cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:500;gap:6px;padding:12px 20px;transition:border-color var(--transition),color var(--transition)}.btn-secondary:hover{border-color:var(--gray-400);color:var(--gray-800)}.btn-secondary:active{transform:translateY(1px)}.copy-btn{align-items:center;box-shadow:0 2px 8px rgba(34,160,107,.2);display:inline-flex;gap:6px;padding:10px 20px}.result-area{margin-top:24px}.result-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}.score-section{align-items:flex-start;background:linear-gradient(135deg,var(--gray-50) 0,#fff 100%);border-bottom:1px solid var(--gray-100);display:flex;gap:24px;padding:28px 24px}.score-ring{align-items:center;background:#fff;border:6px solid var(--ring-color,var(--primary));border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.04);display:flex;flex-direction:column;flex-shrink:0;gap:1px;height:110px;justify-content:center;width:110px}.score-emoji{font-size:1.5rem;line-height:1}.score-number{font-size:2rem;font-weight:800;line-height:1}.score-label{color:var(--gray-400);font-size:11px}.score-rank-label{font-size:12px;font-weight:700}.score-detail{flex:1}.result-message{color:var(--gray-900);font-size:1.05rem;font-weight:600;margin-bottom:6px}.summary-message{color:var(--gray-600);font-size:.875rem;margin-bottom:10px}.encoding-rec{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);color:var(--gray-500);font-size:.8rem;line-height:1.5;padding:8px 12px}.encoding-rec strong{color:var(--gray-700)}.result-section{border-bottom:1px solid var(--gray-100);padding:20px 24px}.result-section:last-child{border-bottom:none}.result-section-title{color:var(--gray-400);font-size:.8rem;font-weight:700;letter-spacing:.06em;margin-bottom:12px;text-transform:uppercase}.no-issues{color:var(--success);font-size:.9rem;font-weight:500}.issue-table{border-collapse:collapse;font-size:.875rem;width:100%}.issue-table th{background:var(--gray-50);border-bottom:1px solid var(--gray-200);color:var(--gray-500);font-size:11px;font-weight:600;letter-spacing:.04em;padding:8px 10px;text-align:left;text-transform:uppercase}.issue-table td{border-bottom:1px solid var(--gray-100);color:var(--gray-700);padding:9px 10px;vertical-align:middle}.issue-table tr:last-child td{border-bottom:none}.issue-count{color:var(--gray-800)}.issue-count,.issue-deduction{font-weight:600;text-align:right}.issue-deduction{color:var(--danger)}.sev-badge{border-radius:999px;display:inline-block;font-size:11px;font-weight:700;padding:2px 8px}.sev-high{background:#fee2e2;color:#b91c1c}.sev-medium{background:#fef3c7;color:#92400e}.sev-low{background:var(--gray-100);color:var(--gray-600)}.fix-list{display:flex;flex-direction:column;gap:6px;list-style:none}.fix-list li{align-items:flex-start;color:var(--gray-700);display:flex;font-size:.875rem;gap:6px}.no-fix{color:var(--gray-400)}.fix-badge{background:var(--success-light);border-radius:999px;color:#166534;display:inline-block;flex-shrink:0;font-size:11px;font-weight:700;padding:1px 7px}.code-wrap{margin-bottom:10px}.result-textarea{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);color:var(--gray-800);font-family:Consolas,Courier New,monospace;font-size:13px;line-height:1.6;min-height:150px;padding:12px 14px;resize:vertical;width:100%}.copy-actions{display:flex;justify-content:flex-end}.copy-btn{background:var(--success);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:10px 22px;transition:background var(--transition)}.copy-btn:hover{background:#1a8a5b}.html-repair-section{border-top:2px solid var(--primary-light)}.html-issue-card{align-items:flex-start;border-left:4px solid transparent;border-radius:var(--radius-sm);display:flex;gap:14px;margin-bottom:12px;padding:14px 16px}.html-issue-card:last-of-type{margin-bottom:0}.html-issue-danger{background:var(--danger-light);border-left-color:var(--danger)}.html-issue-warn{background:var(--caution-light);border-left-color:var(--caution)}.html-issue-icon{flex-shrink:0;font-size:1.4rem;line-height:1;margin-top:2px}.html-issue-body{color:var(--gray-800);flex:1;font-size:.875rem}.html-issue-body strong{display:block;font-size:.9rem;margin-bottom:4px}.html-issue-body p{line-height:1.6;margin-top:4px}.html-issue-body code{background:rgba(0,0,0,.07);border-radius:3px;font-family:Consolas,Courier New,monospace;font-size:.82rem;padding:1px 4px}.inline-css-rec{align-items:flex-start;background:var(--primary-light);border:1px solid #bfdbfe;border-radius:var(--radius-sm);color:var(--gray-800);display:flex;font-size:.875rem;gap:12px;line-height:1.6;margin-top:16px;padding:14px 16px}.inline-css-rec-icon{flex-shrink:0;font-size:1.3rem;margin-top:1px}.inline-css-rec a{color:var(--primary-dark);text-underline-offset:2px}.inline-css-rec code{background:rgba(0,0,0,.07);border-radius:3px;font-size:.82rem;padding:1px 4px}.before-after-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}@media (max-width:580px){.before-after-grid{grid-template-columns:1fr}}.before-after-col{display:flex;flex-direction:column}.ba-label{border-radius:var(--radius-sm) var(--radius-sm) 0 0;font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:4px 10px;text-transform:uppercase}.ba-label-before{background:var(--danger-light);border:1px solid #fca5a5;border-bottom:none;color:#b91c1c}.ba-label-after{background:var(--success-light);border:1px solid #86efac;border-bottom:none;color:#15803d}.ba-pre{border-radius:0 0 var(--radius-sm) var(--radius-sm);flex:1;font-family:Consolas,Courier New,monospace;font-size:12.5px;line-height:1.65;margin:0;max-height:300px;overflow:auto;padding:12px 14px;white-space:pre-wrap;word-break:break-all}.ba-pre-before{background:#fff5f5;border:1px solid #fca5a5;color:var(--gray-800)}.ba-pre-after{background:#f0fdf4;border:1px solid #86efac;color:var(--gray-800)}.ba-pre mark{background:#fef08a;color:#78350f}.ba-pre del,.ba-pre mark{border-radius:2px;padding:0 1px}.ba-pre del{background:#fee2e2;color:#b91c1c;text-decoration:line-through}.diff-line-changed{display:block}.ba-hint{align-items:center;color:var(--gray-500);display:flex;font-size:.8rem;gap:6px;margin-top:8px}.mark-sample{background:#fef08a;border:1px solid #fde047;border-radius:2px;display:inline-block;flex-shrink:0;height:14px;width:14px}@keyframes resultFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.result-card--animate{animation:resultFadeIn .35s ease both}.toast{background:var(--gray-900);border-radius:999px;bottom:32px;color:#fff;font-size:13px;font-weight:500;left:50%;opacity:0;padding:10px 20px;pointer-events:none;position:fixed;transform:translateX(-50%) translateY(20px);transition:opacity .25s,transform .25s;white-space:nowrap;z-index:9999}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media (max-width:600px){.score-section{align-items:center;flex-direction:column}.score-detail{text-align:center;width:100%}.option-grid{grid-template-columns:repeat(2,1fr)}.options-grid-checks{grid-template-columns:1fr}.cta-row{flex-direction:column}.cta-btn{justify-content:center;width:100%}.issue-table{font-size:12px}}