/* ==========================================================================
   파일명 : components.css
   설명 : AIKOREA UI 통합 요소 (버튼, 히어로, 카드, 반응형)
   제작자 : 하도빈 
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 0.2s, background-color 0.2s;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.hero {
    background: linear-gradient(135deg, #eef2f3 0%, #d9e2e6 100%);
    padding: 120px 0;
    text-align: center;
    color: #222;
}

.hero h1,
.hero h2 {
    font-size: 3.2rem;
    margin-bottom: 24px;
    line-height: 1.3;
    color: #222;
    font-weight: 900;
}

.hero p {
    font-size: 1.3rem;
    color: #444;
    margin-bottom: 30px;
}

.section-title {
    font-size: 2.2rem;
    text-align: center;
    margin: 80px 0 40px;
    font-weight: 800;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* PC 기본 3열 */
    gap: 30px;
    padding-bottom: 60px;
}

.card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* .card:hover — visual-feedback.css로 통합 (M-05: 중복 정의 제거) */

.card-thumb {
    height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 이미지 없을 때의 대체 그라데이션 */
.thumb-1 {
    background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
}

.thumb-2 {
    background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}

.thumb-3 {
    background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}

.thumb-icon {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    opacity: 0.6;
}

.badge-group {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.badge {
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
}

.sub-badge {
    background: #0056b3;
}

.match-badge {
    background: #e65c00;
    background: linear-gradient(135deg, #e65c00, #f9d423);
    color: #fff;
    font-size: 0.82rem;
}

.card-body {
    padding: 30px;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.3;
}

.card-title a {
    color: #111;
    text-decoration: none;
}

.card-desc {
    font-size: 1.125rem !important;
    /* 접근성 규정: 18px */
    color: #555;
    line-height: 1.6;
    /* WCAG 1.4.10 Reflow: 고정 height 제거 → line-clamp 방식으로 변경
       em 기반이라도 320px 뷰포트에서 긴 텍스트가 overflow:hidden에 잘릴 수 있음 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 20px;
}

.card-meta {
    font-size: 1.125rem !important;
    /* 접근성 규정: 18px */
    display: flex;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
    color: #222;
}

.card-meta strong {
    color: var(--primary);
    font-weight: 800;
}

@media (min-width: 901px) {
    .is-scrollable {
        overflow-x: auto;
        padding-bottom: 30px;
    }

    .is-scrollable .course-grid {
        display: flex;
        /* 가로 배열 전환 */
        min-width: max-content;
    }

    .is-scrollable .card {
        width: 380px;
        /* 스크롤 시 고정 너비 */
    }
}

@media (max-width: 900px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 태블릿 2열 */
}

@media (max-width: 600px) {
    .course-grid {
        display: grid !important;
        /* 스크롤 해제 */
        grid-template-columns: 1fr !important;
        /* 모바일 1열 쌓기 */
        gap: 20px;
    }

    .card {
        width: 100% !important;
    }

    .hero h2 {
        font-size: 2.2rem;
    }

    .hero {
        padding: 80px 0;
    }
}

/* ── 더 보기 / 접기 패턴 ── */
.expandable-grid .card {
    display: none;
}
.expandable-grid .card:nth-child(-n+3) {
    display: flex;
}
.expandable-grid.expanded .card {
    display: flex;
}

.btn-toggle-more {
    display: block;
    margin: 0 auto 40px;
    padding: 12px 32px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.btn-toggle-more:hover {
    background: #e8e8e8;
    border-color: #ccc;
}
/* 포커스 스타일은 accessibility.css :focus-visible 전역 규칙이 처리합니다.
   (#FFD700 + box-shadow #222 이중 링 패턴) */

/* ── 최근 본 과정 (인라인 스타일 제거용) ── */
.recent-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
}
.recent-card {
    flex: 1 1 200px;
    min-width: 180px;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.recent-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
/* 포커스 스타일은 accessibility.css :focus-visible 전역 규칙이 처리합니다. */
.recent-card-thumb {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}
.recent-card-body {
    padding: 12px;
}
.recent-card-title {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.recent-card-meta {
    font-size: .9rem; /* 저시력자 고려: .8rem → .9rem (14.4px) */
    color: #666;
    margin-top: 6px;
}

@media (max-width: 600px) {
    .recent-scroll {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .recent-card {
        display: grid;
        grid-template-columns: 96px 1fr;
        min-width: 0;
        width: 100%;
    }

    .recent-card-thumb {
        aspect-ratio: auto;
        min-height: 76px;
    }

    .recent-card-body {
        min-width: 0;
    }

    .recent-card-title {
        font-size: 0.95rem;
    }

    .btn-toggle-more {
        width: 100%;
    }
}

/* ==========================================================================
   [Course List] 가로형 리스트 레이아웃 (반응형 버그 최종 교정본)
   ========================================================================== */

.page-main-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 800;
    color: #000;
    line-height: 1.2;
}

.search-form-refined {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    border: 2px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-bottom: 50px;
}

.search-bar-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 25px;
}

.input-with-icon {
    flex: 1;
    position: relative;
}

.input-with-icon input {
    width: 100%;
    padding: 16px 50px 16px 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1.15rem;
}

.btn-voice {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; min-height: 44px; /* WCAG 2.5.5 터치 타겟 최소 44x44px */
}

.btn-voice svg {
    width: 26px;
    height: 26px;
    fill: var(--primary);
}

#voice-search-btn,
#req-voice-btn,
#col-voice-btn,
#togglePassword {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* [교정 포인트] flex-wrap 추가하여 가로 뚫림 방지 */
.filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
    flex-wrap: wrap;
    /* 너비 부족 시 자동 줄바꿈 */
    gap: 15px;
}

.filter-wrap {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    flex-wrap: wrap;
    /* 필터 항목 줄바꿈 허용 */
}

.radio-group {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.radio-group label,
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #444;
    white-space: nowrap;
    /* 아이콘과 글자가 찢어지지 않게 고정 */
}

input[type="radio"],
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.total-count {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-sub);
    white-space: nowrap;
}

/* 카드 리스트 스타일 */
.card-horizontal {
    display: flex;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    min-height: 220px;
    transition: 0.3s;
}

.card-horizontal:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card-thumb-side {
    flex: 0 0 300px;
    align-self: stretch;
    overflow: hidden;
    background: #111827; /* contain 시 여백 채울 배경 */
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.card-thumb-media {
    position: relative;
    flex: 1;
    min-height: 156px;
    overflow: hidden;
    background: #111827;
}

/* 썸네일 이미지 — contain으로 전체 이미지 표시, 여백은 배경색 */
.card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

/* 썸네일 없을 때 분야 아이콘 */
.card-thumb-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem;
    opacity: 0.45;
    line-height: 1;
}

.badge-group-side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 72px;
    padding: 14px 20px;
    background: #111827;
    flex-wrap: wrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.thumb-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 72px;
    padding: 14px 20px 18px;
    background: #111827;
    flex-wrap: wrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.thumb-status-row .recommend-tag {
    margin-left: auto;
}

.badge {
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1.5px solid rgba(0, 0, 0, 0.18);
}

.sub-badge {
    background: var(--primary) !important;
    color: #fff !important;
}

.recommend-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffc107;
    color: #000;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1.2;
    box-sizing: border-box;
}

.wish-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 0, 60, 0.88);
    color: #fff;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    box-sizing: border-box;
}

