/*
   키워드분석 모바일 기능 안내 페이지 스타일
   #diad-kt-func-mobile-wrap 컨테이너 내의 스타일 정의
*/

/* [FORCE RESET] 모바일 전용 환경 격리 설정 */
#diad-kt-func-mobile-wrap {
    all: unset !important;
    display: block !important;
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
    line-height: 1.5 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

#diad-kt-func-mobile-wrap * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

#diad-kt-func-mobile-wrap img,
#diad-kt-func-mobile-wrap svg {
    max-width: 100%;
    height: auto;
}

/* [LAYOUT] */
#diad-kt-func-mobile-wrap .m-kt-section {
    display: block !important;
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    padding: 56px 0 !important;
}

#diad-kt-func-mobile-wrap .m-kt-container {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

#diad-kt-func-mobile-wrap .m-kt-gradient-text {
    background: linear-gradient(to right, #818cf8, #d8b4fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#diad-kt-func-mobile-wrap .m-kt-btn-primary {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
    background: #5d5fef !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px -6px rgba(93, 95, 239, 0.5) !important;
}

/* ==========================================================================
   Step Section Header
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-step-header {
    margin-bottom: 48px !important;
    text-align: center !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-label {
    display: inline-block !important;
    margin-bottom: 10px !important;
    color: #5d5fef !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-header h2 {
    margin-bottom: 12px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    word-break: keep-all !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-header p {
    font-size: 14px !important;
    color: #6b7280 !important;
    word-break: keep-all !important;
}

/* ==========================================================================
   Step Item (visual card above text)
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-step-item {
    margin-bottom: 60px !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-item:last-child {
    margin-bottom: 0 !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-visual {
    margin-bottom: 22px !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-content h3 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    word-break: keep-all !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    background: rgba(93, 95, 239, 0.1) !important;
    border-radius: 50% !important;
    color: #5d5fef !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-content p {
    color: #6b7280 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    word-break: keep-all !important;
}

/* ==========================================================================
   Step 01: 요약 패널
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-mock-kw-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 16px !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-kw-badge svg { width: 13px !important; height: 13px !important; color: #9ca3af !important; flex-shrink: 0 !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-stats-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-stat {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 4px !important;
    text-align: center !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-stat-source { display: block !important; font-size: 9px !important; color: #9ca3af !important; font-weight: 600 !important; margin-bottom: 3px !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-stat-label { display: block !important; font-size: 10px !important; color: #6b7280 !important; font-weight: 600 !important; margin-bottom: 6px !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-stat-value { display: block !important; font-size: 14px !important; font-weight: 800 !important; color: #111827 !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-stat-naver .m-kt-mock-stat-value { color: #03c75a !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-stat-google .m-kt-mock-stat-value { color: #4285f4 !important; }

/* ==========================================================================
   Step 02: 검색 인사이트
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-mock-tabs {
    display: flex !important;
    gap: 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 16px !important;
    padding-bottom: 2px !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-tab {
    padding: 6px 2px 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    border-bottom: 2px solid transparent !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-tab.active { color: #03c75a !important; border-bottom-color: #03c75a !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-pills { display: flex !important; gap: 6px !important; margin-bottom: 16px !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-pill {
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-pill.active { background: #5d5fef !important; border-color: #5d5fef !important; color: #fff !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-chart {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 5px !important;
    height: 90px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 10px 10px !important;
    margin-bottom: 16px !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-bar {
    flex: 1 !important;
    background: linear-gradient(180deg, #818cf8 0%, #5d5fef 100%) !important;
    border-radius: 3px 3px 0 0 !important;
    animation: ktMobileBarRise 1.6s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-bar:nth-child(1) { animation-delay: 0.05s !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-bar:nth-child(2) { animation-delay: 0.15s !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-bar:nth-child(3) { animation-delay: 0.25s !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-bar:nth-child(4) { animation-delay: 0.35s !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-bar:nth-child(5) { animation-delay: 0.45s !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-bar:nth-child(6) { animation-delay: 0.55s !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-bar:nth-child(7) { animation-delay: 0.65s !important; }
@keyframes ktMobileBarRise {
    from { transform: scaleY(0); transform-origin: bottom; }
    to { transform: scaleY(1); transform-origin: bottom; }
}
#diad-kt-func-mobile-wrap .m-kt-mock-insight {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(93, 95, 239, 0.06) !important;
    border: 1px solid rgba(93, 95, 239, 0.2) !important;
    border-radius: 8px !important;
    padding: 11px 13px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #5d5fef !important;
    word-break: keep-all !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-insight svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; }

/* ==========================================================================
   Step 03: 연관 키워드 (가로 스크롤 테이블)
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-mock-table-container {
    width: 100% !important;
    padding-bottom: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-table {
    width: 420px !important;
    border-collapse: collapse !important;
    text-align: center !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-table th {
    padding: 9px 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    white-space: nowrap !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-table td {
    padding: 11px 6px !important;
    font-size: 12.5px !important;
    border-bottom: 1px solid #eee !important;
    color: #111827 !important;
    white-space: nowrap !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-table tr:last-child td { border-bottom: none !important; }
#diad-kt-func-mobile-wrap .m-kt-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 9px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
}
#diad-kt-func-mobile-wrap .m-kt-badge-high { background-color: #fef2f2 !important; color: #ef4444 !important; border-color: #fecaca !important; }
#diad-kt-func-mobile-wrap .m-kt-badge-mid { background-color: #fffbeb !important; color: #d97706 !important; border-color: #fde68a !important; }
#diad-kt-func-mobile-wrap .m-kt-badge-low { background-color: #f0fdf4 !important; color: #16a34a !important; border-color: #bbf7d0 !important; }

/* ==========================================================================
   Step 04: 콘텐츠 인사이트
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-mock-hbars { margin-bottom: 16px !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-hbar-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-hbar-label { flex: 0 0 44px !important; font-size: 12px !important; font-weight: 700 !important; color: #6b7280 !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-hbar-track {
    flex: 1 !important;
    height: 10px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-hbar-fill { height: 100% !important; background: linear-gradient(90deg, #818cf8, #5d5fef) !important; border-radius: 9999px !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-hbar-value { flex: 0 0 34px !important; text-align: right !important; font-size: 12px !important; font-weight: 700 !important; color: #111827 !important; }

/* ==========================================================================
   Step 05: 다중 키워드 비교 (다크 하이라이트 밴드)
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-step-highlight {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-highlight::before {
    content: '' !important;
    position: absolute !important;
    top: -30% !important;
    right: -30% !important;
    width: 320px !important;
    height: 320px !important;
    background: radial-gradient(circle, rgba(93, 95, 239, 0.3) 0%, rgba(0, 0, 0, 0) 60%) !important;
    pointer-events: none !important;
}
#diad-kt-func-mobile-wrap .m-kt-step-highlight .m-kt-container { position: relative !important; z-index: 1 !important; }
#diad-kt-func-mobile-wrap .m-kt-step-highlight .m-kt-step-num { background-color: rgba(93, 95, 239, 0.3) !important; color: #a5b4fc !important; }
#diad-kt-func-mobile-wrap .m-kt-step-highlight .m-kt-step-content h3 { color: #fff !important; }
#diad-kt-func-mobile-wrap .m-kt-step-highlight .m-kt-step-content p { color: rgba(255, 255, 255, 0.72) !important; }
#diad-kt-func-mobile-wrap .m-kt-step-highlight .m-kt-step-visual { box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important; }

#diad-kt-func-mobile-wrap .m-kt-mock-chips { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 18px !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(93, 95, 239, 0.08) !important;
    border: 1px solid rgba(93, 95, 239, 0.25) !important;
    color: #5d5fef !important;
    border-radius: 9999px !important;
    padding: 6px 6px 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
#diad-kt-func-mobile-wrap .m-kt-mock-chip-x { color: #5d5fef !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; padding: 2px 3px !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-chip-count { margin-left: auto !important; font-size: 12px !important; font-weight: 700 !important; color: #9ca3af !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-multiline { background: #f9fafb !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; padding: 14px !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-multiline svg { width: 100% !important; height: 140px !important; max-height: 140px !important; display: block !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-legend { display: flex !important; gap: 12px !important; justify-content: center !important; margin-top: 12px !important; flex-wrap: wrap !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-legend-item { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 11.5px !important; font-weight: 600 !important; color: #6b7280 !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-legend-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; display: inline-block !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-legend-dot.c1 { background: #5d5fef !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-legend-dot.c2 { background: #4285f4 !important; }
#diad-kt-func-mobile-wrap .m-kt-mock-legend-dot.c3 { background: #f59e0b !important; }

/* ==========================================================================
   Step 06: 부가 기능 (미니 카드)
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-mini-cards { display: flex !important; flex-direction: column !important; gap: 12px !important; }
#diad-kt-func-mobile-wrap .m-kt-mini-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 15px 16px !important;
}
#diad-kt-func-mobile-wrap .m-kt-mini-card-icon {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(93, 95, 239, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #5d5fef !important;
}
#diad-kt-func-mobile-wrap .m-kt-mini-card-icon svg { width: 19px !important; height: 19px !important; }
#diad-kt-func-mobile-wrap .m-kt-mini-card-text strong { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #111827 !important; margin-bottom: 2px !important; }
#diad-kt-func-mobile-wrap .m-kt-mini-card-text span { font-size: 12px !important; color: #6b7280 !important; }

/* ==========================================================================
   무료 배너 (다크 네온)
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-benefit-box {
    position: relative !important;
    overflow: hidden !important;
    padding: 40px 22px !important;
    background: linear-gradient(135deg, #111327 0%, #1e1b4b 100%) !important;
    border: 1px solid rgba(93, 95, 239, 0.4) !important;
    border-radius: 16px !important;
    text-align: center !important;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.45), inset 0 0 50px rgba(93, 95, 239, 0.08) !important;
}
#diad-kt-func-mobile-wrap .m-kt-benefit-box::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle at center, rgba(93, 95, 239, 0.2) 0%, rgba(0, 0, 0, 0) 55%) !important;
    pointer-events: none !important;
}
#diad-kt-func-mobile-wrap .m-kt-benefit-box > * { position: relative !important; z-index: 1 !important; }
#diad-kt-func-mobile-wrap .m-kt-benefit-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #5d5fef !important;
    color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}
#diad-kt-func-mobile-wrap .m-kt-benefit-badge svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }
#diad-kt-func-mobile-wrap .m-kt-benefit-box h2 { font-size: 22px !important; font-weight: 800 !important; margin-bottom: 14px !important; color: #fff !important; word-break: keep-all !important; }
#diad-kt-func-mobile-wrap .m-kt-benefit-box h2 .m-kt-gradient-text { text-shadow: 0 0 20px rgba(139, 92, 246, 0.55) !important; }
#diad-kt-func-mobile-wrap .m-kt-benefit-box p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    line-height: 1.7 !important;
    word-break: keep-all !important;
}

/* ==========================================================================
   CTA
   ========================================================================== */
#diad-kt-func-mobile-wrap .m-kt-cta {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
    text-align: center !important;
}
#diad-kt-func-mobile-wrap .m-kt-cta h2 {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
    word-break: keep-all !important;
}
#diad-kt-func-mobile-wrap .m-kt-cta p {
    color: #9ca3af !important;
    font-size: 14px !important;
    margin-bottom: 26px !important;
    line-height: 1.6 !important;
    word-break: keep-all !important;
}

/* Sticky sub-header (외부 헤더 블록, wrap 스코프 밖) */
.m-kt-sticky-header { position: sticky !important; top: 12px !important; z-index: 1999 !important; width: 100% !important; margin: 0 auto !important; background: #fff !important; }

@media (prefers-reduced-motion: reduce) {
    #diad-kt-func-mobile-wrap *,
    #diad-kt-func-mobile-wrap *::before,
    #diad-kt-func-mobile-wrap *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }
}