/* ================================================================
   responsive.css — 반응형 보완 레이어
   브레이크포인트:
     모바일    max-width: 767px
     태블릿    768px ~ 1024px
     데스크탑  min-width: 1025px
   style.css 다음에 로드 → 오버라이드 전용
================================================================ */

/* --------------------------------------------------
   0. 헤더 공통 (모든 해상도)
   — header-right / header-auth / nav-user-btn 기본값
-------------------------------------------------- */

/* 헤더 우측 래퍼 */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 인증 버튼 영역 */
.header-auth {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 사용자 이름 버튼 (hover → click 방식으로 변경) */
.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #1a1a2e);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.2s ease;
}
.nav-user-btn:hover { background: rgba(0,0,0,.06); }
.nav-user-btn svg   { opacity: 0.6; transition: transform 0.2s ease; }
.nav-user.open .nav-user-btn svg { transform: rotate(180deg); }

/* click 기반 드롭다운 (.open 클래스 JS 제어, hover는 fallback) */
.nav-user.open .nav-user-dropdown,
.nav-user:hover .nav-user-dropdown { display: block; }

/* 드롭다운 구분선 */
.nav-dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 8px;
}

/* 햄버거 버튼 기본: 데스크탑에서 숨김 */
.mobile-menu-btn { display: none; }

/* --------------------------------------------------
   모바일 메뉴 공통 (해상도 무관 — JS 제어 요소)
-------------------------------------------------- */

/* 페이지 오버레이 배경 */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 299;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.nav-overlay.show { display: block; }

/* body 스크롤 잠금 */
body.nav-open { overflow: hidden; }

/* 햄버거 → X 변환 애니메이션 */
/* bars: 22px×2px, gap 5px → center of bar1=1px, bar3=15px, midpoint=8px
   bar1 moves down 7px, bar3 moves up 7px */
.mobile-menu-btn.open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.open .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-menu-btn.open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------
   1. 전역 기반 리셋
   (style.css에도 있지만 이 파일 단독으로도 안전하게)
-------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------
   2. 컨테이너 공통 — 전체 너비 보장
-------------------------------------------------- */
.container,
.courses-page,
.mypage-container,
.course-detail,
.course-detail-grid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------
   3. 누락 레이아웃 클래스 보완
   style.css에 .course-detail만 있고 .course-detail-grid는
   미정의 상태 — 여기서 동일 데스크탑 기준값 추가
