/* =============================================
   Photo Guide — 스타일시트
   폰트: Pretendard Variable
   기준 너비: 1920px / 콘텐츠 영역: 1200px
   ============================================= */

.aiphoto .front_content {
    font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    color: #111111;
    background: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* SVG 아이콘 크기 축소 방지 */
svg {
    flex-shrink: 0;
}

/* ─── 접근성: 스크린 리더 전용 텍스트 ─── */
.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── 레이아웃 컨테이너 ─── */
.layout_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =============================================
   히어로 섹션
   ============================================= */
.hero_section {
    background: #ffffff;
    padding: 80px 0 40px;
}

.hero_inner {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* 좌측 콘텐츠 */
.hero_content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 0 1 auto;
    max-width: 780px;
    min-width: 0;
}

.hero_text_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero_label {
    color: #2563EB;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.hero_title {
    color: #111111;
    font-size: 5.625rem; /* 90px */
    font-weight: 800;
    line-height: 1.2;
}

.hero_subtitle {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.4;
}

.hero_subtitle_default {
    color: #111111;
}

.hero_subtitle_accent {
    color: #2563EB;
}

/* 뱃지 + 설명 */
.hero_cta_group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero_badge_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.hero_badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 16px 20px;
    background: #E8F1FF;
    border-radius: 14px;
    color: #2563EB;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.badge_icon {
    flex-shrink: 0;
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
}

.hero_desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero_desc_main {
    color: #111111;
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    line-height: 1.4;
}

.hero_desc_sub {
    color: #6B7280;
    font-size: 1.25rem; /* 20px */
    font-weight: 400;
    line-height: 1.5;
}

.hero_desc_accent {
    color: #2563EB;
    font-weight: 600;
}

/* 우측 폰 목업 */
.hero_phone_wrap {
    position: relative;
    width: clamp(280px, 28vw, 371px);
    flex-shrink: 0;
}

.hero_phone {
    position: relative;
    width: 100%;
}

.hero_phone img {
    width: 100%;
    height: auto;
    display: block;
}

/* 기능 카드 (폰 우측에 플로팅) */
.hero_feature_list {
    position: absolute;
    top: 20.9%; /* 134/640 */
    left: 63.3%; /* 235/371 */
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 24px);
}

.hero_feature_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: clamp(120px, 11vw, 148px);
    padding: clamp(14px, 1.5vw, 22px) clamp(12px, 1.2vw, 20px);
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0px 15px 35px rgba(26, 38, 77, 0.16);
}

.hero_feature_card span {
    color: #111111;
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 1.4;
}

/* =============================================
   통계 섹션
   ============================================= */
.stats_section {
    background: #ffffff;
    padding: 40px 0;
}

.stats_list {
    display: flex;
    align-items: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0px 10px 30px 10px rgba(26, 38, 77, 0.05);
}

.stats_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.stats_item > svg {
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
}

.stats_value {
    color: #2563EB;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.4;
}

.stats_label {
    color: #111111;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
}

.stats_divider {
    width: 1px;
    height: 70px;
    background: #E2E2E2;
    flex-shrink: 0;
}

/* =============================================
   인용구 섹션
   ============================================= */
.quote_section {
    background: #ffffff;
    padding: 40px 0 80px;
}

.quote_card {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px 40px;
    background: linear-gradient(90deg, #E9F0FD 0%, #F1F6FF 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.quote_text_wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quote_text {
    color: #111111;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.4;
    quotes: "\201C" "\201D";
}

.quote_text::before {
    content: open-quote;
    color: #AEC9FF;
    font-size: 2.875rem;
    font-weight: 800;
    vertical-align: top;
    line-height: 0.6;
    margin-right: 2px;
}

.quote_text::after {
    content: close-quote;
    color: #AEC9FF;
    font-size: 2.875rem;
    font-weight: 800;
    vertical-align: top;
    line-height: 0.6;
    margin-left: 2px;
}

.quote_desc {
    color: #666666;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
}

.quote_desc strong {
    font-weight: 600;
    color: #111111;
}

.quote_icon_wrap {
    width: 120px;
    height: 100px;
}

.quote_icon_wrap img {
    width:100%;
}

/* =============================================
   공통 섹션 타이틀
   ============================================= */
.section_heading {
    color: #111111;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.section_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.section_desc {
    color: #666666;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

/* =============================================
   주요 기능 섹션
   ============================================= */
.features_section {
    background: #F6F7FB;
    padding: 80px 0 30px;
}

.features_section > .layout_container > .section_heading {
    margin-bottom: 30px;
}

.features_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 20px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #E2E2E2;
}

.feature_name {
    color: #111111;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.feature_desc {
    color: #666666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

/* =============================================
   화면 가이드 UI 섹션
   ============================================= */
.guide_ui_section {
    background: #F6F7FB;
    padding: 30px 0 80px;
}

.guide_ui_list {
    display: flex;
    gap: 24px;
}

.guide_ui_card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 20px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #E2E2E2;
}

.guide_ui_label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #2563EB;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.guide_ui_compare {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.guide_ui_figure {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.guide_ui_figure img {
    border-radius: 12px;
    width: 100%;
    max-width: 100px;
    aspect-ratio: 100 / 221;
    object-fit: cover;
}


