/* ÇÁ¸®¹Ì¾ö ¸®´º¾ó °øÅë */
#premium-renewal * {
    font-family: "Pretendard", sans-serif;
}

#premium-renewal {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    background: #ffffff;
    color: #131313;
    font-family: "Pretendard", sans-serif;
    letter-spacing: -0.03em;
    scrollbar-gutter: stable;
}

#premium-renewal *,
#premium-renewal *::before,
#premium-renewal *::after {
    box-sizing: border-box;
}
/*
#premium-renewal a {
    color: inherit;
    text-decoration: none;
}

#premium-renewal button,
#premium-renewal input {
    font: inherit;
}

#premium-renewal button {
    border: 0;
    cursor: pointer;
}
*/

#premium-renewal h1,
#premium-renewal h2,
#premium-renewal h3,
#premium-renewal p {
    margin: 0;
}
#contaniner.premium-features{
    padding: 0 0 0;
    padding-top: calc(290px - var(--site-promotion-offset, 0px));
    transition: padding-top 0.32s ease;
}
/* section01: ÁÖ¿ä±â´É */
#premium-renewal .pf-section01 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0 180px;
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 1.16%, rgba(110, 62, 247, 0.1) 31.7%, rgba(68, 62, 246, 0.35) 58.36%, rgba(110, 62, 247, 0.1) 90.85%, rgba(209, 223, 255, 0) 100%),
        linear-gradient(180deg, #FFFFFF 0%, #D1DFFF 100%);

}

#premium-renewal .pf-section01__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

#premium-renewal .pf-section01__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url(../../../img/sub/premium/pf_sec01_bg.png);
    background-size: 1872px auto;
    background-repeat: no-repeat; 
    background-position: center bottom 72px;
    opacity: 0.9;
}

#premium-renewal .pf-section01 h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#premium-renewal .pf-section01__label {
    padding-top:0px;
    font-size: clamp(16px, 1.6vw, 23px);
    font-weight: 600;
    color: rgba(19, 19, 19, 0.5);
}

#premium-renewal .pf-section01__copy {
    font-size: clamp(28px, 4.86vw, 70px);
    font-weight: 700;
    line-height: 1.35;
    color: #131313;
}

#premium-renewal .pf-section01__visual {
    position: relative;
    display: inline-block;
    margin-top: 40px;
}

#premium-renewal .pf-section01__visual img {
    display: block;
    width: 460px;
    height: auto;
}

#premium-renewal .pf-deco {
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
}

#premium-renewal .pf-deco--star-lg {
    width: clamp(47px, 5.3vw, 76px);
    height: clamp(47px, 5.3vw, 76px);
    top: clamp(20px, 1.8vw ,25px);
    right: clamp(38px, 4.2vw ,60px);
    background-image: url(../../../img/sub/premium/pf_deco_star_01.png);
    animation:
        pf-deco-enter 0.5s ease-out 0.3s forwards,
        pf-deco-float 2.4s ease-in-out 0.8s infinite;
}

#premium-renewal .pf-deco--star-sm {
    width: clamp(35px, 3.9vw, 56px);
    height: clamp(35px, 3.9vw, 56px);
    bottom: clamp(24px, 3.8vw ,50px);
    left: clamp(25px, 3.8vw ,55px);
    background-image: url(../../../img/sub/premium/pf_deco_star_02.png);
    animation:
        pf-deco-enter 0.5s ease-out 0.5s forwards,
        pf-deco-float 2.4s ease-in-out 1s infinite;
}

#premium-renewal .pf-deco--dot {
    width: clamp(22px, 2.4vw, 35px);
    height: clamp(22px, 2.4vw, 35px);
    top: clamp(10px, 1.4vw ,20px);
    right: clamp(68px, 7.6vw ,110px);
    background-image: url(../../../img/sub/premium/pf_deco_dot.png);
    animation: pf-deco-enter 0.5s ease-out 0.7s forwards;
}

