/* ========================================
   CodeScan Scan & Landing Styles
   Premium v2.0
   ======================================== */

/* CodeScan badge */
.codescan-badge {
    display: inline-block;
    padding: 0.4rem 1.25rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    background: var(--primary-subtle, rgba(0, 255, 156, 0.08));
    color: var(--primary-light, var(--primary-light));
    border: 1px solid rgba(0, 255, 156, 0.2);
}

.scan-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

/* ========================================
   Scan Form
   ======================================== */
.scan-form-card {
    padding: 1.75rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition), color var(--transition);
    position: relative;
    overflow: hidden;
}

.scan-form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 156, 0.2), transparent);
}

.scan-form-card:focus-within {
    border-color: rgba(0, 255, 156, 0.4);
    box-shadow: 0 0 0 3px var(--primary-glow), 0 8px 40px rgba(0, 0, 0, 0.3);
}

.scan-input-wrap {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.scan-input-wrap input[type="text"] {
    flex: 1;
    min-width: 280px;
    margin-bottom: 0;
    font-size: 1.05rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition), color var(--transition);
    color: var(--text);
}

.scan-input-wrap input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.scan-btn {
    padding: 0.85rem 2.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 140px;
    border-radius: var(--radius-sm);
}

.scan-error {
    color: #ef4444;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

.scan-hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.notice-banner {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #93c5fd;
    font-size: 0.9rem;
    line-height: 1.5;
}

.warning-banner {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.result-ready-banner {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    color: #86efac;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-result {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ========================================
   Result Header
   ======================================== */
.result-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.grade-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 4px solid;
    position: relative;
}

.grade-circle::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    opacity: 0.15;
    border: 2px solid;
    border-color: inherit;
}

.grade-letter {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
}

.grade-score {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Grade colors — style.css :root --grade-* 캐노니컬 토큰 사용(웹/코드스캔 공통, #13) */
.grade-A {
    border-color: var(--grade-a);
    background: rgba(34, 197, 94, 0.06);
}
.grade-A .grade-letter, .grade-A .grade-score { color: var(--grade-a); }
.grade-A::after { border-color: var(--grade-a); }

.grade-B {
    border-color: var(--grade-b);
    background: rgba(59, 130, 246, 0.06);
}
.grade-B .grade-letter, .grade-B .grade-score { color: var(--grade-b); }
.grade-B::after { border-color: var(--grade-b); }

.grade-C {
    border-color: var(--grade-c);
    background: rgba(234, 179, 8, 0.06);
}
.grade-C .grade-letter, .grade-C .grade-score { color: var(--grade-c); }
.grade-C::after { border-color: var(--grade-c); }

.grade-D {
    border-color: var(--grade-d);
    background: rgba(249, 115, 22, 0.06);
}
.grade-D .grade-letter, .grade-D .grade-score { color: var(--grade-d); }
.grade-D::after { border-color: var(--grade-d); }

.grade-F {
    border-color: var(--grade-f);
    background: rgba(239, 68, 68, 0.06);
}
.grade-F .grade-letter, .grade-F .grade-score { color: var(--grade-f); }
.grade-F::after { border-color: var(--grade-f); }

.result-summary h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

.result-url {
    color: var(--text-sub);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    word-break: break-all;
    font-family: var(--font-mono);
}

/* ========================================
   Severity Badges
   ======================================== */
.severity-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sev-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.sev-critical {
    background: var(--sev-critical-bg);
    color: var(--sev-critical);
}

.sev-high {
    background: var(--sev-high-bg);
    color: var(--sev-high);
}

.sev-medium {
    background: var(--sev-medium-bg);
    color: var(--sev-medium);
}

.sev-low {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.sev-info {
    background: rgba(139, 148, 158, 0.1);
    color: #8b949e;
}

/* Severity Legend */
.severity-legend {
    margin-top: 0.75rem;
    width: 100%;
}
.severity-legend summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary, #8b949e);
    padding: 0.4rem 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.severity-legend summary::before {
    content: '?';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--text-secondary, #8b949e);
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.severity-legend summary::-webkit-details-marker { display: none; }
.severity-legend[open] summary { color: var(--text-primary, #e6edf3); }
.severity-legend-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0;
}
.legend-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: var(--bg-secondary, rgba(255,255,255,0.03));
}
.legend-row .sev-badge {
    flex-shrink: 0;
    min-width: 52px;
    justify-content: center;
    margin-top: 2px;
}
.legend-row strong {
    font-size: 0.85rem;
    color: var(--text-primary, #e6edf3);
}
.legend-row p {
    font-size: 0.78rem;
    color: var(--text-secondary, #8b949e);
    margin: 0.2rem 0 0;
    line-height: 1.5;
}

/* ========================================
   Category Score Bars
   ======================================== */
.category-scores {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.category-scores h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.score-bar-item {
    margin-bottom: 1.25rem;
}

.score-bar-item:last-child {
    margin-bottom: 0;
}

.score-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.score-bar-label span:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.score-bar-track {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    will-change: width;
    contain: layout style;
}

.score-bar-fill[data-score="100"] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

/* ========================================
   Open Ports
   ======================================== */
.open-ports-section {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.open-ports-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.port-tags {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.port-tag {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    background: rgba(249, 115, 22, 0.08);
    color: var(--accent-orange);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

/* ========================================
   SSL Info
   ======================================== */
.ssl-info-section {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.ssl-info-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ssl-info-grid {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.ssl-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ssl-info-key {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.ssl-info-val {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

/* ========================================
   Findings
   ======================================== */
.findings-section {
    margin-top: 1.5rem;
}

.findings-section > h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.finding-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
    transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition), color var(--transition);
    cursor: pointer;
}

.finding-card:hover {
    background: var(--bg-card-hover);
}

.finding-critical { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.28); }
.finding-high { background: rgba(249,115,22,0.06); border-color: rgba(249,115,22,0.28); }
.finding-medium { background: rgba(234,179,8,0.06); border-color: rgba(234,179,8,0.28); }
.finding-low { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.28); }
.finding-info { background: rgba(72,79,88,0.08); border-color: rgba(72,79,88,0.32); }

.finding-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.finding-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.finding-desc {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 0.75rem;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.finding-fix {
    font-size: 0.88rem;
    color: var(--text);
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.4rem;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.finding-fix strong {
    color: var(--primary);
}

.finding-location {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 0.4rem;
}

/* ========================================
   Disclaimer
   ======================================== */
.disclaimer {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(139, 148, 158, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.disclaimer p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.disclaimer-brand {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0.6;
}

/* ========================================
   Landing: Target Audience
   ======================================== */
.audience-card h3 {
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* ========================================
   Locked / Blur / Payment
   ======================================== */
.locked-section {
    position: relative;
    margin-top: 2rem;
}

.locked-findings-blur {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.finding-card-blur {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.blur-line {
    height: 14px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    margin-bottom: 8px;
}
.blur-line.blur-title { width: 55%; height: 18px; }
.blur-line.blur-desc { width: 85%; }
.blur-line.short { width: 35%; }

.locked-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    background: rgba(7, 9, 14, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2.5rem 3rem;
    border-radius: 16px;
    border: 1px solid rgba(0, 255, 156, 0.3);
    box-shadow: 0 0 60px rgba(0, 255, 156, 0.15), 0 0 120px rgba(0, 255, 156, 0.05);
}

.lock-icon { font-size: 2.5rem; margin-bottom: 1rem; }

.locked-cta p {
    color: var(--text-sub);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.locked-cta .price-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* 2026-09-05: 흰 글자/그린 배경 = 대비 1.33:1 — WCAG 큰글자 기준(3:1)에도 미달.
   .btn·.lv-btn.primary는 --primary-text(#04110a)로 대비를 확보하는데
   정작 결제 버튼 3중 정의만 전부 white였다. (자기폴백 var(--primary,var(--primary))도 정리) */
.btn-pay {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--primary-text);
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 1rem;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
    display: inline-block;
    position: relative;
    overflow: hidden;
    font-family: var(--font, inherit);
}
.btn-pay::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
.btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 255, 156, 0.3);
}
.btn-pay:hover::before { opacity: 1; }

/* 잠긴 상품 그리드 */
.locked-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}
.locked-product-card {
    position: relative;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, rgba(0, 255, 156, 0.06), rgba(0, 255, 156, 0.02));
    border: 1px solid rgba(0, 255, 156, 0.2);
    border-radius: 8px;
}
.locked-product-card::after {
    content: '🔒';
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    font-size: 0.75rem;
    opacity: 0.5;
}
.locked-product-card .lp-icon { font-size: 1.3rem; margin-bottom: 0.3rem; }
.locked-product-card .lp-title { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; }
.locked-product-card .lp-desc { font-size: 0.78rem; color: var(--text-sub); line-height: 1.45; margin-bottom: 0.4rem; }
.locked-product-card .lp-count { font-size: 0.72rem; color: var(--primary); font-weight: 600; }

/* 3종 CTA 분기 */
.cta-3way {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.cta-variant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 0.5rem;
    margin-top: 0 !important;
    font-size: 0.85rem;
    text-align: center;
    font-weight: 700;
    line-height: 1.3;
}
.cta-variant .cta-emoji { font-size: 1.15rem; }
.cta-variant .cta-text { font-size: 0.85rem; font-weight: 700; }
.cta-variant .cta-sub { font-size: 0.68rem; opacity: 0.85; font-weight: 500; }
@media (max-width: 640px) {
    .cta-3way { grid-template-columns: 1fr; }
    .cta-variant { flex-direction: row; justify-content: center; gap: 0.5rem; padding: 0.65rem; }
    .cta-variant .cta-sub { display: none; }
    /* P2-A 모바일 가독성 — 12.48px → 14~15px 고정 */
    .scan-form-card p { font-size: 0.9375rem; line-height: 1.55; }
    .pro-session-banner span,
    .pro-session-banner p { font-size: 0.9375rem; line-height: 1.55; }
}

/* Payment Modal */
/* z-index 주의: 쿠키 동의 배너(base.html #csCookieBanner)가 fixed·bottom:0·z-index:9999다.
   모바일(<=640px)에서 이 모달은 바텀시트이고 '결제하기'는 sticky bottom:0 이라,
   오버레이가 배너보다 낮으면 결제 버튼이 배너에 통째로 가려진다.
   배너는 cs_cookie_ok 없는 '첫 방문자'에게만 뜬다 = 첫 결제를 할 바로 그 사람.
   배너가 DOM상 <main> 뒤에 있어 동점(9999)이면 배너가 이긴다 → 반드시 더 커야 한다.
   (2026-09-04 확인. samplePreviewModal의 인라인 z-index:9999도 같은 이유로 무효였다) */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem 1rem;
}
.modal-overlay.active { display: flex; }

.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    margin: auto;
}

.modal-box h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--text);
}

.modal-box label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.modal-box input[type="email"],
.modal-box input[type="text"],
.modal-box input[type="tel"] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 1rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    margin-bottom: 0.75rem;
    box-sizing: border-box;
    min-height: 44px;
}

.modal-box input[type="email"]:focus {
    outline: none;
    border-color: var(--primary);
}

.modal-price-info {
    background: rgba(0, 255, 156, 0.08);
    border: 1px solid rgba(0, 255, 156, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-price-info span:first-child {
    color: var(--text-sub);
    font-size: 0.9rem;
}

.modal-price-info span:last-child {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-buttons {
    display: flex;
    gap: 0.75rem;
}

.modal-buttons .btn-pay {
    flex: 1;
    text-align: center;
    margin-top: 0;
}

.btn-cancel {
    flex: 1;
    padding: 0.9rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-sub);
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
}
.btn-cancel:hover {
    background: rgba(255,255,255,0.05);
}

/* ========================================
   Secret Alert
   ======================================== */
.secret-alert {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.secret-alert h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ef4444;
}

.secret-summary {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}

.secret-type-tag {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.secret-details {
    margin-top: 1rem;
}

.secret-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(239, 68, 68, 0.1);
    font-size: 0.88rem;
    flex-wrap: wrap;
}

.secret-item:last-child {
    border-bottom: none;
}

.secret-item-type {
    color: #fca5a5;
    font-weight: 600;
    min-width: 120px;
}

.secret-item-value {
    font-family: var(--font-mono);
    color: var(--text-sub);
    background: rgba(0,0,0,0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.82rem;
}

.secret-item-location {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.secret-pro-hint, .error-pro-hint {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-top: 0.5rem;
    font-style: italic;
}

/* ========================================
   Error Alert
   ======================================== */
.error-alert {
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.35);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.error-alert h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #f97316;
}

.error-summary {
    margin-bottom: 0.75rem;
}

.error-detail-list {
    margin-top: 1rem;
}

.error-detail-item {
    display: flex;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(249, 115, 22, 0.1);
    font-size: 0.88rem;
}

.error-detail-item:last-child {
    border-bottom: none;
}

.error-detail-pattern {
    color: var(--accent-orange);
    font-weight: 600;
    min-width: 150px;
}

.error-detail-path {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

/* ========================================
   Share Section
   ======================================== */
.share-section {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.share-section h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.share-buttons {
    display: flex;
    gap: 0.75rem;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-sub);
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
}

.share-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--primary);
    color: var(--text);
}

.share-twitter:hover {
    border-color: #1d9bf0;
    color: #1d9bf0;
}

/* ========================================
   Badge Preview
   ======================================== */
.badge-preview-section {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.badge-preview-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.badge-preview-wrap {
    position: relative;
    display: inline-block;
}

.badge-preview-img {
    display: block;
}

.badge-blurred {
    filter: blur(3px);
    opacity: 0.6;
}

.badge-pro-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-pro-overlay span {
    background: rgba(0, 255, 156, 0.9);
    color: white;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-embed-code {
    margin-top: 1rem;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}

.badge-embed-code code {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-sub);
    white-space: nowrap;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .result-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .severity-badges {
        justify-content: center;
    }

    .ssl-info-grid {
        flex-direction: column;
        gap: 1rem;
    }

    .scan-input-wrap {
        flex-direction: column;
    }

    .scan-input-wrap input[type="text"] {
        min-width: 100%;
    }

    .scan-btn {
        width: 100%;
    }

    .grade-circle {
        width: 120px;
        height: 120px;
    }

    .grade-letter {
        font-size: 2.5rem;
    }
}

/* ========================================
   AI Fix Guide
   ======================================== */
.fix-guide-section {
    margin-top: 2rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.fix-guide-section > h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--accent-cyan);
}

.fix-guide-intro {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.fix-guide-card {
    background: rgba(77, 212, 255, 0.04);
    border: 1px solid rgba(77, 212, 255, 0.15);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.fix-guide-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.fix-guide-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.fix-guide-explanation {
    font-size: 0.88rem;
    color: var(--text-sub);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.fix-prompt-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(77, 212, 255, 0.18);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.fix-prompt-text {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.copy-btn {
    flex-shrink: 0;
    background: rgba(77, 212, 255, 0.12);
    color: #4dd4ff;
    border: 1px solid rgba(77, 212, 255, 0.28);
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.copy-btn:hover {
    background: rgba(77, 212, 255, 0.22);
    color: #7de5ff;
}

/* Config blocks (실행 가능 설정 블록) */
.config-blocks-box {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.cfg-block {
    margin-top: 0.5rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(77,212,255,0.18);
    border-radius: 6px;
    overflow: hidden;
}
.cfg-block summary {
    cursor: pointer;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    list-style: none;
    user-select: none;
    color: var(--text-sub);
}
.cfg-block summary::-webkit-details-marker { display: none; }
.cfg-block summary::before { content: '▸ '; margin-right: 0.3rem; color: #4dd4ff; }
.cfg-block[open] summary::before { content: '▾ '; }
.cfg-block[open] summary { background: rgba(77,212,255,0.07); border-bottom: 1px solid rgba(77,212,255,0.15); color: var(--text); font-weight: 600; }
.cfg-platform { color: #7de5ff; font-weight: 600; }
.cfg-code-wrap {
    position: relative;
    padding: 0.75rem 0.85rem;
}
.cfg-code {
    margin: 0;
    padding-right: 3.5rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: #e5e7eb;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
}
.cfg-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(77,212,255,0.14);
    color: #4dd4ff;
    border: 1px solid rgba(77,212,255,0.28);
    padding: 0.3rem 0.7rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s, border-color 0.15s, background-color 0.15s, color 0.15s;
}
.cfg-copy-btn:hover { background: rgba(77,212,255,0.26); }

/* 4종 복사 버튼 그리드 */
.copy-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    margin-top: 0.85rem;
}
.copy-btn-large {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    background: rgba(77,212,255,0.06);
    border: 1px solid rgba(77,212,255,0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
    text-align: left;
    color: var(--text);
    font-family: inherit;
}
.copy-btn-large:hover {
    background: rgba(77,212,255,0.12);
    border-color: rgba(77,212,255,0.4);
    transform: translateY(-1px);
}
.copy-btn-large .cb-icon { font-size: 1.15rem; }
.copy-btn-large .cb-label { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.copy-btn-large .cb-sub { font-size: 0.72rem; color: var(--text-muted); }

.fix-guide-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.fix-guide-locked {
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(77, 212, 255, 0.04);
    border: 1px solid rgba(77, 212, 255, 0.15);
    border-radius: 10px;
}

.fix-locked-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.fix-guide-locked p {
    color: var(--text-sub);
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.fix-locked-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* ========================================
   CTA Conversion Boost
   ======================================== */
.original-price {
    text-decoration: line-through;
    color: #6b7280;
    font-size: 0.9rem;
}
.discount-price {
    color: #22c55e;
    font-size: 1.3rem;
    font-weight: 800;
}
.discount-badge {
    background: #22c55e;
    color: #0a0e17;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}
.trust-line {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #6b7280;
}
.severity-chips {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}
.sev-chip {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}
.sev-chip.critical { background: var(--sev-critical); }
.sev-chip.high { background: var(--sev-high); }
.sev-chip.medium { background: var(--sev-medium); }
.sev-chip-total {
    font-size: 0.8rem;
    color: var(--text-sub);
    font-weight: 600;
}
.cta-price-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
    flex-wrap: wrap;
}

/* Modal Includes */
.modal-includes {
    text-align: left;
    margin: 1rem 0;
    padding: 0.75rem;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
}
.include-item {
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: #d1d5db;
}
.trust-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0.75rem 0;
    font-size: 0.7rem;
    color: #6b7280;
}

/* ========================================
   Landing: Danger Stats
   ======================================== */
.danger-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 2rem auto;
}
.danger-card {
    text-align: center;
    padding: 1.5rem;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
}
.danger-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ef4444;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.danger-desc {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.5;
}
.danger-source {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* ========================================
   Landing: 11 Features Grid
   ======================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 800px;
    margin: 2rem auto;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}
.feature-item.highlight {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}
.feature-icon { font-size: 1.1rem; }

/* ========================================
   Landing: Compare Table
   ======================================== */
.compare-table-wrap {
    overflow-x: auto;
    max-width: 800px;
    margin: 2rem auto;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.compare-table th, .compare-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.compare-table th { color: var(--text-muted); font-weight: 500; }
.compare-table th.ours, .compare-table td.ours {
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary);
    font-weight: 600;
}

/* ========================================
   Landing: Social Proof
   ======================================== */
.social-proof {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
}
.proof-item { text-align: center; }
.proof-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
}
.proof-label {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-top: 0.25rem;
}

/* ========================================
   Scan: Impact & Steps (Paid)
   ======================================== */
.impact-box {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
}
.impact-box.impact-critical { background: rgba(220, 38, 38, 0.1); border: 1px solid rgba(220,38,38,0.35); }
.impact-box.impact-high { background: rgba(234, 88, 12, 0.1); border: 1px solid rgba(234,88,12,0.35); }
.impact-box.impact-medium { background: rgba(202, 138, 4, 0.1); border: 1px solid rgba(202,138,4,0.35); }
.impact-box.impact-low { background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37,99,235,0.35); }
.impact-box.impact-info { background: rgba(107, 114, 128, 0.1); border: 1px solid rgba(107,114,128,0.35); }

.steps-box {
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}
.steps-box ol {
    margin: 0.5rem 0 0 1.25rem;
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.8;
    padding-left: 0;
}

/* ========================================
   Responsive: Landing new sections
   ======================================== */
@media (max-width: 768px) {
    .danger-stats { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .social-proof { gap: 1.5rem; flex-wrap: wrap; }
    .email-lead-form { flex-direction: column; }
    .email-lead-form button { min-height: 44px; }
}
@media (max-width: 480px) {
    .danger-stats { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
}

/* ========================================
   Compare table check marks
   ======================================== */
.check-yes {
    color: #22c55e;
    font-weight: 800;
    font-size: 1.2rem;
}
.check-no {
    color: #ef4444;
    font-weight: 800;
    font-size: 1.2rem;
}
.compare-table th.ours {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    font-weight: 700;
}
.compare-table td.ours {
    background: rgba(59, 130, 246, 0.08);
}

/* ========================================
   Danger alert banner (scan result)
   ======================================== */
.danger-alert {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.danger-alert-icon { font-size: 1.5rem; }
.danger-alert-content strong { color: #fca5a5; font-size: 1rem; }
.danger-alert-content p { color: #d4d4d8; font-size: 0.85rem; margin-top: 0.5rem; line-height: 1.6; }

/* ========================================
   Consequence warning on free findings
   ======================================== */
.consequence-warn {
    font-size: 0.78rem;
    color: #f87171;
    padding: 0.4rem 0.75rem;
    background: rgba(248, 113, 113, 0.06);
    border-radius: 6px;
    margin-top: 0.5rem;
}

/* ========================================
   ASM promo section
   ======================================== */
.asm-promo {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin: 2rem 0;
}
.asm-promo h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.asm-promo p { font-size: 0.85rem; color: var(--text-sub); }

/* ========================================
   Watermark strip
   ======================================== */
.watermark-strip {
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

/* ========================================
   Copy protection
   ======================================== */
.findings-section, .locked-section {
    -webkit-user-select: none;
    user-select: none;
}

/* ========================================
   Email Lead Box
   ======================================== */
.email-lead-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    text-align: center;
    margin: 2rem 0;
}

.email-lead-box h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.email-lead-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.email-lead-form {
    display: flex;
    gap: 0.5rem;
    max-width: 420px;
    margin: 0 auto;
}

.email-lead-form input[type="email"] {
    flex: 1;
    padding: 0.65rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    min-height: 44px;
}

.email-lead-form input[type="email"]:focus {
    border-color: var(--primary);
}

.email-lead-form button {
    padding: 0.65rem 1.25rem;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.email-lead-form button:hover {
    opacity: 0.85;
}

/* ----------------------------------------
   Category Toggle Button
   ---------------------------------------- */
.category-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    color: var(--text-sub);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
    width: 100%;
    justify-content: space-between;
}
.category-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--text);
}

/* ----------------------------------------
   Hacker Exposure Visualization
   ---------------------------------------- */
.hacker-exposure-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    transition: border-color 0.4s;
}
.hacker-exposure-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
}
.hacker-exposure-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.hacker-exposure-bar-track {
    background: var(--bg-elevated);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.hacker-exposure-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 1s ease;
    background: #22c55e;
}
.hacker-exposure-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ----------------------------------------
   Grade-up Nudge
   ---------------------------------------- */
.grade-up-nudge {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    background: rgba(0,255,156,0.05);
    border: 1px solid rgba(0,255,156,0.2);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 1.25rem;
}
.grade-up-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.1rem;
}
.grade-up-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.grade-up-content p {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.6;
    margin: 0;
}

/* ===== CRM 보안 진단 섹션 ===== */
.crm-section {
    background: var(--surface);
    border: 1px solid rgba(0, 255, 156, 0.2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.crm-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pro-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.crm-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    margin-bottom: 1rem;
}
.crm-card:last-child { margin-bottom: 0; }
.crm-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.crm-card-icon { font-size: 1.1rem; }
.crm-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}
.crm-status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
}
.crm-status-pass {
    background: rgba(34,197,94,0.12);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.25);
}
.crm-status-fail {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}
.crm-pii-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.crm-pii-tag {
    font-size: 0.78rem;
    background: rgba(239,68,68,0.1);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 6px;
    padding: 2px 8px;
}
.crm-finding {
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
    position: relative;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* severity별 background-tint (BAN 1 border-left-color 제거) */
.crm-finding-critical { border-color: rgba(239,68,68,0.32); background: rgba(239,68,68,0.06); }
.crm-finding-high { border-color: rgba(249,115,22,0.32); background: rgba(249,115,22,0.06); }
.crm-finding-medium { border-color: rgba(234,179,8,0.32); background: rgba(234,179,8,0.06); }
.crm-finding-low { border-color: rgba(59,130,246,0.28); background: rgba(59,130,246,0.04); }
.crm-finding-info { border-color: var(--border); background: rgba(255,255,255,0.02); }
.crm-finding-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    margin-left: 0.4rem;
}
.crm-finding-desc {
    font-size: 0.83rem;
    color: var(--text-sub);
    margin: 0.4rem 0 0.25rem;
    line-height: 1.6;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: anywhere;
    tab-size: 2;
}
.crm-finding-desc:has(+ .crm-finding-rec) {
    padding: 0.65rem 0.75rem;
    background: rgba(0, 0, 0, 0.18);
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    /* evidence 영역은 영문 URL/코드 포함 — word-break: break-all 유지 */
    word-break: break-all;
    overflow-wrap: anywhere;
    max-height: 240px;
    overflow-y: auto;
}
.crm-finding-rec {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
    line-height: 1.65;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.crm-ok-msg {
    font-size: 0.85rem;
    color: #4ade80;
    margin: 0;
}
.crm-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.crm-check-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--text-sub);
}
.crm-check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.crm-check-pass { background: rgba(34,197,94,0.15); color: #4ade80; }
.crm-check-fail { background: rgba(239,68,68,0.15); color: #f87171; }
/* 잠김 CTA */
.crm-locked-card {
    text-align: center;
    padding: 2rem 1.5rem;
}
.crm-locked-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.crm-locked-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
}
.crm-locked-items {
    text-align: left;
    max-width: 420px;
    margin: 0 auto 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.crm-locked-item {
    font-size: 0.88rem;
    color: var(--text-sub);
    line-height: 1.5;
}
.crm-upgrade-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    color: white;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}
.crm-upgrade-btn:hover { opacity: 0.9; }
/* CRM 이메일 토글 */
.crm-email-wrap {
    margin-top: 0.75rem;
}
.crm-toggle-btn {
    background: none;
    border: 1px solid rgba(0,255,156,0.3);
    color: #00ff9c;
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.crm-toggle-btn:hover { background: rgba(0,255,156,0.07); }

/* ========================================
   Collapsible Sections (details/summary)
   ======================================== */
.detail-collapse {
    margin-bottom: 1.25rem;
}

.detail-collapse > .collapse-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.detail-collapse > .collapse-summary::-webkit-details-marker {
    display: none;
}

.detail-collapse > .collapse-summary::marker {
    display: none;
    content: '';
}

.detail-collapse .collapse-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.detail-collapse[open] .collapse-chevron {
    transform: rotate(180deg);
}

/* 상세 분석 결과 내부 섹션 보더 제거 */
.detail-collapse .open-ports-section,
.detail-collapse .ssl-info-section {
    border: none;
    padding: 1.25rem 0.5rem;
    margin-bottom: 0;
}

.detail-collapse .open-ports-section + .open-ports-section,
.detail-collapse .ssl-info-section {
    border-top: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────────
   결제 모달 모바일 최적화 (2026-08-29)
   근거: 8월 이벤트 퍼널에서 purchase_click 18 → checkout_open 5 (72% 이탈).
   결제창만 열리면 5/5 전부 결제 완료되므로 병목은 전적으로 이 모달에 있다.
   모달이 세로로 길어 모바일에서 '결제하기'까지 스크롤이 여러 번 필요했다.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal-box {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 16px 16px 0 0;
        margin-top: auto;              /* 하단 시트 형태 — 엄지 도달 범위 */
        max-height: 92vh;
        overflow-y: auto;
        padding-bottom: 0;             /* sticky 버튼이 자리를 차지 */
    }
    /* 결제 버튼을 항상 보이게 고정 — 스크롤 없이도 다음 행동이 보인다 */
    .modal-box .modal-buttons {
        position: sticky;
        bottom: 0;
        background: var(--bg-card);
        padding: 0.85rem 0 1rem;
        margin: 0 -0.25rem;
        border-top: 1px solid var(--border);
        z-index: 2;
    }
    /* 모바일 입력 확대 축소 방지 — iOS는 16px 미만이면 자동 확대된다 */
    .modal-box input[type="email"],
    .modal-box input[type="text"],
    .modal-box input[type="tel"] { font-size: 16px; }
    /* 터치 타깃 44px 확보 */
    .modal-buttons .btn-pay,
    .modal-buttons .btn-cancel { min-height: 48px; }
}


/* 2026-09-05: @media print 전무 — 결과 페이지를 Ctrl+P/'PDF로 저장'하면
   브라우저 기본값(배경 인쇄 꺼짐)에서 다크 배경만 날아가고 텍스트는
   --text(#f1f5f9) 그대로 남아 흰 종이 위 거의 안 보이는 글씨가 됐다.
   결과 공유는 핵심 사용 시나리오(팀·상사 보고)다. */
@media print {
    body { background: #fff !important; color: #111 !important; }
    * { color: #111 !important; background: transparent !important;
        text-shadow: none !important; box-shadow: none !important; }
    nav, footer, .site-header, .site-footer, .hamburger, .mobile-nav,
    .modal-overlay, .sticky-pay-bar, .btn, button, .rv1-dual-cta,
    #csCookieBanner, .locked-blur, .share-section { display: none !important; }
    a { text-decoration: none; }
    .card, .result-card, .finding-card { border: 1px solid #ccc !important; }
}