/**
 * SEO Meta Check Page Styles
 * SEO 메타 체크 도구 전용 스타일
 */

/* ========================================
   섹션
   ======================================== */

.seo-section {
    margin-bottom: var(--space-6);
}

.seo-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ========================================
   항목
   ======================================== */

.seo-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
}

.seo-item-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.seo-item-value {
    flex: 1;
    font-size: 13px;
    word-break: break-all;
}

.seo-item-status {
    width: 24px;
    flex-shrink: 0;
    text-align: center;
}

/* ========================================
   상태 색상
   ======================================== */

.seo-ok {
    color: #22c55e;
}

.seo-warn {
    color: #f59e0b;
}

.seo-error {
    color: #ef4444;
}

/* ========================================
   미리보기
   ======================================== */

.seo-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.seo-preview-title {
    color: #1a0dab;
    font-size: 18px;
    margin-bottom: 4px;
}

.seo-preview-url {
    color: #006621;
    font-size: 14px;
    margin-bottom: 4px;
}

.seo-preview-desc {
    color: #545454;
    font-size: 14px;
    line-height: 1.5;
}