.guide_ui_figure figcaption {
    color: #666666;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.guide_ui_arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #2563EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guide_ui_desc {
    color: #666666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

/* =============================================
   특허 배너
   ============================================= */
.patent_section {
    background: #3E88EB url("/resources/img/bg01.png") center / cover no-repeat;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.patent_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.patent_info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.patent_icon_wrap {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patent_text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.patent_title {
    color: #ffffff;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.4;
}

.patent_number {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
}

.patent_number strong {
    font-weight: 500;
}

.patent_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #FEFEFF;
    border-radius: 22px;
    color: #2563EB;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* =============================================
   활용 분야 섹션
   ============================================= */
.use_cases_section {
    background: #ffffff;
    padding: 80px 0 40px;
}

.use_cases_section > .layout_container > .section_heading {
    margin-bottom: 20px;
}

.use_cases_list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

@media (max-width: 1023px) {
    /* 활용 분야: 3열 */
    .use_cases_list {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 가이드 UI: 세로 스택 */
    .guide_ui_list {
        flex-direction: column;
    }

    .guide_ui_figure img {
        max-width: 120px;
    }

    /* 히어로: 폰은 항상 우측 유지, 폰트만 축소 */
    .hero_title {
        font-size: 3rem;
    }

    .hero_subtitle {
        font-size: 1.5rem;
    }

    .hero_desc_main {
        font-size: 1.25rem;
        white-space: normal; /* 작은 화면에서는 줄바꿈 허용 */
    }

    .hero_desc_sub {
        font-size: 1rem; /* 16px */
    }

    /* 플로팅 기능 카드 숨김 (작은 화면에서 겹침 방지) */
    .hero_feature_list {
        display: none;
    }
}

@media (max-width: 640px) {
    /* 활용 분야: 2열 */
    .use_cases_list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .cta_card {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        text-align: center;
        gap: 24px;
    }

    .cta_icon_wrap {
        display: none !important;
    }

    .cta_info {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px;
        width: 100%;
    }

    .cta_text {
        width: 100%;
    }

    .cta_title,
    .cta_desc {
        text-align: center !important;
    }

    .cta_actions {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex-shrink: 0;
        gap: 12px;
    }

    .cta_btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 50px;
    }
}

@media (max-width: 767px) {
    /* 히어로: 세로 스택 */
    .hero_section {
        padding: 48px 0 32px;
    }

    .hero_inner {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }

    .hero_content {
        width: 100%;
    }

    .hero_title {
        font-size: 2.5rem;
    }

    .hero_subtitle {
        font-size: 1.375rem;
    }

    .hero_desc_main {
        font-size: 1.125rem;
    }

    .hero_phone_wrap {
        display: none;
    }

    /* 주요 기능: 2열 */
    .features_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 통계: 2x2 그리드 */
    .stats_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 24px;
    }

    .stats_divider {
        display: none;
    }
}

.use_case_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #EBEDF5;
    box-shadow: 0px 6px 16px rgba(26, 38, 77, 0.05);
}

.use_case_name {
    color: #111111;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.use_case_desc {
    color: #666666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

/* =============================================
   CTA 섹션
   ============================================= */
.cta_section {
    background: #ffffff;
    padding: 40px 0 80px;
}

.cta_card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    background: linear-gradient(99deg, #3373F5 0%, #1C52D9 100%);
    border-radius: 28px;
    overflow: hidden;
}

.cta_info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cta_icon_wrap {
    width: 100px;
    height: 100px;
    background: #729FFF;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cta_text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cta_title {
    color: #ffffff;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
}

.cta_desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.cta_actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
}

.cta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 200px;
    height: 50px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.cta_btn:hover,
