/*버튼, 카드 등 UI 컴포넌트 스타일링*/

/*네비게이션*/
#clayn_nav{
    line-height: 1;
    letter-spacing: 0.02rem;
    text-align: center;
    padding-bottom: calc(5 * 1vh);
    margin-top: auto;
}
#clayn_nav ul{
    font-size: var(--title-size);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#clayn_nav li{
    overflow: hidden;
}
#clayn_nav ul span{
    /*transition: opacity 0.3s ease, transform 0.3s ease;*/
    transform-origin: 100% 0%;
    /*transform: scaleY(0);*/
    /*transition-delay: var(--header-nav-label-delay);*/
    -webkit-clip-path: polygon(0 -10%, 120% -10%, 120% 120%, 0 120%, 0 -10%);
    clip-path: polygon(0 -10%, 120% -10%, 120% 120%, 0 120%, 0 -10%);
    transform: translate(0, -120%);
    transition: transform .3s cubic-bezier(0.38, 0.005, 0.215, 1);
}
#clayn_nav ul.on span{
    transform: translate(0);
    transition: transform .45s cubic-bezier(0.38, 0.005, 0.215, 1) var(--header-nav-label-delay);
    padding: 3px;
}
#clayn_nav ul .item:nth-child(1) {
    --header-nav-label-delay: 0.23333s;
}
#clayn_nav ul .item:nth-child(2) {
    --header-nav-label-delay: 0.26667s;
}
#clayn_nav ul .item:nth-child(3) {
    --header-nav-label-delay: 0.3s;
}
#clayn_nav ul li span{
    display: inline-block;
}
#clayn_nav ul li span a{
    transition: opacity .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2)), transform .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));
}


/*네비게이션 밑 sns wrapper*/
.sns_wrapper{
    margin-bottom: calc(10 * 1vh);
    text-align: center;
    font-size: 13px;
}
.sns_wrapper li{
    opacity: 0;
    transform: translate(0, -2em);
    transition: opacity .3s cubic-bezier(0.38, 0.005, 0.215, 1), transform .3s cubic-bezier(0.38, 0.005, 0.215, 1);
}
.sns_wrapper.on li{
    opacity: 1;
    transform: translate(0);
    transition: opacity .45s cubic-bezier(0.38, 0.005, 0.215, 1) .3s, transform .45s cubic-bezier(0.38, 0.005, 0.215, 1) .3s;
}
.sns_wrapper li a{
    line-height: 1.3;
    letter-spacing: 1px;
    transition: opacity .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2)), transform .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));
}

/*header_nav_btn 관련*/
.header_nav_btn{
    width: var(--spacing-fix-3rem);
    height: var(--spacing-fix-3rem);
}
.header_nav_btn span{
    position: absolute;
    left: calc(50% - (70% / 2));
    display: block;
    height: 2px;
    width: 70%;
    background-color: var(--logo-clr);
    transition: transform .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));;
}
.header_nav_btn span:nth-child(1){
    top: calc(50% - 10px);
    transform-origin: 100% 50%;
}
.header_nav_btn span:nth-child(2){
    top: calc(50% - 4px);
}
.header_nav_btn span:nth-child(3){
    bottom: calc(50% - 4px);
}
.header_nav_btn span:last-child{
    bottom: calc(50% - 10px);
    transform: scale(0.75, 1);
    transform-origin: 0 50%;
}
html.has-menu-bg .header_nav_btn span{
    background-color: var(--extra-extra-point-clr);
}
html.has-menu-bg .header_nav_btn span:nth-child(1),
html.has-menu-bg .header_nav_btn span:nth-child(4){
    transform: scale(0, 1);
}
html.has-menu-bg .header_nav_btn span:nth-child(2){
    transform: translate(0, 3px) rotate(45deg);
}
html.has-menu-bg .header_nav_btn span:nth-child(3){
    transform: translate(0, -3px) rotate(-45deg);
}
.header_nav_btn span.on{
    background: var(--body-bg-clr);
}

/*메뉴버튼*/
.header_menu{
    left: 20px;
}
/*장바구니*/
.header_bucket{
    right: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99902 !important;
}
.header_bucket.fill-on .bucket_path{
    stroke: #222222 !important;
}
.header_bucket > svg{
    width: 70%;
    height: 70%;
}
html.has-menu-bg .bucket_path{
    stroke: var(--extra-extra-point-clr);
}
.bucket_path.on{
    stroke: var(--body-bg-clr);
}
.bucket-white-overlay h2{
    font-size: var(--title-size);
    font-weight: 700;
}
.bucket-content{
    margin-top: auto;
    margin-bottom: auto;
    padding: calc(5 * 1vh) 0;
}
.bucket-content .bucket-text{
    max-width: 24rem;
}
.bucket-text h2{
    line-height: 1.2;
    font-size: var(--text-effect-size);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}
.bucket-text p{
    line-height: 1.4;
    font-size: .75rem;
}

/*버튼 디자인*/
:root {
    --btn-padding: 1rem 1.5rem;
}
.clayn_btn {
    padding: var(--btn-padding);
    background: var(--extra-point-clr);
    color: var(--body-bg-clr);
    border-radius: 500px;
    position: relative;
    z-index: 30;
    font-weight: 400;
}

@keyframes jelly {
    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}
@keyframes jelly2 {
    25% {
    transform: scale(0.9, 1.1) translate(-50%, -50%);
}

    50% {
    transform: scale(1.1, 0.9) translate(-50%, -50%);
}

    75% {
    transform: scale(0.95, 1.05) translate(-50%, -50%);
}
    
}

/*sec4 온라인, 에듀케이션 , 스튜디오 CTA 모달*/
.CTA_wrapper > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    transition: opacity .3s ease;
}

.CTA_wrapper .clayn_btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent !important;
    font-size: 26px;
    letter-spacing: 1.3px;
    font-weight: 400;
    padding : 2rem 3.5rem;
    pointer-events: none; /* 버튼이 기본적으로 클릭 불가 */
    transition: transform 0.3s ease, background 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* 은은한 그림자 */
}

/*푸터 버튼*/
.footer-submit-btn{
    padding: 1rem 1rem;
    border: 1px solid var(--body-clr);
    position: relative;
    transition: color .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));
    background: none transparent;
    overflow: visible;
    display: block;
    z-index: 0;
    font-weight: 600;
    color: var(--body-clr);
}
.footer-submit-btn::before{
    content: '';
    z-index: -1;
    background-color: var(--extra-point-clr);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1, 0);
    transform-origin: 50% 100%;
    transition: transform .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));
}