:root {
    /* Brand Colors */
    --primary-color: #3b82f6;
    /* Blue 500 */
    --primary-hover: #2563eb;
    /* Blue 600 */
    --primary-light: #eff6ff;

    --bg-color: #f3f4f6;
    --card-bg: #ffffff;

    --text-primary: #111827;
    --text-secondary: #4b5563;
    --border-color: #e5e7eb;

    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius: 12px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    flex: 1;
}

header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

.logo {
    font-size: 1.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    letter-spacing: -0.025em;
}

/* Wizard Progress Bar */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    position: relative;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--border-color);
    z-index: 0;
    transform: translateY(-50%);
}

.progress-line-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 2px;
    background-color: var(--primary-color);
    z-index: 0;
    transform: translateY(-50%);
    width: 0%;
    transition: width 0.3s ease;
}

.step-indicator {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.step-indicator.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--primary-light);
}

.step-indicator.completed {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Steps Layout */
.step-content {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.step-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Cards & Forms */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--text-secondary);
}

textarea,
input[type="text"] {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #f9fafb;
    resize: vertical;
}

textarea:focus,
input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Buttons */
.btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #2563eb);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(37, 99, 235, 0.3);
    filter: brightness(1.05);
}

.btn-secondary {
    background-color: white;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-secondary:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: var(--text-primary);
}

.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Item Cards */
.item-card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}

.item-card:hover {
    box-shadow: var(--shadow-md);
    border-color: #d1d5db;
}

.remove-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    border-radius: 50%;
    line-height: 1;
}

.remove-btn:hover {
    background-color: #fee2e2;
    color: #ef4444;
}

/* Markdown Results */
.markdown-result {
    color: var(--text-primary);
}

.markdown-result h1,
.markdown-result h2,
.markdown-result h3 {
    margin-top: 1.5rem;
}

.markdown-result ul {
    padding-left: 1.5rem;
}

.markdown-result strong {
    color: var(--primary-color);
}

/* Loader */
.loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    margin-right: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none !important;
}

/* Drag & Drop Zone */
.drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    transition: all 0.2s;
    background: #fff;
    cursor: pointer;
}