.cta_btn:focus {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.cta_btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.cta_btn_primary {
    background: #ffffff;
    color: #2563EB;
}

.cta_btn_secondary {
    background: #1747C7;
    color: #ffffff;
    border: 1.5px solid #ffffff;
}

/* =============================================
   모션 / 애니메이션
   ============================================= */

/* 공통 키프레임 */
@keyframes fade_in_up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 스크롤 등장용 — 이동 거리·속도를 더 크게 */
@keyframes scroll_reveal_up {
    from {
        opacity: 0;
        transform: translateY(140px);
    }

    60% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade_in_right {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade_in_left {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pop_in {
    0% {
        opacity: 0;
        transform: scale(0.88);
    }

    70% {
        transform: scale(1.04);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes blur_in {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes clip_reveal {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes rotate_in {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.92);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes flip_up {
    from {
        opacity: 0;
        transform: perspective(600px) rotateX(18deg) translateY(20px);
    }

    to {
        opacity: 1;
        transform: perspective(600px) rotateX(0) translateY(0);
    }
}

@keyframes scale_in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes phone_tilt {
    0%,
    100% {
        transform: perspective(900px) rotateY(-4deg) rotateX(2deg) scale(1);
    }

    50% {
        transform: perspective(900px) rotateY(4deg) rotateX(-2deg) scale(1.02);
    }
}

@keyframes card_glow_pulse {
    0%,
    100% {
        box-shadow: 0px 15px 35px rgba(26, 38, 77, 0.16);
        transform: scale(1);
    }

    50% {
        box-shadow: 0px 22px 48px rgba(37, 99, 235, 0.22);
        transform: scale(1.05);
    }
}

@keyframes card_tilt {
    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

@keyframes card_slide_x {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }
}

@keyframes icon_wiggle {
    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-7deg);
    }

    75% {
        transform: rotate(7deg);
    }
}

@keyframes icon_pulse_scale {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.14);
    }
}

@keyframes icon_spin_soft {
    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(8deg) scale(1.08);
    }
}

@keyframes compare_slide_left {
    from {
        opacity: 0;
        transform: translateX(-24px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes compare_slide_right {
    from {
        opacity: 0;
        transform: translateX(24px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes arrow_pulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.12);
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
}

@keyframes icon_glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
        transform: scale(1.06);
    }
}

@keyframes badge_shine {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 18px 4px rgba(255, 255, 255, 0.35);
    }
}

@keyframes quote_glow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(37, 99, 235, 0);
    }

    50% {
        box-shadow: 0 14px 36px rgba(37, 99, 235, 0.12);
    }
}
@keyframes gradient_flow {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes cta_icon_spin {
    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-6deg);
    }
}

/* ─── 히어로: 페이지 진입 ─── */
@media (prefers-reduced-motion: no-preference) {
    .hero_label {
        animation: blur_in 0.8s ease both;
    }

    .hero_title {
        animation: pop_in 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s both;
    }

    .hero_subtitle_default {
        animation: fade_in_left 0.7s ease 0.2s both;
    }

    .hero_subtitle_accent {
        animation: fade_in_right 0.7s ease 0.3s both;
    }

    .hero_badge:nth-child(1) {
        animation: rotate_in 0.65s ease 0.38s both;
    }

    .hero_badge:nth-child(2) {
        animation: fade_in_left 0.65s ease 0.46s both;
    }

    .hero_badge:nth-child(3) {
        animation: fade_in_right 0.65s ease 0.54s both;
    }

    .hero_desc_main {
        animation: clip_reveal 0.8s ease 0.58s both;
    }

    .hero_desc_sub {
        animation: blur_in 0.8s ease 0.68s both;
    }

    .hero_phone_wrap {
        animation: fade_in_right 0.9s ease 0.2s both;
    }
}

/* ─── 스크롤 등장 (view 타임라인) ─── */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* 통계 */
        .stats_list {
            animation: pop_in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 32%;
        }

        .stats_item {
            animation: flip_up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }

        .stats_item:nth-child(3) { animation-range: entry 5% entry 43%; }
        .stats_item:nth-child(5) { animation-range: entry 10% entry 48%; }
        .stats_item:nth-child(7) { animation-range: entry 15% entry 53%; }

        /* 인용구 */
        .quote_text_wrap {
            animation: blur_in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }

        .quote_icon_wrap {
            animation:
                    rotate_in linear both,
                    icon_spin_soft 3.2s ease-in-out 0.8s infinite;
            animation-timeline: view(), auto;
            animation-range: entry 5% entry 42%, normal;
        }

        /* 주요 기능 / 가이드 UI / 활용 분야 — 스크롤 시 아래에서 위로 */
        .features_section .layout_container,
        .guide_ui_section .layout_container,
        .use_cases_section .layout_container {
            animation: scroll_reveal_up ease-out both;
            animation-timeline: view();
            animation-range: entry -10% entry 75%;
        }

        /* 특허 */
        .patent_info {
            animation: fade_in_left linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }

        .patent_badge {
            animation: pop_in linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 42%;
        }

        /* CTA */
        .cta_info {
            animation: fade_in_left linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }

        .cta_actions {
            animation: fade_in_right linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 42%;
        }
    }
}