@keyframes pf-deco-enter {
    0%   { opacity: 0; transform: scale(0) rotate(-15deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes pf-deco-float {
    0%, 100% { opacity: 1; transform: translateY(0) rotate(0deg); }
    50%       { opacity: 0.5; transform: translateY(-6px) rotate(45deg); }
}

/* section: °øÅë */
#premium-renewal .pf-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 600;
    color: #227AFF;
    margin-bottom: 10px;
}

#premium-renewal .pf-label::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 6px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.17574 0.162714C0.410057 -0.0542413 0.789956 -0.0542377 1.02427 0.162722L5.82427 4.60726C5.93679 4.71145 6 4.85275 6 5.0001C6 5.14744 5.93678 5.28875 5.82426 5.39293L1.02426 9.83729C0.789943 10.0542 0.410044 10.0542 0.175732 9.83728C-0.0585806 9.62032 -0.0585767 9.26856 0.17574 9.0516L4.55147 5.00008L0.175732 0.948389C-0.0585806 0.731428 -0.0585767 0.37967 0.17574 0.162714Z' fill='%23227AFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

#premium-renewal .pf-feature {
    padding: 100px clamp(20px, 4vw, 100px);
}

#premium-renewal .pf-feature__inner {
    display: flex;
    align-items: center;
    gap: clamp(30px, 6.9vw, 100px);
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

#premium-renewal .pf-feature__content {
    flex: 1;
}

#premium-renewal .pf-feature__visual {
    flex: 1 1 350px;
    width: clamp(350px, 56.9vw, 820px);
    aspect-ratio: 820 / 550;
    max-height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    padding: clamp(30px, 6vw, 86px) clamp(40px, 9.7vw, 140px);
    background: linear-gradient(114.33deg, #D5D8FE 1.29%, #BED2FF 22.15%, #C9E5FA 40.02%, #C7E7FC 64.79%, #BDDBFF 98.33%);
}

#premium-renewal .pf-feature__visual img {
    display: block;
    max-width: 100%;
    height: auto;
}

#premium-renewal .pf-feature__title {
    display: block;
    font-size: clamp(28px, 3.13vw, 45px);
    font-weight: 700;
    line-height: 1.4;
    color: #131313;
    margin-bottom: clamp(20px, 2.8vw, 40px);
}

#premium-renewal .pf-feature__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 14px);
}

#premium-renewal .pf-feature__item {
    display: flex;
    gap: clamp(10px, 2.1vw, 30px);
}

#premium-renewal .pf-feature__term {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 500;
    color: #131313;
    white-space: nowrap;
}

#premium-renewal .pf-feature__desc {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 400;
    color: #60718E;
    white-space: nowrap;
}
/* section02: »óÇ° */
#premium-renewal .pf-section02 {
    background: linear-gradient(360deg, #FFFFFF 60.78%, #D1DFFF 100%);
}
#premium-renewal .pf-section02 .pf-feature__term {
    min-width: clamp(71px, 6vw, 87px);
}

/* section03: ÁÖ¹® */
#premium-renewal .pf-section03 .pf-feature__visual,
#premium-renewal .pf-section05 .pf-feature__visual {
    align-items: flex-end;
    padding-bottom: 0;
}

#premium-renewal .pf-section03 .pf-feature__term {
    min-width: clamp(117px, 10vw, 144px);
}

/* section04: ȸ¿ø */
#premium-renewal .pf-section04 .pf-feature__visual {
    padding: 0;
}

#premium-renewal .pf-section04 .pf-feature__visual img {
    margin-top: 30px;
}

#premium-renewal .pf-section04 .pf-feature__term {
    min-width: clamp(73px, 6.2vw, 89px);
}

/* section05: Åë°è */
#premium-renewal .pf-section05 .pf-feature__term {
    min-width: clamp(45px, 3.9vw, 56px);
}

