/**
 * SEO & GEO Analyzer CSS
 * Version: 2.0.0
 * Refactored to use sga- prefix
 */

/* ========================================
   SEO Analyzer - shadcn/ui Style CSS
   최종 통합 버전 v2.0.0
   ======================================== */

/* Pretendard Font (v1.3.0) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ========================================
   1. CSS Variables (Design Tokens)
   ======================================== */
:root {
    /* Base colors */
    --sga-background: 0 0% 100%;
    --sga-foreground: 240 10% 3.9%;
    --sga-card: 0 0% 100%;
    --sga-card-foreground: 240 10% 3.9%;
    --sga-primary: 240 5.9% 10%;
    --sga-primary-foreground: 0 0% 98%;
    --sga-secondary: 240 4.8% 95.9%;
    --sga-secondary-foreground: 240 5.9% 10%;
    --sga-muted: 240 4.8% 95.9%;
    --sga-muted-foreground: 240 3.8% 46.1%;
    --sga-accent: 240 4.8% 95.9%;
    --sga-accent-foreground: 240 5.9% 10%;
    --sga-border: 240 5.9% 90%;
    --sga-input: 240 5.9% 90%;
    --sga-ring: 240 5.9% 10%;
    --sga-radius: 0.75rem;

    /* Status colors */
    --sga-success: 142 76% 36%;
    --sga-success-light: 142 76% 96%;
    --sga-warning: 38 92% 50%;
    --sga-warning-light: 38 92% 95%;
    --sga-error: 0 84% 60%;
    --sga-error-light: 0 84% 96%;
    --sga-info: 221 83% 53%;
    --sga-info-light: 221 83% 96%;

    /* Custom */
    --sga-orange-500: 25 95% 53%;
    --sga-orange-600: 21 90% 48%;
}

/* Dark theme */
.sga-dark,
[data-theme="dark"] #sga-container {
    --sga-background: 240 10% 3.9%;
    --sga-foreground: 0 0% 98%;
    --sga-card: 240 10% 3.9%;
    --sga-card-foreground: 0 0% 98%;
    --sga-primary: 0 0% 98%;
    --sga-primary-foreground: 240 5.9% 10%;
    --sga-secondary: 240 3.7% 15.9%;
    --sga-secondary-foreground: 0 0% 98%;
    --sga-muted: 240 3.7% 15.9%;
    --sga-muted-foreground: 240 5% 64.9%;
    --sga-accent: 240 3.7% 15.9%;
    --sga-accent-foreground: 0 0% 98%;
    --sga-border: 240 3.7% 15.9%;
    --sga-input: 240 3.7% 15.9%;
    --sga-ring: 240 4.9% 83.9%;

    --sga-success-light: 142 76% 15%;
    --sga-warning-light: 38 92% 15%;
    --sga-error-light: 0 84% 15%;
    --sga-info-light: 221 83% 15%;
}

/* ========================================
   2. Base Styles
   ======================================== */
#sga-container *,
#sga-container *::before,
#sga-container *::after {
    box-sizing: border-box;
}

.sga-wrap {
    padding-left: 0;
    padding-right: 0;
}

#sga-container {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: hsl(var(--sga-foreground));
    line-height: 1.6;
}

#sga-container p,
#sga-container li {
    font-size: 1rem;
    /* 16px */
}

/* ========================================
   3. Card Component
   ======================================== */
.sga-card,
.sga-report-item,
.sga-report-info,
.sga-error-section {
    background-color: hsl(var(--sga-card));
    border: unset;
    border-radius: var(--sga-radius);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.sga-report-item {
    border-radius: unset;
    box-shadow: unset;
}

.sga-card:hover,
.sga-report-item:hover {
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.08);
}

.sga-card__header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid hsl(var(--sga-border));
}

.sga-card__title,
.sga-report-item h3 {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--sga-foreground));
    margin: 0;
}

h2.sga-card__title {
    margin-bottom: 0;
}

/* Section h4 */
.sga-report-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--sga-foreground));
    margin: 1.5rem 0 1rem 0;
    /* 위 1.5rem, 아래 1rem */
}

.sga-card__content {
    padding: 1.5rem;
}

.sga-report-item>p:has(strong) {
    margin: 1.25rem 0 1rem 0;
}

/* ========================================
   4. 분석 정보 섹션 (.sga-report-info)
   ======================================== */
.sga-report-info {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sga-report-item.sga-report-info h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid hsl(var(--sga-border));
    color: hsl(var(--sga-foreground));
}

.sga-report-item.sga-report-info>p {
    margin: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.6;
}

.sga-report-item.sga-report-info>p strong {
    color: hsl(var(--sga-muted-foreground));
    margin-right: 0.5rem;
}

.sga-report-item.sga-report-info>p a {
    color: hsl(var(--sga-info));
    text-decoration: none;
}

.sga-report-item.sga-report-info>p a:hover {
    text-decoration: underline;
}

/* ========================================
   5. Actions Container
   ======================================== */
.sga-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid hsl(var(--sga-border));
}

.sga-actions>div:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* 버튼 스타일 변별력 - 색상 추가 */

/* 1. 새 URL 분석하기 - 파란색 (Primary) */
.sga-actions a:first-child,
.sga-actions>div:first-child a:first-child {
    background-color: hsl(var(--sga-info));
    color: white;
    border-color: hsl(var(--sga-info));
}

.sga-actions a:first-child:hover,
.sga-actions>div:first-child a:first-child:hover {
    background-color: hsl(221 83% 45%);
}

/* 2. 새로고침 - 초록색 */
.sga-actions>div:first-child a:nth-child(2) {
    background-color: hsl(var(--sga-success));
    color: white;
    border-color: hsl(var(--sga-success));
}

.sga-actions>div:first-child a:nth-child(2):hover {
    background-color: hsl(142 76% 30%);
}

/* 3. PDF로 저장 - 빨간색 */
.sga-actions>div:first-child a:nth-child(3) {
    background-color: hsl(var(--sga-error));
    color: white;
    border-color: hsl(var(--sga-error));
}

.sga-actions>div:first-child a:nth-child(3):hover {
    background-color: hsl(0 84% 50%);
}

/* 4. Markdown으로 다운로드 - 보라색 */
.sga-actions>div:first-child a:nth-child(4) {
    background-color: hsl(270 60% 55%);
    color: white;
    border-color: hsl(270 60% 55%);
}

.sga-actions>div:first-child a:nth-child(4):hover {
    background-color: hsl(270 60% 45%);
}

/* ========================================
   6. Button Components
   ======================================== */
.sga-btn,
.sga-actions a,
.sga-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: calc(var(--sga-radius) - 2px);
    font-size: 1rem;
    font-weight: 500;
    height: 2.25rem;
    padding: 0 1rem;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    outline: none;
    transition: all 0.15s ease;
}