.card-info-side {
    flex: 1;
    padding: 25px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.field-tag {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 900;
    margin-bottom: 5px;
}

.info-title {
    font-size: 1.7rem;
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 1.3;
}

.info-title a {
    color: #111;
}

.info-desc {
    font-size: var(--font-size-base) !important;
    /* 18px 준수 */
    color: #444;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta-group {
    display: flex;
    gap: 25px;
    font-size: 1.125rem;
    font-weight: 700;
    color: #222;
}

/* 별점 표시 스타일 - 저시력자 접근성 개선 */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 1.3rem;
}

.star {
    line-height: 1;
    transition: color 0.2s;
    font-weight: 900;
    /* 별 모양을 더 굵게 표시 */
}

.star-full {
    color: #0056b3;
    /* 사이트 primary 파란색 - WCAG AA 대비 기준 충족 */
}

.star-half {
    color: #0056b3;
    opacity: 0.6;
    /* 반 별은 약간 투명하게 */
}

.star-empty {
    color: #666; /* #999(2.85:1) → #666(5.74:1) WCAG AA ✅ */
}

.rating-text {
    margin-left: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    /* 더 진한 텍스트로 대비 강화 */
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .star-rating {
        font-size: 1.1rem;
    }

    .rating-text {
        font-size: 0.95rem;
    }
}

