/* 기본 초기화 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    color: #222222;
    background-color: #FAFAFA;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ─ 스크롤 Reveal 애니메이션 (전체 섹션 공통) ─ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(48px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─ 헤더 ─ */
.site-header {
    background-color: #111111;
    padding: 0 20px;
    height: 52px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
}

.site-logo {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ─ 히어로 섹션 ─ */
.section-hero {
    padding: 80px 40px 100px;
    display: flex;
    justify-content: center;
    background: #FFFFFF;
}

.hero-card-wrap {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
}

.hero-img-placeholder {
    width: 100%;
    height: 380px;
    background-color: #E8E8E8;
    /* 사진 삽입 전 임시 회색 */
    background-size: cover;
    background-position: center;
}

.hero-text {
    padding: 28px 36px 32px;
    text-align: center;
}

.hero-sub {
    font-size: 17px;
    color: #555555;
    line-height: 1.7;
    font-weight: 400;
}

/* 섹션 공통 */
.section-compare {
    padding: 120px 40px;
    display: flex;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

/* 타이틀 */
.section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.03em;
    margin-bottom: 50px;
    color: #222222;
}

.section-title span {
    color: #0095F8;
    /* 포인트 컬러 */
}

/* 카드 래퍼 */
.card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 50px;
    /* 부드럽고 깊은 쉐도우 - 패스트파이브 톤앤매너 */
    box-shadow: rgba(17, 17, 26, 0.05) 0px 8px 24px, rgba(17, 17, 26, 0.05) 0px 16px 48px;
    margin: 0 auto;
    max-width: 860px;
}

/* 얇고 검은 프레임 모니터 */
.monitor-frame {
    /* 얇고 검은 프레임 요구사항 반영 */
    border: 1px solid #222222;
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
    height: 540px;
    position: relative;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
}

