*{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:11px;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:14px;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:11px;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:1px solid #e5e5e5;border-radius:2px;width:100%;max-width:1000px;padding:40px}body.coloz-step1 .page-header{text-align:center;border-bottom:1px solid #e5e5e5;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:18px;font-weight:600}body.coloz-step1 .intro-desc{color:#636e72;text-align:center;margin-bottom:24px;font-size:14px;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:14px;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:18px;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:14px;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:14px}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 .result-card-wrap{border:none;border-radius:20px;max-width:800px;margin-top:24px;margin-bottom:24px;padding:40px 28px 32px;position:relative}body.coloz-step1 .result-badge-pill{color:#fff;letter-spacing:2px;white-space:nowrap;background:linear-gradient(135deg,#ff6b9d 0%,#ff8b6a 100%);border-radius:20px;padding:8px 24px;font-size:11px;font-weight:700;position:absolute;top:-16px;left:50%;transform:translate(-50%)}body.coloz-step1 .result-type{text-align:center;margin-top:12px;margin-bottom:8px;font-size:28px;font-weight:700}body.coloz-step1 .result-subtitle{text-align:center;margin-bottom:4px;font-size:15px;font-weight:500}body.coloz-step1 .result-comment{text-align:center;margin-bottom:0;padding-top:8px}body.coloz-step1 .result-comment .comment-age{color:#2d3436;margin-bottom:4px;font-size:15px;font-weight:700}body.coloz-step1 .result-comment .comment-text{color:#636e72;font-size:13px;line-height:1.5}body.coloz-step1 .result-selfie-row{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;margin-bottom:8px;display:flex}body.coloz-step1 .result-selfie-item{border-radius:12px;flex-shrink:0;width:180px;height:237px;position:relative;overflow:hidden;box-shadow:0 3px 12px #00000014}body.coloz-step1 .result-selfie-item img{object-fit:cover;object-position:top;width:100%;height:100%}body.coloz-step1 .result-selfie-drape{height:35%;position:absolute;bottom:0;left:0;right:0}body.coloz-step1 .result-selfie-label{color:#2d3436;white-space:nowrap;background:#ffffffeb;border-radius:12px;padding:4px 12px;font-size:11px;font-weight:600;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}body.coloz-step1 .result-wrong-picks{text-align:center;background:#fafafa;border-radius:10px;margin-top:12px;padding:14px 20px}body.coloz-step1 .result-wrong-picks .wrong-title{color:#e17055;margin-bottom:6px;font-size:12px;font-weight:600}body.coloz-step1 .result-wrong-picks .wrong-list{color:#636e72;font-size:13px;line-height:1.6}body.coloz-step1 .result-section{text-align:center;background:#fff;border-radius:12px;margin-top:16px;padding:24px;box-shadow:0 1px 6px #0000000a}body.coloz-step1 .result-section-title{text-align:center;margin-bottom:14px;font-size:14px;font-weight:600}body.coloz-step1 .color-pills{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}body.coloz-step1 .color-pill{background:#fafafa;border-radius:20px;align-items:center;gap:8px;padding:10px 16px;display:flex;box-shadow:0 2px 8px #0000000a}body.coloz-step1 .color-dot{border-radius:50%;width:30px;height:30px}body.coloz-step1 .color-name{font-size:13px;font-weight:500}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-bottom:20px;padding:18px;display:flex}body.coloz-step1 .share-prompt span{font-size:14px}body.coloz-step1 .result-cta-buttons{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:500px;margin:8px auto 24px;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:14px;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}body.coloz-step1 .share-card{background:#fff;width:400px;padding:24px;position:fixed;top:0;left:-9999px}body.coloz-step1 .share-header{text-align:center;margin-bottom:16px}body.coloz-step1 .share-logo{color:#ff6b9d;font-size:24px;font-weight:700}body.coloz-step1 .share-logo-sub{color:#999;font-size:11px}body.coloz-step1 .share-main-box{background:#fafafa;border-radius:12px;margin-bottom:16px;padding:20px}body.coloz-step1 .share-type{text-align:center;margin-bottom:4px;font-size:20px;font-weight:700}body.coloz-step1 .share-subtitle{color:#666;text-align:center;margin-bottom:16px;font-size:12px}body.coloz-step1 .share-colors-wrap{gap:16px;margin-bottom:16px;display:flex}body.coloz-step1 .share-colors-col{text-align:center;flex:1}body.coloz-step1 .share-colors-title{text-align:center;margin-bottom:8px;font-size:11px;font-weight:600}body.coloz-step1 .share-colors-title.worst{color:#e74c3c}body.coloz-step1 .share-colors-title.best{color:#27ae60}body.coloz-step1 .share-color-row{flex-direction:column;align-items:center;gap:6px;display:flex}body.coloz-step1 .share-color-item{align-items:center;gap:8px;display:flex}body.coloz-step1 .share-color-dot{border-radius:50%;width:16px;height:16px}body.coloz-step1 .share-color-name{font-size:11px}body.coloz-step1 .share-insight-box{text-align:center;border-radius:8px;padding:12px}body.coloz-step1 .share-age{margin-bottom:4px;font-size:12px;font-weight:600}body.coloz-step1 .share-insight-text{color:#666;font-size:11px}body.coloz-step1 .share-footer{text-align:center}body.coloz-step1 .share-hashtags{color:#999;margin-bottom:4px;font-size:10px}body.coloz-step1 .share-credit{color:#b8956b;font-size:11px;font-weight:600}body.coloz-step1 .overlay{z-index:2000;opacity:0;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}body.coloz-step1 .overlay.active{opacity:1;pointer-events:auto}body.coloz-step1 .overlay-content{text-align:center;background:#fff;border-radius:16px;max-width:320px;padding:32px}body.coloz-step1 .overlay-title{text-align:center;margin-bottom:12px;font-size:18px;font-weight:700}body.coloz-step1 .overlay-text{color:#636e72;text-align:center;margin-bottom:16px;font-size:14px;line-height:1.6}body.coloz-step1 .overlay-hashtags{color:#999;text-align:center;margin-bottom:20px;font-size:12px}body.coloz-step1 .overlay-close{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b9d,#ff8b6a);border:none;border-radius:25px;padding:12px 32px;font-size:14px;font-weight:600}.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}body.coloz-step1 .result-selfie-row{gap:8px}body.coloz-step1 .result-selfie-item{width:150px;height:198px}}@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-type{font-size:22px}body.coloz-step1 .result-card-wrap{padding:36px 14px 24px}body.coloz-step1 .result-selfie-row{gap:6px}body.coloz-step1 .result-selfie-item{aspect-ratio:.7585;width:calc(33.33% - 6px);height:auto}body.coloz-step1 .result-selfie-label{padding:3px 8px;font-size:10px}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%}}