.btn-detail-wrap {
    flex: 0 0 140px;
    display: flex;
}

.btn-detail {
    width: 100%;
    height: 100%;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    border-left: 1px solid #eee;
}

.btn-detail:hover {
    background: var(--primary);
}

/* --------------------------------------------------------------------------
   [반응형 최종 교정] 768px 이하 대응
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .search-form-refined {
        padding: 20px;
    }

    /* 검색바와 버튼 세로 정렬 */
    .search-bar-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar-wrap .btn-primary {
        padding: 14px;
        font-size: 1.1rem;
    }

    /* 필터 영역 세로 정렬 및 간격 축소 */
    .filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .filter-wrap {
        width: 100%;
        gap: 10px;
    }

    .radio-group {
        width: 100%;
        gap: 10px 15px;
    }

    /* 줄바꿈 시 상하 간격 추가 */

    /* 카드 세로형 전환 */
    .card-horizontal {
        flex-direction: column;
        min-height: auto;
    }

    .card-thumb-side {
        flex: none;
        width: 100%;
        height: 260px;
        min-height: 260px;
    }

    .badge-group-side {
        min-height: 62px;
        padding: 11px 14px;
    }

    .card-thumb-media {
        min-height: 120px;
    }

    .thumb-status-row {
        min-height: 62px;
        padding: 10px 14px 14px;
    }

    .card-info-side {
        padding: 20px;
    }

    .meta-group {
        gap: 15px;
        font-size: 1rem;
    }

    .btn-detail-wrap {
        flex: none;
        width: 100%;
        height: 55px;
    }

    .btn-detail {
        border-left: none;
        border-top: 1px solid #eee;
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   [Course Detail] 심플 & 콤팩트 과정 상세 레이아웃 (최종형)
   ========================================================================== */

/* [1] 상단 요약 섹션 기본 레이아웃 (PC) */
.detail-top-box {
    display: flex;
    gap: 40px;
    background: #fff;
    padding: 25px;
    border: 1px solid #eee;
    border-radius: 16px;
    margin-bottom: 50px;
    align-items: stretch;
}

/* 좌측 비주얼 영역 (PC 340px 고정) */
.top-visual-wrap {
    flex: 0 0 340px;
    min-width: 0;
}

.small-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background-color: #111827;
    margin-bottom: 12px;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.small-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 12px;
}

/* 이미지 하단 버튼 (미리보기 & 신청) */
.button-group-compact {
    display: flex;
    gap: 8px;
}

.btn-preview-sq {
    flex: 0.85;
    padding: 15px 0;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 800;
    font-size: 1rem;
    border-radius: 8px;
    text-align: center;
}

.btn-apply-sq {
    flex: 1.3;
    padding: 15px 0;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    border-radius: 8px;
    text-align: center;
}

.btn-wish-sq {
    flex: 0 0 56px;
    padding: 0;
    min-height: 54px;
    border: 2px solid #ccc;
    background: #fff;
    color: #888;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-wish-sq .wish-icon {
    font-size: 1.35rem;
    line-height: 1;
}
.btn-wish-sq:hover,
.btn-wish-sq:focus {
    border-color: #e05;
    color: #e05;
    outline: 3px solid #fbb;
    outline-offset: 2px;
}
.btn-wish-sq[aria-pressed="true"] {
    border-color: #e05;
    background: #fff0f4;
    color: #e05;
}
.btn-wish-sq[aria-pressed="true"] .wish-icon::before {
    content: "♥";
}
.btn-wish-sq[aria-pressed="false"] .wish-icon::before {
    content: "♡";
}