#premium-renewal .pf-section06 .pf-feature__term,
#premium-renewal .pf-section07 .pf-feature__term {
    min-width: clamp(57px, 4.9vw, 70px);
}

/* section08: Ŭ·Î¡ CTA */
#premium-renewal .pf-section08 {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 150px 24px 130px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(195, 226, 255, 0.61) 100%),
        linear-gradient(180deg, #FFFFFF 0%, #E3C3FF 100%);
    text-align: center;
}

#premium-renewal .pf-section08::before {
    position: absolute;
    z-index: 0;
    bottom: -44vw;
    left: 50%;
    width: min(72vw, 1360px);
    height: min(38vw, 720px);
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: #6ea8ff;
    filter: blur(clamp(120px, 15vw, 300px));
    pointer-events: none;
    content: "";
}

#premium-renewal .pf-section08 > * {
    position: relative;
    z-index: 1;
}

#premium-renewal .pf-section08 h2 {
    font-size: clamp(24px, 3.8vw, 54px);
    font-weight: 600;
}

#premium-renewal .pf-section08 a {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(163px, 13vw, 194px);
    height: clamp(51px, 4.2vw, 60px);
    margin-top: 48px;
    border: 2px solid transparent;
    border-radius: 100px;
    background: linear-gradient(#111111, #111111) padding-box,
                linear-gradient(102.47deg, #7a4dff 22.86%, #ff6eca 77.14%) border-box;
    color: #ffffff;
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 6px 18px rgba(48, 31, 103, 0.12);
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#premium-renewal .pf-section08 a::before {
    position: absolute;
    top: -30%;
    left: -75%;
    width: 55%;
    height: 160%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: skewX(-18deg);
    transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    content: "";
}

@media (hover: hover) {
    #premium-renewal .pf-section08 a:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 34px rgba(98, 65, 192, 0.24),
                    0 4px 12px rgba(0, 0, 0, 0.16);
    }

    #premium-renewal .pf-section08 a:hover::before {
        left: 125%;
    }
}

#premium-renewal .pf-section08 a:active {
    transform: translateY(-1px) scale(0.985);
    transition-duration: 0.12s;
}

/* 1110px ÀÌÇÏ */
@media screen and (max-width: 1110px) {

}

/* 768px ÀÌÇÏ */
@media screen and (max-width: 768px) {
    #contaniner.premium-features{
        padding: 0 0 0;
        padding-top: calc(190px - var(--site-promotion-offset, 0px));
    }
    #premium-renewal .pf-section01 {
    padding: 0px 20px 10px;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 1.16%,
            rgba(110, 62, 247, 0.05) 31.7%,
            rgba(68, 62, 246, 0.18) 58.36%,
            rgba(110, 62, 247, 0.05) 90.85%,
            rgba(209, 223, 255, 0) 100%),
        linear-gradient(180deg, #FFFFFF 7.46%, #D1DFFF 70.28%);
    }

    #premium-renewal .pf-section01__bg {
        background-size: 230% auto;
        background-position: center bottom -20px;
    }

    #premium-renewal .pf-section01__visual img {
        width: 100%;
        max-width: 284px;
    }

    #premium-renewal .pf-section01__label { padding-top: 0; }

    #premium-renewal .pf-feature {
        padding: 100px 20px 0;
    }

    #premium-renewal .pf-feature__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    #premium-renewal .pf-feature__content {
        order: 1;
        padding: 0 10px;
    }

    #premium-renewal .pf-feature__visual {
        order: 2;
        width: 100%;
        height: 250px; 
        max-height: none;
        padding: 30px 40px;
    }

    #premium-renewal .pf-feature__visual img {
        max-height: 100%;
    }

    #premium-renewal .pf-section08 {
        padding: 90px 0 70px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.61) 33.06%, rgba(195, 226, 255, 0.61) 100%),
            #FFFFFF;
    }
}