-------------------------------------------------- */
.course-detail-grid {
    max-width: 1100px;
    padding: 48px 24px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

/* --------------------------------------------------
   4. 태블릿 (768px ~ 1024px)
-------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .courses-page,
    .course-detail,
    .course-detail-grid {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mypage-container {
        padding: 32px 20px;
    }
}

/* --------------------------------------------------
   5. 모바일 (max-width: 767px)
   데스크탑 레이아웃에 영향 없이 미디어쿼리 안에서만 오버라이드
-------------------------------------------------- */
@media (max-width: 767px) {

    /* -------- 헤더 -------- */
    .header-inner {
        padding: 0 16px;
        gap: 8px;
    }

    /* 로고 텍스트 숨김 (이미지만 표시) */
    .logo-text { display: none; }
    .logo-img  { width: 32px; height: 32px; }

    /* 인증 버튼 크기 소형화 */
    .header-auth .btn { padding: 7px 12px; font-size: 13px; }
    .header-auth .btn-sm { padding: 6px 10px; }

    /* 햄버거 버튼 노출 + 터치 타겟 48px 확보 */
    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 12px 8px;
        min-width: 48px;
        min-height: 48px;
    }

    /* -------- 슬라이드 네비게이션 패널 --------
       style.css @media(max-width:768px) 에서 .nav { display:none }을 설정하지만,
       responsive.css(나중에 로드)가 같은 특이도에서 캐스케이드 우선권을 가짐.
       .nav.open 의 position:absolute 도 아래 .nav.open 규칙이 덮어씀. */
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        width: 280px;
        height: 100dvh;          /* dvh: 주소창 포함 실제 뷰포트 높이 */
        background: #fff;
        z-index: 300;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 64px;       /* 헤더 높이만큼 상단 여백 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    /* 패널 열림 */
    .nav.open {
        position: fixed;         /* style.css .nav.open { position:absolute } 덮어씀 */
        top: 0;
        left: 0;
        right: auto;
        padding-top: 64px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        transform: translateX(0);
        z-index: 300;            /* style.css .nav.open { z-index:99 } 덮어씀 — 오버레이(299)보다 위에 위치 */
    }

    /* -------- 1단계 메뉴 링크 -------- */
    .nav-link {
        padding: 0 20px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 0;
        color: #222;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;        /* 터치 타겟 */
        border-bottom: 1px solid #f0f0f0;
    }
    .nav-link:hover { background: #f7f8fa; color: var(--primary, #1a3c6e); }

    /* 직접 링크 (드롭다운 없는 <a class="nav-link">) */
    a.nav-link { justify-content: flex-start; }

    /* -------- 드롭다운 아코디언 -------- */
    .nav-item {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }
    /* nav-link 자체 border와 중복 방지 */
    .nav-item > .nav-link { border-bottom: none; }

    .nav-dropdown-toggle {
        width: 100%;
        padding: 0 20px;
        font-size: 15px;
        font-weight: 500;
        color: #222;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        text-align: left;
    }
    .nav-dropdown-toggle:hover { background: #f7f8fa; color: var(--primary, #1a3c6e); }

    /* 드롭다운: 기본 숨김, .open 시 펼침 */
    .nav-dropdown {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        white-space: normal;
        background: #f7f8fa;
        display: none;
        padding: 4px 0 8px;
        min-width: 0;
    }
    .nav-item.open .nav-dropdown { display: block; }

    /* 드롭다운 화살표 회전 */
    .nav-arrow { transition: transform 0.25s ease; flex-shrink: 0; }
    .nav-item.open .nav-arrow { transform: rotate(180deg); }

    /* 드롭다운 아이템 링크 */
    .nav-dropdown-link {
        display: flex;
        align-items: center;
        padding: 0 20px 0 32px;
        font-size: 14px;
        color: #444;
        min-height: 48px;
        border-left: 3px solid transparent;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .nav-dropdown-link:hover {
        background: #eef0f3;
        color: var(--primary, #1a3c6e);
        border-left-color: var(--primary, #1a3c6e);
    }

    /* 드롭다운 구분선 */
    .nav-dropdown-divider { margin: 4px 20px; }

    /* 활성 메뉴 하이라이트 */
    .nav-link.active,
    .nav-dropdown-toggle.active {
        color: var(--primary, #1a3c6e);
        font-weight: 700;
        background: #eff4ff;
    }
    .nav-dropdown-link.active {
        color: var(--primary, #1a3c6e);
        font-weight: 600;
        border-left-color: var(--primary, #1a3c6e);
        background: #eff4ff;
    }

    /* -------- 컨테이너 padding 16px --- */
    .container {
        padding: 0 16px;
    }

    .courses-page,
    .course-detail,
    .course-detail-grid {
        padding: 24px 16px;
    }

    .mypage-container {
        padding: 20px 16px;
    }

    /* --- 과정 상세: 사이드바를 아래로 이동 --- */
    /* style.css의 .course-detail은 900px에서 전환,
       .course-detail-grid는 미정의였으므로 여기서 처리 */
    .course-detail-grid {
        grid-template-columns: 1fr;
    }

    .course-detail-grid .course-sidebar-card {
        position: static;
    }

    /* --- 관리자 레이아웃 --- */
    .admin-content {
        padding: 12px 16px;
    }

    .admin-header {
        padding: 12px 16px;
    }

    .admin-header h1 {
        font-size: 1.1rem;
    }

    /* --- 관리자 상세 폼 라벨: 160px 고정폭 → 수직 정렬 --- */
    .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        width: auto;
        min-width: 0;
    }

    /* --- 터치 타겟: 체크박스 확대 --- */
    .checkbox-label input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
}

/* --------------------------------------------------
   6. 모바일 소형 (max-width: 479px)
-------------------------------------------------- */
@media (max-width: 479px) {

    .container {
        padding: 0 12px;
    }

    .courses-page,
    .course-detail,
    .course-detail-grid {
        padding: 20px 12px;
    }

    .mypage-container {
        padding: 16px 12px;
    }

    /* iOS Safari — 폼 입력 시 자동 확대 방지 (font-size 16px 이상 필요) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }

    /* 버튼 크기 소형 화면 조정 */
    .btn {
        padding: 10px 18px;
    }

    .btn-lg,
    .btn--lg {
        padding: 12px 22px;
        font-size: 15px;
    }

    .admin-content {
        padding: 10px 12px;
    }
}

/* ================================================================
   교육과정 목록 페이지 반응형
================================================================ */

/* --------------------------------------------------
   공통 (모든 해상도)
-------------------------------------------------- */

/* 빈 상태 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted, #6b7280);
}
.empty-state-icon {
    margin: 0 auto 16px;
    color: #cbd5e1;
    width: fit-content;
}
.empty-state-text {
    font-size: 15px;
    margin-bottom: 16px;
}

/* 과정 수 표시 */
.course-list-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.course-count {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
}
.course-count strong {
    color: var(--primary, #1a3c6e);
    font-weight: 700;
}

/* 필터 섹션 */
.filter-section {
    margin-bottom: 32px;
}

/* 모바일 필터 토글 버튼 — 데스크탑에서 숨김 */
.filter-toggle {
    display: none;
}

/* --------------------------------------------------
   태블릿 (768px ~ 1024px)
-------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 2열 확실히 고정 (auto-fill이 3열 시도하는 경우 방지) */
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-header {
        padding: 32px 0;
    }
    .course-list-section {
        margin-top: 16px;
    }
}

/* --------------------------------------------------
   모바일 (max-width: 767px)
-------------------------------------------------- */
@media (max-width: 767px) {

    /* ---- 페이지 헤더 ---- */
    .page-header {
        padding: 24px 0;
    }
    .page-header h1 {
        font-size: 1.4rem;
        margin-bottom: 6px;
    }
    .page-header p {
        font-size: 13px;
    }

    /* ---- 섹션 상단 여백 ---- */
    .course-list-section {
        margin-top: 12px;
    }

    /* ---- 필터 섹션: 접기/펼치기 ---- */

    /* 토글 버튼 표시 */
    .filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        background: #fff;
        border: 1.5px solid var(--border, #e2e8f0);
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text, #1a1a2e);
        cursor: pointer;
        font-family: inherit;
        margin-bottom: 0;
        transition: border-color 0.2s ease;
    }
    .filter-toggle:hover {
        border-color: var(--primary, #1a3c6e);
        color: var(--primary, #1a3c6e);
    }
    .filter-toggle[aria-expanded="true"] {
        border-color: var(--primary, #1a3c6e);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
    }
    .filter-toggle span:first-of-type {
        flex: 1;
        text-align: left;
    }
    .filter-toggle-arrow {
        margin-left: auto;
        flex-shrink: 0;
        transition: transform 0.25s ease;
        opacity: 0.6;
    }
    .filter-toggle[aria-expanded="true"] .filter-toggle-arrow {
        transform: rotate(180deg);
    }

    /* 선택된 필터 표시 뱃지 */
    .filter-active-label {
        display: inline-block;
        background: var(--primary, #1a3c6e);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
    }

    /* 필터 바: 기본 숨김 */
    .filter-bar {
        display: none;
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
        padding: 8px 0;
        border: 1.5px solid var(--primary, #1a3c6e);
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background: #fff;
        overflow: hidden;
    }
    .filter-bar.open {
        display: flex;
        margin-bottom: 20px;
    }

    /* 필터 버튼: 세로 목록 */
    .filter-btn {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--border, #e2e8f0);
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        display: block;
        width: 100%;
        min-height: 48px;
    }
    .filter-btn:last-child {
        border-bottom: none;
    }
    .filter-btn.active {
        border-radius: 0;
        background: var(--primary, #1a3c6e);
        color: #fff;
    }

    /* ---- 과정 그리드: 1열 ---- */
    .course-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* ---- 카드 hover 효과 비활성화 (터치 환경) ---- */
    .course-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    }

    /* ---- 카드 이미지: aspect-ratio 유지 ---- */
    .course-card-image,
    .course-card-img {
        aspect-ratio: 16 / 9; /* 이미 설정됨, 모바일에서도 유지 */
    }

    /* ---- 카드 본문 padding 축소 ---- */
    .course-card-body {
        padding: 14px 16px;
        gap: 6px;
    }

    .course-card-title {
        font-size: 15px;
    }

    /* ---- 카드 푸터: 가격 + 버튼 수직 배치 ---- */
    .course-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }

    .course-card-price {
        font-size: 16px;
    }

    /* 상세보기 버튼 풀폭 */
    .course-card-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 11px 16px;
        font-size: 14px;
    }

    /* ---- 과정 수 메타 ---- */
    .course-list-meta {
        justify-content: flex-start;
        margin-bottom: 12px;
    }
}

/* --------------------------------------------------
   페이지네이션 반응형
   (현재 list.jte에 페이지네이션 없음 — 추가 시 자동 적용)
-------------------------------------------------- */

/* 태블릿 이하: 페이지 버튼 크기 확대 */
@media (max-width: 1024px) {
    .page-btn {
        min-width: 40px;
        height: 40px;
    }
}

/* 모바일: 간소화된 페이지네이션
   - 너무 많은 버튼은 숨기고 현재/처음/끝만 표시
   - .page-btn--ellipsis 는 생략 부호 역할 */
@media (max-width: 767px) {
    .pagination {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 24px;
    }

    .page-btn {
        min-width: 44px;     /* 터치 타겟 44px */
        height: 44px;
        font-size: 15px;
        padding: 0 8px;
    }

    /* 중간 페이지 번호 버튼 숨김 (JS로 .page-btn--hidden 부여) */
    .page-btn--hidden {
        display: none;
    }

    /* 생략 부호 */
    .page-btn--ellipsis {
        border: none;
        background: none;
        color: var(--text-muted, #6b7280);
        cursor: default;
        pointer-events: none;
        min-width: 24px;
        padding: 0;
    }

    /* 현재 페이지는 항상 표시 */
    .page-btn--active,
    .page-btn.active {
        display: inline-flex;
    }
}

/* ================================================================
   폼 공통 — 누락 레이아웃 클래스 정의 (모든 해상도)
================================================================ */

/* --------------------------------------------------
   마이페이지 레이아웃
   (style.css에 정의 없어 레이아웃이 동작하지 않던 문제 수정)
-------------------------------------------------- */
.mypage-section {
    padding: 40px 0;
    min-height: calc(100vh - 64px);
    background: var(--bg-gray, #f8fafc);
}

.mypage-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 28px;
    align-items: start;
}

.mypage-sidebar {
    position: sticky;
    top: 80px;
    background: white;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border, #e2e8f0);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}

/* 사이드바 nav — style.css .mypage-nav(가로 탭)를 세로 목록으로 오버라이드 */
.mypage-sidebar .mypage-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.mypage-nav-item {
    display: block;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border, #e2e8f0);
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.mypage-nav-item:last-child { border-bottom: none; }
.mypage-nav-item:hover {
    color: var(--primary, #1a3c6e);
    background: var(--bg-gray, #f8fafc);
}
.mypage-nav-item.active {
    color: var(--primary, #1a3c6e);
    border-left-color: var(--primary, #1a3c6e);
    background: #eff4ff;
    font-weight: 700;
}

.mypage-content {
    background: white;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border, #e2e8f0);
    padding: 32px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}
.mypage-content > h2 {
    font-size: 1.2rem;
    color: var(--primary, #1a3c6e);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border, #e2e8f0);
}

/* --------------------------------------------------
   과정 상세 사이드바 (style.css .course-sidebar-card 와 별도로
   detail.jte 가 사용하는 .sidebar-card 클래스 정의)
-------------------------------------------------- */
.sidebar-card {
    background: white;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 16px);
    padding: 28px;
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.1));
    position: sticky;
    top: 80px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 14px;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bg-gray-dark, #f1f5f9);
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-muted, #6b7280); flex-shrink: 0; }
.info-value { font-weight: 600; text-align: right; color: var(--text, #1a1a2e); }
.info-value.price { color: var(--primary, #1a3c6e); font-size: 1.25rem; }

/* --------------------------------------------------
   자격증 페이지 테이블 (certificates.jte)
   style.css에 .table / .table-responsive 미정의
-------------------------------------------------- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius, 10px);
    border: 1px solid var(--border, #e2e8f0);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.table th {
    background: var(--bg-gray-dark, #f1f5f9);
    padding: 11px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text, #1a1a2e);
    border-bottom: 2px solid var(--border, #e2e8f0);
    white-space: nowrap;
}
.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    color: var(--text, #1a1a2e);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-gray, #f8fafc); }

/* 배지 추가 변형 (style.css .badge--* 외에 certificates.jte 사용 .badge-* 형식) */
.badge-success { background: var(--success-bg, #dcfce7); color: var(--success, #16a34a); }
.badge-warning { background: var(--warning-bg, #fef3c7); color: var(--warning, #d97706); }
.badge-error   { background: var(--error-bg,   #fee2e2); color: var(--error,   #dc2626); }

/* --------------------------------------------------
   폼 공통 — 에러 상태
-------------------------------------------------- */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea,
.form-group.has-error .form-control {
    border-color: var(--error, #dc2626);
    background: #fff8f8;
}
.form-group.has-error input:focus,
.form-group.has-error select:focus,
.form-group.has-error textarea:focus {
    border-color: var(--error, #dc2626);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* --------------------------------------------------
   폼 액션 영역 공통
-------------------------------------------------- */
.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}
/* 기본: 버튼 좌측 정렬 */
.form-actions--start { justify-content: flex-start; }

/* ================================================================
   폼 모바일 최적화 (max-width: 767px)
================================================================ */
@media (max-width: 767px) {

    /* -------- 마이페이지: 사이드바 → 가로 탭 -------- */
    .mypage-section { padding: 0; background: white; }

    .mypage-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mypage-sidebar {
        position: static;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--border, #e2e8f0);
        box-shadow: none;
        background: var(--bg-gray, #f8fafc);
    }

    /* 세로 목록 → 가로 스크롤 탭으로 전환 */
    .mypage-sidebar .mypage-nav {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0;
        background: white;
        border-bottom: 2px solid var(--border, #e2e8f0);
    }
    .mypage-sidebar .mypage-nav::-webkit-scrollbar { display: none; }

    .mypage-nav-item {
        flex-shrink: 0;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-right: none;
        border-top: none;
        margin-bottom: -2px;
        padding: 14px 16px;
        min-height: 52px;         /* 터치 타겟 */
        display: inline-flex;
        align-items: center;
        font-size: 14px;
    }
    .mypage-nav-item:last-child { border-bottom: 3px solid transparent; }
    .mypage-nav-item.active {
        border-left: none;
        border-bottom: 3px solid var(--primary, #1a3c6e);
        background: none;
        color: var(--primary, #1a3c6e);
    }

    .mypage-content {
        border-radius: 0;
        border: none;
        padding: 24px 16px 32px;
        box-shadow: none;
    }
    .mypage-content > h2 {
        font-size: 1.1rem;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }

    /* -------- 과정 상세 사이드바 -------- */
    .sidebar-card {
        position: static;
        border-radius: var(--radius, 10px);
        padding: 20px 16px;
    }
    .info-row { font-size: 13px; padding: 9px 0; }
    .info-value.price { font-size: 1.1rem; }

    /* -------- 자격증 테이블 -------- */
    .table th, .table td { padding: 10px 12px; font-size: 13px; }

    /* -------- 폼 입력 요소: 48px 높이 + 16px 폰트 --------
       iOS Safari: font-size < 16px 이면 입력 시 뷰포트 자동 확대됨 */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-control {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 14px;
    }
    .form-group textarea,
    .form-group textarea.form-control {
        min-height: 120px;
    }

    /* 타입별 iOS 확대 방지 (이전 479px 섹션에서 767px 으로 상향) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
    }

    /* 레이블 */
    .form-group label,
    .form-label {
        font-size: 15px;
        font-weight: 600;
    }

    /* 에러 메시지 */
    .field-error { font-size: 13px; }

    /* -------- 폼 액션 버튼: 풀폭, 52px -------- */
    .form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 20px;
    }
    .form-actions .btn {
        width: 100%;
        min-height: 52px;
        font-size: 15px;
        justify-content: center;
        text-align: center;
    }

    /* -------- 로그인/회원가입 카드 -------- */
    .auth-container {
        padding: 24px 16px;
        align-items: flex-start;
        min-height: auto;
    }
    .auth-card {
        padding: 28px 20px;
        border-radius: var(--radius, 10px);
    }
    .auth-card h2 { font-size: 1.35rem; }
    .auth-form    { margin-top: 20px; }
    .auth-form .btn-primary {
        min-height: 52px;
        font-size: 16px;
        padding: 14px;
    }

    /* -------- 시험 접수 폼 카드 -------- */
    .form-card {
        padding: 20px 16px;
        border-radius: var(--radius, 10px);
        max-width: none;
    }

    /* -------- 접수/제출 버튼 sticky 푸터 -------- */
    .form-sticky-footer {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 12px 16px 16px;
        /* form-card padding 상쇄해서 카드 엣지까지 확장 */
        margin: 16px -16px -20px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
        border-top: 1px solid var(--border, #e2e8f0);
        z-index: 50;
    }
    .form-sticky-footer .btn {
        width: 100%;
        min-height: 52px;
        font-size: 16px;
        font-weight: 700;
        justify-content: center;
    }

    /* -------- 체크박스 터치 영역 확대 -------- */
    .checkbox-label {
        min-height: 48px;
        align-items: center;
        padding: 6px 0;
        gap: 12px;
    }
    .checkbox-label input[type="checkbox"] {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        cursor: pointer;
        accent-color: var(--primary, #1a3c6e);
    }
}

/* ================================================================
   폼 UI 컴포넌트 공통 (모든 해상도)
================================================================ */

/* 입력 힌트 텍스트 */
.field-hint {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
}

/* 비밀번호 표시 토글 버튼이 있는 input 래퍼 */
.input-with-action {
    position: relative;
    display: flex;
    align-items: stretch;
}
.input-with-action input {
    flex: 1;
    padding-right: 48px; /* 버튼 공간 확보 */
}
.input-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #6b7280);
    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
    transition: color 0.2s ease;
}
.input-toggle-btn:hover { color: var(--primary, #1a3c6e); }
/* input-with-action 안의 .form-group input → input 스타일 유지 */
.input-with-action .form-group input,
.form-group .input-with-action input {
    width: 100%;
}

/* 시험 접수 — 응시자 정보 요약 카드 */
.applicant-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-gray, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    padding: 14px 16px;
    margin-bottom: 24px;
    font-size: 14px;
}
.applicant-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    gap: 12px;
}
.applicant-summary-row + .applicant-summary-row {
    border-top: 1px solid var(--border, #e2e8f0);
}
.applicant-summary-label {
    color: var(--text-muted, #6b7280);
    flex-shrink: 0;
    font-size: 13px;
}
.applicant-summary-value {
    font-weight: 600;
    color: var(--text, #1a1a2e);
    text-align: right;
    word-break: break-all;
}

/* form-sticky-footer — 데스크탑에서는 일반 form-actions 처럼 표시 */
.form-sticky-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #e2e8f0);
}
.form-sticky-footer .btn {
    min-width: 140px;
}

/* ================================================================
   테이블 → 카드형 변환 (시험/평가·자격증 모바일)
================================================================ */

/* ---- 공통: exam-table / table 기본 스타일 ---- */
.exam-table,
.table {
    width: 100%;
    border-collapse: collapse;
}
.exam-table th,
.exam-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
}
.exam-table thead th {
    background: var(--bg-gray, #f8fafc);
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    white-space: nowrap;
}
.exam-table tbody tr:hover {
    background: var(--bg-gray, #f8fafc);
}

/* 빈 행 (empty state) */
.td-empty {
    padding: 40px 20px;
    color: var(--text-muted, #6b7280);
    text-align: center;
}

/* 취소됨 등 연한 텍스트 */
.text-muted {
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
}

/* 다운로드 버튼 (데스크탑: 좌측 정렬) */
.td-download { white-space: nowrap; }
.cert-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* 취소 신청 폼 → inline-flex */
.td-action form {
    display: inline-flex;
}

/* 환불 규정 테이블: 모바일에서도 2열 유지 (너비가 좁으므로 카드 불필요) */
.refund-table { table-layout: fixed; }
.refund-table th:first-child,
.refund-table td:first-child { width: 60%; }

/* mypage-card wrapper */
.mypage-card {
    background: white;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 10px);
    overflow: hidden;
}
.mypage-card .table-wrap { overflow-x: auto; }

/* ---- 모바일: 테이블 → 카드형 변환 ---- */
@media (max-width: 767px) {

    /* thead 숨김 */
    .exam-table thead,
    .table thead {
        display: none;
    }

    /* tr → 카드 */
    .exam-table tbody tr,
    .table tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border, #e2e8f0);
        border-radius: var(--radius, 10px);
        margin-bottom: 12px;
        background: white;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    /* 마지막 tr은 하단 margin 불필요 */
    .exam-table tbody tr:last-child,
    .table tbody tr:last-child {
        margin-bottom: 0;
    }
    /* hover 효과 카드에도 */
    .exam-table tbody tr:hover,
    .table tbody tr:hover {
        background: var(--bg-gray, #f8fafc);
    }

    /* td → label + value 행 */
    .exam-table td,
    .table td {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border, #e2e8f0);
        font-size: 14px;
    }
    .exam-table td:last-child,
    .table td:last-child {
        border-bottom: none;
    }

    /* data-label → ::before 라벨 */
    .exam-table td[data-label]::before,
    .table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        width: 80px;
        font-weight: 600;
        font-size: 12px;
        color: var(--text-muted, #6b7280);
        padding-top: 2px;
    }

    /* 빈 행은 카드 스타일 해제 */
    .exam-table tr:has(.td-empty),
    .table tr:has(.td-empty) {
        border: none;
        box-shadow: none;
        background: transparent;
    }
    .td-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 16px;
    }
    .td-empty::before { display: none; }

    /* 취소 신청 td → 버튼만 풀폭 */
    .td-action {
        padding: 12px 14px;
    }
    .td-action form {
        width: 100%;
    }
    .td-action form .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .td-action .text-muted {
        display: block;
        text-align: center;
        width: 100%;
        padding: 8px 0;
    }

    /* 자격증 다운로드 버튼 → 풀폭, 48px */
    .td-download {
        padding: 12px 14px;
    }
    .td-download::before { display: none; }
    .cert-download-btn {
        width: 100%;
        min-height: 48px;
        font-size: 15px;
        font-weight: 700;
        justify-content: center;
        border-radius: var(--radius-sm, 6px);
    }

    /* 환불 규정 테이블: 2열 유지 (카드 변환 제외) */
    .refund-table thead { display: table-header-group; }
    .refund-table tbody tr {
        display: table-row;
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
    }
    .refund-table td {
        display: table-cell;
        border-bottom: 1px solid var(--border, #e2e8f0);
        padding: 10px 12px;
        font-size: 13px;
    }
    .refund-table td::before { display: none; }

    /* table-wrap 수평 스크롤 해제 (카드형이므로 불필요) */
    .exam-table + *,
    .mypage-card .table-wrap {
        overflow-x: visible;
    }

    /* exam-layout 패딩 축소 */
    .exam-content { padding: 0; }
    .exam-layout { gap: 0; }

    /* 시험 접수 확인 / 취소 섹션 헤더 */
    .section-subtitle {
        font-size: 1rem;
        margin-top: 28px;
        margin-bottom: 12px;
    }
}

/* ================================================================
   자격증 페이지 — 데스크탑 다운로드 버튼
================================================================ */
.cert-download-btn {
    padding: 7px 14px;
}

/* ================================================================
   시험 서브넵 모바일 — 가로 스크롤 탭
================================================================ */
@media (max-width: 767px) {
    .exam-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* 사이드 nav → 가로 스크롤 탭 */
    .exam-subnav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 2px solid var(--border, #e2e8f0);
        background: white;
        padding: 0;
        gap: 0;
        width: 100%;   /* exam-layout(flex column) 아이템이 부모 너비를 채우도록 */
        min-width: 0;  /* flex 아이템 기본 min-width:auto 해제 → overflow-x:auto 정상 발동 */
    }
    .exam-subnav::-webkit-scrollbar { display: none; }

    /* 그룹 제목 숨김 (가로 탭에서 불필요) */
    .exam-subnav-group { display: contents; }
    .exam-subnav-title { display: none; }

    .exam-subnav-link {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 13px 14px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        font-size: 13px;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        color: var(--text-muted, #6b7280);
        text-decoration: none;
        transition: color 0.15s;
    }
    .exam-subnav-link.active {
        background: transparent;
        color: var(--primary, #1a3c6e);
        border-bottom-color: var(--primary, #1a3c6e);
        font-weight: 700;
    }

    .exam-content {
        padding: 20px 0 32px;
    }
}

/* ================================================================
   접근성 — 스킵 내비게이션
================================================================ */
.skip-nav {
    position: absolute;
    top: -200%;
    left: 0;
    z-index: 10000;
    background: var(--primary, #1a3c6e);
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm, 6px) 0;
    transition: top 0.2s ease;
    white-space: nowrap;
}
.skip-nav:focus,
.skip-nav:focus-visible {
    top: 0;
    color: white;
    outline: 3px solid var(--accent, #e8a020);
    outline-offset: 0;
}

/* ================================================================
   접근성 — 전역 포커스 스타일 (:focus-visible)
   키보드 탐색 시에만 표시, 마우스 클릭에는 표시 안 됨
================================================================ */
:focus-visible {
    outline: 3px solid var(--primary, #1a3c6e);
    outline-offset: 2px;
    border-radius: 3px;
}

/* 커스텀 포커스 스타일(border + box-shadow)이 있는 폼 요소 — 이중 outline 방지 */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible,
.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

/* 버튼은 흰 바탕이므로 포커스 링 색상 보정 */
.btn:focus-visible {
    outline: 3px solid var(--primary, #1a3c6e);
    outline-offset: 3px;
}
.btn-primary:focus-visible,
.btn--primary:focus-visible {
    outline-color: var(--accent, #e8a020);
}

/* ================================================================
   터치 — touch-action: manipulation (탭 300ms 딜레이 제거)
================================================================ */
a,
button,
[role="button"],
.btn,
.filter-btn,
.nav-link,
.nav-dropdown-toggle,
.nav-dropdown-link,
.nav-user-btn,
.dropdown-item,
.mobile-menu-btn,
.exam-subnav-link,
.mypage-nav a,
.mypage-nav-item,
.input-toggle-btn,
.page-btn,
label[for] {
    touch-action: manipulation;
}

/* ================================================================
   터치 — @media (hover: none): 터치 기기에서 hover 효과 제거
   iOS/Android에서 :hover 상태가 탭 후 고착되는 현상 방지
================================================================ */
@media (hover: none) {

    /* 과정 카드 lift 애니메이션 제거 */
    .course-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    }
    .course-card:hover .course-card-img img,
    .course-card:hover .course-card-image img {
        transform: none;
    }
    /* 탭 피드백: 살짝 어두워지는 효과 */
    .course-card:active {
        box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.1));
        background: var(--bg-gray, #f8fafc);
    }

    /* 네비게이션 항목 배경 hover 고착 방지 */
    .nav-dropdown-link:hover { background: transparent; color: inherit; }
    .dropdown-item:hover     { background: transparent; color: inherit; }
    .mypage-nav a:hover      { color: inherit; }
    .filter-btn:hover        { border-color: var(--border, #e2e8f0); color: var(--text-muted, #6b7280); }
    .page-btn:hover          { border-color: var(--border, #e2e8f0); color: var(--text, #1a1a2e); }
    .exam-subnav-link:hover  { background: transparent; color: var(--text-muted, #6b7280); }
    .footer-link-group a:hover,
    .footer-links a:hover    { color: inherit; }
    a:hover                  { color: inherit; }

    /* :active 피드백으로 대체 */
    .btn-primary:active,
    .btn--primary:active     { background: var(--primary-dark, #122b52); }
    .btn-outline:active,
    .btn--outline:active     { background: var(--primary, #1a3c6e); color: white; }
    .nav-dropdown-link:active,
    .dropdown-item:active    { background: var(--bg-gray, #f8fafc); color: var(--primary, #1a3c6e); }
    .filter-btn.active       { border-color: var(--primary, #1a3c6e); color: var(--primary, #1a3c6e); }
    .exam-subnav-link.active { background: transparent; color: var(--primary, #1a3c6e); }
}