/* [2] 우측 정보 테이블 (WAX 대응 및 너비 고정) */
.top-info-table {
    flex: 1;
    min-width: 0;
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #333;
    table-layout: fixed;
    /* [핵심] 글자 길이에 상관없이 너비 고정 */
}

.simple-table th {
    background: #f9f9f9;
    padding: 12px 10px;
    border: 1px solid #eee;
    text-align: left;
    color: #555;
    font-size: 1rem;
    font-weight: 800;
    width: 90px;
    /* PC 제목 칸 고정 */
}

.simple-table td {
    padding: 12px 15px;
    border: 1px solid #eee;
    font-weight: 700;
    color: #111;
    font-size: var(--font-size-base);
    /* 18px */
    word-break: break-all;
    /* 내용 넘침 방지 */
}

.txt-blue {
    color: var(--primary) !important;
    font-weight: 900;
}

/* [3] 본문 상세 영역 (탭, 설명, 학습목표 등) */
.simple-tabs {
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
    display: flex;
    gap: 40px;
}

.simple-tabs a {
    padding: 15px 5px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #666; /* #bbb(1.92:1) → #666(5.74:1) WCAG AA ✅ */
    position: relative;
}

.simple-tabs a.active {
    color: #000;
}

.simple-tabs a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #000;
}

.info-block {
    margin-bottom: 50px;
}

.info-label {
    font-size: 1.5rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.section-desc {
    font-size: var(--font-size-base) !important;
    /* 18px */
    line-height: 1.8;
    color: #444;
}

/* [4] 학습 목차 */
.simple-curr-list {
    border-top: 1px solid #333;
}

.curr-row {
    display: flex;
    padding: 16px 10px;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.curr-row .step {
    color: var(--primary);
    font-weight: 900;
    width: 60px;
}

.curr-row .name {
    flex: 1;
    font-weight: 700;
    font-size: 1.125rem;
}

.curr-row .time {
    color: #666; /* #888(3.55:1) → #666(5.74:1) WCAG AA ✅ */
    font-size: 1rem;
}

/* [5] 반응형 패드 및 모바일 최종 대응 */
@media (max-width: 960px) {
    .detail-top-box {
        flex-direction: column;
        padding: 20px;
        gap: 25px;
    }

    /* 패드/모바일에서 이미지 너비 100% 확장 */
    .top-visual-wrap {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .small-thumb {
        height: auto;
    }

    .top-info-table {
        width: 100%;
    }

    .simple-table th {
        width: 25%;
        font-size: 0.95rem;
    }

    /* 패드 비율 최적화 */
    .simple-table td {
        font-size: 1.05rem;
    }

    .simple-tabs {
        gap: 15px;
        justify-content: space-around;
    }

    .simple-tabs a {
        font-size: 1.15rem;
    }
}

@media (max-width: 600px) {
    .small-thumb {
        height: auto;
    }

    .simple-table th {
        width: 35%;
    }

    /* 모바일에서 제목 가독성 확보 */
    .btn-preview-sq,
    .btn-apply-sq {
        padding: 14px 0;
        font-size: 1rem;
    }
    .btn-wish-sq {
        flex: 0 0 50px;
        min-height: 50px;
    }
}

/* WAX: 접근성용 숨김 속성 */
.sr-only {
    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;
}


/* 콘텐츠 미리보기 */

/* [Preview Modal] 콤팩트 스타일 */
.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    /* 영상 집중을 위해 더 어둡게 */
    backdrop-filter: blur(8px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-window {
    position: relative;
    width: 95%;
    max-width: 1000px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}

/* 닫기 버튼: 우측 상단 플로팅 */
.btn-close-modal {
    position: absolute;
    top: -45px;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
}

.btn-close-modal svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* 16:9 비율 유지 컨테이너 */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 */
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.loading-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: 1.1rem;
}


/* [Main Popup] 레이어 스타일 */
.main-popup-layer {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #333;
    /* 다크 테마 푸터 */
    color: #fff;
    padding: 10px 15px;
}

.popup-footer button {
    background: none;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-today-close span {
    color: #666; /* #aaa(2.32:1) → #666(5.74:1) WCAG AA ✅ */
    margin-left: 5px;
}

/* --------------------------------------------------------------------------
   [Responsive] 모바일 대응: 지정된 X, Y 좌표를 무시하고 중앙 배치
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .main-popup-layer {
        width: 90% !important;
        top: 10% !important;
        left: 5% !important;
        position: fixed !important;
        /* 모바일은 화면 고정 */
    }
}

/* --------------------------------------------------------------------------
   자주하는질문
   -------------------------------------------------------------------------- */

/* [FAQ] 아코디언 스타일 */
.faq-accordion {
    border-top: 2px solid #333;
    margin-top: 30px;
}

.faq-item {
    border-bottom: 1px solid #eee;
    background: #fff;
}

.faq-item.pinned {
    background: #fdfdfd;
}

/* 상단 고정 배경 차별화 */

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 15px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
}

.faq-question:hover {
    background: #f9f9f9;
}

/* 카테고리 배지 */
.badge-cat {
    padding: 4px 10px;
    border-radius: 4px;
    background: #f0f0f0;
    font-size: 0.85rem;
    font-weight: 800;
    color: #666;
    flex-shrink: 0;
}

.pinned .badge-cat {
    background: var(--primary);
    color: #fff;
}

.q-text {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
}

.icon-arrow {
    font-size: 0.8rem;
    color: #666; /* #bbb(1.92:1) → #666(5.74:1) WCAG AA ✅ */
    transition: 0.3s;
}

.faq-question[aria-expanded="true"] .icon-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}