.sga-btn:focus-visible,
.sga-actions a:focus-visible,
.sga-actions button:focus-visible {
    outline: 2px solid hsl(var(--sga-ring));
    outline-offset: 2px;
}

.sga-btn:disabled,
.sga-actions a:disabled,
.sga-actions button:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Default Button */
.sga-btn--default,
.sga-actions a:not([class*="sga-btn-"]):not(#sga-theme-toggle) {
    background-color: hsl(var(--sga-secondary));
    color: hsl(var(--sga-secondary-foreground));
    border-color: hsl(var(--sga-border));
}

.sga-btn--default:hover,
.sga-actions a:not([class*="sga-btn-"]):not(#sga-theme-toggle):hover {
    background-color: hsl(var(--sga-accent));
    color: hsl(var(--sga-accent-foreground));
}

/* Secondary Button */
.sga-btn--secondary {
    background-color: hsl(var(--sga-secondary));
    color: hsl(var(--sga-secondary-foreground));
    border-color: hsl(var(--sga-secondary));
}

.sga-btn--secondary:hover {
    background-color: hsl(var(--sga-secondary) / 0.8);
}

/* Outline Button */
.sga-btn--outline {
    background-color: transparent;
    color: hsl(var(--sga-foreground));
    border-color: hsl(var(--sga-input));
}

.sga-btn--outline:hover {
    background-color: hsl(var(--sga-accent));
    color: hsl(var(--sga-accent-foreground));
}

/* Ghost Button */
.sga-btn--ghost {
    background-color: transparent;
    color: hsl(var(--sga-foreground));
    border-color: transparent;
}

.sga-btn--ghost:hover {
    background-color: hsl(var(--sga-accent));
    color: hsl(var(--sga-accent-foreground));
}

/* Primary Button */
.sga-btn--primary {
    background-color: hsl(var(--sga-primary));
    color: hsl(var(--sga-primary-foreground));
    border-color: hsl(var(--sga-primary));
}

.sga-btn--primary:hover {
    background-color: hsl(var(--sga-primary) / 0.9);
}

/* Large Button */
.sga-btn--lg {
    height: 2.75rem;
    padding: 0 2rem;
    font-size: 1rem;
}

/* Full Width Button */
.sga-btn.sga-w-full {
    width: 100%;
}

/* Theme Toggle Button */
#sga-theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background-color: hsl(var(--sga-secondary));
    border-color: hsl(var(--sga-border));
    border-radius: calc(var(--sga-radius) - 2px);
}

#sga-theme-toggle:hover {
    background-color: hsl(var(--sga-accent));
}

#sga-theme-toggle .emoji {
    width: 1.125rem;
    height: 1.125rem;
}

/* ========================================
   7. Form Styles
   ======================================== */
#sga-form,
.sga-form {
    margin-top: 0;
    padding: 1.5rem;
    background-color: hsl(var(--sga-muted) / 0.3);
    border-radius: var(--sga-radius);
    border: 1px solid hsl(var(--sga-border));
}

.sga-form-group {
    margin-bottom: 1rem;
}

#sga-form label,
.sga-form label,
.sga-form .sga-label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--sga-foreground));
    margin-bottom: 0.5rem;
}

