html {
    font-size: 16px;
}
@media (max-width: 1023px) {
    html { font-size: 14px; }
}
@media (max-width: 767px) {
    html { font-size: 12px; }
}
@media (max-width: 479px) {
    html { font-size: 10px; }
}

/* ── 키프레임 ── */
@keyframes bgShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero 래퍼 ── */
.intro-landing-wrapper {
    /*min-height: 30vh;*/
    /*background: linear-gradient(*/
    /*        -45deg,*/
    /*        #ffd6e7, #ffe4d6, #fce0ff, #d6f0ff, #ffd6e7, #ffe4ba*/
    /*);*/
    /*background-size: 300% 300%;*/
    /*animation: bgShift 19s ease infinite;*/
    background-color: #F2F4F8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem 3rem;
}

/* ── 메인 타이틀 ── */
.intro-landing-title {
    font-size: 1.7rem;
    font-weight: 600;
    color: #181818;
    line-height: 1.55;
    margin: 0 0 -0.1875rem;        /* -3px */
}
.intro-landing-title .grad-purple-orange {
    background: var(--color-new-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}
.intro-landing-title .grad-orange-pink {
    background:  var(--color-new-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* ── 서브 타이틀 ── */
.intro-landing-subtitle {
    font-size: 1.7rem;
    font-weight: 600;
    color: #181818;
    margin: 0 0 1.125rem;          /* 18px */
}

/* ── 설명 텍스트 ── */
.intro-landing-desc {
    font-size: 1.1rem;
    font-weight: 400;
    color: #757575;
    line-height: 1.75;
    margin: 0;
}

/* ── 기능 소개 섹션 ── */
.intro-features-section {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 3.5rem 0.5rem 0;
}
.intro-features-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
}

/* ── 기능 카드 아이템 ── */
.intro-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;       /* 24 28 */
    flex: 1 1 12.5rem;             /* 200px */
    min-width: 0;
    animation: fadeInUp 0.6s ease both;
}
.intro-feature-item:nth-child(1) { animation-delay: 0.1s; }
.intro-feature-item:nth-child(3) { animation-delay: 0.2s; }
.intro-feature-item:nth-child(5) { animation-delay: 0.3s; }
.intro-feature-item:nth-child(7) { animation-delay: 0.4s; }

/* ── 아이콘 영역: CSS로 크기 제어 ── */
.intro-feature-icon {
    width: 4rem;                   /* 64px */
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;           /* 16px */
    flex-shrink: 0;
}
.intro-feature-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── 기능 제목 / 설명 ── */
.intro-feature-title {
    font-size: 1.2rem;
    color: #2C2C2C;
    margin: 0 0 0.5rem;
    font-weight: 700;
}
.intro-feature-desc {
    font-size: 1rem;             /* 14.4px */
    color: #2C2C2C;
    line-height: 1.2;
    margin: 0;
    font-weight: 400;
    word-break: keep-all;
}

/* ── 구분자 "+" ── */
.intro-feature-plus {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    color: #FF5D1A;
    font-size: 1.4rem;
    font-weight: 600;
    align-self: center;
    width: 1.25rem;                /* 20px */
    height: 1.25rem;
    margin-top: 1.875rem;          /* 30px */
    flex-shrink: 0;
    z-index: 1;
}
.intro-feature-plus::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: #D9D9D9;
    border-radius: 50%;
    z-index: -1;
}

/* ── CTA 섹션 ── */
.intro-cta-section {
    text-align: center;
    padding: 8.75rem 1.5rem 4.5rem; /* 140 24 72 */
}
.btn-intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;                 /* 6px */
    padding: 0.75rem 3.125rem;     /* 12 50 */
    border-radius: 3.625rem;       /* 58px */
    background: linear-gradient(-45deg, #FF003C, #FF5D1A, #FF00A0, #A200FF, #FF003C);
    background-size: 300% 300%;
    animation: bgShift 5s ease infinite;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    text-decoration: none;
    transition: opacity 0.22s, transform 0.22s, box-shadow 0.22s;
    box-shadow: 0 4px 10px rgba(183, 10, 76, 0.28);
    letter-spacing: -0.0125rem;
    white-space: nowrap;
}
.btn-intro-cta:hover {
    opacity: 0.93;
    transform: translateY(-0.125rem);
    color: #fff;
    text-decoration: none;
}
.btn-intro-cta .btn-sparkle {
    margin-bottom: 0.25rem;        /* 4px */
    display: inline-flex;
    align-items: center;
}
.btn-intro-cta .btn-sparkle svg {
    width: 1.5rem;
    height: auto;
}

/* ============================================================
   반응형: Tablet (≤ 1023px)
   아이콘 4개 → 2×2 그리드로 재배치
   ============================================================ */
@media (max-width: 1023px) {
    .intro-features-row {
        flex-wrap: wrap;
        justify-content: center;
    }
    .intro-feature-item {
        flex: 1 1 calc(50% - 3rem);
        max-width: calc(50% - 1.5rem);
    }
    .intro-feature-plus {
        display: none;
    }
}

/* ============================================================
   반응형: Mobile (≤ 767px)
   아이콘 4개 → 세로 1열
   ============================================================ */
@media (max-width: 767px) {
    .intro-landing-wrapper {
        padding: 3rem 1rem 2.75rem;
    }
    .intro-features-row {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
    }
    .intro-feature-item {
        width: 100%;
        max-width: 100%;
        flex: none;
        padding: 1.25rem 1rem;     /* 20 16 */
    }
    .intro-feature-plus {
        display: flex;
        margin-top: 0;
        margin-bottom: 0;
        width: 1.5rem;
        height: 1.5rem;
    }
    .intro-cta-section {
        padding: 4rem 1rem 3rem;
    }
}

/* ============================================================
   반응형: Small Mobile (≤ 479px)
   ============================================================ */
@media (max-width: 479px) {
    .intro-landing-wrapper {
        padding: 2rem 1rem 2rem;
    }
    .btn-intro-cta {
        padding: 0.8rem 2rem;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
    }
}