@charset "utf-8";

@font-face {
    font-family: 'Rimowa Grotesk';
    src: url('../fonts/RimowaGrotesk-Light.woff2') format('woff2'),
    url('../fonts/RimowaGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0041-005A, U+0061-007A ,U+0030-0039; /* Only English */
}

@font-face {
    font-family: 'SourceHanSansKR';
    src: url('../fonts/SourceHanSansKR-Normal-Alphabetic.woff2') format('woff2'),
    url('../fonts/SourceHanSansKR-Normal-Alphabetic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}


:root{
    --window-width: 800px;
    --closeHeight:11.4rem;
    --openHeight:87.5rem;
}
html {font-size: 10px;}
html,body{width: 100%;height: 100%;/*overscroll-behavior: none;*/font-family: Rimowa Grotesk, SourceHanSansKR,sans-serif;}
.wrapper{width: 100%;height: 100%;overflow: auto;max-width:var(--window-width);background-color:#F6F5F3;margin: 0  auto;scrollbar-width: none;}
.wrapper::-webkit-scrollbar {display: none; /* Chrome, Safari */}

.title-box{}
.title-box .logo{width: 100%;height: 20rem;display: flex;justify-content: center;align-items: center;}
.title-box .logo > img{width: 8.8rem;height:auto;aspect-ratio: 88 / 97;display: block;}
.title-box .title{font-weight: 500;font-size: 5.4rem;line-height: 1.2;letter-spacing: -0.05em;text-align: center;}

.product-img{width: 100%;}
.product-img > img{width: 100%;display: block;}

.schedule{display: flex;flex-direction: column;row-gap: 7rem;padding:7rem 0;}
.schedule strong{font-weight: 700;}
.schedule > h2{font-weight: 400;font-size: 3.1rem;line-height:1.2;letter-spacing: -0.05em;text-align: center;}
.schedule .schedule-text {font-weight: 400;font-size: 3.1rem;line-height: 1;letter-spacing: -0.05em;text-align: center;}
.buttons{display: flex;justify-content: center;margin-bottom: 8rem;}
.buttons .button{width: 42.7rem;height: 14rem;display: flex;justify-content: center;align-items: center;background-color: #F9E000;font-weight: 400;font-size: 3.1rem;line-height: 1.29;letter-spacing: -0.05em;text-align: center;cursor: pointer;color:#000000;}

.footer {height: auto;color: #fff;background-color: #000;display: flex;align-items: center;margin: 0 auto;padding: 3.3rem 0 3.5rem;position: relative;}
.footer .footer-text{font-size: 1.7rem;font-weight: 400;line-height: 1.4;letter-spacing:-0.05em;text-align: center;margin: 0 auto;}
.footer .copyright{margin-top:1.3rem;display: block;}

.msg-window{display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 100;justify-content: center;align-items: center;}
.msg-window::before{content:'';display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6)}
.msg-window .msg-box{background-color: #fff;z-index: 1;min-width: 59rem;padding: 7.9rem 0;position: relative;border-radius: 1rem;}
.msg-window .msg-box .msg-box-close{width: 2.6rem;    position: absolute;top: 2rem;right: 2rem;}
.msg-window .msg-box .msg-box-close img{width: 100%;height: auto;display: block;}
.msg-window .msg-box p{font-size: 3rem;text-align: center;line-height: 1.5em;padding: 3rem;}
.msg-window .msg-box .button-box{display: flex;justify-content: center;}
.msg-window .msg-box .button-box .button{font-size: 3.29rem;font-weight: 400;color: #000000;line-height: 1em;letter-spacing: -0.075em;cursor: pointer;background-color: #f9e000;width: 37.1rem;height: 10.2rem;display: flex;justify-content: center;align-items: center;    padding-top: 0.5rem;}
body.msgopen {height: 100vh;overflow: hidden;}
body.msgopen .msg-window {display: flex;}


.custom-box{padding:12rem 0 8rem;}
.custom-box .step-title{font-weight: 400;font-size: 3.1rem;line-height: 1.4;letter-spacing: -0.05em;text-align: center;}
.custom-box .step-title .small{font-size: 2.6rem;line-height:1.69; color:#6B6B6B;}
.custom-box .bg-select{padding: 7rem 0;position: relative;}
.custom-box .bg-select .clean-button{position: absolute;right: 7rem;top:7rem;cursor: pointer;display: flex;flex-direction: column;align-items: center;row-gap: 1rem;}
.custom-box .bg-select .clean-button .icon{background-color: #92362B;border-radius: 50%;width: 6rem;height: 6rem;}
.custom-box .bg-select .clean-button .icon > img{display: block;width: 100%;height: 100%;}
.custom-box .bg-select .clean-button > span{font-size: 2rem;color:#92362B;letter-spacing: -0.07em;font-weight: 900;}

.custom-box .bg-select .bg-item{width: 39.5rem;height: auto;margin: 0 auto;overflow: hidden;border-radius: 1.5rem;}
.custom-box .bg-select .bg-item > img{width: 100%;height: auto;display: block;}
.custom-box .bg-select .bg-item .sticker{position: absolute;width: calc(100% * 0.3);height: auto;}
.custom-box .bg-select .bg-item .sticker img{width: auto;height: 100%;display: block;}
.custom-box .bg-select .sticker-custom {position: relative;touch-action: none;}
.custom-box .bg-select .bg-item .sticker .active-box{ position: absolute;width: calc(100% + 4rem);height: calc(100% + 4rem);top: 0;left: 0;border: 2px dashed rgba(0,0,0,0.8);display: none;transform: translate(-2rem,-2rem);}
.custom-box .bg-select .bg-item .sticker .active-box .tool{position: absolute;background-color: rgba(0,0,0,0.8);color: #ffffff;display: flex;width: 5rem;height: 5rem;border-radius: 100%;justify-content: center;align-items: center;background-size: 4rem 4rem;background-repeat: no-repeat;background-position: center;}
.custom-box .bg-select .bg-item .sticker .active-box .del{ right: 0;top: 0;transform: translate(50%, -50%);background-image: url("../images/system/icon-del.png");}
.custom-box .bg-select .bg-item .sticker .active-box .scale{right: 0;bottom: 0;transform: translate(50%, 50%);background-image: url("../images/system/icon-resize.png");}
.custom-box .bg-select .bg-item .sticker .active-box .rotate{left: 0;bottom: 0;transform: translate(-50%, 50%);background-image: url("../images/system/icon-rotate.png");}
.custom-box .bg-select .bg-item .sticker.active .active-box{display: block;z-index: 2;}


.custom-box .tokyo{aspect-ratio: 331 / 479;}
.custom-box .roma{aspect-ratio: 348 / 479;}
.custom-box .losangeles{aspect-ratio: 328 / 479;}
.custom-box .milan{aspect-ratio: 328 / 479;}
.custom-box .venice{aspect-ratio: 330 / 479;}
.custom-box .barcelona{aspect-ratio: 325 / 479;}
.custom-box .cologne{aspect-ratio: 330 / 479;}
.custom-box .newyork{aspect-ratio: 325 / 479;}
.custom-box .paris{aspect-ratio: 340 / 479;}
.custom-box .seoul{aspect-ratio: 328 /479;}

.custom-box .bg-list{display: flex;justify-content:center;column-gap: 7rem;margin: 7rem auto 0;}
.custom-box .bg-list input{display: none;}
.custom-box .bg-list input[type='radio'] + label{display: flex;flex-direction: column;justify-content: center;align-items: center;row-gap: 1rem;cursor: pointer;}
.custom-box .bg-list input[type='radio'] + label .img-item{width: 18.8rem;height: 18.8rem;display: flex;justify-content: center;align-items: center;background-color: #ffffff;overflow: hidden;border-radius: 50%;border: 1px solid #DFDFDF}
.custom-box .bg-list input[type='radio'] + label .img-item > img{width:14.4rem;height: 14.4rem;display: block;}
.custom-box .bg-list input[type='radio'] + label::after{content:'';width: 3.8rem;height: 3.8rem;display: block;background-image: url("../images/step-off.svg");background-size: cover;}
.custom-box .bg-list input[type='radio']:checked + label::after{content:'';background-image: url("../images/step-on.svg");}
.custom-box .step-buttons{display: flex;justify-content: center;column-gap: 5rem;}
.custom-box .step-buttons .button{width: 25.4rem;height: 10rem;display: flex;justify-content: center;align-items: center;background-color: #000000;font-weight: 400;font-size: 3.1rem;line-height: 1;letter-spacing: -0.05em;text-align: center;color: #FFFFFF;}
.custom-box.step2{padding:12rem 0 calc(var(--closeHeight) + 8rem);}

.sticker-window {position: fixed;bottom: 0;left: 50%;width: 100%;max-width: var(--window-width);background-color: #92362B;border-radius: 3rem 3rem 0 0;height: var(--openHeight);display: flex;flex-direction: column;transform: translate(-50%, calc(100% - (var(--closeHeight) - 2px))); /* 처음엔 접힌 상태 */transform-origin: bottom center;transition: transform 0.4s ;will-change: transform;}
.sticker-window .sticker-header{display: flex;height: var(--closeHeight);flex-direction: column;align-items: center;padding:2.5rem 0 ;row-gap: 1rem;cursor: pointer;}
.sticker-window .sticker-header::before{content:'';display: block;background-image: url("../images/icon-arrow.svg");background-size: cover;width: 2rem;height: 1.2rem;transition-duration: 0.3s;}
.sticker-window .sticker-header::after{content:'스티커 선택하기';font-weight: 400;font-size: 3.1rem;line-height: 1.3;letter-spacing: -0.05em;text-align: center;color:#ffffff;display: block;}
.sticker-window .sticker-wrapper{overflow: auto;scrollbar-width: none;}
.sticker-window .sticker-wrapper::-webkit-scrollbar {display: none; /* Chrome, Safari */}

.sticker-window .sticker-list{display: flex;flex-wrap: wrap;gap: 8rem 10rem;width: 50rem;justify-content: center;margin: 8rem auto;}
.sticker-window .sticker-list .sticker-item{width: 16.5rem;height: auto;aspect-ratio: 165 / 240;position: relative;}
.sticker-window .sticker-list .sticker-item input[type='checkbox']{display: none;}
.sticker-window .sticker-list .sticker-item label{width: auto;height: 24rem;display: block;position: absolute;top:0;left: 50%;transform: translateX(-50%);cursor: pointer;}
.sticker-window .sticker-list .sticker-item label img{width: auto;height: 100%;display: block;/*filter: grayscale(100%) brightness(70%);transition: filter 0.3s ease;*/}
.sticker-window .sticker-list .sticker-item input[type='checkbox']:checked + label img {outline:  solid #ffffff;outline-offset: 6px;border-radius: 8px;box-shadow: 0 0 4px rgba(0,0,0,0.3);}
.sticker-window .button-box{display: flex;justify-content: center;padding-bottom: 8rem;}
.sticker-window .sticker-button {width: 25.4rem;height: 10rem;display: flex;justify-content: center;align-items: center;background-color: #ffffff;font-weight: 400;font-size: 3.1rem;line-height: 1;letter-spacing: -0.05em;text-align: center;color:#000000;}

.sticker-window.open {transform: translate(-50%, 0); transition: transform 0.6s ;}
.sticker-window.open .sticker-header{height: auto;}
.sticker-window.open .sticker-header::before{transform: rotate(180deg);}
.sticker-window.open .sticker-header::after{content:"원하는 스티커를 모두 선택하고,\A하단의 [완료] 버튼을 클릭하세요."; white-space: pre-line;}

.custom-box.terracotta .sticker-window{background-color: #92362B;}
.custom-box.clay .sticker-window{background-color: #b8b6a7;}

@keyframes textFadeIn {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@media screen and (max-width:800px){
    ::-webkit-scrollbar {width: 0;}
    html { font-size:1.25vw;-ms-overflow-style: none;}
}