#sga-form input[type="url"],
#sga-form input[type="text"],
.sga-form input[type="url"],
.sga-form input[type="text"],
.sga-form .sga-input {
    display: flex;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    background-color: hsl(var(--sga-background));
    border: 1px solid hsl(var(--sga-input));
    border-radius: calc(var(--sga-radius) - 2px);
    color: hsl(var(--sga-foreground));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#sga-form input:focus,
.sga-form input:focus,
.sga-form .sga-input:focus {
    outline: none;
    border-color: hsl(var(--sga-ring));
    box-shadow: 0 0 0 2px hsl(var(--sga-ring) / 0.2);
}

#sga-form input::placeholder,
.sga-form input::placeholder,
.sga-form .sga-input::placeholder {
    color: hsl(var(--sga-muted-foreground));
}

#sga-form small,
.sga-form small {
    display: block;
    margin-top: 0.375rem;
    font-size: 1rem;
    color: hsl(var(--sga-muted-foreground));
}

#sga-form button[type="submit"],
.sga-form button[type="submit"] {
    margin-top: 1rem;
    width: 100%;
    height: 2.75rem;
    background-color: hsl(var(--sga-primary));
    color: hsl(var(--sga-primary-foreground));
    border: none;
    border-radius: calc(var(--sga-radius) - 2px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#sga-form button[type="submit"]:hover,
.sga-form button[type="submit"]:hover {
    background-color: hsl(var(--sga-primary) / 0.9);
}

/* ========================================
   8. 종합 평가 카드 (.sga-overall)
   ======================================== */
.sga-overall {
    padding: 0;
    margin-bottom: 1.5rem;
}

.sga-overall .sga-card__header {
    background: linear-gradient(to right, hsl(240 5.9% 10%), hsl(240 5.9% 20%));
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.sga-overall .sga-card__title {
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
}

.sga-overall .sga-card__title::before {
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.sga-overall .sga-card__content {
    padding: 1.5rem;
}

/* ========================================
   9. Score Circle
   ======================================== */
.sga-score-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    margin: 1.5rem;
}

.sga-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.sga-score-circle {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.sga-score-circle:hover {
    transform: scale(1.05);
}

.sga-score-number {
    font-size: 2rem;
    line-height: 1;
    color: white;
}

.sga-score-label {
    font-size: 1rem;
    color: hsl(var(--sga-muted-foreground));
}

/* Score circle colors with ring effect */
.sga-score-circle.sga-status--success {
    background-color: hsl(var(--sga-success));
    box-shadow: 0 0 0 8px hsl(var(--sga-success) / 0.2);
}

.sga-score-circle.sga-status--warning {
    background-color: hsl(var(--sga-warning));
    box-shadow: 0 0 0 8px hsl(var(--sga-warning) / 0.2);
}

.sga-score-circle.sga-status--error {
    background-color: hsl(var(--sga-error));
    box-shadow: 0 0 0 8px hsl(var(--sga-error) / 0.2);
}

/* ========================================
   10. Status Badges
   ======================================== */

.sga-status,
span.sga-status--success,
span.sga-status--warning,
span.sga-status--error {
    margin-right: 0.5rem;
    /* 오른쪽 간격 추가 */
}



.sga-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.sga-status--success,
span.sga-status--success {
    background-color: hsl(var(--sga-success-light));
    color: hsl(var(--sga-success));
    border-color: hsl(var(--sga-success) / 0.3);
}

.sga-status--warning,
span.sga-status--warning {
    background-color: hsl(var(--sga-warning-light));
    color: hsl(var(--sga-warning));
    border-color: hsl(var(--sga-warning) / 0.3);
}

.sga-status--error,
span.sga-status--error {
    background-color: hsl(var(--sga-error-light));
    color: hsl(var(--sga-error));
    border-color: hsl(var(--sga-error) / 0.3);
}

/* ========================================
   11. Badge Component
   ======================================== */
.sga-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.sga-badge--success {
    background-color: hsl(var(--sga-success));
    color: white;
}

.sga-badge--warning {
    background-color: hsl(var(--sga-warning));
    color: white;
}

.sga-badge--destructive {
    background-color: hsl(var(--sga-error));
    color: white;
}

.sga-badge--secondary {
    background-color: hsl(var(--sga-secondary));
    color: hsl(var(--sga-secondary-foreground));
}

.sga-badge--primary {
    background-color: #3b82f6;
    color: white;
}

.sga-badge--outline {
    background-color: transparent;
    border-color: hsl(var(--sga-border));
    color: hsl(var(--sga-foreground));
}

.sga-badge.sga-text-xl {
    font-size: 1.25rem;
    padding: 0.375rem 0.875rem;
    font-weight: 700;
}

/* ========================================
   12. Alert Component
   ======================================== */
.sga-alert {
    padding: 1rem 1rem;
    border-radius: calc(var(--sga-radius) - 2px);
    border: 1px solid;
    display: flex;
    gap: 0.75rem;
}

.sga-alert--warning {
    background-color: hsl(var(--sga-warning-light));
    border-color: hsl(var(--sga-warning) / 0.3);
}

.sga-alert--warning .sga-alert-title {
    color: hsl(38 92% 30%);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.sga-alert--warning::before {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0.125rem;
}

.sga-alert+ul {
    margin-top: 0.75rem;
    padding-left: 0;
    list-style: none;
}

.sga-alert+ul li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: hsl(38 92% 25%);
}

.sga-alert+ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.375rem;
    height: 0.375rem;
    background-color: hsl(var(--sga-warning));
    border-radius: 50%;
}

/* ========================================
   13. Recommendation Box
   ======================================== */
.sga-recommendation {
    margin-top: 1rem;
    padding: 1rem 1rem;
    background-color: hsl(var(--sga-info-light));
    border: 1px solid hsl(var(--sga-info) / 0.2);
    border-radius: calc(var(--sga-radius) - 2px);
    font-size: 1rem;
    color: hsl(221 83% 40%);
    line-height: 1.6;
}

.sga-recommendation::before {
    content: '💡 권장사항';
    display: block;
    font-weight: 600;
    color: hsl(var(--sga-info));
    margin-bottom: 0.5rem;
}

.sga-recommendation h4 {
    color: hsl(var(--sga-info));
    margin: 0 0 0.5rem 0;
}

/* ========================================
   14. Table Component
   ======================================== */
.sga-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.5rem;
    border: 1px solid hsl(var(--sga-border));
    border-radius: calc(var(--sga-radius) - 2px);
}

.sga-table {
    width: auto;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 1rem;
    /* border: 1px solid hsl(var(--border)); -> 래퍼로 이동 */
    /* border-radius: calc(var(--radius) - 2px); -> 래퍼로 이동 */
    /* overflow: hidden; -> 래퍼가 처리 */
    border: none;
    margin-bottom: 0;
}

.sga-table th {
    background-color: hsl(var(--sga-muted));
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 500;
    color: hsl(var(--sga-muted-foreground));
    border-bottom: 1px solid hsl(var(--sga-border));
}

/* 2열 테이블: 50:50 - 제거 (자동 너비 사용) */
/* .sga-table th:first-child:nth-last-child(2),
.sga-table th:first-child:nth-last-child(2)~th {
    width: 50%;
} */

/* 3열 테이블: 50:25:25 - 제거 (자동 너비 사용) */
/* .sga-table th:first-child:nth-last-child(3) {
    width: 50%;
}

.seo-analyzer-table th:first-child:nth-last-child(3)~th {
    width: 25%;
} */

/* 4열 테이블: 10:50:20:20 */
.sga-table th:first-child:nth-last-child(4) {
    width: 10%;
    /* # */
}

.sga-table th:first-child:nth-last-child(4)~th:nth-child(2) {
    width: 50%;
    /* 이미지 경로 */
}

.sga-table th:first-child:nth-last-child(4)~th:nth-child(3) {
    width: 20%;
    /* 크기 */
}

.sga-table th:first-child:nth-last-child(4)~th:nth-child(4) {
    width: 20%;
    /* 상태 */
}

.sga-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid hsl(var(--sga-border) / 0.5);
    color: hsl(var(--sga-foreground));
}

.sga-table tr:last-child td {
    border-bottom: none;
}

.sga-table tr:hover td {
    background-color: hsl(var(--sga-muted) / 0.5);
}

/* ========================================
   15. Flex Layout
   ======================================== */
.sga-flex-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.sga-flex-item {
    flex: 1;
    min-width: 150px;
    padding: 1rem;
    background-color: hsl(var(--sga-muted) / 0.5);
    border-radius: calc(var(--sga-radius) - 2px);
    text-align: center;
}

.sga-flex-item p {
    margin: 0;
}

.sga-flex-item strong {
    display: block;
    font-size: 1rem;
    color: hsl(var(--sga-muted-foreground));
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.sga-flex-item strong+span,
.sga-flex-item p:not(:has(strong)) {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--sga-foreground));
}

/* ========================================
   16. Category Section Headers
   ======================================== */
.sga-category-section {
    margin-bottom: 2rem;
}

.sga-category-section>h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--sga-foreground));
    margin: 2rem 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid hsl(var(--sga-border));
}

/* Base numbering removed v1.3.2 */
.sga-category-section>h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Auto-numbering removed v1.3.1 */

.sga-category-section>p {
    color: hsl(var(--sga-muted-foreground));
    font-size: 1rem;
    margin: -0.5rem 0 1rem 0;
}

/* ========================================
   17. Section Cards (Individual Analysis)
   ======================================== */
.sga-category-section .sga-report-item {
    margin-bottom: 1rem;
    padding: 10px;
}

.sga-category-section .sga-report-item h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    margin: 0;
    border-bottom: 1px solid hsl(var(--sga-border));
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sga-category-section .sga-report-item h3:hover {
    background-color: hsl(var(--sga-muted) / 0.5);
}

/* Status icon before h3 */
.sga-category-section .sga-report-item h3::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background-size: 1.25rem;
    background-position: center;
    background-repeat: no-repeat;
}

