/* ==========================================================================
   파일명 : accessibility.css
   설명 : 웹 접근성 보장을 위한 강력한 스타일 (강제 적용)
   ========================================================================== */

/* 1. 스킵 내비게이션 */
#skip_nav a {
    position: absolute; top: -100px; left: 0; width: 100%; height: 60px;
    background: #000; color: #fff; text-align: center; line-height: 60px;
    font-size: 1.2rem; font-weight: bold; z-index: 20000;
}
#skip_nav a:focus { top: 0; }

/* 2. 포커스링 (탭 이동 시 이중 링 — WCAG 1.4.11 대비비 보완)
   흰 배경에서 금색 단독으로는 대비 미달 → 내부 어두운 그림자로 보완
   시각: 요소 → 2px 어두운 링 → 2px 간격 → 4px 금색 링 */
:focus-visible {
    outline: 4px solid #FFD700 !important;
    outline-offset: 2px;
    /* C-02: 금색 링 양쪽에 어두운 링 — 흰 배경 대비 확보 (WCAG 1.4.11)
       렌더 순서 (안→밖): 어두운 2px → 금색 4px outline → 어두운 2px (8px shadow가 삐져나옴) */
    box-shadow: 0 0 0 2px #111111, 0 0 0 8px #111111;
}

/* 3. 읽기 가이드선 */
#reading_line {
    display: none; position: fixed; left: 0; width: 100%; height: 5px;
    background: #FF0000; z-index: 99999; pointer-events: none;
}

/* 4. 큰 커서 */
html.big-cursor, html.big-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" style="fill:magenta; stroke:white; stroke-width:2px;"><circle cx="24" cy="24" r="10"/></svg>') 24 24, auto !important;
}

/* ==========================================================================
   [OS 다크모드 대응] prefers-color-scheme: dark
   시스템 다크모드가 켜져 있을 때, 사이트 자체 고대비 모드와 충돌하지 않도록
   최소한의 스타일만 적용합니다.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    /* body[data-theme="high-contrast"]가 활성화된 경우 OS 다크모드 무시
       배경/텍스트/카드 오버라이드는 dark-mode.css 및 variables.css에서 처리합니다. */
    body:not([data-theme="high-contrast"]) a {
        color: #7db8f7;
    }
}

/* ==========================================================================
   [핵심] 고대비 모드 (High Contrast) - 흰색 배경 강제 제거
   ========================================================================== */
body[data-theme="high-contrast"] {
    background-color: #000000 !important;
    color: #FFFF00 !important;
}

/* 모든 요소의 배경을 검정, 글자는 노랑, 테두리는 초록으로 강제 통일 */
body[data-theme="high-contrast"] * {
    background-color: #000000 !important;
    background-image: none !important; /* 그라데이션 제거 */
    color: #FFFF00 !important;
    border-color: #00FF00 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 링크와 버튼 강조 */
body[data-theme="high-contrast"] a,
body[data-theme="high-contrast"] button {
    color: #FFFF00 !important;
    text-decoration: underline !important;
    font-weight: 900 !important;
}

/* 이미지는 눈부심 방지를 위해 흑백 처리 */
body[data-theme="high-contrast"] img,
body[data-theme="high-contrast"] .card-thumb {
    filter: grayscale(100%) contrast(120%);
}

/* 썸네일 영역 특수 처리 (이모지 보이게) */
body[data-theme="high-contrast"] .card-thumb {
    border: 1px solid #00FF00 !important;
}

/* 5. 위젯 UI (우측 하단) */
.a11y-widget { position: fixed; bottom: 40px; right: 40px; z-index: 10000; }

.btn-toggle {
    width: 70px; height: 70px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 2rem; border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

.panel {
    display: none; position: absolute; bottom: 90px; right: 0;
    width: 240px; background: #fff; border: 2px solid var(--primary);
    border-radius: 12px; padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.panel.show { display: block; }

.panel button {
    width: 100%; padding: 12px; margin-bottom: 8px; text-align: left;
    background: #f4f4f4; border-radius: 6px; font-weight: bold; font-size: 1rem;
    color: #333; border: 1px solid #ddd;
}
.panel button:hover { background: #e0e0e0; }
.panel button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* [색상 반전 모드] */
html.invert-mode {
    filter: invert(100%) hue-rotate(180deg) !important;
    height: 100%;
}

/* 이미지나 영상은 반전되면 안 되니까 다시 뒤집기 */
html.invert-mode img, 
html.invert-mode video, 
html.invert-mode .card-thumb {
    filter: invert(100%) hue-rotate(180deg) !important;
}

/* [추가 기능] 시스템 알림창 (토스트 메시지) */
#a11y_toast {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px); /* 평소엔 위로 숨김 */
    background-color: rgba(0, 0, 0, 0.9); /* 진한 검정 배경 */
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    z-index: 99999; /* 제일 위에 뜨게 */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 띠용~ 하고 나타나는 애니메이션 */
    pointer-events: none; /* 마우스 클릭 방해 안 하게 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    white-space: normal;
    max-width: 90vw;
}

/* 알림창이 나타날 때 */
#a11y_toast.show {
    transform: translateX(-50%) translateY(0); /* 제자리로 */
    opacity: 1;
}

/* 고대비 모드일 때 알림창 스타일 변경 */
body[data-theme="high-contrast"] #a11y_toast {
    background-color: #FFDD00; /* 원색 노랑 → 부드러운 황색 (눈부심 완화) */
    color: #000;
    border: 2px solid #333;
}

/* 고대비 모드일 때 가이드선 스타일 변경 */
body[data-theme="high-contrast"] #reading_line {
    background-color: #FFFF00 !important; /* 형광 노랑 */
    opacity: 0.8 !important;              /* 약간 투명하게 해서 글씨 가리지 않게 */
    height: 6px !important;               /* 잘 보이게 두께 살짝 키움 */
    z-index: 2147483647 !important;       /* 무조건 제일 위에 뜨게 */
}

/* ==========================================================================
   [간편 모드] — 장식 제거, 텍스트 리스트형 전환
   ========================================================================== */
html.simple-mode {
    --simple-bg: #fafafa;
    --simple-text: #111;
    --simple-border: #ccc;
}

/* 배경/그림자/그라데이션/호버 효과 제거 */
html.simple-mode .card {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid var(--simple-border) !important;
    transform: none !important;
    transition: none !important;
}
html.simple-mode .card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 썸네일 숨기고 텍스트만 표시 */
html.simple-mode .card-thumb {
    display: none !important;
}

/* 카드 본문 간결하게 */
html.simple-mode .card-body {
    padding: 16px 20px !important;
}
html.simple-mode .card-title {
    font-size: 1.1rem !important;
    margin-bottom: 6px !important;
}
html.simple-mode .card-desc {
    height: auto !important;
    font-size: 1rem !important;
    margin-bottom: 8px !important;
}

/* 그리드를 1열 리스트로 전환 */
html.simple-mode .course-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding-bottom: 20px !important;
}

