*{margin:0;padding:0;box-sizing:border-box}body{margin:0;background-color:#0a0a0a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;min-width:320px;min-height:100vh}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0a0a0a;color:#fff;min-height:100vh;display:block}.landing{max-width:480px;margin:0 auto;padding:0 20px 60px}.hero{text-align:center;padding:60px 0 40px}.hero-badge{display:inline-block;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:20px}.hero-title{font-size:36px;font-weight:800;line-height:1.2;margin-bottom:16px;background:linear-gradient(135deg,#fff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:15px;color:#888;line-height:1.6}.form-section{display:flex;flex-direction:column;gap:32px}.error-banner{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:14px 16px;color:#f87171;font-size:14px;text-align:center}.style-form{display:flex;flex-direction:column;gap:24px;background:#141414;border:1px solid #222;border-radius:24px;padding:28px}.form-group{display:flex;flex-direction:column;gap:10px;flex:1}.form-label{font-size:14px;font-weight:600;color:#ccc}.photo-upload{border:2px dashed #333;border-radius:16px;height:220px;cursor:pointer;transition:border-color .2s,background .2s;overflow:hidden;display:flex;align-items:center;justify-content:center}.photo-upload:hover{border-color:#a855f7;background:#a855f70d}.photo-upload.has-photo{border-style:solid;border-color:#a855f7}.photo-upload.dragging{border-color:#a855f7;border-style:solid;background:#a855f71a;transform:scale(1.01)}.photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px}.upload-icon{color:#444}.upload-text{font-size:14px;font-weight:600;color:#666}.upload-subtext{font-size:12px;color:#444}.photo-preview{width:100%;height:100%;object-fit:cover}.photo-change-btn{background:transparent;border:1px solid #333;color:#888;font-size:13px;padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .2s;align-self:flex-start}.photo-change-btn:hover{border-color:#a855f7;color:#a855f7}.form-row{display:flex;gap:16px}.input-wrapper{position:relative;display:flex;align-items:center}.form-input{width:100%;background:#1e1e1e;border:1px solid #2a2a2a;border-radius:12px;color:#fff;font-size:18px;font-weight:600;padding:14px 48px 14px 16px;outline:none;transition:border-color .2s;-moz-appearance:textfield}.form-input::-webkit-inner-spin-button,.form-input::-webkit-outer-spin-button{-webkit-appearance:none}.form-input::placeholder{color:#444;font-weight:400}.form-input:focus{border-color:#a855f7}.input-unit{position:absolute;right:14px;font-size:14px;color:#666;pointer-events:none}.submit-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border-radius:14px;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:all .2s;margin-top:4px}.submit-btn.active{background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff}.submit-btn.active:hover{opacity:.9;transform:translateY(-1px)}.submit-btn.disabled{background:#1e1e1e;color:#444;cursor:not-allowed}.features{display:flex;justify-content:center;gap:32px}.feature-item{display:flex;flex-direction:column;align-items:center;gap:8px}.feature-icon{width:48px;height:48px;border-radius:14px;background:#141414;border:1px solid #222;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#a855f7;letter-spacing:.5px}.feature-item p{font-size:12px;color:#666;text-align:center}.preview-header{text-align:center;padding:40px 0 32px;position:relative}.back-btn{display:flex;align-items:center;gap:4px;background:transparent;border:none;color:#666;font-size:14px;cursor:pointer;padding:0;margin-bottom:20px;transition:color .2s}.back-btn:hover{color:#a855f7;border-color:transparent}.preview-content{display:flex;flex-direction:column;gap:20px;padding-bottom:60px}.preview-photo-wrap{position:relative;border-radius:24px;overflow:hidden;height:320px;border:1px solid #222}.preview-photo{width:100%;height:100%;object-fit:cover}.preview-photo-overlay{position:absolute;bottom:0;left:0;right:0;padding:40px 16px 14px;background:linear-gradient(transparent,#000000b3);font-size:13px;font-weight:600;color:#ffffffb3}.preview-stats{display:flex;align-items:center;background:#141414;border:1px solid #222;border-radius:20px;padding:20px}.stat-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}.stat-label{font-size:11px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:28px;font-weight:800;color:#fff;line-height:1}.stat-unit{font-size:12px;color:#888}.stat-divider{width:1px;height:40px;background:#2a2a2a}.preview-notice{text-align:center;font-size:14px;color:#666;line-height:1.6}.loading-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px;text-align:center}.loading-spinner{width:56px;height:56px;border:3px solid #222;border-top-color:#a855f7;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-title{font-size:22px;font-weight:700;background:linear-gradient(135deg,#fff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.loading-subtitle{font-size:14px;color:#666;line-height:1.6}.loading-steps{display:flex;align-items:center;gap:10px;font-size:12px;color:#444;margin-top:8px}.loading-steps span:nth-child(odd){color:#a855f7;font-weight:600}.result-header{text-align:center;padding:50px 0 32px}.result-content{display:flex;flex-direction:column;gap:16px;padding-bottom:60px}.result-card{background:#141414;border:1px solid #222;border-radius:20px;padding:22px}.body-type-card{text-align:center;background:linear-gradient(135deg,#a855f71f,#ec489914);border-color:#a855f74d}.body-type-badge{display:inline-block;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-size:18px;font-weight:800;padding:8px 24px;border-radius:100px;margin-bottom:14px}.body-type-desc{font-size:14px;color:#aaa;line-height:1.7}.card-title{font-size:13px;font-weight:700;color:#a855f7;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}.card-text{font-size:14px;color:#ccc;line-height:1.7}.tag-list{display:flex;flex-wrap:wrap;gap:8px}.tag{font-size:13px;font-weight:500;padding:6px 12px;border-radius:100px}.tag-purple{background:#a855f726;color:#c084fc;border:1px solid rgba(168,85,247,.25)}.tag-red{background:#ef44441a;color:#f87171;border:1px solid rgba(239,68,68,.2)}.tip-list{list-style:none;display:flex;flex-direction:column;gap:10px}.tip-list li{font-size:14px;color:#ccc;line-height:1.5;padding-left:16px;position:relative}.tip-list li:before{content:"•";position:absolute;left:0;color:#a855f7}.color-list{display:flex;flex-wrap:wrap;gap:12px}.color-item{display:flex;flex-direction:column;align-items:center;gap:6px}.color-swatch{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.08)}.color-item span{font-size:11px;color:#888}.items-grid{display:flex;flex-direction:column;gap:14px}.item-category{display:inline-block;font-size:11px;font-weight:700;color:#a855f7;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.item-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px}.item-list li{font-size:13px;color:#ccc;background:#1e1e1e;padding:4px 10px;border-radius:6px;border:1px solid #2a2a2a}.avoid-card{border-color:#ef444426}.reset-btn{margin-top:8px}.report-card{line-height:1.7}.md-h2{font-size:16px;font-weight:700;color:#a855f7;margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid #2a2a2a}.md-h2:first-child{margin-top:0}.md-h3{font-size:14px;font-weight:700;color:#ccc;margin:14px 0 6px}.md-p{font-size:14px;color:#bbb;margin:4px 0}.md-li{font-size:14px;color:#bbb;margin:5px 0;padding-left:14px;list-style:none;position:relative}.md-li:before{content:"•";position:absolute;left:0;color:#a855f7}.md-hr{border:none;border-top:1px solid #2a2a2a;margin:16px 0}.md-spacer{height:6px}.report-card strong{color:#e2e8f0;font-weight:600}.hair-section{background:#141414;border:1px solid #222;border-radius:20px;padding:28px 22px;display:flex;flex-direction:column;gap:20px}.hair-section-header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.hair-section-title{font-size:22px;font-weight:800;line-height:1.3;background:linear-gradient(135deg,#fff,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hair-section-desc{font-size:13px;color:#666;line-height:1.6}.hair-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 0;text-align:center}.hair-loading p{font-size:14px;color:#888;line-height:1.7}.hair-loading p span{font-size:12px;color:#555}.hair-result{display:flex;flex-direction:column;gap:16px}.hair-grid-image{width:100%;border-radius:14px;border:1px solid #2a2a2a;display:block}