/* 답변 영역 */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fcfcfc;
}

.faq-answer.active {
    max-height: 1000px;
    border-top: 1px dashed #eee;
}

.ans-content {
    padding: 30px;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #444;
    word-break: break-all;
}

/* ==========================================================================
   [Common Board & Accordion] 공통 스타일 
   ========================================================================== */

/* 아코디언 공통 구조 */
.common-accordion {
    border-top: 2px solid #333;
}

.accordion-item {
    border-bottom: 1px solid #eee;
    background: #fff;
}

.accordion-item.pinned {
    background: #fdfdfd;
}

.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 15px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

/* 카테고리 배지 공통 */
.badge-cat {
    padding: 4px 10px;
    border-radius: 4px;
    background: #f0f0f0;
    font-size: 0.85rem;
    font-weight: 800;
    color: #666;
    flex-shrink: 0;
}

.pinned .badge-cat {
    background: var(--primary);
    color: #fff;
}

.title-text {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-out;
    background: #fcfcfc;
}

.accordion-content.active {
    max-height: 1000px;
    border-top: 1px dashed #eee;
}

.inner-text {
    padding: 30px;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #444;
}

/* 음성 검색 버튼 공통 (검색바 내부) */
.btn-voice {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; min-height: 44px; /* WCAG 2.5.5 터치 타겟 최소 44x44px */
}

.btn-voice svg {
    width: 26px;
    height: 26px;
    fill: var(--primary);
}

/* [Board Extension] 학습 자료실 전용 추가 스타일 */

/* 18px 규정 준수 및 리스트 링크 강조 */
.board-link {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #111;
    text-decoration: none;
    display: block;
}

.board-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* 자료실 전용 다운로드 버튼 */
.btn-icon-download {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #f0f0f0;
    color: #444;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
}

.btn-icon-download:hover {
    background: #e0e0e0;
    color: #000;
}

/* 상단 고정(Pinned) 행 배경색 미세 조정 */
.pinned-row {
    background-color: #fff;
}

/* 게시판 접근성 보정 스타일 */
.accordion-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 30px 20px;
    /* 고령자 터치 영역 확보 */
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.accordion-trigger:hover,
.accordion-trigger:focus {
    background-color: #f0f7ff;
    /* 포커스 시 시각적 효과 */
    outline: 2px solid var(--primary);
    /* 키보드 사용자 배려 */
}