.drop-zone.dragover {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.drop-zone p {
    margin: 0;
    font-size: 0.9rem;
    pointer-events: none;
}

/* File Input (hidden) */
.file-input {
    display: none;
}

/* Settings Button */
.settings-btn {
    font-size: 1.25rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s;
}

.settings-btn:hover {
    transform: rotate(45deg);
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 450px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.3s ease-out;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

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

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.modal-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.modal-desc a {
    color: var(--primary-color);
}

.key-status {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.key-status.has-key {
    background: #dcfce7;
    color: #166534;
}

.key-status.no-key {
    background: #fef3c7;
    color: #92400e;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Password input */
input[type="password"] {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-family: monospace;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #f9fafb;
}

input[type="password"]:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* API 키 섹션 스타일 */
.api-key-section {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #3b82f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

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

.api-key-icon {
    font-size: 1.2rem;
}

.api-key-title {
    font-weight: 600;
    color: #1e40af;
}

.api-key-help-link {
    margin-left: auto;
    font-size: 0.85rem;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.api-key-help-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.api-key-status {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.api-key-status.status-ok {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.api-key-status.status-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.api-key-status.status-loading {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.api-key-input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.api-key-input-group input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #93c5fd;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.api-key-input-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.api-key-note {
    font-size: 0.8rem;
    color: #1e40af;
    margin: 0;
    margin-top: 0.5rem;
}

.api-key-note a {
    color: #3b82f6;
    font-weight: 600;
}

.api-key-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.api-key-input-row input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 1px solid #93c5fd;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: white;
}

.api-key-input-row input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.api-key-validation {
    font-size: 0.85rem;
    padding: 0.4rem 0;
    min-height: 1.5rem;
}

.api-key-validation.valid {
    color: #16a34a;
}

.api-key-validation.invalid {
    color: #dc2626;
}

/* 블라인드 채용 체크박스 스타일 */
.blind-recruitment-option {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid #f59e0b;
    border-radius: 4px;
    margin-right: 0.75rem;
    position: relative;
    background: white;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked+.checkbox-custom {
    background: #f59e0b;
    border-color: #d97706;
}

.checkbox-label input[type="checkbox"]:checked+.checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.checkbox-text {
    font-size: 1rem;
}

.option-description {
    color: #78350f;
    font-size: 0.8rem;
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

/* 블라인드 채용 위반 경고 스타일 */
.blind-violation-warning {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #ef4444;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    animation: warningPulse 0.5s ease-out;
}

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

    50% {
        transform: scale(1.02);
    }

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

.blind-violation-warning h4 {
    color: #dc2626;
    font-size: 0.95rem;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blind-violation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blind-violation-list li {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: white;
    border-radius: 0.5rem;
    border-left: 4px solid #ef4444;
    font-size: 0.9rem;
}

.blind-violation-list li:last-child {
    margin-bottom: 0;
}

.violation-text {
    color: #dc2626;
    font-weight: 600;
}

.violation-reason {
    display: inline-block;
    background: #dc2626;
    color: white;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    margin-left: 0.5rem;
    font-weight: 500;
}

.violation-category {
    display: inline-block;
    background: #fca5a5;
    color: #7f1d1d;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.25rem;
    font-weight: 600;
}

/* 자기소개서 항목 카드 - 위반 상태 */
.item-card.has-violation {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.item-card.has-violation:hover {
    border-color: #dc2626;
}

/* 기관명 오타 경고 스타일 */
.orgname-violation-warning {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #3b82f6;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    animation: warningPulse 0.5s ease-out;
}

.orgname-violation-warning h4 {
    color: #1d4ed8;
    font-size: 0.95rem;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.orgname-violation-warning .blind-violation-list li {
    border-left: 4px solid #3b82f6;
}

.orgname-violation-warning .violation-text {
    color: #1d4ed8;
}

.orgname-reason {
    background: #3b82f6 !important;
}

/* 기관명 오타만 있는 경우 카드 스타일 */
.item-card.has-orgname-warning:not(.has-violation) {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #fff 0%, #eff6ff 100%);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.item-card.has-orgname-warning:not(.has-violation):hover {
    border-color: #2563eb;
}

/* 요구사항 누락 경고 스타일 (주황색) */
.requirement-violation-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #f59e0b;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    animation: warningPulse 0.5s ease-out;
}

.requirement-violation-warning h4 {
    color: #b45309;
    font-size: 0.95rem;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.requirement-violation-warning .blind-violation-list li {
    border-left: 4px solid #f59e0b;
}

.requirement-violation-warning .violation-text {
    color: #b45309;
}

.req-category {
    background: #fde68a !important;
    color: #92400e !important;
}

.req-reason {
    background: #f59e0b !important;
}

/* 요구사항 누락만 있는 경우 카드 스타일 */
.item-card.has-requirement-warning:not(.has-violation):not(.has-orgname-warning) {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.item-card.has-requirement-warning:not(.has-violation):not(.has-orgname-warning):hover {
    border-color: #d97706;
}

/* 메인 분석 버튼 */
.btn-analyze-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* 항목별 분석 버튼 */
.item-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

.btn-item-analyze {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-item-analyze:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
    filter: brightness(1.1);
}

.btn-item-analyze:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.beta-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
    border-radius: 9999px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* 분석 결과 모달 */
.analysis-modal-content {
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
}

.analysis-modal-body {
    margin-top: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.analysis-modal-body h1,
.analysis-modal-body h2,
.analysis-modal-body h3 {
    color: var(--text-primary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.analysis-modal-body h1:first-child,
.analysis-modal-body h2:first-child,
.analysis-modal-body h3:first-child {
    margin-top: 0;
}

.analysis-modal-body ul,
.analysis-modal-body ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.analysis-modal-body li {
    margin-bottom: 0.25rem;
}

.analysis-modal-body strong {
    color: #7c3aed;
}

.analysis-modal-body code {
    background: #e5e7eb;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.analysis-modal-body blockquote {
    border-left: 4px solid #7c3aed;
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* 오타 감지 리포트 */
.typo-report-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #fff;
    border: 1px solid #d1d5db;
    /* var(--border-color) fallback */
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.typo-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.typo-report-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.typo-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.typo-card {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

.typo-card.org-typo {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.typo-card.spell-error {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.typo-card strong {
    font-weight: 600;
    margin-right: 0.5rem;
    min-width: 60px;
}

.typo-card .arrow {
    margin: 0 0.5rem;
    color: #6b7280;
}

.typo-card.org-typo .arrow {
    color: #dc2626;
}

.typo-card .suggestion {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.typo-reason {
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.8;
}

.typo-no-issue {
    text-align: center;
    color: #6b7280;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
}

.typo-context {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 0.25rem;
    font-size: 0.85rem;
    color: #4b5563;
    font-style: italic;
    line-height: 1.4;
}

.typo-highlight {
    font-weight: bold;
    color: #ef4444;
    /* 빨간색 텍스트 */
    background-color: #fee2e2;
    /* 연한 빨간색 배경 */
    padding: 0 0.2rem;
    border-radius: 0.1rem;
    font-style: normal;
}

/* 일반 오타의 하이라이트는 덜 강하게 */
.spell-error .typo-highlight {
    color: #b91c1c;
    background-color: transparent;
    text-decoration: underline;
    text-decoration-color: #fca5a5;
    text-decoration-thickness: 2px;
}

/* 오타 리포트 그룹 (접기/펼치기) */
.typo-group {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    background-color: #fff;
}

.typo-group:last-child {
    margin-bottom: 0;
}

.typo-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f9fafb;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.typo-group-header:hover {
    background-color: #f3f4f6;
}

.typo-group-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.typo-group-body {
    display: none;
    /* 기본 숨김 */
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    background-color: #fff;
}

/* 활성화 상태 */
.typo-group.active .typo-group-body {
    display: block;
}

.typo-group.active .typo-group-header {
    background-color: #eff6ff;
}

.toggle-icon {
    font-size: 0.8rem;
    color: #6b7280;
    transition: transform 0.3s ease;
}

.typo-group.active .toggle-icon {
    transform: rotate(180deg);
}

/* 블라인드 위반 스타일 (오타와 유사하지만 주황색 계열) */
.blind-violation {
    background-color: #fff7ed;
    border: 1px solid #ffedd5;
    color: #9a3412;
}

.blind-violation .typo-found {
    color: #ea580c;
    font-weight: bold;
}

.blind-violation .typo-highlight {
    color: #c2410c;
    background-color: #ffedd5;
}

.blind-violation .arrow {
    color: #fb923c;
}<!DOCTYPE html>

<html lang="ko">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AI ?-���?����??z���M� ?��??I� �??/title>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>

        :root {

            --primary-color: #3b82f6;

            --bg-color: #f3f4f6;

            --card-bg: #ffffff;

            --text-main: #111827;

            --text-sub: #4b5563;

            --border-color: #e5e7eb;

        }



        body {

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

            background-color: var(--bg-color);

            padding: 2rem;

            margin: 0;

            display: flex;

            justify-content: center;

        }



        .container {

            width: 100%;

            max-width: 900px;

            background: var(--card-bg);

            border-radius: 1rem;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

            overflow: hidden;

            min-height: 80vh;

        }



        /* Tabs */

        .tabs {

            display: flex;

            border-bottom: 2px solid var(--border-color);

            background: #f9fafb;

        }



        .tab {

            flex: 1;

            padding: 1rem;

            text-align: center;

            font-weight: 600;

            color: var(--text-sub);

            cursor: pointer;

            transition: all 0.2s;

            border-bottom: 2px solid transparent;

            margin-bottom: -2px;

        }



        .tab:hover {

            color: var(--primary-color);

            background: #eff6ff;

        }



        .tab.active {

            color: var(--primary-color);

            border-bottom: 2px solid var(--primary-color);

            background: #fff;

        }



        .tab-content {

            display: none;

            padding: 2rem;

            animation: fadeIn 0.3s ease-in-out;

        }



        .tab-content.active {

            display: block;

        }



        @keyframes fadeIn {

            from {

                opacity: 0;

                transform: translateY(5px);

            }



            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        h2,

        h3,

        h4 {

            color: var(--text-main);

            margin-top: 0;

        }



        /* --- Typo Styles (Borrowed from previous step) --- */

        .typo-report-section {

            padding: 1.5rem;

            background: #fff;

            border: 1px solid #d1d5db;

            border-radius: 0.5rem;

        }



        .typo-card {

            display: flex;

            align-items: flex-start;

            padding: 1rem;

            border-radius: 0.5rem;

            font-size: 0.95rem;

            margin-bottom: 0.5rem;

        }



        .typo-card.org-typo {

            background: #fef2f2;

            border: 1px solid #fecaca;

            color: #991b1b;

        }



        .typo-card.spell-error {

            background: #f9fafb;

            border: 1px solid #e5e7eb;

            color: #374151;

        }



        .typo-card strong {

            font-weight: 600;

            margin-right: 0.5rem;

        }



        .arrow {

            margin: 0 0.5rem;

            color: #6b7280;

        }



        .typo-highlight {

            font-weight: bold;

            padding: 0 0.2rem;

            border-radius: 0.1rem;

        }



        .typo-highlight.red {

            color: #ef4444;

            background: #fee2e2;

        }



        .typo-group-header {

            display: flex;

            justify-content: space-between;

            padding: 1rem;

            background: #f9fafb;

            cursor: pointer;

            border: 1px solid #e5e7eb;

            border-radius: 0.5rem 0.5rem 0 0;

        }



        .typo-group-body {

            display: none;

            padding: 1rem;

            border: 1px solid #e5e7eb;

            border-top: none;

            border-radius: 0 0 0.5rem 0.5rem;

        }



        .typo-group.active .typo-group-body {

            display: block;

        }



        /* --- Detailed Analysis Styles --- */

        .analysis-section {

            margin-bottom: 2.5rem;

        }



        .section-title {

            font-size: 1.25rem;

            font-weight: 700;

            border-left: 4px solid var(--primary-color);

            padding-left: 0.75rem;

            margin-bottom: 1rem;

        }



        /* Job Matching */

        .matching-table {

            width: 100%;

            border-collapse: collapse;

            font-size: 0.9rem;

        }



        .matching-table th {

            text-align: left;

            padding: 0.75rem;

            background: #f3f4f6;

            border-bottom: 2px solid #e5e7eb;

            color: #4b5563;

        }



        .matching-table td {

            padding: 0.75rem;

            border-bottom: 1px solid #e5e7eb;

            vertical-align: top;

        }



        .score-badge {

            display: inline-block;

            padding: 0.25rem 0.5rem;

            border-radius: 99px;

            font-weight: 600;

            font-size: 0.8rem;

        }



        .score-high {

            background: #dcfce7;

            color: #166534;

        }



        .score-mid {

            background: #fef9c3;

            color: #854d0e;

        }



        .score-low {

            background: #fee2e2;

            color: #991b1b;

        }



        /* Consistency */

        .consistency-grid {

            display: grid;

            grid-template-columns: 1fr;

            gap: 1rem;

        }



        .consistency-card {

            background: #fffbff;

            border: 1px solid #fed7aa;

            padding: 1rem;

            border-radius: 0.5rem;

        }



        .consistency-header {

            display: flex;

            align-items: center;

            gap: 0.5rem;

            font-weight: 600;

            color: #9a3412;

            margin-bottom: 0.5rem;

        }



        /* STAR Grid */

        .star-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 1rem;

            margin-bottom: 1rem;

        }



        .star-card {

            background: white;

            border: 1px solid #e5e7eb;

            padding: 1rem;

            border-radius: 0.5rem;

            text-align: center;

        }



        .star-score {

            font-size: 1.5rem;

            font-weight: 700;

            color: var(--primary-color);

        }



        .star-label {

            font-size: 0.9rem;

            color: var(--text-sub);

            font-weight: 600;

            margin-bottom: 0.5rem;

        }



        .star-text {

            font-size: 0.8rem;

            color: #6b7280;

            text-align: left;

            margin-top: 0.5rem;

            line-height: 1.3;

        }



        /* Style Analysis */

        .style-stats {

            display: flex;

            gap: 1rem;

            flex-wrap: wrap;

        }



        .stat-box {

            flex: 1;

            background: #f8fafc;

            padding: 1rem;

            border-radius: 0.5rem;

            border: 1px solid #e2e8f0;

        }



        .stat-value {

            font-size: 1.25rem;

            font-weight: 700;

            color: #0f172a;

        }



        .stat-label {

            font-size: 0.85rem;

            color: #64748b;

        }

    </style>

</head>



<body>



    <div class="container">

        <div style="padding: 1.5rem 2rem 0.5rem 2rem;">

            <h2 style="margin-bottom:0.5rem;">AI ?-���?����??z���M� 1uK��??/h2>

            <p style="color:#6b7280; font-size:0.9rem; margin:0;">���??����": ?
��?
�
� ?̬��??| ??I0: ���???°�</p>

        </div>



        <div class="tabs">

            <div class="tab active" onclick="switchTab('basic')">1. rnլ�� ?-�? (?}1?/ɑ��*�?��v�)</div>

            <div class="tab" onclick="switchTab('detailed')">2. ?��m� z���M� (����"/STAR/����ܮ)</div>

        </div>



        <!-- Tab 1: Basic Check -->

        <div id="tab-basic" class="tab-content active">

            <div id="typo-report-container"></div>



            <div style="margin-top: 2rem;">

                <h3 style="font-size:1.1rem; color:#111827; margin-bottom:1rem;">?�� ɑ��*�?��v� ?���� ?-�?</h3>

                <div class="typo-report-section" style="border-left: 4px solid #f59e0b;">

                    <div style="display:flex; align-items:center; gap:0.5rem; color:#92400e;">

                        <span style="font-weight:700;">�N����</span>

                        <span>�Z�p�??a�(`��? ?a�?d$¹ ?
���??�Z/�??���?�r�??</span>

                    </div>

                    <div

                        style="margin-top:0.5rem; font-size:0.9rem; background:#fffbeb; padding:0.5rem; border-radius:0.25rem; color:#b45309;">

                        "?�??<span style="background:#fcd34d; font-weight:bold;">?�������?s�L�</span> ?��� ���?/�#�?��� 9m��"?��??.."

                    </div>

                </div>

            </div>

        </div>



        <!-- Tab 2: Detailed Analysis -->

        <div id="tab-detailed" class="tab-content">



            <!-- Section 1: Job Matching -->

            <div class="analysis-section">

                <div class="section-title">?d� (`�,� ��|16� �����1uJ��??/div>

                <p style="font-size:0.9rem; color:#6b7280; margin-bottom:1rem;">(`�,�����ɿ???����?��� ?���� ??��???/���?��ɿ ?��O�??ۊ�z�?���?��? z���M�?x$r�??

                </p>

                <table class="matching-table">

                    <thead>

                        <tr>

                            <th width="20%">?���� ??��</th>

                            <th width="15%">��|16� �Z��ĸ</th>

                            <th>9m��E� ����#� ۊ?z���M�</th>

                        </tr>

                    </thead>

                    <tbody id="matching-tbody">

                        <!-- JS Render -->

                    </tbody>

                </table>

            </div>



            <!-- Section 2: STAR Analysis -->

            <div class="analysis-section">

                <div class="section-title">�r?STAR rnլ�� z���M�</div>

                <div class="star-grid" id="star-grid">

                    <!-- JS Render -->

                </div>

                <div class="typo-report-section"

                    style="background:#f0f9ff; border:1px solid #bae6fd; color:#0369a1; font-size:0.9rem;">

                    <strong>?�� AI ?��v�ۊ?</strong> <span id="star-feedback"></span>

                </div>

            </div>



            <!-- Section 3: Consistency & Style -->

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">

                <div class="analysis-section">

                    <div class="section-title">?s�� ?��???ۊ?��e$ڲ �[�??/div>

                    <div id="consistency-container">

                        <!-- JS Render -->

                    </div>

                </div>



                <div class="analysis-section">

                    <div class="section-title">?��� ����ܮ ۊ?�cJܮ??/div>

                    <div class="style-stats" id="style-stats">

                        <!-- JS Render -->

                    </div>

                    <div style="margin-top:1rem; font-size:0.9rem;">

                        <div style="font-weight:600; margin-bottom:0.5rem;">pu���� ?�� ?��}�:</div>

                        <ul id="style-suggestions" style="color:#4b5563; padding-left:1.2rem;"></ul>

                    </div>

                </div>

            </div>



        </div>

    </div>



    <script>

        // --- Mock Data ---

        const mockTypoData = {

            "org_typos": [

                { "found": "�c?Բ(`��0�??, "correct": "�c?0%?���(`��0�??, "context": "...9m���??�c?Բ(`��0�?/�ɿ ?����?��� �[ˮ � E�I� �?I���?H���.", "reason": "rn̬?��??��1� ?J�� z�G�?" }

            ],

            "spelling_errors": [

                { "found": "?��r�??, "suggestion": "?��r�??, "context": "?�??��|1�� Wt��8�???C���?��r�??", "reason": "����D�0�??{1��" }

            ]

        };



        const mockDetailedData = {

            "job_matching": {

                "keywords": ["?
�� ?z�m�(`?p�׬��", "n���2�?�c� z���M�", "?��� ?�0�"],

                "analysis": [

                    { "keyword": "?
�� ?z�m�(`?p�׬��", "score": 5, "found": true, "evidence": "?�???��� ?��ĸ ?����?|1ɿ??3�Z��aÛZ??�O� ۊ??x�*?���� ����� p�׬��?�I
..." },

                    { "keyword": "n���2�?�c� z���M�", "score": 2, "found": false, "evidence": "?a�??�[��տ??������?��]��o??x��?�? ?�/�?�r�??" },

                    { "keyword": "?��� ?�0�", "score": 4, "found": true, "evidence": "?� ?���?z�ô ?��� �N??
�Į pux$θ??�N�1�?
�,�..." }

                ]

            },

            "star_analysis": {

                "scores": { "S": 5, "T": 3, "A": 4, "R": 2 },

                "key_sentences": {

                    "S": "?�??4?��, p����� ?��&???��P� ?�??����G�?�r�??",

                    "T": "rn�3� ?
�ɿ 100�Z���� ?�F�??������?
�^� ?I���?H���.",

                    "A": "?�??��|1*� ?H�
� 5?��ɿ ?
�? ?�F������� �N��ĸ?I���?H���.",

                    "R": "�[̬�� ��d$�� ������?I���?H���. (�cJܮ???C��� ?��� z��p�?"

                },

                "feedback": "?����(S)(`??0�޸(A)?� �cJܮ?�� �?? �[̬��(R) z��z���ɿ???����?��$� ?C���??9m��� ?��3� ?����?�ô�Z� z��p�J�@�?H���."

            },

            "consistency": {

                "main_values": ["?F���", "?G���"],

                "contradictions": [

                    { "issue": "�N�ĸ ?H�� �[��տ", "context": "?�?��??H�" ?�~�???���??����ɿ 9m��T�?/���?�r�??", "severity": "Medium" }

                ]

            },

            "style_analysis": {

                "passive_voice_ratio": 15,

                "abstract_words": ["?
���??, "����Q�???}1P�"],

                "suggestions": [

                    { "original": "?
���???��0�?I���?H���.", "better": "��|1� 3???a�???��??�ɿ ����M�?�� ?��&?F��� rn��??�r�??" }

                ]

            }

        };



        // --- Render Functions ---



        function switchTab(tabName) {

            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));

            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));



            document.querySelector(`.tab:nth-child(${tabName === 'basic' ? 1 : 2})`).classList.add('active');

            document.getElementById(`tab-${tabName}`).classList.add('active');

        }



        function renderBasicTab() {

            const container = document.getElementById('typo-report-container');

            let html = `

                <div class="typo-report-section">

                    <div class="typo-group-header" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display==='block'?'none':'block'">

                        <h4>?�� rn̬?��??}1? <span style="color:#dc2626; background:#fee2e2; padding:0.1rem 0.4rem; border-radius:99px; font-size:0.85rem;">${mockTypoData.org_typos.length}�Z?/span></h4>

                        <span>??/span>

                    </div>

                    <div class="typo-group-body" style="display:block;">

            `;

            mockTypoData.org_typos.forEach(item => {

                html += `<div class="typo-card org-typo"><div>

                            <span style="text-decoration:line-through; color:gray;">${item.found}</span> 

                            <span class="arrow">??/span> 

                            <strong>${item.correct}</strong>

                            <div style="font-size:0.85rem; margin-top:0.3rem;">${item.reason}</div>

                            <div style="font-size:0.8rem; color:#666; margin-top:0.3rem; font-style:italic;">"${item.context}"</div>

                         </div></div>`;

            });

            html += `</div></div>`;



            // ?���� ?}1?

            html += `

                <div class="typo-report-section" style="margin-top:1rem;">

                    <div class="typo-group-header" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display==='block'?'none':'block'">

                        <h4>?w� ?���� ?}1? <span style="background:#f3f4f6; padding:0.1rem 0.4rem; border-radius:99px; font-size:0.85rem;">${mockTypoData.spelling_errors.length}�Z?/span></h4>

                        <span>??/span>

                    </div>

                    <div class="typo-group-body" style="display:none;">

            `;

            mockTypoData.spelling_errors.forEach(item => {

                html += `<div class="typo-card spell-error"><div>

                            <span style="text-decoration:line-through; color:gray;">${item.found}</span> 

                            <span class="arrow">??/span> 

                            <strong>${item.suggestion}</strong>

                            <div style="font-size:0.8rem; color:#666; margin-top:0.3rem;">"${item.context}"</div>

                         </div></div>`;

            });

            html += `</div></div>`;





            container.innerHTML = html;

        }



        function renderDetailedTab() {

            const data = mockDetailedData;



            // 1. Matching

            const matchingTbody = document.getElementById('matching-tbody');

            matchingTbody.innerHTML = data.job_matching.analysis.map(item => {

                let badgeClass = item.score >= 4 ? 'score-high' : (item.score >= 3 ? 'score-mid' : 'score-low');

                let badgeText = item.score >= 4 ? '?׬Բ (High)' : (item.score >= 3 ? 'B��;� (Mid)' : '����	� (Low)');

                return `

                    <tr>

                        <td style="font-weight:600;">${item.keyword}</td>

                        <td><span class="score-badge ${badgeClass}">${badgeText}</span></td>

                        <td style="color:#4b5563; font-size:0.9rem;">${item.evidence || '<span style="color:#991b1b;">?a�???
���??������ ???����?H���.</span>'}</td>

                    </tr>

                `;

            }).join('');



            // 2. STAR Analysis

            const starGrid = document.getElementById('star-grid');

            const starLabels = { "S": "Situation (?����)", "T": "Task ((`��#�)", "A": "Action (?0�޸)", "R": "Result (�[̬��)" };



            let starHtml = '';

            for (const [key, score] of Object.entries(data.star_analysis.scores)) {

                let color = score >= 4 ? '#16a34a' : (score >= 3 ? '#d97706' : '#dc2626');

                starHtml += `

                    <div class="star-card" style="border-top: 4px solid ${color}">

                        <div class="star-label">${starLabels[key]}</div>

                        <div class="star-score" style="color:${color}">${score}/5</div>

                        <div class="star-text">${data.star_analysis.key_sentences[key] || '-'}</div>

                    </div>

                `;

            }

            starGrid.innerHTML = starHtml;

            document.getElementById('star-feedback').innerText = data.star_analysis.feedback;





            // 3. Consistency

            const consistencyContainer = document.getElementById('consistency-container');

            if (data.consistency.contradictions.length > 0) {

                consistencyContainer.innerHTML = data.consistency.contradictions.map(c => `

                    <div class="consistency-card" style="background:#fff5f5; border-color:#fecaca;">

                        <div class="consistency-header">

                            ?��� ${c.issue}

                            <span style="font-size:0.75rem; background:#fee2e2; color:#991b1b; padding:0.1rem 0.4rem; border-radius:4px;">${c.severity}</span>

                        </div>

                        <div style="font-size:0.9rem; color:#4b5563;">"${c.context}"</div>

                    </div>

                `).join('');

            } else {

                consistencyContainer.innerHTML = `<div style="padding:1rem; background:#f0fdf4; color:#166534; border-radius:0.5rem;">??ۊ��Į??��e$ڲ???����?H���.</div>`;

            }



            // 4. Style

            const styleStats = document.getElementById('style-stats');

            styleStats.innerHTML = `

                <div class="stat-box">

                    <div class="stat-value">${data.style_analysis.passive_voice_ratio}%</div>

                    <div class="stat-label">?�޸??n���I�</div>

                </div>

                <div class="stat-box">

                    <div class="stat-value">${data.style_analysis.abstract_words.length}�Z?/div>

                    <div class="stat-label">pu��=�???e$1� ?J��</div>

                </div>

            `;



            const styleSuggestions = document.getElementById('style-suggestions');

            styleSuggestions.innerHTML = data.style_analysis.suggestions.map(s => `

                <li style="margin-bottom:0.5rem;">

                    <span style="text-decoration:line-through; color:#9ca3af;">"${s.original}"</span>

                    <span style="margin:0 0.5rem;">??/span>

                    <span style="color:#2563eb; font-weight:600;">"${s.better}"</span>

                </li>

            `).join('');



        }



        // Initialize

        renderBasicTab();

        renderDetailedTab();



    </script>



</body>



</html>

/* --- New Analysis Styles --- */



/* Tabs */

.tabs {

    display: flex;

    border-bottom: 2px solid var(--border-color);

    background: #f9fafb;

    margin-bottom: 2rem;

}



.tab {

    flex: 1;

    padding: 1rem;

    text-align: center;

    font-weight: 600;

    color: var(--text-secondary);

    cursor: pointer;

    transition: all 0.2s;

    border-bottom: 2px solid transparent;

    margin-bottom: -2px;

}



.tab:hover {

    color: var(--primary-color);

    background: #eff6ff;

}



.tab.active {

    color: var(--primary-color);

    border-bottom: 2px solid var(--primary-color);

    background: #fff;

}



.tab-content {

    display: none;

    animation: fadeIn 0.3s ease-in-out;

}



.tab-content.active {

    display: block;

}



/* Analysis Sections */

.analysis-section {

    margin-bottom: 2.5rem;

}



.section-title {

    font-size: 1.25rem;

    font-weight: 700;

    border-left: 4px solid var(--primary-color);

    padding-left: 0.75rem;

    margin-bottom: 1rem;

}



/* Matching Table */

.matching-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.9rem;

    margin-bottom: 1rem;

}



.matching-table th {

    text-align: left;

    padding: 0.75rem;

    background: #f3f4f6;

    border-bottom: 2px solid #e5e7eb;

    color: #4b5563;

}



.matching-table td {

    padding: 0.75rem;

    border-bottom: 1px solid #e5e7eb;

    vertical-align: top;

}



.score-badge {

    display: inline-block;

    padding: 0.25rem 0.5rem;

    border-radius: 99px;

    font-weight: 600;

    font-size: 0.8rem;

}



.score-high {

    background: #dcfce7;

    color: #166534;

}



.score-mid {

    background: #fef9c3;

    color: #854d0e;

}



.score-low {

    background: #fee2e2;

    color: #991b1b;

}



/* STAR Grid */

.star-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;

    margin-bottom: 1rem;

}



.star-card {

    background: white;

    border: 1px solid #e5e7eb;

    padding: 1rem;

    border-radius: 0.5rem;

    text-align: center;

}



.star-score {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--primary-color);

}



.star-label {

    font-size: 0.9rem;

    color: var(--text-secondary);

    font-weight: 600;

    margin-bottom: 0.5rem;

}



.star-text {

    font-size: 0.8rem;

    color: #6b7280;

    text-align: left;

    margin-top: 0.5rem;

    line-height: 1.3;

}



/* Consistency */

.consistency-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem;

}



.consistency-card {

    background: #fffbff;

    border: 1px solid #fed7aa;

    padding: 1rem;

    border-radius: 0.5rem;

    margin-bottom: 0.5rem;

}



.consistency-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 600;

    color: #9a3412;

    margin-bottom: 0.5rem;

}



/* Style Stats */

.style-stats {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin-bottom: 1rem;

}



.stat-box {

    flex: 1;

    min-width: 150px;

    background: #f8fafc;

    padding: 1rem;

    border-radius: 0.5rem;

    border: 1px solid #e2e8f0;

}



.stat-value {

    font-size: 1.25rem;

    font-weight: 700;

    color: #0f172a;

}



.stat-label {

    font-size: 0.85rem;

    color: #64748b;

}



/* Typo Cards */

.typo-report-section {

    padding: 1.5rem;

    background: #fff;

    border: 1px solid #d1d5db;

    border-radius: 0.5rem;

    margin-bottom: 1rem;

}



.typo-card {

    display: flex;

    align-items: flex-start;

    padding: 1rem;

    border-radius: 0.5rem;

    font-size: 0.95rem;

    margin-bottom: 0.5rem;

}



.typo-card.org-typo {

    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #991b1b;

}



.typo-card.spell-error {

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    color: #374151;

}



.typo-group-header {

    display: flex;

    justify-content: space-between;

    padding: 1rem;

    background: #f9fafb;

    cursor: pointer;

    border: 1px solid #e5e7eb;

    border-radius: 0.5rem 0.5rem 0 0;

}



.typo-group-body {

    display: none;

    padding: 1rem;

    border: 1px solid #e5e7eb;

    border-top: none;

    border-radius: 0 0 0.5rem 0.5rem;

}



.arrow {

    margin: 0 0.5rem;

    color: #6b7280;

}


/* ���� �����̳� ���� ��Ÿ�� */
.ads-wrapper {
    text-align: center;
    margin: 20px auto;
    min-height: 100px; /* ���� �ε� �� �� ���� Ȯ�� */
    overflow: hidden;
}
/* ����Ͽ����� ���̸� ���� �� Ȯ�� */
@media (max-width: 768px) {
    .ads-wrapper { min-height: 250px; }
}