:root{--primary-blue: #2563eb;--dark-blue: #1d4ed8;--light-blue: #dbeafe;--success-green: #16a34a;--dark-green: #15803d;--light-green: #dcfce7;--warning-yellow: #d97706;--warning-yellow-light: #fef3c7;--danger-red: #dc2626;--dark-red: #b91c1c;--light-red: #fecaca;--white: #ffffff;--light-gray: #f8fafc;--medium-gray: #e2e8f0;--secondary-gray: #64748b;--dark-gray: #334155;--black: #0f172a;--font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--container-max-width: 1200px;--content-max-width: 800px;--border-radius-sm: .375rem;--border-radius-md: .5rem;--border-radius-lg: .75rem;--border-radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--transition-fast: all .15s ease-in-out;--transition-normal: all .3s ease-in-out;--transition-slow: all .5s ease-in-out}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-family-base);font-size:var(--font-size-md);line-height:var(--line-height-normal);color:var(--dark-gray);background-color:var(--light-gray);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--spacing-md)}@media (min-width: 768px){.container{padding:0 var(--spacing-lg)}}@media (min-width: 1024px){.container{padding:0 var(--spacing-xl)}}.header{background:linear-gradient(135deg,var(--primary-blue) 0%,var(--dark-blue) 100%);color:var(--white);padding:var(--spacing-2xl) 0;text-align:center}.header__title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-md);display:flex;align-items:center;justify-content:center;gap:var(--spacing-md)}.header__icon{font-size:2rem;color:var(--light-blue)}.header__description{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--light-blue)}.main{min-height:calc(100vh - 200px)}.service-notice{max-width:var(--content-max-width);margin:var(--spacing-xl) auto;padding:var(--spacing-lg);background-color:var(--warning-yellow-light);border:2px solid var(--warning-yellow);border-radius:var(--border-radius-lg);color:var(--dark-gray);box-shadow:var(--shadow-sm)}.service-notice p{margin:0;font-weight:var(--font-weight-medium);line-height:var(--line-height-relaxed);white-space:pre-line}.form-group{margin-bottom:var(--spacing-xl)}.form-label{display:block;margin-bottom:var(--spacing-sm);font-weight:var(--font-weight-semibold);color:var(--dark-gray);font-size:var(--font-size-md)}.input-wrapper{position:relative;display:flex;align-items:center}.form-input{width:100%;padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--medium-gray);border-radius:var(--border-radius-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);background-color:var(--white);transition:var(--transition-fast);box-shadow:var(--shadow-sm)}.form-input:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px #2563eb1a;background-color:var(--white)}.form-input:invalid{border-color:var(--danger-red)}.input-unit{position:absolute;right:var(--spacing-lg);color:var(--secondary-gray);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);pointer-events:none}.size-display{margin-top:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--secondary-gray);font-weight:var(--font-weight-medium)}.input-error{margin-top:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--light-red);border:1px solid var(--danger-red);border-radius:var(--border-radius-md);color:var(--dark-red);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:none}.input-error:not(:empty){display:block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);border:2px solid transparent;border-radius:var(--border-radius-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);text-decoration:none;cursor:pointer;transition:var(--transition-fast);box-shadow:var(--shadow-sm);min-height:48px}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}.btn-primary{background-color:var(--primary-blue);color:var(--white)}.btn-primary:hover:not(:disabled){background-color:var(--dark-blue)}.btn-success{background-color:var(--success-green);color:var(--white)}.btn-success:hover:not(:disabled){background-color:var(--dark-green)}.btn-secondary{background-color:var(--white);color:var(--dark-gray);border-color:var(--medium-gray)}.btn-secondary:hover:not(:disabled){background-color:var(--light-gray)}.btn-danger{background-color:var(--danger-red);color:var(--white)}.btn-danger:hover:not(:disabled){background-color:var(--dark-red)}.btn-generate{width:100%;font-size:var(--font-size-lg);padding:var(--spacing-lg) var(--spacing-xl)}.input-section,.progress-section,.result-section,.error-section,.debug-section{max-width:var(--content-max-width);margin:0 auto var(--spacing-3xl) auto;padding:var(--spacing-2xl);background-color:var(--white);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-lg)}.input-section:hover,.progress-section:hover,.result-section:hover{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.progress-section{border:2px solid var(--primary-blue)}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.progress-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--primary-blue);display:flex;align-items:center;gap:var(--spacing-sm)}.progress-icon{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-percentage{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--primary-blue)}.processing-method{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background-color:var(--light-blue);border-radius:var(--border-radius-md)}.method-label{font-weight:var(--font-weight-semibold);color:var(--dark-gray)}.method-value{color:var(--primary-blue);font-weight:var(--font-weight-medium)}.progress-bar-container{width:100%;height:8px;background-color:var(--medium-gray);border-radius:var(--border-radius-sm);overflow:hidden;margin-bottom:var(--spacing-lg)}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary-blue),var(--dark-blue));border-radius:var(--border-radius-sm);transition:width .3s ease;position:relative;overflow:hidden}.progress-bar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progress-shine 2s infinite}@keyframes progress-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.current-phase{font-weight:var(--font-weight-medium);color:var(--dark-gray)}.estimated-time{color:var(--secondary-gray);font-size:var(--font-size-sm)}.result-section{border:2px solid var(--success-green)}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.result-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--success-green);display:flex;align-items:center;gap:var(--spacing-sm)}.result-icon{color:var(--success-green)}.accuracy-badge{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);background-color:var(--light-green);color:var(--dark-green)}.accuracy-badge.perfect{background-color:var(--success-green);color:var(--white);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.info-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}@media (min-width: 768px){.info-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){.info-grid{gap:var(--spacing-xl)}}.info-item{text-align:center;padding:var(--spacing-lg);background-color:var(--light-gray);border-radius:var(--border-radius-lg);border:1px solid var(--medium-gray)}.info-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--secondary-gray);margin-bottom:var(--spacing-xs)}.info-value{display:block;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--dark-gray);font-family:var(--font-family-mono)}.result-actions{display:flex;gap:var(--spacing-md);justify-content:center}.result-actions .btn{flex:1;max-width:200px}@media (max-width: 767px){.result-actions{flex-direction:column}.result-actions .btn{max-width:none}}.error-section{border:2px solid var(--danger-red);background-color:var(--light-red)}.error-section.severity-low,.error-section.severity-medium{border-color:var(--warning-yellow);background-color:var(--warning-yellow-light)}.error-section.severity-high{border-color:var(--danger-red);background-color:var(--light-red)}.error-section.severity-critical{border-color:var(--danger-red);background-color:var(--light-red);animation:critical-pulse 2s infinite}@keyframes critical-pulse{0%,to{border-color:var(--danger-red);box-shadow:0 0 #dc2626b3}50%{border-color:var(--dark-red);box-shadow:0 0 0 10px #dc262600}}.error-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.error-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--danger-red);display:flex;align-items:center;gap:var(--spacing-sm)}.error-icon{color:var(--danger-red)}.severity-low .error-title{color:var(--warning-yellow)}.severity-critical .error-title{color:var(--danger-red);font-weight:var(--font-weight-bold)}.error-close{background:none;border:none;color:var(--secondary-gray);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--border-radius-sm);transition:var(--transition-fast);display:flex;align-items:center;justify-content:center}.error-close:hover{background-color:var(--medium-gray);color:var(--dark-gray)}.error-message{margin-bottom:var(--spacing-md);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--dark-red);line-height:var(--line-height-relaxed)}.severity-low .error-message{color:var(--warning-yellow)}.severity-critical .error-message{color:var(--danger-red);font-weight:var(--font-weight-semibold)}.error-suggestion{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background-color:var(--white);border-radius:var(--border-radius-md);border-left:4px solid var(--primary-blue);font-size:var(--font-size-sm);color:var(--dark-gray);line-height:var(--line-height-relaxed)}.error-suggestion:before{content:"";margin-right:var(--spacing-xs)}.error-debug{margin-top:var(--spacing-md);border:1px solid var(--medium-gray);border-radius:var(--border-radius-md);background-color:var(--white)}.error-debug summary{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--light-gray);cursor:pointer;font-weight:var(--font-weight-medium);border-radius:var(--border-radius-md) var(--border-radius-md) 0 0}.error-debug summary:hover{background-color:var(--medium-gray)}.error-debug pre{margin:var(--spacing-md);padding:var(--spacing-md);background-color:#f8f9fa;border-radius:var(--border-radius-sm);font-family:var(--font-family-mono);font-size:var(--font-size-xs);overflow-x:auto;white-space:pre-wrap;word-break:break-word}.error-debug p{margin:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);color:var(--secondary-gray)}.error-stats{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--white);border-radius:var(--border-radius-md);border:1px solid var(--medium-gray)}.error-stats h4{margin:0 0 var(--spacing-md) 0;color:var(--dark-gray);font-size:var(--font-size-lg)}.error-stats details{margin-bottom:var(--spacing-sm)}.error-stats summary{cursor:pointer;font-weight:var(--font-weight-medium);color:var(--primary-blue);padding:var(--spacing-xs) 0}.error-stats summary:hover{color:var(--dark-blue)}.error-stats ul{margin:var(--spacing-sm) 0;padding-left:var(--spacing-lg)}.error-stats li{margin-bottom:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--secondary-gray)}.retry-btn{background-color:var(--warning-yellow);color:var(--dark-gray);border:1px solid var(--warning-yellow)}.retry-btn:hover:not(:disabled){background-color:#e0a800;border-color:#e0a800}.retry-btn:disabled{opacity:.5;cursor:not-allowed}.error-section[role=alert]{outline:2px solid transparent;outline-offset:2px}.error-section:focus-within{outline:2px solid var(--primary-blue);outline-offset:2px}@media (max-width: 767px){.error-section{margin:var(--spacing-md) calc(-1 * var(--spacing-md));border-radius:0}.error-debug pre{font-size:12px;overflow-x:scroll}.error-stats{font-size:var(--font-size-sm)}}@media (prefers-color-scheme: dark){.error-debug{background-color:#2d3748;border-color:#4a5568}.error-debug summary{background-color:#4a5568;color:#e2e8f0}.error-debug pre{background-color:#1a202c;color:#e2e8f0}.error-stats{background-color:#2d3748;border-color:#4a5568;color:#e2e8f0}}.debug-section{background-color:var(--warning-yellow-light);border:1px solid var(--warning-yellow);font-family:var(--font-family-mono);font-size:var(--font-size-xs)}.debug-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.debug-header h4{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--warning-yellow);font-weight:var(--font-weight-semibold)}.debug-toggle{background:none;border:1px solid var(--warning-yellow);color:var(--warning-yellow);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-size-xs);cursor:pointer;transition:var(--transition-fast)}.debug-toggle:hover{background-color:var(--warning-yellow);color:var(--dark-gray)}.debug-content{background-color:var(--white);padding:var(--spacing-md);border-radius:var(--border-radius-md);border:1px solid var(--medium-gray);max-height:300px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}.footer{background-color:var(--dark-gray);color:var(--white);padding:var(--spacing-xl) 0;margin-top:var(--spacing-3xl)}.footer-content{display:flex;justify-content:center;align-items:center}.footer-info{font-size:var(--font-size-sm);color:var(--secondary-gray)}@media (max-width: 767px){.footer-content{flex-direction:column;text-align:center}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-center{text-align:center}.text-mono{font-family:var(--font-family-mono)}.fade-in{animation:fadeIn .3s ease-in-out}.fade-out{animation:fadeOut .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}}.loading{position:relative;overflow:hidden}.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:loading-shimmer 1.5s infinite}@keyframes loading-shimmer{0%{left:-100%}to{left:100%}}