.title-text {
    flex: 1;
    font-weight: 800;
    color: #111;
    padding-right: 20px;
}

.pinned-row {
    background-color: #fff !important;
    /* 중요 표시는 배지로만 처리 */
}

.inner-text {
    font-size: 1.15rem !important;
    /* 기본 폰트보다 조금 더 크게 18.4px */
    color: #111 !important;
    /* 명도 대비 4.5:1 이상 확보 */
}

.btn-icon-download:hover {
    background-color: #e0e0e0;
    border-color: #333;
}

/* ==========================================================================
   학습 성향 진단 (survey/level_check.php)
   ========================================================================== */

.choice-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.choice-card {
    display: flex;
    cursor: pointer;
    border: 2px solid #d0d0d0;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    position: relative; /* 절대 위치 input 기준점 */
}

.choice-card:hover {
    border-color: var(--primary);
    box-shadow: 0 3px 10px rgba(0, 86, 179, .14);
}

/* 라디오/체크박스 — SR-only 패턴으로 키보드 포커스 완전 보존
   width:0/height:0은 브라우저가 포커스를 차단함 → 1px + clip 패턴 사용 */
.choice-card input[type="radio"],
.choice-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none; /* 마우스 이벤트는 label이 처리 */
}

/* 선택된 카드 — 전체 테두리 강조 (좌측 라인 없음) */
.choice-card:has(input:checked) {
    border-color: var(--primary);
    border-width: 3px;
    box-shadow: 0 4px 14px rgba(0, 86, 179, .18);
}

.choice-card input:checked + .choice-content {
    background: #eef4ff;
}

/* 키보드 포커스 링 (WCAG 2.4.7) — 카드 전체에 표시
   :focus-visible은 input에만 적용 → 카드에 box-shadow를 직접 명시해야 이중 링 완성 */
.choice-card:has(input:focus-visible) {
    outline: 4px solid #FFD700;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #222222; /* 이중 링 패턴 — accessibility.css와 동일 */
    border-color: #FFD700;
}

.choice-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    width: 100%;
}

.choice-icon {
    font-size: 2rem;
    margin-bottom: 4px;
    line-height: 1;
}

/* 카드 본문 — 고령자·저시력자 배려: 1.15rem (18.4px) */
.choice-content strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
}

/* 보조 설명 — 1rem (16px), 명도대비 #555 on white = 7.4:1 ✅ */
.choice-content small {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    display: block;
}

/* 진단 폼 텍스트 — 고령자·저시력자 배려 */
fieldset.step-box legend {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
    line-height: 1.5;
    margin-bottom: 10px;
}

fieldset.step-box > p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 28px;
    line-height: 1.6;
}

/* 진단 하단 버튼 — 선택 전 비활성(회색), 선택 후 활성(컬러) */
#btnNext,
#btnSubmit {
    transition: background-color .2s, opacity .2s;
}

#btnNext:disabled,
#btnSubmit:disabled {
    background: #b0b8c1 !important;
    cursor: not-allowed;
}

/* 고대비 모드 대응 — accessibility.css * 규칙이 덮어씌움 */
/* (별도 처리 불필요 — body[data-theme="high-contrast"] * 가 일괄 적용) */

/* 간편 모드 대응 */
html.simple-mode .choice-group {
    grid-template-columns: 1fr !important;
}
html.simple-mode .choice-card {
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}
html.simple-mode .choice-icon {
    display: none;
}

