/* ============================================================
   영어 영상 학습툴 — 1차 디자인 리뉴얼 (디자인개선plan.md)
   video.css 뒤에 로드되어 동일 클래스를 오버라이드한다.
   DOM/id/data-*/JS 훅은 일절 건드리지 않고 CSS만 교체.
   색상: Deep Navy 컨셉 (docs/색상컨셉01.html)
   ============================================================ */

/* ---------- 색상 컨셉: Deep Navy ----------
   페이지 콘텐츠 루트에만 토큰 재정의 → 공용 헤더/푸터는 유지하고
   이 페이지의 모든 --c-* 참조(원본 css + 리디자인 css)를 재색칠. */
#videoStudyRoot {
    --c-bg: #FAF7F0;
    --c-surface: #FFFFFC;
    --c-surface-alt: #EDE8DC;
    --c-primary: #1E3A5F;
    --c-primary-deep: #142840;
    --c-secondary: #8B9B6B;
    --c-accent: #FCBF49;
    --c-ink: #1A2430;
    --c-muted: #6C7079;
    --c-border: #E2DDD0;
    --c-tint: #E7EEF5;
    /* 별칭(이전 테마 변수명을 쓰는 원본 video.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(30, 58, 95, .22);
}

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

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

/* ---------- 카드 공통: 둥근 모서리 + 소프트 섀도 ---------- */
.video-study-card,
.video-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);
}

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

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

/* ---------- 버튼 ---------- */
.video-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;
}

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

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

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

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

#delete-btn:disabled {
    background: transparent;
    opacity: 0.5;
}

/* ---------- 추천 채널: 균일 pill 그리드 ---------- */
.video-box-title,
.video-list-title {
    font-size: 1.2rem;
}

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

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

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

/* ---------- LIST ---------- */
.video-job-item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: var(--space-4);
}

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

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

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

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