.monitor-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 네이버 UI 시뮬레이션 */
.naver-ui {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 상단 검색바 영역 */
.naver-header {
    display: flex;
    align-items: center;
    padding: 24px 30px;
    border-bottom: 1px solid #E4E4E4;
}

.naver-logo {
    font-weight: 900;
    color: #03C75A;
    font-size: 28px;
    line-height: 1;
    margin-right: 24px;
    letter-spacing: -1px;
}

.naver-search-bar {
    flex: 1;
    height: 52px;
    border: 2px solid #03C75A;
    border-radius: 26px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: relative;
}

.search-text {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
}

.search-cursor {
    display: inline-block;
    width: 2px;
    height: 20px;
    background-color: #222222;
    margin-left: 2px;
    opacity: 0;
}

.search-cursor.blinking {
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.search-icon {
    margin-left: auto;
    color: #03C75A;
}

/* 하단 결과 영역 */
.naver-body {
    flex: 1;
    padding: 40px 30px;
    background: #F8F9FA;
    overflow: hidden;
}

/* 파워링크 섹션 - 처음부터 표시 */
.powerlink-section {
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    opacity: 1;
    transform: none;
}

.powerlink-section.active {
    opacity: 1;
    transform: none;
}

.pl-header {
    border-bottom: 1px solid #F1F4F8;
    padding-bottom: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.pl-title {
    font-size: 15px;
    font-weight: 700;
    color: #222222;
    margin-right: 12px;
}

.pl-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: #777777;
}

.pl-info {
    margin-left: auto;
    font-size: 12px;
    color: #AAAAAA;
}

/* 리스트 아이템 */
.pl-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* 리스트 아이템 - 처음부터 표시 */
.pl-item {
    opacity: 1;
    transform: none;
}

.pl-item.show {
    opacity: 1;
    transform: none;
}

.pl-item-title {
    font-size: 18px;
    font-weight: 500;
    color: #004BCA;
    /* 네이버 일반 링크 컬러 */
    margin-bottom: 6px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pl-item-title b {
    font-weight: 700;
    color: #222222;
    background-color: rgba(255, 235, 59, 0.4);
    /* 네이버 검색어 하이라이트 시뮬레이션 */
}

.pl-item-url {
    font-size: 13px;
    color: #008000;
    margin-bottom: 8px;
    font-weight: 500;
}

.pl-item-desc {
    font-size: 14px;
    color: #444444;
    line-height: 1.5;
    word-break: keep-all;
}

/* 스크롤바 커스텀 (모니터 내부) */
.naver-body::-webkit-scrollbar {
    width: 6px;
}

.naver-body::-webkit-scrollbar-thumb {
    background: #D9D9D9;
    border-radius: 3px;
}

.naver-body::-webkit-scrollbar-track {
    background: transparent;
}

/* 반응형 모바일 */
@media screen and (max-width: 768px) {
    .section-compare {
        padding: 60px 20px;
    }

    .section-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .card {
        padding: 24px;
        border-radius: 16px;
    }

    .monitor-frame {
        height: 500px;
    }

    .naver-header {
        padding: 16px 20px;
    }

    .naver-logo {
        font-size: 20px;
        margin-right: 16px;
    }

    .naver-search-bar {
        height: 44px;
        padding: 0 16px;
    }

    .search-text {
        font-size: 15px;
    }

    .naver-body {
        padding: 24px 20px;
    }

    .powerlink-section {
        padding: 20px;
    }

    .pl-item-title {
        font-size: 16px;
    }
}

/* --- 2번 섹션: 상세 자료 비교 도식 --- */
.process-card {
    padding: 60px 40px;
    background: #FFFFFF;
}

.flow-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 구매자 (검색 고객) */
.buyer-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.buyer-node.show {
    opacity: 1;
    transform: translateY(0);
}

.buyer-icon {
    width: 80px;
    height: 80px;
    background: #F1F4F8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.buyer-label {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
}

/* 선 (연결 라인) */
.flow-lines {
    position: absolute;
    bottom: 130px;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
}

.line {
    position: absolute;
    bottom: 0;
    height: 100%;
    border-bottom: 1.5px solid #222222;
    opacity: 0;
}

/* 왼쪽선 */
.line-left {
    left: 16.6%;
    width: 33.4%;
    border-left: 1.5px solid #222222;
    border-radius: 0 0 0 12px;
    clip-path: inset(0 0 0 100%);
    /* right to left */
    transition: clip-path 0.8s ease, opacity 0.1s ease;
}

.line-left.draw {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* 가운데선 */
.line-center {
    right: 24px;
    width: 0;
    border-bottom: none;
    border-left: 1.5px solid #222222;
    clip-path: inset(100% 0 0 0);
    /* bottom to top */
    transition: clip-path 0.8s ease, opacity 0.1s ease;
}

.line-center.draw {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* 오른쪽선 */
.line-right {
    right: 24px;
    width: 33.4%;
    border-right: 1.5px solid #222222;
    border-radius: 0 0 12px 0;
    clip-path: inset(0 100% 0 0);
    /* left to right */
    transition: clip-path 0.8s ease, opacity 0.1s ease;
}

.line-right.draw {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}


/* 3개 업체 페이지 비교 */
.pages-nodes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
    margin-bottom: 0px;
    z-index: 2;
}

.page-node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.page-node.show {
    opacity: 1;
    transform: translateY(0);
}

.page-label {
    font-size: 15px;
    font-weight: 600;
    color: #444444;
    margin-bottom: 12px;
    text-align: center;
}

/* 스켈레톤 웹 디자인 */
.page-frame {
    width: 100%;
    height: 240px;
    border: 1px solid #222222;
    /* 얇은 프레임 요청 반영 */
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.page-frame:hover {
    transform: translateY(-5px);
}

.page-header {
    height: 24px;
    border-bottom: 1px solid #E4E4E4;
    background: #F8F9FA;
}

.page-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.s-line {
    height: 6px;
    background: #E4E4E4;
    border-radius: 3px;
    margin-bottom: 10px;
}

.w-full {
    width: 100%;
}

.w-half {
    width: 60%;
    margin-bottom: 16px;
}

.s-card {
    background: #F1F4F8;
    border-radius: 4px;
    height: 40px;
}

.s-card.mb-2 {
    margin-bottom: 8px;
}

.s-card.mt-2 {
    margin-top: auto;
}

.s-card.large {
    height: 100px;
}

.s-grid {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.s-grid .s-card {
    flex: 1;
    height: 50px;
}

/* 화면 작아질 때 모바일 뷰 */
@media screen and (max-width: 768px) {
    .process-card {
        padding: 40px 15px;
    }

    .pages-nodes {
        flex-direction: row;
        gap: 10px;
    }

    .page-node {
        width: 100%;
        max-width: none;
    }

    .page-label {
        font-size: 11px;
        margin-bottom: 8px;
        word-break: keep-all;
    }

    .page-frame {
        height: 140px;
        border-radius: 6px;
    }

    .page-header {
        height: 14px;
    }

    .page-content {
        padding: 8px;
    }

    .s-line {
        height: 4px;
        margin-bottom: 6px;
    }

    .w-half {
        margin-bottom: 10px;
    }

    .s-card {
        height: 24px;
    }

    .s-card.large {
        height: 60px;
    }

    .s-grid {
        gap: 4px;
        margin-bottom: 4px;
    }

    .s-grid .s-card {
        height: 30px;
    }

    .buyer-node {
        margin-top: 30px;
    }

    .buyer-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 8px;
    }

    .buyer-label {
        font-size: 14px;
    }

    .flow-lines {
        bottom: 100px;
        height: 30px;
    }
}

/* --- 3번 섹션: 빈약한 페이지 제외 --- */
.section-reject {
    background-color: #FAFAFA;
}

.title-sub {
    font-size: 18px;
    font-weight: 500;
    color: #777777;
    margin-top: 12px;
}

.text-error {
    color: #FF5B5B !important;
}

.reject-card {
    padding: 60px 40px;
}

/* 추가 포인트 컬러 박스 */
.point-bg {
    background: #0095F8 !important;
}

.point-bg-light {
    background: rgba(0, 149, 248, 0.15) !important;
}

/* 빈약한 콘텐츠 페이지 느낌 */
.poor-frame {
    border: 1px dashed #AAAAAA;
    position: relative;
    /* 필터나 오퍼시티로 빈 느낌 강조 */
    background: #F8F9FA;
}

.empty-content {
    justify-content: flex-start;
}

/* X 표시 박스 */
.reject-mark {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translate(-50%, -50%) scale(0);
    color: #FF5B5B;
    font-size: 80px;
    font-weight: 900;
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
    z-index: 10;
    text-shadow: 0 4px 12px rgba(255, 91, 91, 0.3);
}

.poor-node.rejected .reject-mark {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.poor-node.rejected {
    /* 선택되지 않음 강조 */
    filter: grayscale(1);
    opacity: 0.6;
}

/* 애니메이션 공통 (A, C 업체 유지) */
.good-node {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.good-node.show {
    opacity: 1;
    transform: translateY(0);
}

.poor-node {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.5s ease;
}

.poor-node.show {
    opacity: 1;
    transform: translateY(0);
}

/* --- 4번 섹션: 스타트업 기업 (클리니어, 청소24 등) --- */
.startup-grid {
    display: flex;
    gap: 30px;
}

.startup-card {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.startup-card.show {
    opacity: 1;
    transform: translateY(0);
}

.startup-card:hover {
    transform: translateY(-8px);
    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}

/* 나중에 유저가 이미지를 채워넣을 빈 영역 */
.startup-image {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
    background-color: #EFEFEF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
    font-weight: 500;
}

.startup-info {
    padding: 30px;
}

.startup-name {
    font-size: 24px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 12px;
}

.startup-desc {
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
    word-break: keep-all;
}

/* 모바일 뷰 */
@media screen and (max-width: 768px) {
    .startup-grid {
        flex-direction: column;
        gap: 20px;
    }

    .startup-image {
        height: 200px;
    }

    .startup-info {
        padding: 24px;
    }

    .startup-name {
        font-size: 20px;
    }
}

/* --- 5번 섹션: 뻔한 장점 (클리셰) --- */
.section-cliche {
    background-color: #FAFAFA;
}

.cliche-grid {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.cliche-card {
    flex: 1;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 30px;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    border: 1px solid #EAEAEA;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.cliche-card.show {
    opacity: 1;
    transform: translateY(0);
}

.cliche-quote-icon {
    font-size: 60px;
    font-weight: 900;
    color: #E0E0E0;
    line-height: 1;
    margin-bottom: 20px;
    font-family: Georgia, serif;
    /* 따옴표 느낌을 살리기 위해 세리프 폰트 적용 */
}

.cliche-text {
    font-size: 20px;
    font-weight: 600;
    color: #555555;
    line-height: 1.5;
    word-break: keep-all;
}

/* 모바일 뷰 */
@media screen and (max-width: 768px) {
    .cliche-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .cliche-card {
        width: 100%;
        max-width: 100%;
        padding: 40px 20px;
    }
}

/* --- 6번 섹션: 광고비 누수 시각화 --- */
.leakage-grid {
    display: flex;
    gap: 30px;
}

.leakage-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid #EAEAEA;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.leakage-card.show {
    opacity: 1;
    transform: translateY(0);
}

.leakage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.leakage-anim-stage {
    width: 100%;
    height: 240px;
    background: #F8F9FA;
    border-radius: 16px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leakage-info {
    text-align: left;
}

.leakage-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: #222222;
    margin-bottom: 12px;
}

.leakage-desc {
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
}

/* 폰 프레임 공통 */
.phone-frame {
    width: 120px;
    height: 180px;
    background: #FFFFFF;
    border: 3px solid #333333;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 카드 1 요소들: 광고 클릭 */
.ph-header {
    height: 24px;
    background: #03C75A;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 900;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.ph-search {
    height: 20px;
    margin: 10px;
    border: 1px solid #03C75A;
    border-radius: 10px;
    font-size: 10px;
    color: #222;
    display: flex;
    align-items: center;
    padding-left: 8px;
}

.ph-result-line {
    background: #EEEEEE;
    height: 12px;
    width: 80%;
    margin: 0 auto 10px;
    border-radius: 4px;
}

.ph-target-link {
    background: #E8F0FE;
    border: 1px solid #8AB4F8;
    height: 24px;
    width: 85%;
    margin: 0 auto 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #1A73E8;
    animation: linkHighlight 3s infinite;
}

.cost-popup {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translate(-50%, -50%);
    background: #FF5B5B;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    animation: costPopupAnim 3s infinite;
}

/* 카드 2 요소들: 홈페이지 이탈 */
.ph-browser-bar {
    height: 24px;
    background: #F8F8F8;
    border-bottom: 1px solid #DDDDDD;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.ph-back-btn {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-url-bar {
    flex: 1;
    height: 10px;
    background: #E0E0E0;
    border-radius: 4px;
    margin-left: 8px;
}

.ph-page-content {
    padding: 12px;
}

.ph-line-h {
    background: #DDDDDD;
    height: 30px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.ph-line-m {
    background: #F0F0F0;
    height: 8px;
    width: 80%;
    border-radius: 4px;
    margin-bottom: 6px;
}

.ph-line-s {
    background: #F0F0F0;
    height: 8px;
    width: 60%;
    border-radius: 4px;
    margin-bottom: 6px;
}

.exit-popup {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translate(-50%, -50%);
    background: #333333;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    animation: exitPopupAnim 3s infinite reverse;
    /* 시간차 두기 */
}

/* 커서 공통 */
.ph-cursor {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 80%;
    left: 80%;
    z-index: 10;
}

.cursor-click {
    animation: cursorMoveClick 3s infinite ease-in-out;
}

.cursor-back {
    animation: cursorMoveBack 3s infinite ease-in-out reverse;
}

/* Keyframes */
@keyframes linkHighlight {

    0%,
    45% {
        background: #E8F0FE;
        border-color: #8AB4F8;
    }

    50% {
        background: #D2E3FC;
        border-color: #4285F4;
    }

    100% {
        background: #E8F0FE;
        border-color: #8AB4F8;
    }
}

@keyframes cursorMoveClick {
    0% {
        top: 80%;
        left: 80%;
        transform: scale(1);
    }

    40% {
        top: 50%;
        left: 55%;
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }

    60% {
        transform: scale(1);
    }

    100% {
        top: 50%;
        left: 55%;
        transform: scale(1);
    }
}

@keyframes costPopupAnim {

    0%,
    50% {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    60%,
    90% {
        opacity: 1;
        transform: translate(-50%, -70%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -70%);
    }
}

@keyframes cursorMoveBack {
    0% {
        top: 80%;
        left: 80%;
        transform: scale(1);
    }

    40% {
        top: 12%;
        left: 30%;
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }

    60% {
        transform: scale(1);
    }

    100% {
        top: 12%;
        left: 30%;
        transform: scale(1);
    }
}

@keyframes exitPopupAnim {

    0%,
    50% {
        opacity: 0;
        transform: translate(-50%, -20%);
    }

    60%,
    90% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }
}

/* 카드 3: 악순환 구조 */
.waste-card {
    border: 2px solid #FF5B5B;
    background: #FFF5F5 !important;
    /* 약간 구분되는 옅은 빨간 배경 */
}

.bg-waste {
    background: #FFEDED !important;
}

.dashboard-frame {
    width: 140px;
    height: 100px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border: 1px solid #EEEEEE;
}

.metric-group {
    margin-bottom: 12px;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #555555;
    white-space: nowrap;
}

.text-gray {
    color: #999999;
}

.metric-bar-bg {
    width: 100%;
    height: 6px;
    background: #EEEEEE;
    border-radius: 3px;
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.bar-cost {
    background: #FF5B5B;
    width: 0%;
    animation: fillCost 3s infinite ease-in-out;
}

.bar-result {
    background: #333333;
    width: 0%;
    animation: fillResult 3s infinite ease-in-out;
}

.warning-circle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 6px;
    height: 6px;
    background: #FF5B5B;
    border-radius: 50%;
    animation: pulseWarning 1.5s infinite;
}

@keyframes fillCost {
    0% {
        width: 0%;
    }

    20% {
        width: 80%;
    }

    40% {
        width: 95%;
    }

    80% {
        width: 95%;
    }

    100% {
        width: 0%;
    }
}

@keyframes fillResult {
    0% {
        width: 0%;
    }

    20% {
        width: 25%;
    }

    40% {
        width: 10%;
    }

    80% {
        width: 10%;
    }

    100% {
        width: 0%;
    }
}

@keyframes pulseWarning {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(1.5);
    }

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

/* 모바일 뷰 */
@media screen and (max-width: 768px) {
    .leakage-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .leakage-card {
        padding: 20px 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
        /* 두 카드의 높이를 100% 동일하게 강제 */
        min-width: 0;
        /* 내용물 크기에 비례해 너비가 변하는 현상 방지 */
        width: 100%;
        box-sizing: border-box;
    }

    .leakage-anim-stage {
        height: 160px;
        margin-bottom: 16px;
    }

    .leakage-title {
        font-size: 14px;
        /* 모바일에서 텍스트가 넘치지 않도록 조절 */
        word-break: keep-all;
    }

    .leakage-desc {
        font-size: 12px;
        word-break: keep-all;
        flex: 1;
        /* 카드 내용물이 적어도 아래쪽으로 확장되어 두 카드 사이즈가 일치하도록 함 */
    }

    /* 폰 프레임이 작은 카드 폭 안에서도 잘리지 않게 축소 */
    .phone-frame {
        transform: scale(0.8);
    }

    /* 3번째 카드 (비용 낭비 구조) - 전체 너비를 차지하며 가장 임팩트 있게 노출 */
    .waste-card {
        grid-column: 1 / -1;
        margin-top: 10px;
        padding: 30px 20px;
    }

    .waste-card .leakage-anim-stage {
        height: 200px;
    }

    .waste-card .dashboard-frame {
        transform: scale(1.15);
        /* 대시보드 확대 */
    }

    .waste-card .leakage-title {
        font-size: 20px;
        text-align: center;
    }

    .waste-card .leakage-desc {
        font-size: 14px;
        text-align: center;
    }
}

.analysis-section {
    position: relative;
    z-index: 10;
}

.analysis-section h2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.analysis-section h2.show {
    opacity: 1;
    transform: translateY(0);
}

/* 첫 번째 줄(검색 비교에서 승리하기 위해서는) 스타일 추가 */
.analysis-section h2 .main-line-1 {
    display: block;
    margin-bottom: 12px;
    font-size: 0.7em;
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

/* 두 번째 줄(홈페이지를 만들어서는 안됩니다.) 스타일 추가 */
.analysis-section h2 .main-line-2 {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.6s, transform 1s ease 0.6s;
    font-size: 1.1em;
    letter-spacing: -1px;
}

.analysis-section h2.show .main-line-1,
.analysis-section h2.show .main-line-2 {
    opacity: 1;
    transform: translateY(0);
}

.analysis-section .sub-message {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s;
    /* 메인 문구 완전히 나타난 후 스르륵 */
}

.analysis-section .sub-message.show {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 768px) {
    .analysis-section h2 {
        font-size: 2.2rem !important;
        line-height: 1.4 !important;
    }

    .analysis-section .sub-message {
        font-size: 2.2rem !important;
        line-height: 1.4 !important;
        margin-top: 40px !important;
        padding: 0 5px;
        word-break: keep-all;
    }
}

/* --- 8번 섹션: B2B 편의 메시지 예시 --- */
.b2b-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* PC 기준 2열 2행 배치 */
    gap: 24px;
    margin-top: 50px;
}

.b2b-card {
    position: relative;
    padding: 0;
    overflow: hidden;
    height: 380px;
    /* 원래의 날렵하고 정돈된 카드 비율 유지 */
    border-radius: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* 기본 섀도우 추가 */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.b2b-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.b2b-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333333;
    /* 임시 이미지가 없을 때 잘 보이도록 짙은 회색 지정 */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 500;
}

/* 텍스트 가독성을 위한 은은한 블랙 그라데이션 오버레이 */
.b2b-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
    z-index: 1;
}

.b2b-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.b2b-title {
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin: 0;
}

/* 카드 3: 시스템/관리자 편의 Mock UI */
.mock-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.02);
    width: 100%;
    color: #222222;
    text-align: left;
}

.mock-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}

.mock-text {
    flex: 1;
}

.mock-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.mock-sub {
    font-size: 12px;
    color: #777777;
}

/* 위아래로 둥둥 떠다니는 애니메이션 (클린어 스타일에 맞춤) */
.mock-anim-1 {
    animation: mockFloat 5s infinite ease-in-out;
}

.mock-anim-2 {
    animation: mockFloat 5s infinite ease-in-out 1.5s;
    /* 딜레이를 주어 엇갈려 움직이게 세팅 */
}

@keyframes mockFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* 9번 섹션 (데이터 모니터링) */
.section-insight {
    padding: 140px 0;
    background-color: #F8FAFC;
    /* 아주 연한 푸른빛이 도는 세련된 회색 (신뢰감) */
    text-align: center;
}

.insight-main-desc {
    max-width: 700px;
    margin: 0 auto 20px;
    font-size: 16px;
    color: #555555;
    word-break: keep-all;
}

.insight-main-desc strong {
    color: #111111;
    box-shadow: inset 0 -10px 0 rgba(0, 149, 248, 0.15);
    /* 은은한 형광펜 효과 */
}

.insight-points {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.ip-item {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 15px;
    color: #333333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ip-item strong {
    color: #0095F8;
    font-weight: 700;
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.insight-card {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.ic-top {
    padding: 40px 40px 30px;
    position: relative;
}

.ic-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 24px;
}

.ic-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    /* 빨간색 (경고) */
}

.ic-warn {
    background-color: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    /* 주황색 (주의) */
}

.ic-metric {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -3px;
    margin-bottom: 10px;
    color: #111111;
    line-height: 1;
}

.ic-unit {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #111111;
}

.ic-question {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: #444444;
}

.ic-divider {
    height: 1px;
    background-color: #EEEEEE;
    position: relative;
}

.ic-arrow {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 50%;
    padding: 6px;
    width: 36px;
    height: 36px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.ic-bottom {
    padding: 30px 40px 40px;
}

.ic-bg-error {
    background-color: #FEF2F2;
    /* 연한 빨강 배경 */
}

.ic-bg-warn {
    background-color: #FFFBEB;
    /* 연한 노랑 배경 */
}

.ic-answer-label {
    font-size: 13px;
    font-weight: 700;
    color: #0095F8;
    margin-bottom: 12px;
}

.ic-answer {
    font-size: 18px;
    line-height: 1.6;
    color: #222222;
}

.ic-answer strong {
    color: #111111;
    font-weight: 800;
}

/* ─ 후불제 보장 섹션 (화이트) ─ */
.guarantee-label {
    font-size: 13px;
    font-weight: 600;
    color: #AAAAAA;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.guarantee-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: #111111;
    line-height: 1.2;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

.guarantee-desc {
    font-size: 17px;
    color: #666666;
    line-height: 1.8;
    font-weight: 400;
}

/* CTA 버튼 호버 효과 */
.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.btn-sms:hover {
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);
}

/* 태블릿 뷰 */
@media screen and (max-width: 1024px) {
    .b2b-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .insight-grid {
        gap: 20px;
    }
}

/* 모바일 뷰 */
@media screen and (max-width: 768px) {
    .b2b-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .b2b-card {
        height: 260px;
        /* 모바일에서 아담하고 균형 있는 비율로 원복 */
    }

    .b2b-content {
        padding: 30px 20px;
    }

    .b2b-title {
        font-size: 20px;
    }

    .section-insight {
        padding: 80px 20px;
    }

    .insight-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .insight-main-desc {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .ic-top {
        padding: 30px 20px 25px;
    }

    .ic-bottom {
        padding: 25px 20px 30px;
    }

    .ic-metric {
        font-size: 52px;
    }

    .ic-question,
    .ic-answer {
        font-size: 17px;
    }
}

/* --- 9.5번 섹션: 데이터 분석 (클린 톤앤매너) --- */
.section-data-driven {
    background-color: #F8F9FA;
    padding: 120px 20px;
    color: #222222;
}

.section-data-driven .section-title {
    color: #222222;
    margin-bottom: 60px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -1px;
    word-break: keep-all;
}

.highlight-gray {
    font-size: 22px;
    font-weight: 500;
    color: #555555;
    margin-bottom: 12px;
    display: inline-block;
}

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

.dashboard-container {
    max-width: 1080px;
    margin: 40px auto 0;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid #E5E7EB;
    overflow: hidden;
}

.dashboard-header {
    background: #111111;
    padding: 16px 24px;
    display: flex;
    align-items: center;
}

.dash-title {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.dashboard-body {
    padding: 30px;
    background: #FAFAFA;
}

.dd-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 36px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.dd-card-wide {
    grid-column: 1 / -1;
}

.dd-wide-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.flex-1 {
    flex: 1;
}

.dd-text {
    margin-top: 24px;
}

.dd-card-wide .dd-text {
    margin-top: 0;
}

.dd-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.dd-card-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
    word-break: keep-all;
}

.dd-card-desc strong {
    color: #FF5B5B;
    font-weight: 700;
    background: rgba(255, 91, 91, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Vis */
.dd-viz {
    height: 140px;
    background: #F8F9FA;
    border-radius: 12px;
    border: 1px solid #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Vis 1 */
.dd-step-viz {
    gap: 8px;
    padding: 20px 10px;
}

.dd-node {
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    white-space: nowrap;
}

.kw-node {
    color: #555;
}

.pg-node {
    border-color: #0095F8;
    color: #0095F8;
    background: rgba(0, 149, 248, 0.05);
}

.dd-arrow {
    margin: 0 20px;
    color: #B0B8C1;
    font-weight: 700;
    font-size: 24px;
}

/* Vis 2 */
.dd-dashboard {
    gap: 40px;
}

.dd-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dd-stat-label {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 8px;
    font-weight: 500;
}

.dd-stat-val {
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    letter-spacing: -1px;
}

.dd-stat-unit {
    font-size: 16px;
    font-weight: 600;
    color: #6B7280;
    margin-left: 2px;
}

.action-node {
    background: rgba(22, 163, 74, 0.1);
    border-color: #16A34A;
    color: #16A34A;
}

.highlight-blue {
    color: #0095F8;
}

/* Vis 3 */
.dd-flow-cut {
    gap: 20px;
}

.dd-flow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    border-radius: 12px;
    width: 160px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.bad-ad {
    background: #FFF5F5;
    border: 1px solid #FFE5E5;
}

.good-ad {
    background: #F0FDF4;
    border: 1px solid #DCFCE7;
}

.dd-flow-name {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin-bottom: 4px;
}

.dd-flow-metric {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.dd-block-icon {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    background: #FF5B5B;
    padding: 4px 12px;
    border-radius: 20px;
}

.dd-invest-icon {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    background: #16A34A;
    padding: 4px 12px;
    border-radius: 20px;
}

.dd-flow-arrow {
    color: #9CA3AF;
    font-size: 14px;
    font-weight: 700;
}

@media screen and (max-width: 768px) {
    .section-data-driven {
        padding: 80px 20px;
    }

    .section-data-driven .section-title {
        font-size: 28px;
    }

    .highlight-gray {
        font-size: 16px;
    }

    .dd-grid {
        grid-template-columns: 1fr;
    }

    .dd-wide-content {
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
    }

    .dd-card-wide .dd-text {
        margin-top: 20px;
    }

    .dd-viz {
        height: auto;
        padding: 24px 16px;
    }

    .dd-step-viz {
        flex-direction: column;
        gap: 8px;
    }

    .dd-step-viz .dd-arrow {
        transform: rotate(90deg);
        margin: 0;
        font-size: 20px;
    }

    .dd-flow-cut {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .dd-flow-item {
        width: 100%;
    }
}

/* 하단 플로팅 초안 버튼 */
.floating-draft-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    color: #333333;
    border: 1px solid #EAEAEA;
    border-radius: 40px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    z-index: 9999;
    white-space: nowrap;
    text-align: center;
    letter-spacing: -0.3px;
    transition: transform 0.2s, background 0.2s;
}
.floating-draft-btn:hover {
    background: #FFFFFF;
    transform: translateY(-2px);
}
.floating-draft-btn b {
    color: #0095F8;
    font-weight: 700;
}