/* ============================================================
   영어 텍스트 추출 — 1차 디자인 리뉴얼 (디자인개선plan.md 5장)
   textract.css 뒤에 로드되어 동일 클래스를 오버라이드한다.
   DOM/id/data-*/JS 훅은 일절 건드리지 않고 CSS만 교체.
   값은 base.css의 디자인 토큰(--space-*, --radius-*, --shadow-*)을 사용.
   ============================================================ */

/* ---------- 색상 컨셉: Heritage Burgundy (docs/색상컨셉01.html) ----------
   페이지 콘텐츠 루트에만 토큰을 재정의 → 공용 헤더/푸터는 그대로 두고
   이 페이지의 모든 --c-* 참조(원본 css + 리디자인 css)를 한 번에 재색칠. */
#textractRoot {
    --c-bg: #FAF5EC;
    --c-surface: #FFFCF6;
    --c-surface-alt: #F3E9DA;
    --c-primary: #6A2E36;
    --c-primary-deep: #4A1E25;
    --c-secondary: #7F8C5A;
    --c-accent: #E0A93A;
    --c-ink: #2E2020;
    --c-muted: #7A6A60;
    --c-border: #E6D9C6;
    --c-tint: #F2E5E6;
    /* 별칭(이전 테마 변수명을 쓰는 원본 textract.css 지원) */
    --c-cream: var(--c-bg);
    --c-cream-light: var(--c-surface);
    --c-navy: var(--c-ink);
    --c-navy-soft: var(--c-muted);
    --c-orange: var(--c-primary);
    --c-orange-dark: var(--c-primary-deep);
    --c-line: var(--c-border);
    --ring: 0 0 0 3px rgba(106, 46, 54, .22);
}

/* ---------- 페이지 리듬 + 가로폭 축소(기존의 약 80%) ---------- */
.textract-wrap {
    max-width: 880px;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-5) 72px;
}

.textract-page-head {
    margin-bottom: var(--space-2);
}

/* ---------- 카드 공통: 둥근 모서리 + 소프트 섀도 ---------- */
.textract-card,
.textract-list-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: var(--space-6) var(--space-5);
}

/* ---------- 탭: 세그먼트 컨트롤 ---------- */
.textract-tabs {
    display: inline-flex;
    gap: var(--space-1);
    background: var(--c-tint);
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-5);
}

.textract-tab {
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--c-muted);
    padding: 9px 20px;
}

.textract-tab:hover {
    color: var(--c-primary);
    border-color: transparent;
}

.textract-tab.active {
    background: #fff;
    color: var(--c-primary);
    border-color: transparent;
    box-shadow: var(--shadow-1);
}

/* ---------- 입력 ---------- */
.textract-input {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 14px 44px 14px 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.textract-input:focus {
    border-color: var(--c-primary);
    box-shadow: var(--ring);
}

.textract-file-input-proxy.dragover {
    border-color: var(--c-primary);
    box-shadow: var(--ring);
}

/* ---------- 버튼 ---------- */
.textract-btn {
    border-radius: var(--radius-pill);
    padding: 11px 24px;
    box-shadow: var(--shadow-1);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.textract-btn:hover:not(:disabled) {
    background: var(--c-primary-deep);
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

.textract-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-1);
}

/* 보조 동작(수동 블럭 추출) = 고스트 버튼 */
#textract-file-manual-btn {
    background: transparent;
    color: var(--c-primary);
    border: 1.5px solid var(--c-primary);
    box-shadow: none;
}

#textract-file-manual-btn:hover {
    background: var(--c-tint);
    color: var(--c-primary-deep);
    transform: translateY(-1px);
    box-shadow: none;
}

/* 위험 동작(삭제) = 고스트 데인저 버튼 */
#textract-delete-btn {
    background: transparent;
    color: #C0392B;
    border: 1.5px solid #E0B4AD;
    box-shadow: none;
}

#textract-delete-btn:not(:disabled):hover {
    background: #C0392B;
    color: #fff;
    border-color: #C0392B;
    transform: translateY(-1px);
}

#textract-delete-btn:disabled {
    opacity: 0.5;
}

/* ---------- 진행/상태 ---------- */
.textract-progress {
    height: 6px;
}

.textract-progress-bar {
    background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-secondary) 100%);
}

.textract-status {
    margin-top: var(--space-1);
}

/* ---------- 추천 사이트: 균일 pill 그리드 ---------- */
.textract-box-title,
.textract-list-title {
    font-size: 1.2rem;
}

.textract-link-grid {
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: var(--space-3);
}

.textract-link-btn {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    min-height: 40px;
    background: var(--c-surface);
    font-size: 0.85rem;
}

.textract-link-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-tint);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

/* ---------- TEXT LIST ---------- */
.textract-list-header {
    margin-bottom: var(--space-3);
}

.textract-select-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-muted);
    cursor: pointer;
    user-select: none;
}

.textract-select-all input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--c-primary);
}

.textract-item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: var(--space-4);
}

.textract-item:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

.textract-inline-link,
.textract-inline-btn {
    border-radius: var(--radius-pill);
}

/* ---------- 페이지네이션 ---------- */
.textract-page-btn {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    min-width: 40px;
    height: 40px;
    background: var(--c-surface);
}

.textract-page-btn:hover:not(:disabled) {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-tint);
}

/* ---------- 반응형 ---------- */
@media (max-width: 768px) {
    .textract-wrap {
        padding: var(--space-6) var(--space-4) var(--space-8);
        gap: var(--space-5);
    }

    .textract-card,
    .textract-list-card {
        padding: var(--space-5) var(--space-4);
    }

    .textract-link-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}