/**
 * Components — 재사용 컴포넌트 (Figma Components 페이지)
 * Button · Tag · Stat · Card · Spec Table · Tabs/Accordion · Forms
 */

/* ---------- Button — 알약형. Primary=CTA(레드) · Secondary=그린 · Outline=보조 · White=레드 면 위 ---------- */
.btn {
    display: inline-flex; align-items: center; gap: var(--space-8);
    padding: var(--space-12) 22px;
    font: 600 14px/1.4 var(--font); white-space: nowrap;
    border: 1px solid transparent; border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}
.btn--lg { padding: var(--space-16) var(--space-28); font-size: 16px; }
.btn--primary { background: var(--action-primary); color: var(--text-inverse); }
.btn--primary:hover { background: var(--action-primary-hover); }
.btn--secondary { background: var(--action-secondary); color: var(--text-inverse); }
.btn--secondary:hover { background: var(--action-secondary-hover); }
.btn--outline { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--outline:hover { color: var(--text-brand); border-color: var(--border-brand); }
.btn--white { background: var(--bg-default); color: var(--text-brand); }
.btn--white:hover { background: var(--bg-tint); }
.btn-arrow { transition: transform var(--transition-fast); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Tag ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tag {
    display: inline-flex; align-items: center; padding: var(--space-8) var(--space-16);
    font: 500 15px/1.6 var(--font); white-space: nowrap;
    background: var(--bg-tint); color: var(--text-brand); border-radius: var(--radius-full);
}
.tag--accent { background: var(--bg-accent-soft); color: var(--text-accent); }
.tag--neutral { background: var(--bg-subtle); color: var(--text-secondary); }

/* 배지 — 카드 머리의 작은 구분 표시 (NEXIA 전문 · ZESN 협력) */
.badge {
    display: inline-flex; align-items: center; padding: 5px 10px;
    font: 600 14px/1.6 var(--font); white-space: nowrap;
    background: var(--bg-tint); color: var(--text-brand); border-radius: var(--radius-xs);
}
.badge--accent { background: var(--bg-accent-soft); color: var(--text-accent); }

/* ---------- Card ---------- */
.card {
    display: flex; flex-direction: column;
    padding: var(--space-32);
    background: var(--bg-default); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.card--subtle { background: var(--bg-subtle); border-color: transparent; }
.card--accent { background: var(--bg-accent); border-color: var(--bg-accent); color: var(--text-inverse); }
.card-icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--text-brand); }
.card--accent .card-icon { color: var(--text-inverse); }
.card-title { font: var(--title-24); letter-spacing: var(--title-24-ls); color: var(--text-primary); }
.card--accent .card-title { color: var(--text-inverse); }
.card-desc { margin-top: 10px; font: var(--body-16); color: var(--text-secondary); }
.card--accent .card-desc { color: var(--green-50); }
.card-icon + .card-title { margin-top: 32px; }

/* ---------- Stat — 지표 한 줄 (키 · 값) ---------- */
.stat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-block: var(--space-16); border-bottom: 1px solid var(--border-default); }
.stat-key { font: 500 16px/1.6 var(--font); color: var(--text-secondary); }
.stat-value { font: var(--heading-32); letter-spacing: var(--heading-32-ls); color: var(--text-brand); white-space: nowrap; }

/* ---------- Spec Table — 좌측 키 · 우측 값 (Figma S3 Specs Table) ---------- */
.spec-table { border-top: 1px solid var(--gray-700); border-bottom: 1px solid var(--gray-700); }
.spec-table th, .spec-table td { padding: 22px var(--space-28) 22px 0; vertical-align: top; text-align: left; border-bottom: 1px solid var(--border-default); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
/* 키 칸 = 왼쪽 28 + 키 200 + 간격 32 → 값은 260 에서 시작 */
.spec-table th { width: 260px; padding-left: var(--space-28); padding-right: var(--space-32); font: 600 18px/1.6 var(--font); color: var(--text-primary); }
.spec-table td { font: var(--body-18); color: var(--text-secondary); }
.spec-table tr.is-highlight th, .spec-table tr.is-highlight td { background: var(--bg-tint); color: var(--text-brand); }

/* 비교표 — 열 머리가 있는 표 (H Robot 모델 비교 · 도입 성과) */
.data-table { border-top: 1px solid var(--border-strong); font: var(--body-16); }
.data-table th, .data-table td { padding: 18px var(--space-20); text-align: left; border-bottom: 1px solid var(--border-default); }
.data-table thead th { font: 600 15px/1.4 var(--font); color: var(--text-secondary); background: var(--bg-subtle); }
.data-table tbody th { font-weight: 600; color: var(--text-primary); }
.data-table td { color: var(--text-secondary); }
.data-table .is-strong { color: var(--text-brand); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ---------- Prose — 문서형 본문 (개인정보처리방침 등) ---------- */
.prose { max-width: 880px; font: var(--body-18); color: var(--text-secondary); }
.prose > * + * { margin-top: var(--space-16); }
.prose h2 { margin-top: var(--space-48); font: var(--title-24); letter-spacing: var(--title-24-ls); color: var(--text-primary); }
.prose strong { color: var(--text-primary); font-weight: 600; }

/* ---------- Tabs · Accordion (data-tab-group / data-accordion-group) ---------- */
[data-tab-content] { display: none; }
[data-tab-content].active { display: block; }

/* ---------- Forms — Figma SUB 04 문의 Field ---------- */
.form-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.form-label { font: 600 13px/1.4 var(--font); color: var(--text-secondary); }
.form-label .req { color: var(--text-brand); }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: var(--space-16) 18px;
    font: var(--body-16); color: var(--text-primary);
    background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-tertiary); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--border-brand); background: var(--bg-default); }
.form-textarea { height: 150px; min-height: 150px; resize: vertical; }
.form-select {
    appearance: none; padding-right: 44px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
/* 값이 빈 첫 항목이 선택돼 있으면 placeholder 색 */
.form-select:has(option[value=""]:checked) { color: var(--text-tertiary); }
.form-select option { color: var(--text-primary); }

@media (max-width: 767px) {
    .spec-table th, .spec-table td { display: block; width: auto; padding: 14px var(--space-16); }
    .spec-table th { padding-bottom: 0; border-bottom: 0; font-size: 16px; }
    .spec-table td { font-size: 16px; }
    .card { padding: var(--space-24); }
    .stat-value { font-size: 26px; }
}