:root{--green: #16a34a;--green-light: #22c55e;--lime: #84cc16;--orange: #f59e0b;--red: #ef4444;--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: 16px;--radius-sm: 10px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 24px rgba(0,0,0,.06);--shadow-lg: 0 4px 6px rgba(0,0,0,.05), 0 10px 40px rgba(0,0,0,.1)}*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--gray-100);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}.page-wrapper{width:100%;max-width:640px}.container{width:100%;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--gray-200)}.color-bar{display:flex;height:5px}.bar-segment{flex:1}.bar-a{background:var(--green)}.bar-b{background:var(--lime)}.bar-c{background:var(--orange)}.bar-d{background:var(--red)}.content{padding:32px 32px 36px}.header{text-align:center;margin-bottom:28px}.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--green);color:#fff;border-radius:14px;margin-bottom:12px}.title{font-size:24px;font-weight:900;color:var(--gray-900);letter-spacing:1.5px;margin-bottom:4px}.subtitle{font-size:14px;color:var(--gray-400);font-weight:500}.step-indicator{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:28px}.step-dot{width:32px;height:32px;border-radius:50%;background:var(--gray-100);border:2px solid var(--gray-300);display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative;flex-shrink:0}.step-dot span{font-size:13px;font-weight:700;color:var(--gray-400);transition:color .3s ease}.step-dot.active{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px #16a34a26}.step-dot.active span{color:#fff}.step-dot.done{background:var(--green);border-color:var(--green)}.step-dot.done span{color:#fff}.step-line{flex:1;height:2px;background:var(--gray-200);max-width:60px;transition:background .3s ease}.step-line.done{background:var(--green)}.card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px}.card-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--gray-200)}.card-icon{font-size:20px}.card-label{font-size:14px;font-weight:700;color:var(--gray-700);text-transform:uppercase;letter-spacing:.5px}.step{display:none}.step.active{display:block;animation:fadeIn .35s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.question-group{display:flex;flex-direction:column;gap:20px}.question{display:flex;align-items:flex-start}.q-body{flex:1}.q-text{font-size:15px;color:var(--gray-700);margin-bottom:14px;line-height:1.6;font-weight:500}.q-text strong{color:var(--gray-900)}.q-options{display:flex;gap:10px}.radio-card{flex:1;cursor:pointer}.radio-card input[type=radio]{position:absolute;opacity:0;width:0;height:0}.radio-card-content{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-sm);transition:all .2s ease;font-size:14px;font-weight:600;color:var(--gray-600)}.radio-circle{width:18px;height:18px;border-radius:50%;border:2px solid var(--gray-300);transition:all .2s ease;flex-shrink:0;position:relative}.radio-card input[type=radio]:checked+.radio-card-content{border-color:var(--green);background:#16a34a0a;color:var(--green)}.radio-card input[type=radio]:checked+.radio-card-content .radio-circle{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px #fff}.radio-card-content:hover{border-color:var(--gray-300);background:var(--gray-50)}.q-input{display:flex;align-items:center}.input-wrapper{display:flex;align-items:center;background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .2s ease;width:100%}.input-wrapper:focus-within{border-color:var(--green);box-shadow:0 0 0 3px #16a34a1a}.input-wrapper input[type=number]{flex:1;padding:12px 16px;border:none;font-size:16px;font-family:inherit;font-weight:600;color:var(--gray-900);background:transparent;outline:none;min-width:0}.input-wrapper input[type=number]::placeholder{color:var(--gray-300);font-weight:400}.input-wrapper input[type=number]::-webkit-inner-spin-button,.input-wrapper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-wrapper input[type=number]{-moz-appearance:textfield}.input-unit{padding:12px 14px;font-size:13px;color:var(--gray-400);font-weight:600;background:var(--gray-50);border-left:1px solid var(--gray-200);white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:24px auto 0;padding:13px 28px;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s ease;letter-spacing:.3px}.btn-primary{display:flex;background:var(--green);color:#fff;box-shadow:0 2px 8px #16a34a4d}.btn-primary:hover{background:#15803d;box-shadow:0 4px 16px #16a34a59;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-accent{display:flex;background:linear-gradient(135deg,var(--green) 0%,#059669 100%);color:#fff;box-shadow:0 2px 8px #16a34a4d;padding:14px 32px;font-size:16px}.btn-accent:hover{box-shadow:0 4px 20px #16a34a66;transform:translateY(-1px)}.btn-outline{background:#fff;color:var(--gray-600);border:2px solid var(--gray-200)}.btn-outline:hover{border-color:var(--gray-300);background:var(--gray-50);color:var(--gray-700)}.note{font-size:13px;color:var(--gray-400);font-style:italic;margin-top:16px}.hidden{display:none!important}.error-msg{color:var(--red);font-size:13px;margin-top:8px;font-weight:600;display:flex;align-items:center;gap:6px}.error-msg:before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--red);color:#fff;border-radius:50%;font-size:11px;font-weight:800;flex-shrink:0}.result-card{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px}.result-header{text-align:center;margin-bottom:20px}.result-header h2{font-size:20px;font-weight:800;color:var(--gray-900);margin-bottom:4px}.result-header p{font-size:14px;color:var(--gray-500);font-weight:500}.label-toggle{display:flex;justify-content:center;margin-bottom:16px;background:var(--gray-100);border-radius:8px;padding:3px;display:inline-flex;margin-left:auto;margin-right:auto;width:auto}.result-label-box{text-align:center}.toggle-btn{padding:7px 18px;border:none;background:transparent;font-size:13px;font-weight:600;font-family:inherit;color:var(--gray-500);cursor:pointer;border-radius:6px;transition:all .2s ease}.toggle-btn.active{background:#fff;color:var(--gray-800);box-shadow:0 1px 3px #0000001a}.toggle-btn:hover:not(.active){color:var(--gray-700)}.canvas-wrapper{display:flex;justify-content:center}.canvas-wrapper canvas{display:block;max-width:100%;height:auto}.result-detail{margin-top:20px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px;font-size:14px;color:var(--gray-700)}.result-detail table{width:100%;border-collapse:collapse}.result-detail th,.result-detail td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--gray-200)}.result-detail th{font-weight:700;color:var(--gray-800);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.result-detail td{font-weight:500}.result-detail tr:last-child td{border-bottom:none}.grade-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:#fff;font-weight:800;font-size:13px}.grade-A{background:var(--green)}.grade-B{background:var(--lime)}.grade-C{background:var(--orange)}.grade-D{background:var(--red)}.result-actions{display:flex;justify-content:center;gap:12px;margin-top:24px}.result-actions .btn{margin:0}.footer{text-align:center;padding:16px;font-size:12px;color:var(--gray-400);font-weight:500}@media(max-width:768px){body{padding:16px 12px}.content{padding:28px 24px 32px}.title{font-size:22px;letter-spacing:1px}.result-detail{padding:16px}.result-detail th,.result-detail td{padding:10px 8px}}@media(max-width:600px){body{padding:12px 8px}.container{border-radius:12px}.content{padding:24px 18px 28px}.header{margin-bottom:22px}.logo-icon{width:42px;height:42px;border-radius:12px;margin-bottom:10px}.logo-icon svg{width:24px;height:24px}.title{font-size:20px;letter-spacing:1px}.subtitle{font-size:13px}.step-indicator{margin-bottom:22px}.step-dot{width:28px;height:28px}.step-dot span{font-size:12px}.step-line{max-width:40px}.card{padding:18px;border-radius:12px}.card-header{margin-bottom:16px;padding-bottom:12px}.card-label{font-size:13px}.q-text{font-size:14px;margin-bottom:12px}.q-options{flex-direction:column;gap:8px}.radio-card-content{padding:14px 16px;font-size:14px}.input-wrapper{max-width:240px}.btn{padding:14px 24px;font-size:15px;width:100%}.note{font-size:12px}.result-card{padding:18px;border-radius:12px}.result-header h2{font-size:18px}.result-header p{font-size:13px}.label-toggle{width:100%}.toggle-btn{flex:1;padding:8px 14px;font-size:13px}.canvas-wrapper{margin:0 -8px}.result-detail{padding:14px;border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}.result-detail table{min-width:320px}.result-detail th,.result-detail td{padding:8px 6px;font-size:13px}.result-detail th{font-size:11px}.grade-badge{width:26px;height:26px;font-size:12px;border-radius:6px}.result-actions{flex-direction:column;gap:10px}.result-actions .btn{width:100%;margin:0}.footer{padding:12px;font-size:11px}}@media(max-width:380px){body{padding:8px 4px}.content{padding:20px 14px 24px}.title{font-size:18px;letter-spacing:.5px}.subtitle{font-size:12px}.step-dot{width:26px;height:26px}.step-dot span{font-size:11px}.step-line{max-width:28px}.card{padding:14px}.card-header{gap:8px;margin-bottom:14px;padding-bottom:10px}.card-icon{font-size:18px}.card-label{font-size:12px}.q-text{font-size:13px;margin-bottom:10px}.radio-card-content{padding:12px 14px;font-size:13px;gap:8px}.radio-circle{width:16px;height:16px}.input-wrapper{max-width:200px}.btn{padding:13px 20px;font-size:14px}.result-card{padding:14px}.result-header h2{font-size:16px}.toggle-btn{padding:7px 10px;font-size:12px}.canvas-wrapper{margin:0 -6px}.result-detail{padding:10px;margin-top:16px}.result-detail th,.result-detail td{padding:7px 4px;font-size:12px}.result-detail th{font-size:10px}.result-actions{gap:8px;margin-top:20px}}@media(hover:none)and (pointer:coarse){.radio-card-content,.btn{min-height:48px}.toggle-btn{min-height:40px}.input-wrapper input[type=number]{min-height:48px}}@media(max-height:500px)and (orientation:landscape){body{padding:8px 16px;align-items:flex-start}.header{margin-bottom:16px}.logo-icon{width:36px;height:36px;margin-bottom:8px}.step-indicator{margin-bottom:16px}}@supports (padding: env(safe-area-inset-bottom)){body{padding-left:max(env(safe-area-inset-left),8px);padding-right:max(env(safe-area-inset-right),8px);padding-bottom:max(env(safe-area-inset-bottom),12px)}}