*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;font-family:Pretendard,Apple SD Gothic Neo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}.page{min-height:100vh;background:linear-gradient(135deg,#0f0f0f,#1a1a2e,#16213e);display:flex;align-items:center;justify-content:center;padding:24px 16px;font-family:Pretendard,Apple SD Gothic Neo,system-ui,sans-serif}.container{width:100%;max-width:420px;display:flex;flex-direction:column;gap:32px}.header{text-align:center}.header-sub{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#a78bfa;font-weight:500;margin-bottom:10px}.header-title{font-size:28px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:10px}.header-desc{font-size:14px;color:#888;line-height:1.6}.section{display:flex;flex-direction:column;gap:12px}.section-label{font-size:13px;font-weight:600;color:#ccc;letter-spacing:.5px}.photo-upload{position:relative;width:100%;height:280px;border-radius:20px;border:2px dashed #333;background:#ffffff08;cursor:pointer;overflow:hidden;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.photo-upload:hover{border-color:#a78bfa;background:#a78bfa0d}.photo-upload.dragging{border-color:#a78bfa;background:#a78bfa1a;transform:scale(1.01)}.photo-upload.has-photo{border:none}.photo-preview{width:100%;height:100%;object-fit:cover}.photo-overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.photo-overlay span{color:#fff;font-size:14px;font-weight:600;background:#fff3;padding:8px 20px;border-radius:20px;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.photo-upload:hover .photo-overlay{opacity:1}.photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;text-align:center}.upload-icon{width:56px;height:56px;background:#a78bfa1a;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.upload-icon svg{width:28px;height:28px;color:#a78bfa}.upload-text{font-size:15px;font-weight:500;color:#ccc}.upload-hint{font-size:12px;color:#555;line-height:1.5}.body-info{display:flex;flex-direction:column;gap:12px}.input-group{display:flex;align-items:center;background:#ffffff0d;border:1px solid #2a2a2a;border-radius:14px;padding:0 16px;height:58px;transition:border-color .2s,background .2s}.input-group:focus-within{border-color:#a78bfa;background:#a78bfa12}.input-icon{width:20px;height:20px;flex-shrink:0;margin-right:12px}.input-icon svg{width:20px;height:20px;color:#666}.input-group:focus-within .input-icon svg{color:#a78bfa}.body-input{flex:1;background:none;border:none;outline:none;font-size:18px;font-weight:500;color:#fff;-moz-appearance:textfield}.body-input::-webkit-outer-spin-button,.body-input::-webkit-inner-spin-button{-webkit-appearance:none}.body-input::placeholder{color:#444;font-size:15px;font-weight:400}.input-unit{font-size:14px;color:#555;font-weight:500;margin-left:4px}.input-group:focus-within .input-unit{color:#a78bfa}.submit-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;border-radius:14px;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;background:#2a2a2a;color:#555}.submit-btn svg{width:20px;height:20px;transition:transform .3s ease}.submit-btn.active{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;box-shadow:0 8px 30px #7c3aed66}.submit-btn.active:hover{transform:translateY(-2px);box-shadow:0 12px 40px #7c3aed80}.submit-btn.active:hover svg{transform:translate(4px)}.submit-btn.active:active{transform:translateY(0)}.submit-btn.loading{background:#7c3aed4d;color:#a78bfa;cursor:not-allowed}.submit-hint{text-align:center;font-size:13px;color:#444;margin-top:-16px}.spinner{width:18px;height:18px;border:2px solid rgba(167,139,250,.3);border-top-color:#a78bfa;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.error-box{display:flex;align-items:center;gap:10px;background:#fb71851a;border:1px solid rgba(251,113,133,.25);border-radius:12px;padding:14px 16px;font-size:14px;color:#fda4af;line-height:1.5}.error-box svg{width:20px;height:20px;flex-shrink:0;color:#fb7185}.report-page{min-height:100vh;background:linear-gradient(135deg,#0f0f0f,#1a1a2e,#16213e);padding:40px 16px;font-family:Pretendard,Apple SD Gothic Neo,system-ui,sans-serif}.report-container{width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.report-header{text-align:center;padding:32px 24px;background:#a78bfa14;border:1px solid rgba(167,139,250,.2);border-radius:24px;display:flex;flex-direction:column;align-items:center;gap:12px}.report-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#a78bfa;font-weight:600}.report-persona{font-size:26px;font-weight:700;color:#fff;line-height:1.3;margin:0}.report-profile-thumb{width:80px;height:80px;border-radius:50%;overflow:hidden;border:2px solid rgba(167,139,250,.5);box-shadow:0 0 24px #a78bfa4d}.report-profile-thumb img{width:100%;height:100%;object-fit:cover}.report-stats{display:flex;align-items:center;gap:8px;font-size:14px;color:#888;font-weight:500}.report-stats .dot{color:#444}.report-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px}.card-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#ccc;letter-spacing:.3px}.card-icon{width:28px;height:28px;background:#a78bfa26;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.card-icon svg{width:16px;height:16px;color:#a78bfa}.card-icon.recommend{background:#34d39926}.card-icon.recommend svg{color:#34d399}.card-icon.hair{background:#fbbf2426}.card-icon.hair svg{color:#fbbf24}.card-icon.avoid{background:#fb718526}.card-icon.avoid svg{color:#fb7185}.card-desc{font-size:14px;color:#aaa;line-height:1.7;margin:0}.body-type-badge{display:inline-block;background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;font-size:14px;font-weight:600;padding:6px 16px;border-radius:20px;width:fit-content}.personal-color-badge{display:inline-block;background:#a78bfa26;border:1px solid rgba(167,139,250,.3);color:#a78bfa;font-size:14px;font-weight:600;padding:6px 16px;border-radius:20px;width:fit-content}.color-swatches{display:flex;gap:12px;flex-wrap:wrap}.color-swatch-item{display:flex;flex-direction:column;align-items:center;gap:6px}.color-swatch{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d;cursor:default}.color-name{font-size:11px;color:#666;text-align:center;max-width:50px;line-height:1.3}.style-tags{display:flex;flex-wrap:wrap;gap:8px}.style-tag{background:#a78bfa1f;border:1px solid rgba(167,139,250,.25);color:#c4b5fd;font-size:13px;font-weight:500;padding:6px 14px;border-radius:20px}.item-list{display:flex;flex-direction:column;gap:10px}.item-card{padding:14px 16px;border-radius:12px;display:flex;flex-direction:column;gap:4px}.item-card.recommend{background:#34d39912;border:1px solid rgba(52,211,153,.15)}.item-card.avoid{background:#fb718512;border:1px solid rgba(251,113,133,.15)}.item-name{font-size:14px;font-weight:600;color:#e5e5e5}.item-card.recommend .item-name{color:#6ee7b7}.item-card.avoid .item-name{color:#fda4af}.item-reason{font-size:13px;color:#888;line-height:1.5}.hairstyle-wrap{display:flex;flex-direction:column;gap:10px}.hairstyle-grid{width:100%;border-radius:12px;display:block;border:1px solid rgba(251,191,36,.2);box-shadow:0 4px 24px #0006}.hairstyle-caption{font-size:12px;color:#555;text-align:center;line-height:1.5}.hairstyle-empty{font-size:13px;color:#555;text-align:center;padding:20px 0}.tips-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.tip-item{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#aaa;line-height:1.6}.tip-number{width:22px;height:22px;background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;font-size:11px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.reset-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#888;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;margin-top:8px}.reset-btn svg{width:18px;height:18px}.reset-btn:hover{background:#ffffff14;color:#ccc;border-color:#ffffff26}#root{width:100%}