/* ─── 스크롤 등장 fallback (view 미지원 브라우저) ─── */
@supports not (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .stats_list {
            animation: pop_in 0.7s ease 0.1s both;
        }

        .stats_item {
            animation: flip_up 0.65s ease both;
        }

        .stats_item:nth-child(1) { animation-delay: 0.2s; }
        .stats_item:nth-child(3) { animation-delay: 0.35s; }
        .stats_item:nth-child(5) { animation-delay: 0.5s; }
        .stats_item:nth-child(7) { animation-delay: 0.65s; }

        .quote_text_wrap {
            animation: blur_in 0.75s ease 0.15s both;
        }

        .quote_icon_wrap {
            animation:
                    rotate_in 0.7s ease 0.3s both,
                    icon_spin_soft 3.2s ease-in-out 1s infinite;
        }

        .features_section .layout_container,
        .guide_ui_section .layout_container,
        .use_cases_section .layout_container {
            animation: scroll_reveal_up 1.7s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .patent_info {
            animation: fade_in_left 0.7s ease 0.1s both;
        }

        .patent_badge {
            animation: pop_in 0.65s ease 0.25s both;
        }

        .cta_info {
            animation: fade_in_left 0.7s ease 0.15s both;
        }

        .cta_actions {
            animation: fade_in_right 0.7s ease 0.3s both;
        }
    }
}

/* ─── 하단 섹션: 은은한 반복 모션 ─── */
@media (prefers-reduced-motion: no-preference) {
    .quote_card {
        animation: quote_glow 5s ease-in-out infinite;
    }

    .guide_ui_arrow {
        animation: arrow_pulse 1.6s ease-in-out infinite;
    }

    .patent_icon_wrap {
        animation: icon_glow 2.4s ease-in-out infinite;
    }

    .patent_badge {
        animation: badge_shine 2.8s ease-in-out infinite;
    }

    .cta_card {
        background-size: 200% 200%;
        animation: gradient_flow 6s ease infinite;
    }

    .cta_icon_wrap {
        animation: cta_icon_spin 3.5s ease-in-out infinite;
    }

    .guide_ui_figure img {
        transition: transform 0.4s ease, filter 0.4s ease;
    }

    .guide_ui_card:hover .guide_ui_figure:first-child img {
        transform: translateX(-4px) scale(1.03);
        filter: brightness(0.95);
    }

    .guide_ui_card:hover .guide_ui_figure:last-child img {
        transform: translateX(4px) scale(1.06);
        filter: brightness(1.05);
    }
}

/* ─── 호버 / 인터랙션 ─── */
.hero_badge {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.hero_badge:hover {
    transform: translateX(6px);
    background-color: #dce9ff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.hero_feature_card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero_feature_card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 20px 40px rgba(26, 38, 77, 0.2);
}

.stats_list {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.stats_list:hover {
    transform: translateY(-2px);
    box-shadow: 0px 16px 40px 12px rgba(26, 38, 77, 0.08);
}

.stats_item {
    transition: transform 0.25s ease;
}

.stats_item:hover {
    transform: scale(1.04);
}

.stats_item:hover .stats_value {
    color: #1d4ed8;
}

.stats_value {
    transition: color 0.25s ease;
}

.quote_card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quote_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}

.feature_card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature_card:hover {
    transform: translateY(-6px);
    border-color: #aec9ff;
    box-shadow: 0 14px 32px rgba(26, 38, 77, 0.1);
}

.feature_card:hover svg {
    transform: scale(1.08);
}

.feature_card svg {
    transition: transform 0.3s ease;
}

.use_case_card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.use_case_card:hover {
    transform: translateY(-6px);
    border-color: #aec9ff;
    box-shadow: 0 14px 32px rgba(26, 38, 77, 0.1);
}

.use_case_card:hover svg {
    transform: scale(1.08);
}

.use_case_card svg {
    transition: transform 0.3s ease;
}

.guide_ui_card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.guide_ui_card:hover {
    transform: translateY(-5px);
    border-color: #aec9ff;
    box-shadow: 0 12px 28px rgba(26, 38, 77, 0.08);
}

.cta_card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(28, 82, 217, 0.35);
}

.cta_icon_wrap {
    transition: transform 0.3s ease;
}

.cta_card:hover .cta_icon_wrap {
    transform: scale(1.06) rotate(-4deg);
}