/* Success icon */
.sga-category-section .sga-report-item:has(.sga-status--success) h3::before {
    background-color: hsl(var(--sga-success-light));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316a34a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

/* Warning icon */
.sga-category-section .sga-report-item:has(.sga-status--warning) h3::before {
    background-color: hsl(var(--sga-warning-light));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d97706' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E");
}

/* Error icon */
.sga-category-section .sga-report-item:has(.sga-status--error) h3::before {
    background-color: hsl(var(--sga-error-light));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23dc2626' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

/* Section content padding */
.sga-category-section .sga-report-item>p,
.sga-category-section .sga-report-item>div:not(.sga-score-container),
.sga-category-section .sga-report-item>table,
.sga-category-section .sga-report-item>ul,
.sga-category-section .sga-report-item>h4,
.sga-category-section .sga-report-item>.sga-flex-group,
.sga-category-section .sga-report-item>.sga-card--nested,
.sga-category-section .sga-report-item>.sga-recommendation {
    margin-left: 0;
    margin-right: 0;
}

.sga-category-section .sga-report-item>p:first-of-type {
    margin-top: 1rem;
}



/* ========================================
   18. Summary Cards Grid
   ======================================== */

/* 요약 섹션 바깥 카드 테두리 제거 */
.sga-report-item:has(.sga-summary-grid),
.sga-report-item.sga-mb-6:has(.sga-grid) {
    border: none;
    box-shadow: none;
}

.sga-grid.sga-grid-cols-2.md\:sga-grid-cols-4,
.sga-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {

    .sga-grid.sga-grid-cols-2.md\:sga-grid-cols-4,
    .sga-summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sga-grid>.sga-flex.sga-flex-col.sga-items-center,
.sga-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    border-radius: var(--sga-radius);
    border: 1px solid;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sga-grid>.sga-flex.sga-flex-col.sga-items-center:hover,
.sga-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}

/* Summary card variants */
.sga-bg-success\/10,
.sga-summary-card.success {
    background-color: hsl(var(--sga-success-light));
    border-color: hsl(var(--sga-success) / 0.3);
}

.sga-bg-warning\/10,
.sga-summary-card.warning {
    background-color: hsl(var(--sga-warning-light));
    border-color: hsl(var(--sga-warning) / 0.3);
}

.sga-bg-destructive\/10,
.sga-summary-card.error {
    background-color: hsl(var(--sga-error-light));
    border-color: hsl(var(--sga-error) / 0.3);
}

.sga-bg-muted,
.sga-summary-card.info {
    background-color: hsl(var(--sga-muted));
    border-color: hsl(var(--sga-border));
}

/* ========================================
   19. Lead Link (CTA)
   ======================================== */
.sga-lead-link {
    display: block;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background-color: hsl(var(--sga-info));
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--sga-radius);
    transition: background-color 0.15s ease, transform 0.15s ease;
    margin: 1.5rem 0;
}

.sga-lead-link:hover {
    background-color: hsl(221 83% 45%);
    transform: translateY(-1px);
    color: white;
}

/* ========================================
   20. Misc Components
   ======================================== */
/* Status Badge */
.sga-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 500;
}

.sga-status-badge--blue {
    background-color: hsl(var(--sga-info-light));
    color: hsl(var(--sga-info));
    border: 1px solid hsl(var(--sga-info) / 0.3);
}

/* Emoji */
.sga-emoji {
    width: 1.125em;
    height: 1.125em;
    vertical-align: -0.125em;
    margin-right: 0.25em;
}

/* Footer */
.sga-footer {
    text-align: center;
    padding: 2rem 1rem;
    color: hsl(var(--sga-muted-foreground));
    font-size: 1rem;
    border-top: 1px solid hsl(var(--sga-border));
    margin-top: 2rem;
}

.sga-footer strong {
    color: hsl(var(--sga-foreground));
}

/* Nested Card */
.sga-card--nested {
    background-color: hsl(var(--sga-muted) / 0.5);
    border: 1px solid hsl(var(--sga-border));
    border-radius: calc(var(--sga-radius) - 2px);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

.sga-card--nested h4 {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--sga-foreground));
    margin: 0 0 0.75rem 0;
}

.sga-card--nested ul {
    margin: 0;
    padding-left: 1.25rem;
}

.sga-card--nested li {
    font-size: 1rem;
    margin-bottom: 0.375rem;
}

/* Tables */
.sga-social-analytics-wrap {
    overflow-x: auto;
}

.sga-social-analytics td[data-label="값"] {
    max-width: 300px;
    word-break: break-all;
}

.sga-headings-table td:first-child {
    font-weight: 600;
}