/* 히어로 배너 간소화 */
html.simple-mode .hero {
    padding: 30px 0 !important;
    background: var(--simple-bg) !important;
}
html.simple-mode .hero h1 {
    font-size: 1.5rem !important;
}
html.simple-mode .hero p {
    font-size: 1rem !important;
}

/* 최근 본 과정 카드도 간소화 */
html.simple-mode .recent-card {
    border-radius: 0 !important;
}
html.simple-mode .recent-card-thumb {
    display: none !important;
}
html.simple-mode .recent-card-body {
    padding: 10px 14px !important;
}

/* 섹션 제목 간소화 */
html.simple-mode .section-title {
    font-size: 1.3rem !important;
    margin: 30px 0 16px !important;
}

/* ── 강의 목록 페이지 (card-horizontal) ── */
html.simple-mode .card-horizontal {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid var(--simple-border) !important;
    min-height: auto !important;
    flex-direction: column !important;
    transition: none !important;
}
html.simple-mode .card-horizontal:hover {
    transform: none !important;
    box-shadow: none !important;
}
html.simple-mode .card-thumb-side {
    display: none !important;
}
html.simple-mode .card-info-side {
    padding: 16px 20px !important;
}

/* ── 강의 상세 페이지 ── */
html.simple-mode .detail-top-box {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 1px solid var(--simple-border) !important;
}
html.simple-mode .top-visual-wrap {
    display: none !important;
}
html.simple-mode .small-thumb {
    display: none !important;
}
html.simple-mode .detail-body {
    box-shadow: none !important;
    border-radius: 0 !important;
}
html.simple-mode .body-section {
    padding: 20px !important;
}
html.simple-mode .info-block {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── 커뮤니티 게시판 ── */
html.simple-mode .community-table {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 1px solid var(--simple-border) !important;
}

/* ── 폼 페이지 공통 (로그인, 회원가입, 마이페이지 수정) ── */
html.simple-mode form {
    box-shadow: none !important;
}
html.simple-mode input,
html.simple-mode select,
html.simple-mode textarea {
    border-radius: 0 !important;
    transition: none !important;
}

/* ── 전역: 불필요한 장식 일괄 제거 ── */
html.simple-mode * {
    animation: none !important;
    transition: none !important;
}
html.simple-mode img:not(.logo):not([src*="uploads"]) {
    opacity: 0.6;
}

/* 검색 폼 간소화 */
html.simple-mode .search-form-refined {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 1px solid var(--simple-border) !important;
}

/* 탭 간소화 */
html.simple-mode .simple-tabs {
    border-radius: 0 !important;
}
html.simple-mode .simple-tabs button {
    border-radius: 0 !important;
}

/* 페이지네이션 간소화 */
html.simple-mode .pagination a,
html.simple-mode .pagination span {
    border-radius: 0 !important;
}