*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;font-family:Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;overflow-x:hidden}body.coloz-step1{color:#2d3436;background:#f3f1ef}body.coloz-step1 .free-trial-banner{z-index:999;color:#fff;background:linear-gradient(90deg,#aa9b55 0%,#7dc4a7 100%);justify-content:center;align-items:center;gap:10px;height:38px;padding:8px 15px;font-size:12px;display:flex;position:fixed;top:46px;left:0;right:0}body.coloz-step1 .free-trial-banner .trial-text{font-weight:500}body.coloz-step1 .free-trial-banner .trial-link{color:#fff;background:#ffffff40;border-radius:15px;padding:4px 12px;font-size:12px;font-weight:600;text-decoration:none}body.coloz-step1 .btn{cursor:pointer;color:#2d3436;background:#fff;border:1px solid #2d3436;border-radius:30px;min-width:120px;padding:12px 28px;font-family:inherit;font-size:15px;font-weight:500;transition:all .2s}body.coloz-step1 .btn:hover{opacity:.85}body.coloz-step1 .btn:disabled{opacity:.5;cursor:not-allowed}body.coloz-step1 .btn.btn-accent,body.coloz-step1 .btn.btn-primary{font-weight:600;color:#fff!important;background:linear-gradient(135deg,#ff6b9d 0%,#ff7b54 100%)!important;border:none!important}body.coloz-step1 .btn.btn-gold{font-weight:600;color:#2d3436!important;background:linear-gradient(135deg,#d4af37 0%,#f5d77a 100%)!important;border:none!important}body.coloz-step1 .btn.btn-yellow{font-weight:500;color:#2d3436!important;background:linear-gradient(135deg,gold 0%,#fff176 100%)!important;border:none!important}body.coloz-step1 .btn.btn-expert{font-weight:600;color:#fff!important;background:linear-gradient(135deg,#b8956b 0%,#d4af37 100%)!important;border:none!important}body.coloz-step1 .btn.btn-light{color:#636e72!important;background:#fff!important;border:1px solid #e5e5e5!important}body.coloz-step1 .btn.btn-light:hover{background:#f5f5f5!important}body.coloz-step1 .btn.btn-small{min-width:80px;padding:8px 16px;font-size:12px}body.coloz-step1 .btn.btn-back,body.coloz-step1 .btn-back{cursor:pointer;border-radius:25px;padding:10px 20px;font-size:13px;color:#636e72!important;background:#fff!important;border:1px solid #e5e5e5!important}body.coloz-step1 .btn-back:hover{background:#f5f5f5!important}body.coloz-step1 .btn-group{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px;display:flex}body.coloz-step1 .page-footer{text-align:center;border-top:1px solid #e5e5e5;margin-top:32px;padding:24px 0 16px}body.coloz-step1 .footer-nav{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px;display:flex}body.coloz-step1 .footer-nav-link{color:#636e72;background:#fff;border:none;border-radius:20px;padding:8px 14px;font-size:12px;font-weight:500;text-decoration:none;transition:all .2s}body.coloz-step1 .footer-nav-link:hover{color:#b8956b}body.coloz-step1 .footer-brand{color:#636e72;margin-top:8px;font-size:13px}body.coloz-step1 .footer-brand .footer-logo{color:#b8956b;font-weight:600}body.coloz-step1 .page-container{z-index:1;justify-content:center;align-items:flex-start;min-height:100vh;padding:104px 20px 40px;display:flex;position:relative}body.coloz-step1 .card{background:#fff;border-radius:16px;width:100%;max-width:1000px;padding:10px 40px 40px}body.coloz-step1 .page-header{text-align:center;margin-bottom:16px;padding-bottom:12px}body.coloz-step1 .header-step{color:#b8956b;letter-spacing:2px;font-size:12px;font-weight:600}body.coloz-step1 .bg-bubbles{display:none}body.coloz-step1 .page-title{text-align:center;margin-bottom:20px}body.coloz-step1 .page-title h1{background:linear-gradient(135deg,#ff6b9d 0%,#ff7b54 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:5px;font-size:24px;font-weight:700}body.coloz-step1 .page-title p{color:#636e72;text-align:center;font-size:12px}body.coloz-step1 .intro-content{text-align:center}body.coloz-step1 .demo-container{border-radius:12px;width:200px;height:264px;margin:0 auto 24px;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000001a}body.coloz-step1 .demo-photo{object-fit:cover;object-position:top;width:100%;height:100%}body.coloz-step1 .demo-drape{height:35%;animation:8s ease-in-out infinite drapeColorChange1;position:absolute;bottom:0;left:0;right:0}@keyframes drapeColorChange1{0%,to{background:#d4a8b8}25%{background:#b8a0c0}50%{background:#a08878}75%{background:#404040}}body.coloz-step1 .intro-title{color:#2d3436;text-align:center;margin-bottom:10px;font-size:20px;font-weight:600}body.coloz-step1 .intro-desc{color:#636e72;text-align:center;margin-bottom:24px;font-size:15px;line-height:1.6}body.coloz-step1 .intro-features{justify-content:center;gap:20px;margin-bottom:24px;display:flex}body.coloz-step1 .feature{color:#636e72;background:#fafafa;border-radius:20px;padding:8px 16px;font-size:13px}body.coloz-step1 .guide-content{text-align:center;max-width:500px;margin:0 auto}body.coloz-step1 .guide-tip{text-align:center;background:#fafafa;border-radius:12px;max-width:500px;margin-bottom:24px;margin-left:auto;margin-right:auto;padding:24px}body.coloz-step1 .guide-tip-title{color:#ff8b6a;text-align:center;margin-bottom:12px;font-size:15px;font-weight:600}body.coloz-step1 .guide-tip-list{color:#636e72;text-align:center;font-size:15px;line-height:2}body.coloz-step1 .upload-area{cursor:pointer;text-align:center;border:2px dashed #e5e5e5;border-radius:12px;max-width:500px;margin-bottom:24px;margin-left:auto;margin-right:auto;padding:50px;transition:all .3s}body.coloz-step1 .upload-area:hover{background:#ff6b9d08;border-color:#fa9ebd}body.coloz-step1 .upload-icon{margin-bottom:12px;font-size:48px}body.coloz-step1 .upload-text{text-align:center;margin-bottom:8px;font-size:16px;font-weight:500}body.coloz-step1 .upload-hint{color:#636e72;text-align:center;font-size:13px}body.coloz-step1 .nav-buttons{justify-content:center;gap:10px;display:flex}body.coloz-step1 .confirm-content{text-align:center;max-width:500px;margin:0 auto}body.coloz-step1 .confirm-photo-container{border-radius:12px;width:200px;height:264px;margin:0 auto 24px;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000001a}body.coloz-step1 .confirm-photo{object-fit:cover;object-position:top;width:100%;height:100%}body.coloz-step1 .confirm-text{color:#636e72;text-align:center;margin-bottom:24px;font-size:15px}body.coloz-step1 .confirm-buttons{justify-content:center;gap:12px;display:flex}body.coloz-step1 .compare-area{max-width:500px;margin:0 auto;padding:10px 0}body.coloz-step1 .test-header{text-align:center;margin-bottom:20px}body.coloz-step1 .test-step{color:#ff6b9d;letter-spacing:1px;text-align:center;margin-bottom:10px;font-size:12px;font-weight:600}body.coloz-step1 .test-question{text-align:center;font-size:20px;font-weight:600;line-height:1.4}body.coloz-step1 .test-progress-bar{background:#eee;border-radius:3px;width:100%;height:6px;margin-bottom:24px;overflow:hidden}body.coloz-step1 .test-progress-fill{background:linear-gradient(90deg,#ff6b9d,#ff8b6a);border-radius:3px;height:100%;transition:width .4s}body.coloz-step1 .compare-cards{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;display:grid}body.coloz-step1 .compare-card{cursor:pointer;background:#fff;border-radius:16px;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000001a}body.coloz-step1 .compare-card:hover{transform:scale(1.02)}body.coloz-step1 .compare-card.selected{transform:scale(1.03);box-shadow:0 0 0 3px #ff6b9d}body.coloz-step1 .compare-selfie{aspect-ratio:3/4;object-fit:cover;object-position:top;width:100%;display:block}body.coloz-step1 .compare-drape{pointer-events:none;transition:height .3s;position:absolute;bottom:0;left:0;right:0}body.coloz-step1 .compare-label{background:#fffffff2;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}body.coloz-step1 .compare-badge{color:#fff;opacity:0;background:#ff6b9d;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:15px;transition:all .3s;display:flex;position:absolute;top:12px;right:12px;transform:scale(.5)}body.coloz-step1 .compare-card.selected .compare-badge{opacity:1;transform:scale(1)}body.coloz-step1 .drape-control{background:#fafafa;border-radius:12px;justify-content:center;align-items:center;gap:14px;margin-bottom:20px;padding:14px 20px;display:flex}body.coloz-step1 .drape-control-label{color:#636e72;font-size:13px}body.coloz-step1 .drape-slider{appearance:none;background:#ddd;border-radius:3px;outline:none;width:140px;height:6px}body.coloz-step1 .drape-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(135deg,#ff6b9d,#ff8b6a);border-radius:50%;width:22px;height:22px}body.coloz-step1 .skip-btn{text-align:center}body.coloz-step1 .skip-link{color:#999;cursor:pointer;background:0 0;border:none;padding:10px 20px;font-size:15px}body.coloz-step1 .skip-link:hover{color:#666}body.coloz-step1 .test-nav{justify-content:space-between;align-items:center;margin-top:10px;display:flex}body.coloz-step1 .result-content{text-align:center;max-width:800px;margin:0 auto;padding:0}body.coloz-step1 .share-prompt{text-align:center;background:#fafafa;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:20px 0;padding:18px;display:flex}body.coloz-step1 .share-prompt span{font-size:15px}body.coloz-step1 .result-cta-buttons{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:500px;margin:8px auto 12px;display:flex}body.coloz-step1 .result-cta-buttons .btn{text-align:center;flex:1;min-width:140px;max-width:220px;padding:14px 20px;font-size:15px;font-weight:600}body.coloz-step1 .btn.cta-next{color:#fff!important;background:linear-gradient(135deg,#ff6b9d 0%,#ff8b6a 100%)!important;border:none!important}body.coloz-step1 .btn.cta-save{color:#2d3436!important;background:linear-gradient(135deg,#d4af37 0%,#f5d77a 100%)!important;border:none!important}body.coloz-step1 .btn.cta-invite{color:#fff!important;background:linear-gradient(135deg,#7dc4a7 0%,#5fb896 100%)!important;border:none!important}.fade-in{animation:.4s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:.3s slideIn}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (max-width:768px){body.coloz-step1 .card{max-width:600px;padding:30px}}@media (max-width:500px){body.coloz-step1 .page-container{padding:102px 12px 15px}body.coloz-step1 .card{padding:24px 18px}body.coloz-step1 .page-title h1{font-size:20px}body.coloz-step1 .demo-container{width:180px;height:237px}body.coloz-step1 .compare-cards{gap:12px}body.coloz-step1 .intro-features{flex-wrap:wrap;gap:10px}body.coloz-step1 .feature{padding:6px 12px;font-size:12px}body.coloz-step1 .result-cta-buttons{flex-direction:column;align-items:center}body.coloz-step1 .result-cta-buttons .btn{width:100%;max-width:280px}body.coloz-step1 .share-prompt{flex-direction:column;gap:10px}body.coloz-step1 .guide-tip,body.coloz-step1 .upload-area,body.coloz-step1 .confirm-content,body.coloz-step1 .compare-area{max-width:100%}}