.sga-headings-table td:last-child {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Grid Layout */
.sga-grid-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ========================================
   21. Utility Classes
   ======================================== */
.sga-text-sm {
    font-size: 1rem;
}

.sga-text-muted-foreground {
    color: hsl(var(--sga-muted-foreground));
}

.sga-text-gray-600 {
    color: hsl(var(--sga-muted-foreground));
}

.sga-text-green-700 {
    color: hsl(var(--sga-success));
}

.sga-text-red-700 {
    color: hsl(var(--sga-error));
}

.sga-font-semibold {
    font-weight: 600;
}

.sga-mb-2 {
    margin-bottom: 0.5rem;
}

.sga-mb-4 {
    margin-bottom: 1rem;
}

.sga-mb-6 {
    margin-bottom: 1.5rem;
}

.sga-mb-10 {
    margin-bottom: 2.5rem;
}

.sga-mb-20 {
    margin-bottom: 5rem;
}

.sga-mt-2 {
    margin-top: 0.5rem;
}

.sga-mt-4 {
    margin-top: 1rem;
}

.sga-ml-4 {
    margin-left: 1rem;
}

.sga-ml-10 {
    margin-left: 2.5rem;
}

.sga-gap-2 {
    gap: 0.5rem;
}

.sga-gap-4 {
    gap: 1rem;
}

.sga-flex {
    display: flex;
}

.sga-flex-col {
    flex-direction: column;
}

.sga-items-center {
    align-items: center;
}

.sga-justify-between {
    justify-content: space-between;
}

.sga-justify-center {
    justify-content: center;
}

.sga-flex-wrap {
    flex-wrap: wrap;
}

.sga-rounded-lg {
    border-radius: calc(var(--sga-radius) - 2px);
}

.sga-p-4 {
    padding: 1rem;
}

.sga-p-6 {
    padding: 1.5rem;
}

.sga-w-full {
    width: 100%;
}

.sga-list-disc {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.sga-list-disc li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

ul li.sga-text-green-700::before,
ul li.sga-text-red-700::before {
    display: none;
}

/* ========================================
   22. Responsive - shadcn/ui 기본 반응형
   ======================================== */
@media (max-width: 640px) {
    .sga-score-container {
        flex-direction: column;
        align-items: center;
    }

    .sga-score-circle {
        width: 5.5rem;
        height: 5.5rem;
    }

    .sga-score-number {
        font-size: 1.5rem;
    }

    .sga-flex-group {

        .sga-text-xs {
            font-size: 0.75rem;
        }

        .sga-text-sky-500 {
            color: #0ea5e9;
        }

        .sga-text-slate-500 {
            color: #64748b;
        }

        .sga-underline {
            text-decoration: underline;
        }

        .sga-block {
            display: block;
        }

        .sga-badge--info {
            background-color: #0ea5e9;
            color: white;
        }

    }


    .sga-flex-item {

        min-width: 100%;
    }

    .sga-card__header,
    .sga-card__content {
        padding: 1rem;
    }

    .sga-report-info {
        padding: 1rem;
    }

    .sga-category-section .sga-report-item>p,
    .sga-category-section .sga-report-item>div,
    .sga-category-section .sga-report-item>table,
    .sga-category-section .sga-report-item>ul,
    .sga-category-section .sga-report-item>h4,
    .sga-category-section .sga-report-item>.sga-flex-group,
    .sga-category-section .sga-report-item>.sga-card--nested,
    .sga-category-section .sga-report-item>.sga-recommendation {
        margin-left: 0;
        margin-right: 0;
    }

    .sga-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .sga-actions>div:first-child {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sga-actions .sga-btn,
    .sga-actions a {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        max-width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 0.5rem 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #sga-theme-toggle {
        align-self: flex-end;
        margin-top: 0.5rem;
    }

    /* 스코어 컨테이너 모바일 개선 */
    .sga-score-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 0;
    }

    /* 테이블 모바일 개선 */
    .sga-table {
        font-size: 16px;
    }

    .sga-table th,
    .sga-table td {
        padding: 0.75rem 1rem;
        word-break: break-word;
    }

    /* 카드 헤더 모바일 */
    .sga-card__header {
        padding: 0.75rem 1rem;
    }

    .sga-card__content {
        padding: 0.75rem;
    }

    /* 분석 정보 섹션 */
    .sga-report-info p {
        font-size: 16px;
        word-break: break-all;
    }

    /* 상태 배지 모바일 */
    .sga-status {
        font-size: 16px;
        padding: 0.2rem 0.5rem;
    }
}

/* ========================================
   23. Animation
   ======================================== */
@keyframes sga-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.sga-report-item,
.sga-report-info {
    animation: sga-fadeIn 0.3s ease-out;
}

.sga-card,
.sga-report-item,
.sga-badge,
.sga-btn,
.sga-status {
    transition: all 0.15s ease;
}

/* ========================================
   24. 추가 요소
   ======================================== */
h2#sga-welcome-message {
    margin-bottom: 20px;
    font-size: 24px;
}

/* ========================================
   25. 모드 선택 컴포넌트
   ======================================== */
/* 모드 선택 컨테이너 */
.sga-mode-selector {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* 모드 옵션 */
.sga-mode-option {
    flex: 1;
    min-width: 250px;
}

.sga-mode-option input[type="radio"] {
    display: none;
}

/* 모드 레이블 */
.sga-mode-label {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    position: relative;
}

.sga-mode-label:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 선택된 모드 */
.sga-mode-option input[type="radio"]:checked+.sga-mode-label {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sga-mode-option input[type="radio"]:checked+.sga-mode-label::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

/* 모드 아이콘 */
.sga-mode-icon {
    font-size: 32px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 모드 콘텐츠 */
.sga-mode-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.sga-mode-title {
    font-weight: 600;
    font-size: 16px;
    color: #1f2937;
    display: block;
}

.sga-mode-desc {
    font-size: 16px;
    color: #6b7280;
    display: block;
    margin-bottom: 8px;
}

.sga-mode-badge {
    border-radius: 12px;
    padding: 4px 8px;
}


/* 다크모드 지원 */
.sga-dark .sga-mode-label {
    background: #1f2937;
    border-color: #374151;
}

.sga-dark .sga-mode-label:hover {
    border-color: #60a5fa;
}

.sga-dark .sga-mode-option input[type="radio"]:checked+.sga-mode-label {
    background: #1e3a8a;
    border-color: #60a5fa;
}

.sga-dark .sga-mode-title {
    color: #f3f4f6;
}

.sga-dark .sga-mode-desc {
    color: #9ca3af;
}

/* ========================================
   26. 모바일 최적화 (320px 기준)
   ======================================== */

/* 초소형 모바일 (320px ~ 480px) */
@media (max-width: 480px) {

    /* 컨테이너 패딩 축소 */
    .sga-p-6 {
        padding: 1rem;
    }

    .sga-p-4 {
        padding: 0.75rem;
    }

    /* 모드 선택 레이블 */
    .sga-mode-selector {
        flex-direction: column;
    }

    .sga-mode-option {
        min-width: 100%;
    }

    .sga-mode-label {
        padding: 12px;
    }

    .sga-mode-icon {
        font-size: 24px;
        margin-right: 8px;
    }

    .sga-mode-title {
        font-size: 16px;
    }

    .sga-mode-desc {
        font-size: 16px;
    }

    .sga-mode-badge {
        font-size: 16px;
        padding: 3px 8px;
    }

    /* 체크 마크 크기 축소 */
    .sga-mode-option input[type="radio"]:checked+.sga-mode-label::after {
        width: 20px;
        height: 20px;
        font-size: 16px;
        top: 8px;
        right: 8px;
    }

    /* 버튼 */
    .sga-btn {
        padding: 0.5rem 0.75rem;
        font-size: 16px;
    }

    .sga-btn--lg {
        padding: 0.625rem 1rem;
        font-size: 16px;
    }

    /* 스코어 써클 크기 축소 */
    .sga-score-circle {
        width: 80px;
        height: 80px;
        font-size: 24px;
        border-width: 3px;
    }

    .sga-score-number {
        font-size: 24px;
    }

    .sga-score-label {
        font-size: 16px;
    }

    /* 스코어 컨테이너 */
    .sga-score-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0.5rem;
    }

    /* 그리드 레이아웃 - 작은 화면에서는 1열 */
    .sga-grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .sga-gap-4 {
        gap: 0.5rem;
    }

    /* 여백 조정 */
    .sga-mb-6 {
        margin-bottom: 1rem;
    }

    .sga-mb-4 {
        margin-bottom: 0.75rem;
    }

    .sga-mt-4 {
        margin-top: 0.75rem;
    }

    /* 버튼 그룹 세로 배열 (더 작은 화면) */
    .sga-actions>div:first-child {
        flex-direction: column;
    }

    .sga-actions .sga-btn,
    .sga-actions a {
        flex: 1 1 100%;
        font-size: 16px;
        padding: 0.5rem;
    }

    /* 카드 콘텐츠 */
    .sga-card__content {
        padding: 0.75rem;
    }

    /* 분석 정보 폰트 */
    .sga-report-info p {
        font-size: 16px;
    }

    /* 헤딩 */
    .sga-report-item h3 {
        font-size: 16px;
    }

    .sga-report-item h4 {
        font-size: 16px;
    }

    /* 알림 박스 */
    .sga-alert {
        padding: 0.75rem;
        font-size: 16px;
    }

    /* 리스트 아이템 */
    .sga-report-item li {
        font-size: 16px;
        line-height: 1.5;
    }

    .sga-card--nested {
        padding: 10px;
    }

    .sga-card--nested ul {
        padding-left: 20px;
    }
}

/* 최소 320px 초소형 모바일 (iPhone SE 등) */
@media (max-width: 374px) {

    /* 패딩 최소화 */
    .sga-p-6 {
        padding: 0.75rem;
    }

    .sga-mode-label {
        padding: 10px;
    }

    /* 아이콘 크기 축소 */
    .sga-mode-icon {
        font-size: 20px;
        margin-right: 6px;
    }

    /* 더 작은 폰트 */
    .sga-mode-title {
        font-size: 16px;
    }

    .sga-mode-desc {
        font-size: 16px;
    }

    /* 스코어 써클 더 축소 */
    .sga-score-circle {
        width: 70px;
        height: 70px;
        font-size: 20px;
    }

    .sga-score-number {
        font-size: 20px;
    }

    .sga-score-label {
        font-size: 16px;
    }

    /* 버튼 */
    .sga-btn--lg {
        padding: 0.5rem 0.75rem;
        font-size: 16px;
    }
}

/* 테이블 반응형 처리 */
@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table td,
    table th {
        font-size: 16px;
        padding: 8px 6px;
    }
}

@media (max-width: 480px) {

    table td,
    table th {
        font-size: 16px;
        padding: 6px 4px;
    }
}

/* 긴 URL 텍스트 처리 */
@media (max-width: 640px) {

    .sga-report-item a,
    .sga-report-item code,
    .sga-report-item pre {
        word-break: break-all;
        overflow-wrap: break-word;
    }
}

/* 컨테이너 반응형 */
#sga-container {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 480px) {
    #sga-container {
        padding: 0;
    }

    #sga-container h2 {
        font-size: 18px;
        line-height: 1.4;
    }

    #sga-container h3 {
        font-size: 16px;
    }

    #sga-container h4 {
        font-size: 16px;
    }
}