@media (max-width: 600px) {
    .choice-group {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Board Commons — 게시판 계열 공통 컴포넌트
   대상: 자유게시판, 교육요청, (공지/FAQ/QnA 아코디언 계열은 별도 유지)
   ========================================================================== */

/* ── 툴바 (정렬·필터 + 건수 + 글쓰기 버튼) ── */
.board-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}
.board-toolbar-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-toolbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ── 건수 표시 ── */
.board-count {
    font-size: 1rem;
    font-weight: 700;
    color: #555;
}
.board-count strong { color: var(--primary); }

/* ── 글쓰기 버튼 ── */
.board-write-btn {
    padding: 9px 22px;
    border-radius: 6px;
    text-decoration: none;
    background: #111;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-block;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.board-write-btn:hover { background: var(--primary); }

/* ── 정렬·카테고리 필터 pill ── */
.board-pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
button.board-pill { appearance: none; }
.board-pill {
    padding: 7px 16px;
    min-height: 40px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
}
.board-pill:hover,
.board-pill.active { background: #111; color: #fff; border-color: #111; }
.board-pill.active-primary { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── 목록 wrapper ── */
.board-list { border-top: 3px solid #111; }

/* ── 목록 행 (링크형) ── */
.board-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 8px;
    border-bottom: 1px solid #e8e8e8;
    transition: background .15s;
    min-width: 0;
}
.board-row:hover { background: #f8f9fa; }

.board-row-num {
    flex-shrink: 0;
    width: 50px;
    text-align: center;
    color: #aaa;
    font-size: 0.88rem;
}
.board-row-badge {
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 4px 11px;
    border-radius: 10px;
    font-weight: 700;
    background: #e8f0fe;
    color: #0056b3;
    white-space: nowrap;
    max-width: 7em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-row-badge.notice { background: #111; color: #fff; }
.board-row-badge.answered { background: #d4edda; color: #155724; }
.board-row-badge.waiting  { background: #fff3cd; color: #856404; }

.board-row-title {
    flex: 1;
    min-width: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.board-row-title:hover { color: var(--primary); }
.board-row-title.notice-title { color: #e65100; font-weight: 800; }

.board-row-meta {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: #aaa;
    display: flex;
    gap: 14px;
    align-items: center;
    white-space: nowrap;
}
.board-row-meta .author { color: #888; }

/* ── 빈 상태 ── */
.board-empty {
    text-align: center;
    padding: 80px 20px;
    color: #999;
    border-bottom: 1px solid #e8e8e8;
}
.board-empty svg { margin-bottom: 16px; opacity: .4; }
.board-empty p { font-size: 1.1rem; margin-bottom: 16px; }

/* ── 페이지네이션 ── */
.board-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.board-pagination a,
.board-pagination span {
    padding: 9px 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
    color: #555;
    text-decoration: none;
    font-size: 1rem;
    background: #fff;
    display: inline-block;
    transition: background .15s, border-color .15s, color .15s;
}
.board-pagination a:hover {
    background: #f0f4ff;
    border-color: var(--primary);
    color: var(--primary);
}
.board-pagination .pg-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}

/* ── 목록으로 돌아가기 버튼 ── */
.btn-back {
    display: inline-block;
    padding: 11px 24px;
    border: 2px solid #999;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
    line-height: 1;
}
.btn-back:hover, .btn-back:focus {
    border-color: #333;
    color: #111;
}

/* ── community-table (자유게시판) board 클래스와 공유 ── */
.board-empty-row:hover { background: transparent !important; }
.community-table th {
    padding: 13px 10px;
    font-size: 0.95rem;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    font-weight: 700;
    color: #444;
}
.community-table td { border-bottom: 1px solid #e8e8e8; }
.community-table tbody tr:hover { background: #f8f9fa; }

@media (max-width: 640px), (max-height: 500px) and (max-width: 900px) {
    .board-row {
        align-items: center;
        flex-wrap: nowrap;
    }
    .board-row-meta {
        flex-shrink: 0;
        gap: 8px;
        white-space: nowrap;
    }
    .board-row-num  { display: none; }
    .board-write-btn { padding: 8px 14px; font-size: .88rem; }
    .community-table th:nth-child(1),
    .community-table th:nth-child(4),
    .community-table th:nth-child(5) { display: none; }
    .community-table td:nth-child(1),
    .community-table td:nth-child(4),
    .community-table td:nth-child(5) { display: none; }
}

/* ==========================================================================
   모바일 반응형 교정 — 인라인 스타일 오버라이드 포함
   ========================================================================== */
@media (max-width: 640px), (max-height: 500px) and (max-width: 900px) {

    /* 검색 폼: 인라인 style="display:flex" 덮어쓰기 */
    section[role="search"] > div,
    .search-section form,
    section[role="search"] form,
    .search-form-refined {
        padding: 16px !important;
        margin-bottom: 24px !important;
    }

    /* 검색 바 (input + 버튼) → 세로 정렬 */
    section[role="search"] > div > div:first-child,
    .search-section form > div:first-child,
    section[role="search"] form > div:first-child,
    .search-form-refined > div,
    .search-form-refined > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* input 래퍼 */
    section[role="search"] > div > div:first-child > div:first-child,
    .search-section form > div:first-child > div:first-child,
    section[role="search"] form > div:first-child > div:first-child,
    .search-form-refined > div > div:first-child {
        flex: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 8px !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    section[role="search"] input[type="text"],
    section[role="search"] input[type="search"],
    .search-section input[type="text"],
    .search-section input[type="search"],
    section[role="search"] input#board_search,
    .search-section input#board_search {
        min-width: 0 !important;
        padding-right: 42px !important;
        font-size: 1rem !important;
        text-overflow: ellipsis;
    }

    section[role="search"] #req-voice-btn,
    section[role="search"] #col-voice-btn,
    section[role="search"] #voice-search-btn,
    .search-section #req-voice-btn,
    .search-section #col-voice-btn,
    .search-section #voice-search-btn {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        justify-content: center !important;
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 0 !important;
        z-index: 2;
    }

    section[role="search"] #req-voice-btn svg,
    section[role="search"] #col-voice-btn svg,
    section[role="search"] #voice-search-btn svg,
    .search-section #req-voice-btn svg,
    .search-section #col-voice-btn svg,
    .search-section #voice-search-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* 검색 버튼 */
    section[role="search"] button[type="submit"],
    section[role="search"] button[onclick="applyFilters()"],
    .search-section button[type="submit"],
    .search-form-refined button[type="submit"] {
        width: 100% !important;
        padding: 14px 0 !important;
        height: auto !important;
        font-size: 1.1rem !important;
    }

    .board-toolbar {
        align-items: center;
    }
    .board-toolbar-right {
        margin-left: auto;
    }

    .board-pill-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .board-pill-group::-webkit-scrollbar {
        display: none;
    }

    .board-pill {
        flex: 0 1 auto;
        white-space: nowrap;
    }

    .board-count {
        display: block;
        margin-top: 6px;
        text-align: left;
    }

    .notice-area .accordion-trigger {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 18px 0 !important;
    }

    .notice-area .accordion-trigger > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }

    .notice-area .accordion-trigger > .title-text {
        flex: 0 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .notice-area .badge-cat {
        display: inline-flex !important;
        align-items: center;
        width: max-content;
        margin: 0 0 8px 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.2;
    }

    .notice-area .title-text {
        display: block !important;
        width: 100% !important;
        padding-right: 0 !important;
        font-size: 1.1rem !important;
        line-height: 1.45 !important;
        letter-spacing: 0 !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .notice-area .meta-info {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        color: #777;
    }

    .notice-area .date-text {
        font-size: 0.92rem !important;
    }

    .notice-area .icon-arrow {
        line-height: 1;
    }

    /* 썸네일 — contain 대신 cover (검은 여백 제거) */
    .card-thumb-img {
        object-fit: cover !important;
    }

    /* 카드 썸네일 영역: 높이 auto (overflow:hidden이 추천/담기 잘리는 현상 방지) */
    .card-thumb-side {
        height: auto !important;
        min-height: unset !important;
    }

    /* 이미지 영역만 고정 높이 */
    .card-thumb-media {
        height: 180px !important;
        min-height: 180px !important;
        flex-shrink: 0 !important;
    }

    /* badge-group, thumb-status-row 축소 */
    .badge-group-side,
    .thumb-status-row {
        min-height: unset !important;
        padding: 10px 14px !important;
    }

    /* 카드 정보 패딩 축소 */
    .card-info-side {
        padding: 16px !important;
    }

    .info-title {
        font-size: 1.35rem !important;
    }

    /* 페이지 타이틀 */
    .page-main-title {
        font-size: 1.7rem !important;
    }
}