@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap";
*{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-step4{color:#2d3436;background:#f3f1ef}body.coloz-step4 .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-step4 .free-trial-banner .trial-text{font-weight:500}body.coloz-step4 .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-step4 .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-step4 .btn:hover{opacity:.85}body.coloz-step4 .btn:disabled{opacity:.5;cursor:not-allowed}body.coloz-step4 .btn.btn-accent{font-weight:600;color:#fff!important;background:linear-gradient(135deg,#ff6b9d 0%,#ff7b54 100%)!important;border:none!important}body.coloz-step4 .btn.btn-small{min-width:80px;padding:8px 16px;font-size:12px}body.coloz-step4 .btn-group{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px;display:flex}body.coloz-step4 .bg-bubbles{display:none}body.coloz-step4 .page-footer{text-align:center;border-top:1px solid #e5e5e5;margin-top:32px;padding:24px 0 16px}body.coloz-step4 .footer-nav{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px;display:flex}body.coloz-step4 .footer-nav-link{color:#636e72;background:#fff;border:none;border-radius:20px;padding:8px 14px;font-size:11px;font-weight:500;text-decoration:none}body.coloz-step4 .footer-nav-link:hover{color:#5cd3b7}body.coloz-step4 .footer-brand{color:#636e72;margin-top:8px;font-size:13px}body.coloz-step4 .footer-brand .footer-logo{color:#b8956b;font-weight:600}body.coloz-step4 .page-container{justify-content:center;align-items:flex-start;min-height:100vh;padding:104px 20px 40px;display:flex}body.coloz-step4 .card{background:#fff;border:1px solid #e5e5e5;border-radius:2px;width:100%;max-width:1000px;padding:40px}body.coloz-step4 .page-header{text-align:center;border-bottom:1px solid #e5e5e5;margin-bottom:16px;padding-bottom:12px}body.coloz-step4 .header-step{color:#b8956b;letter-spacing:2px;font-size:12px;font-weight:600}body.coloz-step4 .page-title{text-align:center;margin-bottom:20px}body.coloz-step4 .page-title h1{background:linear-gradient(135deg,#5cd3b7 0%,#c4a77d 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:5px;font-size:24px;font-weight:700}body.coloz-step4 .page-title p{color:#636e72;text-align:center;font-size:12px}body.coloz-step4 .intro-content{text-align:center;max-width:500px;margin:0 auto}body.coloz-step4 .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-step4 .demo-photo{object-fit:cover;object-position:top;width:100%;height:100%}body.coloz-step4 .demo-drape{height:35%;animation:8s ease-in-out infinite drapeColorChange4;position:absolute;bottom:0;left:0;right:0}@keyframes drapeColorChange4{0%,to{background:#5cd3b7}25%{background:#c4a77d}50%{background:#88b8a8}75%{background:#d4af37}}body.coloz-step4 .intro-title{text-align:center;margin-bottom:10px;font-size:18px;font-weight:600}body.coloz-step4 .intro-desc{color:#636e72;text-align:center;margin-bottom:24px;font-size:14px;line-height:1.6}body.coloz-step4 .cta-box{text-align:center;background:#5cd3b70d;border-radius:12px;margin-bottom:24px;padding:20px}body.coloz-step4 .cta-box-title{color:#5cd3b7;margin-bottom:8px;font-size:14px;font-weight:600}body.coloz-step4 .cta-box-desc{color:#636e72;margin-bottom:12px;font-size:13px;line-height:1.6}body.coloz-step4 .styling-header{text-align:center;margin-bottom:20px}body.coloz-step4 .styling-type{color:#b8956b;margin-bottom:4px;font-size:20px;font-weight:600}body.coloz-step4 .styling-tip{color:#636e72;font-size:13px;font-style:italic}body.coloz-step4 .styling-main{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;display:grid}body.coloz-step4 .upload-area{aspect-ratio:3/4;cursor:pointer;background:#fafafa;border:2px dashed #ddd;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:24px;display:flex}body.coloz-step4 .upload-area:hover{background:#f5f5f5;border-color:#5cd3b7}body.coloz-step4 .upload-guide{text-align:center;width:100%}body.coloz-step4 .upload-guide-label{color:#5cd3b7;letter-spacing:1px;margin-bottom:6px;font-size:10px;font-weight:600}body.coloz-step4 .upload-guide-title{text-align:center;margin-bottom:16px;font-size:15px;font-weight:600}body.coloz-step4 .upload-guide-list{color:#636e72;text-align:center;font-size:11px;line-height:2.2}body.coloz-step4 .upload-guide-list strong{color:#2d3436}body.coloz-step4 .upload-guide-cta{text-align:center;color:#5cd3b7;margin-top:16px;font-size:12px;font-weight:600}body.coloz-step4 .photo-container{aspect-ratio:3/4;background:#f5f5f5;border-radius:8px;width:100%;position:relative;overflow:hidden}body.coloz-step4 .photo-container img{object-fit:cover;width:100%;height:100%}body.coloz-step4 .bar-top{opacity:1;cursor:ns-resize;position:absolute;left:0;right:0}body.coloz-step4 .bar-top:hover:after,body.coloz-step4 .bar-bottom:hover:after{content:"드래그해서 크기나 위치 조절하세요";color:#fff;white-space:nowrap;pointer-events:none;z-index:5;background:#0009;border-radius:4px;padding:4px 10px;font-size:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body.coloz-step4 .bar-point{opacity:1;pointer-events:none;height:20px;position:absolute;left:0;right:0}body.coloz-step4 .bar-bottom{opacity:1;position:absolute;bottom:0;left:0;right:0}body.coloz-step4 .bar-handle{cursor:ns-resize;z-index:2;height:8px;position:absolute;left:0;right:0}body.coloz-step4 .bar-handle.handle-top{top:-4px}body.coloz-step4 .bar-handle.handle-bottom{bottom:-4px}body.coloz-step4 .colorbar-toggle{z-index:10;cursor:pointer;border:1px solid #ffffff80;border-radius:12px;padding:4px 10px;font-size:10px;font-weight:600;position:absolute;top:8px;right:8px}body.coloz-step4 .colorbar-toggle.on{color:#2d3436;background:#ffffffd9}body.coloz-step4 .colorbar-toggle.off{color:#fff;background:#00000059;border-color:#0000}body.coloz-step4 .photo-buttons{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}body.coloz-step4 .photo-btn{cursor:pointer;text-align:center;white-space:nowrap;-webkit-tap-highlight-color:transparent;background:#fff;border:1px solid #e5e5e5;border-radius:8px;flex:1;min-width:0;padding:10px 4px;font-size:11px;font-weight:600}body.coloz-step4 .photo-btn:hover{border-color:#ccc}body.coloz-step4 .photo-btn .btn-icon{margin-right:2px}body.coloz-step4 .photo-btn.save-text{color:#ff6b9d}body.coloz-step4 .photo-btn.analyze-text{color:#f59e0b}body.coloz-step4 .photo-btn.change-text{color:#636e72}body.coloz-step4 .photo-btn.analysis-save-text{color:#5cd3b7}body.coloz-step4 .analysis-overlay{color:#fff;text-align:center;pointer-events:none;background:#0000008c;padding:10px 12px;position:absolute;bottom:0;left:0;right:0}body.coloz-step4 .analysis-overlay-label{letter-spacing:1px;opacity:.8;margin-bottom:2px;font-size:9px}body.coloz-step4 .analysis-overlay-type{font-size:14px;font-weight:600}body.coloz-step4 .b4-card{background:#fff;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:24px;width:945px;height:1334px;padding:40px;font-family:Pretendard,sans-serif;display:grid;position:fixed;top:0;left:-9999px}body.coloz-step4 .b4-section{border:1px solid #e5e5e5;border-radius:12px;flex-direction:column;align-items:center;padding:24px;display:flex}body.coloz-step4 .b4-section-title{color:#b8956b;letter-spacing:2px;margin-bottom:8px;font-size:11px;font-weight:600}body.coloz-step4 .b4-section-name{color:#2d3436;margin-bottom:16px;font-size:20px;font-weight:700}body.coloz-step4 .b4-color-grid{grid-template-columns:repeat(5,60px);justify-content:center;gap:6px;display:grid}body.coloz-step4 .b4-color-item{border-radius:6px;width:60px;height:60px}body.coloz-step4 .b4-palette-grid{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}body.coloz-step4 .b4-palette-bar{border-radius:6px;flex-direction:column;width:70px;height:120px;display:flex;overflow:hidden;box-shadow:0 1px 4px #0000001a}body.coloz-step4 .b4-palette-bar .c-top{flex:3}body.coloz-step4 .b4-palette-bar .c-mid{flex:.5}body.coloz-step4 .b4-palette-bar .c-bot{flex:5}body.coloz-step4 .b4-photo{object-fit:cover;border-radius:8px;width:180px;height:240px;margin-bottom:12px}body.coloz-step4 .b4-analysis-colors{justify-content:center;gap:10px;margin-bottom:12px;display:flex}body.coloz-step4 .b4-analysis-dot{border-radius:8px;width:50px;height:50px}body.coloz-step4 .b4-analysis-type{color:#b8956b;font-size:16px;font-weight:600}body.coloz-step4 .b4-header{text-align:center;border:none;flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;padding:0;display:flex}body.coloz-step4 .b4-header-brand{color:#999;letter-spacing:3px;margin-bottom:4px;font-size:10px}body.coloz-step4 .b4-header-title{color:#b8956b;font-size:28px;font-weight:700}body.coloz-step4 .b4-footer{text-align:center;color:#999;border:none;grid-column:1/-1;padding:0;font-size:10px}body.coloz-step4 .styling-center{flex-direction:column;gap:12px;display:flex}body.coloz-step4 .analysis-panel{background:#fafafa;border-radius:12px;min-height:180px;padding:16px}body.coloz-step4 .analysis-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}body.coloz-step4 .analysis-title{color:#b8956b;font-size:13px;font-weight:600}body.coloz-step4 .analysis-subtitle{color:#999;font-size:10px}body.coloz-step4 .analysis-download{cursor:pointer;color:#636e72;background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:3px 8px;font-size:10px}body.coloz-step4 .analysis-empty{text-align:center;color:#ccc;padding:30px 0;font-size:12px}body.coloz-step4 .analysis-colors{justify-content:center;gap:10px;margin-bottom:12px;display:flex}body.coloz-step4 .analysis-color-item{text-align:center}body.coloz-step4 .analysis-color-dot{border-radius:6px;width:40px;height:40px;margin:0 auto 4px;box-shadow:0 1px 4px #0000001a}body.coloz-step4 .analysis-color-label{color:#636e72;font-size:9px}body.coloz-step4 .analysis-color-percent{color:#999;font-size:9px}body.coloz-step4 .analysis-type{text-align:center;background:#c4a77d14;border-radius:8px;margin-top:8px;padding:10px}body.coloz-step4 .analysis-type-label{color:#b8956b;letter-spacing:1px;font-size:9px}body.coloz-step4 .analysis-type-name{color:#b8956b;font-size:15px;font-weight:600}body.coloz-step4 .color-panels-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}body.coloz-step4 .color-panel{background:#fafafa;border-radius:10px;padding:12px}body.coloz-step4 .color-panel-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}body.coloz-step4 .color-panel-title{color:#b8956b;font-size:13px;font-weight:600}body.coloz-step4 .color-panel-subtitle{color:#999;font-size:10px}body.coloz-step4 .type-select{background:#fff;border:1px solid #e5e5e5;border-radius:4px;max-width:100px;padding:4px 8px;font-size:10px}body.coloz-step4 .color-panel-grid{grid-template-columns:repeat(5,1fr);gap:3px;display:grid}body.coloz-step4 .color-panel-item{aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;border:2px solid #0000;border-radius:3px;width:100%}@media (hover:hover){body.coloz-step4 .color-panel-item:hover{transform:scale(1.1)}}body.coloz-step4 .panel{background:#fafafa;border-radius:10px;padding:12px}body.coloz-step4 .panel-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-bottom:10px;display:flex}body.coloz-step4 .panel-title{color:#b8956b;font-size:13px;font-weight:600}body.coloz-step4 .target-buttons{flex-wrap:wrap;gap:4px;display:flex}body.coloz-step4 .target-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:4px 10px;font-size:10px}body.coloz-step4 .target-btn.active{color:#fff;background:linear-gradient(135deg,#b8956b,#d4af37);border:none}body.coloz-step4 .panel-grid{grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:3px;display:grid}body.coloz-step4 .panel-item{aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:2px;width:100%}@media (hover:hover){body.coloz-step4 .panel-item:hover{z-index:1;transform:scale(1.15)}}body.coloz-step4 .recommend-col{margin-top:12px}body.coloz-step4 .recommend-title{color:#b8956b;margin-bottom:2px;font-size:13px;font-weight:600}body.coloz-step4 .recommend-desc{color:#999;margin-bottom:8px;font-size:9px}body.coloz-step4 .recommend-empty{color:#ccc;text-align:center;padding:12px 0;font-size:11px}body.coloz-step4 .recommend-grid{gap:6px;display:flex}body.coloz-step4 .recommend-item{cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;flex:1;min-width:0;transition:transform .2s}body.coloz-step4 .recommend-item:hover{transform:scale(1.03)}body.coloz-step4 .recommend-item.selected .recommend-bar{box-shadow:0 0 0 3px #ccc}body.coloz-step4 .recommend-label{color:#999;margin-bottom:2px;font-size:9px}body.coloz-step4 .recommend-bar{aspect-ratio:3/5;border-radius:6px;flex-direction:column;width:100%;display:flex;overflow:hidden;box-shadow:0 1px 4px #00000014}body.coloz-step4 .recommend-bar .color-top{flex:3}body.coloz-step4 .recommend-bar .color-mid{flex:.5}body.coloz-step4 .recommend-bar .color-bot{flex:5}body.coloz-step4 .saved-section{background:#fafafa;border-radius:12px;margin-bottom:24px;padding:16px}body.coloz-step4 .saved-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}body.coloz-step4 .saved-title{color:#b8956b;font-size:13px;font-weight:600}body.coloz-step4 .saved-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}body.coloz-step4 .saved-item{text-align:center}body.coloz-step4 .saved-label{color:#999;margin-bottom:3px;font-size:9px}body.coloz-step4 .saved-box{aspect-ratio:3/4;background:#e5e5e5;border-radius:4px;width:100%;position:relative;overflow:hidden}body.coloz-step4 .saved-box img{object-fit:cover;width:100%;height:100%}body.coloz-step4 .saved-actions{gap:2px;display:flex;position:absolute;top:2px;right:2px}body.coloz-step4 .saved-action-btn{color:#fff;cursor:pointer;background:#00000073;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:9px;display:flex}body.coloz-step4 .result-cta-buttons{flex-wrap:wrap;justify-content:center;gap:12px;max-width:500px;margin:8px auto 24px;display:flex}body.coloz-step4 .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-step4 .btn.cta-next{color:#fff!important;background:linear-gradient(135deg,#ff6b9d 0%,#ff8b6a 100%)!important;border:none!important}body.coloz-step4 .btn.cta-save{color:#2d3436!important;background:linear-gradient(135deg,#d4af37 0%,#f5d77a 100%)!important;border:none!important}body.coloz-step4 .btn.cta-invite{color:#fff!important;background:linear-gradient(135deg,#7dc4a7 0%,#5fb896 100%)!important;border:none!important}body.coloz-step4 .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-step4 .share-prompt span{font-size:14px}body.coloz-step4 .alimtalk-box{background:#fff9e6;border:1px solid #f0e6cc;border-radius:12px;margin:20px 0;padding:20px}body.coloz-step4 .alimtalk-title{color:#333;margin-bottom:10px;font-size:14px;font-weight:700}body.coloz-step4 .alimtalk-row{flex-wrap:wrap;gap:8px;display:flex}body.coloz-step4 .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-step4 .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-step4 .alimtalk-btn:disabled{color:#999;cursor:not-allowed;background:#ccc}body.coloz-step4 .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:950px){body.coloz-step4 .styling-main{grid-template-columns:1fr}body.coloz-step4 .color-panels-row{grid-template-columns:1fr 1fr}}@media (max-width:768px){body.coloz-step4 .card{padding:30px}body.coloz-step4 .color-panel-grid{grid-template-columns:repeat(5,1fr);gap:2px}body.coloz-step4 .panel-grid{grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:2px}body.coloz-step4 .panel-item{min-height:32px}body.coloz-step4 .saved-grid{grid-template-columns:repeat(5,1fr);gap:4px}}@media (max-width:600px){body.coloz-step4 .page-container{padding:102px 12px 15px}body.coloz-step4 .card{padding:20px 14px}body.coloz-step4 .result-cta-buttons{flex-direction:column;align-items:center}body.coloz-step4 .result-cta-buttons .btn{width:100%;max-width:280px}body.coloz-step4 .share-prompt{flex-direction:column;gap:10px}body.coloz-step4 .color-panels-row{grid-template-columns:1fr}body.coloz-step4 .color-panel-grid{grid-template-columns:repeat(5,1fr);gap:3px}body.coloz-step4 .color-panel-item{min-height:40px}body.coloz-step4 .panel-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px}body.coloz-step4 .panel-item{min-height:40px}body.coloz-step4 .saved-grid{grid-template-columns:repeat(5,1fr);gap:4px}body.coloz-step4 .photo-buttons{grid-template-columns:1fr 1fr;gap:6px;display:grid}body.coloz-step4 .photo-btn{padding:10px 6px;font-size:11px}body.coloz-step4 .alimtalk-row{flex-direction:column}body.coloz-step4 .alimtalk-input{min-width:100%}body.coloz-step4 .alimtalk-btn{width:100%}body.coloz-step4 .type-select{max-width:80px;font-size:9px}body.coloz-step4 .target-buttons{gap:3px}body.coloz-step4 .target-btn{padding:4px 8px;font-size:10px}body.coloz-step4 .styling-type{font-size:16px}body.coloz-step4 .styling-tip{font-size:12px}body.coloz-step4 .upload-guide-list{font-size:10px;line-height:2}body.coloz-step4 .upload-guide-title{font-size:13px}}@media (max-width:400px){body.coloz-step4 .saved-grid{grid-template-columns:repeat(4,1fr)}body.coloz-step4 .recommend-grid{gap:4px}body.coloz-step4 .recommend-label{font-size:8px}}