/* ============================================
   링크네비 (LinkNavi) - 접근성 (WCAG 2.1) 개선
   작성일: 2025-08-19
   WCAG 2.1 Level AA 준수
   ============================================ */

/* ============================================
   1. 색상 대비 (WCAG 1.4.3)
   최소 대비율: 일반 텍스트 4.5:1, 큰 텍스트 3:1
   ============================================ */

/* 고대비 텍스트 */
body {
    color: #e0e0e0; /* 배경 #000과 14:1 대비 */
}

.text-muted {
    color: #999 !important; /* 배경 #000과 5.9:1 대비 */
}

/* 링크 색상 개선 */
a {
    color: #ffd700; /* 배경 #000과 12.6:1 대비 */
}

a:hover,
a:focus {
    color: #ffed4e; /* 더 밝은 금색, 15.8:1 대비 */
}

/* 오류 및 경고 색상 */
.text-danger {
    color: #ff6b6b; /* 빨간색 개선, 5.4:1 대비 */
}

.text-success {
    color: #51cf66; /* 초록색 개선, 9.5:1 대비 */
}

.text-warning {
    color: #ffd43b; /* 노란색 개선, 12.3:1 대비 */
}

/* ============================================
   2. 포커스 표시 (WCAG 2.4.7)
   ============================================ */

/* 키보드 포커스 스타일 */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
    border-radius: 4px;
    z-index: 9999;
}

/* 버튼 포커스 */
.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.5);
}

/* 링크 포커스 */
a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* 폼 요소 포커스 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: #ffd700;
    box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

/* ============================================
   3. 스킵 네비게이션 (WCAG 2.4.1)
   ============================================ */

.skip-links {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    z-index: 10000;
}

.skip-links a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-links a:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 1rem;
    background: #000;
    color: #ffd700;
    text-decoration: none;
    border: 2px solid #ffd700;
    display: block;
}

/* ============================================
   4. 텍스트 가독성 (WCAG 1.4.8)
   ============================================ */

/* 최소 폰트 크기 */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* 최대 줄 길이 제한 */
.content-text,
.description,
article {
    max-width: 80ch;
    margin-left: auto;
    margin-right: auto;
}

/* 문단 간격 */
p {
    margin-bottom: 1.5em;
}

/* 목록 간격 */
ul, ol {
    margin-bottom: 1.5em;
}

li {
    margin-bottom: 0.5em;
}

/* ============================================
   5. 키보드 네비게이션 (WCAG 2.1.1)
   ============================================ */

/* 탭 순서 표시 */
[tabindex]:not([tabindex="-1"]):focus {
    outline: 3px solid #ffd700;
}

/* 드롭다운 키보드 접근성 */
.dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-item:focus {
    background-color: rgba(255, 215, 0, 0.1);
}

/* 모달 포커스 트랩 */
.modal[aria-hidden="false"] {
    position: fixed;
    z-index: 9999;
}

/* ============================================
   6. 스크린 리더 지원 (WCAG 1.3.1)
   ============================================ */

/* 스크린 리더 전용 텍스트 */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 포커스 시 표시 */
.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ARIA 라이브 영역 스타일 */
[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

/* ============================================
   7. 아이콘과 이미지 (WCAG 1.1.1)
   ============================================ */

/* 아이콘 접근성 */
.bi::before,
.icon::before {
    speak: none;
}

/* 장식용 이미지 */
img[alt=""],
img:not([alt]) {
    role: presentation;
}

/* 정보성 아이콘 */
.icon-info::after {
    content: attr(aria-label);
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================
   8. 폼 접근성 (WCAG 3.3)
   ============================================ */

/* 필수 필드 표시 */
.required::after {
    content: " *";
    color: #ff6b6b;
    font-weight: bold;
    speak: literal-punctuation;
}

/* 오류 메시지 */
.error-message {
    color: #ff6b6b;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Bootstrap의 invalid-feedback - is-invalid 클래스가 있을 때만 표시 */
.invalid-feedback {
    display: none;
    color: #ff6b6b;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* is-invalid 상태일 때 invalid-feedback 표시 */
.is-invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-feedback,
.input-group .is-invalid ~ .invalid-feedback,
.mb-3:has(.is-invalid) .invalid-feedback {
    display: block;
}

/* 폼 그룹 간격 */
.form-group {
    margin-bottom: 1.5rem;
}

/* 라벨 스타일 */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #e0e0e0;
}

/* ============================================
   9. 애니메이션 제어 (WCAG 2.3.1)
   ============================================ */

/* 움직임 감소 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .rotating-icon {
        animation: none !important;
    }
    
    .header-scan::after {
        display: none;
    }
}

/* ============================================
   10. 고대비 모드 (WCAG 1.4.11)
   ============================================ */

@media (prefers-contrast: high) {
    /* 테두리 강화 */
    .btn,
    .card,
    .banner-placeholder,
    .category-card {
        border: 2px solid currentColor !important;
    }
    
    /* 색상 단순화 */
    body {
        background: #000 !important;
        color: #fff !important;
    }
    
    .text-muted {
        color: #ccc !important;
    }
    
    a {
        color: #ffff00 !important;
        text-decoration: underline !important;
    }
    
    /* 포커스 강화 */
    *:focus-visible {
        outline-width: 4px !important;
        outline-color: #ffff00 !important;
    }
}

/* ============================================
   11. 다크 모드 지원 (WCAG 1.4.3)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* 이미 다크 테마이므로 최소 조정 */
    .bg-light {
        background-color: #1a1a1a !important;
        color: #e0e0e0 !important;
    }
    
    .text-dark {
        color: #e0e0e0 !important;
    }
}

/* ============================================
   12. 터치 타겟 크기 (WCAG 2.5.5)
   ============================================ */

/* 최소 44x44px 터치 타겟 */
button,
a.btn,
.nav-link,
input[type="checkbox"],
input[type="radio"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 체크박스와 라디오 확대 */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ============================================
   13. 시간 제한 컨트롤 (WCAG 2.2.1)
   ============================================ */

/* 세션 타임아웃 경고 */
.timeout-warning {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ff6b6b;
    color: #fff;
    padding: 1rem;
    border-radius: 4px;
    z-index: 10000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* ============================================
   14. 테이블 접근성 (WCAG 1.3.1)
   ============================================ */

/* 반응형 테이블 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    background-color: #1a1a1a;
    color: #ffd700;
    font-weight: bold;
    text-align: left;
    padding: 0.75rem;
}

td {
    padding: 0.75rem;
    border-top: 1px solid #333;
}

/* 줄무늬 테이블 */
tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 215, 0, 0.05);
}

/* ============================================
   15. 보조 기술 알림
   ============================================ */

/* 상태 변경 알림 */
.status-message[role="status"],
.alert[role="alert"] {
    padding: 1rem;
    margin: 1rem 0;
    border-left: 4px solid #ffd700;
    background-color: rgba(255, 215, 0, 0.1);
}

/* 로딩 상태 */
.loading[aria-busy="true"] {
    position: relative;
}

.loading[aria-busy="true"]::after {
    content: "로딩 중...";
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
}