*{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-step3{color:#2d3436;background:#f3f1ef}body.coloz-step3 .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-step3 .free-trial-banner .trial-text{font-weight:500}body.coloz-step3 .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-step3 .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-step3 .btn:hover{opacity:.85}body.coloz-step3 .btn:disabled{opacity:.5;cursor:not-allowed}body.coloz-step3 .btn.btn-accent,body.coloz-step3 .btn.btn-primary{font-weight:600;color:#fff!important;background:linear-gradient(135deg,#ff6b9d 0%,#ff7b54 100%)!important;border:none!important}body.coloz-step3 .btn.btn-gold{font-weight:600;color:#2d3436!important;background:linear-gradient(135deg,#d4af37 0%,#f5d77a 100%)!important;border:none!important}body.coloz-step3 .btn.btn-light{color:#636e72!important;background:#fff!important;border:1px solid #e5e5e5!important}body.coloz-step3 .btn.btn-light:hover{background:#f5f5f5!important}body.coloz-step3 .btn.btn-small{min-width:80px;padding:8px 16px;font-size:12px}body.coloz-step3 .btn.btn-back,body.coloz-step3 .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-step3 .btn-back:hover{background:#f5f5f5!important}body.coloz-step3 .btn-group{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px;display:flex}body.coloz-step3 .page-footer{text-align:center;border-top:1px solid #e5e5e5;margin-top:32px;padding:24px 0 16px}body.coloz-step3 .footer-nav{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px;display:flex}body.coloz-step3 .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-step3 .footer-nav-link:hover{color:#2ecc71}body.coloz-step3 .footer-brand{color:#636e72;margin-top:8px;font-size:13px}body.coloz-step3 .footer-brand .footer-logo{color:#b8956b;font-weight:600}body.coloz-step3 .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-step3 .card{background:#fff;border:1px solid #e5e5e5;border-radius:2px;width:100%;max-width:1000px;padding:40px}body.coloz-step3 .page-header{text-align:center;border-bottom:1px solid #e5e5e5;margin-bottom:16px;padding-bottom:12px}body.coloz-step3 .header-step{color:#b8956b;letter-spacing:2px;font-size:12px;font-weight:600}body.coloz-step3 .bg-bubbles{display:none}body.coloz-step3 .page-title{text-align:center;margin-bottom:20px}body.coloz-step3 .page-title h1{background:linear-gradient(135deg,#2ecc71 0%,#f5a623 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:5px;font-size:24px;font-weight:700}body.coloz-step3 .page-title p{color:#636e72;text-align:center;font-size:12px}body.coloz-step3 .intro-content{text-align:center;max-width:500px;margin:0 auto}body.coloz-step3 .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-step3 .demo-photo{object-fit:cover;object-position:top;width:100%;height:100%}body.coloz-step3 .demo-drape{height:35%;animation:8s ease-in-out infinite drapeColorChange3;position:absolute;bottom:0;left:0;right:0}@keyframes drapeColorChange3{0%,to{background:#2ecc71}25%{background:#f5a623}50%{background:#c4a77d}75%{background:#7dc4a7}}body.coloz-step3 .intro-title{color:#2d3436;text-align:center;margin-bottom:10px;font-size:18px;font-weight:600}body.coloz-step3 .intro-desc{color:#636e72;text-align:center;margin-bottom:24px;font-size:14px;line-height:1.6}body.coloz-step3 .intro-steps{justify-content:center;align-items:center;gap:0;margin-bottom:24px;display:flex}body.coloz-step3 .intro-step{text-align:center;flex-direction:column;align-items:center;padding:0 16px;display:flex}body.coloz-step3 .intro-step-num{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;margin-bottom:8px;font-size:16px;font-weight:600;display:flex}body.coloz-step3 .intro-step-num.pink{background:linear-gradient(135deg,#e8c4d0 0%,#d4a8b8 100%)}body.coloz-step3 .intro-step-num.gold{background:linear-gradient(135deg,#d4c4a8 0%,#c4b498 100%)}body.coloz-step3 .intro-step-num.green{background:linear-gradient(135deg,#b8d4c8 0%,#a8c4b8 100%)}body.coloz-step3 .intro-step-title{color:#c4a77d;font-size:12px;font-weight:600}body.coloz-step3 .step-divider{background:linear-gradient(90deg,#e5e5e5,#c4a77d);flex-shrink:0;width:30px;height:2px;margin-bottom:20px}body.coloz-step3 .test1-content{text-align:center;max-width:700px;margin:0 auto}body.coloz-step3 .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-step3 .guide-tip-title{color:#2ecc71;text-align:center;margin-bottom:12px;font-size:15px;font-weight:600}body.coloz-step3 .guide-tip-list{color:#636e72;text-align:center;font-size:14px;line-height:2}body.coloz-step3 .test1-header{margin-bottom:20px}body.coloz-step3 .test1-header p{color:#636e72;font-size:14px}body.coloz-step3 .palette-counter{justify-content:center;align-items:center;gap:10px;margin-bottom:16px;display:flex}body.coloz-step3 .counter-num{color:#c4a77d;letter-spacing:-1px;font-family:Cormorant Garamond,Georgia,serif;font-size:36px;font-weight:300}body.coloz-step3 .counter-label{color:#636e72;font-size:11px}body.coloz-step3 .palette-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:3px;width:100%;margin-bottom:20px;display:grid}body.coloz-step3 .palette-color{aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;border:2px solid #0000;width:100%;min-width:44px;min-height:44px;transition:transform .15s;position:relative}@media (hover:hover){body.coloz-step3 .palette-color:hover{z-index:10;transform:scale(1.08)}}body.coloz-step3 .palette-color:active{transform:scale(.96)}body.coloz-step3 .palette-color.selected{border-color:#fff;box-shadow:0 0 0 2px #c4a77d}body.coloz-step3 .palette-color .num{color:#2d3436;background:#fffffff2;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:9px;font-weight:600;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body.coloz-step3 .palette-color.selected .num{display:flex}body.coloz-step3 .selected-colors{grid-template-columns:repeat(10,1fr);gap:2px;width:100%;max-width:440px;margin:0 auto 20px;display:grid;overflow:hidden}body.coloz-step3 .selected-color-preview{aspect-ratio:1.6;background:#e5e5e5;border-radius:2px;width:100%}body.coloz-step3 .result1-header{text-align:center;margin-bottom:24px}body.coloz-step3 .result1-header h2{color:#b8956b;margin-bottom:8px;font-size:28px;font-weight:700}body.coloz-step3 .result-badge{color:#b8956b;letter-spacing:2px;margin-bottom:10px;font-size:11px;font-weight:600}body.coloz-step3 .result-palette{grid-template-columns:repeat(10,1fr);gap:2px;width:100%;max-width:440px;margin:0 auto 16px;display:grid;overflow:hidden}body.coloz-step3 .result-color{aspect-ratio:1.6;border-radius:2px;width:100%}body.coloz-step3 .season-box{background:#fafafa;border-radius:12px;margin-bottom:20px;padding:20px}body.coloz-step3 .season-main{text-align:center;margin-bottom:15px}body.coloz-step3 .season-label{color:#636e72;letter-spacing:2px;margin-bottom:5px;font-size:10px}body.coloz-step3 .season-title{color:#b8956b;margin-bottom:5px;font-size:26px;font-weight:300}body.coloz-step3 .season-percent{color:#c4a77d;letter-spacing:-1px;font-family:Cormorant Garamond,Georgia,serif;font-size:48px;font-weight:300}body.coloz-step3 .season-chart{max-width:300px;margin:0 auto}body.coloz-step3 .season-bar{margin-bottom:8px}body.coloz-step3 .season-bar-label{color:#636e72;justify-content:space-between;margin-bottom:3px;font-size:12px;display:flex}body.coloz-step3 .bar-bg{background:#fff;border-radius:3px;height:6px;overflow:hidden}body.coloz-step3 .bar-fill{border-radius:3px;height:100%;transition:width 1s}body.coloz-step3 .bar-fill.spring{background:linear-gradient(90deg,#ffb6c1,gold)}body.coloz-step3 .bar-fill.summer{background:linear-gradient(90deg,#b8a9c9,#9db4d4)}body.coloz-step3 .bar-fill.autumn{background:linear-gradient(90deg,peru,#8b4513)}body.coloz-step3 .bar-fill.winter{background:linear-gradient(90deg,#dc143c,#1a1a1a)}body.coloz-step3 .insight-box{text-align:center;background:#c4a77d0d;border-radius:12px;margin-top:15px;padding:20px}body.coloz-step3 .insight-title{color:#2d3436;margin-bottom:10px;font-size:16px;font-weight:600}body.coloz-step3 .insight-text{color:#636e72;text-align:center;font-size:13px;line-height:1.8}body.coloz-step3 .test2-header{text-align:center;margin-bottom:24px}body.coloz-step3 .test2-header h2{margin-bottom:8px;font-size:20px;font-weight:600}body.coloz-step3 .test2-header p{color:#636e72;font-size:14px}body.coloz-step3 .test2-header .test2-sub{color:#999;margin-top:4px;font-size:12px}body.coloz-step3 .selected-type-display{text-align:center;background:#fafafa;border-radius:12px;margin-bottom:20px;padding:16px}body.coloz-step3 .selected-type-label{color:#636e72;letter-spacing:2px;margin-bottom:5px;font-size:10px}body.coloz-step3 .selected-type-name{color:#b8956b;font-family:Cormorant Garamond,Georgia,serif;font-size:30px;font-weight:300}body.coloz-step3 .type-grid{grid-template-columns:repeat(4,1fr);gap:10px;width:100%;margin-bottom:24px;display:grid}body.coloz-step3 .type-card{cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;background:#fff;border:1px solid #e5e5e5;padding:10px;transition:all .2s}body.coloz-step3 .type-card:active{background:#fafafa}body.coloz-step3 .type-card.selected{background:#fafafa;border-color:#c4a77d}body.coloz-step3 .type-name{color:#b8956b;margin-bottom:1px;font-size:11px;font-weight:500}body.coloz-step3 .type-name-ko{color:#636e72;margin-bottom:6px;font-size:10px}body.coloz-step3 .type-colors{grid-template-columns:repeat(5,1fr);gap:1px;display:grid}body.coloz-step3 .type-color{aspect-ratio:1}body.coloz-step3 .result2-header{text-align:center;margin-bottom:24px}body.coloz-step3 .result2-layout{grid-template-columns:1fr 1fr;gap:20px;max-width:500px;margin-bottom:24px;margin-left:auto;margin-right:auto;display:grid}body.coloz-step3 .result2-box{text-align:center;background:#fafafa;border-radius:12px;padding:15px}body.coloz-step3 .result2-title{color:#b8956b;margin-bottom:3px;font-size:14px;font-weight:300}body.coloz-step3 .result2-subtitle{color:#636e72;margin-bottom:10px;font-size:10px}body.coloz-step3 .result2-colors{grid-template-columns:repeat(5,1fr);gap:3px;display:grid}body.coloz-step3 .result2-color{aspect-ratio:1.4;border-radius:2px;width:100%}body.coloz-step3 .sync-section{text-align:center;background:#fafafa;border-radius:12px;max-width:500px;margin:20px auto;padding:15px}body.coloz-step3 .sync-title{color:#b8956b;margin-bottom:10px;font-size:13px;font-weight:600}body.coloz-step3 .sync-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;min-height:30px;display:flex}body.coloz-step3 .sync-color{border-radius:3px;width:45px;height:30px;box-shadow:0 2px 4px #0000001a}body.coloz-step3 .sync-empty{color:#636e72;font-size:11px}body.coloz-step3 .harmony-box{text-align:center;background:#c4a77d0d;border-radius:12px;max-width:500px;margin:20px auto;padding:25px}body.coloz-step3 .harmony-label{color:#636e72;letter-spacing:2px;margin-bottom:6px;font-size:10px}body.coloz-step3 .harmony-percent{color:#b8956b;letter-spacing:-2px;font-family:Cormorant Garamond,Georgia,serif;font-size:64px;font-weight:300;line-height:1}body.coloz-step3 .harmony-title{color:#c4a77d;margin-top:8px;font-size:16px;font-weight:600}body.coloz-step3 .harmony-desc{color:#636e72;margin-top:10px;font-size:13px;line-height:1.6}body.coloz-step3 .share-prompt{text-align:center;background:#fafafa;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;max-width:500px;margin-bottom:20px;margin-left:auto;margin-right:auto;padding:18px;display:flex}body.coloz-step3 .share-prompt span{font-size:14px}body.coloz-step3 .result-cta-buttons{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:500px;margin:8px auto 24px;display:flex}body.coloz-step3 .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-step3 .btn.cta-next{color:#fff!important;background:linear-gradient(135deg,#ff6b9d 0%,#ff8b6a 100%)!important;border:none!important}body.coloz-step3 .btn.cta-save{color:#2d3436!important;background:linear-gradient(135deg,#d4af37 0%,#f5d77a 100%)!important;border:none!important}body.coloz-step3 .btn.cta-invite{color:#fff!important;background:linear-gradient(135deg,#7dc4a7 0%,#5fb896 100%)!important;border:none!important}body.coloz-step3 .alimtalk-box{background:#fff9e6;border:1px solid #f0e6cc;border-radius:12px;margin:20px 0;padding:20px}body.coloz-step3 .alimtalk-title{color:#333;margin-bottom:10px;font-size:14px;font-weight:700}body.coloz-step3 .alimtalk-row{flex-wrap:wrap;gap:8px;display:flex}body.coloz-step3 .alimtalk-input{border:1px solid #ddd;border-radius:8px;flex:1;min-width:160px;padding:10px 12px;font-family:inherit;font-size:14px}body.coloz-step3 .alimtalk-btn{cursor:pointer;color:#3c1e1e;white-space:nowrap;background:#fee500;border:none;border-radius:8px;min-width:84px;padding:10px 16px;font-family:inherit;font-size:13px;font-weight:600;transition:opacity .2s}body.coloz-step3 .alimtalk-btn:disabled{color:#999;cursor:not-allowed;background:#ccc}body.coloz-step3 .alimtalk-sent-msg{color:#888;margin-top:6px;font-size:11px}.fade-in{animation:.4s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){body.coloz-step3 .card{max-width:600px;padding:30px}body.coloz-step3 .type-grid{grid-template-columns:repeat(2,1fr)}body.coloz-step3 .selected-type-name{font-size:24px}}@media (max-width:500px){body.coloz-step3 .page-container{padding:102px 12px 15px}body.coloz-step3 .card{padding:24px 18px}body.coloz-step3 .page-title h1{font-size:20px}body.coloz-step3 .demo-container{width:180px;height:237px}body.coloz-step3 .palette-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:2px}body.coloz-step3 .palette-color{min-width:42px;min-height:42px}body.coloz-step3 .selected-colors,body.coloz-step3 .result-palette{grid-template-columns:repeat(5,1fr);max-width:100%}body.coloz-step3 .type-name,body.coloz-step3 .type-name-ko{font-size:10px}body.coloz-step3 .result2-layout{grid-template-columns:1fr}body.coloz-step3 .harmony-percent{font-size:48px}body.coloz-step3 .season-title{font-size:20px}body.coloz-step3 .intro-steps{gap:0}body.coloz-step3 .intro-step{padding:0 10px}body.coloz-step3 .step-divider{width:20px}body.coloz-step3 .share-prompt{flex-direction:column;gap:10px}body.coloz-step3 .result-cta-buttons{flex-direction:column;align-items:center}body.coloz-step3 .result-cta-buttons .btn{width:100%;max-width:280px}body.coloz-step3 .guide-tip{max-width:100%;padding:18px}body.coloz-step3 .guide-tip-list{font-size:13px}body.coloz-step3 .result1-header h2{font-size:22px}body.coloz-step3 .alimtalk-row{flex-direction:column}body.coloz-step3 .alimtalk-input{min-width:100%}body.coloz-step3 .alimtalk-btn{width:100%}}