@media (max-width: 374px) {
    #sga-container h2 {
        font-size: 16px;
    }

    #sga-container h3 {
        font-size: 16px;
    }

    #sga-container h4 {
        font-size: 16px;
    }
}

/* 결과 카드 반응형 */
@media (max-width: 640px) {
    .sga-report-item {
        padding: 0;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .sga-report-item {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 374px) {
    .sga-report-item {
        padding: 0.5rem;
    }
}

/* 배지 반응형 */
@media (max-width: 480px) {

    .sga-badge,
    .sga-badge--success,
    .sga-badge--warning,
    .sga-badge--error,
    .sga-badge--info {
        font-size: 16px;
        padding: 3px 8px;
    }
}

@media (max-width: 374px) {

    .sga-badge,
    .sga-badge--success,
    .sga-badge--warning,
    .sga-badge--error,
    .sga-badge--info {
        font-size: 16px;
        padding: 2px 6px;
    }
}

/* 알림/공지 박스 반응형 */
@media (max-width: 480px) {

    .sga-notice,
    .sga-notice--info,
    .sga-notice--warning,
    .sga-notice--error {
        padding: 0.75rem;
        font-size: 16px;
    }
}

@media (max-width: 374px) {

    .sga-notice,
    .sga-notice--info,
    .sga-notice--warning,
    .sga-notice--error {
        padding: 0.5rem;
        font-size: 16px;
    }
}

/* 버튼 그룹 반응형 */
@media (max-width: 480px) {
    .sga-btn-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .sga-btn-group .sga-btn {
        width: 100%;
    }
}

/* 리스트 반응형 */
@media (max-width: 480px) {

    ul,
    ol {
        padding-left: 1.25rem;
    }

    li {
        font-size: 16px;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 374px) {

    ul,
    ol {
        padding-left: 1rem;
    }

    li {
        font-size: 16px;
    }
}

/* 폼 그룹 반응형 */
@media (max-width: 480px) {
    .sga-form-group {
        margin-bottom: 1rem;
    }
}

/* 이미지 반응형 */
@media (max-width: 640px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* 코드 블록 스타일 */
code {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* 코드 블록 반응형 */
@media (max-width: 640px) {
    pre {
        padding: 0.75rem;
        font-size: 16px;
        overflow-x: auto;
    }

    code {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    pre {
        padding: 0.5rem;
        font-size: 16px;
    }

    code {
        font-size: 16px;
    }
}

/* 스크롤 컨테이너 */
@media (max-width: 640px) {
    .sga-scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 터치 영역 최적화 (최소 44px) */
@media (max-width: 640px) {

    .sga-btn,
    a.sga-btn,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        touch-action: manipulation;
    }

    .sga-mode-label {
        min-height: 60px;
    }
}

/* 텍스트 가독성 */
@media (max-width: 480px) {

    body,
    p,
    div {
        line-height: 1.6;
    }
}

/* 간격 조정 - 모바일 */
@media (max-width: 480px) {
    .sga-gap-4 {
        gap: 0.75rem;
    }

    .sga-gap-2 {
        gap: 0.375rem;
    }
}

@media (max-width: 374px) {
    .sga-gap-4 {
        gap: 0.5rem;
    }

    .sga-gap-2 {
        gap: 0.25rem;
    }
}

/* ========================================
   분석 결과 출력 시 인트로 블록 숨김
   ======================================== */
/* 분석 결과가 있을 때 .sga-intro-block 숨기기 */
.sga-overall~.sga-intro-block,
.sga-report-info~.sga-intro-block,
.sga-overall+.sga-intro-block,
.sga-report-info+.sga-intro-block,
#sga-container:has(.sga-overall)~.sga-intro-block,
#sga-container:has(.sga-report-info)~.sga-intro-block,
body:has(.sga-overall) .sga-intro-block,
body:has(.sga-report-info) .sga-intro-block {
    display: none !important;
}

/* ========================================
   추가 모바일 레이아웃 수정
   ======================================== */

/* 모바일에서 전체 컨테이너 overflow 방지 */
@media (max-width: 640px) {

    #sga-container,
    .sga-report-item,
    .sga-card,
    .sga-card__content {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* 테이블 래퍼 - 가로 스크롤 */
    .sga-report-item,
    .sga-card__content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 테이블 100% 너비 및 오버플로우 방지 */
    .sga-report-item table,
    .sga-table,
    table {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* 테이블 셀 */
    .sga-report-item td,
    .sga-report-item th,
    .sga-table td,
    .sga-table th,
    td,
    th {
        font-size: 16px;
        padding: 0.75rem 1rem;
        word-break: break-word;
        white-space: normal;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 그리드 레이아웃 1열 강제 */
    .sga-grid,
    .sga-grid-cols-2,
    .sga-grid-cols-3,
    .sga-grid-cols-4,
    [class*="sga-grid-cols"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* 스코어 아이템 정렬 */
    .sga-score-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 1rem 0;
    }

    .sga-score {
        width: 100%;
        text-align: center;
        margin-bottom: 1rem;
    }

    /* 버튼 아이콘과 텍스트 */
    .sga-actions .sga-btn svg,
    .sga-actions a svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* 다운로드/공유 버튼 영역 */
    .sga-actions>div {
        width: 100%;
    }

    /* 긴 텍스트 처리 */
    .sga-report-item p,
    .sga-report-item li,
    .sga-report-item span {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* 진행률 바 영역 */
    .sga-report-item .sga-flex {
        flex-wrap: wrap;
    }

    /* 상태 표시 배지 */
    [class*="sga-badge"],
    [class*="sga-status"] {
        font-size: 16px;
        padding: 2px 6px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {

    /* 더 작은 화면에서 추가 조정 */

    #sga-summary-section {
        padding: 0;
    }

    .sga-report-item {
        padding: 10px !important;
    }

    /* 카드 스타일 컴포넌트 패딩 제거 (헤더 꽉 차게) */
    .sga-overall,
    #sga-summary-section {
        padding: 0 !important;
    }

    .sga-card__header {
        padding: 0.5rem 0.75rem !important;
    }

    .sga-card__content {
        padding: 0.5rem !important;
    }

    /* 스코어 원 크기 축소 */
    .sga-score-circle {
        width: 70px !important;
        height: 70px !important;
    }

    .sga-score-number {
        font-size: 20px !important;
    }

    /* 헤딩 크기 */
    .sga-report-item h2 {
        font-size: 16px !important;
    }

    .sga-report-item h3 {
        font-size: 16px !important;
    }

    .sga-report-item h4 {
        font-size: 16px !important;
    }

    /* 리스트 패딩 */
    .sga-report-item ul,
    .sga-report-item ol {
        padding-left: 20px;
        margin-left: 0px;
    }

    .sga-report-item li {
        font-size: 16px;
        margin-bottom: 0.25rem;
    }

    /* 테이블 셀 */
    .sga-report-item td,
    .sga-report-item th {
        font-size: 16px !important;
        padding: 0.75rem 1rem !important;
    }
}

@media (max-width: 374px) {

    /* 초소형 화면 */
    .sga-score-circle {
        width: 60px !important;
        height: 60px !important;
    }

    .sga-score-number {
        font-size: 18px !important;
    }

    .sga-report-item h2 {
        font-size: 16px !important;
    }

    .sga-report-item h3 {
        font-size: 16px !important;
    }

    .sga-actions .sga-btn,
    .sga-actions a {
        font-size: 16px !important;
        padding: 0.4rem !important;
    }
}

/* Utility Classes for Refactoring v1.0.19 */
.sga-bg-slate-50 {
    background-color: #f8fafc;
}

.sga-bg-amber-50 {
    background-color: #fffbeb;
}

.sga-bg-white {
    background-color: #ffffff;
}

.sga-text-slate-600 {
    color: #475569;
}

.sga-text-white {
    color: #ffffff;
}

.sga-text-slate-800 {
    color: #1e293b;
}

.sga-text-amber-800 {
    color: #92400e;
}

.sga-text-amber-900 {
    color: #78350f;
}

.sga-text-green-800 {
    color: #166534;
}

.sga-text-green-700 {
    color: #15803d;
}

.sga-text-sm {
    font-size: 0.875rem;
}

.sga-border-slate-200 {
    border-color: #e2e8f0;
}

.sga-border-amber-400 {
    border-color: #f59e0b;
}

.sga-border-l-4 {
    border-left-width: 4px;
}

.sga-rounded-md {
    border-radius: 0.375rem;
}

.sga-grid {
    display: grid;
}

.sga-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sga-gap-4 {
    gap: 1rem;
}

.sga-p-2 {
    padding: 0.5rem;
}

.sga-p-4 {
    padding: 1rem;
}

.sga-px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.sga-py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.sga-py-05 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.sga-m-0 {
    margin: 0;
}

.sga-mt-1 {
    margin-top: 0.25rem;
}

.sga-mt-2 {
    margin-top: 0.5rem;
}

.sga-mt-3 {
    margin-top: 0.75rem;
}

.sga-mb-1 {
    margin-bottom: 0.25rem;
}

.sga-mb-2 {
    margin-bottom: 0.5rem;
}

.sga-ml-5 {
    margin-left: 1.25rem;
}

.sga-no-underline {
    text-decoration: none;
}

.sga-transition-all {
    transition: all 0.2s;
}

.sga-hover--shadow-sm:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Tools Grid specific overrides */
.sga-tool-link {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

/* Admin Settings Helpers */
.sga-admin-block {
    display: block;
    margin-bottom: 10px;
}

.sga-admin-desc {
    margin-left: 24px;
    color: #646970;
}

.sga-admin-notice {
    margin-top: 15px;
    padding: 10px;
    background: #f0f6fc;
    border-left: 4px solid #2271b1;
}

.sga-admin-warning {
    margin-top: 15px;
    padding: 10px;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
}

.sga-tool-link:hover {
    background: #f8fafc;
    border-color: #0ea5e9 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .sga-grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

.sga-border-collapse {
    border-collapse: collapse;
}

/* ========================================
   27. Utility Classes (Tailwind-like)
   ======================================== */
/* Spacing */
.sga-m-0 {
    margin: 0 !important;
}

.sga-mt-2 {
    margin-top: 0.5rem;
}

.sga-mt-4 {
    margin-top: 1rem;
}

.sga-mt-8 {
    margin-top: 2rem;
}

.sga-mb-1 {
    margin-bottom: 0.25rem;
}

.sga-mb-2 {
    margin-bottom: 0.5rem;
}

.sga-mb-3 {
    margin-bottom: 0.75rem;
}

.sga-mb-4 {
    margin-bottom: 1rem;
}

.sga-mb-6 {
    margin-bottom: 1.5rem;
}

.sga-p-4 {
    padding: 1rem;
}

.sga-p-6 {
    padding: 1.5rem;
}

.sga-pl-5 {
    padding-left: 1.25rem;
}

/* Layout */
.sga-flex {
    display: flex;
}

.sga-gap-4 {
    gap: 1rem;
}

.sga-list-disc {
    list-style-type: disc;
}

.sga-rounded-md {
    border-radius: 0.375rem;
}

.sga-rounded-lg {
    border-radius: 0.5rem;
}

/* Borders */
.sga-border-2 {
    border-width: 2px;
}

.sga-border-l-4 {
    border-left-width: 4px;
}

.sga-border-slate-200 {
    border-color: #e2e8f0;
}

.sga-border-red-500 {
    border-color: #ef4444;
}

.sga-border-amber-400 {
    border-color: #fbbf24;
}

.sga-border-amber-500 {
    border-color: #f59e0b;
}

.sga-border-blue-500 {
    border-color: #3b82f6;
}

/* Backgrounds */
.sga-bg-white {
    background-color: #ffffff;
}

.sga-bg-red-50 {
    background-color: #fef2f2;
}

.sga-bg-amber-50 {
    background-color: #fffbeb;
}

.sga-bg-blue-50 {
    background-color: #eff6ff;
}

/* Typography */
.sga-text-sm {
    font-size: 0.875rem;
}

.sga-text-base {
    font-size: 1rem;
}

.sga-text-xl {
    font-size: 1.25rem;
}

.sga-text-2xl {
    font-size: 1.5rem;
}

.sga-font-semibold {
    font-weight: 600;
}

.sga-font-bold {
    font-weight: 700;
}

/* Text Colors */
.sga-text-slate-500 {
    color: #64748b;
}

.sga-text-slate-600 {
    color: #475569;
}

.sga-text-slate-700 {
    color: #334155;
}

.sga-text-slate-900 {
    color: #0f172a;
}

.sga-text-red-500 {
    color: #ef4444;
}

.sga-text-amber-500 {
    color: #f59e0b;
}

.sga-text-blue-500 {
    color: #3b82f6;
}

/* ========================================
   28. Global Table Width Adjustment (v1.0.24)
   ======================================== */
.sga-table {
    width: 100% !important;
    /* table-layout: fixed; */
    /* Removed per user preference for auto layout flexibility, or keep if user wants strict columns */
}

/* ========================================
   26. Missing Utility Classes (Tailwind Compat)
   Added in v1.3.6 for Interactive Summary & Advanced Analysis
   ======================================== */

/* Backgrounds */
.sga-bg-white {
    background-color: #ffffff;
}

.sga-bg-green-50 {
    background-color: #f0fdf4;
}

.sga-bg-green-100 {
    background-color: #dcfce7;
}

.sga-bg-yellow-50 {
    background-color: #fefce8;
}

.sga-bg-yellow-100 {
    background-color: #fef9c3;
}

.sga-bg-red-50 {
    background-color: #fef2f2;
}

.sga-bg-red-100 {
    background-color: #fee2e2;
}

.sga-bg-gray-50 {
    background-color: #f9fafb;
}

.sga-bg-gray-100 {
    background-color: #f3f4f6;
}

.sga-bg-blue-50 {
    background-color: #eff6ff;
}

.sga-bg-blue-500 {
    background-color: #3b82f6;
}

/* Text Colors */
.sga-text-green-600 {
    color: #16a34a;
}

.sga-text-green-700 {
    color: #15803d;
}

.sga-text-green-800 {
    color: #166534;
}

.sga-text-yellow-700 {
    color: #a16207;
}

.sga-text-yellow-800 {
    color: #854d0e;
}

.sga-text-red-500 {
    color: #ef4444;
}

.sga-text-red-700 {
    color: #b91c1c;
}

.sga-text-red-800 {
    color: #991b1b;
}

.sga-text-gray-400 {
    color: #9ca3af;
}

.sga-text-gray-500 {
    color: #6b7280;
}

.sga-text-gray-700 {
    color: #374151;
}

.sga-text-gray-800 {
    color: #1f2937;
}

.sga-text-gray-900 {
    color: #111827;
}

.sga-text-blue-500 {
    color: #3b82f6;
}

.sga-text-amber-500 {
    color: #f59e0b;
}

.sga-text-slate-400 {
    color: #94a3b8;
}

.sga-text-slate-600 {
    color: #475569;
}

.sga-text-slate-700 {
    color: #334155;
}

/* Borders */
.sga-border-gray-100 {
    border-color: #f3f4f6;
}

.sga-border-gray-200 {
    border-color: #e5e7eb;
}

.sga-border-green-200 {
    border-color: #bbf7d0;
}

.sga-border-yellow-200 {
    border-color: #fde047;
}

.sga-border-red-200 {
    border-color: #fecaca;
}

.sga-border-t {
    border-top-width: 1px;
}

/* Spacing */
.sga-space-y-3>*+* {
    margin-top: 0.75rem;
}

.sga-py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.sga-px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.sga-py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.sga-mt-1 {
    margin-top: 0.25rem;
}

.sga-pl-4 {
    padding-left: 1rem;
}

.sga-pl-5 {
    padding-left: 1.25rem;
}

.sga-mb-4 {
    margin-bottom: 1rem;
}

.sga-mb-6 {
    margin-bottom: 1.5rem;
}

/* Flex & Grid */
.sga-flex-grow {
    flex-grow: 1;
}

.sga-flex-shrink-0 {
    flex-shrink: 0;
}

.sga-min-w-0 {
    min-width: 0px;
}

.sga-gap-1 {
    gap: 0.25rem;
}

.sga-gap-3 {
    gap: 0.75rem;
}

/* Text & Fonts */
.sga-font-bold {
    font-weight: 700;
}

.sga-font-medium {
    font-weight: 500;
}

.sga-font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sga-italic {
    font-style: italic;
}

.sga-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.sga-text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.sga-break-words {
    overflow-wrap: break-word;
}

.sga-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sga-select-none {
    user-select: none;
}

.sga-text-right {
    text-align: right;
}

.sga-text-center {
    text-align: center;
}

/* Sizing */
.sga-w-6 {
    width: 1.5rem;
}

/* Effects */
.sga-hover--bg-white:hover {
    background-color: #ffffff;
}

.sga-hover--shadow-sm:hover {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.sga-hover--bg-green-100:hover {
    background-color: #dcfce7;
}

.sga-hover--bg-yellow-100:hover {
    background-color: #fef9c3;
}

.sga-hover--bg-red-100:hover {
    background-color: #fee2e2;
}

.sga-hover--bg-gray-100:hover {
    background-color: #f3f4f6;
}

/* Rings (Focus/Active states) */
.sga-ring-2 {
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}

.sga-ring-offset-2 {
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--tw-ring-color);
}

.sga-ring-blue-500 {
    --tw-ring-color: #3b82f6;
}

/* Transitions */
.sga-transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}