:root{font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;line-height:1.6;font-weight:400;color:#333;background-color:#f5f7fa}body{margin:0;padding:0}#app{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;line-height:1.6;color:#333;background-color:#f5f7fa}.app-container{display:flex;flex-direction:column;min-height:100vh}header{background-color:#2c3e50;color:#fff;padding:1.5rem 2rem;text-align:center;box-shadow:0 2px 4px #0000001a}header h1{font-size:2.2rem;margin-bottom:.5rem}header p{font-size:1rem;opacity:.9}main{flex:1;max-width:1200px;margin:0 auto;padding:2rem;width:100%}.steps{display:flex;justify-content:space-between;margin-bottom:2rem;position:relative}.steps:before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background-color:#e0e0e0;z-index:1}.step{background-color:#fff;border:2px solid #e0e0e0;border-radius:50px;padding:.75rem 1.5rem;font-weight:700;position:relative;z-index:2;transition:all .3s ease}.step.active{background-color:#3498db;color:#fff;border-color:#3498db;box-shadow:0 2px 10px #3498db4d}section{background-color:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 10px #0000000d;margin-bottom:2rem}section h2{margin-bottom:1.5rem;color:#2c3e50;font-size:1.8rem}.upload-section{text-align:center}.upload-area{border:2px dashed #3498db;border-radius:8px;padding:3rem 2rem;margin:1.5rem 0;cursor:pointer;transition:all .3s ease;background-color:#3498db0d}.upload-area:hover{background-color:#3498db1a}.upload-icon{margin-bottom:1rem;color:#3498db}.file-info{margin-top:1rem;font-weight:700;color:#2c3e50}.encoding-info{margin:1.5rem 0;color:#2c3e50;font-size:1rem}.primary-button,.secondary-button{padding:.75rem 1.5rem;border-radius:4px;font-weight:700;cursor:pointer;transition:all .3s ease;border:none;font-size:1rem}.primary-button{background-color:#3498db;color:#fff}.primary-button:hover{background-color:#2980b9;box-shadow:0 2px 10px #3498db4d}.primary-button:disabled{background-color:#b3d1e6;cursor:not-allowed;box-shadow:none}.secondary-button{background-color:#ecf0f1;color:#2c3e50}.secondary-button:hover{background-color:#dde4e6}.button-group{display:flex;justify-content:space-between;margin-top:2rem}.column-preview{overflow-x:auto;margin:1.5rem 0}table{width:100%;border-collapse:collapse;min-width:800px}th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #e0e0e0}th{background-color:#f5f7fa;font-weight:700;color:#2c3e50}tbody tr:hover{background-color:#3498db0d}.required-badge{display:inline-block;background-color:#e74c3c;color:#fff;font-size:.7rem;padding:.1rem .4rem;border-radius:3px;margin-left:.5rem;vertical-align:middle}.result-info{display:grid;grid-template-columns:1fr 2fr;gap:2rem;margin:1.5rem 0}.info-card,.preview-card{background-color:#f5f7fa;border-radius:8px;padding:1.5rem}.info-card h3,.preview-card h3{margin-bottom:1rem;color:#2c3e50;font-size:1.2rem}.info-card p{margin-bottom:.5rem}.preview-table-container{overflow-x:auto;max-height:300px;overflow-y:auto}footer{background-color:#2c3e50;color:#fff;text-align:center;padding:1.5rem;margin-top:auto}footer p{opacity:.8;font-size:.9rem}@media (max-width: 1024px){.result-info{grid-template-columns:1fr}.steps{flex-direction:column;gap:1rem;align-items:center}.steps:before{display:none}}